Frontend UX: restyle Arena podiums, WarBow, activity, and CHARM/CRED production components #292

Closed
opened 2026-06-06 09:35:04 +00:00 by PlasticDigits · 6 comments
PlasticDigits commented 2026-06-06 09:35:04 +00:00 (Migrated from gitlab.com)

Summary

Apply the approved command-console mechanics presentation to real Arena data components, removing or rewriting outdated leaderboard, sale, price, and activity assumptions.

Scope

  • Four independent podiums: Last Buy, Defended Streak, Time Booster, WarBow
  • Each podium: own timer, own epoch, 1st/2nd/3rd prize rows in DOUB + USD
  • Recent activity feed: actual buy/steal/guard/revenge events (not abstract status text)
  • Address display: standardized blockie + last 6 hex digits (no ... truncation)
  • CHARM/CRED card aligned with epoch yield mechanics (CHARM is not a leaderboard)
  • WarBow actions grouped: Steal, Guard, Revenge, Flag

Key files

  • frontend/src/pages/arena/ArenaSimplePodiumSection.tsx
  • frontend/src/pages/arena/ArenaWarbowHeroPanel.tsx
  • frontend/src/pages/arena/ArenaCharmCredCard.tsx
  • frontend/src/pages/arena/ArenaLiveBuysActivitySection.tsx
  • frontend/src/pages/arena/LiveBuyRow.tsx
  • frontend/src/components/AddressInline.tsx

Constraints

  • Audit component copy and data presentation against docs/product/time-arena.md — do not reskin stale mechanics
  • CHARM price increases per second and resets when Last Buy runs out; min/max buy range same reset rule
  • Different podiums have different next-buy timer extensions — do not show a single combined "next buy all timers" value

Acceptance criteria

  • Activity feed shows recent player actions (buy, steal, guard, revenge) with deltas
  • Podium prize rows show 1st/2nd/3rd DOUB + USD per podium
  • Each podium box shows its current epoch
  • Addresses use blockie + last 6 digits consistently
  • CHARM price shown in DOUB; buy min/max shown as actual range (e.g. 1.0–10 CHARM)
## Summary Apply the approved command-console mechanics presentation to real Arena data components, removing or rewriting outdated leaderboard, sale, price, and activity assumptions. ## Scope - Four independent podiums: Last Buy, Defended Streak, Time Booster, WarBow - Each podium: own timer, own epoch, 1st/2nd/3rd prize rows in DOUB + USD - Recent activity feed: actual buy/steal/guard/revenge events (not abstract status text) - Address display: standardized blockie + last 6 hex digits (no `...` truncation) - CHARM/CRED card aligned with epoch yield mechanics (CHARM is not a leaderboard) - WarBow actions grouped: Steal, Guard, Revenge, Flag ## Key files - `frontend/src/pages/arena/ArenaSimplePodiumSection.tsx` - `frontend/src/pages/arena/ArenaWarbowHeroPanel.tsx` - `frontend/src/pages/arena/ArenaCharmCredCard.tsx` - `frontend/src/pages/arena/ArenaLiveBuysActivitySection.tsx` - `frontend/src/pages/arena/LiveBuyRow.tsx` - `frontend/src/components/AddressInline.tsx` ## Constraints - Audit component copy and data presentation against `docs/product/time-arena.md` — do not reskin stale mechanics - CHARM price increases per second and resets when Last Buy runs out; min/max buy range same reset rule - Different podiums have different next-buy timer extensions — do not show a single combined "next buy all timers" value ## Acceptance criteria - [ ] Activity feed shows recent player actions (buy, steal, guard, revenge) with deltas - [ ] Podium prize rows show 1st/2nd/3rd DOUB + USD per podium - [ ] Each podium box shows its current epoch - [ ] Addresses use blockie + last 6 digits consistently - [ ] CHARM price shown in DOUB; buy min/max shown as actual range (e.g. 1.0–10 CHARM)
PlasticDigits commented 2026-06-06 14:04:37 +00:00 (Migrated from gitlab.com)

mentioned in merge request !426

mentioned in merge request !426
PlasticDigits commented 2026-06-06 14:11:15 +00:00 (Migrated from gitlab.com)

mentioned in commit acc1f3270d

mentioned in commit acc1f3270dbd2fa2caaff8a69ada4905c7106835
PlasticDigits commented 2026-06-07 11:58:44 +00:00 (Migrated from gitlab.com)

mentioned in issue #291

mentioned in issue #291
PlasticDigits commented 2026-06-07 12:04:35 +00:00 (Migrated from gitlab.com)

