code/cl8y-dex-terraclassic

Fork 0

UI: Swap route preview shows duplicate route labels with no explanation — "ROUTE (INDEXER)" and "ROUTE" shown simultaneously with identical paths #158

New issue

Closed

opened 2026-05-11 17:05:26 +00:00 by totdking · 18 comments

totdking commented

2026-05-11 17:05:26 +00:00

(Migrated from gitlab.com)

No description provided.

totdking commented

2026-05-11 17:10:08 +00:00

(Migrated from gitlab.com)

Issue Summary

The swap route preview panel displays two route lines with the same token path but different labels: ROUTE (INDEXER) and ROUTE. No tooltip, label, or copy explains the difference between the two. A trader has no way to know which route is active, which one will execute, or what the distinction means.

Developer confirmed the router selects the most optimal route — the dual display is the UX gap.

Reproduction Steps

Navigate to / (Swap page)
Select a token pair that resolves to a multi-hop route (e.g. CORAL → SLATE)
Enter an amount
Observe the route preview section below the quote — two lines appear:
- ROUTE (INDEXER): CORAL → EMBER → COBALT → SLATE
- ROUTE: CORAL → EMBER → COBALT → SLATE
Note that both lines show the same path with no explanation of the difference

Expected Behavior

Either show a single route with a clear label, or if both routes are intentionally shown (e.g. indexer-suggested vs on-chain simulated), label them with a brief explanation so a trader understands which one executes.

Screen shot

Ember -> Ruby ( 3 hops)

{width=605 height=600}

2. Ember -> Topaz (3 hops) with a different route{width=900 height=509}

Environment Details

Field	Value
OS	macOS (Apple M1 Pro, 14-inch)
Browser	Google Chrome (desktop)
Network	`localterra` (local Docker)
Frontend	`VITE_NETWORK=local npm run dev` at `localhost:3000`

Wallet / Device Details

Wallet: Keplr browser extension
Wallet state: Connected — terra1...sl7cvv
Pair tested: CORAL → SLATE

Severity / Impact

P2 Polish. No funds at risk, but the duplicate route display with no explanation is confusing for any trader trying to verify their execution path. Found on the Swap page (/) during exploratory testing.

cc : @PlasticDigits

### Issue Summary The swap route preview panel displays two route lines with the same token path but different labels: `ROUTE (INDEXER)` and `ROUTE`. No tooltip, label, or copy explains the difference between the two. A trader has no way to know which route is active, which one will execute, or what the distinction means. Developer confirmed the router selects the most optimal route — the dual display is the UX gap. --- ### Reproduction Steps 1. Navigate to `/` (Swap page) 2. Select a token pair that resolves to a multi-hop route (e.g. CORAL → SLATE) 3. Enter an amount 4. Observe the route preview section below the quote — two lines appear: - `ROUTE (INDEXER): CORAL → EMBER → COBALT → SLATE` - `ROUTE: CORAL → EMBER → COBALT → SLATE` 5. Note that both lines show the same path with no explanation of the difference --- ### Expected Behavior Either show a single route with a clear label, or if both routes are intentionally shown (e.g. indexer-suggested vs on-chain simulated), label them with a brief explanation so a trader understands which one executes. --- ## Screen shot 1. Ember -\> Ruby ( 3 hops) ![image.png](/uploads/538f8fe4baf2cb24f215f1244ada82a6/image.png){width=605 height=600} 2\. Ember -\> Topaz (3 hops) with a different route![image.png](/uploads/099d4417a26f417605fb745f07fa4a76/image.png){width=900 height=509} --- ### Environment Details | Field | Value | |-------|-------| | OS | macOS (Apple M1 Pro, 14-inch) | | Browser | Google Chrome (desktop) | | Network | `localterra` (local Docker) | | Frontend | `VITE_NETWORK=local npm run dev` at `localhost:3000` | --- ### Wallet / Device Details - **Wallet:** Keplr browser extension - **Wallet state:** Connected — `terra1...sl7cvv` - **Pair tested:** CORAL → SLATE --- ### Severity / Impact **P2 Polish.** No funds at risk, but the duplicate route display with no explanation is confusing for any trader trying to verify their execution path. Found on the Swap page (`/`) during exploratory testing. cc : @PlasticDigits

PlasticDigits commented

2026-05-13 06:42:21 +00:00

(Migrated from gitlab.com)

mentioned in commit 2fb10a4b97

mentioned in commit 2fb10a4b97cc5a2ed32c7b40f8c3549fccbc7e7d

PlasticDigits commented

2026-05-13 06:42:21 +00:00

(Migrated from gitlab.com)

mentioned in commit e01e9a4a22

mentioned in commit e01e9a4a22fea9cdfd1baef46da8d0afa4ee8e78

PlasticDigits commented

2026-05-13 06:42:38 +00:00

(Migrated from gitlab.com)

Update (merged to `main`)

Implemented GitLab #158: the Swap page now shows a single Route row inside the same trade summary card as Price impact and Min received. Removed the separate Quote source strip and the duplicate Route (indexer) vs Route blocks. The path follows submit precedence (indexer `router_operations` when present, else client BFS / native / direct).

Code: `frontend-dapp/src/utils/swapRouteDisplay.ts` (`computeSwapRouteDisplay`), `SwapPage.tsx` (`data-testid="swap-route-summary"`).

