Add tooltips to rewards page

spacemeshos · Oct 28, 2024 · 47aa18f · 47aa18f
1 parent 1cd8e6e
commit 47aa18f
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git a/src/components/CountBlock/RightSideBlock.jsx b/src/components/CountBlock/RightSideBlock.jsx
@@ -15,11 +15,13 @@ type Props = {
   coins?: string,
   label?: string,
   disableRightColumnData?: boolean,
+  tooltip1?: any,
+  tooltip2?: any,
 };
 
 const RightSideBlock = (props: Props) => {
   const { color, unit, number, startTime, coinCaption,
-    coins, label, rewards, disableRightColumnData } = props;
+    coins, label, rewards, disableRightColumnData, tooltip1, tooltip2 } = props;
 
   const blockWithTime = () => (
     <div style={{ backgroundColor: color.bgColor }} className="amountBlock">
@@ -63,12 +65,13 @@ const RightSideBlock = (props: Props) => {
           fontSize: setFontSize(number),
           lineHeight: setLineHeight(number),
         }}
+        {...tooltip1}
       >
         {commaNumber(number) || '000'}
       </div>
       <div className="rightColumn-desc">{unit}</div>
       {!disableRightColumnData && (
-        <div className="rightColumn-data">
+        <div className="rightColumn-data" {...tooltip2}>
           <p>{`${coinCaption}`}</p>
           <p>{`${formatSmidge(coins)}`}</p>
         </div>

diff --git a/src/components/InfoBlock/index.jsx b/src/components/InfoBlock/index.jsx
@@ -15,7 +15,7 @@ const InfoBlock = ({ accounts, security, epoch, layer, rewards, smeshers }) => (
         <p
           className="infoBlock-item-number"
           data-tooltip-id="overview-tooltip"
-          data-tooltip-content="Cumulative count of accounts since the genesis block."
+          data-tooltip-content="This shows the cumulative count of accounts since the genesis block."
           data-tooltip-place="bottom"
         >
           <Link to={`/${ACCOUNTS}`}>
@@ -28,7 +28,7 @@ const InfoBlock = ({ accounts, security, epoch, layer, rewards, smeshers }) => (
         <p
           className="infoBlock-item-number"
           data-tooltip-id="overview-tooltip"
-          data-tooltip-content="Rewards value for the current epoch."
+          data-tooltip-content="This shows the total combined value of all rewards distributed in SMH for the current epoch."
           data-tooltip-place="bottom"
         >
           <Link to={`/${REWARDS}`}>
@@ -41,7 +41,7 @@ const InfoBlock = ({ accounts, security, epoch, layer, rewards, smeshers }) => (
         <p
           className="infoBlock-item-number"
           data-tooltip-id="overview-tooltip"
-          data-tooltip-content="Amount of storage commited by all active smeshers in the previous epoch."
+          data-tooltip-content="This shows the amount of storage committed by all active smeshers in the previous epoch."
           data-tooltip-place="bottom"
         >
           {security ? byteConverter(security) : (<Loader size={20} />)}
@@ -52,7 +52,7 @@ const InfoBlock = ({ accounts, security, epoch, layer, rewards, smeshers }) => (
         <p
           className="infoBlock-item-number"
           data-tooltip-id="overview-tooltip"
-          data-tooltip-content="Current epoch number."
+          data-tooltip-content="This shows the current epoch number."
           data-tooltip-place="bottom"
         >
           <Link to={`/${EPOCHS}/${epoch}`}>
@@ -65,7 +65,7 @@ const InfoBlock = ({ accounts, security, epoch, layer, rewards, smeshers }) => (
         <p
           className="infoBlock-item-number"
           data-tooltip-id="overview-tooltip"
-          data-tooltip-content="Current layer number."
+          data-tooltip-content="This shows the current layer number."
           data-tooltip-place="bottom"
         >
           <Link to={`/${LAYERS}/${layer}`}>
@@ -78,7 +78,7 @@ const InfoBlock = ({ accounts, security, epoch, layer, rewards, smeshers }) => (
         <p
           className="infoBlock-item-number"
           data-tooltip-id="overview-tooltip"
-          data-tooltip-content="Count of active smeshers in the current epoch."
+          data-tooltip-content="This shows the count of active smeshers in the current epoch."
           data-tooltip-place="bottom"
         >
           <Link to={`/${SMESHER}`}>

diff --git a/src/routes/rewards.jsx b/src/routes/rewards.jsx
@@ -1,4 +1,5 @@
 import { observer } from 'mobx-react';
+import { Tooltip } from 'react-tooltip';
 import TitleBlock from '../components/TitleBlock';
 import { getColorByPageName } from '../helper/getColorByPageName';
 import { REWARDS } from '../config/constants';
@@ -37,8 +38,19 @@ const Rewards = () => {
           coinCaption="Rewards value since genesis"
           coins={store.overview.rewards_sum}
           rewards
+          tooltip1={{
+            'data-tooltip-id': 'rewards-tooltip',
+            'data-tooltip-html': 'This shows the total number of individual rewards distributed.<br/> Each reward represents a separate payout made to participants.',
+            'data-tooltip-place': 'bottom',
+          }}
+          tooltip2={{
+            'data-tooltip-id': 'rewards-tooltip',
+            'data-tooltip-html': 'This shows the total combined value of all rewards distributed in SMH.<br/> It represents the sum of all individual rewards.',
+            'data-tooltip-place': 'bottom',
+          }}
         />
       </div>
+      <Tooltip id="rewards-tooltip" multiline />
       <Table name={REWARDS} />
     </>
   );