fix: NetworkSelect mobile toggle bug (#3698)

* fix windows dev environment bugs

* fix NetworkSelector toggle bug

* revert: ⏪ add `prei18n:extract` script back

this change to make the script Windows-compatible will be dealt with in a separate PR

* revert: ⏪ revert prettier endOfLine fix

Will be dealt with in a separate PR

* updates

Co-authored-by: Vignesh Mohankumar <vignesh@vigneshmohankumar.com>
Co-authored-by: Vignesh Mohankumar <me@vig.xyz>

src/components/Header/NetworkSelector.tsx

@@ -3,14 +3,13 @@ import { useWeb3React } from '@web3-react/core'
 import { getConnection } from 'connection/utils'
 import { CHAIN_INFO } from 'constants/chainInfo'
 import { CHAIN_IDS_TO_NAMES, SupportedChainId } from 'constants/chains'
-import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useParsedQueryString from 'hooks/useParsedQueryString'
 import usePrevious from 'hooks/usePrevious'
 import { ParsedQs } from 'qs'
 import { useCallback, useEffect, useRef } from 'react'
 import { ArrowDownCircle, ChevronDown } from 'react-feather'
 import { useHistory } from 'react-router-dom'
-import { useModalOpen, useToggleModal } from 'state/application/hooks'
+import { useCloseModal, useModalIsOpen, useOpenModal, useToggleModal } from 'state/application/hooks'
 import { addPopup, ApplicationModal } from 'state/application/reducer'
 import { updateConnectionError } from 'state/connection/reducer'
 import { useAppDispatch } from 'state/hooks'
@@ -272,17 +271,17 @@ export default function NetworkSelector() {
   const parsedQs = useParsedQueryString()
   const { urlChain, urlChainId } = getParsedChainId(parsedQs)
   const previousUrlChainId = usePrevious(urlChainId)
-  const node = useRef<HTMLDivElement>()
+  const node = useRef<HTMLDivElement>(null)
-  const open = useModalOpen(ApplicationModal.NETWORK_SELECTOR)
+  const isOpen = useModalIsOpen(ApplicationModal.NETWORK_SELECTOR)
-  const toggle = useToggleModal(ApplicationModal.NETWORK_SELECTOR)
+  const openModal = useOpenModal(ApplicationModal.NETWORK_SELECTOR)
-  useOnClickOutside(node, open ? toggle : undefined)
+  const closeModal = useCloseModal(ApplicationModal.NETWORK_SELECTOR)
-
+  const toggleModal = useToggleModal(ApplicationModal.NETWORK_SELECTOR)
   const history = useHistory()
 
   const info = chainId ? CHAIN_INFO[chainId] : undefined
 
   const onSelectChain = useCallback(
-    async (targetChain: number, skipToggle?: boolean) => {
+    async (targetChain: number, skipClose?: boolean) => {
       if (!connector) return
 
       const connectionType = getConnection(connector).type
@@ -297,11 +296,11 @@ export default function NetworkSelector() {
         dispatch(addPopup({ content: { failedSwitchNetwork: targetChain }, key: `failed-network-switch` }))
       }
 
-      if (!skipToggle) {
+      if (!skipClose) {
-        toggle()
+        closeModal()
       }
     },
-    [connector, toggle, dispatch]
+    [connector, closeModal, dispatch]
   )
 
   useEffect(() => {
@@ -332,13 +331,13 @@ export default function NetworkSelector() {
   }
 
   return (
-    <SelectorWrapper ref={node as any} onMouseEnter={toggle} onMouseLeave={toggle}>
+    <SelectorWrapper ref={node} onMouseEnter={openModal} onMouseLeave={closeModal} onClick={toggleModal}>
       <SelectorControls interactive>
         <SelectorLogo interactive src={info.logoUrl} />
         <SelectorLabel>{info.label}</SelectorLabel>
         <StyledChevronDown />
       </SelectorControls>
-      {open && (
+      {isOpen && (
         <FlyoutMenu>
           <FlyoutMenuContents>
             <FlyoutHeader>

src/components/Menu/index.tsx

@@ -26,7 +26,7 @@ import styled, { css } from 'styled-components/macro'
 
 import { ReactComponent as MenuIcon } from '../../assets/images/menu.svg'
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
-import { useModalOpen, useToggleModal } from '../../state/application/hooks'
+import { useModalIsOpen, useToggleModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import { ExternalLink } from '../../theme'
 import { ButtonPrimary } from '../Button'
@@ -210,7 +210,7 @@ export default function Menu() {
   const { account, chainId } = useWeb3React()
 
   const node = useRef<HTMLDivElement>()
-  const open = useModalOpen(ApplicationModal.MENU)
+  const open = useModalIsOpen(ApplicationModal.MENU)
   const toggleMenu = useToggleModal(ApplicationModal.MENU)
   useOnClickOutside(node, open ? toggleMenu : undefined)
   const togglePrivacyPolicy = useToggleModal(ApplicationModal.PRIVACY_POLICY)
@@ -334,7 +334,7 @@ const ExternalMenuItem = styled(MenuItem)`
 
 export const NewMenu = ({ flyoutAlignment = FlyoutAlignment.RIGHT, ToggleUI, menuItems, ...rest }: NewMenuProps) => {
   const node = useRef<HTMLDivElement>()
-  const open = useModalOpen(ApplicationModal.POOL_OVERVIEW_OPTIONS)
+  const open = useModalIsOpen(ApplicationModal.POOL_OVERVIEW_OPTIONS)
   const toggle = useToggleModal(ApplicationModal.POOL_OVERVIEW_OPTIONS)
   useOnClickOutside(node, open ? toggle : undefined)
   const ToggleElement = ToggleUI || StyledMenuIcon

src/components/Popups/ClaimPopup.tsx

@@ -8,7 +8,7 @@ import styled, { keyframes } from 'styled-components/macro'
 
 import tokenLogo from '../../assets/images/token-logo.png'
 import {
-  useModalOpen,
+  useModalIsOpen,
   useShowClaimPopup,
   useToggleSelfClaimModal,
   useToggleShowClaimPopup,
@@ -62,7 +62,7 @@ export default function ClaimPopup() {
   const toggleShowClaimPopup = useToggleShowClaimPopup()
 
   // toggle for showing this modal
-  const showClaimModal = useModalOpen(ApplicationModal.SELF_CLAIM)
+  const showClaimModal = useModalIsOpen(ApplicationModal.SELF_CLAIM)
   const toggleSelfClaimModal = useToggleSelfClaimModal()
   const handleToggleSelfClaimModal = useCallback(() => {
     sendEvent({

src/components/PrivacyPolicy/index.tsx

@@ -8,7 +8,7 @@ import styled from 'styled-components/macro'
 import { ExternalLink, ThemedText } from 'theme'
 import { isMobile } from 'utils/userAgent'
 
-import { useModalOpen, useTogglePrivacyPolicy } from '../../state/application/hooks'
+import { useModalIsOpen, useTogglePrivacyPolicy } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import { AutoColumn } from '../Column'
 import Modal from '../Modal'
@@ -81,7 +81,7 @@ const EXTERNAL_APIS = [
 
 export function PrivacyPolicyModal() {
   const node = useRef<HTMLDivElement>()
-  const open = useModalOpen(ApplicationModal.PRIVACY_POLICY)
+  const open = useModalIsOpen(ApplicationModal.PRIVACY_POLICY)
   const toggle = useTogglePrivacyPolicy()
 
   useEffect(() => {

src/components/Settings/index.tsx

@@ -10,7 +10,7 @@ import { Text } from 'rebass'
 import styled, { ThemeContext } from 'styled-components/macro'
 
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
-import { useModalOpen, useToggleSettingsMenu } from '../../state/application/hooks'
+import { useModalIsOpen, useToggleSettingsMenu } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import { useClientSideRouter, useExpertModeManager } from '../../state/user/hooks'
 import { ThemedText } from '../../theme'
@@ -122,7 +122,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
   const { chainId } = useWeb3React()
 
   const node = useRef<HTMLDivElement>()
-  const open = useModalOpen(ApplicationModal.SETTINGS)
+  const open = useModalIsOpen(ApplicationModal.SETTINGS)
   const toggle = useToggleSettingsMenu()
 
   const theme = useContext(ThemeContext)

src/components/TopLevelModals/index.tsx

@@ -2,14 +2,14 @@ import { useWeb3React } from '@web3-react/core'
 import AddressClaimModal from 'components/claim/AddressClaimModal'
 import ConnectedAccountBlocked from 'components/ConnectedAccountBlocked'
 import useAccountRiskCheck from 'hooks/useAccountRiskCheck'
-import { useModalOpen, useToggleModal } from 'state/application/hooks'
+import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 
 export default function TopLevelModals() {
-  const addressClaimOpen = useModalOpen(ApplicationModal.ADDRESS_CLAIM)
+  const addressClaimOpen = useModalIsOpen(ApplicationModal.ADDRESS_CLAIM)
   const addressClaimToggle = useToggleModal(ApplicationModal.ADDRESS_CLAIM)
 
-  const blockedAccountModalOpen = useModalOpen(ApplicationModal.BLOCKED_ACCOUNT)
+  const blockedAccountModalOpen = useModalIsOpen(ApplicationModal.BLOCKED_ACCOUNT)
   const { account } = useWeb3React()
 
   useAccountRiskCheck(account)

src/components/WalletModal/index.test.tsx

@@ -18,8 +18,8 @@ jest.mock('utils/userAgent', () => ({
 
 jest.mock('.../../state/application/hooks', () => {
   return {
-    useModalOpen: (_modal: ApplicationModal) => true,
+    useModalIsOpen: (_modal: ApplicationModal) => true,
-    useWalletModalToggle: () => {
+    useToggleWalletModal: () => {
       return
     },
   }

src/components/WalletModal/index.tsx

@@ -16,7 +16,7 @@ import styled from 'styled-components/macro'
 import MetamaskIcon from '../../assets/images/metamask.png'
 import { ReactComponent as Close } from '../../assets/images/x.svg'
 import { SUPPORTED_WALLETS } from '../../constants/wallet'
-import { useModalOpen, useWalletModalToggle } from '../../state/application/hooks'
+import { useModalIsOpen, useToggleWalletModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import { ExternalLink, ThemedText } from '../../theme'
 import { isMobile } from '../../utils/userAgent'
@@ -129,8 +129,8 @@ export default function WalletModal({
     pendingConnector ? state.connection.errorByConnectionType[getConnection(pendingConnector).type] : undefined
   )
 
-  const walletModalOpen = useModalOpen(ApplicationModal.WALLET)
+  const walletModalOpen = useModalIsOpen(ApplicationModal.WALLET)
-  const toggleWalletModal = useWalletModalToggle()
+  const toggleWalletModal = useToggleWalletModal()
 
   const openOptions = useCallback(() => {
     setWalletView(WALLET_VIEWS.OPTIONS)

src/components/Web3Status/index.tsx

@@ -10,7 +10,7 @@ import styled, { css } from 'styled-components/macro'
 import { isChainAllowed } from 'utils/switchChain'
 
 import { useHasSocks } from '../../hooks/useSocksBalance'
-import { useWalletModalToggle } from '../../state/application/hooks'
+import { useToggleWalletModal } from '../../state/application/hooks'
 import { isTransactionRecent, useAllTransactions } from '../../state/transactions/hooks'
 import { TransactionDetails } from '../../state/transactions/types'
 import { shortenAddress } from '../../utils'
@@ -139,7 +139,7 @@ function Web3StatusInner() {
 
   const hasPendingTransactions = !!pending.length
   const hasSocks = useHasSocks()
-  const toggleWalletModal = useWalletModalToggle()
+  const toggleWalletModal = useToggleWalletModal()
 
   if (!chainId) {
     return null

src/components/claim/ClaimModal.tsx

@@ -9,7 +9,7 @@ import styled from 'styled-components/macro'
 
 import Circle from '../../assets/images/blue-loader.svg'
 import tokenLogo from '../../assets/images/token-logo.png'
-import { useModalOpen, useToggleSelfClaimModal } from '../../state/application/hooks'
+import { useModalIsOpen, useToggleSelfClaimModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import { useClaimCallback, useUserClaimData, useUserUnclaimedAmount } from '../../state/claim/hooks'
 import { useUserHasSubmittedClaim } from '../../state/transactions/hooks'
@@ -48,7 +48,7 @@ const SOCKS_AMOUNT = 1000
 const USER_AMOUNT = 400
 
 export default function ClaimModal() {
-  const isOpen = useModalOpen(ApplicationModal.SELF_CLAIM)
+  const isOpen = useModalIsOpen(ApplicationModal.SELF_CLAIM)
   const toggleClaimModal = useToggleSelfClaimModal()
 
   const { account, chainId } = useWeb3React()

src/pages/AddLiquidity/index.tsx

@@ -46,7 +46,7 @@ import { useIsSwapUnsupported } from '../../hooks/useIsSwapUnsupported'
 import useTransactionDeadline from '../../hooks/useTransactionDeadline'
 import { useUSDCValue } from '../../hooks/useUSDCPrice'
 import { useV3PositionFromTokenId } from '../../hooks/useV3Positions'
-import { useWalletModalToggle } from '../../state/application/hooks'
+import { useToggleWalletModal } from '../../state/application/hooks'
 import { Bound, Field } from '../../state/mint/v3/actions'
 import { useTransactionAdder } from '../../state/transactions/hooks'
 import { TransactionType } from '../../state/transactions/types'
@@ -83,7 +83,7 @@ export default function AddLiquidity({
 }: RouteComponentProps<{ currencyIdA?: string; currencyIdB?: string; feeAmount?: string; tokenId?: string }>) {
   const { account, chainId, provider } = useWeb3React()
   const theme = useContext(ThemeContext)
-  const toggleWalletModal = useWalletModalToggle() // toggle wallet when disconnected
+  const toggleWalletModal = useToggleWalletModal() // toggle wallet when disconnected
   const expertMode = useIsExpertMode()
   const addTransaction = useTransactionAdder()
   const positionManager = useV3NFTPositionManagerContract()

src/pages/AddLiquidityV2/index.tsx

@@ -29,7 +29,7 @@ import { useV2RouterContract } from '../../hooks/useContract'
 import { useIsSwapUnsupported } from '../../hooks/useIsSwapUnsupported'
 import useTransactionDeadline from '../../hooks/useTransactionDeadline'
 import { PairState } from '../../hooks/useV2Pairs'
-import { useWalletModalToggle } from '../../state/application/hooks'
+import { useToggleWalletModal } from '../../state/application/hooks'
 import { Field } from '../../state/mint/actions'
 import { useDerivedMintInfo, useMintActionHandlers, useMintState } from '../../state/mint/hooks'
 import { useTransactionAdder } from '../../state/transactions/hooks'
@@ -68,7 +68,7 @@ export default function AddLiquidity({
       ((currencyA && currencyA.equals(wrappedNativeCurrency)) || (currencyB && currencyB.equals(wrappedNativeCurrency)))
   )
 
-  const toggleWalletModal = useWalletModalToggle() // toggle wallet when disconnected
+  const toggleWalletModal = useToggleWalletModal() // toggle wallet when disconnected
 
   const expertMode = useIsExpertMode()
 

src/pages/Earn/Manage.tsx

@@ -23,7 +23,7 @@ import usePrevious from '../../hooks/usePrevious'
 import { useTotalSupply } from '../../hooks/useTotalSupply'
 import useUSDCPrice from '../../hooks/useUSDCPrice'
 import { useV2Pair } from '../../hooks/useV2Pairs'
-import { useWalletModalToggle } from '../../state/application/hooks'
+import { useToggleWalletModal } from '../../state/application/hooks'
 import { useTokenBalance } from '../../state/connection/hooks'
 import { useStakingInfo } from '../../state/stake/hooks'
 import { ThemedText } from '../../theme'
@@ -142,7 +142,7 @@ export default function Manage({
   const valueOfTotalStakedAmountInUSDC =
     valueOfTotalStakedAmountInWETH && USDPrice?.quote(valueOfTotalStakedAmountInWETH)
 
-  const toggleWalletModal = useWalletModalToggle()
+  const toggleWalletModal = useToggleWalletModal()
 
   const handleDepositClick = useCallback(() => {
     if (account) {

src/pages/Pool/index.tsx

@@ -11,7 +11,7 @@ import { useV3Positions } from 'hooks/useV3Positions'
 import { useContext } from 'react'
 import { BookOpen, ChevronDown, ChevronsRight, Inbox, Layers, PlusCircle } from 'react-feather'
 import { Link } from 'react-router-dom'
-import { useWalletModalToggle } from 'state/application/hooks'
+import { useToggleWalletModal } from 'state/application/hooks'
 import { useUserHideClosedPositions } from 'state/user/hooks'
 import styled, { ThemeContext } from 'styled-components/macro'
 import { HideSmall, ThemedText } from 'theme'
@@ -128,7 +128,7 @@ function PositionsLoadingPlaceholder() {
 
 export default function Pool() {
   const { account, chainId } = useWeb3React()
-  const toggleWalletModal = useWalletModalToggle()
+  const toggleWalletModal = useToggleWalletModal()
 
   const theme = useContext(ThemeContext)
   const [userHideClosedPositions, setUserHideClosedPositions] = useUserHideClosedPositions()

src/pages/RemoveLiquidity/index.tsx

@@ -30,7 +30,7 @@ import { ApprovalState, useApproveCallback } from '../../hooks/useApproveCallbac
 import { usePairContract, useV2RouterContract } from '../../hooks/useContract'
 import useDebouncedChangeHandler from '../../hooks/useDebouncedChangeHandler'
 import useTransactionDeadline from '../../hooks/useTransactionDeadline'
-import { useWalletModalToggle } from '../../state/application/hooks'
+import { useToggleWalletModal } from '../../state/application/hooks'
 import { Field } from '../../state/burn/actions'
 import { useBurnActionHandlers, useBurnState, useDerivedBurnInfo } from '../../state/burn/hooks'
 import { useTransactionAdder } from '../../state/transactions/hooks'
@@ -58,7 +58,7 @@ export default function RemoveLiquidity({
   const theme = useContext(ThemeContext)
 
   // toggle wallet when disconnected
-  const toggleWalletModal = useWalletModalToggle()
+  const toggleWalletModal = useToggleWalletModal()
 
   // burn state
   const { independentField, typedValue } = useBurnState()

src/pages/Swap/index.tsx

@@ -42,7 +42,7 @@ import useIsArgentWallet from '../../hooks/useIsArgentWallet'
 import { useIsSwapUnsupported } from '../../hooks/useIsSwapUnsupported'
 import { useUSDCValue } from '../../hooks/useUSDCPrice'
 import useWrapCallback, { WrapErrorText, WrapType } from '../../hooks/useWrapCallback'
-import { useWalletModalToggle } from '../../state/application/hooks'
+import { useToggleWalletModal } from '../../state/application/hooks'
 import { Field } from '../../state/swap/actions'
 import {
   useDefaultsFromURLSearch,
@@ -105,7 +105,7 @@ export default function Swap({ history }: RouteComponentProps) {
   const theme = useContext(ThemeContext)
 
   // toggle wallet when disconnected
-  const toggleWalletModal = useWalletModalToggle()
+  const toggleWalletModal = useToggleWalletModal()
 
   // for expert mode
   const [isExpertMode] = useExpertModeManager()

src/pages/Vote/Landing.tsx

@@ -16,7 +16,7 @@ import { darken } from 'polished'
 import { useState } from 'react'
 import { Link } from 'react-router-dom'
 import { Button } from 'rebass/styled-components'
-import { useModalOpen, useToggleDelegateModal } from 'state/application/hooks'
+import { useModalIsOpen, useToggleDelegateModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import { useTokenBalance } from 'state/connection/hooks'
 import { ProposalData, ProposalState } from 'state/governance/hooks'
@@ -112,7 +112,7 @@ export default function Landing() {
   const [hideCancelled, setHideCancelled] = useState(true)
 
   // toggle for showing delegation modal
-  const showDelegateModal = useModalOpen(ApplicationModal.DELEGATE)
+  const showDelegateModal = useModalIsOpen(ApplicationModal.DELEGATE)
   const toggleDelegateModal = useToggleDelegateModal()
 
   // get data to list all proposals

src/pages/Vote/VotePage.tsx

@@ -31,7 +31,7 @@ import {
 import { ZERO_ADDRESS } from '../../constants/misc'
 import { UNI } from '../../constants/tokens'
 import {
-  useModalOpen,
+  useModalIsOpen,
   useToggleDelegateModal,
   useToggleExecuteModal,
   useToggleQueueModal,
@@ -168,19 +168,19 @@ export default function VotePage({
   const [voteOption, setVoteOption] = useState<VoteOption | undefined>(undefined)
 
   // modal for casting votes
-  const showVoteModal = useModalOpen(ApplicationModal.VOTE)
+  const showVoteModal = useModalIsOpen(ApplicationModal.VOTE)
   const toggleVoteModal = useToggleVoteModal()
 
   // toggle for showing delegation modal
-  const showDelegateModal = useModalOpen(ApplicationModal.DELEGATE)
+  const showDelegateModal = useModalIsOpen(ApplicationModal.DELEGATE)
   const toggleDelegateModal = useToggleDelegateModal()
 
   // toggle for showing queue modal
-  const showQueueModal = useModalOpen(ApplicationModal.QUEUE)
+  const showQueueModal = useModalIsOpen(ApplicationModal.QUEUE)
   const toggleQueueModal = useToggleQueueModal()
 
   // toggle for showing execute modal
-  const showExecuteModal = useModalOpen(ApplicationModal.EXECUTE)
+  const showExecuteModal = useModalIsOpen(ApplicationModal.EXECUTE)
   const toggleExecuteModal = useToggleExecuteModal()
 
   // get and format date from data

src/state/application/hooks.ts

@@ -5,18 +5,28 @@ import { useAppDispatch, useAppSelector } from 'state/hooks'
 import { AppState } from '../index'
 import { addPopup, ApplicationModal, PopupContent, removePopup, setOpenModal } from './reducer'
 
-export function useModalOpen(modal: ApplicationModal): boolean {
+export function useModalIsOpen(modal: ApplicationModal): boolean {
   const openModal = useAppSelector((state: AppState) => state.application.openModal)
   return openModal === modal
 }
 
 export function useToggleModal(modal: ApplicationModal): () => void {
-  const open = useModalOpen(modal)
+  const isOpen = useModalIsOpen(modal)
   const dispatch = useAppDispatch()
-  return useCallback(() => dispatch(setOpenModal(open ? null : modal)), [dispatch, modal, open])
+  return useCallback(() => dispatch(setOpenModal(isOpen ? null : modal)), [dispatch, modal, isOpen])
 }
 
-export function useWalletModalToggle(): () => void {
+export function useOpenModal(modal: ApplicationModal): () => void {
+  const dispatch = useAppDispatch()
+  return useCallback(() => dispatch(setOpenModal(modal)), [dispatch, modal])
+}
+
+export function useCloseModal(_modal: ApplicationModal): () => void {
+  const dispatch = useAppDispatch()
+  return useCallback(() => dispatch(setOpenModal(null)), [dispatch])
+}
+
+export function useToggleWalletModal(): () => void {
   return useToggleModal(ApplicationModal.WALLET)
 }
 
@@ -25,7 +35,7 @@ export function useToggleSettingsMenu(): () => void {
 }
 
 export function useShowClaimPopup(): boolean {
-  return useModalOpen(ApplicationModal.CLAIM_POPUP)
+  return useModalIsOpen(ApplicationModal.CLAIM_POPUP)
 }
 
 export function useToggleShowClaimPopup(): () => void {