[Visual QA] Local-stack umbrella checklist — cl8y dex #133

Closed
opened 2026-05-05 23:55:32 +00:00 by Brouie · 7 comments
Brouie commented 2026-05-05 23:55:32 +00:00 (Migrated from gitlab.com)

@totdking — local-stack visual QA umbrella for cl8y dex.

scope: granular per-page visual walkthrough on the local LocalTerra stack (post-#116 onboarding setup) — translates #116's W1-W13 tier framework into walkable per-section items. complement to #116, not a replacement. items here are walkable on the running local stack at http://localhost:5173 after make dev-full (or the manual 3-terminal flow in #116's onboarding comment).

related tickets to read before starting:

  • #116 — sister tier framework for pro hybrid trading, has full local QA onboarding (do setup steps from there first)
  • #114 — ecosystem-qa #10 spec mirror, A-J sections, partially walked, blocked on #115
  • #115 — LAUNCH-BLOCKER swap OOG — sections that require swap submission are blocked on this fix
  • #118 — dev mnemonic literal in frontend (low priority)
  • #120 — security/critical expired limit orders refund — visual recovery flow gap
  • #121 — Factory PENDING_PAIR race
  • #122 — gas: pair registry lookup O(n)
  • #123 — gas limit risk: set_discount_registry_batch
  • #126 — "Cannot read properties of null" frontend error
  • #127 — gas fee underestimation — verify in your environment
  • #129 — Place Limit functionality duplicated
  • #130 — Place Limit submits two on-chain transactions
  • #131 — post-limit-placement cancel ID polling
  • #132 — two-tx limit order sequence burns first gas

work top to bottom. when an item overlaps an existing open ticket, post the relevant finding as a note on that ticket and tag @PlasticDigits — do not close those tickets yourself. file fresh issues for anything not already covered. exploratory finds outside this list are expected — see §8.


§1 swap page (/swap or /) — pool-only path (12 items)

  1. swap card layout: input row, swap-direction button, output row, slippage settings, swap CTA — all aligned at desktop / tablet / mobile
  2. token selector modal opens, shows token list with logos, search input filters correctly
  3. token list scrolls smoothly, no layout shift on filter
  4. recently-used tokens persist across page nav
  5. amount input accepts decimals, max button populates wallet balance, clear button works
  6. quote preview renders within ~1 sec of input, shows route (e.g. EMBER → CORAL), pool reserves, fee, price impact, min received, slippage tolerance
  7. slippage settings expandable: 0.5% / 1% / 3% presets + custom input, persists across nav
  8. price impact warnings render at >1% (yellow), >5% (orange), >10% (red) with severity styling
  9. swap CTA disabled-state copy distinguishes: not connected vs wrong network vs insufficient balance vs insufficient gas vs no route
  10. wallet popup → pending → success/failure each render coherent state with tx hash + explorer link
  11. post-swap: balance refreshes, output token added to wallet if needed
  12. swap fail (#115 OOG): error copy parses to user-actionable message, not raw RPC error
  13. mobile viewport (390×844): all swap CTAs reachable, token selector full-screen sheet

§2 trade page (/trade) — pro hybrid interface (15 items)

  1. /trade default pair loads with order book, price chart, trade tape, order ticket sidebar all rendered
  2. layout is resizable/collapsible per #116 W1-C2 — verify panels respect saved layout on refresh
  3. order book: BIDS/ASKS columns aligned, color semantics consistent (green bid, red ask), spread visible
  4. depth aggregation stepper (if present) re-aggregates without flicker
  5. trade tape: HYBRID labels visible per #111, side coloring consistent, timestamps aligned
  6. price chart (TradingView): timeframes 1m/5m/15m/1h/4h/1d switch cleanly, no stale axis on pair switch
  7. order ticket sidebar: market/limit toggle, buy/sell visual distinction, side selector accidental-click guard
  8. price input: tick enforcement matches pair config, +/- steppers work, % offset from mid buttons (if any)
  9. size input: base vs quote toggle works, USD notional estimate updates with price
  10. time-in-force / expiry / reduce-only toggles labeled clearly with sensible defaults
  11. submit CTA changes label by side (BUY EMBER vs SELL EMBER), disabled reasons in tooltip
  12. pair switch via selector: chart, book, tape, ticket all rebind to new pair within ~2 sec, no orphan stale data
  13. URL deep-link /trade/:pairAddr loads pair preselected, shareable
  14. mobile viewport: panels stack legibly, ticket bottom-sheet pattern, book/tape accessible via tabs
  15. high-frequency book updates (with swarm running): no layout thrash, scroll position stable

§3 limits page (/limits) — limit order placement + management (13 items)

  1. /limits page loads with pair selector, bid/ask toggle, expiry presets per #110
  2. expiry presets: NO EXPIRY / 24H / 7D + datetime picker + Advanced raw seconds — all functional
  3. price input shows current mid price as reference, % offset from mid (if present) works
  4. size input + USD estimate updates correctly
  5. place limit CTA disabled with clear reason when invalid (price = 0, size = 0, insufficient balance)
  6. place limit happy path: signing → pending → confirmed, order appears in open orders table
  7. duplication issue per #129: verify limit logic isn't duplicated across components — note any inconsistent behavior between surfaces
  8. two-tx sequence per #130, #132: if dev hasn't fixed yet, document the visual UX of the two-popup flow, especially what happens if user rejects the second
  9. cancel limit order: row action → confirm modal → signing → row removes from table within ~3 sec
  10. cancel ID polling per #131: after place-cancel sequence, verify the new order ID is correctly tracked, no stale "pending cancel" state
  11. expired limit orders per #120: walk through an expired-but-unredeemed order — verify recovery/refund visual flow exists or is missing (file finding on #120 if missing)
  12. open orders table columns aligned, sorting works, pagination doesn't lose scroll position
  13. order history sub-tab: timestamps, fees paid, tx links all render correctly
  14. mobile viewport: limit form stacks legibly, table reflows to cards or horizontal scroll within container

§4 pool page (/pool) — liquidity provision (10 items)

  1. /pool page loads with pool list, "indexer only" vs "in router" badges per #112
  2. pool cards: token pair logos, fee tier, reserves, PROVIDE / WITHDRAW CTAs aligned
  3. pool detail modal/page: full reserves, your share, fees earned (if shown)
  4. provide-liquidity flow: pair selector, amount inputs auto-balance per pool ratio, slippage settings, submit
  5. provide LP confirm modal shows: token A amount, token B amount, share of pool, expected LP tokens, slippage
  6. provide LP signing → pending → success: LP tokens visible in wallet, position visible in your-positions section
  7. withdraw-liquidity flow: percentage slider 25% / 50% / 75% / 100%, expected token amounts update live
  8. withdraw confirm modal shows: LP tokens to burn, expected token A + B out, slippage
  9. withdraw signing → pending → success: balances refresh, position removes from your-positions if 100%
  10. mobile viewport: pool cards stack legibly, provide/withdraw forms full-screen sheet pattern

§5 charts page (/charts) — analytics (10 items)

  1. /charts page loads with 24h stats row, paginated pair finder ("Page X of Y — N pair(s)")
  2. pair finder pagination works, doesn't lose scroll
  3. per-pair section renders: PRICE CHART, 24H STATS, TWAP ORACLE, RECENT TRADES, LEADERBOARD
  4. price chart sparse-data empty state per #113 renders cleanly, not broken axis
  5. TWAP oracle source breakdown (average / kucoin / mexc) per protocol-oracle page renders correctly
  6. recent trades on charts page matches /trade tape data
  7. leaderboard renders trader addresses truncated, ranks visible
  8. pair finder count vs deployed pairs sanity check — if >> deployed, verify with dev whether stale indexer state
  9. fee discount tiers page (8 tiers, CL8Y hold requirements, REGISTER CTA per tier) loads correctly
  10. mobile viewport: stats stack, chart resizes, leaderboard reflows to cards

§6 wallet + connection states (12 items)

  1. fresh-page connect: button → modal → Station / Keplr / WalletConnect / dev-mode list (per #118)
  2. connect modal focus-trapped, ESC + outside-click closes
  3. provider icons load, names spelled correctly
  4. on connect: header chip shows truncated address + chain name + balance
  5. wrong-network state (e.g. mainnet Terra Classic when stack is localterra): clear "switch network" CTA visible everywhere
  6. switch network: dapp reflects new chain within ~2 sec
  7. account switch in wallet: dapp updates everywhere
  8. disconnect from header: clean state reset
  9. session persistence on hard refresh
  10. dev mode (VITE_DEV_MNEMONIC per #118): if active, verify warning banner is visible — this is a launch blocker if not
  11. mid-tx wallet UX: while signing popup is open, account switch blocked (verify the UX message)
  12. multiple connect attempts don't stack modals
  13. station extension not installed: graceful "install Station" CTA renders

§7 errors, loading, empty, and resilience (10 items)

  1. cold-load console: 0 errors, 0 unexpected warnings on /trade fresh load
  2. walk every route, console stays clean — flag any error/warning with route + repro
  3. RPC down: stop docker, watch dapp — does it show coherent error state vs infinite spinner
  4. indexer down: stop indexer terminal, watch dapp — graceful degradation vs full-page error
  5. "Cannot read properties of null" per #126: verify if/when this still reproduces, capture exact route + state
  6. rate-limit / 429 from indexer: retry UX renders without full reload
  7. wrong-network deep link: visit /trade?pair=X while on wrong chain — landing experience coherent
  8. error copy not dev-only: no raw stack traces, no "undefined is not a function" in user-facing UI
  9. toast/banner stacking: trigger multiple errors in sequence, verify they queue or stack without covering critical CTAs
  10. recovery after RPC flap: stop docker → start docker → verify dapp recovers without manual refresh

§8 exploratory — find what's NOT in this list

work through the dapp as a CEX-migrant trader would. things to actively probe:

  • click every button, link, icon. anything that does nothing or feels broken — note it
  • try keyboard-only navigation through full place-limit flow
  • shrink browser to 280px wide — what breaks at the floor of supported widths
  • enter weird input: emoji in price field, scientific notation in size field, very long token symbol simulated via custom CW20
  • with bot swarm running (make swarm-local): watch /trade for layout thrash, stale labels under flood traffic
  • multi-tab: open /trade in two tabs simultaneously, place limit in tab A, verify tab B reflects new order in your-orders
  • intentional double-click on submit: verify guard prevents double-submission
  • dust amounts: place limit at 0.000001 EMBER size — graceful or break
  • max-out amounts: place limit at full balance — verify gas reserve handling
  • pair-switch under load: rapidly switch pairs while book is updating — verify no orphan stale data
  • compare /trade with #116's tier framework W1-W13: any tier where the surface doesn't match expectation, file finding referencing both this ticket and #116
  • compare local stack against any deployed dex environment if one exists — note differences

file separate issues for any new findings. if a finding overlaps a known open ticket above, comment on that ticket instead of filing fresh.


format for posting findings on existing tickets

paste a note in this shape on the original issue, then tag @PlasticDigits.

visual checklist verification on §X item Y.

observed: [behavior].

screenshot: [link].

environment: browser, viewport, wallet.

ready for close on dev side.

format for a fresh issue

title: [visual] [page or section] [short description].

body: route, viewport, browser, wallet state, screenshot, severity (P1 blocker / P2 polish / P3 nit), repro steps.

ping me (@Brouie) on this ticket when checklist is fully walked or you hit a blocker. weekly progress update appreciated.

cc @PlasticDigits — umbrella ticket for totdking's local-stack visual QA work, complement to #116.

@totdking — local-stack visual QA umbrella for cl8y dex. scope: granular per-page visual walkthrough on the local LocalTerra stack (post-#116 onboarding setup) — translates #116's W1-W13 tier framework into walkable per-section items. complement to #116, not a replacement. items here are walkable on the running local stack at http://localhost:5173 after `make dev-full` (or the manual 3-terminal flow in #116's onboarding comment). related tickets to read before starting: - #116 — sister tier framework for pro hybrid trading, has full local QA onboarding (do setup steps from there first) - #114 — ecosystem-qa #10 spec mirror, A-J sections, partially walked, blocked on #115 - #115 — LAUNCH-BLOCKER swap OOG — sections that require swap submission are blocked on this fix - #118 — dev mnemonic literal in frontend (low priority) - #120 — security/critical expired limit orders refund — visual recovery flow gap - #121 — Factory PENDING_PAIR race - #122 — gas: pair registry lookup O(n) - #123 — gas limit risk: set_discount_registry_batch - #126 — "Cannot read properties of null" frontend error - #127 — gas fee underestimation — verify in your environment - #129 — Place Limit functionality duplicated - #130 — Place Limit submits two on-chain transactions - #131 — post-limit-placement cancel ID polling - #132 — two-tx limit order sequence burns first gas work top to bottom. when an item overlaps an existing open ticket, post the relevant finding as a note on that ticket and tag @PlasticDigits — do not close those tickets yourself. file fresh issues for anything not already covered. exploratory finds outside this list are expected — see §8. --- ## §1 swap page (/swap or /) — pool-only path (12 items) 1. swap card layout: input row, swap-direction button, output row, slippage settings, swap CTA — all aligned at desktop / tablet / mobile 2. token selector modal opens, shows token list with logos, search input filters correctly 3. token list scrolls smoothly, no layout shift on filter 4. recently-used tokens persist across page nav 5. amount input accepts decimals, max button populates wallet balance, clear button works 6. quote preview renders within ~1 sec of input, shows route (e.g. EMBER → CORAL), pool reserves, fee, price impact, min received, slippage tolerance 7. slippage settings expandable: 0.5% / 1% / 3% presets + custom input, persists across nav 8. price impact warnings render at >1% (yellow), >5% (orange), >10% (red) with severity styling 9. swap CTA disabled-state copy distinguishes: not connected vs wrong network vs insufficient balance vs insufficient gas vs no route 10. wallet popup → pending → success/failure each render coherent state with tx hash + explorer link 11. post-swap: balance refreshes, output token added to wallet if needed 12. swap fail (#115 OOG): error copy parses to user-actionable message, not raw RPC error 13. mobile viewport (390×844): all swap CTAs reachable, token selector full-screen sheet ## §2 trade page (/trade) — pro hybrid interface (15 items) 1. /trade default pair loads with order book, price chart, trade tape, order ticket sidebar all rendered 2. layout is resizable/collapsible per #116 W1-C2 — verify panels respect saved layout on refresh 3. order book: BIDS/ASKS columns aligned, color semantics consistent (green bid, red ask), spread visible 4. depth aggregation stepper (if present) re-aggregates without flicker 5. trade tape: HYBRID labels visible per #111, side coloring consistent, timestamps aligned 6. price chart (TradingView): timeframes 1m/5m/15m/1h/4h/1d switch cleanly, no stale axis on pair switch 7. order ticket sidebar: market/limit toggle, buy/sell visual distinction, side selector accidental-click guard 8. price input: tick enforcement matches pair config, +/- steppers work, % offset from mid buttons (if any) 9. size input: base vs quote toggle works, USD notional estimate updates with price 10. time-in-force / expiry / reduce-only toggles labeled clearly with sensible defaults 11. submit CTA changes label by side (BUY EMBER vs SELL EMBER), disabled reasons in tooltip 12. pair switch via selector: chart, book, tape, ticket all rebind to new pair within ~2 sec, no orphan stale data 13. URL deep-link /trade/:pairAddr loads pair preselected, shareable 14. mobile viewport: panels stack legibly, ticket bottom-sheet pattern, book/tape accessible via tabs 15. high-frequency book updates (with swarm running): no layout thrash, scroll position stable ## §3 limits page (/limits) — limit order placement + management (13 items) 1. /limits page loads with pair selector, bid/ask toggle, expiry presets per #110 2. expiry presets: NO EXPIRY / 24H / 7D + datetime picker + Advanced raw seconds — all functional 3. price input shows current mid price as reference, % offset from mid (if present) works 4. size input + USD estimate updates correctly 5. place limit CTA disabled with clear reason when invalid (price = 0, size = 0, insufficient balance) 6. place limit happy path: signing → pending → confirmed, order appears in open orders table 7. duplication issue per #129: verify limit logic isn't duplicated across components — note any inconsistent behavior between surfaces 8. two-tx sequence per #130, #132: if dev hasn't fixed yet, document the visual UX of the two-popup flow, especially what happens if user rejects the second 9. cancel limit order: row action → confirm modal → signing → row removes from table within ~3 sec 10. cancel ID polling per #131: after place-cancel sequence, verify the new order ID is correctly tracked, no stale "pending cancel" state 11. expired limit orders per #120: walk through an expired-but-unredeemed order — verify recovery/refund visual flow exists or is missing (file finding on #120 if missing) 12. open orders table columns aligned, sorting works, pagination doesn't lose scroll position 13. order history sub-tab: timestamps, fees paid, tx links all render correctly 14. mobile viewport: limit form stacks legibly, table reflows to cards or horizontal scroll within container ## §4 pool page (/pool) — liquidity provision (10 items) 1. /pool page loads with pool list, "indexer only" vs "in router" badges per #112 2. pool cards: token pair logos, fee tier, reserves, PROVIDE / WITHDRAW CTAs aligned 3. pool detail modal/page: full reserves, your share, fees earned (if shown) 4. provide-liquidity flow: pair selector, amount inputs auto-balance per pool ratio, slippage settings, submit 5. provide LP confirm modal shows: token A amount, token B amount, share of pool, expected LP tokens, slippage 6. provide LP signing → pending → success: LP tokens visible in wallet, position visible in your-positions section 7. withdraw-liquidity flow: percentage slider 25% / 50% / 75% / 100%, expected token amounts update live 8. withdraw confirm modal shows: LP tokens to burn, expected token A + B out, slippage 9. withdraw signing → pending → success: balances refresh, position removes from your-positions if 100% 10. mobile viewport: pool cards stack legibly, provide/withdraw forms full-screen sheet pattern ## §5 charts page (/charts) — analytics (10 items) 1. /charts page loads with 24h stats row, paginated pair finder ("Page X of Y — N pair(s)") 2. pair finder pagination works, doesn't lose scroll 3. per-pair section renders: PRICE CHART, 24H STATS, TWAP ORACLE, RECENT TRADES, LEADERBOARD 4. price chart sparse-data empty state per #113 renders cleanly, not broken axis 5. TWAP oracle source breakdown (average / kucoin / mexc) per protocol-oracle page renders correctly 6. recent trades on charts page matches /trade tape data 7. leaderboard renders trader addresses truncated, ranks visible 8. pair finder count vs deployed pairs sanity check — if >> deployed, verify with dev whether stale indexer state 9. fee discount tiers page (8 tiers, CL8Y hold requirements, REGISTER CTA per tier) loads correctly 10. mobile viewport: stats stack, chart resizes, leaderboard reflows to cards ## §6 wallet + connection states (12 items) 1. fresh-page connect: button → modal → Station / Keplr / WalletConnect / dev-mode list (per #118) 2. connect modal focus-trapped, ESC + outside-click closes 3. provider icons load, names spelled correctly 4. on connect: header chip shows truncated address + chain name + balance 5. wrong-network state (e.g. mainnet Terra Classic when stack is localterra): clear "switch network" CTA visible everywhere 6. switch network: dapp reflects new chain within ~2 sec 7. account switch in wallet: dapp updates everywhere 8. disconnect from header: clean state reset 9. session persistence on hard refresh 10. dev mode (VITE_DEV_MNEMONIC per #118): if active, verify warning banner is visible — this is a launch blocker if not 11. mid-tx wallet UX: while signing popup is open, account switch blocked (verify the UX message) 12. multiple connect attempts don't stack modals 13. station extension not installed: graceful "install Station" CTA renders ## §7 errors, loading, empty, and resilience (10 items) 1. cold-load console: 0 errors, 0 unexpected warnings on /trade fresh load 2. walk every route, console stays clean — flag any error/warning with route + repro 3. RPC down: stop docker, watch dapp — does it show coherent error state vs infinite spinner 4. indexer down: stop indexer terminal, watch dapp — graceful degradation vs full-page error 5. "Cannot read properties of null" per #126: verify if/when this still reproduces, capture exact route + state 6. rate-limit / 429 from indexer: retry UX renders without full reload 7. wrong-network deep link: visit /trade?pair=X while on wrong chain — landing experience coherent 8. error copy not dev-only: no raw stack traces, no "undefined is not a function" in user-facing UI 9. toast/banner stacking: trigger multiple errors in sequence, verify they queue or stack without covering critical CTAs 10. recovery after RPC flap: stop docker → start docker → verify dapp recovers without manual refresh ## §8 exploratory — find what's NOT in this list work through the dapp as a CEX-migrant trader would. things to actively probe: - click every button, link, icon. anything that does nothing or feels broken — note it - try keyboard-only navigation through full place-limit flow - shrink browser to 280px wide — what breaks at the floor of supported widths - enter weird input: emoji in price field, scientific notation in size field, very long token symbol simulated via custom CW20 - with bot swarm running (`make swarm-local`): watch /trade for layout thrash, stale labels under flood traffic - multi-tab: open /trade in two tabs simultaneously, place limit in tab A, verify tab B reflects new order in your-orders - intentional double-click on submit: verify guard prevents double-submission - dust amounts: place limit at 0.000001 EMBER size — graceful or break - max-out amounts: place limit at full balance — verify gas reserve handling - pair-switch under load: rapidly switch pairs while book is updating — verify no orphan stale data - compare /trade with #116's tier framework W1-W13: any tier where the surface doesn't match expectation, file finding referencing both this ticket and #116 - compare local stack against any deployed dex environment if one exists — note differences file separate issues for any new findings. if a finding overlaps a known open ticket above, comment on that ticket instead of filing fresh. --- ## format for posting findings on existing tickets paste a note in this shape on the original issue, then tag @PlasticDigits. visual checklist verification on §X item Y. observed: [behavior]. screenshot: [link]. environment: browser, viewport, wallet. ready for close on dev side. ## format for a fresh issue title: [visual] [page or section] [short description]. body: route, viewport, browser, wallet state, screenshot, severity (P1 blocker / P2 polish / P3 nit), repro steps. ping me (@Brouie) on this ticket when checklist is fully walked or you hit a blocker. weekly progress update appreciated. cc @PlasticDigits — umbrella ticket for totdking's local-stack visual QA work, complement to #116.
Brouie commented 2026-05-05 23:55:33 +00:00 (Migrated from gitlab.com)

assigned to @totdking

assigned to @totdking
PlasticDigits commented 2026-05-06 09:26:11 +00:00 (Migrated from gitlab.com)

Same as #118 and other checklits - once complete, please post the checklist with PASS/FAIL/SKIP with issue numbers for FAIL and reasons for skips @totdking

Same as #118 and other checklits - once complete, please post the checklist with PASS/FAIL/SKIP with issue numbers for FAIL and reasons for skips @totdking
Brouie commented 2026-05-07 06:34:45 +00:00 (Migrated from gitlab.com)

mentioned in issue #143

mentioned in issue #143
Brouie commented 2026-05-07 06:37:01 +00:00 (Migrated from gitlab.com)

mentioned in issue #144

mentioned in issue #144
Brouie commented 2026-05-07 06:38:59 +00:00 (Migrated from gitlab.com)

mentioned in issue #145

mentioned in issue #145
Brouie commented 2026-05-07 06:40:35 +00:00 (Migrated from gitlab.com)

mentioned in issue #146

mentioned in issue #146
totdking commented 2026-05-21 15:05:58 +00:00 (Migrated from gitlab.com)

@Brouie done with the visual checklist of #116 coupled with https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/work_items/133 will begin verification of fixes and regresson testing shortly

@Brouie done with the visual checklist of #116 coupled with https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/work_items/133 will begin verification of fixes and regresson testing shortly
PlasticDigits (Migrated from gitlab.com) closed this issue 2026-05-27 02:38:43 +00:00
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/cl8y-dex-terraclassic#133
No description provided.