chore(explorer): Update wagmi to v2 in the Explorer

Consensys · Nov 26, 2024 · bde3582 · bde3582
1 parent 7f57adb
commit bde3582
Show file tree

Hide file tree

Showing 9 changed files with 2,874 additions and 1,148 deletions.
diff --git a/explorer/package.json b/explorer/package.json
@@ -26,13 +26,13 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.25",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@tanstack/react-query": "^5.61.4",
     "@tanstack/react-table": "^8.10.7",
-    "@verax-attestation-registry/verax-sdk": "2.1.1",
-    "@wagmi/core": "^1.4.7",
+    "@verax-attestation-registry/verax-sdk": "2.1.3",
     "abitype": "^0.10.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "connectkit": "1.5.3",
+    "connectkit": "^1.8.2",
     "framer-motion": "^10.16.12",
     "i18next": "^23.7.8",
     "lucide-react": "^0.292.0",
@@ -47,9 +47,9 @@
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7",
     "usehooks-ts": "^2.9.1",
-    "viem": "1.18.9",
+    "viem": "2.21.51",
     "vite-tsconfig-paths": "^4.2.1",
-    "wagmi": "1.4.6"
+    "wagmi": "^2.13.0"
   },
   "devDependencies": {
     "@types/node": "^20.9.2",

diff --git a/explorer/src/components/EnsNameDisplay/index.tsx b/explorer/src/components/EnsNameDisplay/index.tsx
@@ -1,5 +1,6 @@
 import { Address } from "viem";
-import { mainnet, useEnsName } from "wagmi";
+import { useEnsName } from "wagmi";
+import { mainnet } from "wagmi/chains";
 
 import { cropString } from "@/utils/stringUtils";
 

diff --git a/explorer/src/config/index.tsx b/explorer/src/config/index.tsx
@@ -1,7 +1,17 @@
 import { VeraxSdk } from "@verax-attestation-registry/verax-sdk";
 import { getDefaultConfig } from "connectkit";
-import { Chain, createConfig, mainnet } from "wagmi";
-import { arbitrum, arbitrumSepolia, base, baseSepolia, bsc, bscTestnet, linea } from "wagmi/chains";
+import { createConfig, http } from "wagmi";
+import {
+  arbitrum,
+  arbitrumSepolia,
+  base,
+  baseSepolia,
+  bsc,
+  bscTestnet,
+  linea,
+  lineaSepolia,
+  mainnet,
+} from "wagmi/chains";
 
 import veraxColoredIcon from "@/assets/logo/verax-colored-icon.svg";
 import ArbitrumIconDark from "@/assets/networks/arbitrum-dark.svg?react";
@@ -18,36 +28,6 @@ import LineaSepoliaIcon from "@/assets/networks/linea-sepolia.svg?react";
 import LineaMainnetIcon from "@/assets/networks/linea.svg?react";
 import { INetwork } from "@/interfaces/config";
 
-const lineaSepolia = {
-  id: 59_141,
-  name: "Linea Sepolia Testnet",
-  network: "linea-sepolia",
-  nativeCurrency: { name: "Linea Ether", symbol: "ETH", decimals: 18 },
-  rpcUrls: {
-    default: {
-      http: ["https://rpc.sepolia.linea.build"],
-      webSocket: ["wss://rpc.sepolia.linea.build"],
-    },
-    public: {
-      http: ["https://rpc.sepolia.linea.build"],
-      webSocket: ["wss://rpc.sepolia.linea.build"],
-    },
-  },
-  blockExplorers: {
-    default: {
-      name: "Etherscan",
-      url: "https://sepolia.lineascan.build",
-    },
-  },
-  contracts: {
-    multicall3: {
-      address: "0xca11bde05977b3631167028862be2a173976ca11",
-      blockCreated: 227427,
-    },
-  },
-  testnet: true,
-} as const satisfies Chain;
-
 const chains: INetwork[] = [
   {
     name: "Linea Mainnet",
@@ -151,14 +131,25 @@ const chains: INetwork[] = [
   },
 ];
 
+const infuraApiKey: string = import.meta.env.VITE_INFURA_API_KEY;
+
 const config = createConfig(
   getDefaultConfig({
-    autoConnect: true,
-    infuraId: import.meta.env.VITE_INFURA_API_KEY,
-    walletConnectProjectId: import.meta.env.VITE_WALLETCONNECT_PROJECT_ID || "",
-    chains: [...chains.map((el) => el.chain), mainnet],
     appName: "Verax | Explorer",
     appIcon: veraxColoredIcon,
+    walletConnectProjectId: import.meta.env.VITE_WALLETCONNECT_PROJECT_ID || "",
+    chains: [mainnet, ...chains.map((el) => el.chain)],
+    transports: {
+      [mainnet.id]: http(`https://mainnet.infura.io/v3/${infuraApiKey}`),
+      [arbitrum.id]: http(`https://arbitrum-mainnet.infura.io/v3/${infuraApiKey}`),
+      [arbitrumSepolia.id]: http(`https://arbitrum-sepolia.infura.io/v3/${infuraApiKey}`),
+      [base.id]: http(`https://base-mainnet.infura.io/v3/${infuraApiKey}`),
+      [baseSepolia.id]: http(`https://base-sepolia.infura.io/v3/${infuraApiKey}`),
+      [bsc.id]: http(`https://bsc-mainnet.infura.io/v3/${infuraApiKey}`),
+      [bscTestnet.id]: http(`https://bsc-testnet.infura.io/v3/${infuraApiKey}`),
+      [linea.id]: http(`https://linea-mainnet.infura.io/v3/${infuraApiKey}`),
+      [lineaSepolia.id]: http(`https://linea-sepolia.infura.io/v3/${infuraApiKey}`),
+    },
   }),
 );
 

diff --git a/explorer/src/interfaces/config/index.ts b/explorer/src/interfaces/config/index.ts
@@ -1,6 +1,5 @@
 import { Conf } from "@verax-attestation-registry/verax-sdk";
-import { Hex } from "viem";
-import { Chain } from "wagmi";
+import { Chain, Hex } from "viem";
 
 export interface INetwork {
   name: string;

diff --git a/explorer/src/pages/Attestation/components/AttestationInfo/index.tsx b/explorer/src/pages/Attestation/components/AttestationInfo/index.tsx
@@ -23,13 +23,12 @@ export const AttestationInfo: React.FC<Attestation> = ({ ...attestation }) => {
   const { data: attesterEnsAddress } = useEnsName({
     address: attestation.attester as Address,
     chainId: mainnet.id,
-    enabled: true,
   });
 
   const { data: subjectEnsAddress } = useEnsName({
     address: attestation.subject as Address,
     chainId: mainnet.id,
-    enabled: isAddress(attestation.subject),
+    query: { enabled: isAddress(attestation.subject) },
   });
 
   const displayAttesterEnsNameOrAddress = useCallback(() => {

diff --git a/explorer/src/pages/Portal/index.tsx b/explorer/src/pages/Portal/index.tsx
@@ -41,7 +41,7 @@ export const Portal = () => {
   const { data: portalOwnerEnsAddress } = useEnsName({
     address: portal?.ownerAddress as Address,
     chainId: mainnet.id,
-    enabled: !isLoading,
+    query: { enabled: !isLoading },
   });
 
   const displayPortalOwnerEnsAddress = useCallback(() => {

diff --git a/explorer/src/providers/index.tsx b/explorer/src/providers/index.tsx
@@ -1,22 +1,27 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ConnectKitProvider } from "connectkit";
 import { Outlet } from "react-router-dom";
-import { WagmiConfig } from "wagmi";
+import { WagmiProvider } from "wagmi";
 
 import { config } from "@/config";
 import { Layout } from "@/pages/Layout";
 
 import { NetworkContextProvider } from "./network-provider";
 
 export const Providers = () => {
+  const queryClient = new QueryClient();
+
   return (
-    <WagmiConfig config={config}>
-      <ConnectKitProvider>
-        <NetworkContextProvider>
-          <Layout>
-            <Outlet />
-          </Layout>
-        </NetworkContextProvider>
-      </ConnectKitProvider>
-    </WagmiConfig>
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <ConnectKitProvider>
+          <NetworkContextProvider>
+            <Layout>
+              <Outlet />
+            </Layout>
+          </NetworkContextProvider>
+        </ConnectKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 };
diff --git a/explorer/src/providers/network-provider/index.tsx b/explorer/src/providers/network-provider/index.tsx
@@ -1,8 +1,8 @@
 import { VeraxSdk } from "@verax-attestation-registry/verax-sdk";
-import { Chain } from "@wagmi/core";
 import { FC, PropsWithChildren, useCallback, useState } from "react";
 import { useLoaderData, useLocation, useNavigate } from "react-router-dom";
-import { useAccount, useNetwork, useSwitchNetwork } from "wagmi";
+import { useAccount, useSwitchChain } from "wagmi";
+import { Chain } from "wagmi/chains";
 
 import { INetwork } from "@/interfaces/config";
 
@@ -13,8 +13,8 @@ export const NetworkContextProvider: FC<PropsWithChildren> = ({ children }): JSX
   const location = useLocation();
 
   const { isConnected } = useAccount();
-  const { chain: currentChain } = useNetwork();
-  const { switchNetworkAsync } = useSwitchNetwork();
+  const { chain: currentChain } = useAccount();
+  const { switchChainAsync } = useSwitchChain();
   const retrievedNetwork = useLoaderData() as INetwork;
 
   const [network, setNetwork] = useState<INetwork>(retrievedNetwork);
@@ -27,14 +27,14 @@ export const NetworkContextProvider: FC<PropsWithChildren> = ({ children }): JSX
       }
 
       try {
-        await switchNetworkAsync?.(pendingChain.id);
+        await switchChainAsync?.({ chainId: pendingChain.id });
         return true;
       } catch (error) {
         console.error(`Error: while switching network: ${pendingChain.name} \n\n`, error);
         return false;
       }
     },
-    [isConnected, switchNetworkAsync],
+    [isConnected, switchChainAsync],
   );
 
   const setNetworkHandler = async (params: INetwork) => {