From 946e646126c6fa852318e3a1f171a9a1804aa8eb Mon Sep 17 00:00:00 2001
From: Usame Algan <usame@safe.global>
Date: Thu, 22 Jun 2023 15:31:04 +0200
Subject: [PATCH 1/2] fix: Display token balance in dropdown

---
 .../TokenTransfer/CreateTokenTransfer.tsx      | 18 ++++++++++++------
 .../flows/TokenTransfer/styles.module.css      | 15 ++++++---------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx b/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx
index 9a75a29259..e6ad568c47 100644
--- 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
index bf2b40e4f3..1a5b8e2752 100644
--- 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;
@@ -52,14 +57,6 @@
   margin-right: var(--space-2);
 }
 
-.item {
-  display: inline-flex;
-  gap: 6px;
-  align-items: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
-}
-
 .token {
   display: flex;
   justify-content: center;

From cf2d6905542f0f48ee3601791a722d6c032b0c8c Mon Sep 17 00:00:00 2001
From: Usame Algan <usame@safe.global>
Date: Thu, 22 Jun 2023 15:49:52 +0200
Subject: [PATCH 2/2] fix: Button height

---
 .../tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx       | 4 +++-
 src/components/tx-flow/flows/TokenTransfer/styles.module.css  | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx b/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx
index e6ad568c47..32eaa5ac03 100644
--- a/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx
+++ b/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx
@@ -205,7 +205,9 @@ const CreateTokenTransfer = ({
                       <TokenIcon logoUri={item.tokenInfo.logoUri} tokenSymbol={item.tokenInfo.symbol} />
 
                       <Grid item xs>
-                        <Typography variant="body2">{item.tokenInfo.name}</Typography>
+                        <Typography variant="body2" lineHeight="18px">
+                          {item.tokenInfo.name}
+                        </Typography>
 
                         <Typography variant="caption" component="p">
                           {formatVisualAmount(item.balance, item.tokenInfo.decimals)} {item.tokenInfo.symbol}
diff --git a/src/components/tx-flow/flows/TokenTransfer/styles.module.css b/src/components/tx-flow/flows/TokenTransfer/styles.module.css
index 1a5b8e2752..a92616128e 100644
--- a/src/components/tx-flow/flows/TokenTransfer/styles.module.css
+++ b/src/components/tx-flow/flows/TokenTransfer/styles.module.css
@@ -50,7 +50,7 @@
   display: flex;
   background-color: var(--color-background-main);
   border-radius: 6px;
-  padding: 10px var(--space-5) 10px var(--space-2) !important;
+  padding: var(--space-1) var(--space-5) var(--space-1) var(--space-2) !important;
 }
 
 .select :global(.MuiSelect-icon) {