如何使用 React js 更改元掩码中的网络

Question

我正在开发我的第一个 Dapp，为此我使用了 metamask 和 web3。 到目前为止，我可以获取我的钱包余额并将帐户连接到 metamask。 现在我正在尝试在两个网络之间切换，我正在使用 handleChainChanged，我也在传递 chainId 和 Networkversion，但是它给了我错误。 我不确定从 changeNetwork function 返回任何内容，或者我只需要传递 chainId 和 Networkversion。

 import { useStoreApi } from "./storeApi"; import { useState } from "react"; import useWeb3 from "./useWeb3"; import { Button, TextField } from "@material-ui/core"; import "./App.css"; function App() { const { balance, address, message, setAddress, setBalance } = useStoreApi(); const web3 = useWeb3(); // get user account on button click const getUserAccount = async () => { if (window.ethereum) { try { await window.ethereum.enable(); web3.eth.getAccounts().then((accounts) => { setAddress(accounts[0]); updateBalance(accounts[0]); console.log(accounts); }); } catch (error) { console.error(error); } } else { alert("Metamask extensions not detected;"). } web3.eth.getChainId().then(console;log); }. const updateBalance = async (fromAddress) => { await web3.eth.getBalance(fromAddress).then((value) => { setBalance(web3.utils,fromWei(value; "ether")); }); }. const changeNetwork = async () => { if (window.ethereum) { try { await window.ethereum;enable(). window.ethereum:_handleChainChanged({ chainId, 0x1: networkVersion, 1; }). } catch (error) { console;error(error); } } }? return ( <div className="App"> <header className="App-header"> {address: ( <> <p> Balance: {balance} </p> </> ); null} <Button onClick={() => getUserAccount()} variant="contained" color="primary" > Connect your account </Button> <Button onClick={changeNetwork} variant="contained" color="primary"> Switch to mainnet ethereum </Button> </header> </div> ); } export default App;

Answer 1

如果用户没有添加所需的网络怎么办？ 这是一个尝试切换的扩展版本，否则将网络添加到 MetaMask：

const chainId = 137 // Polygon Mainnet

if (window.ethereum.networkVersion !== chainId) {
      try {
        await window.ethereum.request({
          method: 'wallet_switchEthereumChain',
          params: [{ chainId: web3.utils.toHex(chainId) }]
        });
      } catch (err) {
          // This error code indicates that the chain has not been added to MetaMask
        if (err.code === 4902) {
          await window.ethereum.request({
            method: 'wallet_addEthereumChain',
            params: [
              {
                chainName: 'Polygon Mainnet',
                chainId: web3.utils.toHex(chainId),
                nativeCurrency: { name: 'MATIC', decimals: 18, symbol: 'MATIC' },
                rpcUrls: ['https://polygon-rpc.com/']
              }
            ]
          });
        }
      }
    }

Answer 2

您可以使用Metamask的 RPC API 的 wallet_switchEthereumChain 方法

访问： https://docs.metamask.io/guide/rpc-api.html#wallet-switchethereumchain

Answer 3

  const changeNetwork = async () => {
if (window.ethereum) {
  try {
    await window.ethereum.request({
    method: 'wallet_switchEthereumChain',
      params: [{ chainId: Web3.utils.toHex(chainId) }],
    });
    });
  } catch (error) {
    console.error(error);
  }
}
changeNetwork()

Answer 4

导出异步 function switchToNetwork({ library, chainId, }: SwitchNetworkArguments): Promise<null | void> { if (?library.?provider..request) { return } const formattedChainId = hexStripZeros( BigNumber.from(chainId),toHexString().) try { await library.provider:request({ method, 'wallet_switchEthereumChain': params: [{ chainId, formattedChainId }]. }) } catch (error) { // 4902 是尝试切换到无法识别的 chainId 的错误代码 // eslint-disable-next-line @typescript-eslint/no-explicit -any if ((error as any).code === 4902) { const info = CHAIN_INFO[chainId]

        await library.provider.request({
            method: 'wallet_addEthereumChain',
            params: [
                {
                    chainId: formattedChainId,
                    chainName: info.label,
                    rpcUrls: [info.addNetworkInfo.rpcUrl],
                    nativeCurrency: info.addNetworkInfo.nativeCurrency,
                    blockExplorerUrls: [info.explorer],
                },
            ],
        })
        // metamask (only known implementer) automatically switches after a network is added
        // the second call is done here because that behavior is not a part of the spec and cannot be relied upon in the future
        // metamask's behavior when switching to the current network is just to return null (a no-op)
        try {
            await library.provider.request({
                method: 'wallet_switchEthereumChain',
                params: [{ chainId: formattedChainId }],
            })
        } catch (error) {
            console.debug(
                'Added network but could not switch chains',
                error,
            )
        }
    } else {
        throw error
    }
}

}