feat(ui): add mobile slide-up sheet for buy and sell modals (#865) - #901
Merged
Chucks1093 merged 2 commits intoSep 4, 2026
Conversation
…yerorg#865) - Detect mobile viewport (< 768px) via useIsMobile and render buy/sell modals as BottomSheet - Provide slide-up CSS transform transition and drag handle for swipe-down to dismiss - Ensure max height leaves at least 80px visible at the top of the viewport on mobile - Continue rendering standard centered Dialog on desktop viewports (>= 768px) - Add comprehensive integration and unit tests for mobile BottomSheet
|
@Oluwasuyi-Oluwatimilehin-Daniel Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
5 tasks
Ajibose
added a commit
to Ajibose/accesslayer-client
that referenced
this pull request
Sep 4, 2026
Resolves conflicts from the mobile bottom-sheet refactor (accesslayerorg#901), which extracted TradeDialog's desktop-only inline JSX into a shared `bodyContent` variable reused by both the sheet and the dialog. Ported this PR's LaunchPenaltyWarning/SellFeeBreakdown additions into that shared `bodyContent` instead of keeping a duplicated inline copy. Also resolves the same additive slippageTolerance.utils.ts/test.ts conflict as accesslayerorg#872 vs accesslayerorg#877 (both sides just append), and a purely additive package.json conflict (canvas-confetti deps from accesslayerorg#892). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HCiPXzfWN9jdJAfNQQ6nbW
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Converts the buy and sell key dialogs into responsive, mobile-first slide-up bottom sheets on viewports below 768px while preserving centered modals on desktop viewports.
Changes
useIsMobile()hook to detect mobile viewports (<768px).BottomSheet,BottomSheetContent, andBottomSheetHandleon mobile with slide-up transitions (slide-in-from-bottom-8).max-h-[calc(100vh-80px)] overflow-y-autoleaving at least 80px of page visible above the sheet.Dialogon desktop viewports (>=768px).window.matchMediaavailability across SSR and test environments.TradeDialog.mobileBottomSheet.test.tsxcovering mobile sheet rendering, desktop centered modal rendering, dynamic viewport resizing, swipe-down dismissal gestures, height bounds, and submit-lock states.Acceptance Criteria Verification
Closes #865