Merge pull request #31 from dmccartney/daniel-tooltip-ongoing-interval

feat: add tooltip to ongoing rewards to explain a bit
dmccartney · Oct 24, 2023 · e2f9878 · e2f9878
2 parents f00f68c + 9c34063
commit e2f9878
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 30 deletions.
diff --git a/web/src/components/ClaimButtonGroup.js b/web/src/components/ClaimButtonGroup.js
@@ -1,6 +1,6 @@
 import useK from "../hooks/useK";
 import useCanConnectedAccountWithdraw from "../hooks/useCanConnectedAccountWithdraw";
-import { Button, Skeleton } from "@mui/material";
+import { Button, Skeleton, Tooltip } from "@mui/material";
 import { CheckCircle, HourglassTop } from "@mui/icons-material";
 import _ from "lodash";
 import ClaimAndStakeForm from "./ClaimAndStakeForm";
@@ -23,16 +23,34 @@ export default function ClaimButtonGroup({
   }
   if (type !== "finalized") {
     return (
-      <Button size="small" disabled color="inherit" endIcon={<HourglassTop />}>
-        {_.capitalize(type)}
-      </Button>
+      <Tooltip title="This interval is still in progress. Reward amounts will continue to grow until they are finalized at the end of the interval.">
+        <span>
+          <Button
+            size="small"
+            disabled
+            color="inherit"
+            endIcon={<HourglassTop />}
+          >
+            {_.capitalize(type)}
+          </Button>
+        </span>
+      </Tooltip>
     );
   }
   if (isClaimed) {
     return (
-      <Button size="small" disabled color="inherit" endIcon={<CheckCircle />}>
-        Claimed
-      </Button>
+      <Tooltip title="Periodic rewards for this interval were already claimed.">
+        <span>
+          <Button
+            size="small"
+            disabled
+            color="inherit"
+            endIcon={<CheckCircle />}
+          >
+            Claimed
+          </Button>
+        </span>
+      </Tooltip>
     );
   }
   return (

diff --git a/web/src/components/NodePeriodicRewardsTable.js b/web/src/components/NodePeriodicRewardsTable.js
@@ -1,5 +1,5 @@
 import { DataGrid } from "@mui/x-data-grid";
-import { Button, Stack, Typography } from "@mui/material";
+import { Button, Stack, Tooltip, Typography } from "@mui/material";
 import { Link } from "react-router-dom";
 import { ethers } from "ethers";
 import moment from "moment";
@@ -90,19 +90,32 @@ const INTERVAL_COLS = [
     valueGetter: ({ value }) => ethers.BigNumber.from(value || 0),
     valueFormatter: (params) => ethers.utils.formatEther(params.value || 0),
     renderCell: ({ value, row: { type } }) => (
-      <Stack direction="row" spacing={1} alignItems="baseline">
-        {type === "ongoing" && (
-          <Typography component="span" variant="inherit" color="text.secondary">
-            &ge;
-          </Typography>
-        )}
-        <CurrencyValue
-          size="small"
-          currency="eth"
-          placeholder="0"
-          value={value}
-        />
-      </Stack>
+      <Tooltip
+        sx={{ cursor: "help" }}
+        title={
+          type === "ongoing"
+            ? "This is the node’s share of the current smoothing pool balance. It will continue to grow until the end of the interval."
+            : "This is the node’s share of the smoothing pool for the interval."
+        }
+      >
+        <Stack direction="row" spacing={1} alignItems="baseline">
+          {type === "ongoing" && (
+            <Typography
+              component="span"
+              variant="inherit"
+              color="text.secondary"
+            >
+              &ge;
+            </Typography>
+          )}
+          <CurrencyValue
+            size="small"
+            currency="eth"
+            placeholder="0"
+            value={value}
+          />
+        </Stack>
+      </Tooltip>
     ),
   },
   {
@@ -118,14 +131,27 @@ const INTERVAL_COLS = [
     },
     valueFormatter: (params) => ethers.utils.formatEther(params.value || 0),
     renderCell: ({ value, row: { type } }) => (
-      <Stack direction="row" spacing={1} alignItems="baseline">
-        {type === "ongoing" && (
-          <Typography component="span" variant="inherit" color="text.secondary">
-            &ge;
-          </Typography>
-        )}
-        <CurrencyValue size="small" currency="rpl" value={value} />
-      </Stack>
+      <Tooltip
+        sx={{ cursor: "help" }}
+        title={
+          type === "ongoing"
+            ? "This is the node’s share of RPL inflation for the interval. It will continue to grow until the end of the interval. At the end of the interval, if the node’s RPL stake is below 10% of borrowed ETH, then they receive no inflation RPL and this value becomes zero."
+            : "This is the node’s share of RPL inflation for the interval."
+        }
+      >
+        <Stack direction="row" spacing={1} alignItems="baseline">
+          {type === "ongoing" && (
+            <Typography
+              component="span"
+              variant="inherit"
+              color="text.secondary"
+            >
+              &ge;
+            </Typography>
+          )}
+          <CurrencyValue size="small" currency="rpl" value={value} />
+        </Stack>
+      </Tooltip>
     ),
   },
 ];

diff --git a/web/src/components/SettingsList.js b/web/src/components/SettingsList.js
@@ -12,7 +12,9 @@ import {
   Stack,
   TextField,
   Tooltip,
+  Typography,
 } from "@mui/material";
+import { Help } from "@mui/icons-material";
 
 export default function SettingsList() {
   let { isConnected } = useAccount();
@@ -101,7 +103,18 @@ export default function SettingsList() {
         </Grid>
       </Grid>
       <ListItem>
-        <ListItemText primary="Ongoing Rewards" />
+        <ListItemText
+          primary={
+            <>
+              Ongoing Rewards
+              <Tooltip title="To preview the ongoing interval’s rewards, we rely on an off-chain source to calculate an estimate of the rewards tree.">
+                <Typography component="span" color="text.secondary">
+                  <Help sx={{ ml: 1 }} fontSize="small" />
+                </Typography>
+              </Tooltip>
+            </>
+          }
+        />
         <Tooltip arrow title="TODO: make Ongoing Rewards configurable">
           <Stack direction="column" alignItems="flex-end">
             <ButtonGroup disabled size="small">