webb-dapp icon indicating copy to clipboard operation
webb-dapp copied to clipboard

[TASK] Implement Blueprint Details Page

Open monaiuu opened this issue 1 year ago • 1 comments

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

Screenshot 2024-07-29 at 10 16 15 AM Screenshot 2024-07-28 at 8 37 10 PM Screenshot 2024-07-28 at 8 38 18 PM

Figma Link

monaiuu avatar Jul 28 '24 12:07 monaiuu

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?

image image

drewstone avatar Jul 29 '24 11:07 drewstone