Skip to content

fix(#136): mobile-responsive wallet modals with bottom-sheet drawer#224

Open
Emmanard wants to merge 4 commits into
kellymusk:mainfrom
Emmanard:fix/136-mobile-responsive-wallet-modals
Open

fix(#136): mobile-responsive wallet modals with bottom-sheet drawer#224
Emmanard wants to merge 4 commits into
kellymusk:mainfrom
Emmanard:fix/136-mobile-responsive-wallet-modals

Conversation

@Emmanard
Copy link
Copy Markdown
Contributor

@Emmanard Emmanard commented Jun 1, 2026

Summary

  • Bottom-sheet on mobile: on viewports < 640 px the wallet modal now renders as a vaul Drawer sliding up from the bottom (rounded-t-2xl, drag handle, max-h-[90vh], pb-[env(safe-area-inset-bottom)] for iPhone home-bar)
  • Desktop unchanged: the existing centred <Dialog> is untouched behind an isMobile guard
  • A11y / Radix safety: introduced WalletModalHeader that renders DialogHeader/DialogTitle/DialogDescription on the dialog path and semantic <h2>/<p> on the sheet path — avoids running Radix Dialog context expectations inside a Drawer
  • Single source of truth: WalletModalViews is shared by both shells so all four flows (connect, install, connecting, network-warning) live in one place
  • Touch targets: install <a> rows min-h-[56px] + active: state; Drawer close button min-h-11 min-w-11 (44 px); primary buttons already h-12
  • Responsive classes: p-4 sm:p-6, text-xl sm:text-2xl, w-16 sm:w-20 across all four views
  • NetworkWarningView: Refresh / Continue Anyway row is now flex-col sm:flex-row so buttons stack on narrow screens
  • New hook: hooks/use-is-mobile.ts — hydration-safe (false on SSR, real value post-mount via matchMedia)

Files changed

File Change
hooks/use-is-mobile.ts New — SSR-safe useIsMobile() hook
components/Wallet/WalletModal.tsx Drawer/Dialog shell, shared views, header helper, responsive classes, touch targets

vaul was already a project dependency (used in navbar.tsx). No new packages added.

Test plan

  • Open wallet modal on desktop (~1280 px) — centred Dialog renders, all four views transition correctly
  • Open wallet modal on mobile emulation (~390 px) — bottom-sheet slides up, drag handle visible, close button tap target ≥ 44 px
  • Verify connect → connecting → success flow on both breakpoints
  • Verify install view links open correctly on mobile
  • Verify NetworkWarningView buttons stack vertically at < 640 px
  • Run Lighthouse mobile audit on any page that opens the wallet modal; confirm no new tap-target or viewport warnings
  • Check iPhone Safari (safe-area inset) — sheet content should clear the home bar

Closes #136

kelly-musk and others added 4 commits April 29, 2026 01:28
Fix withdrawal lock release and payment test token cache resets.
…nd refactor modal views

- Introduced a responsive drawer for mobile devices in the WalletModal component.
- Refactored modal views into a separate WalletModalViews component for better organization.
- Added WalletModalHeader for consistent header rendering across different modal variants.
- Improved code structure and readability by utilizing TypeScript types for props.
@vercel
Copy link
Copy Markdown

vercel Bot commented Jun 1, 2026

@Emmanard is attempting to deploy a commit to the kelly musk's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

17. Mobile-responsive wallet modals

2 participants