在React中使用MetaMask中的web3

时间:2018-02-11 18:47:58

标签: reactjs web3js web3 metamask

我试图在React js app中使用MetaMask中的web3,如下所示:

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!')
            }           
        }

这是我在chrome控制台中获得的输出:

enter image description here

显然,在某些时候,MetaMask正在基于前两行正确定义web3但是然后反应会抛出一个错误,说明web3不是为它出现在其中的实例定义的(typeof web3!==&#39 ;未定义&#39)。我尝试的所有内容都会导致相同的错误或web3无法加载。

4 个答案:

答案 0 :(得分:8)

您应该在浏览器中使用MetaMask等web3提供程序。 这是我用于web3检测的脚本:

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
    }    
});

答案 1 :(得分:2)

web3替换window.web3似乎解决了我的问题。

/r/ethdev上向/ u / _roni致敬,寻求他们的帮助。

答案 2 :(得分:2)

请注意,自2018年11月起,breaking change to MetaMask处MetaMask将不再自动将web3注入浏览器。相反,用户必须通过接受window.ethereum.enable()创建的提示对话框来授予DApp访问其帐户的权限。请参阅以下代码,以在现代DApp浏览器和旧版DApp浏览器中处理MetaMask。

// 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(web3.currentProvider);
}
// Non-DApp Browsers
else {
    alert('You have to install MetaMask !');
}

答案 3 :(得分:0)

致希望解决此问题的新读者,自 January 2021, Metamask has removed it's injected window.web3 API 起。要使用将您的应用连接到 Metamask,我会尝试这样的操作

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"
        }
      } 
};

this tutorial on creating an NFT Minter with React中,您还可以学习如何通过Metamask调用智能合约功能和签署交易!祝你好运:)