[sahilc0]

Summary

• Aligns the send form fields with the draft redesign prototype by moving shared form fields from the gray Shadow wrapper to the draft input-shell surface.
• Ports the draft-style send asset selector: token icons, selected asset label/balance, dropdown menu surface, option rows, and menu motion.
• Updates amount and button interactions for the send flow, including a pill-style Max control with haptic feedback and safer disabled/loading button handling.
• Adds dev mnemonic auto-init support and a dev-only wallet storage reset path so local mnemonic seeds do not fall back to stale nsec wallet state.

Affected files and components

• src/screens/Wallet/Send/Form.tsx - send form layout, asset selector, selector menu, haptics.
• src/components/InputContainer.tsx - shared input shell structure.
• src/components/InputAmount.tsx - Max pill control and controlled amount value preservation.
• src/components/Button.tsx - disabled/loading click and haptic guard.
• src/index.css - send form field, asset selector, dropdown, and dark-mode styling.
• src/App.tsx, src/index.tsx, src/providers/wallet.tsx, src/vite-env.d.ts - dev mnemonic auto-init support.

Testing

• bun run lint
• bun run test:unit src/test/screens/wallet/send.test.tsx
• bun run build
• Local visual verification on wt-send-flow-changes-20260521.arkade.localhost for send form field shells, neutral pill labels, and bottom CTA.

Notes

• This PR is stacked on feat(wallet): redesign home and settings entry points #627 and intentionally avoids copying the full prototype send implementation where it would replace newer PR-627 send logic.
• The local seed itself is not committed; only mnemonic-based dev auto-init support is included.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

🗂️ Base branches to auto review (1)

• next-version

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2a05ca72-d25a-4a2b-a130-98d08b4cfa4e

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch wt-send-flow-changes-20260521

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cloudflare-workers-and-pages]

Deploying tmp-boltz-upstream-mainnet-arkade-wallet with    Cloudflare Pages

Latest commit:	a521ed1
Status:	✅  Deploy successful!
Preview URL:	https://f8cbf075.tmp-boltz-upstream-mainnet-arkade-wallet.pages.dev
Branch Preview URL:	https://wt-send-flow-changes-2026052.tmp-boltz-upstream-mainnet-arkade-wallet.pages.dev

View logs

[cloudflare-workers-and-pages]

Deploying wallet-mutinynet with    Cloudflare Pages

Latest commit:	a521ed1
Status:	✅  Deploy successful!
Preview URL:	https://bdc398ad.arkade-wallet.pages.dev
Branch Preview URL:	https://wt-send-flow-changes-2026052.arkade-wallet.pages.dev

View logs

[cloudflare-workers-and-pages]

Deploying wallet-bitcoin with    Cloudflare Pages

Latest commit:	a521ed1
Status:	✅  Deploy successful!
Preview URL:	https://37f17ad9.wallet-bitcoin.pages.dev
Branch Preview URL:	https://wt-send-flow-changes-2026052.wallet-bitcoin.pages.dev

View logs

[ghost]

Code Review — #629

Reviewed the full diff, read every changed file in context, checked cross-repo impact, git history, and test coverage.

🔴 MUST FIX

1. E2E tests will break — data-testid format changed (Form.tsx:913)

The asset option data-testid changed from asset-${asset.ticker.toLowerCase()}-option to asset-${asset.assetId}-option. The e2e tests at src/test/e2e/send.test.ts:157,193 select asset-tst-option (by ticker). After this PR, the test ID will be something like asset-a1b2c3...f4-option (a hex asset ID), so both e2e test cases will fail.

Either revert to the ticker-based test ID or update the e2e tests to use the new format.

2. AssetIcon is defined as a component inside the render body (Form.tsx:~712)

const AssetIcon = ({ asset }: { asset: AssetOption | null }) => { ... }

This is declared inside SendForm(), which means React creates a new component type on every render. Every re-render (keystroke in amount field, etc.) will unmount and remount every <AssetIcon>, destroying DOM state and killing any CSS transitions on icons. It also defeats React's reconciliation.

Move AssetIcon outside SendForm (or at minimum, wrap it in useMemo/extract to module scope). It only depends on asset, which can be a prop.

3. resetDevWalletStorage infinite reload risk (index.tsx:47-68)

When VITE_DEV_RESET_WALLET_ON_BOOT === 'true' and localStorage is available but the setItem for the reset key silently fails (e.g., quota exceeded after removeItem calls), the guard localStorage.getItem(storageResetKey) will keep returning null on each boot, causing an infinite reload loop.

