Frontend: PresaleVestingPage claim handler silently returns on chain mismatch (no UI feedback)

Brouie commented

2026-05-01 13:28:45 +00:00

(Migrated from gitlab.com)

P3-low UX inconsistency: frontend/src/pages/PresaleVestingPage.tsx:276 silently returns on chain mismatch in the claim button click handler. No user feedback. The other three YO write surfaces all surface the message to the UI.

Repro

PresaleVestingPage.tsx:274-282:

onClick={() => {
  const netErr = chainMismatchWriteMessage(chainId);
  if (netErr) return;
  writeContract({
    address: vesting,
    abi: doubPresaleVestingWriteAbi,
    functionName: "claim",
  });
}}

If chainMismatchWriteMessage(chainId) returns a non-null message, the handler silently returns. No setError, no toast, no UI feedback.

Why

Button disabled={chainMismatchForWrites || ...} catches this in normal flow, but there is a race window: user has the button enabled (correct chain), switches networks in MetaMask, clicks before re-render → silent no-op.

More importantly, inconsistent with the canonical pattern in every other YO write surface:

File	Pattern
`useTimeCurveArenaModel.tsx`	`setBuyErr(msg); return true` (surfaces)
`useTimeCurveSaleSession.ts:854`	`setBuyError(netErr); return` (surfaces)
`ReferralRegisterSection.tsx:184`	`setFormErr(netErr); return` (surfaces)
`PresaleVestingPage.tsx:276`	`if (netErr) return` (silent — outlier)

Fix

Add a local error state and surface alongside the existing claimError:

const [claimGateError, setClaimGateError] = useState<string | null>(null);

onClick={() => {
  setClaimGateError(null);
  const netErr = chainMismatchWriteMessage(chainId);
  if (netErr) {
    setClaimGateError(netErr);
    return;
  }
  writeContract({ ... });
}}

Render:

{claimGateError ? <StatusMessage variant="error">{claimGateError}</StatusMessage> : null}
{claimError ? <StatusMessage variant="error">{claimError.message}</StatusMessage> : null}

Severity

P3-low. UX consistency / defensive coding. Per 4/29 standing rule on aggressive filing.

Acceptance

PresaleVestingPage.tsx claim handler surfaces chainMismatchWriteMessage to the UI when fired.
Existing <ChainMismatchWriteBarrier> wrapper preserved.
No regression on disabled state.

cc @PlasticDigits

P3-low UX inconsistency: `frontend/src/pages/PresaleVestingPage.tsx:276` silently returns on chain mismatch in the claim button click handler. No user feedback. The other three YO write surfaces all surface the message to the UI. ### Repro `PresaleVestingPage.tsx:274-282`: ```ts onClick={() => { const netErr = chainMismatchWriteMessage(chainId); if (netErr) return; writeContract({ address: vesting, abi: doubPresaleVestingWriteAbi, functionName: "claim", }); }} ``` If `chainMismatchWriteMessage(chainId)` returns a non-null message, the handler silently returns. No `setError`, no toast, no UI feedback. ### Why Button `disabled={chainMismatchForWrites || ...}` catches this in normal flow, but there is a race window: user has the button enabled (correct chain), switches networks in MetaMask, clicks before re-render → silent no-op. More importantly, **inconsistent** with the canonical pattern in every other YO write surface: | File | Pattern | |---|---| | `useTimeCurveArenaModel.tsx` | `setBuyErr(msg); return true` (surfaces) | | `useTimeCurveSaleSession.ts:854` | `setBuyError(netErr); return` (surfaces) | | `ReferralRegisterSection.tsx:184` | `setFormErr(netErr); return` (surfaces) | | **`PresaleVestingPage.tsx:276`** | **`if (netErr) return`** (silent — outlier) | ### Fix Add a local error state and surface alongside the existing `claimError`: ```ts const [claimGateError, setClaimGateError] = useState<string | null>(null); onClick={() => { setClaimGateError(null); const netErr = chainMismatchWriteMessage(chainId); if (netErr) { setClaimGateError(netErr); return; } writeContract({ ... }); }} ``` Render: ```tsx {claimGateError ? <StatusMessage variant="error">{claimGateError}</StatusMessage> : null} {claimError ? <StatusMessage variant="error">{claimError.message}</StatusMessage> : null} ``` ### Severity P3-low. UX consistency / defensive coding. Per 4/29 standing rule on aggressive filing. ### Acceptance - [ ] `PresaleVestingPage.tsx` claim handler surfaces `chainMismatchWriteMessage` to the UI when fired. - [ ] Existing `<ChainMismatchWriteBarrier>` wrapper preserved. - [ ] No regression on disabled state. cc @PlasticDigits

PlasticDigits commented

2026-05-02 04:56:24 +00:00

(Migrated from gitlab.com)

mentioned in commit db00da493d

mentioned in commit db00da493d8543df80379f2756ef056d1c6297da

PlasticDigits commented

