Design SystemTemplatesMarket Resolution

Market Resolution

Adopted在本 repo 設計、production 已採用。站上是設計端的版本，production 實作可能已再調整。

Production：src/components/ResolutionDashboard/index.tsx

Installation

import { DashboardRowsView } from "@/components/product/market-resolution/dashboard-rows-view";

交接 · Production patch

這一頁的內容已在 OpinionLabs/frontend 的本地 clone 上實際接好並驗證過： 真 @olab/components、真 token、真 route（/resolution）。交付形式是兩個 git patch 檔——在 frontend repo 裡用 git am 套用，兩個 commit（含 message 與說明）會原封不動長出來， 之後照一般 feature branch 開 PR / merge 即可。

0001 · 主體（頁面 + TextLink + font-number）0002 · 移除 StepTabs pressed state

套用方式

# 在 OpinionLabs/frontend repo 裡（基底 = main a37cc8e，2026-08-03）
git checkout -b market-resolution
git am 0001-*.patch 0002-*.patch

# 元件庫要重 build 一次（TextLink 是新元件、svg/server 進入點都吃 dist）
pnpm --filter @olab/components build
pnpm dev   # → http://localhost:8888/resolution

已在乾淨的 main checkout 驗證 git am 可完整重放；tsc 對新增檔案 0 error；dev server 實跑過 dark / light 兩模式、倒數、dispute flow、font-number 解析（spaceMono）。

Patch 內容（18 個檔案，全部是新增或一行擴充）

  • src/components/ResolutionDashboard/ —— 本頁的全部組件與 mock 資料。資料層仍是 mock，Api.Detail.getResolutionList / DisputeApi 尚未接。
  • packages/components/.../TextLink/ —— production 沒有的新元件， 新檔案加入 + index.tsx 補一行 export，不動既有元件。
  • src/index.css 補 --font-number —— 指向既有的 --font-secondary。 沒有它不會報錯，所有金額數字會靜默掉回內文字體。
  • src/app/resolution/ —— route + SEO metadata + breadcrumb JSON-LD（照 leaderboard 的慣例）。

三件要知道的事

  • 與既有 DisputeModal 的關係 —— ResolutionDashboard 的 dispute-modal 是既有 src/components/DisputeModal 的超集（多 marketTitle / subtopic 與「被搶先 / 視窗已關」兩種不可提交狀態），刻意不覆蓋原件；要不要合併留給 production 決定。
  • 與既有 MarketResolution 的關係 —— production 既有的是單一市場 的結算時間軸（market detail 內嵌），與這個集中列表頁互補，patch 未動它。
  • 唯一待拍板的視覺偏離 —— dispute 輸入框 placeholder 用 text-quaternary 取代原本寫死的 #86868D，兩者非同色；patch 選擇走 token，要統一回 hex 或改 token 值由 production 決定。

Interactive Demo

這一頁是 Market Resolution 的現行完整答案：三段由上而下 —— How it works Dashboard（強調格 F 案 + 真倒數）、My Disputes（與公開列表同一套 DisputeTable + Tabs）、All Proposals 公開列表（v2 定案組件）。三段共用同一份 mock legs，dispute flow 走得完：在下面的列表按 Dispute → production DisputeModal 提交 → 該腿馬上進上面 My Disputes 的 In review；倒數歸零會真的往下一階段走。

帳號狀態由這排切換（PRD §6 的四種）；production 交付的內容與套用方式見本頁開頭「交接 · Production patch」。

真組件 · 1440pxDemo（含 nav / footer）

scaled 61%

Static State Matrix

未登入已登入、從未 dispute全部已領真資料唯讀模式

未登入

My Disputes 整區不出現（沒有一筆可看，不留空殼）；公開列表照常（看清單不需要錢包），Traded markets 開關也一併收掉——它沒有資料可濾

真組件 · 1440px

scaled 61%

已登入、從未 dispute

My Disputes 同樣整區不出現；差別是 Traded markets 開關可用（有錢包就有持倉資料可濾）

真組件 · 1440px

scaled 61%

全部已領

標題列中性收尾 All rewards claimed，不用 brand 色慶祝

真組件 · 1440px

scaled 61%

真資料唯讀模式

Claim 與 Dispute 停用 + tooltip 說明原因（都是鏈上交易）

真組件 · 1440px

scaled 61%

頁面結構

① How it works Dashboard —— 左欄 pitch（Full rules 連 docs；規則細節不再 展開在頁上）、右欄三階段格（強調格 = brand-1 tint + 橘框，倒數與列表共用 production CountdownTimer 的 warning 黃）。② My Disputes —— DisputeTable + @olab Tabs(newPill) In review / Finalized，與公開列表同一套組件與做法（PM 2026-08-04 裁決）；Claim 是頁上唯一 brand 動作，已領的那顆是 disabled 的 Claimed（陳述狀態不是動作）。未登入或從未 dispute 過時整區不出現（2026-08-05 user 裁決）—— 沒有內容可講的區塊不留空殼，該說的話由 ① 的導言與 ③ 承接。③ All Proposals —— v2 定案的公開列表（StepTabs 三階段、分類 pill、Traded markets 開關、逐階段欄位），唯一 CTA 是 Proposed 的 Dispute；Traded markets 開關在未登入時 同樣整個收掉。