fix(frontend): missing useTokenBalance hook causes /trade tab to crash after clean node_modules reinstall #231

Closed
opened 2026-05-29 13:10:21 +00:00 by totdking · 6 comments
totdking commented 2026-05-29 13:10:21 +00:00 (Migrated from gitlab.com)
No description provided.
totdking commented 2026-05-29 13:50:08 +00:00 (Migrated from gitlab.com)

Issue Summary

The /trade page fails to load with a Vite import resolution error after running rm -rf node_modules && npm install. The import @/hooks/useTokenBalance referenced in useLimitLadderPlaceGates.ts points to a file that does not exist anywhere in the repository.


Reproduction Steps

  1. Check out commit 308a04a3c310a8f02e11bc3bb03a67ecff01b5f5
  2. Run rm -rf node_modules && npm install
  3. Run VITE_NETWORK=local npm run dev
  4. Navigate to the /trade tab

Expected Behavior

The /trade page loads without errors.


Actual Behavior

Vite throws a pre-transform error and the page fails to render:

[plugin:vite:import-analysis] Failed to resolve import "@/hooks/useTokenBalance"
from "src/hooks/useLimitLadderPlaceGates.ts". Does the file exist?

frontend-dapp/src/hooks/useLimitLadderPlaceGates.ts:13:32
  11 |  import { useTokenBalance } from "@/hooks/useTokenBalance";
     |                                   ^

The entire /trade tab is broken. Other tabs are unaffected.


Root Cause

useLimitLadderPlaceGates.ts was introduced in commit 8685909 with an import of useTokenBalance that was never created. The file src/hooks/useTokenBalance.ts has no entry in git history at any point. The hook useLimitOrderEscrowBalance already exists with the same signature (walletAddress, tokenAddr) and the same query key shape — it is the likely intended dependency.


Why It Only Surfaced After rm -rf node_modules

The error was silently masked until a clean npm install forced Vite to fully re-resolve all module imports from scratch. Prior runs with an existing node_modules cache did not trigger the transform for that specific module path.


Suggested Fix

Either create src/hooks/useTokenBalance.ts as a wrapper or re-export of useLimitOrderEscrowBalance, or update the import in useLimitLadderPlaceGates.ts to use useLimitOrderEscrowBalance directly.


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
Node v24.10.0 / npm 11.6.1
Vite 7.3.3
Commit checked out 308a04a3c310a8f02e11bc3bb03a67ecff01b5f5
Hook introduced in 8685909

Wallet / Device Details

  • Wallet: N/A — crash occurs before any wallet interaction
  • Page affected: /trade only

Severity / Impact

dev environment blocker. The /trade tab is completely non-functional after any clean install. The error is not visible until node_modules is wiped, so it could silently persist in CI or on a fresh machine checkout. Fix is low-effort: wire the existing useLimitOrderEscrowBalance hook in place of the missing one.

cc: @PlasticDigits

### Issue Summary The `/trade` page fails to load with a Vite import resolution error after running `rm -rf node_modules && npm install`. The import `@/hooks/useTokenBalance` referenced in `useLimitLadderPlaceGates.ts` points to a file that does not exist anywhere in the repository. --- ### Reproduction Steps 1. Check out commit `308a04a3c310a8f02e11bc3bb03a67ecff01b5f5` 2. Run `rm -rf node_modules && npm install` 3. Run `VITE_NETWORK=local npm run dev` 4. Navigate to the `/trade` tab --- ### Expected Behavior The `/trade` page loads without errors. --- ### Actual Behavior Vite throws a pre-transform error and the page fails to render: ``` [plugin:vite:import-analysis] Failed to resolve import "@/hooks/useTokenBalance" from "src/hooks/useLimitLadderPlaceGates.ts". Does the file exist? frontend-dapp/src/hooks/useLimitLadderPlaceGates.ts:13:32 11 | import { useTokenBalance } from "@/hooks/useTokenBalance"; | ^ ``` The entire `/trade` tab is broken. Other tabs are unaffected. --- ### Root Cause `useLimitLadderPlaceGates.ts` was introduced in commit `8685909` with an import of `useTokenBalance` that was never created. The file `src/hooks/useTokenBalance.ts` has no entry in git history at any point. The hook `useLimitOrderEscrowBalance` already exists with the same signature `(walletAddress, tokenAddr)` and the same query key shape — it is the likely intended dependency. --- ### Why It Only Surfaced After `rm -rf node_modules` The error was silently masked until a clean `npm install` forced Vite to fully re-resolve all module imports from scratch. Prior runs with an existing `node_modules` cache did not trigger the transform for that specific module path. --- ### Suggested Fix Either create `src/hooks/useTokenBalance.ts` as a wrapper or re-export of `useLimitOrderEscrowBalance`, or update the import in `useLimitLadderPlaceGates.ts` to use `useLimitOrderEscrowBalance` directly. --- ### 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` | | Node | v24.10.0 / npm 11.6.1 | | Vite | 7.3.3 | | Commit checked out | `308a04a3c310a8f02e11bc3bb03a67ecff01b5f5` | | Hook introduced in | `8685909` | --- ### Wallet / Device Details - **Wallet:** N/A — crash occurs before any wallet interaction - **Page affected:** `/trade` only --- ### Severity / Impact **dev environment blocker.** The `/trade` tab is completely non-functional after any clean install. The error is not visible until `node_modules` is wiped, so it could silently persist in CI or on a fresh machine checkout. Fix is low-effort: wire the existing `useLimitOrderEscrowBalance` hook in place of the missing one. cc: @PlasticDigits
PlasticDigits commented 2026-05-29 14:01:36 +00:00 (Migrated from gitlab.com)

