Merge pull request #30 from dmccartney/daniel-show-tvl

feat: display node TVL in the summary card
dmccartney · Oct 24, 2023 · f00f68c · f00f68c
2 parents ee401b5 + 3e1d2e0
commit f00f68c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/web/src/components/NodeRewardsSummaryCard.js b/web/src/components/NodeRewardsSummaryCard.js
@@ -51,18 +51,34 @@ import useNodeRplStatus from "../hooks/useNodeRplStatus";
 import useRplEthPrice from "../hooks/useRplEthPrice";
 import { useState } from "react";
 import RewardsHelpInfo from "./RewardsHelpInfo";
+import useMinipoolDetails from "../hooks/useMinipoolDetails";
 
 function SummaryCardHeader({ asLink, nodeAddress }) {
-  const continuous = useNodeContinuousRewards({ nodeAddress });
+  const minipools = useMinipoolDetails(nodeAddress);
+  const rplEthPrice = useRplEthPrice();
   const { data: details } = useNodeDetails({ nodeAddress });
   let { rplStake } = details || {
     rplStake: ethers.constants.Zero,
   };
-  // rplStake = rplStake.div(ethers.BigNumber.from(2));
   const rplStatus = useNodeRplStatus({ nodeAddress });
+  const depositEth = bnSum(
+    (minipools || [])
+      .filter((mp) => !mp.isFinalized)
+      .map((mp) => mp.nodeDepositBalance)
+  );
+  const rplStakeEth = rplStake
+    ?.mul(rplEthPrice)
+    .div(ethers.constants.WeiPerEther);
+
   let rplStakeText = trimValue(ethers.utils.formatUnits(rplStake), {
     maxDecimals: 0,
   });
+  let depositEthText = trimValue(ethers.utils.formatUnits(depositEth), {
+    maxDecimals: 0,
+  });
+  let rplStakeEthText = trimValue(ethers.utils.formatUnits(rplStakeEth), {
+    maxDecimals: 1,
+  });
   return (
     <CardHeader
       disableTypography
@@ -84,12 +100,22 @@ function SummaryCardHeader({ asLink, nodeAddress }) {
                   size="small"
                   label={
                     <Typography variant="caption">
-                      {continuous?.minipoolCount}
+                      {depositEthText} + {rplStakeEthText}
                     </Typography>
                   }
                 />
               </Box>
-              <FormHelperText sx={{ mt: 0.25 }}>minipools</FormHelperText>
+              <FormHelperText sx={{ mt: 0.25 }}>
+                tvl
+                <Typography
+                  component={"span"}
+                  variant="eth"
+                  sx={{ pl: 0.5 }}
+                  color={(theme) => theme.palette.eth.light}
+                >
+                  {"ETH"}
+                </Typography>
+              </FormHelperText>
             </Stack>
             <Tooltip
               arrow

diff --git a/web/src/hooks/useMinipoolDetails.js b/web/src/hooks/useMinipoolDetails.js
@@ -51,6 +51,7 @@ export default function useMinipoolDetails(nodeAddress) {
         let nodeRefundBalance = await mp.getNodeRefundBalance();
         let version = await mp.version();
         let status = await mp.getStatus();
+        let nodeDepositBalance = await mp.getNodeDepositBalance();
         let balance = await provider.getBalance(minipoolAddress);
 
         let balanceLessRefund = balance.sub(nodeRefundBalance);
@@ -63,6 +64,7 @@ export default function useMinipoolDetails(nodeAddress) {
         );
         let protocolBalance = balance.sub(nodeBalance);
         balance = balance.toHexString();
+        nodeDepositBalance = nodeDepositBalance.toHexString();
         nodeRefundBalance = nodeRefundBalance.toHexString();
         calculatedNodeShare = calculatedNodeShare.toHexString();
         nodeBalance = nodeBalance.toHexString();
@@ -71,6 +73,7 @@ export default function useMinipoolDetails(nodeAddress) {
         return {
           minipoolAddress,
           balance,
+          nodeDepositBalance,
           nodeRefundBalance,
           calculatedNodeShare,
           nodeBalance,