Repository navigation
feat(web): rebuild the dashboard in OKX design language - #2
Merged
Merged
Conversation
Replace the generic light-theme card layout with a financial-terminal look derived from design tokens measured on okx.com (home page + BTC/USDT spot page, read via getComputedStyle frequency counts). Design tokens - background #000000 (OKX uses pure black, not off-black) - panels #121212 / #1d1d1d / #2e2e2e / #383838 - accent green #25A750; negative rose #CA3F64 (OKX uses rose, not pure red) - border-radius 0 everywhere; the trading UI is fully square - 1px #383838 hairline dividers instead of card borders and shadows - 14px base type scale; numbers right-aligned with tabular-nums Added - instrument strip: six-cell dense data bar under the header - fund-flow diagram: Trader -> Router -> PoolManager -> XGuardHook -> Settlement, with the hook node highlighted and showing the live risk score and fee. Built with HTML/CSS rather than SVG so it reflows into a vertical flow on narrow screens instead of scrolling sideways. - risk trend curve built from RiskUpdated events: seeded from getContractEvents on load so it has content immediately, then appended through the existing watchContractEvent subscription - flow animation while a transaction is pending (arrow sweep plus a staggered node pulse), gated behind prefers-reduced-motion - gauge position marker so the gauge is still readable when the score is 0 - risk state legend explaining Normal / Warning / Protected Accessibility - every button passes WCAG AA (5.03 - 6.95) - the weakest text tier was raised from OKX's #5B5B5B (3.1:1 on black) to #7A7A7A (4.9:1) - disabled buttons keep legible labels instead of opacity: 0.45, which silently blended the button into the page background Verified - npm run web:build, npm run test:node (22/22), npm run submission:check - no horizontal overflow at 1440 / 1280 / 390 - no button text wrapping
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
这个 PR 做了什么
把前端从「浅灰底 + 圆角卡片 + 通用排版」换成 OKX 的金融终端语言。
设计令牌不是凭印象写的，是用 Playwright 打开
okx.com首页和okx.com/trade-spot/btc-usdt，读getComputedStyle统计频次量出来的。只改了两个文件，没有触碰任何 Solidity 合约。
量出来的设计令牌
#000000纯黑（OKX 不用 off-black）#121212/#1d1d1d/#2e2e2e/#383838#FFFFFF→#B0B0B0→#909090→#5B5B5B#25A750（中等饱和，不是荧光绿）#CA3F64—— 偏玫红的暗红，不是正红1px #383838（主）/1px #2e2e2e（弱）0px全直角；营销界面999px胶囊核心气质：纯黑底 + 全直角 + 发丝线分区 + 密集数据 + 数字右对齐。层级靠字重和灰度，不靠字号和阴影。
新增
行情条 —— 顶部六格密集数据带（Pool / Status / Risk Score / Dynamic Fee / Ref. Liquidity / Last Block），发丝线分栏。这是 OKX 交易页最具辨识度的结构。
资金流示意图 ——
Trader → Router → Pool Manager → XGuard Hook → Settlement，Hook 节点绿框高亮并显示实时风险分与费率。风险曲线 —— 用
RiskUpdated事件串成走势线。getContractEvents拉历史播种，一进页面就有内容watchContractEvent订阅实时追加流动动效 —— 交易 pending 时箭头扫光 + 节点依次脉动，已处理
prefers-reduced-motion。仪表位置指针 —— 风险分为 0 时填充宽度为 0，仪表会完全空掉。加一条始终可见的指针，用
clamp()夹在轨道内。风险态图例 —— 三行解释 Normal / Warning / Protected 的含义，当前态高亮。没有编造阈值数字。
无障碍
#5B5B5B（纯黑上仅 3.1:1）提到#7A7A7A（4.9:1）opacity: 0.45—— 那个写法会把按钮和页面背景混色，实测对比度只有约 2.9:1，而首屏 7 个按钮里有 6 个是禁用态验证
本地预演了 CI 会跑的全部检查：
forge test—— 12 / 12npm run verify—— 22 / 22 单测 + 前端构建npm run submission:check:final—— 通过注意
这个分支不会触发 Pages 部署（
pages.yml只在 push 到main时跑），所以合并之前线上提交页面不受影响。合并到
main会立即重新部署 GitHub Pages。