code/cl8y-dex-terraclassic

Fork 0

W7-C2: Bid/Ask side selector sluggish — radio switch does not respond immediately on click #153

New issue

Closed

opened 2026-05-11 12:40:02 +00:00 by totdking · 12 comments

totdking commented

2026-05-11 12:40:02 +00:00

(Migrated from gitlab.com)

No description provided.

totdking commented

2026-05-11 12:43:48 +00:00

(Migrated from gitlab.com)

Issue Summary

On the /trade page, switching between the Bid (CORAL) and Ask (EMBER) radio buttons in the Place Limit panel feels sticky. The toggle does not switch immediately on click — it visually holds before registering the new selection. The form logic updates correctly once the switch takes effect (amount label and balance both reflect the new side), but the interaction itself feels unresponsive and would undermine trust for a fast-moving trader.

Reproduction Steps

Complete full local setup (LocalTerra running, contracts deployed, indexer running, frontend running)
Connect a Station wallet configured for localterra
Navigate to /trade and select any pair (tested: EMBER / CORAL)
In the Place Limit panel, click Bid (CORAL) — confirm it is selected
Click Ask (EMBER) — observe the switch behaviour
Repeat several times rapidly, alternating between Bid and Ask
Note the visual delay or hold before the radio selection updates

Expected Behavior

Clicking either radio button should switch the active side immediately with no perceptible delay. The form fields (Amount label, Balance, token context) should update in the same render cycle.

Actual Behavior

The radio button switch hesitates — the selected state does not update immediately on click. The form eventually reflects the correct side, but the lag creates uncertainty about whether the click registered. Fast alternation between Bid and Ask makes the sluggishness more pronounced.

Environment Details

Field	Value
OS	macOS (Apple M1 Pro, 14-inch)
Browser	Google Chrome (desktop)
Viewport	~1440px desktop
Network	`localterra` (local Docker)
Frontend	`VITE_NETWORK=local npm run dev` at `localhost:3000`
Indexer	Running (`make indexer-dev`)
Contracts	Deployed via `make deploy-local`

Wallet / Device Details

Wallet: Station browser extension
Wallet state: Connected — terra1...sl7cvv
Pair tested: EMBER / CORAL (terra146...c9mjav)

Screenshots / Recordings

See attached screen recording showing the Bid/Ask radio toggle sluggishness when switching sides.

Severity / Impact

P2 Polish. No funds are at risk and the correct side is applied after the delay. However, a sticky side selector on the order form is a trust issue — a trader who clicks Ask and sees no immediate response may click again, potentially in the wrong direction. The radio click target is also small, compounding the perceived unresponsiveness. Found under W7-C2 (Side selector — Interactivity dimension).

cc: @PlasticDigits

### Issue Summary On the `/trade` page, switching between the **Bid (CORAL)** and **Ask (EMBER)** radio buttons in the Place Limit panel feels sticky. The toggle does not switch immediately on click — it visually holds before registering the new selection. The form logic updates correctly once the switch takes effect (amount label and balance both reflect the new side), but the interaction itself feels unresponsive and would undermine trust for a fast-moving trader. --- ### Reproduction Steps 1. Complete full local setup (LocalTerra running, contracts deployed, indexer running, frontend running) 2. Connect a Station wallet configured for localterra 3. Navigate to `/trade` and select any pair (tested: EMBER / CORAL) 4. In the Place Limit panel, click **Bid (CORAL)** — confirm it is selected 5. Click **Ask (EMBER)** — observe the switch behaviour 6. Repeat several times rapidly, alternating between Bid and Ask 7. Note the visual delay or hold before the radio selection updates --- ### Expected Behavior Clicking either radio button should switch the active side immediately with no perceptible delay. The form fields (Amount label, Balance, token context) should update in the same render cycle. --- ### Actual Behavior The radio button switch hesitates — the selected state does not update immediately on click. The form eventually reflects the correct side, but the lag creates uncertainty about whether the click registered. Fast alternation between Bid and Ask makes the sluggishness more pronounced. --- ### Environment Details | Field | Value | |-------|-------| | OS | macOS (Apple M1 Pro, 14-inch) | | Browser | Google Chrome (desktop) | | Viewport | \~1440px desktop | | Network | `localterra` (local Docker) | | Frontend | `VITE_NETWORK=local npm run dev` at `localhost:3000` | | Indexer | Running (`make indexer-dev`) | | Contracts | Deployed via `make deploy-local` | --- ### Wallet / Device Details - **Wallet:** Station browser extension - **Wallet state:** Connected — `terra1...sl7cvv` - **Pair tested:** EMBER / CORAL (`terra146...c9mjav`) --- ### Screenshots / Recordings > See attached screen recording showing the Bid/Ask radio toggle sluggishness when switching sides. ![Screen Recording 2026-05-11 at 13.31.58.mov](/uploads/a6afe0f61538c1e2056c2f6e43fc286a/Screen_Recording_2026-05-11_at_13.31.58.mov) --- ### Severity / Impact **P2 Polish.** No funds are at risk and the correct side is applied after the delay. However, a sticky side selector on the order form is a trust issue — a trader who clicks Ask and sees no immediate response may click again, potentially in the wrong direction. The radio click target is also small, compounding the perceived unresponsiveness. Found under **W7-C2** (Side selector — Interactivity dimension). cc: @PlasticDigits

