feat: use context to share network config

.dockerignore

@@ -0,0 +1,30 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel

Dockerfile

@@ -15,5 +15,6 @@ FROM nginx
 COPY --from=builder /app/out /usr/share/nginx/html
 RUN apt-get update && apt-get install -y jq && apt-get clean
 COPY ./nginx.conf.example /etc/nginx/nginx.conf
-COPY ./start.sh /start.sh && chmod +x /start.sh
+COPY ./start.sh /start.sh 
+RUN chmod +x /start.sh
 CMD ["/bin/bash", "/start.sh"]

src/hooks/useAutoSwitchNetwork.ts

@@ -1,20 +1,19 @@
-import { useAccount, useSwitchChain } from "wagmi"
-import { useNetworkConfig } from "./useNetworkConfig"
-import { useEffect } from "react"
-import { mainnet, sepolia } from "viem/chains"
-
+import { useAccount, useSwitchChain } from "wagmi";
+import { useContext, useEffect } from "react";
+import { mainnet, sepolia } from "viem/chains";
+import { NetworkConfigContext } from "@/components/NetworkConfigContext";
 
 const useAutoSwitchNetwork = () => {
-  const { network } = useNetworkConfig()
-  const { switchChain } = useSwitchChain()
-  const { isConnected, chain } = useAccount()
+  const { network } = useContext(NetworkConfigContext);
+  const { switchChain } = useSwitchChain();
+  const { isConnected, chain } = useAccount();
   useEffect(() => {
     if (!isConnected || !chain) return;
-    const targetChainId = network === 'mainnet' ? mainnet.id : sepolia.id;
+    const targetChainId = network === "mainnet" ? mainnet.id : sepolia.id;
     if (chain.id !== targetChainId) {
-      switchChain({ chainId: targetChainId })
+      switchChain({ chainId: targetChainId });
     }
-  }, [isConnected, network, chain])
-}
+  }, [isConnected, network, chain]);
+};
 
-export default useAutoSwitchNetwork
+export default useAutoSwitchNetwork;

src/hooks/useEthersProvider.ts

@@ -1,37 +1,37 @@
-import { type Config, getClient } from '@wagmi/core'
-import { FallbackProvider, JsonRpcProvider } from 'ethers'
-import type { Client, Chain, Transport } from 'viem'
-import { wagmiConfig } from './useWagmiConfig'
-import { useMemo } from 'react'
-import { useNetworkConfig } from './useNetworkConfig'
-import { mainnet, sepolia } from 'viem/chains'
+import { type Config, getClient } from "@wagmi/core";
+import { FallbackProvider, JsonRpcProvider } from "ethers";
+import type { Client, Chain, Transport } from "viem";
+import { wagmiConfig } from "./useWagmiConfig";
+import { useContext, useMemo } from "react";
+import { NetworkConfigContext } from "@/components/NetworkConfigContext";
+import { mainnet, sepolia } from "viem/chains";
 
 export function clientToProvider(client: Client<Transport, Chain>) {
-  const { chain, transport } = client
+  const { chain, transport } = client;
   const network = {
     chainId: chain.id,
     name: chain.name,
     ensAddress: chain.contracts?.ensRegistry?.address,
-  }
-  if (transport.type === 'fallback') {
+  };
+  if (transport.type === "fallback") {
     const providers = (transport.transports as ReturnType<Transport>[]).map(
-      ({ value }) => new JsonRpcProvider(value?.url, network),
-    )
-    if (providers.length === 1) return providers[0]
-    return new FallbackProvider(providers)
+      ({ value }) => new JsonRpcProvider(value?.url, network)
+    );
+    if (providers.length === 1) return providers[0];
+    return new FallbackProvider(providers);
   }
-  return new JsonRpcProvider(transport.url, network)
+  return new JsonRpcProvider(transport.url, network);
 }
 
 /** Action to convert a viem Client to an ethers.js Provider. */
 export function useEthersProvider() {
-  const { network } = useNetworkConfig()
+  const { network } = useContext(NetworkConfigContext);
   const chainId = useMemo(() => {
-    return network === 'mainnet' ? mainnet.id : sepolia.id
-  }, [network])
-  const client = useMemo(() => getClient(wagmiConfig, { chainId }), [chainId])
+    return network === "mainnet" ? mainnet.id : sepolia.id;
+  }, [network]);
+  const client = useMemo(() => getClient(wagmiConfig, { chainId }), [chainId]);
   return useMemo(() => {
-    if (!client) return
-    return clientToProvider(client)
-  }, [client])
-}
+    if (!client) return;
+    return clientToProvider(client);
+  }, [client]);
+}