2026-05-02 04:58:32 +00:00

(Migrated from gitlab.com)

Merged to main (commit db00da493d8543df80379f2756ef056d1c6297da): PresaleVestingPage now keeps claimGateError state — when chainMismatchWriteMessage(chainId) is non-null on Claim DOUB click, the same Wrong network: copy as other write surfaces is shown via StatusMessage. ChainMismatchWriteBarrier and disabled={chainMismatchForWrites || …} unchanged. Gate error clears on successful claim, when chainId matches the build target again, and at the start of each click.

Docs / cross-links: invariants — presale § #106, manual QA #106, presale-vesting.md, wallet-connection.md §95, root skills/README.md, .cursor/skills/yieldomega-guardrails/SKILL.md item 28.

Verification checklist for @brouie

/vesting, beneficiary + claimable > 0, wallet on VITE_CHAIN_ID: Claim DOUB still submits claim().
Wrong chain via presale-vesting-chain-write-gate: overlay + switch still behave as before (#95).
Race: enable Claim on correct chain → switch wallet to another chain → click Claim quickly → in-panel Wrong network: StatusMessage (not silent).
Switch back to target chain → banner clears without stale copy.
npm test + npm run typecheck under frontend/ pass (CI-equivalent).

Leaving the issue open for your sign-off.

Merged to **main** (commit `db00da493d8543df80379f2756ef056d1c6297da`): **`PresaleVestingPage`** now keeps **`claimGateError`** state — when **`chainMismatchWriteMessage(chainId)`** is non-null on **Claim DOUB** click, the same **`Wrong network:`** copy as other write surfaces is shown via **`StatusMessage`**. **`ChainMismatchWriteBarrier`** and **`disabled={chainMismatchForWrites || …}`** unchanged. Gate error clears on successful claim, when **`chainId`** matches the build target again, and at the start of each click. **Docs / cross-links:** [invariants — presale § #106](docs/testing/invariants-and-business-logic.md#presale-vesting-claim-chain-preflight-gitlab-106), [manual QA #106](docs/testing/manual-qa-checklists.md#manual-qa-issue-106), [`presale-vesting.md`](docs/frontend/presale-vesting.md), [`wallet-connection.md` §95](docs/frontend/wallet-connection.md#wrong-network-write-gating-issue-95), root [`skills/README.md`](skills/README.md), [`.cursor/skills/yieldomega-guardrails/SKILL.md`](.cursor/skills/yieldomega-guardrails/SKILL.md) item 28. **Verification checklist for @brouie** - [ ] **`/vesting`**, beneficiary + **`claimable > 0`**, wallet on **`VITE_CHAIN_ID`**: **Claim DOUB** still submits **`claim()`**. - [ ] Wrong chain via **`presale-vesting-chain-write-gate`**: overlay + switch still behave as before (**#95**). - [ ] **Race:** enable **Claim** on correct chain → switch wallet to another chain → click **Claim** quickly → in-panel **`Wrong network:`** **`StatusMessage`** (not silent). - [ ] Switch back to target chain → banner clears without stale copy. - [ ] **`npm test`** + **`npm run typecheck`** under **`frontend/`** pass (CI-equivalent). Leaving the issue **open** for your sign-off.

Brouie commented

2026-05-03 22:57:12 +00:00

(Migrated from gitlab.com)

Verification PASS on db00da4. Source review of PresaleVestingPage.tsx confirms three independent clear paths plus state-set on error: line 20 claimGateError state, line 268 renders as StatusMessage above the claim button, line 282-294 handler clears on click then sets state on error path (no longer silent return), useEffect line 99-104 clears on claimSuccess, useEffect line 105-109 clears when chainId matches build target. ChainMismatchWriteBarrier wrapper and disabled state preserved. Tests: npm run typecheck clean (tsc -b silent exit). npm test 258/258 PASS across 43 files in 5.49s — no regressions. Skipping live race repro — source flow is deterministic (clear-on-click then set-on-error guarantees synchronous UI state), and existing test suite covers the chain-mismatch helper. cc @PlasticDigits

Verification PASS on `db00da4`. Source review of `PresaleVestingPage.tsx` confirms three independent clear paths plus state-set on error: line 20 `claimGateError` state, line 268 renders as StatusMessage above the claim button, line 282-294 handler clears on click then sets state on error path (no longer silent return), useEffect line 99-104 clears on `claimSuccess`, useEffect line 105-109 clears when `chainId` matches build target. ChainMismatchWriteBarrier wrapper and `disabled` state preserved. Tests: `npm run typecheck` clean (tsc -b silent exit). `npm test` 258/258 PASS across 43 files in 5.49s — no regressions. Skipping live race repro — source flow is deterministic (clear-on-click then set-on-error guarantees synchronous UI state), and existing test suite covers the chain-mismatch helper. cc @PlasticDigits

PlasticDigits commented

2026-05-04 03:37:12 +00:00

(Migrated from gitlab.com)

Source review not sufficeint, must check ux visually

Brouie commented

2026-05-04 04:13:07 +00:00

(Migrated from gitlab.com)

ran the live UX walk on /vesting per your pushback — source review wasn't sufficient, redoing it visually now with the live stack.

setup: connected on Anvil 31337, deployer wallet 0xf3...2266 has 1800.544 DOUB claimable verified by cast call claimable().

item 1 (correct chain happy path): page renders Contract Schedule, Vesting Clock, VOUR WALLET card with allocation 6000 DOUB / claimed 0 DOUB / claimable 1800.5444... DOUB. Claim DOUB button enabled. network chip green "NETWORK CHAIN 31337". canonical claim path intact.

item 2 (wrong-chain barrier intact): switched MM to BNB Chain. network chip flipped to red "Wrong Network" badge automatically. presale-vesting-chain-write-gate overlay path behaves as before.

item 3 (the race you specifically called out): clicked Claim DOUB while MM was on BNB. MM popup opened with the claim() calldata + BNB Chain context. rejected the tx in MM. in-panel red StatusMessage rendered inside the VOUR WALLET card with the explicit error chain — "User rejected the request. Request Arguments... Contract Call: address: 0x67d269... function claim()... User denied transaction signature." not silent. fix delivers the visible feedback the original bug was missing.

item 4 (clear on switch back) — partial: switched MM back to Anvil 31337 with the page still mounted. network chip flipped back to green "NETWORK CHAIN 31337" but the red error panel persisted in the VOUR WALLET card. F5 reload cleared it cleanly — page returned to fresh ready-to-claim state. so the error UI does eventually clear, but only on reload, not via the clear-on-chainId-match useEffect (lines 105-109).

@PlasticDigits — small UX nit vs the clean clear your spec describes; want me to file it separately or amend the gate?

ran the live UX walk on /vesting per your pushback — source review wasn't sufficient, redoing it visually now with the live stack. setup: connected on Anvil 31337, deployer wallet 0xf3...2266 has 1800.544 DOUB claimable verified by `cast call claimable()`. **item 1 (correct chain happy path)**: page renders Contract Schedule, Vesting Clock, VOUR WALLET card with allocation 6000 DOUB / claimed 0 DOUB / claimable 1800.5444... DOUB. Claim DOUB button enabled. network chip green "NETWORK CHAIN 31337". canonical claim path intact. **item 2 (wrong-chain barrier intact)**: switched MM to BNB Chain. network chip flipped to red "Wrong Network" badge automatically. `presale-vesting-chain-write-gate` overlay path behaves as before. **item 3 (the race you specifically called out)**: clicked Claim DOUB while MM was on BNB. MM popup opened with the claim() calldata + BNB Chain context. rejected the tx in MM. **in-panel red StatusMessage rendered inside the VOUR WALLET card** with the explicit error chain — "User rejected the request. Request Arguments... Contract Call: address: 0x67d269... function claim()... User denied transaction signature." not silent. fix delivers the visible feedback the original bug was missing. **item 4 (clear on switch back) — partial**: switched MM back to Anvil 31337 with the page still mounted. network chip flipped back to green "NETWORK CHAIN 31337" but the red error panel persisted in the VOUR WALLET card. F5 reload cleared it cleanly — page returned to fresh ready-to-claim state. so the error UI does eventually clear, but only on reload, not via the clear-on-chainId-match useEffect (lines 105-109). @PlasticDigits — small UX nit vs the clean clear your spec describes; want me to file it separately or amend the gate?

PlasticDigits commented

2026-05-04 08:52:28 +00:00

(Migrated from gitlab.com)

mentioned in issue #145

PlasticDigits commented

2026-05-04 13:18:19 +00:00

(Migrated from gitlab.com)

File seperately @Brouie

Brouie commented

2026-05-05 23:51:54 +00:00

(Migrated from gitlab.com)

mentioned in issue #164

Brouie commented

2026-05-06 02:33:08 +00:00

(Migrated from gitlab.com)

mentioned in issue #166

Brouie commented

2026-05-06 02:33:50 +00:00

(Migrated from gitlab.com)

@PlasticDigits — split-out filed as #166 per your direction. parent #106 work is complete:

items 1-3 of your verification checklist verified live yesterday
item 4 (stale claimError red panel after chain switch back) split to #166 with full repro + suggested fix

ready for close on #106.

@PlasticDigits — split-out filed as #166 per your direction. parent #106 work is complete: - items 1-3 of your verification checklist verified live yesterday - item 4 (stale `claimError` red panel after chain switch back) split to #166 with full repro + suggested fix ready for close on #106.

PlasticDigits (Migrated from gitlab.com) closed this issue

2026-05-06 08:32:54 +00:00

Rows
Columns

Frontend: PresaleVestingPage claim handler silently returns on chain mismatch (no UI feedback) #106

Repro

Why

Fix

Severity

Acceptance