feat: differentiate modal from bottomsheet (#5387)

* feat: differenciate modal from bottomsheet

* chore: add ability to disable esc/overlay tap to dismiss

src/components/Modal/index.tsx

@@ -24,50 +24,51 @@ const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ scrollOverlay?: bool
   }
 `
 
+type StyledDialogProps = {
+  $minHeight?: number | false
+  $maxHeight?: number
+  $isBottomSheet?: boolean
+  $scrollOverlay?: boolean
+  $hideBorder?: boolean
+  $maxWidth: number
+}
+
 const AnimatedDialogContent = animated(DialogContent)
-// destructure to not pass custom props to Dialog DOM element
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const StyledDialogContent = styled(
-  ({ hideBorder, maxWidth, minHeight, maxHeight, mobile, isOpen, scrollOverlay, ...rest }) => (
-    <AnimatedDialogContent {...rest} />
-  )
-).attrs({
-  'aria-label': 'dialog',
-})`
+const StyledDialogContent = styled(AnimatedDialogContent)<StyledDialogProps>`
   overflow-y: auto;
 
   &[data-reach-dialog-content] {
     margin: auto;
     background-color: ${({ theme }) => theme.deprecated_bg0};
-    border: ${({ theme, hideBorder }) => !hideBorder && `1px solid ${theme.deprecated_bg1}`};
+    border: ${({ theme, $hideBorder }) => !$hideBorder && `1px solid ${theme.deprecated_bg1}`};
     box-shadow: ${({ theme }) => theme.deepShadow};
     padding: 0px;
     width: 50vw;
     overflow-y: auto;
     overflow-x: hidden;
 
-    align-self: ${({ mobile }) => mobile && 'flex-end'};
-    max-width: ${({ maxWidth }) => maxWidth}px;
-    ${({ maxHeight }) =>
-      maxHeight &&
+    align-self: ${({ $isBottomSheet }) => $isBottomSheet && 'flex-end'};
+    max-width: ${({ $maxWidth }) => $maxWidth}px;
+    ${({ $maxHeight }) =>
+      $maxHeight &&
       css`
-        max-height: ${maxHeight}vh;
+        max-height: ${$maxHeight}vh;
       `}
-    ${({ minHeight }) =>
-      minHeight &&
+    ${({ $minHeight }) =>
+      $minHeight &&
       css`
-        min-height: ${minHeight}vh;
+        min-height: ${$minHeight}vh;
       `}
-    display: ${({ scrollOverlay }) => (scrollOverlay ? 'inline-table' : 'flex')};
+    display: ${({ $scrollOverlay }) => ($scrollOverlay ? 'inline-table' : 'flex')};
     border-radius: 20px;
     ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
       width: 65vw;
       margin: auto;
     `}
-    ${({ theme, mobile }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
+    ${({ theme, $isBottomSheet }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
       width:  85vw;
       ${
-        mobile &&
+        $isBottomSheet &&
         css`
           width: 100vw;
           border-radius: 20px;
@@ -81,7 +82,8 @@ const StyledDialogContent = styled(
 
 interface ModalProps {
   isOpen: boolean
-  onDismiss: () => void
+  onDismiss?: () => void
+  onSwipe?: () => void
   minHeight?: number | false
   maxHeight?: number
   maxWidth?: number
@@ -89,6 +91,7 @@ interface ModalProps {
   children?: React.ReactNode
   scrollOverlay?: boolean
   hideBorder?: boolean
+  isBottomSheet?: boolean
 }
 
 export default function Modal({
@@ -99,7 +102,9 @@ export default function Modal({
   maxWidth = 420,
   initialFocusRef,
   children,
+  onSwipe = onDismiss,
   scrollOverlay,
+  isBottomSheet = isMobile,
   hideBorder = false,
 }: ModalProps) {
   const fadeTransition = useTransition(isOpen, {
@@ -116,7 +121,7 @@ export default function Modal({
         y: state.down ? state.movement[1] : 0,
       })
       if (state.movement[1] > 300 || (state.velocity > 3 && state.direction[1] > 0)) {
-        onDismiss()
+        onSwipe?.()
       }
     },
   })
@@ -127,7 +132,6 @@ export default function Modal({
         ({ opacity }, item) =>
           item && (
             <StyledDialogOverlay
-              as={AnimatedDialogOverlay}
               style={{ opacity: opacity.to({ range: [0.0, 1.0], output: [0, 1] }) }}
               onDismiss={onDismiss}
               initialFocusRef={initialFocusRef}
@@ -141,13 +145,13 @@ export default function Modal({
                       style: { transform: y.interpolate((y) => `translateY(${(y as number) > 0 ? y : 0}px)`) },
                     }
                   : {})}
-                aria-label="dialog content"
-                minHeight={minHeight}
-                maxHeight={maxHeight}
-                mobile={isMobile}
-                scrollOverlay={scrollOverlay}
-                hideBorder={hideBorder}
-                maxWidth={maxWidth}
+                aria-label="dialog"
+                $minHeight={minHeight}
+                $maxHeight={maxHeight}
+                $isBottomSheet={isBottomSheet}
+                $scrollOverlay={scrollOverlay}
+                $hideBorder={hideBorder}
+                $maxWidth={maxWidth}
               >
                 {/* prevents the automatic focusing of inputs on mobile by the reach dialog */}
                 {!initialFocusRef && isMobile ? <div tabIndex={1} /> : null}

src/nft/components/explore/WelcomeModal.tsx

@@ -81,7 +81,7 @@ export function WelcomeModal({ onDismissed }: { onDismissed: () => void }) {
   const theme = useTheme()
 
   return (
-    <Modal isOpen={isOpen} onDismiss={dismiss} maxWidth={720}>
+    <Modal isOpen={isOpen} onSwipe={dismiss} maxWidth={720} isBottomSheet={false}>
       <Container>
         <Background
           {...(theme.darkMode ? BACKGROUND_IMAGE.dark : BACKGROUND_IMAGE.light)}

src/state/user/reducer.ts

@@ -80,7 +80,7 @@ export const initialState: UserState = {
   hideNFTPromoBanner: false,
   showSurveyPopup: undefined,
   showDonationLink: true,
-  hideNFTWelcomeModal: true,
+  hideNFTWelcomeModal: false,
 }
 
 const userSlice = createSlice({