Design SystemPatternsMarketTopHoldersPanel

TopHoldersPanel

Reference照 app.opinion.trade 線上產品重建的對照版，用來量測與討論。不是 production 的程式碼。

Production：src/components/TopHolders/index.tsx

Installation

import { TopHoldersPanel } from "@/components/product/top-holders-panel/top-holders-panel";

Overview

Ranked holder list for a market side (YES / NO by default, labels overridable). Rank is authoritative — the list is not user-sortable. Amounts are shown in a locale-compact format (e.g. "4.3k"). Pagination follows the standard pattern. The side switcher reuses OutcomeSelector rather than a bespoke tab control.

Interactive Demo

Top Holders

  • SY
    sysmado824
    232.34
  • UF
    ufuck
    31.87
  • US
    User_6e1862
    28.01
  • RA
    ravm
    10.32
  • JA
    Jabami
    0.01

OutcomeSelector Reuse

Cross-component consumption

TopHoldersPanel uses OutcomeSelector for its YES/NO tab head. This validates that OutcomeSelector is a Layer-2 abstraction consumable OUTSIDE TradePanel — exactly as required by the component boundary rule.