Issue getting Metamask account using Web3 1.1.0

Question

I am working on a React app which uses a library that has Web3 as a dependency. I had previously been able to the get the current Metamask address with the following code:

 const injectedWeb3 = window.web3 || undefined;

 this.state = {
      web3: injectedWeb3
    };

  getAccount() {
    const { web3 } = this.state;
    if (web3.eth.accounts[0]) return web3.eth.accounts[0];
    throw new Error('Your MetaMask is locked. Unlock it to continue.');
  }

Then I updated that library to its latest version which changed it's Web3 dependency to Web3 1.0 . Now when I run the exact same code I get the following error:

Error: Invalid JSON RPC response: undefined 
TypeError: e is not a function[Learn More] 

Any thoughts as to what might be going on?

Answer 1

Found a workaround for this, you can use window.ethereum.enable() and attach it to the web3.eth.defaultAccount variable,

loadAccount : async () =>{
       window.ethereum.enable().then((account) =>{
           const defaultAccount = account[0]
           web3.eth.defaultAccount = defaultAccount

       })
    }

you can then access the Account ID / Address by using web3.eth.defaultAccount

Answer 2

Web3.js v1 has many differences from the previous version. Account request is now asynchronous:

web3.eth.getAccounts().then(it => {
            account = it[0];
       ...
});

If you need to wait for the operation to complete, use await

update

async function getAccount() {
    var account = 0;
    if (window.ethereum) { // for modern DApps browser
        window.web3 = new Web3(ethereum);
        try {
            await ethereum.enable();
        } catch (error) {
            console.error(error);
        }
    }else if (web3) { // for old DApps browser
        window.web3 = new Web3(web3.currentProvider);
    } else {
        console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
    }

    if(window.web3!== 'undefined'){
            try {
                await window.web3.eth.getAccounts().then(it => {
                    account = it[0];
             }); 
    }
    return account;
}