mentioned in commit 543ca7008a

mentioned in commit 543ca7008a0d1286cc2efdd91116ab20a098cc26
PlasticDigits commented 2026-05-29 14:01:47 +00:00 (Migrated from gitlab.com)

Fix landed on main (543ca70)

Summary: useLimitLadderPlaceGates now imports useLimitOrderEscrowBalance directly (the hook that was always intended for limit escrow CW20 balance). useTokenBalance is a re-export only — no duplicated useQuery logic — so a clean rm -rf node_modules && npm install cannot hit a missing @/hooks/useTokenBalance module again.

Docs / agent playbooks: Invariants and cross-links added in docs/limit-orders.md, docs/frontend.md, and skills/AGENTS_LIMIT_ORDER_BATCH_LADDER.md (GitLab #231).

Regression test: frontend-dapp/src/hooks/__tests__/useTokenBalance.test.ts asserts useTokenBalance === useLimitOrderEscrowBalance.


Verification checklist

  • cd frontend-dapp && rm -rf node_modules && npm ci
  • npm test -- useTokenBalance limitOrderLadder
  • npm run build (or tsc -b && vite build) completes with no Failed to resolve import "@/hooks/useTokenBalance"
  • VITE_NETWORK=local npm run dev — open /limits, expand Ladder panel; page loads without Vite pre-transform errors
  • Connect wallet on ladder panel — escrow gate / Place button react to CW20 balance (shared tokenBalance cache with retail limit on /trade and /limits)

@brouie — please run the checklist above on a fresh checkout of main and confirm #231 is resolved. Leaving this issue open until verified.

/cc @PlasticDigits

## Fix landed on `main` (`543ca70`) **Summary:** `useLimitLadderPlaceGates` now imports [`useLimitOrderEscrowBalance`](frontend-dapp/src/hooks/useLimitOrderEscrowBalance.ts) directly (the hook that was always intended for limit escrow CW20 balance). [`useTokenBalance`](frontend-dapp/src/hooks/useTokenBalance.ts) is a **re-export only** — no duplicated `useQuery` logic — so a clean `rm -rf node_modules && npm install` cannot hit a missing `@/hooks/useTokenBalance` module again. **Docs / agent playbooks:** Invariants and cross-links added in `docs/limit-orders.md`, `docs/frontend.md`, and [`skills/AGENTS_LIMIT_ORDER_BATCH_LADDER.md`](skills/AGENTS_LIMIT_ORDER_BATCH_LADDER.md) (GitLab #231). **Regression test:** [`frontend-dapp/src/hooks/__tests__/useTokenBalance.test.ts`](frontend-dapp/src/hooks/__tests__/useTokenBalance.test.ts) asserts `useTokenBalance === useLimitOrderEscrowBalance`. --- ### Verification checklist - [ ] `cd frontend-dapp && rm -rf node_modules && npm ci` - [ ] `npm test -- useTokenBalance limitOrderLadder` - [ ] `npm run build` (or `tsc -b && vite build`) completes with no `Failed to resolve import "@/hooks/useTokenBalance"` - [ ] `VITE_NETWORK=local npm run dev` — open **`/limits`**, expand **Ladder** panel; page loads without Vite pre-transform errors - [ ] Connect wallet on ladder panel — escrow gate / Place button react to CW20 balance (shared `tokenBalance` cache with retail limit on `/trade` and `/limits`) --- @brouie — please run the checklist above on a fresh checkout of `main` and confirm #231 is resolved. Leaving this issue **open** until verified. /cc @PlasticDigits
totdking commented 2026-05-29 14:57:27 +00:00 (Migrated from gitlab.com)

Verification checklist

  • cd frontend-dapp && rm -rf node_modules && npm ci
  • npm test -- useTokenBalance limitOrderLadder
  • npm run build (or tsc -b && vite build) completes with no Failed to resolve import "@/hooks/useTokenBalance"
  • VITE_NETWORK=local npm run dev — open /limits, expand Ladder panel; page loads without Vite pre-transform errors
  • Connect wallet on ladder panel — escrow gate / Place button react to CW20 balance (shared tokenBalance cache with retail limit on /trade and /limits)

Good to go , looks clean to go

### Verification checklist * [x] `cd frontend-dapp && rm -rf node_modules && npm ci` * [x] `npm test -- useTokenBalance limitOrderLadder` * [x] `npm run build` (or `tsc -b && vite build`) completes with no `Failed to resolve import "@/hooks/useTokenBalance"` * [x] `VITE_NETWORK=local npm run dev` — open **`/limits`**, expand **Ladder** panel; page loads without Vite pre-transform errors * [x] Connect wallet on ladder panel — escrow gate / Place button react to CW20 balance (shared `tokenBalance` cache with retail limit on `/trade` and `/limits`) Good to go , looks clean to go
totdking commented 2026-05-29 15:08:47 +00:00 (Migrated from gitlab.com)

mentioned in issue #233

mentioned in issue #233
PlasticDigits (Migrated from gitlab.com) closed this issue 2026-05-29 15:13:29 +00:00
PlasticDigits commented 2026-06-01 04:19:02 +00:00 (Migrated from gitlab.com)

mentioned in issue #268

mentioned in issue #268
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
code/cl8y-dex-terraclassic#231
No description provided.