diff --git a/src/hooks/useAddTokenToMetaMask.ts b/src/hooks/useAddToken.ts similarity index 82% rename from src/hooks/useAddTokenToMetaMask.ts rename to src/hooks/useAddToken.ts index 1cc079170c..c9e818c3cd 100644 --- a/src/hooks/useAddTokenToMetaMask.ts +++ b/src/hooks/useAddToken.ts @@ -3,18 +3,18 @@ import { getCurrencyLogoUrls } from 'app/components/CurrencyLogo/CurrencyLogo' import { useActiveWeb3React } from 'app/services/web3' import { useCallback, useState } from 'react' -export default function useAddTokenToMetaMask(currencyToAdd: Currency | undefined): { +export default function useAddToken(currencyToAdd: Currency | undefined): { addToken: () => void success: boolean | undefined } { - const { chainId, library } = useActiveWeb3React() + const { library } = useActiveWeb3React() const token: Token | undefined = currencyToAdd?.wrapped const [success, setSuccess] = useState() const addToken = useCallback(() => { - if (library && library.provider.isMetaMask && library.provider.request && token) { + if (library && library.provider.request && token) { library.provider .request({ method: 'wallet_watchAsset', diff --git a/src/modals/TransactionConfirmationModal/index.tsx b/src/modals/TransactionConfirmationModal/index.tsx index 94956a54c7..9685963421 100644 --- a/src/modals/TransactionConfirmationModal/index.tsx +++ b/src/modals/TransactionConfirmationModal/index.tsx @@ -8,10 +8,11 @@ import ExternalLink from 'app/components/ExternalLink' import HeadlessUiModal from 'app/components/Modal/HeadlessUIModal' import Typography from 'app/components/Typography' import { getExplorerLink } from 'app/functions' -import useAddTokenToMetaMask from 'app/hooks/useAddTokenToMetaMask' +import useAddTokenToWallet from 'app/hooks/useAddToken' +import useIsCoinbaseWallet from 'app/hooks/useIsCoinbaseWallet' import { useActiveWeb3React } from 'app/services/web3' import Lottie from 'lottie-react' -import React, { FC } from 'react' +import React, { FC, useMemo } from 'react' interface ConfirmationPendingContentProps { onDismiss: () => void @@ -52,7 +53,18 @@ export const TransactionSubmittedContent: FC = }) => { const { i18n } = useLingui() const { library } = useActiveWeb3React() - const { addToken, success } = useAddTokenToMetaMask(currencyToAdd) + const { addToken, success } = useAddTokenToWallet(currencyToAdd) + + const isMetaMask = library?.provider?.isMetaMask + const isCbWallet = useIsCoinbaseWallet() + + const shouldRenderAddTokenButton = currencyToAdd && (isMetaMask || isCbWallet); + + const walletName = useMemo(() => { + if (isMetaMask) return 'MetaMask' + if (isCbWallet) return 'Coinbase Wallet' + }, [isCbWallet, isMetaMask]) + return (
@@ -72,10 +84,10 @@ export const TransactionSubmittedContent: FC = )} - {currencyToAdd && library?.provider?.isMetaMask && ( + {shouldRenderAddTokenButton && ( )}