Fix iOS scrolling mobile menu overlay attempt and improve events (#656)

* Fix iOS scrolling attempt and improve events * Fix iOS scrolling attempt and improve events
cowprotocol · Jun 8, 2022 · 83d1a00 · 83d1a00
1 parent d8b0ece
commit 83d1a00
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 39 deletions.
diff --git a/src/custom/components/AccountDetails/index.tsx b/src/custom/components/AccountDetails/index.tsx
@@ -123,15 +123,15 @@ interface AccountDetailsProps {
   confirmedTransactions: string[]
   ENSName?: string
   toggleWalletModal: () => void
-  closeOrdersPanel: () => void
+  handleCloseOrdersPanel: () => void
 }
 
 export default function AccountDetails({
   pendingTransactions = [],
   confirmedTransactions = [],
   ENSName,
   toggleWalletModal,
-  closeOrdersPanel,
+  handleCloseOrdersPanel,
 }: AccountDetailsProps) {
   const { account, connector, chainId: connectedChainId } = useActiveWeb3React()
   const chainId = supportedChainId(connectedChainId)
@@ -148,7 +148,7 @@ export default function AccountDetails({
   const handleDisconnectClick = () => {
     ;(connector as any).close()
     localStorage.removeItem(STORAGE_KEY_LAST_PROVIDER)
-    closeOrdersPanel()
+    handleCloseOrdersPanel()
     toggleWalletModal()
   }
 

diff --git a/src/custom/components/Header/index.tsx b/src/custom/components/Header/index.tsx
@@ -6,7 +6,7 @@ import ReactGA from 'react-ga4'
 import { useActiveWeb3React } from 'hooks/web3'
 import { useNativeCurrencyBalances } from 'state/wallet/hooks'
 import { useDarkModeManager } from 'state/user/hooks'
-import { useMediaQuery, upToSmall, upToLarge } from 'hooks/useMediaQuery'
+import { useMediaQuery, upToSmall, upToMedium, upToLarge, LargeAndUp } from 'hooks/useMediaQuery'
 import { AMOUNT_PRECISION } from 'constants/index'
 import { MAIN_MENU, MAIN_MENU_TYPE } from 'constants/mainMenu'
 import { supportedChainId } from 'utils/supportedChainId'
@@ -77,32 +77,47 @@ export default function Header() {
   }, [toggleDarkModeAux, darkMode])
 
   const [isOrdersPanelOpen, setIsOrdersPanelOpen] = useState<boolean>(false)
-  const closeOrdersPanel = () => setIsOrdersPanelOpen(false)
-  const openOrdersPanel = () => account && setIsOrdersPanelOpen(true)
+  const handleOpenOrdersPanel = () => {
+    account && setIsOrdersPanelOpen(true)
+    account && isOrdersPanelOpen && addBodyClass('noScroll')
+  }
+  const handleCloseOrdersPanel = () => {
+    setIsOrdersPanelOpen(false)
+    !isOrdersPanelOpen && removeBodyClass('noScroll')
+  }
 
   const history = useHistory()
   const handleBalanceButtonClick = () => history.push('/account')
   const isUpToLarge = useMediaQuery(upToLarge)
+  const isUpToMedium = useMediaQuery(upToMedium)
   const isUpToSmall = useMediaQuery(upToSmall)
+  const isLargeAndUp = useMediaQuery(LargeAndUp)
 
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
-  const handleMobileMenuOnClick = useCallback(
-    () => isUpToLarge && setIsMobileMenuOpen(!isMobileMenuOpen),
-    [isUpToLarge, isMobileMenuOpen]
-  )
+  const handleMobileMenuOnClick = useCallback(() => {
+    isUpToLarge && setIsMobileMenuOpen(!isMobileMenuOpen)
+  }, [isUpToLarge, isMobileMenuOpen])
+
+  const [isTouch, setIsTouch] = useState<boolean>(false)
 
   // Toggle the 'noScroll' class on body, whenever the orders panel is open.
   // This removes the inner scrollbar on the page body, to prevent showing double scrollbars.
   useEffect(() => {
-    isUpToLarge && isMobileMenuOpen ? addBodyClass('noScroll') : removeBodyClass('noScroll')
-    isOrdersPanelOpen ? addBodyClass('noScroll') : removeBodyClass('noScroll')
-  }, [isOrdersPanelOpen, isMobileMenuOpen, isUpToLarge])
+    isMobileMenuOpen ? addBodyClass('noScroll') : removeBodyClass('noScroll')
+    // Set if device has touch capabilities
+    setIsTouch('ontouchstart' in document.documentElement)
+  }, [isOrdersPanelOpen, isMobileMenuOpen, isUpToLarge, isUpToMedium, isUpToSmall, isLargeAndUp])
 
   const getMainMenu = useMemo(
     () =>
       MAIN_MENU.map(({ title, url, externalURL, items }: MAIN_MENU_TYPE, index) =>
         !items && !externalURL && url ? (
-          <StyledNavLink key={index} to={url} onClick={handleMobileMenuOnClick}>
+          <StyledNavLink
+            key={index}
+            to={url}
+            onTouchStart={handleMobileMenuOnClick}
+            onClick={isTouch ? undefined : handleMobileMenuOnClick}
+          >
             {title}
           </StyledNavLink>
         ) : !items && externalURL && url ? (
@@ -120,8 +135,8 @@ export default function Header() {
                       <button
                         key={index}
                         onClick={() => {
-                          toggleDarkMode()
                           handleMobileMenuOnClick()
+                          toggleDarkMode()
                         }}
                       >
                         <SVG
@@ -156,7 +171,7 @@ export default function Header() {
           </MenuDropdown>
         ) : null
       ),
-    [darkMode, handleMobileMenuOnClick, toggleDarkMode]
+    [darkMode, handleMobileMenuOnClick, toggleDarkMode, isTouch]
   )
 
   return (
@@ -182,7 +197,7 @@ export default function Header() {
               isUpToSmall={isUpToSmall}
             />
 
-            <AccountElement active={!!account} onClick={openOrdersPanel}>
+            <AccountElement active={!!account} onClick={handleOpenOrdersPanel}>
               {account && userEthBalance && (
                 <BalanceText>
                   {formatSmart(userEthBalance, AMOUNT_PRECISION) || '0'} {nativeToken}
@@ -193,8 +208,14 @@ export default function Header() {
           </HeaderElement>
         </HeaderControls>
 
-        {isUpToLarge && <MobileMenuIcon isMobileMenuOpen={isMobileMenuOpen} onTouchStart={handleMobileMenuOnClick} />}
-        {isOrdersPanelOpen && <OrdersPanel closeOrdersPanel={closeOrdersPanel} />}
+        {isUpToLarge && (
+          <MobileMenuIcon
+            isMobileMenuOpen={isMobileMenuOpen}
+            onTouchStart={handleMobileMenuOnClick}
+            onClick={isTouch ? undefined : handleMobileMenuOnClick} // Disable onClick on touch devices and use onTouchStart
+          />
+        )}
+        {isOrdersPanelOpen && <OrdersPanel handleCloseOrdersPanel={handleCloseOrdersPanel} />}
       </HeaderModWrapper>
     </Wrapper>
   )

diff --git a/src/custom/components/Header/styled.ts b/src/custom/components/Header/styled.ts
@@ -91,6 +91,18 @@ export const Wrapper = styled.div<{ isMobileMenuOpen: boolean }>`
         css`
           position: absolute;
           top: 0;
+
+          &::before {
+            content: '';
+            width: 100%;
+            display: flex;
+            height: 60px;
+            background: ${({ theme }) => theme.bg4};
+            position: fixed;
+            top: 0;
+            left: 0;
+            z-index: 101;
+          }
         `
       }
     `}
@@ -235,26 +247,15 @@ export const HeaderLinks = styled(HeaderLinksMod)<{ isMobileMenuOpen: boolean }>
     background: ${({ theme }) => theme.bg4};
     outline: 0;
     padding: 60px 8px;
-    overflow-y: auto;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch; // iOS scroll fix
+    transform: translate3d(0,0,0); // iOS scroll fix
 
     ${
       isMobileMenuOpen &&
       css`
         display: flex;
-
-        &::before {
-          content: '';
-          width: 100%;
-          display: flex;
-          height: 60px;
-          background: ${({ theme }) => theme.bg4};
-          position: fixed;
-          top: 0;
-          left: 0;
-          z-index: 1;
-        }
-
-        // transform: translate3d(100%, 0, 0);
       `
     }
   `};

diff --git a/src/custom/components/OrdersPanel/index.tsx b/src/custom/components/OrdersPanel/index.tsx
@@ -147,10 +147,10 @@ const isConfirmed = (data: TransactionAndOrder) =>
   data.status === OrderStatus.FULFILLED || data.status === OrderStatus.EXPIRED || data.status === OrderStatus.CANCELLED
 
 export interface OrdersPanelProps {
-  closeOrdersPanel: () => void
+  handleCloseOrdersPanel: () => void
 }
 
-export default function OrdersPanel({ closeOrdersPanel }: OrdersPanelProps) {
+export default function OrdersPanel({ handleCloseOrdersPanel }: OrdersPanelProps) {
   const walletInfo = useWalletInfo()
   const toggleWalletModal = useWalletModalToggle()
 
@@ -177,20 +177,20 @@ export default function OrdersPanel({ closeOrdersPanel }: OrdersPanelProps) {
 
   return (
     <>
-      <SidebarBackground onClick={closeOrdersPanel} />
+      <SidebarBackground onClick={handleCloseOrdersPanel} />
       <SideBar>
         <Wrapper>
           <Header>
             <strong>Account</strong>
-            <CloseIcon onClick={closeOrdersPanel} />
+            <CloseIcon onClick={handleCloseOrdersPanel} />
           </Header>
 
           <AccountDetails
             ENSName={ENSName}
             pendingTransactions={pendingActivity}
             confirmedTransactions={confirmedActivity}
             toggleWalletModal={toggleWalletModal}
-            closeOrdersPanel={closeOrdersPanel}
+            handleCloseOrdersPanel={handleCloseOrdersPanel}
           />
         </Wrapper>
       </SideBar>

diff --git a/src/custom/hooks/useMediaQuery.ts b/src/custom/hooks/useMediaQuery.ts
@@ -18,5 +18,8 @@ export const useMediaQuery = (query: string) => {
 }
 
 export const upToSmall = `(max-width: ${MEDIA_WIDTHS.upToSmall}px)`
+export const isMediumOnly = `(min-width: ${MEDIA_WIDTHS.upToSmall + 1}px) and (max-width: ${MEDIA_WIDTHS.upToMedium}px)`
 export const upToMedium = `(max-width: ${MEDIA_WIDTHS.upToMedium}px)`
+export const isLargeOnly = `(min-width: ${MEDIA_WIDTHS.upToMedium + 1}px) and (max-width: ${MEDIA_WIDTHS.upToLarge}px)`
 export const upToLarge = `(max-width: ${MEDIA_WIDTHS.upToLarge}px)`
+export const LargeAndUp = `(min-width: ${MEDIA_WIDTHS.upToLarge + 1}px)`
diff --git a/src/custom/utils/toggleBodyClass.ts b/src/custom/utils/toggleBodyClass.ts
@@ -7,9 +7,11 @@ export const toggleBodyClass = (className: string) => {
 }
 
 export const addBodyClass = (className: string) => {
+  console.log('addBodyClass ', className)
   !document.body.classList.contains(className) && document.body.classList.add(className)
 }
 
 export const removeBodyClass = (className: string) => {
+  console.log('removeBodyClass ', className)
   document.body.classList.contains(className) && document.body.classList.remove(className)
 }