Added a useNetwork hook

src/App.tsx

@@ -29,13 +29,6 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"
 import { CommunityCreator } from "modules/lite/creator"
 
-import { ConnectKitProvider } from "connectkit"
-
-import { hexStringToBytes } from "services/utils/utils"
-import { HistoryLengthProvider } from "modules/explorer/context/HistoryLength"
-
-const tsQueryClient = new TanStackQueryClient()
-
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {

src/index.tsx

@@ -6,20 +6,23 @@ import { EtherlinkProvider } from "services/wagmi/context"
 import localizedFormat from "dayjs/plugin/localizedFormat"
 import dayjs from "dayjs"
 import { Web3Provider } from "services/wagmi/web3provider"
+import { NetworkProvider } from "services/useNetwork"
 
 // BigNumber.config({ DECIMAL_PLACES:  })
 
 dayjs.extend(localizedFormat)
 
 ReactDOM.render(
   <React.StrictMode>
-    <Web3Provider>
-      <EtherlinkProvider>
-        <TezosProvider>
-          <App />
-        </TezosProvider>
-      </EtherlinkProvider>
-    </Web3Provider>
+    <NetworkProvider>
+      <Web3Provider>
+        <EtherlinkProvider>
+          <TezosProvider>
+            <App />
+          </TezosProvider>
+        </EtherlinkProvider>
+      </Web3Provider>
+    </NetworkProvider>
   </React.StrictMode>,
   document.getElementById("root")
 )

src/services/beacon/hooks/useTezos.ts

@@ -6,6 +6,7 @@ import { TezosContext } from "services/beacon/context"
 import mixpanel from "mixpanel-browser"
 import { BeaconWallet } from "@taquito/beacon-wallet"
 import { EtherlinkContext } from "services/wagmi/context"
+import { useNetwork } from "services/useNetwork"
 
 type WalletConnectReturn = {
   tezos: TezosToolkit
@@ -24,6 +25,7 @@ export const useTezos = (): WalletConnectReturn => {
     state: { tezos, network, account, wallet },
     dispatch
   } = useContext(TezosContext)
+  const { setNetwork } = useNetwork()
 
   const {
     switchToNetwork,
@@ -135,9 +137,6 @@ export const useTezos = (): WalletConnectReturn => {
       console.log(`Switching to network ${network} from ${etherlinkNetwork}`)
       switchToNetwork(network)
     }
-    // if (!isEtherlinkConnected && network?.startsWith("etherlink")) {
-    // connectWithWagmi()
-    // }
 
     // Log out Beacon if network is etherlink
     if (network?.startsWith("etherlink") && wallet) {
@@ -158,6 +157,10 @@ export const useTezos = (): WalletConnectReturn => {
     }
   }, [network, etherlinkNetwork, handleChangeNetwork, isEtherlinkConnected])
 
+  useEffect(() => {
+    setNetwork(network)
+  }, [network])
+
   return {
     tezos,
     connect: async () => {

src/services/useNetwork.tsx

@@ -0,0 +1,16 @@
+import { createContext, ReactNode, useContext, useState } from "react"
+
+export const NetworkContext = createContext<any | undefined>(undefined)
+
+export const NetworkProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [network, setNetwork] = useState<string>(localStorage.getItem("homebase:network") || "tezos")
+  return <NetworkContext.Provider value={{ network, setNetwork }}>{children}</NetworkContext.Provider>
+}
+
+export const useNetwork = () => {
+  const context = useContext(NetworkContext)
+  if (!context) {
+    throw new Error("useNetwork must be used within a NetworkProvider")
+  }
+  return context
+}

src/services/wagmi/config.ts

@@ -3,7 +3,7 @@ import { etherlink, etherlinkTestnet } from "wagmi/chains"
 import { metaMask, injected, safe } from "wagmi/connectors"
 
 import { DeployContract } from "./token"
-import { ConnectKitProvider, getDefaultConfig } from "connectkit"
+import { getDefaultConfig } from "connectkit"
 
 const wagmiChains = [etherlink, etherlinkTestnet] as const
 

src/services/wagmi/web3provider.tsx

@@ -4,14 +4,24 @@ import { WagmiProvider } from "wagmi"
 import { config } from "./config"
 import { ConnectKitProvider } from "connectkit"
 import { etherlink, etherlinkTestnet } from "wagmi/chains"
+import { useNetwork } from "services/useNetwork"
 
 const queryClient = new QueryClient()
 
 export const Web3Provider = ({ children }: { children: ReactNode }) => {
+  const { network: currentNetwork } = useNetwork()
+  const ethInitialChainId = useMemo(() => {
+    const network = currentNetwork || "etherlink_mainnet"
+    if (!network?.startsWith("etherlink")) return etherlinkTestnet.id
+    if (network?.includes("mainnet")) return etherlink.id
+    return etherlinkTestnet.id
+  }, [currentNetwork])
   return (
     <WagmiProvider config={config}>
       <QueryClientProvider client={queryClient}>
-        <ConnectKitProvider>{children}</ConnectKitProvider>
+        <ConnectKitProvider debugMode options={{ initialChainId: ethInitialChainId }}>
+          {children}
+        </ConnectKitProvider>
       </QueryClientProvider>
     </WagmiProvider>
   )