The try/catch around the storage block catches the error and falls through to the reload, but the setItem on line 53 is inside the same try block as the removeItem calls on lines 55-57 — if setItem throws, the storage still gets cleared but the guard key is never persisted → infinite reload. Consider setting the guard key before clearing storage, or using sessionStorage for the guard (like resetControlledDevServiceWorker does).

---

🟡 SHOULD FIX

4. value={value ?? ''} semantic change in InputAmount (InputAmount.tsx:~111)

The old code was value={value ? Number(value) : ''} — this converted truthy string values to numbers, which meant "0" would render as '' (empty). The new code value={value ?? ''} means "0" now renders as "0". This is arguably more correct, but it's a behavioral change that could affect the send flow UX (e.g., after clearing an amount, does value become "0" or undefined?). Verify this doesn't regress the "clear amount → type new amount" flow.

5. Haptic fires on every dropdown open/close, even programmatic (Form.tsx:~869)

onOpenChange={(open) => {
  hapticLight()
  setShowAssetSelector(open)
}}

This fires hapticLight() unconditionally — including when the menu closes due to outside click, escape key, or selecting an item (which triggers its own haptic via DropdownMenuItem). Users get double-haptic on selection. Consider only firing haptic on open (if (open) hapticLight()).

6. Button disabled || loading guard is now double-enforced (Button.tsx:83-84)

