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

Frontend UX: redesign wallet, modal, chain-gate, and shared data primitives #294

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

Summary

Redesign shared UX primitives (modals, wallet profile, address rows, chain gates, status/empty states) to match the cyberminimalist glassmorphism system used across the platform.

Scope

  • Modal glass system (wallet profile, buy detail, all-buys, etc.)
  • Address rows: blockie + compact label (last 6 digits pattern)
  • Chain mismatch write barriers and switch-chain controls
  • Status messages, empty data placeholders, amount displays
  • Indexer connectivity bar styling

Key files

  • frontend/src/components/WalletProfileModal.tsx
  • frontend/src/components/WalletProfileModalSections.tsx
  • frontend/src/components/AddressInline.tsx
  • frontend/src/components/ChainMismatchWriteBarrier.tsx
  • frontend/src/components/Modal.tsx
  • frontend/src/components/EmptyDataPlaceholder.tsx
  • frontend/src/components/IndexerStatusBar.tsx

Constraints

  • Preserve wallet profile, explorer link, and chain-gate behavior (invariants #258, #95)
  • Do not change indexer/API contracts — presentation only
  • Reference: docs/frontend/wallet-connection.md

Acceptance criteria

  • Shared primitives look native in the new UX across /arena, /referrals, and other routes
  • Wallet profile modal sections remain readable and functional
  • Address display pattern is consistent (blockie + last 6 hex digits)
  • Chain mismatch gates remain visible and actionable
  • Component tests and relevant E2E specs pass
## Summary Redesign shared UX primitives (modals, wallet profile, address rows, chain gates, status/empty states) to match the cyberminimalist glassmorphism system used across the platform. ## Scope - Modal glass system (wallet profile, buy detail, all-buys, etc.) - Address rows: blockie + compact label (last 6 digits pattern) - Chain mismatch write barriers and switch-chain controls - Status messages, empty data placeholders, amount displays - Indexer connectivity bar styling ## Key files - `frontend/src/components/WalletProfileModal.tsx` - `frontend/src/components/WalletProfileModalSections.tsx` - `frontend/src/components/AddressInline.tsx` - `frontend/src/components/ChainMismatchWriteBarrier.tsx` - `frontend/src/components/Modal.tsx` - `frontend/src/components/EmptyDataPlaceholder.tsx` - `frontend/src/components/IndexerStatusBar.tsx` ## Constraints - Preserve wallet profile, explorer link, and chain-gate behavior (invariants #258, #95) - Do not change indexer/API contracts — presentation only - Reference: `docs/frontend/wallet-connection.md` ## Acceptance criteria - [ ] Shared primitives look native in the new UX across `/arena`, `/referrals`, and other routes - [ ] Wallet profile modal sections remain readable and functional - [ ] Address display pattern is consistent (blockie + last 6 hex digits) - [ ] Chain mismatch gates remain visible and actionable - [ ] Component tests and relevant E2E specs pass
PlasticDigits commented 2026-06-06 15:11:25 +00:00 (Migrated from gitlab.com)

mentioned in merge request !434

mentioned in merge request !434
PlasticDigits commented 2026-06-07 11:52:51 +00:00 (Migrated from gitlab.com)

mentioned in issue #290

mentioned in issue #290
ghost1 commented 2026-06-07 12:15:34 +00:00 (Migrated from gitlab.com)

mentioned in commit a20dd5bbba

mentioned in commit a20dd5bbbac6a6e214f6fd80676d3c4a74f7c0fe
PlasticDigits commented 2026-06-07 12:15:46 +00:00 (Migrated from gitlab.com)

mentioned in merge request !443

mentioned in merge request !443
PlasticDigits commented 2026-06-07 12:15:56 +00:00 (Migrated from gitlab.com)

Verification report — agent:verify (2026-06-07)

Issue: https://gitlab.com/PlasticDigits/yieldomega/-/work_items/294

Implementation on main (d7e23c9 — shared UX primitives glass redesign) was verified. Doc alignment MR: https://gitlab.com/PlasticDigits/yieldomega/-/merge_requests/73

Acceptance criteria

Item Result How verified
Shared primitives look native on /arena, /referrals, protocol PASS cd frontend && npm run typecheck && npm run lint && npm test (564 passed); CI=1 npm run test:e2e -- --workers=5 e2e/arena.spec.ts e2e/referrals-surface.spec.ts (10 passed); static review of --yo-glass-* tokens on .wallet-profile-modal__panel, .modal-panel, .chain-write-gate__card, .address-inline
Wallet profile modal sections readable/functional PASS WalletProfileModalSections.test.tsx (8 passed)
Address pattern: blockie + last 6 hex PASS SharedUxPrimitives.test.tsx, LiveBuyRow.test.tsx, AddressInline.tsx default addressTailHex(raw, 6)
Chain mismatch gates visible and actionable PASS (static) / FAIL (Rabby) chainMismatchWriteGuard.test.ts passed; bash scripts/verify-rabby-chain-mismatch.sh failed — page.evaluate: Target page, context or browser has been closed during Rabby chain switch (Cloud VM infra; re-run on Desktop QA per rabby-cloud-agent-qa.md)
Component tests and relevant E2E specs PASS Unit + arena.spec.ts + referrals-surface.spec.ts; e2e/arena-live-buys-modals.spec.ts SKIP (pre-#291 hero live-buys strip — not mounted on current /arena)

Constraints

  • #258 wallet profile: onOpenProfile on participant AddressInline; explorer link inside modal — preserved (WalletProfileModal.tsx, tests).
  • #95 chain gate: ChainMismatchWriteBarrier + SwitchToTargetChainButton present with glass overlay styling — component intact; full Rabby path blocked by VM browser crash above.
  • Presentation only: no indexer/API contract changes observed.

Doc follow-up (MR !443)

Manual QA §294 and INV-FRONTEND-294-SHARED-PRIMITIVES evidence updated: protocol arena-live-buys-activity replaces legacy hero buy-modals row; E2E gate is arena.spec.ts + referrals-surface.spec.ts.

Follow-up

Re-run bash scripts/verify-rabby-chain-mismatch.sh on a Desktop QA host (or after Rabby Playwright stability fix on Cloud agents) for full #95 sign-off.

## Verification report — agent:verify (2026-06-07) Issue: https://gitlab.com/PlasticDigits/yieldomega/-/work_items/294 Implementation on `main` (`d7e23c9` — shared UX primitives glass redesign) was verified. Doc alignment MR: https://gitlab.com/PlasticDigits/yieldomega/-/merge_requests/73 ### Acceptance criteria | Item | Result | How verified | |------|--------|--------------| | Shared primitives look native on `/arena`, `/referrals`, protocol | **PASS** | `cd frontend && npm run typecheck && npm run lint && npm test` (564 passed); `CI=1 npm run test:e2e -- --workers=5 e2e/arena.spec.ts e2e/referrals-surface.spec.ts` (10 passed); static review of `--yo-glass-*` tokens on `.wallet-profile-modal__panel`, `.modal-panel`, `.chain-write-gate__card`, `.address-inline` | | Wallet profile modal sections readable/functional | **PASS** | `WalletProfileModalSections.test.tsx` (8 passed) | | Address pattern: blockie + last 6 hex | **PASS** | `SharedUxPrimitives.test.tsx`, `LiveBuyRow.test.tsx`, `AddressInline.tsx` default `addressTailHex(raw, 6)` | | Chain mismatch gates visible and actionable | **PASS** (static) / **FAIL** (Rabby) | `chainMismatchWriteGuard.test.ts` passed; `bash scripts/verify-rabby-chain-mismatch.sh` failed — `page.evaluate: Target page, context or browser has been closed` during Rabby chain switch (Cloud VM infra; re-run on Desktop QA per [rabby-cloud-agent-qa.md](docs/testing/rabby-cloud-agent-qa.md)) | | Component tests and relevant E2E specs | **PASS** | Unit + `arena.spec.ts` + `referrals-surface.spec.ts`; `e2e/arena-live-buys-modals.spec.ts` **SKIP** (pre-#291 hero live-buys strip — not mounted on current `/arena`) | ### Constraints - **#258 wallet profile**: `onOpenProfile` on participant `AddressInline`; explorer link inside modal — preserved (`WalletProfileModal.tsx`, tests). - **#95 chain gate**: `ChainMismatchWriteBarrier` + `SwitchToTargetChainButton` present with glass overlay styling — component intact; full Rabby path blocked by VM browser crash above. - **Presentation only**: no indexer/API contract changes observed. ### Doc follow-up (MR !443) Manual QA §294 and `INV-FRONTEND-294-SHARED-PRIMITIVES` evidence updated: protocol `arena-live-buys-activity` replaces legacy hero buy-modals row; E2E gate is `arena.spec.ts` + `referrals-surface.spec.ts`. ### Follow-up Re-run `bash scripts/verify-rabby-chain-mismatch.sh` on a Desktop QA host (or after Rabby Playwright stability fix on Cloud agents) for full #95 sign-off.
PlasticDigits commented 2026-06-08 05:19:03 +00:00 (Migrated from gitlab.com)

mentioned in commit c5859b48a4

mentioned in commit c5859b48a444e44ec5c6f8c63a2c829e3e36c889
PlasticDigits commented 2026-06-08 06:10:25 +00:00 (Migrated from gitlab.com)

Verification report — agent:verify (2026-06-08)

Issue: https://gitlab.com/PlasticDigits/yieldomega/-/work_items/294

Re-verified implementation on main at commit ddfaa01. No repository changes required.

Acceptance criteria

Item Result How verified
Shared primitives look native on /arena, /referrals, protocol PASS cd frontend && npm run typecheck && npm run lint && npm test — 109 files / 562 tests passed; npm run build then CI=1 npm run test:e2e -- --workers=5 e2e/arena.spec.ts e2e/referrals-surface.spec.ts — 10 passed; static review confirms --yo-glass-* tokens on .wallet-profile-modal__panel, .modal-panel, .chain-write-gate__card, .address-inline, .indexer-status in frontend/src/index.css
Wallet profile modal sections readable/functional PASS WalletProfileModalSections.test.tsx — 8 passed; WalletProfileModal.tsx retains explorer link + AddressInline header
Address pattern: blockie + last 6 hex PASS SharedUxPrimitives.test.tsx — 4 passed; LiveBuyRow.test.tsx — 2 passed; AddressInline.tsx defaults to addressTailHex(raw, 6)
Chain mismatch gates visible and actionable PASS (static/component) / FAIL (Rabby automation) chainMismatchWriteGuard.test.ts — 2 passed; ChainMismatchWriteBarrier.tsx renders glass overlay + SwitchToTargetChainButton; bash scripts/verify-rabby-chain-mismatch.sh failed — page.evaluate: Target page, context or browser has been closed during Rabby chain switch (Cloud VM browser stability; re-run on Desktop QA per rabby-cloud-agent-qa.md)
Component tests and relevant E2E specs PASS Full unit suite + arena.spec.ts + referrals-surface.spec.ts; e2e/arena-live-buys-modals.spec.ts SKIP (pre-#291 hero strip — not a #294 gate per manual QA §294)

Constraints

  • #258 wallet profile: participant AddressInline → onOpenProfile; explorer link inside modal — preserved.
  • #95 chain gate: ChainMismatchWriteBarrier + switch-chain control intact with glass styling; full Rabby path blocked by VM infra above.
  • Presentation only: no indexer/API contract changes observed.

Infra notes (this run)

  • Playwright Chromium was missing after npm ci; npx playwright install chromium restored E2E.
  • Anvil stack + Rabby preview on :5173 started for Rabby script; browser crash reproduced on chain switch.

Follow-up

Re-run bash scripts/verify-rabby-chain-mismatch.sh on Desktop QA (or after Rabby Playwright stability fix on Cloud agents) for full #95 Rabby sign-off.

## Verification report — agent:verify (2026-06-08) Issue: https://gitlab.com/PlasticDigits/yieldomega/-/work_items/294 Re-verified implementation on `main` at commit `ddfaa01`. No repository changes required. ### Acceptance criteria | Item | Result | How verified | |------|--------|--------------| | Shared primitives look native on `/arena`, `/referrals`, protocol | **PASS** | `cd frontend && npm run typecheck && npm run lint && npm test` — 109 files / 562 tests passed; `npm run build` then `CI=1 npm run test:e2e -- --workers=5 e2e/arena.spec.ts e2e/referrals-surface.spec.ts` — 10 passed; static review confirms `--yo-glass-*` tokens on `.wallet-profile-modal__panel`, `.modal-panel`, `.chain-write-gate__card`, `.address-inline`, `.indexer-status` in `frontend/src/index.css` | | Wallet profile modal sections readable/functional | **PASS** | `WalletProfileModalSections.test.tsx` — 8 passed; `WalletProfileModal.tsx` retains explorer link + `AddressInline` header | | Address pattern: blockie + last 6 hex | **PASS** | `SharedUxPrimitives.test.tsx` — 4 passed; `LiveBuyRow.test.tsx` — 2 passed; `AddressInline.tsx` defaults to `addressTailHex(raw, 6)` | | Chain mismatch gates visible and actionable | **PASS** (static/component) / **FAIL** (Rabby automation) | `chainMismatchWriteGuard.test.ts` — 2 passed; `ChainMismatchWriteBarrier.tsx` renders glass overlay + `SwitchToTargetChainButton`; `bash scripts/verify-rabby-chain-mismatch.sh` failed — `page.evaluate: Target page, context or browser has been closed` during Rabby chain switch (Cloud VM browser stability; re-run on Desktop QA per [rabby-cloud-agent-qa.md](docs/testing/rabby-cloud-agent-qa.md)) | | Component tests and relevant E2E specs | **PASS** | Full unit suite + `arena.spec.ts` + `referrals-surface.spec.ts`; `e2e/arena-live-buys-modals.spec.ts` **SKIP** (pre-#291 hero strip — not a #294 gate per manual QA §294) | ### Constraints - **#258 wallet profile**: participant `AddressInline` → `onOpenProfile`; explorer link inside modal — preserved. - **#95 chain gate**: `ChainMismatchWriteBarrier` + switch-chain control intact with glass styling; full Rabby path blocked by VM infra above. - **Presentation only**: no indexer/API contract changes observed. ### Infra notes (this run) - Playwright Chromium was missing after `npm ci`; `npx playwright install chromium` restored E2E. - Anvil stack + Rabby preview on `:5173` started for Rabby script; browser crash reproduced on chain switch. ### Follow-up Re-run `bash scripts/verify-rabby-chain-mismatch.sh` on Desktop QA (or after Rabby Playwright stability fix on Cloud agents) for full #95 Rabby sign-off.
PlasticDigits (Migrated from gitlab.com) closed this issue 2026-06-08 06:10:26 +00:00
PlasticDigits commented 2026-06-08 08:45:13 +00:00 (Migrated from gitlab.com)

mentioned in commit f41d02ba8d

mentioned in commit f41d02ba8d6b343fbe548e4d3bf60e178af649d7
PlasticDigits commented 2026-06-08 08:45:14 +00:00 (Migrated from gitlab.com)

mentioned in commit 553ac7e455

mentioned in commit 553ac7e455b7a3ac815397f45b126673fe45ff0e
PlasticDigits commented 2026-06-13 07:02:54 +00:00 (Migrated from gitlab.com)

mentioned in issue #309

mentioned in issue #309
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#294
No description provided.