Improve trade CTA hierarchy, progressive disclosure, and onboarding IA (#417) #945

2026-06-25T22:53:51Z

PlasticDigits commented

2026-06-25 22:53:51 +00:00

(Migrated from gitlab.com)

Summary

Implements GitLab #417 (parent #411): retail trade IA and calmer /trade first paint.

Onboarding strip (TradeOnboardingStrip) on /, /trade, and /limits until dismissed — links to Swap and explains Trade vs Limits; persists in localStorage.
CTA hierarchy — primary money actions (Place limit, Market buy/sell, ladder place) use TRADE_MONEY_CTA_CLASS (py-3 text-sm font-semibold); market slippage presets use min-h-11 (~44px) touch targets.
Progressive disclosure on /trade — recent trades (tape) and wallet swap history default collapsed on first visit; expansion persisted via tradeWorkspacePanels.ts. Desktop tape uses a collapsible resizable panel with Expand/Collapse control.
Docs — docs/frontend.md § Trade route — onboarding IA and new agent skill skills/AGENTS_FRONTEND_TRADE_ONBOARDING_IA.md.

Acceptance checklist

Criterion	Verification	Result
First-visit onboarding strip with links to `/` and Trade vs Limits guidance	`npm test -- --run src/components/common/__tests__/TradeOnboardingStrip.test.tsx`; manual: clear `cl8y-dex-trade-onboarding-dismissed`, open `/trade`	PASS
Primary trade CTAs ≥ Swap CTA visual weight	`TRADE_MONEY_CTA_CLASS` on `trade-limit-submit`, `trade-market-submit`, `ladder-place-submit`; screenshot `docs/screenshots/issue-417/trade-ticket-ctas.png` vs `swap-cta-reference.png` (capture: `node frontend-dapp/scripts/capture-issue-417-screenshots.mjs` with `make dev`)	PASS
Slippage presets ~44px touch target	`TRADE_SLIPPAGE_PRESET_CLASS` (`min-h-11`) + `data-testid="trade-market-slippage-preset-*"`	PASS
Progressive disclosure reduces default visible panels on `/trade`	Tape + wallet history collapsed first visit; `TradePage.test.tsx` (#417 cases); docs § trade-route-onboarding-ia	PASS
Screenshot: `/trade` default first-visit layout	Captured locally → `docs/screenshots/issue-417/trade-first-visit.png` (gitignored; regenerate via Playwright CLI or capture script)	PASS
Screenshot: Trade ticket enlarged CTAs vs Swap	`docs/screenshots/issue-417/trade-ticket-ctas.png` + `swap-cta-reference.png`	PASS
Screenshot: Onboarding strip	`docs/screenshots/issue-417/onboarding-strip-trade.png` / `onboarding-strip-swap.png`	PASS

Verification for third parties

make test-frontend
make lint-frontend
# Optional manual (needs LocalTerra + make dev):
# Clear localStorage keys: cl8y-dex-trade-onboarding-dismissed, cl8y-dex-trade-tape-expanded, cl8y-dex-trade-wallet-history-expanded
# Visit http://127.0.0.1:5173/trade — confirm onboarding strip, collapsed tape/history, enlarged Place limit CTA
# Dismiss strip, expand tape — reload; strip stays hidden, tape stays expanded
# Mobile (≤767px): confirm bottom nav tabs remain usable; strip does not cover them
node frontend-dapp/scripts/capture-issue-417-screenshots.mjs  # regenerates comparison screenshots

Pause/blacklist banners remain visible when applicable (#388, #395). Onboarding dismiss does not block wallet connect or submit buttons.

Test plan

make test-frontend — 1077 tests passed
make lint-frontend — 0 errors
Manual first visit + return visit (localStorage) on Cloud Agent VM with make setup-cloud-localterra + make dev
Manual mobile layout — onboarding strip is in-page above content, not over bottom nav

## Summary Implements GitLab #417 (parent #411): retail trade IA and calmer `/trade` first paint. - **Onboarding strip** (`TradeOnboardingStrip`) on `/`, `/trade`, and `/limits` until dismissed — links to Swap and explains Trade vs Limits; persists in `localStorage`. - **CTA hierarchy** — primary money actions (Place limit, Market buy/sell, ladder place) use `TRADE_MONEY_CTA_CLASS` (`py-3 text-sm font-semibold`); market slippage presets use `min-h-11` (~44px) touch targets. - **Progressive disclosure** on `/trade` — recent trades (tape) and wallet swap history default **collapsed** on first visit; expansion persisted via `tradeWorkspacePanels.ts`. Desktop tape uses a collapsible resizable panel with Expand/Collapse control. - **Docs** — [docs/frontend.md § Trade route — onboarding IA](docs/frontend.md#trade-route-onboarding-ia) and new agent skill [`skills/AGENTS_FRONTEND_TRADE_ONBOARDING_IA.md`](skills/AGENTS_FRONTEND_TRADE_ONBOARDING_IA.md). ## Acceptance checklist | Criterion | Verification | Result | |-----------|--------------|--------| | First-visit onboarding strip with links to `/` and Trade vs Limits guidance | `npm test -- --run src/components/common/__tests__/TradeOnboardingStrip.test.tsx`; manual: clear `cl8y-dex-trade-onboarding-dismissed`, open `/trade` | PASS | | Primary trade CTAs ≥ Swap CTA visual weight | `TRADE_MONEY_CTA_CLASS` on `trade-limit-submit`, `trade-market-submit`, `ladder-place-submit`; screenshot `docs/screenshots/issue-417/trade-ticket-ctas.png` vs `swap-cta-reference.png` (capture: `node frontend-dapp/scripts/capture-issue-417-screenshots.mjs` with `make dev`) | PASS | | Slippage presets ~44px touch target | `TRADE_SLIPPAGE_PRESET_CLASS` (`min-h-11`) + `data-testid="trade-market-slippage-preset-*"` | PASS | | Progressive disclosure reduces default visible panels on `/trade` | Tape + wallet history collapsed first visit; `TradePage.test.tsx` (#417 cases); docs § trade-route-onboarding-ia | PASS | | Screenshot: `/trade` default first-visit layout | Captured locally → `docs/screenshots/issue-417/trade-first-visit.png` (gitignored; regenerate via Playwright CLI or capture script) | PASS | | Screenshot: Trade ticket enlarged CTAs vs Swap | `docs/screenshots/issue-417/trade-ticket-ctas.png` + `swap-cta-reference.png` | PASS | | Screenshot: Onboarding strip | `docs/screenshots/issue-417/onboarding-strip-trade.png` / `onboarding-strip-swap.png` | PASS | ## Verification for third parties ```bash make test-frontend make lint-frontend # Optional manual (needs LocalTerra + make dev): # Clear localStorage keys: cl8y-dex-trade-onboarding-dismissed, cl8y-dex-trade-tape-expanded, cl8y-dex-trade-wallet-history-expanded # Visit http://127.0.0.1:5173/trade — confirm onboarding strip, collapsed tape/history, enlarged Place limit CTA # Dismiss strip, expand tape — reload; strip stays hidden, tape stays expanded # Mobile (≤767px): confirm bottom nav tabs remain usable; strip does not cover them node frontend-dapp/scripts/capture-issue-417-screenshots.mjs # regenerates comparison screenshots ``` Pause/blacklist banners remain visible when applicable (#388, #395). Onboarding dismiss does not block wallet connect or submit buttons. ## Test plan - [x] `make test-frontend` — 1077 tests passed - [x] `make lint-frontend` — 0 errors - [x] Manual first visit + return visit (localStorage) on Cloud Agent VM with `make setup-cloud-localterra` + `make dev` - [x] Manual mobile layout — onboarding strip is in-page above content, not over bottom nav

PlasticDigits commented

2026-06-25 22:55:42 +00:00

(Migrated from gitlab.com)

Security review — MR !945

Commit reviewed: d4b050456ed86d126272f151d592fe6e2d07951a
Scope: Frontend trade IA (#417) — TradeOnboardingStrip, TradeWorkspaceDisclosure, tradeOnboarding.ts / tradeWorkspacePanels.ts / tradeMoneyCta.ts, progressive disclosure on TradePage, CTA class updates on trade tickets, docs/tests, dev screenshot script.

Method: Diff review with attacker-controlled-input tracing (localStorage keys/values, disclosure props, navigation links, panel collapse behavior vs pause/blacklist/outage banners). Prior MR security threads: none found.

Outcome: FINDINGS: 0 medium+

No medium, high, or critical vulnerabilities identified on this diff.

Notes (in scope, not escalated):

localStorage reads compare strictly to '1'; values are never interpolated into HTML or URLs. Keys are hardcoded at call sites (TRADE_*_KEY constants).
TradeOnboardingStrip uses static copy and an internal <Link to="/">; no dangerouslySetInnerHTML or external/open redirects.
Progressive disclosure collapses tape and wallet history only; indexer outage, invalid-pair, and pair-selector surfaces remain visible; onboarding strip is in-flow (not fixed over wallet/submit).
capture-issue-417-screenshots.mjs is a local dev helper (localhost Playwright); not shipped to production.

Inline threads: none (no findings to anchor).

## Security review — MR !945 **Commit reviewed:** `d4b050456ed86d126272f151d592fe6e2d07951a` **Scope:** Frontend trade IA (#417) — `TradeOnboardingStrip`, `TradeWorkspaceDisclosure`, `tradeOnboarding.ts` / `tradeWorkspacePanels.ts` / `tradeMoneyCta.ts`, progressive disclosure on `TradePage`, CTA class updates on trade tickets, docs/tests, dev screenshot script. **Method:** Diff review with attacker-controlled-input tracing (localStorage keys/values, disclosure props, navigation links, panel collapse behavior vs pause/blacklist/outage banners). Prior MR security threads: none found. **Outcome:** `FINDINGS: 0` medium+ No medium, high, or critical vulnerabilities identified on this diff. **Notes (in scope, not escalated):** - `localStorage` reads compare strictly to `'1'`; values are never interpolated into HTML or URLs. Keys are hardcoded at call sites (`TRADE_*_KEY` constants). - `TradeOnboardingStrip` uses static copy and an internal `<Link to="/">`; no `dangerouslySetInnerHTML` or external/open redirects. - Progressive disclosure collapses tape and wallet history only; indexer outage, invalid-pair, and pair-selector surfaces remain visible; onboarding strip is in-flow (not fixed over wallet/submit). - `capture-issue-417-screenshots.mjs` is a local dev helper (localhost Playwright); not shipped to production. **Inline threads:** none (no findings to anchor).

PlasticDigits commented

2026-06-26 03:39:05 +00:00

(Migrated from gitlab.com)

added 3 commits

d4b05045...aac5dcea - 2 commits from branch main
3974e8f8 - Merge origin/main into issue-417-trade-cta-onboarding-ia

Compare with previous version

added 3 commits <ul><li>d4b05045...aac5dcea - 2 commits from branch <code>main</code></li><li>3974e8f8 - Merge origin/main into issue-417-trade-cta-onboarding-ia</li></ul> [Compare with previous version](/PlasticDigits/cl8y-dex-terraclassic/-/merge_requests/227/diffs?diff_id=1872278652&start_sha=d4b050456ed86d126272f151d592fe6e2d07951a)

PlasticDigits commented

2026-06-26 03:39:08 +00:00

(Migrated from gitlab.com)

Resolved merge conflict with main (#419 retail limit order UX).

TradeOrderTicket.tsx: Kept main’s layout — open limits panel inside the limit tab, cancel-by-ID in a collapsible <details> — and retained #417’s TRADE_MONEY_CTA_CLASS on the primary limit submit (sticky footer). Dropped duplicate cancel button and bottom placements block from the pre-merge branch.

Sanity: make lint-frontend (0 errors), TradePage + trade component tests (83 passed).

Resolved merge conflict with `main` (#419 retail limit order UX). **`TradeOrderTicket.tsx`:** Kept main’s layout — open limits panel inside the limit tab, cancel-by-ID in a collapsible `<details>` — and retained #417’s `TRADE_MONEY_CTA_CLASS` on the primary limit submit (sticky footer). Dropped duplicate cancel button and bottom placements block from the pre-merge branch. Sanity: `make lint-frontend` (0 errors), TradePage + trade component tests (83 passed).

PlasticDigits commented

2026-06-26 03:41:02 +00:00

(Migrated from gitlab.com)

Security review — MR !945

Commit reviewed: 3974e8f899a7fcbff37631be138bede0c8854869
Scope: Frontend trade IA (#417) — TradeOnboardingStrip, TradeWorkspaceDisclosure, tradeOnboarding.ts / tradeWorkspacePanels.ts / tradeMoneyCta.ts, progressive disclosure on TradePage, CTA class updates on trade tickets, docs/tests, dev screenshot script. Re-reviewed after merge of origin/main into branch.

Method: Full MR diff review with attacker-controlled-input tracing (localStorage keys/values, disclosure props, navigation links, panel collapse vs pause/blacklist/outage banners). Prior MR security thread (commit d4b0504) re-checked; no new medium+ issues from the merge delta.

Outcome: FINDINGS: 0 medium+

Security review: no medium+ findings on this diff.

Notes (in scope, not escalated):

localStorage reads compare strictly to '1'; values are never interpolated into HTML or URLs. Keys are hardcoded at call sites (TRADE_*_KEY constants).
TradeOnboardingStrip uses static copy and an internal <Link to="/">; no dangerouslySetInnerHTML or external/open redirects.
Progressive disclosure collapses tape and wallet history only; global indexer outage banner (trade-indexer-outage-banner), invalid-pair notices, and pair selector remain visible; onboarding strip is in-flow (not fixed over wallet/submit).
capture-issue-417-screenshots.mjs is a local dev helper (localhost Playwright); not shipped to production.

Inline threads: none (no findings to anchor).

## Security review — MR !945 **Commit reviewed:** `3974e8f899a7fcbff37631be138bede0c8854869` **Scope:** Frontend trade IA (#417) — `TradeOnboardingStrip`, `TradeWorkspaceDisclosure`, `tradeOnboarding.ts` / `tradeWorkspacePanels.ts` / `tradeMoneyCta.ts`, progressive disclosure on `TradePage`, CTA class updates on trade tickets, docs/tests, dev screenshot script. Re-reviewed after merge of `origin/main` into branch. **Method:** Full MR diff review with attacker-controlled-input tracing (`localStorage` keys/values, disclosure props, navigation links, panel collapse vs pause/blacklist/outage banners). Prior MR security thread (commit `d4b0504`) re-checked; no new medium+ issues from the merge delta. **Outcome:** `FINDINGS: 0` medium+ Security review: no medium+ findings on this diff. **Notes (in scope, not escalated):** - `localStorage` reads compare strictly to `'1'`; values are never interpolated into HTML or URLs. Keys are hardcoded at call sites (`TRADE_*_KEY` constants). - `TradeOnboardingStrip` uses static copy and an internal `<Link to="/">`; no `dangerouslySetInnerHTML` or external/open redirects. - Progressive disclosure collapses tape and wallet history only; global indexer outage banner (`trade-indexer-outage-banner`), invalid-pair notices, and pair selector remain visible; onboarding strip is in-flow (not fixed over wallet/submit). - `capture-issue-417-screenshots.mjs` is a local dev helper (localhost Playwright); not shipped to production. **Inline threads:** none (no findings to anchor).

PlasticDigits commented

2026-06-26 04:27:33 +00:00

(Migrated from gitlab.com)

mentioned in commit cb162874d8

mentioned in commit cb162874d8b61a7aacc3a0268b0774152c4fc07a