totdking commented

2026-05-11 17:31:47 +00:00

(Migrated from gitlab.com)

mentioned in issue #116

PlasticDigits commented

2026-05-12 07:48:03 +00:00

(Migrated from gitlab.com)

mentioned in commit 62875666ab

mentioned in commit 62875666abcbe594219c106017592c7405c22643

PlasticDigits commented

2026-05-12 07:48:33 +00:00

(Migrated from gitlab.com)

mentioned in issue #154

PlasticDigits commented

2026-05-12 07:49:02 +00:00

(Migrated from gitlab.com)

mentioned in commit 86320d088a

mentioned in commit 86320d088a32cc6ed922ccba79ce95164086b74e

PlasticDigits commented

2026-05-12 07:49:25 +00:00

(Migrated from gitlab.com)

Update (W7-C2 / #153)

Implemented a shared LimitOrderBidAskSideSelector: WAI-ARIA radiogroup with two role="radio" <button type="button"> controls using existing tab-neo / tab-neo-active / tab-neo-inactive styles (larger hit targets, no native controlled <input type="radio">). Wired into TradeOrderTicket (idPrefix="trade-ticket", compact) and LimitOrdersPage (idPrefix="limit-orders") above the limit price field so it composes with GitLab #154 (LimitOrderPlaceLimitHeading + LimitOrderPriceInputWithContext).

Docs / agent playbooks: docs/frontend.md § Limit place — Bid / Ask side control; new skill skills/AGENTS_FRONTEND_LIMIT_ORDER_SIDE_SELECTOR.md; cross-links in skills/AGENTS_FRONTEND_TRADE_PAGE_LAYOUT.md and skills/AGENTS_FRONTEND_LIMIT_ORDER_PRICE.md.

Tests run: vitest run on LimitOrderBidAskSideSelector.test.tsx and TradePage.test.tsx; tsc -b + vite build. Playwright global setup needs LocalTerra LCD + .env.local (not exercised here).

Verification checklist

/trade with a pair selected: Bid / Ask toggles update active tab styling on first click (no “stuck” native radio).
Same on /limits after choosing a pair.
Amount label and Balance row switch escrow token when side changes (token1 for Bid, token0 for Ask).
Keyboard: Tab into the side control; ArrowRight / ArrowLeft moves selection and focus; Home (from Ask) → Bid; End (from Bid) → Ask.
Focus ring visible when tabbing with keyboard (:focus-visible on tab buttons).
#154 behaviour still intact: price context / deviation / place guard with indexer pair + tape.

Requesting QA on the above — @totdking please confirm the trade ticket feels snappy on your setup (Chrome + Station, localterra).

Issue left open until you sign off.

## Update (W7-C2 / #153) Implemented a shared **`LimitOrderBidAskSideSelector`**: WAI-ARIA **`radiogroup`** with two **`role="radio"`** `<button type="button">` controls using existing **`tab-neo` / `tab-neo-active` / `tab-neo-inactive`** styles (larger hit targets, no native controlled `<input type="radio">`). Wired into **`TradeOrderTicket`** (`idPrefix="trade-ticket"`, compact) and **`LimitOrdersPage`** (`idPrefix="limit-orders"`) **above** the limit price field so it composes with GitLab **#154** (`LimitOrderPlaceLimitHeading` + `LimitOrderPriceInputWithContext`). **Docs / agent playbooks:** `docs/frontend.md` § [Limit place — Bid / Ask side control](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/docs/frontend.md#limit-place-bid-ask-side); new skill [`skills/AGENTS_FRONTEND_LIMIT_ORDER_SIDE_SELECTOR.md`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/skills/AGENTS_FRONTEND_LIMIT_ORDER_SIDE_SELECTOR.md); cross-links in [`skills/AGENTS_FRONTEND_TRADE_PAGE_LAYOUT.md`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/skills/AGENTS_FRONTEND_TRADE_PAGE_LAYOUT.md) and [`skills/AGENTS_FRONTEND_LIMIT_ORDER_PRICE.md`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/skills/AGENTS_FRONTEND_LIMIT_ORDER_PRICE.md). **Tests run:** `vitest run` on `LimitOrderBidAskSideSelector.test.tsx` and `TradePage.test.tsx`; `tsc -b` + `vite build`. Playwright global setup needs LocalTerra LCD + `.env.local` (not exercised here). ### Verification checklist - [ ] `/trade` with a pair selected: **Bid** / **Ask** toggles update **active tab styling** on first click (no “stuck” native radio). - [ ] Same on **`/limits`** after choosing a pair. - [ ] **Amount** label and **Balance** row switch escrow token when side changes (token1 for Bid, token0 for Ask). - [ ] **Keyboard:** Tab into the side control; **ArrowRight** / **ArrowLeft** moves selection and focus; **Home** (from Ask) → Bid; **End** (from Bid) → Ask. - [ ] **Focus ring** visible when tabbing with keyboard (`:focus-visible` on tab buttons). - [ ] **#154 behaviour** still intact: price context / deviation / place guard with indexer pair + tape. Requesting QA on the above — @totdking please confirm the trade ticket feels snappy on your setup (Chrome + Station, localterra). Issue left **open** until you sign off.

PlasticDigits commented

2026-05-12 07:55:39 +00:00

(Migrated from gitlab.com)

mentioned in commit 3ede6ca8de

mentioned in commit 3ede6ca8dedb48293053e75337c138a42fc57119

PlasticDigits commented

2026-05-12 07:56:03 +00:00

(Migrated from gitlab.com)

mentioned in issue #152

PlasticDigits commented

2026-05-27 04:44:58 +00:00

(Migrated from gitlab.com)

QA verification complete (W7-C2 / #153)

Verified on local stack: LocalTerra healthy, host Postgres :5432, indexer :3001, frontend :3000, bot swarm 30/30.

Verification checklist

/trade (EMBER/CORAL): Bid/Ask toggles update active tab styling immediately on first click — no stuck native radio lag.
/limits (EMBER/CORAL after pair select): same immediate toggle behaviour.
Amount label + Balance row switch escrow token on side change (Bid → CORAL/token1, Ask → EMBER/token0).
Keyboard: ArrowRight/ArrowLeft move selection + focus; Home (from Ask) → Bid; End (from Bid) → Ask.
Focus ring: side buttons use tab-neo with :focus-visible ring (see frontend-dapp/src/index.css).
#154 intact: price context (last trade, vs reference %, headline-scaled USD) and place guard (non-crossing spread message) still work with indexer pair + tape.

Optional (rapid alternation)

Rapid Bid ↔ Ask clicks on /trade — each click switches active styling and amount label in the same interaction with no perceptible hold.

Tests

vitest run — LimitOrderBidAskSideSelector.test.tsx (3/3), TradePage.test.tsx (15/15).

No additional code changes required; existing LimitOrderBidAskSideSelector implementation resolves the sluggish native-radio behaviour. Closing as verified.

## QA verification complete (W7-C2 / #153) Verified on local stack: LocalTerra healthy, host Postgres :5432, indexer :3001, frontend :3000, bot swarm 30/30. ### Verification checklist - [x] **`/trade`** (EMBER/CORAL): Bid/Ask toggles update **active tab styling** immediately on first click — no stuck native radio lag. - [x] **`/limits`** (EMBER/CORAL after pair select): same immediate toggle behaviour. - [x] **Amount label + Balance row** switch escrow token on side change (Bid → CORAL/token1, Ask → EMBER/token0). - [x] **Keyboard:** ArrowRight/ArrowLeft move selection + focus; **Home** (from Ask) → Bid; **End** (from Bid) → Ask. - [x] **Focus ring:** side buttons use `tab-neo` with `:focus-visible` ring (see `frontend-dapp/src/index.css`). - [x] **#154 intact:** price context (last trade, vs reference %, headline-scaled USD) and place guard (non-crossing spread message) still work with indexer pair + tape. ### Optional (rapid alternation) - [x] Rapid Bid ↔ Ask clicks on `/trade` — each click switches active styling and amount label in the same interaction with no perceptible hold. ### Tests - `vitest run` — `LimitOrderBidAskSideSelector.test.tsx` (3/3), `TradePage.test.tsx` (15/15). No additional code changes required; existing `LimitOrderBidAskSideSelector` implementation resolves the sluggish native-radio behaviour. Closing as verified.

PlasticDigits (Migrated from gitlab.com) closed this issue

2026-05-27 04:45:00 +00:00

PlasticDigits commented

2026-08-15 12:19:49 +00:00

(Migrated from gitlab.com)

mentioned in issue #524