We need a UI component for tracking status and showing details of various gooddollar transactions. The design is similar to how we currently show it in the wallet feed (See previews)
Detailed Description of Functionality
The card should show various details for a transaction including:
network logo on which network it happened
contract name (if can be obtained). Should also link to the contract page on an explorer
Amount of G$'s involved with the transactions
date it happened
Colors should follow the state of the transaction (pending/failed/success)
transaction link (TBD how to handle)
if failed, should be able to try again the transaction
Technical Implementation
[x] create a helper / hook to format transactionState to a UI appropriate format (outside of ui-component)
[x] create a UI component, it should take as prop a formatted transactionState.
use withTheme to apply a base/theme style following figma defined designed
define the theme in a way that it could be applied on variations of the UI component (eg. pre-claim card)
[ ] additional prop is a callback for handling a potentially failed transaction
[ ] Should show colors for state
Yellow: transaction is being send to the blockchain
Red: transaction failed, could be during sending to blockchain, or while trying to confirm on the blockchain (eg. insufficient gas)
Green: Succesfully confirmed transaction
TBD
[x] How to handle icons, just hardcoded for now? <-- hardcoded
[x] should we already make it generic and be able to handle X transactions for token Y? <-- no
[x] should this component handle transaction + pool details both? or better to make it two separate components? <-- generic state card
Specify criteria that will be used to determine if the feature meets the requirements and functions correctly.
[ ] (Should include a list of testing points for QA how to verify design/functionality)
filled out by the development team or can contain suggestions._
Business Description
We need a UI component for tracking status and showing details of various gooddollar transactions. The design is similar to how we currently show it in the wallet feed (See previews)
Detailed Description of Functionality
The card should show various details for a transaction including:
Technical Implementation
TBD
Design Reference
Source: https://www.figma.com/design/ihw1PxBvLxacTHnN2aj4lC/3.-Product?node-id=12954-39410&t=CMftTqlSevdThkA2-4
Preview:
Acceptance Criteria
Specify criteria that will be used to determine if the feature meets the requirements and functions correctly.