fix: prevent scrolling with settings modal open (#6739)

* fix: prevent scrolling with settings modal open

* fix: create hook

* fix: create tests

* fix: simplify useeffect and add JSDoc

src/components/Settings/index.tsx

@@ -3,6 +3,7 @@ import { Percent } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { AutoColumn } from 'components/Column'
 import { L2_CHAIN_IDS } from 'constants/chains'
+import useDisableScrolling from 'hooks/useDisableScrolling'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { isSupportedChainId } from 'lib/hooks/routing/clientSideSmartOrderRouter'
 import { useRef } from 'react'
@@ -51,6 +52,8 @@ export default function SettingsTab({ autoSlippage, chainId }: { autoSlippage: P
   const toggleMenu = useToggleSettingsMenu()
   useOnClickOutside(node, isOpen ? toggleMenu : undefined)
 
+  useDisableScrolling(isOpen)
+
   const isSupportedChain = isSupportedChainId(chainId)
 
   return (

src/components/Tokens/TokenDetails/ShareButton.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro'
 import { Currency } from '@uniswap/sdk-core'
 import { NATIVE_CHAIN_ID } from 'constants/tokens'
 import { chainIdToBackendName } from 'graphql/data/util'
+import useDisableScrolling from 'hooks/useDisableScrolling'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { useRef } from 'react'
 import { Link, Twitter } from 'react-feather'
@@ -73,6 +74,7 @@ export default function ShareButton({ currency }: { currency: Currency }) {
   const positionX = (window.screen.width - TWITTER_WIDTH) / 2
   const positionY = (window.screen.height - TWITTER_HEIGHT) / 2
   const address = currency.isNative ? NATIVE_CHAIN_ID : currency.wrapped.address
+  useDisableScrolling(open)
 
   const shareTweet = () => {
     toggleShare()

src/hooks/useDisableScrolling.test.ts

+import { renderHook } from '@testing-library/react'
+
+import useDisableScrolling from './useDisableScrolling'
+
+const UserAgentMock = jest.requireMock('utils/userAgent')
+jest.mock('utils/userAgent', () => ({
+  isMobile: true,
+}))
+
+describe('useDisableScrolling', () => {
+  it('should disable scrolling on mobile', () => {
+    UserAgentMock.isMobile = true
+    renderHook(() => useDisableScrolling(true))
+    expect(document.body.style.overflow).toBe('hidden')
+  })
+  it('should enable scrolling on mobile', () => {
+    UserAgentMock.isMobile = true
+    renderHook(() => useDisableScrolling(false))
+    expect(document.body.style.overflow).toBe('auto')
+  })
+  it('should not disable scrolling on desktop', () => {
+    UserAgentMock.isMobile = false
+    renderHook(() => useDisableScrolling(true))
+    expect(document.body.style.overflow).toBe('auto')
+  })
+  it('should not enable scrolling on desktop', () => {
+    UserAgentMock.isMobile = false
+    renderHook(() => useDisableScrolling(false))
+    expect(document.body.style.overflow).toBe('auto')
+  })
+})

src/hooks/useDisableScrolling.ts

+import { useEffect } from 'react'
+import { isMobile } from 'utils/userAgent'
+
+/** Disables scrolling of the main body on mobile when `true` is passed. Generally used for modals. */
+export default function useDisableScrolling(disable: boolean | undefined | null) {
+  useEffect(() => {
+    if (!isMobile) return
+    document.body.style.overflow = disable ? 'hidden' : 'auto'
+  }, [disable])
+}