code/cl8y-dex-terraclassic

Fork 0

Trade page lacks readable market context for CEX-migrant traders — no last price, unclear tape labels, unexplained HYBRID tag, order book scope not communicated #149

New issue

Closed

opened 2026-05-07 14:40:26 +00:00 by totdking · 12 comments

totdking commented

2026-05-07 14:40:26 +00:00

(Migrated from gitlab.com)

No description provided.

totdking commented

2026-05-07 15:07:07 +00:00

(Migrated from gitlab.com)

changed title from Trade page price and trade surface lacks readable context for CEX-migrant traders, no last price, unclear column labels, unexplained HYBRID tag to Trade page lacks readable market context for CEX-migrant traders — no last price, unclear tape labels, unexplained HYBRID tag, order book scope not communicated

changed title from <code class="idiff">Trade page price and trade surface lacks readable context for CEX-migrant traders, no last price, unclear column labels, unexplained HYBRID tag</code> to <code class="idiff">Trade page lacks readable market context for CEX-migrant traders — no last price, unclear tape labels, unexplained HYBRID tag, order book scope not communicated</code>

totdking commented

2026-05-07 15:07:07 +00:00

(Migrated from gitlab.com)

changed the description

totdking commented

2026-05-07 15:12:16 +00:00

(Migrated from gitlab.com)

Issue Summary

Four related display gaps on the /trade page make it difficult for a trader migrating from a CEX to read market context before placing an order.

There is no prominent current price number, the recent trades table uses DEX-specific column labels with no explanation,
a HYBRID tag appears on every trade row with no tooltip or definition.
order book panel shows no indication that it only reflects limit orders leaving a trader confused when active pool trades appear in the tape while the book remains empty.

Reproduction Steps

Navigate to /trade
Select any pair with recent trade history (e.g. EMBER/JADE, TOPAZ/OPAL)
Observe the Price (USD) chart panel — look for a standalone current price number
Observe the Recent Trades table — read the column headers OFFER, RETURN, DIRECTION
Observe the HYBRID label on each trade row — look for a tooltip or explanation
Run make swarm-local to generate active pool trading — observe order book stays empty while tape updates
Manually place a limit order on CORAL/EMBER — observe it appears in the order book, confirming the book is limit-orders only

Expected Behavior

C1 — Price: A prominent last price or mid price number should be displayed outside the chart — e.g. above or beside the chart panel — so the trader can read the current price at a glance without interpreting the chart axis. Full validation of price accuracy requires testnet; the missing label is flagged on local.

C2 — Order book scope: The order book panel should carry a label or tooltip clarifying that it reflects limit orders only — e.g. "Shows open limit orders — pool liquidity not included." Without this, a trader seeing an empty or thin book alongside an active tape has no way to know the two surfaces reflect different order types. Only manual limit orders carried out reflect in order book column.

C3 — Tape column labels: Column headers should use trader-familiar terminology. OFFER and RETURN are not standard CEX terms — SIZE / VALUE or AMOUNT IN / AMOUNT OUT would be immediately readable. DIRECTION could be SIDE or PAIR.

C3/C4 — HYBRID tag: The HYBRID label 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.

Actual Behavior

No current price number is shown outside the chart. The only price reference is the chart Y-axis and a small value at the bottom corner of the chart panel — neither is readable as a "last price" at a glance.
Order book shows (empty) for both BIDS and ASKS even while the swarm generates active trades visible in the tape. Manually placed limit orders do appear correctly — confirming the book is limit-orders only, but no label communicates this anywhere.
Recent Trades table headers read: TIME, DIRECTION, OFFER, RETURN, PRICE, TX. OFFER and RETURN are not standard trading terms and have no tooltip.
Every trade row shows a HYBRID label with no explanation. A CEX trader has no context for what this means or whether it affects their fill.

Environment Details

Field	Value
OS	macOS (Apple M1 Pro, 14-inch)
Browser	Google Chrome (desktop)
Viewport	1470×864
Network	`localterra` (local Docker)
Frontend	`VITE_NETWORK=local npm run dev`
Indexer	Running (`make indexer-dev`)
Contracts	Deployed via `make deploy-local`