Docs / agents: `docs/swap-max-spread-ux.md` (invariant #5), `docs/frontend.md`, `docs/indexer-invariants.md`, `skills/AGENTS_FRONTEND_SWAP_ROUTE_DISPLAY.md`.

@totdking — please verify when you have a moment.

Verification checklist

Open `/` Swap, pick a multi-hop CW20 pair where indexer + client graph both resolve (e.g. CORAL → SLATE style path).
Confirm one Route line in the trade summary grid (no second route card above it, no Quote source: line).
Confirm Route sits with Price impact / Min received (same `card-neo` block).
Optional: submit a tiny swap on localnet and confirm the on-chain hop sequence matches the displayed symbols.

Issue left open pending your sign-off.

## Update (merged to \`main\`) Implemented **GitLab #158**: the Swap page now shows a **single** **Route** row inside the same **trade summary** card as **Price impact** and **Min received**. Removed the separate **Quote source** strip and the duplicate **Route (indexer)** vs **Route** blocks. The path follows **submit precedence** (indexer \`router_operations\` when present, else client BFS / native / direct). **Code:** \`frontend-dapp/src/utils/swapRouteDisplay.ts\` (\`computeSwapRouteDisplay\`), \`SwapPage.tsx\` (\`data-testid="swap-route-summary"\`). **Docs / agents:** \`docs/swap-max-spread-ux.md\` (invariant #5), \`docs/frontend.md\`, \`docs/indexer-invariants.md\`, \`skills/AGENTS_FRONTEND_SWAP_ROUTE_DISPLAY.md\`. @totdking — please verify when you have a moment. ### Verification checklist - [ ] Open \`/\` Swap, pick a multi-hop CW20 pair where indexer + client graph both resolve (e.g. CORAL → SLATE style path). - [ ] Confirm **one** **Route** line in the trade summary grid (no second route card above it, no **Quote source:** line). - [ ] Confirm **Route** sits with **Price impact** / **Min received** (same \`card-neo\` block). - [ ] Optional: submit a tiny swap on localnet and confirm the on-chain hop sequence matches the displayed symbols. Issue left **open** pending your sign-off.

PlasticDigits commented

2026-05-13 06:43:00 +00:00

(Migrated from gitlab.com)

mentioned in commit 9c184b8fe9

mentioned in commit 9c184b8fe9848cc96348da0f35767b8dea49b39a

PlasticDigits commented

2026-05-27 05:15:51 +00:00

(Migrated from gitlab.com)

mentioned in commit cd6e20648c

mentioned in commit cd6e20648c83dc7256e8637aa6f8f7d66e5be47c

PlasticDigits commented

2026-05-27 05:15:51 +00:00

(Migrated from gitlab.com)

mentioned in commit cf167504ef

mentioned in commit cf167504eff0a140e1052de5c78f0bc8ea72221b

PlasticDigits commented

2026-05-27 05:15:52 +00:00

(Migrated from gitlab.com)

Verified and closed

Verified GitLab #158 against the acceptance checklist on local stack (LocalTerra, host Postgres :5432, indexer :3001, frontend :3000, bot swarm 30/30).

Verification checklist

Open / Swap, multi-hop CW20 pair (EMBER → TOPAZ, 3-hop via JADE) — indexer + client graph both resolve.
One Route line in the trade summary grid (data-testid="swap-route-summary") — no duplicate Route (indexer) row, no Quote source: strip.
Route sits with Price impact / Min received in the same trade summary card.
Optional: quote at 0.001 EMBER → TOPAZ showed route EMBER → JADE → TOPAZ, 0.00% price impact, SWAP enabled (on-chain submit not re-run in this pass; UI path matches submit precedence via computeSwapRouteDisplay).

Fix already on main

Core UX fix was merged earlier (computeSwapRouteDisplay, single route row in SwapPage.tsx).

Additional fix in this pass

Updated stale E2E test hybrid-swap.spec.ts that still asserted removed Quote source: copy — now asserts single swap-route-summary row per #158 invariant.

Merged to main as test(e2e): align hybrid-swap route assertion with #158 single-route UX.

## Verified and closed Verified GitLab #158 against the acceptance checklist on local stack (LocalTerra, host Postgres :5432, indexer :3001, frontend :3000, bot swarm 30/30). ### Verification checklist - [x] Open `/` Swap, multi-hop CW20 pair (EMBER → TOPAZ, 3-hop via JADE) — indexer + client graph both resolve. - [x] **One** **Route** line in the trade summary grid (`data-testid="swap-route-summary"`) — no duplicate **Route (indexer)** row, no **Quote source:** strip. - [x] **Route** sits with **Price impact** / **Min received** in the same trade summary card. - [x] Optional: quote at 0.001 EMBER → TOPAZ showed route `EMBER → JADE → TOPAZ`, 0.00% price impact, SWAP enabled (on-chain submit not re-run in this pass; UI path matches submit precedence via `computeSwapRouteDisplay`). ### Fix already on main Core UX fix was merged earlier (`computeSwapRouteDisplay`, single route row in `SwapPage.tsx`). ### Additional fix in this pass Updated stale E2E test `hybrid-swap.spec.ts` that still asserted removed **Quote source:** copy — now asserts single `swap-route-summary` row per #158 invariant. Merged to `main` as `test(e2e): align hybrid-swap route assertion with #158 single-route UX`.

PlasticDigits (Migrated from gitlab.com) closed this issue

2026-05-27 05:15:56 +00:00

PlasticDigits commented

2026-05-31 09:57:14 +00:00

(Migrated from gitlab.com)

mentioned in issue #245