fix(wallet-drawer): outside-click close + register speed up modal in stack

[swdiscordia]

Description

Fix the right-side wallet drawer so the Speed Up Transaction modal triggered from the Activity tab renders in front of the drawer (Confirm reachable), and the drawer reliably closes on outside click.

Two surgical changes:

1. src/components/Layout/Header/ActionCenter/components/SpeedUpModal.tsx

SpeedUpModal rendered a bare Chakra <Modal> at the default modal z-index (~1400), so it sat behind the wallet drawer (z-index ~1411 via useModalRegistration). Apply the same pattern used by CancelLimitOrder.tsx: call useModalRegistration({ isOpen, onClose }) and spread modalProps / overlayProps / modalContentProps onto <Modal> / <ModalOverlay> / <ModalContent>. SpeedUp now stacks at z=1422, above the drawer, with proper pointerEvents handoff to lower-stack modals.

2. src/components/Layout/Header/NavBar/DrawerWallet.tsx

Chakra's internal onOverlayClick gates close on its own modalManager.isTopModal() (node_modules/@chakra-ui/react/dist/esm/modal/use-modal.mjs:69), independent of ModalStackProvider. If any future child modal opens without registering in our stack, that gate fires and closeOnOverlayClick: true silently becomes a no-op. A defensive onClick is wired onto the dialog container via containerProps, gated on event.target === event.currentTarget so panel-internal clicks remain interactive. This is redundant with Chakra's mechanism in the registered-modal case but guarantees the drawer can always be dismissed by clicking outside.

Issue (if applicable)

closes #12356

Risk

LOW.

• Affected files: 2. Combined diff: +30 / -4.
• Not affected: signing paths, hdwallet packages, persistor / Redux migrations, swap flows, on-chain transaction logic, BTC RBF construction (mutationFn body of speedUpMutation is untouched). No new dependencies. No state schema changes.
• The SpeedUp signing path is preserved verbatim — only the surrounding Chakra <Modal> props change so it participates in ModalStackProvider.

What protocols, transaction types, wallets or contract interactions might be affected by this PR?

None — purely UI behavior on the wallet drawer + Speed Up modal wrapper. BTC RBF signing & broadcast logic in SpeedUpModal (lines 507-697) is unchanged.

Testing

Engineering

1. pnpm install && pnpm run dev
2. Connect any wallet. Click the wallet button in the navbar to open the right-side drawer.
3. A — drawer alone: click the dimmed area to the left of the panel → drawer slides closed.
4. B — drawer with Speed Up (regression-of-bug scenario): drawer Activity tab → pending BTC tx → Speed Up. The Speed Up modal now opens in front of the drawer with Confirm reachable. Click the dimmed area outside the modal → only Speed Up closes, drawer stays open (correct stack semantics).
5. C — drawer with another registered modal (Send / Settings) open: clicking the dim area closes the topmost (Send / Settings); drawer stays — unchanged from before.
6. D — ESC: pressing ESC closes the topmost modal; behavior unchanged.
7. E — panel-internal clicks: clicking inside the wallet panel (tabs, buttons) does NOT close the drawer (target === currentTarget excludes child clicks).

Operations

• 🏁 No feature flag. Pure UX correction to the wallet drawer + Speed Up modal layering. Existing wallet drawer regression flow is sufficient.

QA recipe: any wallet, open the drawer, do Engineering steps A–E above. Behavior should match the descriptions.

Screenshots (if applicable)

Post-fix demo (Speed Up modal now in front, Confirm reachable, drawer dismisses correctly): https://jam.dev/c/a783dff9-2a6a-4ef2-87ba-8e66f1da5c26

🤖 Generated with Claude Code

Summary by CodeRabbit

• Refactor
  • Internal improvements to modal component architecture with no visible impact on user experience.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2888a336-7877-419e-8027-642332381618

📥 Commits

Reviewing files that changed from the base of the PR and between 9872c67 and fe7066f.

📒 Files selected for processing (1)

• src/components/Layout/Header/ActionCenter/components/SpeedUpModal.tsx

---

📝 Walkthrough

Walkthrough

SpeedUpModal component integrates centralized modal registration by importing useModalRegistration hook and refactoring the Chakra modal component structure to receive and spread registered props (modalProps, overlayProps, modalContentProps) instead of direct prop wiring.

Changes

Modal Registration Integration

Layer / File(s)	Summary
useModalRegistration integration src/components/Layout/Header/ActionCenter/components/SpeedUpModal.tsx	SpeedUpModal imports useModalRegistration hook and refactors Modal, ModalOverlay, and ModalContent JSX to spread registered modal props, also adding pointerEvents='all' to ModalContent and isCentered to Modal.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

• Speed Up Transaction modal is hidden behind the wallet drawer (Activity tab) #12356: Implements the fix for z-index/overlay stacking bug by integrating useModalRegistration into SpeedUpModal component.

Poem

🐰 A modal learns to register and play,
No more direct props blocking its way,
With hooks that orchestrate the dance,
Overlays now get their rightful chance,
Stack and center, smooth and bright! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the two main changes: registering the SpeedUpModal in the modal stack and fixing the outside-click close behavior for the wallet drawer.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[kaladinlight]