From 641b8179ba66b86eca8d799514b76fdf4a9d1283 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Wed, 20 Jul 2022 12:22:36 +0100
Subject: [PATCH] fix displayed denom

---
 nym-wallet/src/components/Delegation/DelegateModal.tsx    | 1 +
 nym-wallet/src/components/Send/SendDetails.stories.tsx    | 1 +
 nym-wallet/src/components/Send/SendInputModal.tsx         | 3 +++
 nym-wallet/src/components/Send/SendModal.tsx              | 1 +
 nym-wallet/src/pages/bonding/bonding/AmountModal.tsx      | 8 +++++---
 nym-wallet/src/pages/bonding/components/CurrencyInput.tsx | 4 ++--
 .../src/pages/bonding/mixnode/bond-more/BondModal.tsx     | 4 +++-
 .../src/components/currency/CurrencyFormField.tsx         | 4 ++--
 8 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/nym-wallet/src/components/Delegation/DelegateModal.tsx b/nym-wallet/src/components/Delegation/DelegateModal.tsx
index f9503e25e8..24411a34d9 100644
--- a/nym-wallet/src/components/Delegation/DelegateModal.tsx
+++ b/nym-wallet/src/components/Delegation/DelegateModal.tsx
@@ -219,6 +219,7 @@ export const DelegateModal: React.FC<{
           initialValue={amount}
           autoFocus={Boolean(initialIdentityKey)}
           onChanged={handleAmountChanged}
+          denom={currency}
         />
       </Box>
       <Typography
diff --git a/nym-wallet/src/components/Send/SendDetails.stories.tsx b/nym-wallet/src/components/Send/SendDetails.stories.tsx
index a9434aa47c..2d5c756b26 100644
--- a/nym-wallet/src/components/Send/SendDetails.stories.tsx
+++ b/nym-wallet/src/components/Send/SendDetails.stories.tsx
@@ -30,6 +30,7 @@ export const SendInput = () => {
     <SendInputModal
       toAddress=""
       fromAddress="nymt1w8qp7zsxggvtxhpqpt6e329j42wtv07dm5ts8u"
+      denom="NYM"
       onNext={() => {}}
       onClose={() => {}}
       onAddressChange={() => {}}
diff --git a/nym-wallet/src/components/Send/SendInputModal.tsx b/nym-wallet/src/components/Send/SendInputModal.tsx
index 55c72519fe..c7f74ab25a 100644
--- a/nym-wallet/src/components/Send/SendInputModal.tsx
+++ b/nym-wallet/src/components/Send/SendInputModal.tsx
@@ -13,6 +13,7 @@ export const SendInputModal = ({
   amount,
   balance,
   error,
+  denom,
   onNext,
   onClose,
   onAmountChange,
@@ -25,6 +26,7 @@ export const SendInputModal = ({
   amount?: DecCoin;
   balance?: string;
   error?: string;
+  denom: string;
   onNext: () => void;
   onClose: () => void;
   onAmountChange: (value: DecCoin) => 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..35d76e1efd 100644
--- a/nym-wallet/src/components/Send/SendModal.tsx
+++ b/nym-wallet/src/components/Send/SendModal.tsx
@@ -89,6 +89,7 @@ export const SendModal = ({ onClose, hasStorybookStyles }: { onClose: () => void
       error={error}
       onAmountChange={(value) => setAmount(value)}
       onAddressChange={(value) => setToAddress(value)}
+      denom={denom}
       {...hasStorybookStyles}
     />
   );
diff --git a/nym-wallet/src/pages/bonding/bonding/AmountModal.tsx b/nym-wallet/src/pages/bonding/bonding/AmountModal.tsx
index f3c67f4bbf..406584c918 100644
--- a/nym-wallet/src/pages/bonding/bonding/AmountModal.tsx
+++ b/nym-wallet/src/pages/bonding/bonding/AmountModal.tsx
@@ -32,7 +32,7 @@ const AmountModal = ({ open, onClose, onSubmit, nodeType }: Props) => {
     },
   });
 
-  const { userBalance, clientDetails } = useContext(AppContext);
+  const { userBalance, denom } = useContext(AppContext);
 
   const onSubmitForm = async (data: AmountData) => {
     if (data.tokenPool === 'balance' && !(await checkHasEnoughFunds(data.amount.amount || ''))) {
@@ -80,14 +80,16 @@ const AmountModal = ({ open, onClose, onSubmit, nodeType }: Props) => {
               fullWidth
               label="Amount"
               name="amount"
-              currencyDenom={clientDetails?.display_mix_denom}
+              currencyDenom={denom}
               errorMessage={errors.amount?.amount?.message}
             />
           </Stack>
         </form>
         <Stack direction="row" justifyContent="space-between" mt={3}>
           <Typography fontWeight={600}>Account balance</Typography>
-          <Typography fontWeight={600}>{userBalance.balance?.printable_balance || 0}</Typography>
+          <Typography fontWeight={600} textTransform="uppercase">
+            {userBalance.balance?.printable_balance || 0}
+          </Typography>
         </Stack>
         <Divider sx={{ my: 1 }} />
         <Typography fontWeight={400}>Est. fee for this transaction will be cauculated in the next page</Typography>
diff --git a/nym-wallet/src/pages/bonding/components/CurrencyInput.tsx b/nym-wallet/src/pages/bonding/components/CurrencyInput.tsx
index fcae906dec..169b9dd34d 100644
--- a/nym-wallet/src/pages/bonding/components/CurrencyInput.tsx
+++ b/nym-wallet/src/pages/bonding/components/CurrencyInput.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Control, useController } from 'react-hook-form';
 import { CurrencyFormField } from '@nymproject/react/currency/CurrencyFormField';
-import { CurrencyDenom } from '@nymproject/types';
 
 interface Props {
   name: string;
@@ -10,7 +9,7 @@ interface Props {
   required?: boolean;
   fullWidth?: boolean;
   errorMessage?: string;
-  currencyDenom?: CurrencyDenom;
+  currencyDenom?: string;
 }
 
 const CurrencyInput = ({ name, label, control, errorMessage, currencyDenom, required, fullWidth }: Props) => {
@@ -20,6 +19,7 @@ const CurrencyInput = ({ name, label, control, errorMessage, currencyDenom, requ
     name,
     control,
   });
+
   return (
     <CurrencyFormField
       showCoinMark
diff --git a/nym-wallet/src/pages/bonding/mixnode/bond-more/BondModal.tsx b/nym-wallet/src/pages/bonding/mixnode/bond-more/BondModal.tsx
index 93b3ad9af3..89493bc5f8 100644
--- a/nym-wallet/src/pages/bonding/mixnode/bond-more/BondModal.tsx
+++ b/nym-wallet/src/pages/bonding/mixnode/bond-more/BondModal.tsx
@@ -80,7 +80,9 @@ const BondModal = ({ open, onClose, onConfirm, currentBond }: Props) => {
         </form>
         <Stack direction="row" justifyContent="space-between" mt={3}>
           <Typography fontWeight={600}>Account balance</Typography>
-          <Typography fontWeight={600}>{userBalance.balance?.printable_balance || 0}</Typography>
+          <Typography fontWeight={600} textTransform="uppercase">
+            {userBalance.balance?.printable_balance || 0}
+          </Typography>
         </Stack>
         <Divider sx={{ my: 1 }} />
         <Stack direction="row" justifyContent="space-between">
diff --git a/ts-packages/react-components/src/components/currency/CurrencyFormField.tsx b/ts-packages/react-components/src/components/currency/CurrencyFormField.tsx
index f03174776f..979b1f1703 100644
--- a/ts-packages/react-components/src/components/currency/CurrencyFormField.tsx
+++ b/ts-packages/react-components/src/components/currency/CurrencyFormField.tsx
@@ -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>
         ),
         ...{