code/yieldomega
Watch
4
0
Fork
You've already forked yieldomega
 0
Code Issues 1 Pull requests 1 Projects Releases Packages Wiki Activity

Design pass: Protocol AUDIT — Platform usage (readability + patterns) #234

New issue
Closed
opened 2026-05-21 13:21:01 +00:00 by PlasticDigits · 5 comments
PlasticDigits commented 2026-05-21 13:21:01 +00:00 (Migrated from gitlab.com)

Context

Platform usage shipped on /timecurve/protocol (subnav AUDIT) per GitLab #231. Functional scope is done (indexer aggregates, WarBow CL8Y totals, buy velocity, paginated wallet table). This issue is a visual / UX design pass — especially readability and consistency with established TimeCurve protocol patterns — not new metrics or API work.

Implementation: TimeCurveProtocolPlatformUsageSection.tsx · styles in index.css (.platform-usage-*) · timecurve-views §231

Design baseline: docs/frontend/design.md · sibling sections on the same page (Sale state, Live buys, DOUB projection #229) · referrals leaderboard pagination #225

Goals

  1. Readability — operators scanning AUDIT can parse participation stats, WarBow volume, velocity, and the wallet table at a glance without cognitive overload.
  2. Pattern match — section chrome, stat grids, tables, toggles, pagination, empty/offline states, and typography feel native to the protocol page and global arcade theme (index.css tokens), not bolted-on.
  3. Hierarchy — clear separation between summary stats, WarBow quadrants, velocity widget, and wallet leaderboard without duplicate headings or ambiguous grouping.

Review checklist

Section chrome

  • PageSection title Platform usage, badge indexer-backed, and lede copy match tone of neighboring sections (operator-facing, no marketing fluff).
  • Badge tone / placement consistent with DOUB projection and Live buys badges on the same route.
  • Offline / unset-indexer StatusMessage variants (muted vs warning) align with #96 patterns elsewhere — visible but not alarmist.

Stat grids (participation + WarBow)

  • Top grid (unique wallets, total buys, mean/median) uses same StatCard / .stats-grid rhythm as Sale state and DOUB projection — spacing, label size, value weight.
  • WarBow cards (Steals, Steal overrides, Revenges, Guards) read as one visual group (second grid or shared subheading?) — count + CL8Y line not cramped on mobile.
  • No raw wei in product UI; AmountDisplay / compact CL8Y helpers match Live buys and leaderboard formatting (#191).
  • Mean/median decimals legible; consider whether fixed precision or locale formatting matches other protocol stats.

Buy velocity

  • Last hour / Last day toggle matches an existing segmented-control or button pattern (referrals filters, arena toggles) — active state obvious, touch targets ≥44px where feasible.
  • Empty window copy (No buys in this window) visually subordinate to populated state; dashed border divider not fighting section chrome.
  • avg buys / hour label unambiguous for 24h window (not misread as “per hour in last day” without context).

Wallet table + pagination

  • Table header Wallets by CL8Y spent on buys hierarchy vs PageSection title — no duplicate “platform usage” noise.
  • Inline ↻ / ✓ status on title row: discoverable meaning (tooltip / aria-label already present — verify sufficient for sighted users).
  • Rank column, AddressInline + explorer links (#98), buys count, CL8Y spent (decimal + compact) scannable; horizontal scroll on narrow viewports acceptable but headers stay aligned.
  • PlatformUsagePagination visually consistent with referrals leaderboard pagination #225 — numbered pages, disabled states, gap ellipsis.
  • Page transition loading: no layout jump or flash of empty table while pageLoading.

Empty / error states

  • EmptyDataPlaceholder usage consistent with #200 — no misleading em dashes where “no data yet” is clearer.
  • Initial load vs page refresh distinguished (muted loading copy vs table status icon).

Responsive + a11y

  • ≤479px: stat grids wrap without overflow; WarBow cards remain readable.
  • Table horizontal scroll does not trap focus; pagination keyboard reachable.
  • Velocity toggle aria-pressed / group label verified in snapshot or manual pass.
  • prefers-reduced-motion: wallet refresh spin respects reduced motion (already in CSS — confirm in browser).

Cohesion with full AUDIT scroll

  • Section order (after Live buys, before Immutable parameters) feels logical when scrolling the full protocol page.
  • Visual weight balanced vs DOUB projection above and dense KV blocks below — neither section dominates or feels orphaned.

Out of scope

  • New indexer fields or velocity windows (GitLab #233 and similar).
  • Changing wallet sort, page size, or unique-wallet union (product decisions in #231).
  • Custom wallet avatars (#230).

Verification

  • Manual visual QA on /timecurve/protocol with indexer live (bot swarm or staging data) + indexer offline.
  • Compare side-by-side with Live buys, DOUB projection, and referrals leaderboard pagination in same session.
  • Mobile viewport spot-check (375px, 479px).
  • Optional: extend Playwright visual snapshot or data-testid smoke if design changes affect selectors.

Definition of done: checklist items addressed or explicitly waived with comment; CSS/component tweaks merged; no regression to INV-FRONTEND-231-PLATFORM-USAGE behavior.

## Context **Platform usage** shipped on **`/timecurve/protocol`** (subnav **AUDIT**) per [GitLab #231](https://gitlab.com/PlasticDigits/yieldomega/-/issues/231). Functional scope is done (indexer aggregates, WarBow CL8Y totals, buy velocity, paginated wallet table). This issue is a **visual / UX design pass** — especially **readability** and **consistency with established TimeCurve protocol patterns** — not new metrics or API work. **Implementation:** [`TimeCurveProtocolPlatformUsageSection.tsx`](frontend/src/pages/timecurve/TimeCurveProtocolPlatformUsageSection.tsx) · styles in [`index.css`](frontend/src/index.css) (`.platform-usage-*`) · [`timecurve-views §231`](docs/frontend/timecurve-views.md#timecurve-protocol-platform-usage-gitlab-231) **Design baseline:** [`docs/frontend/design.md`](docs/frontend/design.md) · sibling sections on the same page (Sale state, Live buys, DOUB projection [#229](https://gitlab.com/PlasticDigits/yieldomega/-/issues/229)) · referrals leaderboard pagination [#225](https://gitlab.com/PlasticDigits/yieldomega/-/issues/225) --- ## Goals 1. **Readability** — operators scanning AUDIT can parse participation stats, WarBow volume, velocity, and the wallet table at a glance without cognitive overload. 2. **Pattern match** — section chrome, stat grids, tables, toggles, pagination, empty/offline states, and typography feel native to the protocol page and global arcade theme (`index.css` tokens), not bolted-on. 3. **Hierarchy** — clear separation between summary stats, WarBow quadrants, velocity widget, and wallet leaderboard without duplicate headings or ambiguous grouping. --- ## Review checklist ### Section chrome - [ ] `PageSection` title **Platform usage**, badge **indexer-backed**, and lede copy match tone of neighboring sections (operator-facing, no marketing fluff). - [ ] Badge tone / placement consistent with **DOUB projection** and **Live buys** badges on the same route. - [ ] Offline / unset-indexer `StatusMessage` variants (`muted` vs `warning`) align with [#96](https://gitlab.com/PlasticDigits/yieldomega/-/issues/96) patterns elsewhere — visible but not alarmist. ### Stat grids (participation + WarBow) - [ ] Top grid (unique wallets, total buys, mean/median) uses same **`StatCard` / `.stats-grid`** rhythm as Sale state and DOUB projection — spacing, label size, value weight. - [ ] WarBow cards (**Steals**, **Steal overrides**, **Revenges**, **Guards**) read as one visual group (second grid or shared subheading?) — **count + CL8Y** line not cramped on mobile. - [ ] No raw wei in product UI; **`AmountDisplay`** / compact CL8Y helpers match Live buys and leaderboard formatting ([#191](https://gitlab.com/PlasticDigits/yieldomega/-/issues/191)). - [ ] Mean/median decimals legible; consider whether fixed precision or locale formatting matches other protocol stats. ### Buy velocity - [ ] **Last hour / Last day** toggle matches an existing segmented-control or button pattern (referrals filters, arena toggles) — active state obvious, touch targets ≥44px where feasible. - [ ] Empty window copy (**No buys in this window**) visually subordinate to populated state; dashed border divider not fighting section chrome. - [ ] **avg buys / hour** label unambiguous for 24h window (not misread as “per hour in last day” without context). ### Wallet table + pagination - [ ] Table header **Wallets by CL8Y spent on buys** hierarchy vs `PageSection` title — no duplicate “platform usage” noise. - [ ] Inline **↻ / ✓** status on title row: discoverable meaning (tooltip / `aria-label` already present — verify sufficient for sighted users). - [ ] Rank column, **`AddressInline`** + explorer links ([#98](https://gitlab.com/PlasticDigits/yieldomega/-/issues/98)), buys count, CL8Y spent (decimal + compact) scannable; horizontal scroll on narrow viewports acceptable but headers stay aligned. - [ ] **`PlatformUsagePagination`** visually consistent with referrals leaderboard pagination [#225](https://gitlab.com/PlasticDigits/yieldomega/-/issues/225) — numbered pages, disabled states, gap ellipsis. - [ ] Page transition loading: no layout jump or flash of empty table while `pageLoading`. ### Empty / error states - [ ] **`EmptyDataPlaceholder`** usage consistent with [#200](https://gitlab.com/PlasticDigits/yieldomega/-/issues/200) — no misleading em dashes where “no data yet” is clearer. - [ ] Initial load vs page refresh distinguished (muted loading copy vs table status icon). ### Responsive + a11y - [ ] ≤479px: stat grids wrap without overflow; WarBow cards remain readable. - [ ] Table horizontal scroll does not trap focus; pagination keyboard reachable. - [ ] Velocity toggle `aria-pressed` / group label verified in snapshot or manual pass. - [ ] `prefers-reduced-motion`: wallet refresh spin respects reduced motion (already in CSS — confirm in browser). ### Cohesion with full AUDIT scroll - [ ] Section order (after **Live buys**, before **Immutable parameters**) feels logical when scrolling the full protocol page. - [ ] Visual weight balanced vs **DOUB projection** above and dense KV blocks below — neither section dominates or feels orphaned. --- ## Out of scope - New indexer fields or velocity windows ([GitLab #233](https://gitlab.com/PlasticDigits/yieldomega/-/issues/233) and similar). - Changing wallet sort, page size, or unique-wallet union (product decisions in #231). - Custom wallet avatars ([#230](https://gitlab.com/PlasticDigits/yieldomega/-/issues/230)). --- ## Verification - [ ] Manual visual QA on `/timecurve/protocol` with indexer live (bot swarm or staging data) + indexer offline. - [ ] Compare side-by-side with **Live buys**, **DOUB projection**, and referrals leaderboard pagination in same session. - [ ] Mobile viewport spot-check (375px, 479px). - [ ] Optional: extend Playwright visual snapshot or `data-testid` smoke if design changes affect selectors. **Definition of done:** checklist items addressed or explicitly waived with comment; CSS/component tweaks merged; no regression to **`INV-FRONTEND-231-PLATFORM-USAGE`** behavior.
PlasticDigits commented 2026-05-21 13:21:02 +00:00 (Migrated from gitlab.com)

marked as related to #231

marked as related to #231
Brouie commented 2026-05-22 03:28:57 +00:00 (Migrated from gitlab.com)

mentioned in merge request !393

mentioned in merge request !393
PlasticDigits commented 2026-05-22 05:57:32 +00:00 (Migrated from gitlab.com)

mentioned in commit de87d537f6

mentioned in commit de87d537f66a91f3e80d39702bd91c9b51b86797
PlasticDigits commented 2026-05-22 05:57:42 +00:00 (Migrated from gitlab.com)

Implementation summary (merged to main @ de87d53)

Visual/UX design pass for Platform usage on /timecurve/protocol — no indexer/API changes; behavior of INV-FRONTEND-231-PLATFORM-USAGE preserved.

Prod pre-check (yieldomega.com)

Before deploy, noted on live prod:

  • Mean buys/wallet showed excessive float precision (28.081632653061224)
  • WarBow stat lines cramped (N actions · X CL8Y on one line)
  • Participation vs WarBow grids lacked subsection hierarchy
  • Velocity used small pill buttons vs segmented controls elsewhere

Changes

  • PlatformUsageSubsection: Participation / WarBow CL8Y volume / wallet table groupings
  • formatPlatformUsageDecimalStat: locale mean/median (≤2 decimals)
  • WarBow cards: stacked actions + CL8Y lines (mobile-friendly)
  • Velocity: segmented toggle (Simple/Arena pattern, ≥44px height); window-specific avg suffix (last hour / 24h window / since sale start)
  • Wallet table: visible Refreshing… / Up to date + title; rows stay visible with reduced opacity during page/velocity refetch (no empty flash)

Docs / invariants

Tests run

  • vitest — platformUsageDisplay.test.ts (pass)
  • tsc --noEmit (pass)

@nullvector_ux — please verify after deploy:

  • /timecurve/protocol → Participation + WarBow CL8Y volume subheadings; mean/median ≤2 decimals
  • WarBow cards readable at 375px / 479px (stacked lines)
  • Buy velocity segmented toggle; 24h / Whole sale avg labels unambiguous
  • Wallet pagination/velocity change: Refreshing… visible; table does not flash empty
  • Side-by-side rhythm with DOUB projection + Live buys badges/grids
  • Indexer offline: muted/warning copy, no fake zeros (#96, #200)
  • prefers-reduced-motion: refresh icon does not spin

Leaving issue open for your visual sign-off.

## Implementation summary (merged to `main` @ `de87d53`) Visual/UX design pass for **Platform usage** on `/timecurve/protocol` — **no indexer/API changes**; behavior of `INV-FRONTEND-231-PLATFORM-USAGE` preserved. ### Prod pre-check (yieldomega.com) Before deploy, noted on live prod: - Mean buys/wallet showed excessive float precision (`28.081632653061224`) - WarBow stat lines cramped (`N actions · X CL8Y` on one line) - Participation vs WarBow grids lacked subsection hierarchy - Velocity used small pill buttons vs segmented controls elsewhere ### Changes - **`PlatformUsageSubsection`**: Participation / WarBow CL8Y volume / wallet table groupings - **`formatPlatformUsageDecimalStat`**: locale mean/median (≤2 decimals) - **WarBow cards**: stacked actions + CL8Y lines (mobile-friendly) - **Velocity**: segmented toggle (Simple/Arena pattern, ≥44px height); window-specific avg suffix (`last hour` / `24h window` / `since sale start`) - **Wallet table**: visible **Refreshing…** / **Up to date** + `title`; rows stay visible with reduced opacity during page/velocity refetch (no empty flash) ### Docs / invariants - `INV-FRONTEND-234-PLATFORM-USAGE-UX` in [invariants §231](docs/testing/invariants-and-business-logic.md#timecurve-platform-usage-gitlab-231) - [timecurve-views §234](docs/frontend/timecurve-views.md#timecurve-protocol-platform-usage-design-gitlab-234) - [manual QA #234](docs/testing/manual-qa-checklists.md#manual-qa-issue-234) - Guardrails + `skills/README.md` cross-links ### Tests run - `vitest` — `platformUsageDisplay.test.ts` (pass) - `tsc --noEmit` (pass) --- @nullvector_ux — please verify after deploy: - [ ] `/timecurve/protocol` → **Participation** + **WarBow CL8Y volume** subheadings; mean/median ≤2 decimals - [ ] WarBow cards readable at **375px** / **479px** (stacked lines) - [ ] **Buy velocity** segmented toggle; **24h** / **Whole sale** avg labels unambiguous - [ ] Wallet pagination/velocity change: **Refreshing…** visible; table does not flash empty - [ ] Side-by-side rhythm with **DOUB projection** + **Live buys** badges/grids - [ ] Indexer offline: muted/warning copy, no fake zeros ([#96](https://gitlab.com/PlasticDigits/yieldomega/-/issues/96), [#200](https://gitlab.com/PlasticDigits/yieldomega/-/issues/200)) - [ ] `prefers-reduced-motion`: refresh icon does not spin Leaving issue **open** for your visual sign-off.
nullvector_ux commented 2026-05-22 07:36:23 +00:00 (Migrated from gitlab.com)

@nullvector_ux — please verify after deploy: @PlasticDigits

  • /timecurve/protocol → Participation + WarBow CL8Y volume subheadings; mean/median ≤2 decimals
  • WarBow cards readable at 375px / 479px (stacked lines)
  • Buy velocity segmented toggle; 24h / Whole sale avg labels unambiguous
  • Wallet pagination/velocity change: Refreshing… visible; table does not flash empty
  • Side-by-side rhythm with DOUB projection + Live buys badges/grids
  • Indexer offline: muted/warning copy, no fake zeros (#96 (closed), #200 (closed))
  • prefers-reduced-motion: refresh icon does not spin
@nullvector_ux — please verify after deploy: @PlasticDigits * [x] `/timecurve/protocol` → **Participation** + **WarBow CL8Y volume** subheadings; mean/median ≤2 decimals * [x] WarBow cards readable at **375px** / **479px** (stacked lines) * [x] **Buy velocity** segmented toggle; **24h** / **Whole sale** avg labels unambiguous * [x] Wallet pagination/velocity change: **Refreshing…** visible; table does not flash empty * [x] Side-by-side rhythm with **DOUB projection** + **Live buys** badges/grids * [x] Indexer offline: muted/warning copy, no fake zeros ([#96 (closed)](https://gitlab.com/PlasticDigits/yieldomega/-/issues/96), [#200 (closed)](https://gitlab.com/PlasticDigits/yieldomega/-/issues/200)) * [x] `prefers-reduced-motion`: refresh icon does not spin
PlasticDigits (Migrated from gitlab.com) closed this issue 2026-05-25 01:41:25 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
cac-design-issue-544
renovate/configure
No results found.
Labels
Clear labels   
agent:fix_bugfix

   
agent:fix_conflicts

   
agent:fix_security

   
agent:gap_analysis

   
agent:implement

   
agent:open_issues

   
agents

   
agent:security_audit

   
agent:verify
  
area
timecurve

  
arena

   
arena-v2

   
audit

   
block:feature_review

   
block:security

   
bug

   
contracts

   
design

   
devops

   
docs
Documentation

  
documentation

   
enhancement

   
epic
Epic / umbrella issue

  
feature

   
frontend

   
indexer

   
low priority
Low priority, investigate other issues first

  
megaeth

   
operations

   
ops
Deploy and operations

  
performance

   
QA

   
qa checklist

   
referrals

   
removal
Legacy removal

  
security

   
smart-contracts

   
tech-debt

   
testing

   
time-arena
TimeArena v2 revamp

  
timecurve

   
visual-qa
No labels
agent:fix_bugfix
agent:fix_conflicts
agent:fix_security
agent:gap_analysis
agent:implement
agent:open_issues
agents
agent:security_audit
agent:verify
area
timecurve
arena
arena-v2
audit
block:feature_review
block:security
bug
contracts
design
devops
docs
documentation
enhancement
epic
feature
frontend
indexer
low priority
megaeth
operations
ops
performance
QA
qa checklist
referrals
removal
security
smart-contracts
tech-debt
testing
time-arena
timecurve
visual-qa
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
code/yieldomega#234
No description provided.