webb-dapp
webb-dapp copied to clipboard
[TASK] Implement Blueprint Details Page
Description
Develop the Blueprint Details Page to provide users with an in-depth overview and interaction options for each Blueprint on the Tangle Network.
Sections/Features
Blueprint Overview Header
- Display key information about each Blueprint: name, contract address, github link, description, social directs
- Metrics: # of operators, # of restakers, TVL, active instances
- Deploy Button: directs users to a step-by-step process for deploying instances of the Blueprint (the deployment flow is WIP).
TVL Table
- Display details related to the Total Value Locked (TVL) for the Blueprint.
- Include a ‘Restake’ button that appears when users hover over the table rows.
- The ‘Restake’ button should direct users to deposit and stake the associated token.
Operators Table
- Display a list of operators running the Blueprint, alongside with the key info and metrics.
- On hover, each row should render:
- ‘View’ button: Directs users to view more details about the operator (Operator Profile Page).
- ‘Restake’ button: Allows users to restake with the operator (pre-load operator in Restake Tx Card if feasible).
Screenshots
Figma Link
I think we need greater separation of colors here. Specifically, there doesn't appear to be any between the main background and the background of this container where the other components are being displayed. Wdyt @monaiuu?