From c66b53df4bfa1a2cf6fc3c3439bd0148d364abab Mon Sep 17 00:00:00 2001
From: Ashutosh Kumar <ashutoshpw@users.noreply.github.com>
Date: Mon, 14 Oct 2024 02:19:21 +0530
Subject: [PATCH] Added a useNetwork hook

---
 src/App.tsx                           |  7 -------
 src/index.tsx                         | 17 ++++++++++-------
 src/services/beacon/hooks/useTezos.ts |  9 ++++++---
 src/services/useNetwork.tsx           | 16 ++++++++++++++++
 src/services/wagmi/config.ts          |  2 +-
 src/services/wagmi/web3provider.tsx   | 12 +++++++++++-
 6 files changed, 44 insertions(+), 19 deletions(-)
 create mode 100644 src/services/useNetwork.tsx

diff --git a/src/App.tsx b/src/App.tsx
index a5913d80..bc93cdcc 100644
--- a/src/App.tsx
+++ b/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: {
diff --git a/src/index.tsx b/src/index.tsx
index 4e5f6fd9..6957df74 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,6 +6,7 @@ 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:  })
 
@@ -13,13 +14,15 @@ 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")
 )
diff --git a/src/services/beacon/hooks/useTezos.ts b/src/services/beacon/hooks/useTezos.ts
index 376c5f65..762d08d0 100644
--- a/src/services/beacon/hooks/useTezos.ts
+++ b/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 () => {
diff --git a/src/services/useNetwork.tsx b/src/services/useNetwork.tsx
new file mode 100644
index 00000000..322338e6
--- /dev/null
+++ b/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
+}
diff --git a/src/services/wagmi/config.ts b/src/services/wagmi/config.ts
index 495d12c1..34f7b5d4 100644
--- a/src/services/wagmi/config.ts
+++ b/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
 
diff --git a/src/services/wagmi/web3provider.tsx b/src/services/wagmi/web3provider.tsx
index 529274c5..86dceedb 100644
--- a/src/services/wagmi/web3provider.tsx
+++ b/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>
   )