fix: add the missing tooltips (#399)

* fix: add the missing tooltips * fix: tooltip position for builer all time share * fix: add tooltip to total allocation * fix: all time rewards tooltip and capitalcase in backer reward table * fix: replace tooltip text
RootstockCollective · Nov 25, 2024 · 1aa0dd2 · 1aa0dd2
1 parent 7d69622
commit 1aa0dd2
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 10 deletions.
diff --git a/src/app/collective-rewards/leaderboard/BuildersLeaderBoardTable.tsx b/src/app/collective-rewards/leaderboard/BuildersLeaderBoardTable.tsx
@@ -31,8 +31,7 @@ const tableHeaders: TableHeader[] = [
   {
     label: 'Total Allocations',
     className: 'w-[16%]',
-    // eslint-disable-next-line quotes
-    tooltip: "The Builder's share of the total allocations",
+    tooltip: 'The Builder’s share of the total stRIF allocations',
     sortKey: RewardsColumnKeyEnum.totalAllocationPercentage,
   },
   // TODO: text-center isn't applied
@@ -108,7 +107,7 @@ export const BuildersLeaderBoardTable: FC = () => {
     <div className="flex flex-col gap-5 w-full">
       <TableCore className="table-fixed">
         <TableHead>
-          <TableRow>
+          <TableRow className="normal-case">
             {tableHeaders.map(header => (
               <TableHeaderCell
                 key={header.label}

diff --git a/src/app/collective-rewards/metrics/AllTimeRewardsMetrics.tsx b/src/app/collective-rewards/metrics/AllTimeRewardsMetrics.tsx
@@ -69,7 +69,7 @@ export const AllTimeRewardsMetrics: FC<AllTimeRewardsProps> = ({ gauges, tokens:
         title="All time rewards"
         data-testid="AllTimeRewards"
         tooltip={{
-          text: 'Total of Builders and Backers rewards paid/claimed/received',
+          text: 'Total rewards distributed to Builders and Backers',
         }}
       />
       <TokenRewardsMetrics gauges={gauges} token={rif} />

diff --git a/src/app/collective-rewards/rewards/backers/AllTimeShare.tsx b/src/app/collective-rewards/rewards/backers/AllTimeShare.tsx
@@ -52,7 +52,14 @@ export const AllTimeShare: FC<AllTimeShareProps> = ({ gauges, tokens: { rif } })
   return (
     <MetricsCardWithSpinner isLoading={isLoading} borderless>
       <div className="flex flex-col gap-y-[10px]">
-        <MetricsCardTitle title="All time share" data-testid="AllTimeShare" />
+        <MetricsCardTitle
+          title="All time share"
+          data-testid="AllTimeShare"
+          tooltip={{
+            text: 'Your share of all Backers’ rewards',
+            popoverProps: { size: 'medium' },
+          }}
+        />
         <MetricsCardContent>{amount}</MetricsCardContent>
       </div>
     </MetricsCardWithSpinner>

diff --git a/src/app/collective-rewards/rewards/backers/BackerRewardsTable.tsx b/src/app/collective-rewards/rewards/backers/BackerRewardsTable.tsx
@@ -37,6 +37,7 @@ const tableHeaders: TableHeader[] = [
     label: 'Total Allocations',
     className: 'w-[18%]',
     sortKey: RewardsColumnKeyEnum.totalAllocationPercentage,
+    tooltip: 'Your share of the total allocations for each Builder',
   },
   { label: 'Claimable Rewards', className: 'w-[20%]', sortKey: RewardsColumnKeyEnum.claimableRewards },
   { label: 'All Time Rewards', className: 'w-[20%]', sortKey: RewardsColumnKeyEnum.allTimeRewards },
@@ -111,7 +112,7 @@ const RewardsTable: FC<BackerRewardsTable> = ({ builder, gauges, tokens }) => {
     <div className="flex flex-col gap-5 w-full">
       <TableCore className="table-fixed">
         <TableHead>
-          <TableRow className="min-h-0">
+          <TableRow className="min-h-0 normal-case">
             {tableHeaders.map(header => (
               <TableHeaderCell
                 key={header.label}

diff --git a/src/app/collective-rewards/rewards/backers/Rewards.tsx b/src/app/collective-rewards/rewards/backers/Rewards.tsx
@@ -45,6 +45,10 @@ export const Rewards: FC<RewardsProps> = ({ builder, gauges, tokens }) => {
                 gauges={gauges}
                 tokens={tokens}
                 rewards={['estimated']}
+                tooltip={{
+                  text: 'The information displayed is dynamic and may vary based on total rewards available and user activity. This data is provided for informational purposes only. Please note that the final reward amount will be determined at the end of the cycle.',
+                  popoverProps: { size: 'medium' },
+                }}
               />
             </MetricContainer>
             <MetricContainer>
@@ -55,6 +59,10 @@ export const Rewards: FC<RewardsProps> = ({ builder, gauges, tokens }) => {
                 gauges={gauges}
                 tokens={tokens}
                 rewards={['earned', 'claimed']}
+                tooltip={{
+                  text: 'Total of your received and claimable rewards',
+                  popoverProps: { size: 'medium' },
+                }}
               />
             </MetricContainer>
             <MetricContainer>

diff --git a/src/app/collective-rewards/rewards/backers/RewardsCard.tsx b/src/app/collective-rewards/rewards/backers/RewardsCard.tsx
@@ -6,6 +6,7 @@ import {
   Token,
   RewardDetails,
   useBackerRewardsContext,
+  TooltipProps,
 } from '@/app/collective-rewards/rewards'
 import { useHandleErrors } from '@/app/collective-rewards/utils'
 import { formatBalanceToHuman } from '@/app/user/Balances/balanceUtils'
@@ -64,17 +65,19 @@ type RewardsCardProps = Omit<RewardDetails, 'gauge'> & {
   title: string
   'data-testid': string
   rewards: Rewards[]
+  tooltip?: TooltipProps
 }
 
 export const RewardsCard: FC<RewardsCardProps> = ({
   title,
   'data-testid': dataTestId,
   tokens: { rif, rbtc },
+  tooltip,
   ...rest
 }) => {
   return (
     <MetricsCard borderless>
-      <MetricsCardTitle title={title} data-testid={dataTestId} />
+      <MetricsCardTitle title={title} data-testid={dataTestId} tooltip={tooltip} />
       <TokenRewardsMetrics {...rest} token={rif} />
       <TokenRewardsMetrics {...rest} token={rbtc} />
     </MetricsCard>

diff --git a/src/app/collective-rewards/rewards/builders/AllTimeRewards.tsx b/src/app/collective-rewards/rewards/builders/AllTimeRewards.tsx
@@ -69,7 +69,14 @@ type AllTimeRewardsProps = Omit<BuilderRewardDetails, 'builder'>
 export const AllTimeRewards: FC<AllTimeRewardsProps> = ({ tokens: { rif, rbtc }, ...rest }) => {
   return (
     <MetricsCard borderless>
-      <MetricsCardTitle title="All time rewards" data-testid="AllTimeRewards" />
+      <MetricsCardTitle
+        title="All time rewards"
+        data-testid="AllTimeRewards"
+        tooltip={{
+          text: 'Total of your received and claimable rewards',
+          popoverProps: { size: 'medium' },
+        }}
+      />
       <TokenRewardsMetrics {...rest} token={rif} />
       <TokenRewardsMetrics {...rest} token={rbtc} />
     </MetricsCard>

diff --git a/src/app/collective-rewards/rewards/builders/AllTimeShare.tsx b/src/app/collective-rewards/rewards/builders/AllTimeShare.tsx
@@ -57,7 +57,14 @@ export const AllTimeShare: FC<AllTimeShareProps> = ({ gauge, gauges, tokens: { r
   return (
     <MetricsCardWithSpinner isLoading={isLoading} borderless>
       <div className="flex flex-col gap-y-[10px]">
-        <MetricsCardTitle title="All time share" data-testid="AllTimeShare" />
+        <MetricsCardTitle
+          title="All time share"
+          data-testid="AllTimeShare"
+          tooltip={{
+            text: 'Your share of all Builders’ rewards',
+            popoverProps: { size: 'medium', position: 'left' },
+          }}
+        />
         <MetricsCardContent>{amount}</MetricsCardContent>
       </div>
     </MetricsCardWithSpinner>

diff --git a/src/app/collective-rewards/rewards/builders/EstimatedRewards.tsx b/src/app/collective-rewards/rewards/builders/EstimatedRewards.tsx
@@ -86,7 +86,14 @@ type EstimatedRewardsProps = BuilderRewardDetails
 export const EstimatedRewards: FC<EstimatedRewardsProps> = ({ tokens: { rif, rbtc }, ...rest }) => {
   return (
     <MetricsCard borderless>
-      <MetricsCardTitle title="Estimated rewards" data-testid="EstimatedRewards" />
+      <MetricsCardTitle
+        title="Estimated rewards"
+        data-testid="EstimatedRewards"
+        tooltip={{
+          text: 'The information displayed is dynamic and may vary based on total rewards available and user activity. This data is provided for informational purposes only. Please note that the final reward amount will be determined at the end of the cycle.',
+          popoverProps: { size: 'medium' },
+        }}
+      />
       <TokenRewards {...rest} token={{ ...rif, id: 'rif' }} />
       <TokenRewards {...rest} token={{ ...rbtc, id: 'rbtc' }} />
     </MetricsCard>