Skip to content

Commit

Permalink
feat: cleanup negative more in NS and describe deposits required
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmccartney
dmccartney committed Oct 24, 2024
1 parent 3d9d170 commit 52e7641
Showing 1 changed file with 206 additions and 46 deletions.
252 changes: 206 additions & 46 deletions web/src/pages/NodeSetPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ import {
CardContent,
CardHeader,
Chip,
CircularProgress,
Divider,
Grid,
Paper,
Stack,
Tooltip,
Typography,
Expand Down Expand Up @@ -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
Expand All @@ -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,
Expand Down Expand Up @@ -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"}
Expand All @@ -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"}
Expand All @@ -713,7 +761,7 @@ function NodeSetMiniPoolsColumn() {
sx={{
mt: 0.5,
borderRadius: "20px",
...(moreMinipoolCount < 1
...(moreMinipoolCount < 1 || isLoading
? {}
: {
background: "rgba(128,255,128,0.1)",
Expand All @@ -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>
Expand Down Expand Up @@ -881,7 +933,6 @@ function NodeSetMiniPoolsColumn() {
</Stack>
<Grid
container
columnSpacing={1}
sx={{
mt: 0.5,
borderRadius: "20px",
Expand All @@ -893,7 +944,7 @@ function NodeSetMiniPoolsColumn() {
}}
alignItems={"baseline"}
>
<Grid item xs={4}>
<Grid item xs={3.5}>
<Stack
direction="row"
spacing={0.5}
Expand All @@ -909,18 +960,22 @@ function NodeSetMiniPoolsColumn() {
<NodeSetAvatar />
</Stack>
</Grid>
<Grid item xs={2}>
<Grid item xs={2.5}>
<Stack
direction="row"
spacing={0.5}
alignItems="baseline"
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>
Expand All @@ -947,7 +1002,6 @@ function NodeSetMiniPoolsColumn() {
</Grid>
<Grid
container
columnSpacing={1}
sx={{
mt: 0.5,
borderRadius: "20px",
Expand All @@ -959,7 +1013,7 @@ function NodeSetMiniPoolsColumn() {
}}
alignItems={"baseline"}
>
<Grid item xs={4}>
<Grid item xs={3.5}>
<Stack
direction="row"
spacing={0.5}
Expand All @@ -977,18 +1031,20 @@ function NodeSetMiniPoolsColumn() {
</Typography>
</Stack>
</Grid>
<Grid item xs={2}>
<Grid item xs={2.5}>
<Stack
direction="row"
spacing={0.5}
alignItems="baseline"
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>
Expand All @@ -1015,7 +1071,7 @@ function NodeSetMiniPoolsColumn() {
</Grid>
<Grid
container
columnSpacing={1}
// columnSpacing={1}
sx={{
mt: 0.5,
borderRadius: "20px",
Expand All @@ -1027,7 +1083,7 @@ function NodeSetMiniPoolsColumn() {
}}
alignItems={"baseline"}
>
<Grid item xs={4}>
<Grid item xs={3.5}>
<Stack
direction="row"
spacing={0.5}
Expand All @@ -1043,45 +1099,149 @@ function NodeSetMiniPoolsColumn() {
<NodeSetAvatar />
</Stack>
</Grid>
<Grid item xs={2}>
<Grid item xs={2.5}>
<Stack
direction="row"
spacing={0.5}
alignItems="baseline"
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>
Expand Down

0 comments on commit 52e7641

Please sign in to comment.