Verification complete — GitLab #292

Verified Frontend UX: restyle Arena podiums, WarBow, activity, and CHARM/CRED production components on branch main (2026-06-07).

Acceptance criteria

Criterion Result How verified
Activity feed shows recent player actions (buy, steal, guard, revenge) with deltas PASS ArenaLiveBuysActivitySection.test.tsx (GitLab #292) asserts buy/steal/guard/revenge badges, +120s, ±75 BP, guard-until deltas; indexerApi.test.ts maps GET /v1/arena/activity; indexer postgres_stage2_persist_all_events_and_rollback_after PASS; /arena/protocol activity panel renders empty-state copy (“Waiting for the first Arena action”) against live indexer schema 2.7.0
Podium prize rows show 1st/2nd/3rd DOUB + USD per podium PASS ArenaSimplePodiumSection.test.tsx — four categories, 1st prize, DOUB labels, ≈ $… USD; live /arena shows four podium cards with epoch + prize rows (loading until payout preview)
Each podium box shows its current epoch PASS ArenaSimplePodiumSection.test.tsx — data-testid="arena-podium-epoch-0" + <strong>12</strong>; live stack /v1/arena/podiums returns epoch: "0" per category; UI shows Epoch 0 on all four cards
Addresses use blockie + last 6 digits consistently PASS SharedUxPrimitives.test.tsx, LiveBuyRow.test.tsx, ArenaSimplePodiumSection.test.tsx — address-inline__blockie, last-six labels, no 0x/… truncation; manual address chips SKIP on empty fresh arena (no buys / no connected wallet) — structure verified via unit tests
CHARM price shown in DOUB; buy min/max shown as actual range PASS arenaCommandConsoleStatic.test.ts asserts decision row (CHARM Price, Buy Range); live /arena shows CHARM PRICE: 1000 DOUB and BUY RANGE: 0.99-10 CHARM; ArenaCharmCredCard shows epoch yield (not leaderboard)

Additional scope / constraints

Check Result Notes
Four independent podiums (Last Buy, Defended Streak, Time Booster, WarBow) PASS ArenaSimplePodiumSection + live UI
WarBow actions grouped: Steal, Guard, Revenge, Flag PASS ArenaWarbowHeroPanel.tsx + live sidebar
No combined “next buy all timers” value PASS Per-podium timers via ArenaTimerChips; primary column is Last Buy only
No stale launchpad / sale-end copy on live surfaces PASS Manual scan /arena + /arena/protocol; epoch/live framing only
Responsive 390×844 PASS Manual browser check — no horizontal overflow
Docs / invariants cross-links PASS docs/frontend/arena-views.md §292, docs/testing/invariants-and-business-logic.md INV-FRONTEND-292-ARENA-PRODUCTION-COMPONENTS, docs/testing/manual-qa-checklists.md §292

Commands (all PASS)

cd frontend && npm run typecheck && npm run lint && npm test
cd frontend && npm test -- --run ArenaSimplePodiumSection ArenaLiveBuysActivitySection LiveBuyRow SharedUxPrimitives indexerApi
export YIELDOMEGA_PG_TEST_URL='postgres://yieldomega:password@127.0.0.1:5433/yieldomega_indexer_test'
cd indexer && cargo test postgres_stage2_persist_all_events_and_rollback_after
bash scripts/verify-cloud-postgres.sh
SKIP_ANVIL_RICH_STATE=1 YIELDOMEGA_DEPLOY_NO_COOLDOWN=1 START_BOT_SWARM=0 \
  bash scripts/start-qa-local-full-stack.sh --live-sale --no-swarm --no-frontend
curl -sf http://127.0.0.1:3100/v1/status
curl -sf 'http://127.0.0.1:3100/v1/arena/activity?limit=5'

Manual Rabby/browser pass: /arena + /arena/protocol on http://localhost:5173 against the Anvil stack above.

Outcome: All acceptance criteria met. No repository changes required from verification.

## Verification complete — GitLab #292 Verified [Frontend UX: restyle Arena podiums, WarBow, activity, and CHARM/CRED production components](https://gitlab.com/PlasticDigits/yieldomega/-/work_items/292) on branch `main` (2026-06-07). ### Acceptance criteria | Criterion | Result | How verified | |-----------|--------|--------------| | Activity feed shows recent player actions (buy, steal, guard, revenge) with deltas | **PASS** | `ArenaLiveBuysActivitySection.test.tsx` (GitLab #292) asserts buy/steal/guard/revenge badges, `+120s`, `±75 BP`, guard-until deltas; `indexerApi.test.ts` maps `GET /v1/arena/activity`; indexer `postgres_stage2_persist_all_events_and_rollback_after` **PASS**; `/arena/protocol` activity panel renders empty-state copy (“Waiting for the first Arena action”) against live indexer schema **2.7.0** | | Podium prize rows show 1st/2nd/3rd DOUB + USD per podium | **PASS** | `ArenaSimplePodiumSection.test.tsx` — four categories, `1st prize`, DOUB labels, `≈ $… USD`; live `/arena` shows four podium cards with epoch + prize rows (loading until payout preview) | | Each podium box shows its current epoch | **PASS** | `ArenaSimplePodiumSection.test.tsx` — `data-testid="arena-podium-epoch-0"` + `<strong>12</strong>`; live stack `/v1/arena/podiums` returns `epoch: "0"` per category; UI shows **Epoch 0** on all four cards | | Addresses use blockie + last 6 digits consistently | **PASS** | `SharedUxPrimitives.test.tsx`, `LiveBuyRow.test.tsx`, `ArenaSimplePodiumSection.test.tsx` — `address-inline__blockie`, last-six labels, no `0x`/`…` truncation; manual address chips **SKIP** on empty fresh arena (no buys / no connected wallet) — structure verified via unit tests | | CHARM price shown in DOUB; buy min/max shown as actual range | **PASS** | `arenaCommandConsoleStatic.test.ts` asserts decision row (`CHARM Price`, `Buy Range`); live `/arena` shows **CHARM PRICE: 1000 DOUB** and **BUY RANGE: 0.99-10 CHARM**; `ArenaCharmCredCard` shows epoch yield (not leaderboard) | ### Additional scope / constraints | Check | Result | Notes | |-------|--------|-------| | Four independent podiums (Last Buy, Defended Streak, Time Booster, WarBow) | **PASS** | `ArenaSimplePodiumSection` + live UI | | WarBow actions grouped: Steal, Guard, Revenge, Flag | **PASS** | `ArenaWarbowHeroPanel.tsx` + live sidebar | | No combined “next buy all timers” value | **PASS** | Per-podium timers via `ArenaTimerChips`; primary column is Last Buy only | | No stale launchpad / sale-end copy on live surfaces | **PASS** | Manual scan `/arena` + `/arena/protocol`; epoch/live framing only | | Responsive 390×844 | **PASS** | Manual browser check — no horizontal overflow | | Docs / invariants cross-links | **PASS** | `docs/frontend/arena-views.md` §292, `docs/testing/invariants-and-business-logic.md` `INV-FRONTEND-292-ARENA-PRODUCTION-COMPONENTS`, `docs/testing/manual-qa-checklists.md` §292 | ### Commands (all PASS) ```bash cd frontend && npm run typecheck && npm run lint && npm test cd frontend && npm test -- --run ArenaSimplePodiumSection ArenaLiveBuysActivitySection LiveBuyRow SharedUxPrimitives indexerApi export YIELDOMEGA_PG_TEST_URL='postgres://yieldomega:password@127.0.0.1:5433/yieldomega_indexer_test' cd indexer && cargo test postgres_stage2_persist_all_events_and_rollback_after bash scripts/verify-cloud-postgres.sh SKIP_ANVIL_RICH_STATE=1 YIELDOMEGA_DEPLOY_NO_COOLDOWN=1 START_BOT_SWARM=0 \ bash scripts/start-qa-local-full-stack.sh --live-sale --no-swarm --no-frontend curl -sf http://127.0.0.1:3100/v1/status curl -sf 'http://127.0.0.1:3100/v1/arena/activity?limit=5' ``` Manual Rabby/browser pass: `/arena` + `/arena/protocol` on `http://localhost:5173` against the Anvil stack above. **Outcome:** All acceptance criteria met. No repository changes required from verification.
PlasticDigits (Migrated from gitlab.com) closed this issue 2026-06-07 12:04:42 +00:00
PlasticDigits commented 2026-06-07 13:57:54 +00:00 (Migrated from gitlab.com)

mentioned in issue #302

mentioned in issue #302
PlasticDigits commented 2026-06-08 08:45:13 +00:00 (Migrated from gitlab.com)

mentioned in commit 7a1d749e1b

mentioned in commit 7a1d749e1bd31d4e0fdf065e190815ac60495da0
Sign in to join this conversation.
No milestone
No project
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#292
No description provided.