How to support multi network handoff about use-wallet HOT 12 OPEN

const useInactiveListener = (suppress: boolean = false) => {
  const { status, error, account } = useWallet()
  const { login } = useAuth()

  useEffect((): any => {
    const { ethereum } = window as any
    if (ethereum && ethereum.on && !suppress) {
      ...
      const handleChainChanged = (chainId: string | number) => {
        console.log("Handling 'chainChanged' event with payload", chainId)
        if (supportedChainId(chainId)) {
          const connetorId = getConnectorId()
          login(connetorId)
        }
      }
      ...
    }
  }
}

const useAuth = (): { login: (connectorId: keyof Connectors | undefined) => void; logout: () => void } => {
  const { error, connect, reset, connector } = useWallet()
  
  useEffect(() => {
    if (!error) return
    if (error instanceof ChainUnsupportedError) {
      const chainId = getTargetChainId() // get the target chainId from Context or any other storages
      
      // call `wallet_addEthereumChain` or `wallet_switchEthereumChain` as you need
      // see [EIP-3085: Wallet Add Ethereum Chain RPC Method (`wallet_addEthereumChain`)](https://eips.ethereum.org/EIPS/eip-3085)
      // and [EIP-3326: wallet_switchEthereumChain](https://ethereum-magicians.org/t/eip-3326-wallet-switchethereumchain/5471)
      chainId && setupChainNetworkByChainId(chainId).then((hasSetup) => {
        if (hasSetup) {
          login(connector)
        }
      })
    }
  }, [error])

  const login = useCallback(async (connectorId: keyof Connectors | undefined) => {
    await connect(connectorId)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  
  const logout = useCallback(() => {
    reset()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  
  return { login, logout }
}

//@ts-nocheck
import { useCallback, useEffect, useState } from 'react';

const useChainId = () => {
  const [chainId, setChainId] = useState(97);

  const fetchChainId = useCallback(async () => {
    if (window.ethereum) {
      const ethereum = window.ethereum;
      let chainId = await ethereum.request({
        method: 'eth_chainId',
      });
      chainId = parseInt(chainId, 16);
      setChainId(chainId);

      window.ethereum.on('networkChanged', function (chainId) {
        chainId = parseInt(chainId, 16);
        setChainId(chainId);
      });
    }
  }, []);

  useEffect(() => {
    fetchChainId().catch((err) => console.error(err.stack));

    const refreshChainId = setInterval(fetchChainId, 1000);
    return () => clearInterval(refreshChainId);
  }, []);

  return chainId;
};

export default useChainId;

const UseWalletProviderWrapper = (props) => {
  const chainId = useChainId();
  console.log("🚀 ~ file: App.tsx ~ line 35 ~ UseWalletProviderWrapper ~ chainId", chainId)

  return <UseWalletProvider chainId={chainId} {...props}></UseWalletProvider>;
}

import { useCallback, useEffect, useState } from "react";

const useChainId = () => {
  const [chainId, setChainId] = useState(97);

  const fetchChainId = useCallback(async () => {
    if (window.ethereum) {
      const ethereum = window.ethereum;
      let chainId = await ethereum.request({
        method: "eth_chainId",
      });
      chainId = parseInt(chainId, 16);
      console.log("network changed");
      setChainId(chainId);
    }
  }, [setChainId]);

  useEffect(() => {
    fetchChainId().catch((err) => console.error(err.stack));\

    window.ethereum.on("networkChanged", fetchChainId);
    return () => window.ethereum.removeListener("networkChanged", fetchChainId);
  }, [fetchChainId]);

  return chainId;
};

export default useChainId;

const UseWalletProviderWrapper = (props) => {
  const chainId = useChainId();
  console.log("🚀 ~ file: App.tsx ~ line 35 ~ UseWalletProviderWrapper ~ chainId", chainId)

  return <UseWalletProvider chainId={chainId} {...props}></UseWalletProvider>;
}