0

I am still using web3-reactv6, and I want to use both MetaMask and OKX wallets in my Dapp. However, I am using the Injected connector for both, so I am currently unable to distinguish between them. How can I implement a way to differentiate the calls to these two wallets?

export const SUPPORTED_WALLETS: { [key: string]: WalletInfo } = {
  INJECTED: {
    connector: injected,
    name: 'Injected',
    iconName: 'arrow-right.svg',
    description: 'Injected web3 provider.',
    href: null,
    color: '#010101',
    primary: true,
  },
  METAMASK: {
    connector: injected,
    name: 'MetaMask',
    iconName: 'metamask.png',
    description: 'Easy-to-use browser extension.',
    href: null,
    color: '#E8831D',
  },
  OKEX: {
    connector: injected,
    name: 'Okex',
    iconName: 'okex.svg',
    description: 'Easy-to-use browser extension.',
    href: null,
    color: '#E8831D',
  }
}

1 Answer 1

0

You can check the boolean value of window.ethereum.isMetaMask property, as MetaMask injects an isMetaMask property into the window.ethereum object. So, you can use this property to check if the connected wallet is MetaMask or any other wallet.

Here's the minimal HTML code for the same:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Check Wallet Connection</title>
</head>

<body>
    <h1>Check Wallet Connection</h1>
    <p id="status"></p>
    <p id="connection"></p>
    <p id="connectedAddress"></p>
    <p id="connectedWallet"></p>
    <button id="connectButton">Connect Wallet</button>

    <script>
        window.addEventListener('load', async () => {
            const connectButton = document.getElementById('connectButton');
            connectButton.addEventListener('click', async () => {
                if (window.ethereum) {
                    try {
                        // Prompt user to connect MetaMask
                        const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
                        if (accounts.length > 0) {
                            console.log('MetaMask connected');
                            document.getElementById('status').innerText = 'MetaMask connected';
                            document.getElementById('connection').innerText = 'Wallet connected';
                            document.getElementById('connectedAddress').innerText = `Connected Address: ${accounts[0]}`;
                            document.getElementById('connectedWallet').innerText = 'Connected Wallet: MetaMask';
                        }
                    } catch (error) {
                        console.error(error);
                    }
                } else {
                    console.log('Ethereum not detected');
                    document.getElementById('status').innerText = 'Ethereum not detected';
                }
            });

            if (window.ethereum) {
                if (window.ethereum.isMetaMask) {
                    console.log('MetaMask detected');
                    document.getElementById('status').innerText = 'MetaMask detected';
                } else {
                    console.log('Other wallet detected');
                    document.getElementById('status').innerText = 'Other wallet detected';
                }

                // Check if wallet is connected using eth_accounts method
                try {
                    const accounts = await ethereum.request({ method: 'eth_accounts' });
                    if (accounts.length > 0) {
                        console.log('Wallet connected');
                        document.getElementById('connection').innerText = 'Wallet connected';
                        document.getElementById('connectedAddress').innerText = `Connected Address: ${accounts[0]}`;
                        // Check if MetaMask is connected
                        if (window.ethereum.isMetaMask) {
                            console.log('MetaMask is connected');
                            document.getElementById('connectedWallet').innerText = 'Connected Wallet: MetaMask';
                        } else {
                            console.log('Another wallet is connected');
                            document.getElementById('connectedWallet').innerText = 'Connected Wallet: Other Wallet';
                        }
                    } else {
                        console.log('Wallet not connected');
                        document.getElementById('connection').innerText = 'Wallet not connected';
                    }
                } catch (error) {
                    console.error(error);
                    console.log('Error checking wallet connection');
                }
            } else {
                console.log('Ethereum not detected');
                document.getElementById('status').innerText = 'Ethereum not detected';
            }
        });
    </script>
</body>

</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.