diff --git a/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx b/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx index 9a75a29259..32eaa5ac03 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,19 @@ const CreateTokenTransfer = ({ > {balancesItems.map((item) => ( -
+ - - {item.tokenInfo.symbol} - -
+ + + + {item.tokenInfo.name} + + + + {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 bf2b40e4f3..a92616128e 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,26 +41,22 @@ padding: var(--space-2); } +.select { + flex-shrink: 0; +} + .select :global(.MuiSelect-select) { margin: var(--space-1); 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) { 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;