fix: Display token balance in dropdown

safe-global · Jun 22, 2023 · ceb405d · ceb405d
1 parent e1227c9
commit ceb405d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx b/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx
@@ -19,6 +19,7 @@ import {
   CardActions,
   Divider,
   FormControl,
+  Grid,
   InputLabel,
   MenuItem,
   SvgIcon,
@@ -34,7 +35,7 @@ import NumberField from '@/components/common/NumberField'
 import { validateDecimalLength, validateLimitedAmount } from '@/utils/validation'
 import { type TokenTransferParams, TokenTransferFields, TokenTransferType } from '.'
 import TxCard from '../../common/TxCard'
-import { safeFormatUnits } from '@/utils/formatters'
+import { formatVisualAmount, safeFormatUnits } from '@/utils/formatters'
 import commonCss from '@/components/tx-flow/common/styles.module.css'
 import css from './styles.module.css'
 
@@ -200,12 +201,17 @@ const CreateTokenTransfer = ({
               >
                 {balancesItems.map((item) => (
                   <MenuItem key={item.tokenInfo.address} value={item.tokenInfo.address}>
-                    <div className={css.item}>
+                    <Grid container alignItems="center" gap={1}>
                       <TokenIcon logoUri={item.tokenInfo.logoUri} tokenSymbol={item.tokenInfo.symbol} />
-                      <Typography>
-                        <b>{item.tokenInfo.symbol}</b>
-                      </Typography>
-                    </div>
+
+                      <Grid item xs>
+                        <Typography variant="body2">{item.tokenInfo.name}</Typography>
+
+                        <Typography variant="caption" component="p">
+                          {formatVisualAmount(item.balance, item.tokenInfo.decimals)} {item.tokenInfo.symbol}
+                        </Typography>
+                      </Grid>
+                    </Grid>
                   </MenuItem>
                 ))}
               </TextField>

diff --git a/src/components/tx-flow/flows/TokenTransfer/styles.module.css b/src/components/tx-flow/flows/TokenTransfer/styles.module.css
@@ -24,11 +24,12 @@
 }
 
 .amount {
+  min-width: 130px;
   flex-grow: 1;
 }
 
 .amount :global(.MuiInput-input) {
-  padding-left: var(--space-3);
+  padding-left: var(--space-2);
 }
 
 .max {
@@ -40,6 +41,10 @@
   padding: var(--space-2);
 }
 
+.select {
+  flex-shrink: 0;
+}
+
 .select :global(.MuiSelect-select) {
   margin: var(--space-1);
   display: flex;