From 30f5f8de6edd2f142793542bb1bfde7ce2a53797 Mon Sep 17 00:00:00 2001
From: Daniel McCartney <dmccartney@gmail.com>
Date: Thu, 24 Oct 2024 01:14:04 -0700
Subject: [PATCH] feat: cleanup negative more in NS and describe deposits
 required

---
 web/src/pages/NodeSetPage.js | 256 ++++++++++++++++++++++++++++-------
 1 file changed, 210 insertions(+), 46 deletions(-)

diff --git a/web/src/pages/NodeSetPage.js b/web/src/pages/NodeSetPage.js
index 218e101..191e9e6 100644
--- a/web/src/pages/NodeSetPage.js
+++ b/web/src/pages/NodeSetPage.js
@@ -8,8 +8,10 @@ import {
   CardContent,
   CardHeader,
   Chip,
+  CircularProgress,
   Divider,
   Grid,
+  Paper,
   Stack,
   Tooltip,
   Typography,
@@ -514,11 +516,12 @@ function NodeSetMiniPoolsColumn() {
   let rplStakedInEth = rplStake
     ?.mul(rplEthPrice)
     .div(ethers.utils.parseEther("1"));
-  let { data: minipoolsInOrder } = useK.SuperNodeAccount.Find.MinipoolCreated({
-    args: [null, null],
-    from: 0,
-    to: "latest",
-  });
+  let { isLoading, data: minipoolsInOrder } =
+    useK.SuperNodeAccount.Find.MinipoolCreated({
+      args: [null, null],
+      from: 0,
+      to: "latest",
+    });
   let minipools = _.reverse(_.clone(minipoolsInOrder || []));
   let activeMinipools = minipools || [];
   let maxMinipoolCountByRpl = rplStakedInEth
@@ -539,6 +542,33 @@ function NodeSetMiniPoolsColumn() {
     .div(ethers.utils.parseEther("24"))
     .toNumber();
   let moreMinipoolCountByRpl = maxMinipoolCountByRpl - activeMinipools.length;
+  let rplPerMinipool = ethers.utils
+    .parseEther("24")
+    .mul(minimumStakeRatio || ethers.utils.parseEther("1"))
+    .div(rplEthPrice || ethers.utils.parseEther("1"));
+  let moreRplRequiredForAnother =
+    moreMinipoolCountByRpl > 0
+      ? ethers.constants.Zero
+      : ethers.utils
+          .parseEther("24")
+          .mul(activeMinipools.length + 1)
+          .mul(minimumStakeRatio || ethers.utils.parseEther("1"))
+          .div(ethers.utils.parseEther("1"))
+          .sub(rplStakedInEth || ethers.utils.parseEther("1"))
+          .mul(ethers.utils.parseEther("1"))
+          .div(rplEthPrice || ethers.utils.parseEther("1"));
+  let moreXREthRequiredForAnother =
+    moreMinipoolCountByXREth > 0
+      ? ethers.constants.Zero
+      : ethers.utils
+          .parseEther("8")
+          .sub(xREthBalance?.value || ethers.constants.Zero);
+  let moreREthRequiredForAnother =
+    moreMinipoolCountByREth > 0
+      ? ethers.constants.Zero
+      : ethers.utils
+          .parseEther("24")
+          .sub(rEthBalance?.value || ethers.constants.Zero);
   let moreMinipoolCount = Math.min(
     moreMinipoolCountByXREth,
     moreMinipoolCountByREth,
@@ -682,9 +712,17 @@ function NodeSetMiniPoolsColumn() {
                           sx={{ cursor: "inherit" }}
                           component="span"
                           size="small"
-                          label={Number(
-                            activeMinipools.length
-                          ).toLocaleString()}
+                          label={
+                            isLoading ? (
+                              <CircularProgress
+                                color="inherit"
+                                size={12}
+                                sx={{ ml: 0.5, mr: 0.5 }}
+                              />
+                            ) : (
+                              Number(activeMinipools.length).toLocaleString()
+                            )
+                          }
                         />
                         <Typography
                           variant={"caption"}
@@ -696,7 +734,17 @@ function NodeSetMiniPoolsColumn() {
                           sx={{ cursor: "inherit" }}
                           component="span"
                           size="small"
-                          label={operators.length}
+                          label={
+                            isLoading ? (
+                              <CircularProgress
+                                color="inherit"
+                                size={12}
+                                sx={{ ml: 0.5, mr: 0.5 }}
+                              />
+                            ) : (
+                              operators.length
+                            )
+                          }
                         />
                         <Typography
                           variant={"caption"}
@@ -713,7 +761,7 @@ function NodeSetMiniPoolsColumn() {
                 sx={{
                   mt: 0.5,
                   borderRadius: "20px",
-                  ...(moreMinipoolCount < 1
+                  ...(moreMinipoolCount < 1 || isLoading
                     ? {}
                     : {
                         background: "rgba(128,255,128,0.1)",
@@ -723,7 +771,11 @@ function NodeSetMiniPoolsColumn() {
                 alignItems={"baseline"}
                 spacing={1}
               >
-                <Chip component="span" size="small" label={moreMinipoolCount} />
+                <Chip
+                  component="span"
+                  size="small"
+                  label={isLoading ? "..." : Math.max(0, moreMinipoolCount)}
+                />
                 <Typography variant={"caption"} color={"text.secondary"}>
                   more from available deposits
                 </Typography>
@@ -881,7 +933,6 @@ function NodeSetMiniPoolsColumn() {
                 </Stack>
                 <Grid
                   container
-                  columnSpacing={1}
                   sx={{
                     mt: 0.5,
                     borderRadius: "20px",
@@ -893,7 +944,7 @@ function NodeSetMiniPoolsColumn() {
                   }}
                   alignItems={"baseline"}
                 >
-                  <Grid item xs={4}>
+                  <Grid item xs={3.5}>
                     <Stack
                       direction="row"
                       spacing={0.5}
@@ -909,7 +960,7 @@ function NodeSetMiniPoolsColumn() {
                       <NodeSetAvatar />
                     </Stack>
                   </Grid>
-                  <Grid item xs={2}>
+                  <Grid item xs={2.5}>
                     <Stack
                       direction="row"
                       spacing={0.5}
@@ -917,10 +968,14 @@ function NodeSetMiniPoolsColumn() {
                       justifyContent="flex-end"
                     >
                       <Chip
-                        sx={{ width: "100%" }}
+                        sx={{ width: "100%", ml: 1, mr: 1 }}
                         component="span"
                         size="small"
-                        label={moreMinipoolCountByXREth}
+                        label={
+                          isLoading
+                            ? "..."
+                            : Math.max(0, moreMinipoolCountByXREth)
+                        }
                       />
                     </Stack>
                   </Grid>
@@ -947,7 +1002,6 @@ function NodeSetMiniPoolsColumn() {
                 </Grid>
                 <Grid
                   container
-                  columnSpacing={1}
                   sx={{
                     mt: 0.5,
                     borderRadius: "20px",
@@ -959,7 +1013,7 @@ function NodeSetMiniPoolsColumn() {
                   }}
                   alignItems={"baseline"}
                 >
-                  <Grid item xs={4}>
+                  <Grid item xs={3.5}>
                     <Stack
                       direction="row"
                       spacing={0.5}
@@ -977,7 +1031,7 @@ function NodeSetMiniPoolsColumn() {
                       </Typography>
                     </Stack>
                   </Grid>
-                  <Grid item xs={2}>
+                  <Grid item xs={2.5}>
                     <Stack
                       direction="row"
                       spacing={0.5}
@@ -985,10 +1039,14 @@ function NodeSetMiniPoolsColumn() {
                       justifyContent="flex-end"
                     >
                       <Chip
-                        sx={{ width: "100%" }}
+                        sx={{ width: "100%", ml: 1, mr: 1 }}
                         component="span"
                         size="small"
-                        label={moreMinipoolCountByREth}
+                        label={
+                          isLoading
+                            ? "..."
+                            : Math.max(0, moreMinipoolCountByREth)
+                        }
                       />
                     </Stack>
                   </Grid>
@@ -1015,7 +1073,7 @@ function NodeSetMiniPoolsColumn() {
                 </Grid>
                 <Grid
                   container
-                  columnSpacing={1}
+                  // columnSpacing={1}
                   sx={{
                     mt: 0.5,
                     borderRadius: "20px",
@@ -1027,7 +1085,7 @@ function NodeSetMiniPoolsColumn() {
                   }}
                   alignItems={"baseline"}
                 >
-                  <Grid item xs={4}>
+                  <Grid item xs={3.5}>
                     <Stack
                       direction="row"
                       spacing={0.5}
@@ -1043,7 +1101,7 @@ function NodeSetMiniPoolsColumn() {
                       <NodeSetAvatar />
                     </Stack>
                   </Grid>
-                  <Grid item xs={2}>
+                  <Grid item xs={2.5}>
                     <Stack
                       direction="row"
                       spacing={0.5}
@@ -1051,37 +1109,143 @@ function NodeSetMiniPoolsColumn() {
                       justifyContent="flex-end"
                     >
                       <Chip
-                        sx={{ width: "100%" }}
+                        sx={{ width: "100%", ml: 1, mr: 1 }}
                         component="span"
                         size="small"
-                        label={moreMinipoolCountByRpl}
+                        label={
+                          isLoading
+                            ? "..."
+                            : Math.max(0, moreMinipoolCountByRpl)
+                        }
                       />
                     </Stack>
                   </Grid>
                   <Grid item xs={6}>
-                    <Stack
-                      direction="row"
-                      spacing={0.5}
-                      alignItems="baseline"
-                      justifyContent="flex-start"
-                    >
-                      <Typography variant="caption" color="textSecondary">
-                        more @
-                      </Typography>
-                      <CurrencyValue
-                        value={minimumStakeRatio?.mul(100)}
-                        trimZeroWhole
-                        maxDecimals={0}
-                        currency={"ratio"}
-                        hideCurrency
-                        size="xsmall"
-                      />
-                      <Typography variant={"caption"} color={"text.secondary"}>
-                        % borrow limit
-                      </Typography>
+                    <Stack spacing={0}>
+                      <Stack
+                        direction="row"
+                        spacing={0.5}
+                        alignItems="baseline"
+                        justifyContent="flex-start"
+                      >
+                        <Typography variant="caption" color="textSecondary">
+                          more @
+                        </Typography>
+                        <CurrencyValue
+                          value={minimumStakeRatio?.mul(100)}
+                          trimZeroWhole
+                          maxDecimals={0}
+                          currency={"ratio"}
+                          hideCurrency
+                          size="xsmall"
+                        />
+                        <Typography
+                          variant={"caption"}
+                          color={"text.secondary"}
+                        >
+                          % borrow limit
+                        </Typography>
+                      </Stack>
+                      <Stack
+                        direction="row"
+                        spacing={0.5}
+                        alignItems="baseline"
+                      >
+                        <Typography variant="caption" color="text.secondary">
+                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;≈
+                        </Typography>
+                        <CurrencyValue
+                          value={rplPerMinipool.add(
+                            ethers.utils.parseEther("1")
+                          )}
+                          trimZeroWhole
+                          maxDecimals={0}
+                          currency={"rpl"}
+                          perCurrency={"minipool"}
+                          size="xsmall"
+                        />
+                      </Stack>
                     </Stack>
                   </Grid>
                 </Grid>
+                {isLoading || moreMinipoolCount > 0 || (
+                  <Paper
+                    sx={{ mt: 2, p: 1 }}
+                    elevation={8}
+                    icon={false}
+                    severity={"info"}
+                  >
+                    <Stack alignItems={"center"} spacing={1}>
+                      <Typography variant={"caption"} color={"text.secondary"}>
+                        deposits required for the next minipool
+                      </Typography>
+                      <Stack alignItems={"center"}>
+                        {moreRplRequiredForAnother.gt(0) && (
+                          <Stack
+                            direction={"row"}
+                            alignItems={"baseline"}
+                            spacing={0.5}
+                          >
+                            <CurrencyValue
+                              value={moreRplRequiredForAnother.add(
+                                ethers.utils.parseEther("1")
+                              )}
+                              maxDecimals={0}
+                              currency={"rpl"}
+                              size={"xsmall"}
+                            />
+                            <Typography variant="caption" color="textSecondary">
+                              from
+                            </Typography>
+                            <NodeSetAvatar />
+                          </Stack>
+                        )}
+                        {moreXREthRequiredForAnother.gt(0) && (
+                          <Stack
+                            direction={"row"}
+                            alignItems={"baseline"}
+                            spacing={0.5}
+                          >
+                            <CurrencyValue
+                              value={moreXREthRequiredForAnother.add(
+                                ethers.utils.parseEther("1")
+                              )}
+                              maxDecimals={0}
+                              currency={"eth"}
+                              size={"xsmall"}
+                            />
+                            <Typography variant="caption" color="textSecondary">
+                              from
+                            </Typography>
+                            <NodeSetAvatar />
+                          </Stack>
+                        )}
+                        {moreREthRequiredForAnother.gt(0) && (
+                          <Stack
+                            direction={"row"}
+                            alignItems={"baseline"}
+                            spacing={0.5}
+                          >
+                            <CurrencyValue
+                              value={moreREthRequiredForAnother.add(
+                                ethers.utils.parseEther("1")
+                              )}
+                              maxDecimals={0}
+                              currency={"eth"}
+                              size={"xsmall"}
+                            />
+                            <Typography variant="caption" color="textSecondary">
+                              from
+                            </Typography>
+                            <Typography variant={"caption"} color={"rpl.dark"}>
+                              rETH
+                            </Typography>
+                          </Stack>
+                        )}
+                      </Stack>
+                    </Stack>
+                  </Paper>
+                )}
               </Stack>
             </Stack>
           </CardContent>