fix: focus issues with WalletConnect modal (#6060)

* Update index.tsx

* Update index.tsx

* add type

* chore: fix lint
This commit is contained in:
Mike Grabowski 2023-03-07 01:07:08 +04:00 committed by GitHub
parent 498d4bf667
commit cba1b83cd6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -3,6 +3,7 @@ import { sendAnalyticsEvent, user } from '@uniswap/analytics'
import { CustomUserProperties, InterfaceEventName, WalletConnectionResult } from '@uniswap/analytics-events' import { CustomUserProperties, InterfaceEventName, WalletConnectionResult } from '@uniswap/analytics-events'
import { useWeb3React } from '@web3-react/core' import { useWeb3React } from '@web3-react/core'
import { Connector } from '@web3-react/types' import { Connector } from '@web3-react/types'
import { WalletConnect } from '@web3-react/walletconnect'
import { sendEvent } from 'components/analytics' import { sendEvent } from 'components/analytics'
import { AutoColumn } from 'components/Column' import { AutoColumn } from 'components/Column'
import { AutoRow } from 'components/Row' import { AutoRow } from 'components/Row'
@ -367,8 +368,20 @@ export default function WalletModal({
) )
} }
/**
* Do not show <WalletModal /> when WalletConnect connection modal is open to prevent focus issues when
* trying to interact with a WalletConnect modal.
*/
const isWalletConnectModalOpen =
walletView === WALLET_VIEWS.PENDING && pendingConnector instanceof WalletConnect && !pendingError
return ( return (
<Modal isOpen={walletModalOpen} onDismiss={toggleWalletModal} minHeight={false} maxHeight={90}> <Modal
isOpen={walletModalOpen && !isWalletConnectModalOpen}
onDismiss={toggleWalletModal}
minHeight={false}
maxHeight={90}
>
<Wrapper data-testid="wallet-modal">{getModalContent()}</Wrapper> <Wrapper data-testid="wallet-modal">{getModalContent()}</Wrapper>
</Modal> </Modal>
) )