js连接web3，连接小狐狸metamask钱包，实现链不对后切换网络和创建网络

原创已于 2024-06-19 15:03:53 修改 · 7.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#以太坊 #web3 #合约

于 2022-04-07 18:54:15 首次发布

web3 同时被 2 个专栏收录

1 篇文章

订阅专栏

metamask

1 篇文章

订阅专栏

本文档展示了如何使用JavaScript通过web3库连接Metamask钱包，并在链ID不匹配时自动切换或创建以太坊网络。代码示例详细说明了配置过程，包括在网络更改后重新连接web3和智能合约的步骤。

直接上代码，我这里吧所有配置都改成正式的链56，一旦用户的小狐狸钱包现在的链不一致，就询问切换网络，没有就创建网络，网络切换成功后，收到监听，重新连接一下web3,就是重新调用一些connectWeb3这个方法，再连接合约

  connectWeb3: async function () { 
// 判断链对不，链不对就请求切换网络，或者添加网络，
    if (window.ethereum) {
      try {
        await (window.ethereum as any).request({
          method: 'wallet_switchEthereumChain',
          params: [{
            chainId: Web3.utils.numberToHex(56) // 目标链ID
          }]
        })
      } catch (e) {
        if ((e as any).code === 4902) {
          try {
            await (window.ethereum as any).request({
                method: 'wallet_addEthereumChain',
                params: [
                  {
                    chainId: Web3.utils.numberToHex(56), // 目标链ID
                    chainName: 'Binance Smart Chain Mainnet',
                    nativeCurrency: {
                      name: 'bnb',
                      symbol: 'bnb',
                      decimals: 18
                    },
                    rpcUrls: ['https://bsc-dataseed.binance.org'], // 节点
                    blockExplorerUrls: ['https://www.bscscan.com']
                  }
                ]
              })
          } catch (ee) {
            //
          }
        } else if ((e as any).code === 4001) return
      }
    }


    // 监听账户变化
    const func: Function = async function (accounts) {
      _this.account = accounts[0];
      if (_this.isConnect) {
        console.log("Contract Account Changed");
        _this.init();// 清空数据
        _this.connectWeb3();// 链变化，然后重新调用此方法，连接web3
      }
    };
    let web3Provider: any = null;
    if (window.ethereum) {
      (window.ethereum as any).autoRefreshOnNetworkChange = false;
      (window.ethereum as any).on("accountsChanged", func);
    // 监听链id变化
      (window.ethereum as any).on("chainChanged", (chainId1) => {
        console.log("Chain Changed");
        _this.chainId = chainId1;
        func([_this.account]);
      });
      web3Provider = window.ethereum;
      try {
        await (window.ethereum as any).enable();
      } catch (error) {
        console.error("User denied account access");
      }
    } else if (window.web3) {
      web3Provider = window.web3.currentProvider;
    } else {
      web3Provider = new                 
      Web3.providers.HttpProvider(ChainLink[TargetChainId.toString()]);// 连接rpc网络
    }
    _this.web3 = new Web3(web3Provider);
    _this.web3.eth.getAccounts(function (error, result) {
      if (!error) console.log(result);
    });
    _this.isConnect = true;
    _this.account = (window.ethereum as any).selectedAddress || null;
    _this.chainId = (window.ethereum as any).networkVersion || null;
    if(_this.chainId!=TargetChainId) return;// 链不对,就不去连接合约了
    if (_this.account) {
      const time = Math.round(new Date().valueOf() / 1000);
    // 签名
      _this.web3.eth.personal.sign("Sign this message to login Game." + time, _this.account)
        .then((res) => {
          _this.signature = res + "|" + time;
        });
      _this.connectContract();// 连接合约
    }
    return _this.account;
}