Callback in MetaMask

Developer Discussion
20

As for displaying the interface based on the current network, for convenience, you can create a hook:

const NETWORKS = {
  1: "Ethereum Main Network",
  56: "Binance Smart Chain",
};

export const handler = web3 => {
  const targetChain = NETWORKS[process.env.CHAIN_YOU_WANNA];

  const { data, error } = useSWR(
    () => (web3 ? "web3/network" : null),
    async () => {
      const chainId = await web3.eth.getChainId();
      if (!chainId) {
        throw new Error("Gotta refresh page.");
      }
      return NETWORKS[chainId];
    }
  );

  return {
      network: data,
      target: targetChain,
  };
};

Check out the requests library, it gives an amazing UI ))

Now through this hook you can access values ​​anywhere in your application:

const { network, target } = useNetwork(web3);

 {network != target && (
              <div>
                <div>Connected to wrong network.</div>
                {`Connect to: ${network}`}
                {`Gotta be Connect to: ${target}`}
              </div>
2 Likes