fix: Fix to mobile wallet experience (#4508)

* fixing wallet on mobile and making useClickoutside more extensible


Co-authored-by: Alex Ball <alexball@UNISWAP-MAC-038.local>

src/components/WalletDropdown/index.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import styled from 'styled-components/macro'
+import { Z_INDEX } from 'theme'
 
 import { useModalIsOpen } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
@@ -36,13 +37,13 @@ const WalletDropdownWrapper = styled.div`
   position: absolute;
   top: 65px;
   right: 20px;
+  z-index: ${Z_INDEX.dropdown};
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
     top: unset;
     left: 0;
     right: 0;
     bottom: 56px;
-    z-index: 1;
   }
 `
 

src/components/Web3Status/index.tsx

@@ -7,7 +7,6 @@ import WalletDropdown from 'components/WalletDropdown'
 import { getConnection } from 'connection/utils'
 import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { Portal } from 'nft/components/common/Portal'
-import { useIsMobile } from 'nft/hooks'
 import { getIsValidSwapQuote } from 'pages/Swap'
 import { darken } from 'polished'
 import { useMemo, useRef } from 'react'
@@ -289,11 +288,11 @@ export default function Web3Status() {
 
   const allTransactions = useAllTransactions()
   const ref = useRef<HTMLDivElement>(null)
+  const walletRef = useRef<HTMLDivElement>(null)
   const closeModal = useCloseModal(ApplicationModal.WALLET_DROPDOWN)
   const isOpen = useIsOpen()
-  const isMobile = useIsMobile()
 
-  useOnClickOutside(ref, isOpen ? closeModal : undefined)
+  useOnClickOutside(ref, isOpen ? closeModal : undefined, [walletRef])
 
   const sortedRecentTransactions = useMemo(() => {
     const txs = Object.values(allTransactions)
@@ -307,13 +306,11 @@ export default function Web3Status() {
     <span ref={ref}>
       <Web3StatusInner />
       <WalletModal ENSName={ENSName ?? undefined} pendingTransactions={pending} confirmedTransactions={confirmed} />
-      {isMobile ? (
-        <Portal>
+      <Portal>
+        <span ref={walletRef}>
           <WalletDropdown />
-        </Portal>
-      ) : (
-        <WalletDropdown />
-      )}
+        </span>
+      </Portal>
     </span>
   )
 }

src/hooks/useOnClickOutside.ts

@@ -2,18 +2,27 @@ import { RefObject, useEffect, useRef } from 'react'
 
 export function useOnClickOutside<T extends HTMLElement>(
   node: RefObject<T | undefined>,
-  handler: undefined | (() => void)
+  handler: undefined | (() => void),
+  ignoredNodes: Array<RefObject<T | undefined>> = []
 ) {
   const handlerRef = useRef<undefined | (() => void)>(handler)
+
   useEffect(() => {
     handlerRef.current = handler
   }, [handler])
 
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
-      if (node.current?.contains(e.target as Node) ?? false) {
+      const nodeClicked = node.current?.contains(e.target as Node)
+      const ignoredNodeClicked = ignoredNodes.reduce(
+        (reducer, val) => reducer || !!val.current?.contains(e.target as Node),
+        false
+      )
+
+      if ((nodeClicked || ignoredNodeClicked) ?? false) {
         return
       }
+
       if (handlerRef.current) handlerRef.current()
     }
 
@@ -22,5 +31,5 @@ export function useOnClickOutside<T extends HTMLElement>(
     return () => {
       document.removeEventListener('mousedown', handleClickOutside)
     }
-  }, [node])
+  }, [node, ignoredNodes])
 }