Full deep visual inspection: pro hybrid trading interface (CEX-migrant workflows) #116
Labels
No labels
agent:fix_bugfix
agent:fix_conflicts
agent:fix_security
agent:gap_analysis
agent:implement
agent:implement
agent:implement
agent:open_issues
agent:ready
agent:research
agent:security_audit
agent:verify
architecture
backend
blocker:hybrid
blocker:launch
blocker:limit-orders
blocker:v2
block:log_only
block:security
bug
ci
contracts
correctness
deploy
dev
devops
docs
documentation
duplicate
e2e
enhancement
epic
feature
frontend
functional-completion
gas
good first issue
governance
help wanted
high-risk
hooks
hybrid
indexer
infra
infrastructure
integrators
invalid
launch-blocker
limit-orders
localnet
localterra
low priority
missing-implementation
needs-design
ops
performance
priority
high
priority
medium
product
qa
QA
question
ready
ready
research
scripts
security
security-hardening
smartcontracts
tech-debt
testing
ux
UX
v2
verification
wontfix
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
code/cl8y-dex-terraclassic#116
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Full deep visual inspection — Pro hybrid trading interface
Purpose
Perform a full, deep visual inspection of every element of the pro hybrid trading interface. This is not a code review: focus on what traders see and do, including layout, typography, states, feedback, and on-chain flows (inputs, previews, signing, confirmation, errors).
Assume a trader migrating from a centralized exchange (CEX) who expects familiar workflows (connect, fund, discover, analyze, place/manage risk, monitor fills, withdraw mentally to self-custody). Map those expectations to this DEX UI and verify each surface visually and behaviorally.
How to use this checklist
Tier 1 — Workflows (CEX-migrant mental model)
W1 — Arrive, orient, and trust the surface
Components to inspect
Per-component inspection (repeat for C1–C3)
W2 — Connect wallet and establish session (CEX: “log in”)
Components
Per-component
W3 — Fund / approve / capacity (CEX: “deposit & buying power”)
Components
Per-component
W4 — Discover markets and select a pair (CEX: “markets list & search”)
Components
Per-component
W5 — Read price, liquidity, and microstructure (CEX: “tape & book”)
Components
Per-component
W6 — Charting and context (CEX: “TradingView tab”)
Components
Per-component
W7 — Prepare and place an order (CEX: “order form”)
Components
Per-component
W8 — Confirm, sign, and observe transaction lifecycle (CEX: “confirm order” → “open orders”)
Components
Per-component
W9 — Monitor open orders, history, and positions (CEX: “orders & history”)
Components
Per-component
W10 — Adjust risk, settings, and preferences (CEX: “settings & defaults”)
Components
Per-component
W11 — Errors, edge cases, and resilience (CEX: “platform never lies”)
Components
Per-component
W12 — Accessibility, keyboard, and inclusive design
Components
Per-component
W13 — Performance and “feel” (CEX: “snappy UI”)
Components
Per-component
Cross-cutting matrices (apply within every workflow above)
For each major screen region (order card, book, tape, balances, tx modals, tables), explicitly verify:
Deliverables for assignee
Scope note
In scope: all pro hybrid trading UI surfaces (including modals, drawers, toasts, and wallet-adjacent UI triggered from that mode).
Out of scope unless shared: unrelated marketing pages, admin-only tools — still file cross-links if broken from hybrid.
Acceptance criteria
assigned to @Brouie
Local QA onboarding — infrastructure + starting visual inspection (issue checklist)
This note is for a new QA engineer doing human-controlled, visual verification of the pro hybrid trading surfaces described in this issue. It assumes you are developing from a single laptop with Docker (not the remote QA-server + SSH tunnel flow in
scripts/qa/README.md, unless your lead assigns that).Repository:
https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic1. One-time prerequisites
Install and verify:
.nvmrc→nvm install/nvm useat repo root.frontend-dapp/package.jsonengines.cargo runfromindexer/.Optional but useful:
wasm32-unknown-unknown— only if you build contracts with plaincargo(not required for the recommendedmake deploy-localpath, which uses the optimizer via Docker).docs/qa-onboarding.mdwallet matrix).Configure hooks once per clone:
2. Clone and install frontend dependencies
3. Bring up LocalTerra + Postgres
From the repository root:
Wait until the chain and DB are reachable (optional but reliable):
Sanity check anytime:
Ports (defaults): LocalTerra LCD
http://localhost:1317, Tendermint RPChttp://localhost:26657; Postgres onlocalhost:5432(see rootdocker-compose.ymlif your environment differs).4. Build optimized WASM and deploy all contracts (writes env files)
Still from repo root:
This runs
make build-optimized(CosmWasm workspace optimizer in Docker) and thenscripts/deploy-dex-local.sh, which:frontend-dapp/.env.local(LCD/RPC + contract addresses for local).indexer/.env(Postgres URL, factory address, API port).If the script complains that WASM is stale, run
make build-optimizedand repeatmake deploy-local.5. Run the indexer (second terminal)
Indexer consumes chain events and serves HTTP APIs (charts, pairs API, hybrid routing context). From repo root:
Expect API base
http://localhost:3001by default (health endpoint documented in indexer;make statuschecks/healthwhen using QA scripts).Charts / long-interval candles: a fresh local chain has little history. If you need populated weekly/monthly-style candles for Tier W6, after deploy + at least one indexer migration pass you can run synthetic seeding — see
docs/qa-onboarding.md(cd indexer && cargo run -- seed-qa, optional--weeks,--clean).6. Run the frontend dev server (third terminal)
Open the URL Vite prints (typically
http://localhost:5173).Ensure
frontend-dapp/.env.localexists from step 4 so LCD/RPC and contract addresses match the chain you deployed.7. Wallets — how to sign like a real user
A. Station (recommended for this issue)
Add or select a local Terra Classic network pointing at your machine:
localterrahttp://localhost:1317http://localhost:26657Fund the address you control from genesis
test1if needed (operators often usedocker exec+terrad tx bank sendpatterns documented alongsidescripts/deploy-dex-local.sh).B. Simulated dev wallet (optional, no extension)
Documented in
docs/frontend.md(VITE_DEV_MODE,VITE_DEV_MNEMONIC). For LocalTerra, the mnemonic must matchTEST_MNEMONICindocker/init-chain.sh;deploy-dex-local.shalso alignsfrontend-dapp/.env.development. Use only for local QA — never commit real seeds.8. Bot swarm (optional — activity for book / tape / hybrid stress)
Only after LocalTerra is up and deploy finished successfully.
From repo root, in a dedicated terminal (runs until you stop it):
Equivalent entrypoints:
./scripts/localnet-trading-swarm.shorpython3 scripts/bots/swarm.py.Safety / expectations:
localterraguard).SWARM_BOT_MNEMONIC(do not commit secrets)../scripts/localnet-trading-swarm.sh -- --dry-runmake swarm-launch— stop withmake swarm-stop.Keep swarm traffic local — never point it at public RPCs.
9. One-shot alternative:
make dev-fullFor convenience,
make dev-fullchainsstart, health wait, optimized build, deploy, then starts indexer (background) and the Vite dev server. Use separate terminals instead if you want clearer logs and independent restarts during long visual sessions.10. Where to perform this issue’s visual inspection
Routing is defined in
frontend-dapp/src/App.tsx:/tradeand/trade/:pairAddr→TradePage./limits,/trader,/charts, classic swap at/if you compare behaviors.Start at
/trade, pick a realistic pair with liquidity from deploy (factory pairs exist afterdeploy-local). Deep links should update when you change pair selection — confirm visually per checklist W4.11. How to begin human-controlled verification against this issue’s tiers
VITE_NETWORK=local, and whether indexer + swarm were running./limitsand any hybrid-specific tables on/trade; cancel / refresh behavior should match expectations in the issue matrices.Reference templates (repo):
QA_TEMPLATE.md,docs/qa-templates/, anddocs/qa-onboarding.mdfor generic swap/pool flows that overlap hybrid workflows.12. Resetting local state
Then repeat from §3 onward.
13. Remote QA server workflow (FYI)
If your team uses a shared machine instead of laptop-local Docker, see
scripts/qa/README.md:make start-qa,make qa-tunnel-help, copyfrontend-dapp/.env.local, run Vite locally. That path is equivalent after tunneling; the steps above stay valid once URLs resolve to your forwarded ports.assigned to @totdking and unassigned @Brouie
@totdking You’re assigned on this issue; the local QA onboarding note in this thread is intended for you to follow.
mentioned in issue #133
@totdking Once you've completed the checklist, please mark each item as PASS/FAIL/SKIP, and for SKIPS the reason, for FAILS the issue number opened.
mentioned in issue #138
Tier 1
W1 - Arrive, orient, and trust the surface
C1 - Global chrome: FAIL: #137 (swap, pool, limits, trade, charts) when in focus is not changed and no notable difference is noticed
swap page here
pool page
C2 - Layout shell: FAIL #136 (nav bar of more & local) crash into each other on reduced layout size
C3 - Legal / risk surfacing: FAIL #138
W2 - Connect Wallet and Establish Session (CEX: "log in")
W3 - Fund / Approve / Capacity (CEX: "deposit & buying power")
W4 - Discover Markets and Select a Pair (CEX: "markets list & search")
W5 - Read Price, Liquidity, and Microstructure (CEX: "tape & book")
OFFERandRETURNare not standard CEX terms —SIZE/VALUEorAMOUNT IN/AMOUNT OUTwould be immediately readable.DIRECTIONcould beSIDEorPAIR.)HYBRIDlabel on every trade row should have a tooltip or inline explanation e.g. "Executed via hybrid AMM + limit order routing" — so a trader knows what kind of fill they are looking at.)W6 - Charting and Context (CEX: "TradingView tab")
W7 - Prepare and Place an Order (CEX: "order form")
/trade— only limit order form present, no market order type or disabled-type rationale) ~"blocker:limit-orders"W8 - Confirm, Sign, and Observe Transaction Lifecycle (CEX: "confirm order → open orders")
W9 - Monitor Open Orders, History, and Positions (CEX: "orders & history")
W10 - Adjust Risk, Settings, and Preferences (CEX: "settings & defaults")
W11 - Errors, Edge Cases, and Resilience (CEX: "platform never lies")
W12 - Accessibility, Keyboard, and Inclusive Design
reduced motionin my macos settings)W13 - Performance and "Feel" (CEX: "snappy UI")
cc: @PlasticDigits finished with the dex checklist.
mentioned in issue #140
@totdking When back, please continue with W7 to W13
@totdking Excellent, please proceed with verifying fixes on issues.