[TASK] Hubble Bridge Statistics Widget

Widget Handoff

Please see below for the handoff for the UI widget integration within Hubble Bridge. This widget will encompass two views: the education stepper view & bridge stats data view that can be toggled back and forth. In the default state, we will render the Hubble Overview instead of the education view -- assuming most would find that more helpful if they are not first-time users.

Hubble Overview (Default State)

The bridge stats data view will provide users with the Hubble Overview or the Pool View. In the default state, the Hubble Overview will be displayed to showcase general data of Hubble Bridge.

Pool View (Bridge Token Selected)

Once the bridging token (pool) has been selected, the interface will render the specified pool data to inform users of the activity of the selected pool.

Transaction in Progress (Collapsed View)

Once the transaction is in progress, the interface will remove the display of the widget altogether.

Education Stepper View

The education stepper view will provide a step-by-step walkthrough to users, as initially implemented in various states (deposit, transfer, withdrawal), but with an updated stepper component to improve status visibility.

Design System Updates

To address this issue, the following components have been added/updated within the design system:

Charts components have been added with dark mode (see page '🟢 Charts' in the design system). These chart components are also implemented in the Hubble Stats UI.
Stepper components have been added to the education widget view (see page '🟢 Stepper' in the design system).

Wireframes

The end-to-end wireframes have been updated the reflect the latest addition of the widget view. Please reference to above wireframes for a more detailed look at how the components interact holistically. The end-to-end prototype has also been updated to reflect the latest changes.

Walkthrough

https://user-images.githubusercontent.com/109539270/227401928-1080255a-87d4-4eea-883a-8e2c7027c505.mp4

Notes

Due to the swapping between the left and right components, the background image has been temporarily removed from the prototype. I will recreate the background image in the upcoming week.

tangle-network / webb-experiences