src/hooks/useEthersSigner.tsx

@@ -1,48 +1,48 @@
-import { Config, getConnectorClient } from '@wagmi/core'
-import { BrowserProvider, JsonRpcSigner } from 'ethers'
-import { useEffect, useMemo, useState } from 'react'
-import type { Account, Chain, Client, Transport } from 'viem'
-import { Connector, useAccount } from 'wagmi'
-import { wagmiConfig } from './useWagmiConfig'
-import { useNetworkConfig } from './useNetworkConfig'
-import { mainnet, sepolia } from 'viem/chains'
+import { Config, getConnectorClient } from "@wagmi/core";
+import { BrowserProvider, JsonRpcSigner } from "ethers";
+import { useContext, useEffect, useMemo, useState } from "react";
+import type { Account, Chain, Client, Transport } from "viem";
+import { Connector, useAccount } from "wagmi";
+import { wagmiConfig } from "./useWagmiConfig";
+import { NetworkConfigContext } from "@/components/NetworkConfigContext";
+import { mainnet, sepolia } from "viem/chains";
 
 export function clientToSigner(client: Client<Transport, Chain, Account>) {
-  const { account, chain, transport } = client
+  const { account, chain, transport } = client;
   const network = {
     chainId: chain.id,
     name: chain.name,
     ensAddress: chain.contracts?.ensRegistry?.address,
-  }
-  const provider = new BrowserProvider(transport, network)
-  const signer = new JsonRpcSigner(provider, account.address)
-  return signer
+  };
+  const provider = new BrowserProvider(transport, network);
+  const signer = new JsonRpcSigner(provider, account.address);
+  return signer;
 }
 
 /** Action to convert a viem Wallet Client to an ethers.js Signer. */
 export async function getEthersSigner(
   config: Config,
-  { chainId, connector }: { chainId?: number, connector?: Connector } = {},
+  { chainId, connector }: { chainId?: number; connector?: Connector } = {}
 ) {
-  const client = await getConnectorClient(config, { chainId, connector })
-  return clientToSigner(client)
+  const client = await getConnectorClient(config, { chainId, connector });
+  return clientToSigner(client);
 }
 
 export const useEthersSigner = () => {
-  const [signer, setSigner] = useState<JsonRpcSigner>()
-  const { network } = useNetworkConfig()
+  const [signer, setSigner] = useState<JsonRpcSigner>();
+  const { network } = useContext(NetworkConfigContext);
   const chainId = useMemo(() => {
-    return network === 'mainnet' ? mainnet.id : sepolia.id
-  }, [network])
-  const { isConnected, connector } = useAccount()
+    return network === "mainnet" ? mainnet.id : sepolia.id;
+  }, [network]);
+  const { isConnected, connector } = useAccount();
   useEffect(() => {
     const getSigner = async () => {
-      const p = await getEthersSigner(wagmiConfig, { chainId, connector })
-      setSigner(p)
-    }
+      const p = await getEthersSigner(wagmiConfig, { chainId, connector });
+      setSigner(p);
+    };
     if (isConnected && connector) {
-      getSigner()
+      getSigner();
     }
-  }, [isConnected])
-  return signer
-}
+  }, [isConnected]);
+  return signer;
+};

src/hooks/useWagmiConfig.ts

@@ -1,22 +1,18 @@
-import { useMemo } from "react";
-import { useNetworkConfig } from "./useNetworkConfig";
 import { getDefaultConfig } from "@rainbow-me/rainbowkit";
-import { mainnet, sepolia } from '@wagmi/core/chains'
-import { http, createConfig } from '@wagmi/core'
-
+import { mainnet, sepolia } from "@wagmi/core/chains";
+import { http, createConfig } from "@wagmi/core";
 
 export const RainbowConfig = getDefaultConfig({
-  appName: 'SuperProof explorer',
-  projectId: '876a28d2d23153fe7f76c24bacbabb72',
+  appName: "SuperProof explorer",
+  projectId: "876a28d2d23153fe7f76c24bacbabb72",
   chains: [mainnet, sepolia],
   // ssr: true
-})
-
+});
 
 export const wagmiConfig = createConfig({
   chains: [sepolia, mainnet],
   transports: {
     [sepolia.id]: http(),
-    [mainnet.id]: http()
+    [mainnet.id]: http(),
   },
-})
+});