How can i make metamask and phantom wallet co-exist in the same dapp

Developer Discussion
1

hi so on opensea i saw that they have solved the problem that occurs when u try to connect MetaMask it connects phantom wallet now when i click MetaMask it connects MetaMask fine and when i click phantom it connects phantom fine but on my code the problem is still occuring i cant seem to figure out how opensea did it i need both wallets on my website so i was wondering if anyone has figured it out yet

const getPhantomProvider = () => {
    window.localStorage.clear();
    window.sessionStorage.clear();
    if ('phantom' in window) {
        const anyWindow = window;
        const provider = anyWindow.phantom?.ethereum;

        console.log(anyWindow)

        if (provider.isPhantom) {
            return provider;
        }
    }

    window.open('https://phantom.app/', '_blank');
};

const getMetamaskProvider = () => {
    window.localStorage.clear();
    window.sessionStorage.clear();
    if ('ethereum' in window) {
        const anyWindow = window;
        const provider = anyWindow?.ethereum;

        console.log(anyWindow)

        if (provider.isMetaMask) {
            return provider;
        }
    }

    window.open('https://metamask.io/', '_blank');
};

//function to pick a provider, more providers will be added for now we only support (walletconnect, metamask)
async function ApproveTranX(wallet) {
    console.log('provider ApproveTranX', wallet)

    const web3Modal = new Web3Modal()
    let connection
    let provider
    switch (wallet) {
        case "walletconnect":
            const walletConnect = await EthereumProvider.init({
                projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID,
                chains: [1, 137],
                showQrModal: true,
                qrModalOptions: {
                    themeMode: 'dark',
                },
            });
            await walletConnect.enable();
            provider = new ethers.providers.Web3Provider(walletConnect, 'any')
            connection = walletConnect;
            break;
        case "metamask":
            const Metamaskprovider = getMetamaskProvider();
            await Metamaskprovider.request({ method: "eth_requestAccounts" });
            connection = Metamaskprovider;
            provider = new ethers.providers.Web3Provider(connection, 'any');
            break;
        case "phantom":
            const Phantomprovider = getPhantomProvider();
            await Phantomprovider.request({ method: "eth_requestAccounts" })
            connection = Phantomprovider;
            provider = new ethers.providers.Web3Provider(connection, 'any')
            break;
        default:
            throw new Error(`"Unsupported wallet." ${wallet}`);
    }

    return { connection, provider };
}

thanks in advance for you help thats my code above

1 Like
2

Hi @onefire please check this stack overflow post: metamask - Connecting multiple wallets to Dapp - Ethereum Stack Exchange there are a few examples that you can try. Let me know if you are looking for something else