Description

The current transactions management system is fragmented across the dApp (i.e., bridging, restaking, transferring). To provide a consistent experience, let's unify how transactions are managed, displayed, and updated within the dApp.

Key Issues:

• Different transaction state handling
• Inconsistent progress tracking
• Different notification approaches / patterns

Proposed Updates:

• Standardized Transactions Handling:
  • Ensure all transactions, regardless of their origin (bridging, restaking, etc.), use standardized copies, states, and visual displays.
  • Use consistent messaging for transaction states, including pending, success, failure.
• Unify Notification Component Display:
  • Leverage the existing notification component to display transaction updates in real time.
    • remove usage for transaction progressor on bridge for simplicity
  • Add a loader component in the top navigation bar to show ongoing transactions with an option to open a details drawer or link to the blockchain explorer.
  • Ensure persistence across pages.
• Transaction Details Drawer (Optional):
• If resources and timeline allow, enhance the transaction experience by integrating a side drawer component:
  • Show all current and past transactions in a consolidated view.
  • Include details such as type (e.g., bridge, restake), amount, timestamps, and links to blockchain explorer.
  • This would also improve the account component display.

Implementation:

• Consider using a global Zustand store to keep track of transactions.
• Implement hooks to add/remove/modify transactions in that store.
• Implement a drawer component that slides in from the right side of the screen and shows all the current transactions in the global store.

Goals:

• single component instead of multiple nested ones
• fewer props to manage
• easier to maintain
• more flexible for different use cases

Example Inconsistencies

Proposed Views

• replace bridge specific ico display in top nav with generic loader display
• use notification component for all transaction progress views for simplicity

• Transaction Details Drawer (if timeline allows)