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

nym-wallet/src/components/Bonding/BondedMixnode.tsx

@@ -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',

nym-wallet/src/pages/balance/vesting.tsx

@@ -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 () => {

nym-wallet/src/pages/bonding/node-settings/settings-pages/NodeUnbondPage.tsx

@@ -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 won’t be possible to restore the current state of your ${
                 isMixnode(bondedNode) ? 'node' : 'gateway'
-              } again`}
+              } again.`}
             />
           </Grid>
           <Grid item>

nym-wallet/src/pages/bonding/node-settings/settings-pages/general-settings/InfoSettings.tsx

@@ -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 node’s config file too
+            Changing these values will ONLY change the data about your node on the blockchain. Remember to change your
+            node’s 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 node’s config file too."
         okLabel="close"
@@ -216,15 +214,13 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon
           textAlign: 'center',
           color: theme.palette.nym.nymWallet.text.blue,
           fontSize: 16,
-          textTransform: 'capitalize',
         }}
         subHeaderStyles={{
           width: '100%',
           mb: 1,
           textAlign: 'center',
           color: 'main',
           fontSize: 14,
-          textTransform: 'capitalize',
         }}
       />
     </Grid>

nym-wallet/src/pages/bonding/node-settings/settings-pages/general-settings/ParametersSettings.tsx

@@ -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,20 +251,24 @@ 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>
       <SimpleModal
         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,