feat: MP closes on scroll down (#6682)

* feat: MP closes on scroll down

* fix: make dismissal smoother

* fix: implement react gestures and fix scroll

* fix: fix drag when not starting from top

* fix: double scroll on mobile

* fix: comments for clarity

* fix: mobile scrolling?

* remove console logs

* potential fix?

* remove change again

* maybe fix?

* cope

* even more cope

* even more more cope

* copiest

* make less buggy

* nope

* maybe?

* HOLD

* maybe

* try 2

* maybe

* hopefully

* test

* another try

* cope

* redo

* attempt 2

* hmm

* maybe

* I THINK

src/components/AccountDrawer/AuthenticatedHeader.tsx

@@ -40,7 +40,6 @@ const AuthenticatedHeaderWrapper = styled.div`
   display: flex;
   flex-direction: column;
   flex: 1;
-  overflow: auto;
 `
 
 const HeaderButton = styled(ThemeButton)`

src/components/AccountDrawer/index.tsx

@@ -1,14 +1,17 @@
 import { BrowserEvent, InterfaceEventName } from '@uniswap/analytics-events'
 import { TraceEvent } from 'analytics'
 import { ScrollBarStyles } from 'components/Common'
+import useDisableScrolling from 'hooks/useDisableScrolling'
 import { useWindowSize } from 'hooks/useWindowSize'
 import { atom } from 'jotai'
 import { useAtomValue, useUpdateAtom } from 'jotai/utils'
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { ChevronsRight } from 'react-feather'
+import { useGesture } from 'react-use-gesture'
 import styled from 'styled-components/macro'
 import { BREAKPOINTS, ClickableStyle } from 'theme'
 import { Z_INDEX } from 'theme/zIndex'
+import { isMobile } from 'utils/userAgent'
 
 import DefaultMenu from './DefaultMenu'
 
@@ -181,21 +184,53 @@ function AccountDrawer() {
     }
   }, [walletDrawerOpen, toggleWalletDrawer])
 
-  // close on escape keypress
-  useEffect(() => {
-    const escapeKeyDownHandler = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && walletDrawerOpen) {
-        event.preventDefault()
+  // useStates for detecting swipe gestures
+  const [yPosition, setYPosition] = useState(0)
+  const [dragStartTop, setDragStartTop] = useState(true)
+  useDisableScrolling(walletDrawerOpen)
+
+  // useGesture hook for detecting swipe gestures
+  const bind = useGesture({
+    // if the drawer is open and the user is dragging down, close the drawer
+    onDrag: (state) => {
+      // if the user is dragging up, set dragStartTop to false
+      if (state.movement[1] < 0) {
+        setDragStartTop(false)
+        if (scrollRef.current) {
+          scrollRef.current.style.overflowY = 'auto'
+        }
+      } else if (
+        (state.movement[1] > 300 || (state.velocity > 3 && state.direction[1] > 0)) &&
+        walletDrawerOpen &&
+        dragStartTop
+      ) {
         toggleWalletDrawer()
+      } else if (walletDrawerOpen && dragStartTop && state.movement[1] > 0) {
+        setYPosition(state.movement[1])
+        if (scrollRef.current) {
+          scrollRef.current.style.overflowY = 'hidden'
+        }
       }
-    }
-
-    document.addEventListener('keydown', escapeKeyDownHandler)
-
-    return () => {
-      document.removeEventListener('keydown', escapeKeyDownHandler)
-    }
-  }, [walletDrawerOpen, toggleWalletDrawer])
+    },
+    // reset the yPosition when the user stops dragging
+    onDragEnd: (state) => {
+      setYPosition(0)
+      if (scrollRef.current) {
+        scrollRef.current.style.overflowY = 'auto'
+      }
+    },
+    // set dragStartTop to true if the user starts dragging from the top of the drawer
+    onDragStart: (state) => {
+      if (!scrollRef.current?.scrollTop || scrollRef.current?.scrollTop < 30) {
+        setDragStartTop(true)
+      } else {
+        setDragStartTop(false)
+        if (scrollRef.current) {
+          scrollRef.current.style.overflowY = 'auto'
+        }
+      }
+    },
+  })
 
   return (
     <Container>
@@ -211,7 +246,15 @@ function AccountDrawer() {
         </TraceEvent>
       )}
       <Scrim onClick={toggleWalletDrawer} open={walletDrawerOpen} />
-      <AccountDrawerWrapper open={walletDrawerOpen}>
+      <AccountDrawerWrapper
+        open={walletDrawerOpen}
+        {...(isMobile
+          ? {
+              ...bind(),
+              style: { transform: `translateY(${yPosition}px)` },
+            }
+          : {})}
+      >
         {/* id used for child InfiniteScrolls to reference when it has reached the bottom of the component */}
         <AccountDrawerScrollWrapper ref={scrollRef} id="wallet-dropdown-scroll-wrapper">
           <DefaultMenu />