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 (
+
+ )
+}
+
+export function CoinbaseWalletOption({ tryActivation }: { tryActivation: (connector: Connector) => void }) {
+ const isActive = coinbaseWalletConnection.hooks.useIsActive()
+ return (
+