[GoodID-UI]: Transaction State Card

[L03TJ3]

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:

1. network logo on which network it happened
2. contract name (if can be obtained). Should also link to the contract page on an explorer
3. Amount of G$'s involved with the transactions
4. date it happened
5. Colors should follow the state of the transaction (pending/failed/success)
6. transaction link (TBD how to handle)
7. if failed, should be able to try again the transaction

Technical Implementation

• create a helper / hook to format transactionState to a UI appropriate format (outside of ui-component)
• 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)
• 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

• How to handle icons, just hardcoded for now? <-- hardcoded
• should we already make it generic and be able to handle X transactions for token Y? <-- no
• should this component handle transaction + pool details both? or better to make it two separate components? <-- generic state card

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.

• (Should include a list of testing points for QA how to verify design/functionality)
  filled out by the development team or can contain suggestions._