Using web3 from MetaMask in React

Question

I'm attempting to use the web3 from MetaMask in a React js app like so:

import Web3 from 'web3';

    componentDidMount(){
            if (typeof web3 !== 'undefined') {
                console.log(web3.currentProvider);
                    // Use Mist/MetaMask's provider
                    var web3js = new Web3(web3.currentProvider);

                    web3.version.getNetwork((err, netId) => {
                    switch (netId) {
                        case "1":
                            console.log('This is mainnet')
                            break
                        case "2":
                            console.log('This is the deprecated Morden test network.')
                            break
                        case "3":
                            console.log('This is the ropsten test network.')
                            break
                        case "4":
                            console.log('This is the Rinkeby test network.')
                            break
                        case "42":
                            console.log('This is the Kovan test network.')
                            break
                        default:
                            console.log('This is an unknown network.')
                    }
                })
            } else {
                    console.log('No web3? You should consider trying MetaMask!')
            }           
        }

This the output I get in the dev console in chrome:

Clearly at some point web3 is being properly defined by MetaMask based on the first two lines but then react throws an error saying web3 isn't defined for the instances it appears inside if(typeof web3 !== 'undefined'). Everything I've tried results in the same error or web3 not loading.

score 9 · Answer 1 · answered Feb 26 '18 at 10:38

You should use web3 provider like MetaMask in browser. This is script that I use for web3 detection:

window.addEventListener('load', function () {
    if (typeof web3 !== 'undefined') {        
        window.web3 = new Web3(window.web3.currentProvider)

        if (window.web3.currentProvider.isMetaMask === true) {
            window.web3.eth.getAccounts((error, accounts) => {
                if (accounts.length == 0) {
                    // there is no active accounts in MetaMask
                }
                else {
                    // It's ok
                }
            });
        } else {
            // Another web3 provider
        }
    } else {
        // No web 3 provider
    }    
});

score 7 · Accepted Answer · edited Sep 07 '22 at 18:53

Please note that as of November of 2018, there has been a breaking change to MetaMask where MetaMask will no longer automatically inject web3 into the browser. Instead users must grant the DApp access to their accounts via accepting a prompt dialog created by window.ethereum.enable(). See the below code for handling MetaMask in both modern DApp browsers as well as legacy DApp browsers.

// Modern DApp Browsers
if (window.ethereum) {
   web3 = new Web3(window.ethereum);
   try { 
      window.ethereum.enable().then(function() {
          // User has allowed account access to DApp...
      });
   } catch(e) {
      // User has denied account access to DApp...
   }
}
// Legacy DApp Browsers
else if (window.web3) {
    web3 = new Web3(window.web3.currentProvider);
}
// Non-DApp Browsers
else {
    alert('You have to install MetaMask !');
}

score 4 · Answer 3 · answered Apr 23 '21 at 19:06

To new readers that want to fix this issue, as of January 2021, Metamask has removed it's injected window.web3 API. To use connect your app to Metamask, I'd try something like this

export const connectWallet = async () => {
  if (window.ethereum) { //check if Metamask is installed
        try {
            const address = await window.ethereum.enable(); //connect Metamask
            const obj = {
                    connectedStatus: true,
                    status: "",
                    address: address
                }
                return obj;
             
        } catch (error) {
            return {
                connectedStatus: false,
                status: " Connect to Metamask using the button on the top right."
            }
        }
        
  } else {
        return {
            connectedStatus: false,
            status: " You must install Metamask into your browser: https://metamask.io/download.html"
        }
      } 
};

In this tutorial on creating an NFT Minter with React, you can also learn how to call smart contract functions and sign transactions via Metamask! Best of luck :)

score 0 · Answer 4 · answered Sep 03 '21 at 14:32

Thanks for the other answers in this question. I refer to them to create this hook in my project.


export function useCheckMetaMaskInstalled() {
  const [installed, setInstalled] = useState(false);
  useEffect(() => {
    if (window.ethereum) {
      setInstalled(true);
    }
  }, []);
  return installed;
}

Using web3 from MetaMask in React

4 Answers4