ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: NetworkSelect mobile toggle bug (#3698)

Browse Source 
* 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>
This commit is contained in:
Bruno Crosier 2022-07-11 21:55:59 +02:00 committed by GitHub
parent e36722ccb4
commit 0b4c77155e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 67 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/Header/NetworkSelector.tsx
View File

@ -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 open = useModalOpen(ApplicationModal.NETWORK_SELECTOR)
const toggle = useToggleModal(ApplicationModal.NETWORK_SELECTOR)
useOnClickOutside(node, open ? toggle : undefined)
const node = useRef<HTMLDivElement>(null)
const isOpen = useModalIsOpen(ApplicationModal.NETWORK_SELECTOR)
const openModal = useOpenModal(ApplicationModal.NETWORK_SELECTOR)
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) {
toggle()
if (!skipClose) {
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>

6
src/components/Menu/index.tsx
View File

@ -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

4
src/components/Popups/ClaimPopup.tsx
View File

@ -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({

4
src/components/PrivacyPolicy/index.tsx
View File

@ -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(() => {

4
src/components/Settings/index.tsx
View File

@ -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)

6
src/components/TopLevelModals/index.tsx
View File

@ -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)

4
src/components/WalletModal/index.test.tsx
View File

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

6
src/components/WalletModal/index.tsx
View File

@ -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 toggleWalletModal = useWalletModalToggle()
const walletModalOpen = useModalIsOpen(ApplicationModal.WALLET)
const toggleWalletModal = useToggleWalletModal()
const openOptions = useCallback(() => {
setWalletView(WALLET_VIEWS.OPTIONS)

4
src/components/Web3Status/index.tsx
View File

@ -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

4
src/components/claim/ClaimModal.tsx
View File

@ -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()

4
src/pages/AddLiquidity/index.tsx
View File

@ -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()

4
src/pages/AddLiquidityV2/index.tsx
View File

@ -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()

4
src/pages/Earn/Manage.tsx
View File

@ -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) {

4
src/pages/Pool/index.tsx
View File

@ -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()

4
src/pages/RemoveLiquidity/index.tsx
View File

@ -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()

4
src/pages/Swap/index.tsx
View File

@ -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()

4
src/pages/Vote/Landing.tsx
View File

@ -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

10
src/pages/Vote/VotePage.tsx
View File

@ -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

20
src/state/application/hooks.ts
View File

@ -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 {