migrate from web3Modal to reown/appkit (#358)

apps/idos-data-dashboard/package.json

@@ -14,6 +14,8 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
+    "@reown/appkit": "^1.5.0",
+    "@reown/appkit-adapter-wagmi": "^1.5.0",
     "@idos-network/idos-sdk": "workspace:*",
     "@near-wallet-selector/core": "^8.9.10",
     "@near-wallet-selector/here-wallet": "^8.9.10",

apps/idos-data-dashboard/src/connect-wallet.tsx

@@ -1,10 +1,10 @@
 import { Box, Button, Heading, Image, Link, Text, VStack } from "@chakra-ui/react";
-import { useWeb3Modal } from "@web3modal/wagmi/react";
+import { useAppKit } from "@reown/appkit/react";
 
 import { useWalletSelector } from "@/core/near";
 
 export const ConnectWallet = () => {
-  const { open } = useWeb3Modal();
+  const { open } = useAppKit();
   const { modal } = useWalletSelector();
 
   return (

apps/idos-data-dashboard/src/core/wagmi.ts

@@ -1,9 +1,8 @@
-import { defaultWagmiConfig } from "@web3modal/wagmi/react/config";
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
+import { mainnet, sepolia } from "@reown/appkit/networks";
+import { createAppKit, useAppKitAccount, useAppKitNetwork } from "@reown/appkit/react";
 import { BrowserProvider, JsonRpcSigner } from "ethers";
-import { useMemo } from "react";
-import type { Account, Client, Transport } from "viem";
-import { http, useConnectorClient } from "wagmi";
-import { type Chain, mainnet, sepolia } from "wagmi/chains";
+import { useConnectorClient } from "wagmi";
 
 export const projectId = import.meta.env.VITE_WALLET_CONNECT_PROJECT_ID;
 
@@ -14,33 +13,38 @@ const metadata = {
   icons: ["/idos-dashboard-logo.svg"],
 };
 
-export const chains = [mainnet, sepolia] as const;
+export const networks = [mainnet, sepolia];
 
-export const wagmiConfig = defaultWagmiConfig({
-  // @ts-expect-error - wagmi types are outdated
-  chains,
+export const wagmiAdapter = new WagmiAdapter({
+  networks,
+  projectId,
+});
+
+createAppKit({
+  adapters: [wagmiAdapter],
+  networks: [mainnet, sepolia], // for some reason it complains if u set this value to networks
   projectId,
   metadata,
-  transports: {
-    // @ts-expect-error - wagmi types are outdated
-    [mainnet.id]: http(),
-    // @ts-expect-error - wagmi types are outdated
-    [sepolia.id]: http(),
+  features: {
+    allWallets: true,
+    email: false,
+    socials: false,
   },
 });
 
-export function clientToSigner(client: Client<Transport, Chain, Account>) {
-  const { account, chain, transport } = client;
+export function useEthersSigner({ chainId }: { chainId?: number } = {}) {
+  const { data: walletClient } = useConnectorClient({ chainId });
+  const { caipNetwork } = useAppKitNetwork();
+  const { address } = useAppKitAccount();
+  if (!caipNetwork || !walletClient || !address) return;
+
   const network = {
-    chainId: chain.id,
-    name: chain.name,
-    ensAddress: chain.contracts?.ensRegistry?.address,
+    chainId: +caipNetwork?.id,
+    name: caipNetwork?.name,
+    ensAddress: caipNetwork?.contracts?.ensRegistry?.address as string,
   };
-  const provider = new BrowserProvider(transport, network);
-  return new JsonRpcSigner(provider, account.address);
-}
 
-export function useEthersSigner({ chainId }: { chainId?: number } = {}) {
-  const { data: walletClient } = useConnectorClient({ chainId });
-  return useMemo(() => (walletClient ? clientToSigner(walletClient) : undefined), [walletClient]);
+  const provider = new BrowserProvider(walletClient.transport, network);
+  const signer = new JsonRpcSigner(provider, address);
+  return signer;
 }

apps/idos-data-dashboard/src/main.tsx

@@ -1,7 +1,6 @@
 import { ChakraBaseProvider } from "@chakra-ui/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { createWeb3Modal } from "@web3modal/wagmi/react";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { Navigate, Outlet, RouterProvider, createBrowserRouter } from "react-router-dom";
@@ -10,7 +9,7 @@ import { WagmiProvider } from "wagmi";
 import App from "@/app";
 import { Provider as IDOSProvider } from "@/core/idos";
 import { WalletSelectorContextProvider } from "@/core/near";
-import { projectId, wagmiConfig } from "@/core/wagmi";
+import { wagmiAdapter } from "@/core/wagmi";
 import { theme } from "@/theme";
 
 const queryClient = new QueryClient({
@@ -23,14 +22,11 @@ const queryClient = new QueryClient({
   },
 });
 
-createWeb3Modal({ wagmiConfig, projectId });
-
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <ChakraBaseProvider theme={theme}>
       <WalletSelectorContextProvider>
-        {/* @ts-expect-error: TODO: fix wagmi types */}
-        <WagmiProvider config={wagmiConfig}>
+        <WagmiProvider config={wagmiAdapter.wagmiConfig}>
           <QueryClientProvider client={queryClient}>
             <IDOSProvider>
               <RouterProvider