Wallet / Device Details

Wallet: simulated wallet
Wallet state: Connected — localterra
Pairs tested: EMBER/JADE, TOPAZ/OPAL, CORAL/EMBER

Screenshots

See attached screenshots showing: (1) /trade page with no standalone price number, OFFER/RETURN column headers, and HYBRID tags on all recent trade rows; (2) order book empty while tape is actively updating under swarm; (3) manual limit order appearing in order book on CORAL/EMBER confirming limit-only scope.

{width="900" height="399"}

Severity / Impact

P2 Polish. No functionality is broken and no funds are at risk. All four gaps are display and labeling issues that individually are minor but collectively leave a CEX-migrant trader unable to answer: "What is the price right now?", "Why is the order book empty when trades are happening?", "What do OFFER and RETURN mean?", and "What is HYBRID?" Found under W5 (C1 — price display, C2 — order book scope, C3 — recent trades tape, C4 — pool/route summary).

cc: @PlasticDigits

### Issue Summary Four related display gaps on the `/trade` page make it difficult for a trader migrating from a CEX to read market context before placing an order. 1. There is no prominent current price number, the recent trades table uses DEX-specific column labels with no explanation, 2. a `HYBRID` tag appears on every trade row with no tooltip or definition. 3. order book panel shows no indication that it only reflects limit orders leaving a trader confused when active pool trades appear in the tape while the book remains empty. --- ### Reproduction Steps 1. Navigate to `/trade` 2. Select any pair with recent trade history (e.g. EMBER/JADE, TOPAZ/OPAL) 3. Observe the Price (USD) chart panel — look for a standalone current price number 4. Observe the Recent Trades table — read the column headers OFFER, RETURN, DIRECTION 5. Observe the HYBRID label on each trade row — look for a tooltip or explanation 6. Run `make swarm-local` to generate active pool trading — observe order book stays empty while tape updates 7. Manually place a limit order on CORAL/EMBER — observe it appears in the order book, confirming the book is limit-orders only --- ### Expected Behavior **C1 — Price:** A prominent last price or mid price number should be displayed outside the chart — e.g. above or beside the chart panel — so the trader can read the current price at a glance without interpreting the chart axis. Full validation of price accuracy requires testnet; the missing label is flagged on local. **C2 — Order book scope:** The order book panel should carry a label or tooltip clarifying that it reflects limit orders only — e.g. _"Shows open limit orders — pool liquidity not included."_ Without this, a trader seeing an empty or thin book alongside an active tape has no way to know the two surfaces reflect different order types. Only manual limit orders carried out reflect in order book column. **C3 — Tape column labels:** Column headers should use trader-familiar terminology. `OFFER` and `RETURN` are not standard CEX terms — `SIZE` / `VALUE` or `AMOUNT IN` / `AMOUNT OUT` would be immediately readable. `DIRECTION` could be `SIDE` or `PAIR`. **C3/C4 — HYBRID tag:** The `HYBRID` label 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. --- ### Actual Behavior - No current price number is shown outside the chart. The only price reference is the chart Y-axis and a small value at the bottom corner of the chart panel — neither is readable as a "last price" at a glance. - Order book shows `(empty)` for both BIDS and ASKS even while the swarm generates active trades visible in the tape. Manually placed limit orders do appear correctly — confirming the book is limit-orders only, but no label communicates this anywhere. - Recent Trades table headers read: `TIME`, `DIRECTION`, `OFFER`, `RETURN`, `PRICE`, `TX`. `OFFER` and `RETURN` are not standard trading terms and have no tooltip. - Every trade row shows a `HYBRID` label with no explanation. A CEX trader has no context for what this means or whether it affects their fill. --- ### Environment Details | Field | Value | |-------|-------| | OS | macOS (Apple M1 Pro, 14-inch) | | Browser | Google Chrome (desktop) | | Viewport | 1470×864 | | Network | `localterra` (local Docker) | | Frontend | `VITE_NETWORK=local npm run dev` | | Indexer | Running (`make indexer-dev`) | | Contracts | Deployed via `make deploy-local` | --- ### Wallet / Device Details - **Wallet:** simulated wallet - **Wallet state:** Connected — localterra - **Pairs tested:** EMBER/JADE, TOPAZ/OPAL, CORAL/EMBER --- ### Screenshots > See attached screenshots showing: (1) /trade page with no standalone price number, OFFER/RETURN column headers, and HYBRID tags on all recent trade rows; (2) order book empty while tape is actively updating under swarm; (3) manual limit order appearing in order book on CORAL/EMBER confirming limit-only scope. ![image.png](/uploads/d0689b91ffdee68e491f58da226a1817/image.png){width="900" height="399"} --- ### Severity / Impact **P2 Polish.** No functionality is broken and no funds are at risk. All four gaps are display and labeling issues that individually are minor but collectively leave a CEX-migrant trader unable to answer: "What is the price right now?", "Why is the order book empty when trades are happening?", "What do OFFER and RETURN mean?", and "What is HYBRID?" Found under **W5** (C1 — price display, C2 — order book scope, C3 — recent trades tape, C4 — pool/route summary). cc: @PlasticDigits ---

