Revert "migrate from web3Modal to reown/appkit (#358)"

This reverts commit 09cd7c2.

apps/idos-data-dashboard/package.json

@@ -14,8 +14,6 @@
     "@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 { useAppKit } from "@reown/appkit/react";
+import { useWeb3Modal } from "@web3modal/wagmi/react";
 
 import { useWalletSelector } from "@/core/near";
 
 export const ConnectWallet = () => {
-  const { open } = useAppKit();
+  const { open } = useWeb3Modal();
   const { modal } = useWalletSelector();
 
   return (

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

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

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

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