`TransactionFlowModel` Component

[leovigna]

Description

Sometimes certain blockchain interactions require a specific order of transactions that MUST be made sequentially. This transaction "flow" is often displayed to users in the form of a modal that prompts the user for wallet confirmations, waits for tx confirmation, and then prompts for additional wallet confirmation etc...

Common use case for this type of UX is for something like a token bridge:

• Approve token transfer: This gives ERC20 spend permission to the bridge smart contract.
• Call bridge smart contract: This pulls ERC20 funds to the bridge smart contract.
• Switch to sidechain: This changes the wallet's network.
• Withdraw funds from bridge: On secondary network, withdraw funds from the token bridge.

The goal of the TransactionFlowModal component is to create a flexible component that can accommodate different sequential transaction "stages", each with their own transaction data and user descriptions. The component should track progress and wait for confirmations. On the backend side of things, we should also design the data model to support recovery of an interrupted transaction flow (eg. user complets step1 but then closes their tab).

Features

• Stage Tracker: Tracks progress (eg. Stage 1/4)
• Stage Description
• Stage State: Either "Awaiting Confirmation" prompt or "Wallet Confirm" (customizable) prompt. A stage can either be waiting for on-chain confirmation or for user confirmation.

Tasks

• Create web3-redux model
• Create web3-redux-components design
• Create Storybook Interaction with an example flow
• Integrate with web3-redux

[leovigna]

Example Transaction Flow UXs

[netanelben]

/cib

[github-actions[bot]]

Branch issue-131 created! Clone with: git fetch && git checkout --track origin/issue-131 Rebase develop branch changes with: git checkout issue-131 && git rebase develop

[netanelben]

/cib

[github-actions[bot]]

Branch already exists