totdking commented

2026-05-07 17:32:42 +00:00

(Migrated from gitlab.com)

mentioned in issue #116

PlasticDigits commented

2026-05-09 09:36:37 +00:00

(Migrated from gitlab.com)

mentioned in commit c2158f7b40

mentioned in commit c2158f7b40e3c011cbaa7bba4f05a8309c9def10

PlasticDigits commented

2026-05-09 09:38:55 +00:00

(Migrated from gitlab.com)

mentioned in commit 9ded951a86

mentioned in commit 9ded951a866811a414ef3cbdcabfb4b05e021e28

PlasticDigits commented

2026-05-09 09:39:17 +00:00

(Migrated from gitlab.com)

Update (main)

Implemented #149 trade UX for CEX-style readability and merged to main (combined with chart overlay work from #150 / #151 in PriceChart.tsx).

What changed

Last price: Beside Price (USD), a Last line shows indexer tape USD when tapeLastPriceUsd is passed from /trade / /charts, otherwise the last candle close (chartHeadlinePrice.ts, data-testid="trade-chart-headline-price").
Order book: Copy under the heading clarifies open limit orders only — pool / swarm fills stay on the tape (OrderBookPanel.tsx).
Recent trades: Columns Pair, Amount in, Amount out with header tooltips; hybrid badge title explains AMM + limit routing (TradesTable.tsx).
Docs / agents: docs/frontend.md (#trade-page-price-chart-invariants, #trade-page-market-context); skills/AGENTS_FRONTEND_TRADE_PAGE_LAYOUT.md, AGENTS_FRONTEND_PRICE_CHART.md, AGENTS_LOCALNET_TRADING_SWARM.md.

Verification checklist

/trade with indexer-backed pair: Last tracks newest tape price when trades exist; falls back to candle close when tape empty.
Order book subtitle + tooltip: expectation clear when swarm moves tape but book is empty.
Recent trades headers + hover HYBRID on hybrid fills.
/charts pair page: headline still sensible alongside indicators / fullscreen toolbar.
Frontend Vitest: cd frontend-dapp && npm run test -- --run (spot-check: PriceChart.test.tsx, TradesTable.test.tsx, chartHeadlinePrice.test.ts).

Leaving this issue open for QA.

@totdking — please verify when you can.

## Update (main) Implemented **#149** trade UX for CEX-style readability and merged to `main` (combined with chart overlay work from **#150** / **#151** in `PriceChart.tsx`). ### What changed - **Last price:** Beside **Price (USD)**, a **Last** line shows indexer tape USD when `tapeLastPriceUsd` is passed from `/trade` / `/charts`, otherwise the last candle close (`chartHeadlinePrice.ts`, `data-testid="trade-chart-headline-price"`). - **Order book:** Copy under the heading clarifies **open limit orders only** — pool / swarm fills stay on the tape (`OrderBookPanel.tsx`). - **Recent trades:** Columns **Pair**, **Amount in**, **Amount out** with header tooltips; **`hybrid`** badge `title` explains AMM + limit routing (`TradesTable.tsx`). - **Docs / agents:** `docs/frontend.md` (`#trade-page-price-chart-invariants`, `#trade-page-market-context`); `skills/AGENTS_FRONTEND_TRADE_PAGE_LAYOUT.md`, `AGENTS_FRONTEND_PRICE_CHART.md`, `AGENTS_LOCALNET_TRADING_SWARM.md`. ### Verification checklist - [ ] `/trade` with indexer-backed pair: **Last** tracks newest tape price when trades exist; falls back to candle close when tape empty. - [ ] Order book subtitle + tooltip: expectation clear when swarm moves tape but book is empty. - [ ] Recent trades headers + hover `HYBRID` on hybrid fills. - [ ] `/charts` pair page: headline still sensible alongside indicators / fullscreen toolbar. - [ ] Frontend Vitest: `cd frontend-dapp && npm run test -- --run` (spot-check: `PriceChart.test.tsx`, `TradesTable.test.tsx`, `chartHeadlinePrice.test.ts`). Leaving this issue **open** for QA. @totdking — please verify when you can.

PlasticDigits commented

2026-05-09 09:42:14 +00:00

(Migrated from gitlab.com)

mentioned in commit a153784cd3

mentioned in commit a153784cd3618551955b5af11c6eea1f7ba6235b

PlasticDigits commented

2026-05-09 09:42:29 +00:00

(Migrated from gitlab.com)

mentioned in issue #150

PlasticDigits commented

2026-05-27 12:23:24 +00:00

(Migrated from gitlab.com)

QA verification (issue #149) — passed

Verified on local stack (LocalTerra healthy, host Postgres :5432, indexer :3001, bot swarm 30/30, frontend http://127.0.0.1:5173).

Checklist

/trade Last price — EMBER/JADE pair shows headline Last 1.03055 (data-testid="trade-chart-headline-price") sourced from newest tape trade; tooltip explains tape vs candle fallback.
Order book scope — Subtitle under Order book: Resting limit orders only — AMM pool depth is not shown here… with matching title tooltip.
Recent trades columns — Headers Pair, Amount in, Amount out (replacing OFFER/RETURN/DIRECTION) with header tooltips; hybrid badge has title explaining AMM + limit routing.
/charts headline — OPAL/AMBER page shows Last 3.95168 beside Price (USD) with indicators/fullscreen toolbar intact.
Vitest — PriceChart.test.tsx, TradesTable.test.tsx, chartHeadlinePrice.test.ts: 27/27 passed.

No code changes required; implementation on main meets acceptance criteria C1–C4. Closing.

## QA verification (issue #149) — passed Verified on local stack (LocalTerra healthy, host Postgres :5432, indexer :3001, bot swarm 30/30, frontend `http://127.0.0.1:5173`). ### Checklist - [x] **`/trade` Last price** — EMBER/JADE pair shows headline `Last 1.03055` (`data-testid="trade-chart-headline-price"`) sourced from newest tape trade; tooltip explains tape vs candle fallback. - [x] **Order book scope** — Subtitle under Order book: *Resting limit orders only — AMM pool depth is not shown here…* with matching `title` tooltip. - [x] **Recent trades columns** — Headers `Pair`, `Amount in`, `Amount out` (replacing OFFER/RETURN/DIRECTION) with header tooltips; `hybrid` badge has `title` explaining AMM + limit routing. - [x] **`/charts` headline** — OPAL/AMBER page shows `Last 3.95168` beside Price (USD) with indicators/fullscreen toolbar intact. - [x] **Vitest** — `PriceChart.test.tsx`, `TradesTable.test.tsx`, `chartHeadlinePrice.test.ts`: 27/27 passed. No code changes required; implementation on `main` meets acceptance criteria C1–C4. Closing.

PlasticDigits (Migrated from gitlab.com) closed this issue

2026-05-27 12:23:40 +00:00

PlasticDigits commented

2026-05-29 03:13:21 +00:00

(Migrated from gitlab.com)

mentioned in issue #211