From ccf93fdb40ab7f727e69fddf3fcb01c0525d95d4 Mon Sep 17 00:00:00 2001 From: Usame Algan <5880855+usame-algan@users.noreply.github.com> Date: Thu, 22 Jun 2023 16:52:28 +0200 Subject: [PATCH] [TX flow] Display Token balance (#2155) * Add folder structure for tx flow * feat: create new-tx route and NewTxMenu component * feat: Add StepperFactory and new tx layout (#2040) * feat: Add StepperFactory, new tx pages * wip: context instead of routes * Add tx flows to new modal context * fix: Close modal when user navigates * Export all flows from one file * refactor: Remove unused code from StepperFactory * fix: Duplicate ModalDialog to fix failing tests * Refactor: reactive recommended nonce (#2050) * Refactor: reactive recommended nonce Reduce re-renders Nonce -1 * Use "nonceReadyOnly" instead of -1 * Split sign and execute into two components * feat: Transaction status widget (#2062) * feat: add tx status widget UI * add logic to paint the stepper * port the ConfirmProposedTx to the new layout * pass tx data to the TxStatusWidget to get the tx confirmations * style: add new lines between adjacent tags * Refactor: SafeTxProvider (#2064) * Refactor: SafeTxProvider * Avoid oscillating nonce * fix reject tx for new provider --------- Co-authored-by: Usame Algan * Move progress to TxLayout * Refactor: useRecommendedNonce + useSafeTxGas (#2066) * Refactor: useRecommendedNonce + useSafeTxGas * Fix lint * Get recommended nonce by "estimating" an empty tx * Adjust ConfirmTx and ExecuteTxButton * Refactor: a less verbose ModalProvider (#2068) * Refactor: a less verbose ModalProvider * Fix Cannot redefine property: dispatchTxProposal * Refactor the tx flow system (#2071) * Refactor the tx flow system * Array * Fix: pass nonce correctly (#2072) * Fix linting errors, add TODOs for failing tx flows (#2070) * Editable nonce (#2077) * Editable nonce * Fix tests * refactor: save entire data structure on submission (#2083) * fix: Close modal on sign, only render current step * fix: Close modal on sign, only render current step * fix: set all data + move back button --------- Co-authored-by: Usame Algan * feat: Add SuccessScreen to tx flow (#2080) * Refactor: single type for tx flows (#2084) * Refactor: single type for tx flows * Omit txNonce * FormData type * feat: add owner flow (#2086) * feat: Change threshold flow (#2085) * feat: Port change threshold flow * fix: Only estimate gas when executing * fix: Remove old component * feat: remove owner flow * feat: replace owner flow (#2087) * feat: add owner flow * feat: replace owner flow * feat: replace owner flow * feat: update flow (#2089) * fix: Remove Module tx flow (#2090) * Add flow for remove guard (#2091) * Safe Apps tx flow (#2081) * SafeAppsTx flow * On close * Handle txFlow close * feat: new spending limit flow (#2093) * feat: new spending limit flow * fix: preserve token address + reset time values * Onclose callback (#2094) * Send button in Assets (#2097) * Send button in Assets * Supress contentEditable warning * Fix: align Next and Back buttons (#2103) * feat: remove spending limit flow (#2098) * Refactor: move AdvancedParams to ExecuteForm (#2104) * fix: Move sign msg modal to new flow (#2102) * fix: Move sign msg modal to new flow * Adjust flex property if subtitle exists * fix: Add flag to hide nonce field in TxLayout * TxCard layout (#2105) * Modal title and icon (#2107) * Modal title and icon * NFTs * feat: spending limit selector (#2106) * feat: batch execute flow (#2108) * Move on-chain sign to new flow (#2109) * feat: amount selector (#2111) * feat: amount selector * fix: use CSS variables * fix: cleanup styles * feat: execute/sign `RadioGroup` (#2117) * [Tx flow] feat: address input redesign (#2112) * feat: AddressInputReadOnly component * improve AddressInput * make component readonly * enable create AB entry from input component * show SaveAddressicon if address not in AB * open the list when clicking the caret * fix component height * show caret when there are available options * rm leftover code * do not highlight the readonly input on hover/click * focus the AddressInput on clicking to edit * change add to AB info text * do not truncate the address in the readonly component * show SaveAddressIcon when address is valid * amount input grows until token name * [TX flow] feat: confirm/execute title component (#2119) * feat: confirm/execute titles * place the component as per design * remove redundant code * use willExecute flag to display execution title * adjust the gap between SignOrExecuteForm elements * fix: remove error casting (#2127) * fix: remove error casting * refactor: don't call `asError` twice * fix: execution method style (#2125) * fix: execution method style * fix: change component * fix: change component * fix: update amount field style (#2124) * [TX flow] Send tokens overview (#2136) * fix: Adjust TxLayout header design * fix: Implement Token Transfer overview design * Remove loading state * [TX flow] style: offchain messages info boxes styles (#2134) * style: adjust success and info box styles * adjust msgSigners style * style margins in the info elements * clean up redundant variable * test: update tx builder URL * Feat: editable safeTxGas in Advanced details (#2132) * Feat: editable safeTxGas in Advanced details * Prettier * Make the form a popover * PR comments * fix: Nonce form (#2120) * fix: Update nonce input to show queued txs and reset button * fix: Extract hook, show input error outline, hide reset button if readonly * Add isEmpty flag to nonce input * Fix test * [TX flow] style: send token flow (#2126) * placeholder for AddressInput identicon * rm Send From * add the dividers to the layout * style CardActions * fix tests * [TX flow] styles: fix send token styles (#2138) * style: remove unnecessary CSS * style: consider the input label font-size in spacing * Small UI tweaks * fix: move default value to placeholder (#2139) * Fix DecodedTx tests * [TX flow] feat: add owner modal (#2143) * feat: create add owner * adjust ReviewOwner design * component to wrap owner address and include subtitle in modal * prefer RHF for form fields. use sx instead of classes * use MUI component * fix: remove owner flow styling (#2150) * fix: remove owner flow styling * fix: add titles * feat: add tooltip to advanced details (#2153) * feat: add tooltip to advanced details * fix: alter wording * [TX flow] feat: replace owner (#2151) * feat: redesign replace owner * rm unnecessary files. move css to module * fix: add titles * Update src/components/tx-flow/flows/AddOwner/ReviewOwner.tsx Co-authored-by: Aaron Cook --------- Co-authored-by: Aaron Cook * fix: Display token balance in dropdown --------- Co-authored-by: Diogo Soares Co-authored-by: katspaugh <381895+katspaugh@users.noreply.github.com> Co-authored-by: katspaugh Co-authored-by: Diogo Soares <32431609+DiogoSoaress@users.noreply.github.com> Co-authored-by: Aaron Cook --- .../TokenTransfer/CreateTokenTransfer.tsx | 20 +++++++++++++------ .../flows/TokenTransfer/styles.module.css | 17 +++++++--------- 2 files changed, 21 insertions(+), 16 deletions(-) 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;