The native <button disabled={disabled}> already prevents click events when disabled is true. The added if (disabled || loading) return in handleClick is fine as defense-in-depth for the loading case (since loading doesn't set the native disabled). But note: aria-busy={loading} doesn't prevent clicks — you might want aria-disabled={loading || undefined} too, so assistive tech knows the button is non-interactive during loading.

---

🟢 OBSERVATIONS (no action needed)

• The dev mnemonic auto-init path in wallet.tsx correctly prioritizes devMnemonic over devNsec and calls initWallet({ mnemonic }) which goes through MnemonicIdentity.fromMnemonic() — no protocol concerns here.
• The getDevWalletStorageResetKey djb2 hash is fine for a dev-only cache-bust key.
• The useEffect dependency array in wallet.tsx:265 now includes all referenced values — good fix.
• CSS changes are purely cosmetic (styling the input shells, asset selector, dropdown menu). No functional concerns.
• InputContainer replacing <Shadow> with <div className='input-shell'> is a clean refactor.
• No protocol-critical code (VTXOs, signing, forfeit, rounds, exits) is touched in this PR.

Summary

The PR is a solid UI refactor. The e2e test breakage (#1) and the component-inside-render (#2) are the blockers. The infinite reload edge case (#3) is a real bug in dev tooling. The rest are quality improvements.

[ghost]

Code Review — #629

Reviewed the full diff, read every changed file in context, checked cross-repo impact, git history, and test coverage.

🔴 MUST FIX

1. E2E tests will break — data-testid format changed (Form.tsx:913)

The asset option data-testid changed from asset-${asset.ticker.toLowerCase()}-option to asset-${asset.assetId}-option. The e2e tests at src/test/e2e/send.test.ts:157,193 select asset-tst-option (by ticker). After this PR, the test ID will be something like asset-a1b2c3...f4-option (a hex asset ID), so both e2e test cases will fail.

Either revert to the ticker-based test ID or update the e2e tests to use the new format.

2. `AssetIcon` is defined as a component inside the render body (Form.tsx:~712)

```tsx
const AssetIcon = ({ asset }: { asset: AssetOption | null }) => { ... }
```

This is declared inside `SendForm()`, which means React creates a new component type on every render. Every re-render (keystroke in amount field, etc.) will unmount and remount every ``, destroying DOM state and killing any CSS transitions on icons. It also defeats React's reconciliation.

Move `AssetIcon` outside `SendForm` (or at minimum, wrap it in `useMemo`/extract to module scope). It only depends on `asset`, which can be a prop.

3. `resetDevWalletStorage` infinite reload risk (index.tsx:47-68)

When `VITE_DEV_RESET_WALLET_ON_BOOT === 'true'` and `localStorage` is available but the `setItem` for the reset key silently fails (e.g., quota exceeded after `removeItem` calls), the guard `localStorage.getItem(storageResetKey)` will keep returning `null` on each boot, causing an infinite reload loop.

The `try/catch` around the storage block catches the error and falls through to the reload, but the `setItem` on line 53 is inside the same try block as the `removeItem` calls on lines 55-57 — if `setItem` throws, the storage still gets cleared but the guard key is never persisted → infinite reload. Consider setting the guard key before clearing storage, or using `sessionStorage` for the guard (like `resetControlledDevServiceWorker` does).

---

🟡 SHOULD FIX

4. `value={value ?? ''}` semantic change in InputAmount (InputAmount.tsx:~111)

The old code was `value={value ? Number(value) : ''}` — this converted truthy string values to numbers, which meant `"0"` would render as `''` (empty). The new code `value={value ?? ''}` means `"0"` now renders as `"0"`. This is arguably more correct, but it's a behavioral change that could affect the send flow UX (e.g., after clearing an amount, does `value` become `"0"` or `undefined`?). Verify this doesn't regress the "clear amount → type new amount" flow.

5. Haptic fires on every dropdown open/close, even programmatic (Form.tsx:~869)

```tsx
onOpenChange={(open) => {
hapticLight()
setShowAssetSelector(open)
}}
```

This fires `hapticLight()` unconditionally — including when the menu closes due to outside click, escape key, or selecting an item (which triggers its own haptic via `DropdownMenuItem`). Users get double-haptic on selection. Consider only firing haptic on open (`if (open) hapticLight()`).

6. Button `disabled || loading` guard is now double-enforced (Button.tsx:83-84)

The native `` already prevents click events when `disabled` is true. The added `if (disabled || loading) return` in `handleClick` is fine as defense-in-depth for the `loading` case (since `loading` doesn't set the native `disabled`). But note: `aria-busy={loading}` doesn't prevent clicks — you might want `aria-disabled={loading || undefined}` too, so assistive tech knows the button is non-interactive during loading.

---

🟢 OBSERVATIONS (no action needed)

• The dev mnemonic auto-init path in `wallet.tsx` correctly prioritizes `devMnemonic` over `devNsec` and calls `initWallet({ mnemonic })` which goes through `MnemonicIdentity.fromMnemonic()` — no protocol concerns here.
• The `getDevWalletStorageResetKey` djb2 hash is fine for a dev-only cache-bust key.
• The `useEffect` dependency array in wallet.tsx:265 now includes all referenced values — good fix.
• CSS changes are purely cosmetic (styling the input shells, asset selector, dropdown menu). No functional concerns.
• `InputContainer` replacing `` with `
  ` is a clean refactor.
• No protocol-critical code (VTXOs, signing, forfeit, rounds, exits) is touched in this PR.

Summary

The PR is a solid UI refactor. The e2e test breakage (#1) and the component-inside-render (#2) are the blockers. The infinite reload edge case (#3) is a real bug in dev tooling. The rest are quality improvements.

---

🤖 Reviewed by Arkana

[ghost]

Review: feat(send): align send flow with redesign prototype

Verdict: Approve — no protocol-critical code touched. This is UI/UX only (send form styling, asset selector, dev tooling). No VTXO handling, transaction signing, forfeit paths, or exit logic affected.

---

Issues to address (non-blocking)

1. E2E test breakage — data-testid format changed ⚠️
src/screens/Wallet/Send/Form.tsx — the asset option test ID changed from ticker-based to assetId-based:

// Before:  data-testid={`asset-${asset.ticker.toLowerCase()}-option`}
// After:   data-testid={`asset-${asset.assetId}-option`}

But src/test/e2e/send.test.ts:157 and :193 reference asset-tst-option (ticker-based). These e2e tests will fail. Either update the tests or keep the old test ID format.

2. AssetIcon defined inside render body (minor perf)
src/screens/Wallet/Send/Form.tsx:~710 — AssetIcon is declared as a function inside SendForm(), so it's recreated every render. This forces React to unmount/remount the icon subtree on each render cycle instead of reconciling. Extract it to module scope (it only needs asset as a prop, no closure over component state).

---

Observations (no action needed)

• Button.tsx guard is a good fix — adding if (disabled || loading) return before hapticTap()/onClick() prevents clicks during loading state where disabled isn't set on the DOM element. The aria-busy addition is correct.

• InputAmount value fix is correct — value={value ?? ''} preserves 0 as a valid input value, whereas the old value ? Number(value) : '' treated 0 as falsy and cleared the field.

• Dev mnemonic support is clean — VITE_DEV_MNEMONIC is properly guarded behind import.meta.env.DEV, initWallet already accepts { mnemonic }, and the resetDevWalletStorage function has adequate guards (DEV + VITE_DEV_RESET_WALLET_ON_BOOT=true + per-credential idempotency key).

• No cross-repo impact — InputContainer, InputAmount, Button are wallet-internal. Shadow is only removed from InputContainer, not deleted. No downstream consumers.

• CSS !important proliferation in dark-mode overrides is a code smell but not a blocker.

🤖 Reviewed by Arkana

[ghost]

Review: feat(send): align send flow with redesign prototype

Verdict: Approve — no protocol-critical code touched. This is UI/UX only (send form styling, asset selector, dev tooling). No VTXO handling, transaction signing, forfeit paths, or exit logic affected.

---

Issues to address (non-blocking)

1. E2E test breakage — data-testid format changed ⚠️
src/screens/Wallet/Send/Form.tsx — the asset option test ID changed from ticker-based to assetId-based:

// Before:  data-testid={`asset-${asset.ticker.toLowerCase()}-option`}
// After:   data-testid={`asset-${asset.assetId}-option`}

But src/test/e2e/send.test.ts:157 and :193 reference asset-tst-option (ticker-based). These e2e tests will fail. Either update the tests or keep the old test ID format.

2. AssetIcon defined inside render body (minor perf)
src/screens/Wallet/Send/Form.tsx:~710 — AssetIcon is declared as a function inside SendForm(), so it's recreated every render. This forces React to unmount/remount the icon subtree on each render cycle instead of reconciling. Extract it to module scope (it only needs asset as a prop, no closure over component state).

---

Observations (no action needed)

• Button.tsx guard is a good fix — adding if (disabled || loading) return before hapticTap()/onClick() prevents clicks during loading state where disabled isn't set on the DOM element. The aria-busy addition is correct.

• InputAmount value fix is correct — value={value ?? ''} preserves 0 as a valid input value, whereas the old value ? Number(value) : '' treated 0 as falsy and cleared the field.

• Dev mnemonic support is clean — VITE_DEV_MNEMONIC is properly guarded behind import.meta.env.DEV, initWallet already accepts { mnemonic }, and the resetDevWalletStorage function has adequate guards (DEV + VITE_DEV_RESET_WALLET_ON_BOOT=true + per-credential idempotency key).

• No cross-repo impact — InputContainer, InputAmount, Button are wallet-internal. Shadow is only removed from InputContainer, not deleted. No downstream consumers.

• CSS !important proliferation in dark-mode overrides is a code smell but not a blocker.

🤖 Reviewed by Arkana

[ghost]

Re-review after force push (22d086b)

All five findings from my previous review are addressed:

#	Finding	Resolution
1	E2E data-testid format breakage	✅ Kept ticker-based format — matches src/test/e2e/send.test.ts:157,193
2	AssetIcon defined inside render body	✅ Extracted to module scope (Form.tsx:~72)
3	resetDevWalletStorage infinite reload	✅ Guard key setItem now precedes removeItem calls; catch block no longer falls through to reload
4	Double haptic on dropdown	✅ if (open) hapticLight() guard added
5	Missing aria-disabled on loading button	✅ `aria-disabled={loading

No new concerns. No protocol-critical code touched (VTXOs, signing, forfeit, rounds, exits are untouched). UI-only changes — safe to merge with human approval.

🤖 Reviewed by Arkana

[tiero]

I would wait to incorporate the contact/friends functionalities, to redo the send. Also woudl be nice to divide the step of selection "who send money to" and "how much"

[sahilc0]

I would wait to incorporate the contact/friends functionalities, to redo the send. Also woudl be nice to divide the step of selection "who send money to" and "how much"

why wait? this is just a light ui cleanup/polish

[ghost]

Re-review after merge commits (471cc3d → a521ed1)

Two merge commits bringing the base branch (wt-wallet-redesign-followups-20260520) into this PR. No new feature code — just a rebase-via-merge.

New finding from merge

Duplicate VITE_DEV_MNEMONIC declaration — src/vite-env.d.ts
The merge introduced a duplicate readonly VITE_DEV_MNEMONIC?: string in the ImportMetaEnv interface. Both this PR and the base branch added it, and the merge kept both. Not a runtime bug (TS takes the last declaration for duplicate interface members), but it's a merge artifact that should be cleaned up.

Changes from base branch merge (look correct)

• wallet.tsx: devAutoInitCredential variable extracted, useEffect deps expanded from [aspInfo.url, initialized, devAutoInitFailed] to include isDevAutoInit, devAutoInitCredential, devMnemonic, devNsec. This is more correct (satisfies exhaustive-deps) and harmless since all the new deps are stable import.meta.env reads that won't change between renders.

No protocol-critical code touched. Previous approval stands — all five original findings remain addressed.

🤖 Reviewed by Arkana