feat: support claim-all intervals outside of sweep action

.github/workflows/web-pull-request.yml

@@ -16,6 +16,8 @@ jobs:
       - uses: actions/checkout@v2
       - run: npm install
         working-directory: ./web
+      - run: npm run pretty:check
+        working-directory: ./web
       - run: npm run build
         working-directory: ./web
         env:

web/package.json

@@ -46,7 +46,8 @@
     "clean": "rm -rf build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "pretty": "npx prettier '**/*.js' --write"
+    "pretty": "npx prettier '**/*.js' --write",
+    "pretty:check": "npx prettier '**/*.js' --check"
   },
   "eslintConfig": {
     "extends": [

web/src/components/ClaimAllButtonGroup.js

@@ -0,0 +1,47 @@
+import ClaimAndStakeForm from "./ClaimAndStakeForm";
+import useCanConnectedAccountWithdraw from "../hooks/useCanConnectedAccountWithdraw";
+import useNodeFinalizedRewardSnapshots from "../hooks/useNodeFinalizedRewardSnapshots";
+import _ from "lodash";
+import { ethers } from "ethers";
+
+export default function ClaimAllButtonGroup({ nodeAddress }) {
+  let finalized = useNodeFinalizedRewardSnapshots({ nodeAddress });
+  let unclaimed = _.filter(finalized, ({ isClaimed }) => !isClaimed);
+  let rewardIndexes = _.map(unclaimed, "rewardIndex");
+  let amountsEth = _.map(unclaimed, "smoothingPoolEth");
+  let merkleProofs = _.map(unclaimed, "merkleProof");
+  let amountsRpl = _.map(unclaimed, ({ collateralRpl, oracleDaoRpl }) =>
+    // TODO: consider moving this to useNodeFinalizedRewardSnapshots
+    ethers.BigNumber.from(collateralRpl || "0").add(
+      ethers.BigNumber.from(oracleDaoRpl || "0")
+    )
+  );
+  let canWithdraw = useCanConnectedAccountWithdraw(nodeAddress);
+  if (unclaimed.length === 0) {
+    return null; // Show nothing when there's none to claim.
+  }
+  return (
+    <ClaimAndStakeForm
+      sx={{
+        cursor: canWithdraw ? undefined : "not-allowed",
+      }}
+      buttonProps={{
+        size: "small",
+        label: "Claim All",
+      }}
+      sliderProps={{
+        size: "small",
+        color: canWithdraw ? "rpl" : "gray",
+        sx: {
+          width: 144,
+          pb: 0,
+        },
+      }}
+      nodeAddress={nodeAddress}
+      rewardIndexes={rewardIndexes}
+      amountsEth={amountsEth}
+      amountsRpl={amountsRpl}
+      merkleProofs={merkleProofs}
+    />
+  );
+}

web/src/pages/NodePage.js

@@ -17,43 +17,57 @@ import {
   Tooltip,
   Typography,
 } from "@mui/material";
-import NodeRewardsSummaryCard from "../components/NodeRewardsSummaryCard";
-import SafeSweepCard from "../components/SafeSweepCard";
-import NodePeriodicRewardsTable from "../components/NodePeriodicRewardsTable";
-import NodeContinuousRewardsTable from "../components/NodeContinuousRewardsTable";
 import { AllInclusive, EventRepeat, Help } from "@mui/icons-material";
 import { useEffect, useState } from "react";
 import { ethers } from "ethers";
-import useCanConnectedAccountWithdraw from "../hooks/useCanConnectedAccountWithdraw";
+import ClaimAllButtonGroup from "../components/ClaimAllButtonGroup";
 import CurrencyValue from "../components/CurrencyValue";
-import useNodeContinuousRewards from "../hooks/useNodeContinuousRewards";
-import useGasPrice from "../hooks/useGasPrice";
 import GasInfoFooter from "../components/GasInfoFooter";
 import DistributeEfficiencyAlert from "../components/DistributeEfficiencyAlert";
+import NodePeriodicRewardsTable from "../components/NodePeriodicRewardsTable";
+import NodeContinuousRewardsTable from "../components/NodeContinuousRewardsTable";
+import NodeRewardsSummaryCard from "../components/NodeRewardsSummaryCard";
+import RewardsHelpInfo from "../components/RewardsHelpInfo";
+import SafeSweepCard from "../components/SafeSweepCard";
+import useCanConnectedAccountWithdraw from "../hooks/useCanConnectedAccountWithdraw";
+import useNodeContinuousRewards from "../hooks/useNodeContinuousRewards";
+import useGasPrice from "../hooks/useGasPrice";
 import useNodeFeeDistributorInfo from "../hooks/useNodeFeeDistributorInfo";
 import contracts from "../contracts";
-import RewardsHelpInfo from "../components/RewardsHelpInfo";
 
-function PeriodicRewardsHeader({ sx }) {
+function PeriodicRewardsHeader({ sx, nodeAddress }) {
   return (
-    <Stack direction="row" alignItems="center">
-      <EventRepeat sx={{ m: 1, mr: 2 }} fontSize="medium" color="disabled" />
-      <Typography color="text.primary" variant="subtitle2">
-        Periodic Rewards
-      </Typography>
-      <Tooltip title={<RewardsHelpInfo />}>
-        <IconButton
-          href="https://docs.rocketpool.net/guides/node/rewards.html"
-          sx={{ opacity: 0.5 }}
-          component="a"
-          target="_blank"
-          color="inherit"
-          size="small"
-        >
-          <Help fontSize="inherit" />
-        </IconButton>
-      </Tooltip>
-    </Stack>
+    <Grid sx={sx} rowSpacing={2} container alignItems="center">
+      <Grid item xs={12} md={5}>
+        <Stack direction="row" alignItems="center">
+          <EventRepeat
+            sx={{ m: 1, mr: 2 }}
+            fontSize="medium"
+            color="disabled"
+          />
+          <Typography color="text.primary" variant="subtitle2">
+            Periodic Rewards
+          </Typography>
+          <Tooltip title={<RewardsHelpInfo />}>
+            <IconButton
+              href="https://docs.rocketpool.net/guides/node/rewards.html"
+              sx={{ opacity: 0.5 }}
+              component="a"
+              target="_blank"
+              color="inherit"
+              size="small"
+            >
+              <Help fontSize="inherit" />
+            </IconButton>
+          </Tooltip>
+        </Stack>
+      </Grid>
+      <Grid item sx={{ pl: 6 }} xs={12} md={7}>
+        <Stack direction="row" alignItems="center">
+          <ClaimAllButtonGroup nodeAddress={nodeAddress} />
+        </Stack>
+      </Grid>
+    </Grid>
   );
 }