feat(drawer): add swipe-to-dismiss on mobile using Vaul#134
Closed
feat(drawer): add swipe-to-dismiss on mobile using Vaul#134
Conversation
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
Contributor
Author
|
Will mark ready for review once #130 is merged |
Deploying interwovenkit-staging with
|
| Latest commit: |
729746b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://ff76eeb9.interwovenkit-staging.pages.dev |
| Branch Preview URL: | https://feat-drawer-swipe-to-dismiss.interwovenkit-staging.pages.dev |
Deploying interwovenkit-testnet with
|
| Latest commit: |
729746b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://3860614a.interwovenkit-testnet.pages.dev |
| Branch Preview URL: | https://feat-drawer-swipe-to-dismiss.interwovenkit-testnet.pages.dev |
Deploying interwovenkit with
|
| Latest commit: |
729746b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://b54ca628.interwovenkit.pages.dev |
| Branch Preview URL: | https://feat-drawer-swipe-to-dismiss.interwovenkit.pages.dev |
tansawit
force-pushed
the
feat/drawer-swipe-to-dismiss
branch
from
84d5e83 to
ad4e38d
Compare
Replace Base UI Dialog with Vaul for unified drawer implementation. Mobile slides from bottom with swipe-to-dismiss, desktop slides from right.
tansawit
force-pushed
the
feat/drawer-swipe-to-dismiss
branch
from
ad4e38d to
e59bfb0
Compare
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
|
Bugbot Autofix prepared fixes for 1 of the 1 bugs found in the latest run.
Or push these changes by commenting: Preview (bbf61c1061)diff --git a/packages/interwovenkit-react/src/public/app/Drawer.tsx b/packages/interwovenkit-react/src/public/app/Drawer.tsx
--- a/packages/interwovenkit-react/src/public/app/Drawer.tsx
+++ b/packages/interwovenkit-react/src/public/app/Drawer.tsx
@@ -87,7 +87,10 @@
aria-label="Close drawer"
/>
)}
- <VaulDrawer.Content className={isMobile ? styles.mobileContent : styles.desktopContent}>
+ <VaulDrawer.Content
+ className={isMobile ? styles.mobileContent : styles.desktopContent}
+ onInteractOutside={isMobile ? (e) => e.preventDefault() : undefined}
+ >
<div className={clsx(styles.inner, "body")} ref={setContainer}>
{isMobile && <ScrollLock />}
<TxWatcher /> |
Contributor
Author
Prevent Radix DismissableLayer from triggering on mobile when custom overlay is clicked by adding onInteractOutside handler. This eliminates duplicate handleCloseDrawer calls that were causing double analytics events and double reject() calls on pending requests. Applied via @cursor push command
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.
Add swipe-to-dismiss functionality to the wallet drawer on mobile using Vaul.
Changes
Note
Medium Risk
Moderate UI behavior refactor around open/close and outside-interaction handling; regressions could affect dismissal, focus/scroll locking, or transaction rejection flows.
Overview
Updates the wallet
Drawerto usevaulinstead of Base UIDialog, enabling mobile bottom-sheet behavior (including swipe-to-dismiss) while keeping the desktop drawer opening from the right.Refactors drawer overlay/content styling into separate mobile/desktop classes, adds a mobile-only clickable overlay with keyboard handling, and adjusts outside-interaction handling to prevent accidental dismissals on mobile. Error rendering in
AsyncBoundary/drawer fallback is also hardened to handle non-Errorthrowables.Written by Cursor Bugbot for commit 729746b. This will update automatically on new commits. Configure here.