Update/last minute release updates (#1753)

* fix vesting update bond settings

* style and text updates

* show tx fee when updating node settings

* allow cost param update with vesting tokens
This commit is contained in:
Fouad
2022-11-10 16:22:09 +00:00
committed by GitHub
parent 09b9601c7e
commit bfbd509e4b
5 changed files with 90 additions and 63 deletions
@@ -42,7 +42,7 @@ const headers: Header[] = [
header: 'Operator rewards',
id: 'operator-rewards',
tooltipText:
'This is your (operator) new rewards including the PM and cost. You can compound your rewards manually every epoch or unbond your node to redeem them.',
'This is your (operator) rewards including the PM and cost. Rewards are automatically compounded every epoch. You can redeem your rewards at any time.',
},
{
header: 'No. delegators',
+2 -9
View File
@@ -130,16 +130,10 @@ const TokenTransfer = () => {
</Grid>
<Grid item>
<Typography variant="subtitle2" sx={{ color: (t) => t.palette.nym.text.muted, mt: 2 }}>
Transferable tokens
Unlocked transferable tokens
</Typography>
<Typography
data-testid="refresh-success"
sx={{ color: 'text.primary' }}
variant="h5"
fontWeight="700"
textTransform="uppercase"
>
<Typography data-testid="refresh-success" sx={{ color: 'text.primary' }} variant="h5" textTransform="uppercase">
{userBalance.tokenAllocation?.spendable || 'n/a'} {clientDetails?.display_mix_denom.toUpperCase()}
</Typography>
</Grid>
@@ -167,7 +161,6 @@ export const VestingCard = ({ onTransfer }: { onTransfer: () => Promise<void> })
<NymCard
title="Vesting Schedule"
data-testid="check-unvested-tokens"
Icon={<InfoOutlined />}
Action={
<IconButton
onClick={async () => {
@@ -33,10 +33,17 @@ export const NodeUnbondPage = ({ bondedNode, onConfirm, onError }: Props) => {
</Grid>
<Grid item container direction={'column'} spacing={2} width={0.5} padding={3}>
<Grid item>
<Box sx={{ mb: 1 }}>
<Error
message={`Remember you should only unbond if you want to remove your ${
isMixnode(bondedNode) ? 'node' : 'gateway'
} from the network for good.`}
/>
</Box>
<Error
message={`Unbonding is irreversible and it wont be possible to restore the current state of your ${
isMixnode(bondedNode) ? 'node' : 'gateway'
} again`}
} again.`}
/>
</Grid>
<Grid item>
@@ -4,15 +4,20 @@ import { yupResolver } from '@hookform/resolvers/yup';
import { Button, Divider, Typography, TextField, Grid, CircularProgress, Box } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { isMixnode } from 'src/types';
import { updateMixnodeConfig } from 'src/requests';
import { simulateUpdateMixnodeConfig, simulateVestingUpdateMixnodeConfig, updateMixnodeConfig } from 'src/requests';
import { TBondedMixnode, TBondedGateway } from 'src/context/bonding';
import { SimpleModal } from 'src/components/Modals/SimpleModal';
import { bondedInfoParametersValidationSchema } from 'src/components/Bonding/forms/mixnodeValidationSchema';
import { Console } from 'src/utils/console';
import { Alert } from 'src/components/Alert';
import { vestingUpdateMixnodeConfig } from 'src/requests/vesting';
import { ConfirmTx } from 'src/components/ConfirmTX';
import { useGetFee } from 'src/hooks/useGetFee';
import { LoadingModal } from 'src/components/Modals/LoadingModal';
export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBondedGateway }) => {
const [openConfirmationModal, setOpenConfirmationModal] = useState<boolean>(false);
const { getFee, fee, resetFeeState } = useGetFee();
const theme = useTheme();
@@ -33,6 +38,7 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon
verlocPort?: number;
httpApiPort?: number;
}) => {
resetFeeState();
const { host, version, mixPort, verlocPort, httpApiPort } = data;
if (host && version && mixPort && verlocPort && httpApiPort) {
const MixNodeConfigParams = {
@@ -43,7 +49,11 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon
version,
};
try {
await updateMixnodeConfig(MixNodeConfigParams);
if (bondedNode.proxy) {
await vestingUpdateMixnodeConfig(MixNodeConfigParams);
} else {
await updateMixnodeConfig(MixNodeConfigParams);
}
setOpenConfirmationModal(true);
} catch (error) {
Console.error(error);
@@ -53,10 +63,22 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon
return (
<Grid container xs item>
{fee && (
<ConfirmTx
open
header="Update node settings"
fee={fee}
onConfirm={handleSubmit((d) => onSubmit(d))}
onPrev={resetFeeState}
onClose={resetFeeState}
/>
)}
{isSubmitting && <LoadingModal />}
<Alert
title={
<Box sx={{ fontWeight: 600 }}>
Your changes will be ONLY saved on the display. Remember to change the values on your nodes config file too
Changing these values will ONLY change the data about your node on the blockchain. Remember to change your
nodes config file with the same values too
</Box>
}
dismissable
@@ -67,16 +89,6 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon
<Typography variant="body1" sx={{ fontWeight: 600, mb: 1 }}>
Port
</Typography>
<Typography
variant="body1"
sx={{
fontSize: 14,
mb: 2,
color: (t) => (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'),
}}
>
Change profit margin of your node
</Typography>
</Grid>
<Grid spacing={3} item container alignItems="center" xs={12} md={6}>
<Grid item width={1}>
@@ -120,16 +132,6 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon
<Typography variant="body1" sx={{ fontWeight: 600, mb: 1 }}>
Host
</Typography>
<Typography
variant="body1"
sx={{
fontSize: 14,
mb: 2,
color: (t) => (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'),
}}
>
Lock wallet after certain time
</Typography>
</Grid>
<Grid spacing={3} item container alignItems="center" xs={12} md={6}>
<Grid item width={1}>
@@ -151,16 +153,6 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon
<Typography variant="body1" sx={{ fontWeight: 600, mb: 1 }}>
Version
</Typography>
<Typography
variant="body1"
sx={{
fontSize: 14,
mb: 2,
color: (t) => (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'),
}}
>
Lock wallet after certain time
</Typography>
</Grid>
<Grid spacing={3} item container alignItems="center" xs={12} md={6}>
<Grid item width={1}>
@@ -182,18 +174,24 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon
size="large"
variant="contained"
disabled={isSubmitting || !isDirty || !isValid}
onClick={handleSubmit((d) => onSubmit(d))}
type="submit"
sx={{ m: 3, width: '320px' }}
endIcon={isSubmitting && <CircularProgress size={20} />}
onClick={handleSubmit((data) =>
getFee(bondedNode.proxy ? simulateVestingUpdateMixnodeConfig : simulateUpdateMixnodeConfig, {
host: data.host,
mix_port: data.mixPort,
verloc_port: data.verlocPort,
http_api_port: data.httpApiPort,
version: data.version,
}),
)}
sx={{ m: 3 }}
>
Save all display changes
Submit changes to the blockchain
</Button>
</Grid>
</Grid>
<SimpleModal
open={openConfirmationModal}
header="Your changes were ONLY saved on the display"
header="Your changes are submitted to the blockchain"
subHeader="Remember to change the values
on your nodes config file too."
okLabel="close"
@@ -216,7 +214,6 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon
textAlign: 'center',
color: theme.palette.nym.nymWallet.text.blue,
fontSize: 16,
textTransform: 'capitalize',
}}
subHeaderStyles={{
width: '100%',
@@ -224,7 +221,6 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon
textAlign: 'center',
color: 'main',
fontSize: 14,
textTransform: 'capitalize',
}}
/>
</Grid>
@@ -14,17 +14,27 @@ import {
} from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { CurrencyDenom, MixNodeCostParams } from '@nymproject/types';
import { CurrencyFormField } from '@nymproject/react/currency/CurrencyFormField';
import { add, format, fromUnixTime } from 'date-fns';
import { isMixnode } from 'src/types';
import { getCurrentInterval, getPendingIntervalEvents, updateMixnodeCostParams } from 'src/requests';
import { TBondedMixnode, TBondedGateway } from 'src/context/bonding';
import {
getCurrentInterval,
getPendingIntervalEvents,
simulateUpdateMixnodeCostParams,
simulateVestingUpdateMixnodeCostParams,
updateMixnodeCostParams,
vestingUpdateMixnodeCostParams,
} from 'src/requests';
import { TBondedMixnode } from 'src/context/bonding';
import { SimpleModal } from 'src/components/Modals/SimpleModal';
import { bondedNodeParametersValidationSchema } from 'src/components/Bonding/forms/mixnodeValidationSchema';
import { Console } from 'src/utils/console';
import { Alert } from 'src/components/Alert';
import { ChangeMixCostParams } from 'src/pages/bonding/types';
import { AppContext } from 'src/context';
import { CurrencyFormField } from '@nymproject/react/currency/CurrencyFormField';
import { useGetFee } from 'src/hooks/useGetFee';
import { ConfirmTx } from 'src/components/ConfirmTX';
import { LoadingModal } from 'src/components/Modals/LoadingModal';
export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode }): JSX.Element => {
const [openConfirmationModal, setOpenConfirmationModal] = useState<boolean>(false);
@@ -34,6 +44,8 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
const { clientDetails } = useContext(AppContext);
const theme = useTheme();
const { fee, getFee, resetFeeState } = useGetFee();
const defaultValues = {
operatorCost: bondedNode.operatorCost,
profitMargin: bondedNode.profitMargin,
@@ -96,6 +108,7 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
}, []);
const onSubmit = async (data: { operatorCost: { amount: string; denom: CurrencyDenom }; profitMargin: string }) => {
resetFeeState();
if (data.operatorCost && data.profitMargin) {
const MixNodeCostParams = {
profit_margin_percent: (+data.profitMargin / 100).toString(),
@@ -105,7 +118,11 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
},
};
try {
await updateMixnodeCostParams(MixNodeCostParams);
if (bondedNode.proxy) {
await vestingUpdateMixnodeCostParams(MixNodeCostParams);
} else {
await updateMixnodeCostParams(MixNodeCostParams);
}
await getPendingEvents();
reset();
setOpenConfirmationModal(true);
@@ -117,6 +134,17 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
return (
<Grid container xs item>
{fee && (
<ConfirmTx
open
header="Update cost parameters"
fee={fee}
onConfirm={handleSubmit((d) => onSubmit(d))}
onPrev={resetFeeState}
onClose={resetFeeState}
/>
)}
{isSubmitting && <LoadingModal />}
<Alert
title={
<>
@@ -129,7 +157,7 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
/>
<Grid container direction="column">
<Grid item container alignItems="left" justifyContent="space-between" padding={3} spacing={1}>
<Grid item>
<Grid item xl={6}>
<Typography variant="body1" sx={{ fontWeight: 600, mb: 1 }}>
Profit Margin
</Typography>
@@ -223,12 +251,16 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
size="large"
variant="contained"
disabled={isSubmitting || !isDirty || !isValid}
onClick={handleSubmit(onSubmit)}
onClick={handleSubmit((data) => {
getFee(bondedNode.proxy ? simulateVestingUpdateMixnodeCostParams : simulateUpdateMixnodeCostParams, {
profit_margin_percent: (+data.profitMargin / 100).toString(),
interval_operating_cost: data.operatorCost,
});
})}
type="submit"
sx={{ m: 3, width: '320px' }}
endIcon={isSubmitting && <CircularProgress size={20} />}
sx={{ m: 3 }}
>
Save all display changes
Submit changes to the blockchain
</Button>
</Grid>
</Grid>
@@ -236,7 +268,7 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
open={openConfirmationModal}
header="Your changes will take place
in the next interval"
okLabel="close"
okLabel="Close"
hideCloseIcon
displayInfoIcon
onOk={async () => {
@@ -256,7 +288,6 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
textAlign: 'center',
color: theme.palette.nym.nymWallet.text.blue,
fontSize: 16,
textTransform: 'capitalize',
}}
subHeaderStyles={{
m: 0,