feat: Add StepperFactory and new tx layout #2040
Conversation
Branch preview✅ Deploy successful! |
ESLint Summary View Full Report
Report generated by eslint-plus-action |
usame-algan
changed the title
| import TokenTransferFlow from '@/components/TxFlow/TokenTransfer/TokenTransferFlow' | ||
| import RejectTx from '@/components/TxFlow/RejectTx' | ||
| import NewTxMenu from '@/components/TxFlow/NewTx' | ||
| import ReplaceTxMenu from '@/components/TxFlow/ReplaceTx' |
There was a problem hiding this comment.
This part can be extracted into another module. Which could be imported and inserted here.
There was a problem hiding this comment.
I've added a new file and exported all components from there. Is this what you have envisioned?
| export enum ModalType { | ||
| SendTokens = 'sendTokens', | ||
| RejectTx = 'rejectTx', | ||
| ReplaceTx = 'replaceTx', | ||
| NewTx = 'newTx', | ||
| } | ||
|
|
||
| const ModalTypes = { | ||
| [ModalType.SendTokens]: TokenTransferFlow, | ||
| [ModalType.RejectTx]: RejectTx, | ||
| [ModalType.ReplaceTx]: ReplaceTxMenu, | ||
| [ModalType.NewTx]: NewTxMenu, | ||
| } |
There was a problem hiding this comment.
I've just realized it's probably easier to just let modal-opening buttons pass TokenTransferFlow directly instead of a string. That would make the dependency explicit.
So instead of
onClick={() => setVisibleModal({ type: ModalType.SendTokens, props: {} })}
they would do
onClick={() => setVisibleModal(<TokenTransferFlow nonce={nonce} />)}
Not 100% convinced tho.
There was a problem hiding this comment.
The implementation we opted for aimed to narrow the possible components we want to show in the modal. It comes at the cost of maintaining the map but setting a component in the dispatcher would make harder to reinforce the types.
We are also not sold on storing the component as state.
There was a problem hiding this comment.
You can still limit the type of components setVisibleModal accepts.
Something like T extends TxFlowComponent, so that it accepts any component whose signature satisfies TxFlowComponent.
| type: SendTxType.multiSig, | ||
| } | ||
|
|
||
| const TokenTransferFlow = ({ txNonce }: { txNonce?: number }) => { |
There was a problem hiding this comment.
The naming is a bit inconsistent, this is the only transaction type named with "Flow" at the end.
There was a problem hiding this comment.
We were also thinking of naming RejectTx to RejectTxFlow but it only has one step and we didn't use the Stepper there so we left it as RejectTx.
What it solves
Part of #2021
How this PR fixes it
ModalProviderfor orchestrating modals in the appTxFlowNewTxMenu,ReplaceTxMenu,RejectTx,TokenTransferto the providerTxLayoutcomponentStepperFactoryand uses it forTokenTransferFlowToDos
How to test it
New Transactionin the sidebarNewTxMenuopening as a fullscreen modalSend TokensTokenTransferFlowopening as a fullscreen modal/queueReplaceTxMenuopening as a fullscreen modalSend TokensorReject TransactionTokenTransferFloworRejectTxopening as a fullscreen modalScreenshots
Checklist