insights dashboard: frontend

[aubrika]

Dashboard Design Reqs:

Data to Display

• UM token info

• Total supply

• Staked tokens

• Price, market cap

• One box per token Metadata sorted by the priority order field, highest first (currently priority will be 0 because this info is absent)

  Each box should have:

  • A rendering of the token symbol and icon, using the existing frontend components
  • Total Value Shielded (cumulative), plus changes over 24h / 7d / 30d
  • Current Value Shielded (current balance), plus changes over 24h / 7d / 30d
  • Number of transparent addresses that transferred that asset (last 24h / last 7d / last 30d / all time)

Dashboard Design Specs:

• Continue work via the template in p3numb3rs:
• React app (via Remix) using Typescript
• Kysely for typed database access
• Use the existing protobuf types to massage database data
• Use the registry NPM library for fetching asset metadata
• Use the existing penumbra UI components to the extent possible, especially for displaying assets
• UI elements should be responsive and not require zooming to see data
• All data should be displayed on one page, with an "info-dense" layout per asset (unlike e.g. usdc.cool which puts a lot of the analogous asset info behind a link)
• Display data inline, no tooltips (as mobile won't have a cursor)
• Display the amount of change rather than the percentage change
• Colorize increase/decreates in green/red respectively
• Display UM price and market cap relative to USDC

[cronokirby]

We've achieved an mvp in github.com/penumbra-zone/penumbers, so we can close this out.