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

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

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

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.