diff --git a/nym-wallet/src/pages/bond/index.tsx b/nym-wallet/src/pages/bond/index.tsx index c052018ae7..a173765335 100644 --- a/nym-wallet/src/pages/bond/index.tsx +++ b/nym-wallet/src/pages/bond/index.tsx @@ -26,6 +26,7 @@ export const Bond = () => { } }, [status, checkOwnership]); + return ( diff --git a/nym-wallet/src/pages/delegate/DelegateForm.tsx b/nym-wallet/src/pages/delegate/DelegateForm.tsx index e89d23da15..edf120d47d 100644 --- a/nym-wallet/src/pages/delegate/DelegateForm.tsx +++ b/nym-wallet/src/pages/delegate/DelegateForm.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useContext } from 'react'; +import React, { useEffect, useContext, useState } from 'react'; import { Box, Button, CircularProgress, FormControl, Grid, InputAdornment, TextField } from '@mui/material'; import { yupResolver } from '@hookform/resolvers/yup'; import { useForm } from 'react-hook-form'; @@ -8,6 +8,7 @@ import { AppContext } from '../../context/main'; import { delegate, majorToMinor, vestingDelegateToMixnode } from '../../requests'; import { Fee, TokenPoolSelector } from '../../components'; import { Console } from '../../utils/console'; +import { getMixnodeStakeSaturation } from '../../requests'; type TDelegateForm = { identity: string; @@ -41,12 +42,24 @@ export const DelegateForm = ({ resolver: yupResolver(validationSchema), }); + const [saturation, setSaturation] = useState(0); const { userBalance, currency, clientDetails } = useContext(AppContext); useEffect(() => { reset(); }, [clientDetails]); + useEffect(() => { + console.log('saturation', saturation); + }, [saturation]); + + const getStakeSaturation = async (mixnodeKey: string) => { + const newSaturation = await getMixnodeStakeSaturation(mixnodeKey); + if (newSaturation) { + setSaturation(Math.round(newSaturation.saturation * 100)); + } + }; + const onSubmit = async (data: TDelegateForm, cb: (data: TDelegateArgs) => Promise) => { const amount = await majorToMinor(data.amount); @@ -69,6 +82,15 @@ export const DelegateForm = ({ }); }; + const checkNodeSaturation = (value: string) => { + console.log(value, value.length); + if (value.length === 44) { + getStakeSaturation(value); + } else { + setSaturation(0); + } + }; + return ( @@ -84,7 +106,10 @@ export const DelegateForm = ({ fullWidth error={!!errors.identity} helperText={errors?.identity?.message} + onBlur={(e) => checkNodeSaturation(e.target.value)} + onChange={(e) => setSaturation(0)} /> + {saturation > 100 &&

Please choose another node, the selected is oversaturated

} {userBalance.originalVesting && ( @@ -127,7 +152,7 @@ export const DelegateForm = ({ onClick={handleSubmit((data) => onSubmit(data, data.tokenPool === 'balance' ? delegate : vestingDelegateToMixnode), )} - disabled={isSubmitting} + disabled={isSubmitting || saturation > 100} data-testid="delegate-button" variant="contained" color="primary"