Skip to content

Commit

Permalink
[TX flow] Display Token balance (#2155)
Browse files Browse the repository at this point in the history 
* 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 <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>

---------

Co-authored-by: Aaron Cook <[email protected]>

* fix: Display token balance in dropdown

---------

Co-authored-by: Diogo Soares <[email protected]>
Co-authored-by: katspaugh <[email protected]>
Co-authored-by: katspaugh <[email protected]>
Co-authored-by: Diogo Soares <[email protected]>
Co-authored-by: Aaron Cook <[email protected]>
  • Loading branch information
@usame-algan @DiogoSoaress
@katspaugh @iamacook
6 people committed Jun 22, 2023
1 parent af3bf94 commit ccf93fd
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 16 deletions.
20 changes: 14 additions & 6 deletions src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
CardActions,
Divider,
FormControl,
Grid,
InputLabel,
MenuItem,
SvgIcon,
Expand All @@ -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'

Expand Down Expand Up @@ -200,12 +201,19 @@ 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" lineHeight="18px">
{item.tokenInfo.name}
</Typography>

<Typography variant="caption" component="p">
{formatVisualAmount(item.balance, item.tokenInfo.decimals)} {item.tokenInfo.symbol}
</Typography>
</Grid>
</Grid>
</MenuItem>
))}
</TextField>
Expand Down
17 changes: 7 additions & 10 deletions src/components/tx-flow/flows/TokenTransfer/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand Down

0 comments on commit ccf93fd

Please sign in to comment.