diff --git a/src/components/AccountDetails/index.tsx b/src/components/AccountDetails/index.tsx index 9a09647194..47b408947e 100644 --- a/src/components/AccountDetails/index.tsx +++ b/src/components/AccountDetails/index.tsx @@ -1,8 +1,8 @@ import { Trans } from '@lingui/macro' import { useWeb3React } from '@web3-react/core' import CopyHelper from 'components/AccountDetails/Copy' -import { coinbaseWalletConnection, injectedConnection } from 'connection' -import { getConnection } from 'connection/utils' +import { coinbaseWalletConnection } from 'connection' +import { getConnection, getConnectionName, getIsCoinbaseWallet, getIsMetaMask } from 'connection/utils' import { useCallback, useContext } from 'react' import { ExternalLink as LinkIcon } from 'react-feather' import { useAppDispatch } from 'state/hooks' @@ -11,7 +11,6 @@ import styled, { ThemeContext } from 'styled-components/macro' import { isMobile } from 'utils/userAgent' import { ReactComponent as Close } from '../../assets/images/x.svg' -import { SUPPORTED_WALLETS } from '../../constants/wallet' import { clearAllTransactions } from '../../state/transactions/reducer' import { ExternalLink, LinkStyledButton, ThemedText } from '../../theme' import { shortenAddress } from '../../utils' @@ -210,23 +209,14 @@ export default function AccountDetails({ const theme = useContext(ThemeContext) const dispatch = useAppDispatch() - const isMetaMask = !!window.ethereum?.isMetaMask - const isCoinbaseWallet = !!window.ethereum?.isCoinbaseWallet + const isMetaMask = getIsMetaMask() + const isCoinbaseWallet = getIsCoinbaseWallet() const isInjectedMobileBrowser = (isMetaMask || isCoinbaseWallet) && isMobile function formatConnectorName() { - const { ethereum } = window - const isMetaMask = !!(ethereum && ethereum.isMetaMask) - const name = Object.keys(SUPPORTED_WALLETS) - .filter( - (k) => - SUPPORTED_WALLETS[k].connector === connector && - (connector !== injectedConnection.connector || isMetaMask === (k === 'METAMASK')) - ) - .map((k) => SUPPORTED_WALLETS[k].name)[0] return ( - Connected with {name} + Connected with {getConnectionName(connectionType, isMetaMask)} ) } diff --git a/src/components/WalletModal/CoinbaseWalletOption.tsx b/src/components/WalletModal/CoinbaseWalletOption.tsx new file mode 100644 index 0000000000..0036e9e979 --- /dev/null +++ b/src/components/WalletModal/CoinbaseWalletOption.tsx @@ -0,0 +1,36 @@ +import { Connector } from '@web3-react/types' +import COINBASE_ICON_URL from 'assets/images/coinbaseWalletIcon.svg' +import { coinbaseWalletConnection, ConnectionType } from 'connection' +import { getConnectionName } from 'connection/utils' + +import Option from './Option' + +const BASE_PROPS = { + color: '#315CF5', + icon: COINBASE_ICON_URL, + id: 'coinbase-wallet', +} + +export function OpenCoinbaseWalletOption() { + const isActive = coinbaseWalletConnection.hooks.useIsActive() + return ( +