Skip to content

feat(ui): dashboard — PercentileRow component #80

@Tinna23

Description

@Tinna23

Overview

Build the PercentileRow component — a horizontal strip displaying all eleven percentile fee values from the latest Horizon data.

Acceptance Criteria

  • Component at src/app/components/dashboard/PercentileRow.tsx
  • Accepts props: { percentiles: PercentileFees | null; isLoading: boolean }
  • Displays all eleven percentiles in order: p10 p20 p30 p40 p50 p60 p70 p80 p90 p95 p99
  • Each cell: percentile label above, value in stroops below
  • Colour gradient from green (low) to yellow/red (high) to visually convey distribution
  • Scrollable horizontally on small screens
  • Loading state: skeleton cells
  • Values sourced directly from FeeStats.percentiles (the corrected Horizon field mapping)

Notes

  • The percentile fields (p10p99) come from the backend which maps Horizon's non-standard response fields — do not assume p25/p75 exist

Metadata

Metadata

Assignees

No one assigned

    Labels

    frontendFrontend / UI work

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions