From 93f931459ade63fcb37cb51e8fd213591ea9ab44 Mon Sep 17 00:00:00 2001
From: Fouad <fmtabbara@hotmail.co.uk>
Date: Fri, 22 Jul 2022 09:40:06 +0100
Subject: [PATCH] fix type update issues with actions (bonding, delegating
 etc.) (#1469)

---
 .../components/Delegation/DelegateModal.tsx   | 20 +++++++++-----
 .../components/Delegation/Modals.stories.tsx  |  6 ++---
 .../src/components/Rewards/CompoundModal.tsx  |  8 +++---
 .../Rewards/RedeemModal.stories.tsx           |  8 +++---
 .../src/components/Rewards/RedeemModal.tsx    |  8 +++---
 .../components/Send/SendDetails.stories.tsx   |  1 +
 .../src/components/Send/SendDetailsModal.tsx  |  5 +++-
 .../src/components/Send/SendInputModal.tsx    |  5 +++-
 nym-wallet/src/components/Send/SendModal.tsx  |  6 +++--
 .../src/components/TokenPoolSelector.tsx      |  6 +++--
 nym-wallet/src/context/delegations.tsx        |  2 +-
 nym-wallet/src/context/main.tsx               |  7 +----
 nym-wallet/src/context/mocks/main.tsx         |  2 +-
 .../balance/components/TransferModal.tsx      | 26 +++++++++++--------
 nym-wallet/src/pages/balance/vesting.tsx      | 12 +++++----
 .../src/pages/bond/components/GatewayForm.tsx |  4 +--
 .../src/pages/bond/components/MixnodeForm.tsx |  4 +--
 .../src/pages/bond/components/SuccessView.tsx |  8 +++---
 nym-wallet/src/pages/delegation/index.tsx     |  9 +++----
 nym-wallet/src/pages/receive/index.tsx        |  4 +--
 nym-wallet/src/requests/vesting.ts            |  4 +--
 .../components/currency/CurrencyFormField.tsx | 10 +++----
 ts-packages/types/src/types/global.ts         |  2 +-
 23 files changed, 93 insertions(+), 74 deletions(-)

diff --git a/nym-wallet/src/components/Delegation/DelegateModal.tsx b/nym-wallet/src/components/Delegation/DelegateModal.tsx
index f9503e25e8..0efcef61f9 100644
--- a/nym-wallet/src/components/Delegation/DelegateModal.tsx
+++ b/nym-wallet/src/components/Delegation/DelegateModal.tsx
@@ -31,7 +31,7 @@ export const DelegateModal: React.FC<{
   estimatedReward?: number;
   profitMarginPercentage?: number | null;
   nodeUptimePercentage?: number | null;
-  currency: string;
+  denom: CurrencyDenom;
   initialAmount?: string;
   hasVestingContract: boolean;
   sx?: SxProps;
@@ -48,7 +48,7 @@ export const DelegateModal: React.FC<{
   rewardInterval,
   accountBalance,
   estimatedReward,
-  currency,
+  denom,
   profitMarginPercentage,
   nodeUptimePercentage,
   initialAmount,
@@ -103,7 +103,7 @@ export const DelegateModal: React.FC<{
     }
 
     if (amount && Number(amount) < MIN_AMOUNT_TO_DELEGATE) {
-      errorAmountMessage = `Min. delegation amount: ${MIN_AMOUNT_TO_DELEGATE} ${currency}`;
+      errorAmountMessage = `Min. delegation amount: ${MIN_AMOUNT_TO_DELEGATE} ${denom.toUpperCase()}`;
       newValidatedValue = false;
     }
 
@@ -118,7 +118,7 @@ export const DelegateModal: React.FC<{
 
   const handleOk = async () => {
     if (onOk && amount && identityKey) {
-      onOk(identityKey, { amount, denom: currency as CurrencyDenom }, tokenPool, fee);
+      onOk(identityKey, { amount, denom }, tokenPool, fee);
     }
   };
 
@@ -170,7 +170,7 @@ export const DelegateModal: React.FC<{
         onConfirm={handleOk}
       >
         <ModalListItem label="Node identity key" value={identityKey} divider />
-        <ModalListItem label="Amount" value={`${amount} ${currency}`} divider />
+        <ModalListItem label="Amount" value={`${amount} ${denom.toUpperCase()}`} divider />
       </ConfirmTx>
     );
   }
@@ -181,7 +181,7 @@ export const DelegateModal: React.FC<{
       onClose={onClose}
       onOk={async () => {
         if (identityKey && amount) {
-          handleConfirm({ identity: identityKey, value: { amount, denom: currency as CurrencyDenom } });
+          handleConfirm({ identity: identityKey, value: { amount, denom } });
         }
       }}
       header={header || 'Delegate'}
@@ -219,6 +219,7 @@ export const DelegateModal: React.FC<{
           initialValue={amount}
           autoFocus={Boolean(initialIdentityKey)}
           onChanged={handleAmountChanged}
+          denom={denom}
         />
       </Box>
       <Typography
@@ -247,7 +248,12 @@ export const DelegateModal: React.FC<{
         divider
       />
 
-      <ModalListItem label="Node est. reward per epoch" value={`${estimatedReward} ${currency}`} hidden divider />
+      <ModalListItem
+        label="Node est. reward per epoch"
+        value={`${estimatedReward} ${denom.toUpperCase()}`}
+        hidden
+        divider
+      />
     </SimpleModal>
   );
 };
diff --git a/nym-wallet/src/components/Delegation/Modals.stories.tsx b/nym-wallet/src/components/Delegation/Modals.stories.tsx
index a45a0cfd7e..0ca52166b7 100644
--- a/nym-wallet/src/components/Delegation/Modals.stories.tsx
+++ b/nym-wallet/src/components/Delegation/Modals.stories.tsx
@@ -61,7 +61,7 @@ export const Delegate = () => {
         open={open}
         onClose={() => setOpen(false)}
         onOk={async () => setOpen(false)}
-        currency="nym"
+        denom="nym"
         estimatedReward={50.423}
         accountBalance="425.2345053"
         nodeUptimePercentage={99.28394}
@@ -84,7 +84,7 @@ export const DelegateBelowMinimum = () => {
         open={open}
         onClose={() => setOpen(false)}
         onOk={async () => setOpen(false)}
-        currency="nym"
+        denom="nym"
         estimatedReward={425.2345053}
         nodeUptimePercentage={99.28394}
         profitMarginPercentage={11.12334234}
@@ -109,7 +109,7 @@ export const DelegateMore = () => {
         onOk={async () => setOpen(false)}
         header="Delegate more"
         buttonText="Delegate more"
-        currency="nym"
+        denom="nym"
         estimatedReward={50.423}
         accountBalance="425.2345053"
         nodeUptimePercentage={99.28394}
diff --git a/nym-wallet/src/components/Rewards/CompoundModal.tsx b/nym-wallet/src/components/Rewards/CompoundModal.tsx
index 81a9e182ce..bcd67c00f6 100644
--- a/nym-wallet/src/components/Rewards/CompoundModal.tsx
+++ b/nym-wallet/src/components/Rewards/CompoundModal.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { Stack, Typography } from '@mui/material';
 import { IdentityKeyFormField } from '@nymproject/react/mixnodes/IdentityKeyFormField';
-import { FeeDetails } from '@nymproject/types';
+import { CurrencyDenom, FeeDetails } from '@nymproject/types';
 import { simulateCompoundDelgatorReward, simulateVestingCompoundDelgatorReward } from 'src/requests';
 import { useGetFee } from 'src/hooks/useGetFee';
 import { SimpleModal } from '../Modals/SimpleModal';
@@ -14,10 +14,10 @@ export const CompoundModal: React.FC<{
   onOk?: (identityKey: string, fee?: FeeDetails) => void;
   identityKey: string;
   amount: number;
-  currency: string;
+  denom: CurrencyDenom;
   message: string;
   usesVestingTokens: boolean;
-}> = ({ open, onClose, onOk, identityKey, amount, currency, message, usesVestingTokens }) => {
+}> = ({ open, onClose, onOk, identityKey, amount, denom, message, usesVestingTokens }) => {
   const { fee, isFeeLoading, feeError, getFee } = useGetFee();
 
   const handleOk = async () => {
@@ -47,7 +47,7 @@ export const CompoundModal: React.FC<{
       <Stack direction="row" justifyContent="space-between" mb={4} mt={identityKey && 4}>
         <Typography>Rewards amount:</Typography>
         <Typography>
-          {amount} {currency}
+          {amount} {denom.toUpperCase()}
         </Typography>
       </Stack>
 
diff --git a/nym-wallet/src/components/Rewards/RedeemModal.stories.tsx b/nym-wallet/src/components/Rewards/RedeemModal.stories.tsx
index 81d65fb978..cd20d7f8c5 100644
--- a/nym-wallet/src/components/Rewards/RedeemModal.stories.tsx
+++ b/nym-wallet/src/components/Rewards/RedeemModal.stories.tsx
@@ -61,7 +61,7 @@ export const RedeemAllRewards = () => {
         onClose={() => setOpen(false)}
         onOk={async () => setOpen(false)}
         message="Redeem all rewards"
-        currency="nym"
+        denom="nym"
         identityKey="D88RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujaaa"
         amount={425.65843}
         {...storybookStyles(theme)}
@@ -82,7 +82,7 @@ export const RedeemRewardForMixnode = () => {
         onClose={() => setOpen(false)}
         onOk={async () => setOpen(false)}
         message="Redeem rewards"
-        currency="nym"
+        denom="nym"
         identityKey="D88RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujaaa"
         amount={425.65843}
         {...storybookStyles(theme)}
@@ -103,7 +103,7 @@ export const FeeIsMoreThanAllRewards = () => {
         onClose={() => setOpen(false)}
         onOk={() => setOpen(false)}
         message="Redeem all rewards"
-        currency="nym"
+        denom="nym"
         identityKey="D88RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujaaa"
         amount={0.001}
         {...storybookStyles(theme)}
@@ -125,7 +125,7 @@ export const FeeIsMoreThanMixnodeReward = () => {
         onOk={async () => setOpen(false)}
         identityKey="D88RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujaaa"
         message="Redeem rewards"
-        currency="nym"
+        denom="nym"
         amount={0.001}
         {...storybookStyles(theme)}
         usesVestingTokens={false}
diff --git a/nym-wallet/src/components/Rewards/RedeemModal.tsx b/nym-wallet/src/components/Rewards/RedeemModal.tsx
index a0543e3ea3..285e8a7721 100644
--- a/nym-wallet/src/components/Rewards/RedeemModal.tsx
+++ b/nym-wallet/src/components/Rewards/RedeemModal.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { Stack, Typography, SxProps } from '@mui/material';
 import { IdentityKeyFormField } from '@nymproject/react/mixnodes/IdentityKeyFormField';
-import { FeeDetails } from '@nymproject/types';
+import { CurrencyDenom, FeeDetails } from '@nymproject/types';
 import { useGetFee } from 'src/hooks/useGetFee';
 import { simulateClaimDelgatorReward, simulateVestingClaimDelgatorReward } from 'src/requests';
 import { ModalFee } from '../Modals/ModalFee';
@@ -14,12 +14,12 @@ export const RedeemModal: React.FC<{
   onOk?: (identityKey: string, fee?: FeeDetails) => void;
   identityKey: string;
   amount: number;
-  currency: string;
+  denom: CurrencyDenom;
   message: string;
   sx?: SxProps;
   backdropProps?: Object;
   usesVestingTokens: boolean;
-}> = ({ open, onClose, onOk, identityKey, amount, currency, message, usesVestingTokens, sx, backdropProps }) => {
+}> = ({ open, onClose, onOk, identityKey, amount, denom, message, usesVestingTokens, sx, backdropProps }) => {
   const { fee, isFeeLoading, feeError, getFee } = useGetFee();
 
   const handleOk = async () => {
@@ -52,7 +52,7 @@ export const RedeemModal: React.FC<{
       <Stack direction="row" justifyContent="space-between" mb={4} mt={identityKey && 4}>
         <Typography sx={{ color: 'text.primary' }}>Rewards amount:</Typography>
         <Typography sx={{ color: 'text.primary' }}>
-          {amount} {currency}
+          {amount} {denom.toUpperCase()}
         </Typography>
       </Stack>
 
diff --git a/nym-wallet/src/components/Send/SendDetails.stories.tsx b/nym-wallet/src/components/Send/SendDetails.stories.tsx
index a9434aa47c..f71b3709ef 100644
--- a/nym-wallet/src/components/Send/SendDetails.stories.tsx
+++ b/nym-wallet/src/components/Send/SendDetails.stories.tsx
@@ -46,6 +46,7 @@ export const SendDetails = () => {
       fromAddress="nymt1w8qp7zsxggvtxhpqpt6e329j42wtv07dm5ts8u"
       toAddress="nymt1w8qp7zsxggvtxhpqpt6e329j42wtv07dm5ts8u"
       fee={{ amount: { amount: '0.01', denom: 'nym' }, fee: { Auto: null } }}
+      denom="nym"
       amount={{ amount: '100', denom: 'nym' }}
       onPrev={() => {}}
       onSend={() => {}}
diff --git a/nym-wallet/src/components/Send/SendDetailsModal.tsx b/nym-wallet/src/components/Send/SendDetailsModal.tsx
index 38da2fd143..a96a4e090e 100644
--- a/nym-wallet/src/components/Send/SendDetailsModal.tsx
+++ b/nym-wallet/src/components/Send/SendDetailsModal.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Stack } from '@mui/material';
 import { SxProps } from '@mui/system';
+import { CurrencyDenom } from '@nymproject/types';
 import { FeeDetails, DecCoin } from '@nymproject/types';
 import { SimpleModal } from '../Modals/SimpleModal';
 import { ModalListItem } from '../Modals/ModalListItem';
@@ -10,6 +11,7 @@ export const SendDetailsModal = ({
   toAddress,
   fromAddress,
   fee,
+  denom,
   onClose,
   onPrev,
   onSend,
@@ -20,6 +22,7 @@ export const SendDetailsModal = ({
   toAddress: string;
   fee?: FeeDetails;
   amount?: DecCoin;
+  denom: CurrencyDenom;
   onClose: () => void;
   onPrev: () => void;
   onSend: (data: { val: DecCoin; to: string }) => void;
@@ -39,7 +42,7 @@ export const SendDetailsModal = ({
     <Stack gap={0.5} sx={{ mt: 4 }}>
       <ModalListItem label="From" value={fromAddress} divider />
       <ModalListItem label="To" value={toAddress} divider />
-      <ModalListItem label="Amount" value={`${amount?.amount} ${amount?.denom}`} divider />
+      <ModalListItem label="Amount" value={`${amount?.amount} ${denom.toUpperCase()}`} divider />
       <ModalListItem
         label="Fee for this transaction"
         value={!fee ? 'n/a' : `${fee.amount?.amount} ${fee.amount?.denom}`}
diff --git a/nym-wallet/src/components/Send/SendInputModal.tsx b/nym-wallet/src/components/Send/SendInputModal.tsx
index 55c72519fe..855fe4d67c 100644
--- a/nym-wallet/src/components/Send/SendInputModal.tsx
+++ b/nym-wallet/src/components/Send/SendInputModal.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Stack, TextField, Typography } from '@mui/material';
 import { SxProps } from '@mui/system';
 import { CurrencyFormField } from '@nymproject/react/currency/CurrencyFormField';
-import { DecCoin } from '@nymproject/types';
+import { CurrencyDenom, DecCoin } from '@nymproject/types';
 import { validateAmount } from 'src/utils';
 import { SimpleModal } from '../Modals/SimpleModal';
 import { ModalListItem } from '../Modals/ModalListItem';
@@ -12,6 +12,7 @@ export const SendInputModal = ({
   toAddress,
   amount,
   balance,
+  denom,
   error,
   onNext,
   onClose,
@@ -24,6 +25,7 @@ export const SendInputModal = ({
   toAddress: string;
   amount?: DecCoin;
   balance?: string;
+  denom?: CurrencyDenom;
   error?: string;
   onNext: () => void;
   onClose: () => void;
@@ -69,6 +71,7 @@ export const SendInputModal = ({
             validate(value);
           }}
           initialValue={amount?.amount}
+          denom={denom}
         />
         <Typography fontSize="smaller" sx={{ color: 'error.main' }}>
           {error}
diff --git a/nym-wallet/src/components/Send/SendModal.tsx b/nym-wallet/src/components/Send/SendModal.tsx
index ec7f83dc45..c1792c7354 100644
--- a/nym-wallet/src/components/Send/SendModal.tsx
+++ b/nym-wallet/src/components/Send/SendModal.tsx
@@ -21,7 +21,7 @@ export const SendModal = ({ onClose, hasStorybookStyles }: { onClose: () => void
   const [isLoading, setIsLoading] = useState(false);
   const [txDetails, setTxDetails] = useState<TTransactionDetails>();
 
-  const { clientDetails, userBalance, network, denom } = useContext(AppContext);
+  const { clientDetails, userBalance, network } = useContext(AppContext);
   const { fee, getFee } = useGetFee();
 
   const handleOnNext = async () => {
@@ -47,7 +47,7 @@ export const SendModal = ({ onClose, hasStorybookStyles }: { onClose: () => void
     try {
       const txResponse = await send({ amount: val, address: to, memo: '', fee: fee?.fee });
       setTxDetails({
-        amount: `${amount?.amount} ${denom}`,
+        amount: `${amount?.amount} ${clientDetails?.display_mix_denom.toUpperCase()}`,
         txUrl: `${urls(network).blockExplorer}/transaction/${txResponse.tx_hash}`,
       });
     } catch (e) {
@@ -74,6 +74,7 @@ export const SendModal = ({ onClose, hasStorybookStyles }: { onClose: () => void
         onClose={onClose}
         onPrev={() => setModal('send')}
         onSend={handleSend}
+        denom={clientDetails?.display_mix_denom || 'nym'}
         {...hasStorybookStyles}
       />
     );
@@ -87,6 +88,7 @@ export const SendModal = ({ onClose, hasStorybookStyles }: { onClose: () => void
       onClose={onClose}
       onNext={handleOnNext}
       error={error}
+      denom={clientDetails?.display_mix_denom}
       onAmountChange={(value) => setAmount(value)}
       onAddressChange={(value) => setToAddress(value)}
       {...hasStorybookStyles}
diff --git a/nym-wallet/src/components/TokenPoolSelector.tsx b/nym-wallet/src/components/TokenPoolSelector.tsx
index 4b19ec2fb9..1509e0c983 100644
--- a/nym-wallet/src/components/TokenPoolSelector.tsx
+++ b/nym-wallet/src/components/TokenPoolSelector.tsx
@@ -11,7 +11,7 @@ export const TokenPoolSelector: React.FC<{ disabled: boolean; onSelect: (pool: T
   const [value, setValue] = useState<TPoolOption>('balance');
   const {
     userBalance: { tokenAllocation, balance, fetchBalance, fetchTokenAllocation },
-    denom,
+    clientDetails,
   } = useContext(AppContext);
 
   useEffect(() => {
@@ -48,7 +48,9 @@ export const TokenPoolSelector: React.FC<{ disabled: boolean; onSelect: (pool: T
           {tokenAllocation && (
             <ListItemText
               primary="Locked"
-              secondary={`${+tokenAllocation.locked + +tokenAllocation.spendable} ${denom}`}
+              secondary={`${
+                +tokenAllocation.locked + +tokenAllocation.spendable
+              } ${clientDetails?.display_mix_denom.toUpperCase()}`}
               sx={{ textTransform: 'uppercase' }}
             />
           )}
diff --git a/nym-wallet/src/context/delegations.tsx b/nym-wallet/src/context/delegations.tsx
index cb1110db16..009d3c0ecd 100644
--- a/nym-wallet/src/context/delegations.tsx
+++ b/nym-wallet/src/context/delegations.tsx
@@ -74,7 +74,6 @@ export const DelegationContextProvider: FC<{
   };
 
   const resetState = () => {
-    setIsLoading(true);
     setError(undefined);
     setTotalDelegations(undefined);
     setTotalRewards(undefined);
@@ -82,6 +81,7 @@ export const DelegationContextProvider: FC<{
   };
 
   const refresh = useCallback(async () => {
+    setIsLoading(true);
     try {
       const data = await getDelegationSummary();
       const pending = await getAllPendingDelegations();
diff --git a/nym-wallet/src/context/main.tsx b/nym-wallet/src/context/main.tsx
index b03318ba0c..317c7ccf0e 100644
--- a/nym-wallet/src/context/main.tsx
+++ b/nym-wallet/src/context/main.tsx
@@ -2,7 +2,7 @@ import React, { createContext, useEffect, useMemo, useState } from 'react';
 import { forage } from '@tauri-apps/tauri-forage';
 import { useNavigate } from 'react-router-dom';
 import { useSnackbar } from 'notistack';
-import { Account, AccountEntry, CurrencyDenom, MixNodeBond } from '@nymproject/types';
+import { Account, AccountEntry, MixNodeBond } from '@nymproject/types';
 import { getVersion } from '@tauri-apps/api/app';
 import { AppEnv, Network } from '../types';
 import { TUseuserBalance, useGetBalance } from '../hooks/useGetBalance';
@@ -49,7 +49,6 @@ export type TAppContext = {
   loginType?: TLoginType;
   showSettings: boolean;
   showSendModal: boolean;
-  denom: Uppercase<CurrencyDenom>;
   handleShowSettings: () => void;
   handleShowSendModal: () => void;
   setIsLoading: (isLoading: boolean) => void;
@@ -68,7 +67,6 @@ export const AppContext = createContext({} as TAppContext);
 
 export const AppProvider = ({ children }: { children: React.ReactNode }) => {
   const [clientDetails, setClientDetails] = useState<Account>();
-  const [denom, setDenom] = useState<Uppercase<CurrencyDenom>>('NYM');
   const [storedAccounts, setStoredAccounts] = useState<AccountEntry[]>();
   const [mixnodeDetails, setMixnodeDetails] = useState<MixNodeBond | null>(null);
   const [network, setNetwork] = useState<Network | undefined>();
@@ -101,7 +99,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     try {
       const client = await selectNetwork(n);
       setClientDetails(client);
-      setDenom(client.display_mix_denom.toUpperCase() as Uppercase<CurrencyDenom>);
     } catch (e) {
       enqueueSnackbar('Error loading account', { variant: 'error' });
       Console.error(e as string);
@@ -256,7 +253,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
       storedAccounts,
       mixnodeDetails,
       userBalance,
-      denom,
       showAdmin,
       showTerminal,
       showSettings,
@@ -294,7 +290,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
       showTerminal,
       showSettings,
       showSendModal,
-      denom,
     ],
   );
 
diff --git a/nym-wallet/src/context/mocks/main.tsx b/nym-wallet/src/context/mocks/main.tsx
index 62b53da136..c0af920aee 100644
--- a/nym-wallet/src/context/mocks/main.tsx
+++ b/nym-wallet/src/context/mocks/main.tsx
@@ -35,7 +35,7 @@ export const MockMainContextProvider: FC<{}> = ({ children }) => {
         fetchTokenAllocation: async () => undefined,
         refreshBalances: async () => {},
       },
-      denom: 'NYM',
+      displayDenom: 'NYM',
       showAdmin: false,
       showTerminal: false,
       showSettings: false,
diff --git a/nym-wallet/src/pages/balance/components/TransferModal.tsx b/nym-wallet/src/pages/balance/components/TransferModal.tsx
index f2236b3c39..02a8318064 100644
--- a/nym-wallet/src/pages/balance/components/TransferModal.tsx
+++ b/nym-wallet/src/pages/balance/components/TransferModal.tsx
@@ -16,18 +16,19 @@ export const TransferModal = ({ onClose }: { onClose: () => void }) => {
   const [fee, setFee] = useState<FeeDetails>();
   const [tx, setTx] = useState<TTransactionDetails>();
 
-  const { userBalance, denom, network } = useContext(AppContext);
+  const { userBalance, clientDetails, network } = useContext(AppContext);
 
   const getFee = async () => {
-    if (userBalance.tokenAllocation?.spendable && denom) {
+    if (userBalance.tokenAllocation?.spendable && clientDetails?.display_mix_denom) {
       try {
         const simulatedFee = await simulateWithdrawVestedCoins({
-          amount: { amount: userBalance.tokenAllocation?.spendable, denom },
+          amount: { amount: userBalance.tokenAllocation?.spendable, denom: clientDetails?.display_mix_denom },
         });
         setFee(simulatedFee);
+        await userBalance.refreshBalances();
       } catch (e) {
         setFee({
-          amount: { amount: 'n/a', denom: denom as CurrencyDenom },
+          amount: { amount: 'n/a', denom: clientDetails?.display_mix_denom.toUpperCase() as CurrencyDenom },
           fee: { Auto: null },
         });
         Console.error(e);
@@ -40,16 +41,19 @@ export const TransferModal = ({ onClose }: { onClose: () => void }) => {
   }, []);
 
   const handleTransfer = async () => {
-    if (userBalance.tokenAllocation?.spendable && denom) {
+    if (userBalance.tokenAllocation?.spendable && clientDetails?.display_mix_denom) {
       setState('loading');
       try {
-        const txResponse = await withdrawVestedCoins({
-          amount: userBalance.tokenAllocation?.spendable,
-          denom: denom as CurrencyDenom,
-        });
+        const txResponse = await withdrawVestedCoins(
+          {
+            amount: userBalance.tokenAllocation?.spendable,
+            denom: clientDetails?.display_mix_denom,
+          },
+          fee?.fee,
+        );
         setState('success');
         setTx({
-          amount: `${userBalance.tokenAllocation?.spendable} ${denom}`,
+          amount: `${userBalance.tokenAllocation?.spendable} ${clientDetails.display_mix_denom.toUpperCase()}`,
           url: `${urls(network).blockExplorer}/transaction/${txResponse.transaction_hash}`,
         });
         await userBalance.refreshBalances();
@@ -84,7 +88,7 @@ export const TransferModal = ({ onClose }: { onClose: () => void }) => {
           <>
             <ModalListItem
               label="Unlocked transferrable tokens"
-              value={`${userBalance.tokenAllocation?.spendable} ${denom}`}
+              value={`${userBalance.tokenAllocation?.spendable} ${clientDetails?.display_mix_denom.toUpperCase()}`}
               divider
             />
             <ModalListItem
diff --git a/nym-wallet/src/pages/balance/vesting.tsx b/nym-wallet/src/pages/balance/vesting.tsx
index 0175e9d02c..2ff85cf4bf 100644
--- a/nym-wallet/src/pages/balance/vesting.tsx
+++ b/nym-wallet/src/pages/balance/vesting.tsx
@@ -35,7 +35,7 @@ const vestingPeriod = (current?: Period, original?: number) => {
 };
 
 const VestingSchedule = () => {
-  const { userBalance, denom } = useContext(AppContext);
+  const { userBalance, clientDetails } = useContext(AppContext);
   const [vestedPercentage, setVestedPercentage] = useState(0);
 
   const calculatePercentage = () => {
@@ -66,7 +66,8 @@ const VestingSchedule = () => {
           </TableRow>
           <TableRow>
             <TableCell sx={{ borderBottom: 'none', textTransform: 'uppercase' }}>
-              {userBalance.tokenAllocation?.vesting || 'n/a'} / {userBalance.originalVesting?.amount.amount} {denom}
+              {userBalance.tokenAllocation?.vesting || 'n/a'} / {userBalance.originalVesting?.amount.amount}{' '}
+              {clientDetails?.display_mix_denom.toUpperCase()}
             </TableCell>
             <TableCell align="left" sx={{ borderBottom: 'none' }}>
               {vestingPeriod(userBalance.currentVestingPeriod, userBalance.originalVesting?.number_of_periods)}
@@ -78,7 +79,8 @@ const VestingSchedule = () => {
               </Box>
             </TableCell>
             <TableCell sx={{ borderBottom: 'none', textTransform: 'uppercase' }} align="right">
-              {userBalance.tokenAllocation?.vested || 'n/a'} / {userBalance.originalVesting?.amount.amount} {denom}
+              {userBalance.tokenAllocation?.vested || 'n/a'} / {userBalance.originalVesting?.amount.amount}{' '}
+              {clientDetails?.display_mix_denom.toUpperCase()}
             </TableCell>
           </TableRow>
         </TableHead>
@@ -88,7 +90,7 @@ const VestingSchedule = () => {
 };
 
 const TokenTransfer = () => {
-  const { userBalance, denom } = useContext(AppContext);
+  const { userBalance, clientDetails } = useContext(AppContext);
   const icon = useCallback(
     () => (
       <Box sx={{ display: 'flex', mr: 1 }}>
@@ -114,7 +116,7 @@ const TokenTransfer = () => {
           fontWeight="700"
           textTransform="uppercase"
         >
-          {userBalance.tokenAllocation?.spendable || 'n/a'} {denom}
+          {userBalance.tokenAllocation?.spendable || 'n/a'} {clientDetails?.display_mix_denom.toUpperCase()}
         </Typography>
       </Grid>
     </Grid>
diff --git a/nym-wallet/src/pages/bond/components/GatewayForm.tsx b/nym-wallet/src/pages/bond/components/GatewayForm.tsx
index e8a1520e69..966411fa3d 100644
--- a/nym-wallet/src/pages/bond/components/GatewayForm.tsx
+++ b/nym-wallet/src/pages/bond/components/GatewayForm.tsx
@@ -63,7 +63,7 @@ export const GatewayForm = ({
     resolver: yupResolver(gatewayValidationSchema),
     defaultValues,
   });
-  const { userBalance, clientDetails, denom } = useContext(AppContext);
+  const { userBalance, clientDetails } = useContext(AppContext);
 
   const { fee, getFee, resetFeeState, feeError } = useGetFee();
 
@@ -209,7 +209,7 @@ export const GatewayForm = ({
               fullWidth
               label="Amount"
               onChanged={(val) => setValue('amount', val, { shouldValidate: true })}
-              denom={denom}
+              denom={clientDetails?.display_mix_denom}
               validationError={errors.amount?.amount?.message}
             />
           </Grid>
diff --git a/nym-wallet/src/pages/bond/components/MixnodeForm.tsx b/nym-wallet/src/pages/bond/components/MixnodeForm.tsx
index 91d38047cc..11a86b7532 100644
--- a/nym-wallet/src/pages/bond/components/MixnodeForm.tsx
+++ b/nym-wallet/src/pages/bond/components/MixnodeForm.tsx
@@ -66,7 +66,7 @@ export const MixnodeForm = ({
     defaultValues,
   });
 
-  const { userBalance, clientDetails, denom } = useContext(AppContext);
+  const { userBalance, clientDetails } = useContext(AppContext);
 
   const { fee, getFee, resetFeeState, feeError } = useGetFee();
 
@@ -216,7 +216,7 @@ export const MixnodeForm = ({
                 fullWidth
                 label="Amount"
                 onChanged={(val) => setValue('amount', val, { shouldValidate: true })}
-                denom={denom}
+                denom={clientDetails?.display_mix_denom}
                 validationError={errors.amount?.amount?.message}
               />
             </Grid>
diff --git a/nym-wallet/src/pages/bond/components/SuccessView.tsx b/nym-wallet/src/pages/bond/components/SuccessView.tsx
index eadeeb4e25..35d37f6208 100644
--- a/nym-wallet/src/pages/bond/components/SuccessView.tsx
+++ b/nym-wallet/src/pages/bond/components/SuccessView.tsx
@@ -5,7 +5,7 @@ import { AppContext } from '../../../context/main';
 import { useCheckOwnership } from '../../../hooks/useCheckOwnership';
 
 export const SuccessView: React.FC<{ details?: { amount: string; address: string } }> = ({ details }) => {
-  const { userBalance, denom } = useContext(AppContext);
+  const { userBalance, clientDetails } = useContext(AppContext);
   const { ownership } = useCheckOwnership();
 
   return (
@@ -15,7 +15,9 @@ export const SuccessView: React.FC<{ details?: { amount: string; address: string
         subtitle="Successfully bonded to node with following details"
         caption={
           ownership.vestingPledge
-            ? `Your current locked balance is: ${userBalance.tokenAllocation?.locked}${denom}`
+            ? `Your current locked balance is: ${
+                userBalance.tokenAllocation?.locked
+              } ${clientDetails?.display_mix_denom.toUpperCase()}`
             : `Your current balance is: ${userBalance.balance?.printable_balance.toUpperCase()}`
         }
       />
@@ -26,7 +28,7 @@ export const SuccessView: React.FC<{ details?: { amount: string; address: string
               { primary: 'Node', secondary: details.address },
               {
                 primary: 'Amount',
-                secondary: `${details.amount} ${denom}`,
+                secondary: `${details.amount} ${clientDetails?.display_mix_denom.toUpperCase()}`,
               },
             ]}
           />
diff --git a/nym-wallet/src/pages/delegation/index.tsx b/nym-wallet/src/pages/delegation/index.tsx
index e3bf0d75a9..8d243e07e9 100644
--- a/nym-wallet/src/pages/delegation/index.tsx
+++ b/nym-wallet/src/pages/delegation/index.tsx
@@ -44,7 +44,6 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
   const {
     clientDetails,
     network,
-    denom,
     userBalance: { balance, originalVesting, fetchBalance },
   } = useContext(AppContext);
 
@@ -343,7 +342,7 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
           onOk={handleNewDelegation}
           header="Delegate"
           buttonText="Delegate stake"
-          currency={denom}
+          denom={clientDetails?.display_mix_denom || 'nym'}
           accountBalance={balance?.printable_balance}
           rewardInterval="weekly"
           hasVestingContract={Boolean(originalVesting)}
@@ -359,7 +358,7 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
           header="Delegate more"
           buttonText="Delegate more"
           identityKey={currentDelegationListActionItem.node_identity}
-          currency={denom}
+          denom={clientDetails?.display_mix_denom || 'nym'}
           accountBalance={balance?.printable_balance}
           nodeUptimePercentage={currentDelegationListActionItem.avg_uptime_percent}
           profitMarginPercentage={currentDelegationListActionItem.profit_margin_percent}
@@ -386,7 +385,7 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
           onClose={() => setShowRedeemRewardsModal(false)}
           onOk={(identity, fee) => handleRedeem(identity, fee)}
           message="Redeem rewards"
-          currency={denom}
+          denom={clientDetails?.display_mix_denom || 'nym'}
           identityKey={currentDelegationListActionItem?.node_identity}
           amount={+currentDelegationListActionItem.accumulated_rewards.amount}
           usesVestingTokens={currentDelegationListActionItem.uses_vesting_contract_tokens}
@@ -399,7 +398,7 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
           onClose={() => setShowCompoundRewardsModal(false)}
           onOk={(identity, fee) => handleCompound(identity, fee)}
           message="Compound rewards"
-          currency={denom}
+          denom={clientDetails?.display_mix_denom || 'nym'}
           identityKey={currentDelegationListActionItem?.node_identity}
           amount={+currentDelegationListActionItem.accumulated_rewards.amount}
           usesVestingTokens={currentDelegationListActionItem.uses_vesting_contract_tokens}
diff --git a/nym-wallet/src/pages/receive/index.tsx b/nym-wallet/src/pages/receive/index.tsx
index 6d69f41cfe..cc97096409 100644
--- a/nym-wallet/src/pages/receive/index.tsx
+++ b/nym-wallet/src/pages/receive/index.tsx
@@ -6,11 +6,11 @@ import { AppContext } from '../../context/main';
 import { PageLayout } from '../../layouts';
 
 export const Receive = () => {
-  const { clientDetails, denom } = useContext(AppContext);
+  const { clientDetails } = useContext(AppContext);
 
   return (
     <PageLayout>
-      <NymCard title={`Receive ${denom}`}>
+      <NymCard title={`Receive ${clientDetails?.display_mix_denom.toUpperCase()}`}>
         <Stack spacing={3} alignItems="center">
           <Alert severity="info" data-testid="receive-nym" sx={{ width: '100%' }}>
             You can receive tokens by providing this address to the sender
diff --git a/nym-wallet/src/requests/vesting.ts b/nym-wallet/src/requests/vesting.ts
index 16d5aa768d..15f141d7ab 100644
--- a/nym-wallet/src/requests/vesting.ts
+++ b/nym-wallet/src/requests/vesting.ts
@@ -57,8 +57,8 @@ export const vestingBondMixNode = async ({
 export const vestingUnbondMixnode = async (fee?: Fee) =>
   invokeWrapper<TransactionExecuteResult>('vesting_unbond_mixnode', { fee });
 
-export const withdrawVestedCoins = async (amount: DecCoin) =>
-  invokeWrapper<TransactionExecuteResult>('withdraw_vested_coins', { amount });
+export const withdrawVestedCoins = async (amount: DecCoin, fee?: Fee) =>
+  invokeWrapper<TransactionExecuteResult>('withdraw_vested_coins', { amount, fee });
 
 export const vestingUpdateMixnode = async (profitMarginPercent: number) =>
   invokeWrapper<TransactionExecuteResult>('vesting_update_mixnode', { profitMarginPercent });
diff --git a/ts-packages/react-components/src/components/currency/CurrencyFormField.tsx b/ts-packages/react-components/src/components/currency/CurrencyFormField.tsx
index f03174776f..34fb118c34 100644
--- a/ts-packages/react-components/src/components/currency/CurrencyFormField.tsx
+++ b/ts-packages/react-components/src/components/currency/CurrencyFormField.tsx
@@ -18,7 +18,7 @@ export const CurrencyFormField: React.FC<{
   validationError?: string;
   placeholder?: string;
   label?: string;
-  denom?: string;
+  denom?: CurrencyDenom;
   onChanged?: (newValue: DecCoin) => void;
   onValidate?: (newValue: string | undefined, isValid: boolean, error?: string) => void;
   sx?: SxProps;
@@ -35,7 +35,7 @@ export const CurrencyFormField: React.FC<{
   onValidate,
   sx,
   showCoinMark = true,
-  denom = 'NYM',
+  denom = 'nym',
 }) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [value, setValue] = React.useState<string | undefined>(initialValue);
@@ -113,7 +113,7 @@ export const CurrencyFormField: React.FC<{
     if (onChanged) {
       const newMajorCurrencyAmount: DecCoin = {
         amount: newValue,
-        denom: denom as CurrencyDenom,
+        denom,
       };
       onChanged(newMajorCurrencyAmount);
     }
@@ -132,8 +132,8 @@ export const CurrencyFormField: React.FC<{
         required,
         endAdornment: showCoinMark && (
           <InputAdornment position="end">
-            {denom === 'unym' && <CoinMark height="20px" />}
-            {denom !== 'unym' && <span>NYMT</span>}
+            {denom === 'nym' && <CoinMark height="20px" />}
+            {denom !== 'nym' && <span>NYMT</span>}
           </InputAdornment>
         ),
         ...{
diff --git a/ts-packages/types/src/types/global.ts b/ts-packages/types/src/types/global.ts
index 1ec545138c..3c020800e2 100644
--- a/ts-packages/types/src/types/global.ts
+++ b/ts-packages/types/src/types/global.ts
@@ -1,4 +1,4 @@
-import { MixNode, DecCoin } from './rust';
+import { MixNode, DecCoin, CurrencyDenom } from './rust';
 
 export type TNodeType = 'mixnode' | 'gateway';