feat: wagmi update wip

package.json

@@ -35,12 +35,13 @@
     "@ethersproject/providers": "^5.7.2",
     "@masa-finance/masa-contracts-identity": "^1.12.0",
     "@masa-finance/masa-sdk": "^3.14.4",
-    "@rainbow-me/rainbowkit": "^1.3.1",
-    "@tanstack/query-sync-storage-persister": "^5.13.4",
-    "@tanstack/react-query": "^5.13.4",
-    "@tanstack/react-query-persist-client": "^5.13.4",
+    "@rainbow-me/rainbowkit": "^2.0.0-beta.2",
+    "@tanstack/query-sync-storage-persister": "^5.17.19",
+    "@tanstack/react-query": "^5.17.19",
+    "@tanstack/react-query-persist-client": "^5.17.19",
     "@wagmi/chains": "^1.8.0",
-    "@wagmi/core": "^1.4.12",
+    "@wagmi/connectors": "^4.1.10",
+    "@wagmi/core": "^2.6.1",
     "ethers": "~5.7.2",
     "rc-tooltip": "^6.1.3",
     "react": "^18.2.0",
@@ -49,8 +50,8 @@
     "react-spinners": "^0.13.8",
     "react-use": "^17.5.0",
     "rodal": "^2.0.0",
-    "viem": "^1.21.4",
-    "wagmi": "^1.4.12"
+    "viem": "^2.5.0",
+    "wagmi": "^2.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.23.7",
@@ -67,10 +68,11 @@
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/react": "^7.6.10",
     "@storybook/react-webpack5": "^7.6.10",
-    "@tanstack/eslint-plugin-query": "^5.17.7",
-    "@tanstack/react-query-devtools": "^5.13.5",
+    "@tanstack/eslint-plugin-query": "^5.17.20",
+    "@tanstack/react-query-devtools": "^5.17.21",
+    "@types/eslint": "^8.56.2",
     "@types/jest": "^29.5.11",
-    "@types/node": "^20.11.5",
+    "@types/node": "^20.11.6",
     "@types/react": "^18.2.48",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.19.1",
@@ -82,7 +84,7 @@
     "eslint-config-masa": "^0.0.22",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "https-browserify": "^1.0.0",
-    "husky": "^8.0.2",
+    "husky": "^9.0.5",
     "jest": "^29.7.0",
     "lint-staged": "^15.2.0",
     "mini-css-extract-plugin": "^2.7.7",

src/provider/masa-state-provider.tsx

@@ -2,11 +2,19 @@ import React, { ReactNode } from 'react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import MasaClientProvider from './masa-client-provider';
 import { queryClient } from '../masa-client/query-client';
+import WagmiRainbowkitProvider from '../wallet-client/wagmi-rainbowkit-provider';
+import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
+import { useConfig } from '../base-provider';
 
 export const MasaStateProvider = ({ children }: { children: ReactNode }) => {
+  const { rainbowkitConfig } = useConfig();
   return (
-    <QueryClientProvider client={queryClient}>
-      <MasaClientProvider>{children}</MasaClientProvider>
-    </QueryClientProvider>
+    <WagmiRainbowkitProvider>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider modalSize={rainbowkitConfig?.modalSize}>
+          <MasaClientProvider>{children}</MasaClientProvider>
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiRainbowkitProvider>
   );
 };

src/provider/masa-wallet-provider.tsx

@@ -3,7 +3,7 @@ import WagmiRainbowkitProvider from '../wallet-client/wagmi-rainbowkit-provider'
 import WalletClientProvider from '../wallet-client/wallet-client-provider';
 
 export const MasaWalletProvider = ({ children }: { children: ReactNode }) => (
-  <WagmiRainbowkitProvider>
+  // <WagmiRainbowkitProvider>
     <WalletClientProvider>{children}</WalletClientProvider>
-  </WagmiRainbowkitProvider>
+  // </WagmiRainbowkitProvider>
 );

src/wallet-client/network/use-network.ts

@@ -10,21 +10,23 @@ import {
   useAccount,
   useConnect,
   useNetwork as useNetworkWagmi,
-  useSwitchNetwork,
+  useChainId,
+  useSwitchChain,
+  useSwitchChain as useSwitchNetworkWagmi,
 } from 'wagmi';
 
 import { useCallback, useMemo, useState } from 'react';
 
 export const useNetwork = () => {
   const {
-    switchNetwork: switchNetworkWagmi,
+    switchChain: switchNetworkWagmi,
     error: networkError,
-    switchNetworkAsync,
-    isLoading: isSwitchingWagmi,
-  } = useSwitchNetwork();
+    switchChainAsync: switchNetworkAsync,
+    isPending: isSwitchingWagmi,
+  } = useSwitchChain();
   const { connectors, pendingConnector } = useConnect();
-  const { connector: activeConnector } = useAccount();
-  const { chains, chain: activeChain } = useNetworkWagmi();
+  const { connector: activeConnector, chain: activeChain } = useAccount();
+  const { chains } = useNetworkWagmi();
   const network = useNetworkWagmi();
   const [switchingToChain, setSwitchingToChain] = useState<number | null>();
   const stopSwitching = useCallback(() => {
@@ -48,7 +50,7 @@ export const useNetwork = () => {
       try {
         if (!chainId) return;
         setSwitchingToChain(chainId);
-        switchNetworkWagmi?.(chainId);
+        switchNetworkWagmi?.({ chainId });
       } catch (error: unknown) {
         if (error instanceof Error) {
           console.error(`switching networks failed! ${error.message}`);
@@ -82,8 +84,8 @@ export const useNetwork = () => {
     [activeChain?.id, switchNetworkWagmi, stopSwitching]
   );
 
-  const activeChainId = useMemo(() => activeChain?.id, [activeChain]);
-  const activeNetwork = useMemo(() => activeChain?.network, [activeChain]);
+  // const activeChainId = useMemo(() => activeChain?.id, [activeChain]);
+  // const activeNetwork = useMemo(() => activeChain?.network, [activeChain]);
   const currentNetwork = useMemo(() => {
     const nw = activeChain?.id;
 

src/wallet-client/utils.ts

@@ -4,7 +4,7 @@ import {
   SupportedNetworks,
 } from '@masa-finance/masa-sdk';
 import { Chain } from '@wagmi/chains';
-
+// import { type Chain } from 'viem';
 const rainbowkitChains: Chain[] = Object.keys(SupportedNetworks)
   .filter((networkName: string) => networkName !== 'unknown') // remove unused network
   .map((networkName: string) => {
@@ -32,7 +32,9 @@ const rainbowkitChains: Chain[] = Object.keys(SupportedNetworks)
     };
   });
 
-export const getRainbowkitChains = (networkNames?: NetworkName[]): Chain[] => {
+export const getRainbowkitChains = (
+  networkNames?: NetworkName[]
+): readonly Chain[] => {
   if (!networkNames || (networkNames && networkNames.length === 0)) {
     return rainbowkitChains;
   }
@@ -49,7 +51,7 @@ export const getRainbowkitChains = (networkNames?: NetworkName[]): Chain[] => {
 
       return undefined;
     })
-    .filter((chain: Chain | undefined) => !!chain) as Chain[];
+    .filter((chain: Chain | undefined) => !!chain) as readonly Chain[];
 };
 
 export const getChainIdNetworkMap = (chains?: Chain[]) => {
@@ -65,10 +67,10 @@ export const getChainIdNetworkMap = (chains?: Chain[]) => {
 };
 
 export const getChainsSortedByForcedNetwork = (
-  chains: Chain[],
+  chains: readonly Chain[],
   forceChain?: NetworkName
-): Chain[] => {
-  if (!forceChain) return chains;
+): readonly [Chain, ...Chain[]] => {
+  if (!forceChain) return chains as readonly [Chain, ...Chain[]];
 
   const singleChain = chains.filter(
     (chain: Chain) => chain.network === forceChain
@@ -77,5 +79,5 @@ export const getChainsSortedByForcedNetwork = (
   return [
     ...singleChain,
     ...chains.filter((chain: Chain) => chain.network !== forceChain),
-  ];
+  ] as unknown as readonly [Chain, ...Chain[]];
 };

src/wallet-client/wagmi-rainbowkit-provider.tsx

@@ -1,18 +1,22 @@
-import {
-  connectorsForWallets,
-  RainbowKitProvider,
-  WalletList,
-} from '@rainbow-me/rainbowkit';
+// import {
+//   // connectorsForWallets,
+//   // WalletList,
+//   RainbowKitProvider,
+// } from '@rainbow-me/rainbowkit';
 
-import { Chain, configureChains, createConfig, WagmiConfig } from 'wagmi';
+import {
+  createConfig,
+  http,
+  CreateConfigParameters,
+  WagmiProvider,
+} from 'wagmi';
 
-import { publicProvider } from 'wagmi/providers/public';
-import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
+import { type Chain } from 'viem';
 import type { ReactNode } from 'react';
 import React, { useMemo } from 'react';
 
+import { Transport } from 'viem';
 import { getChainsSortedByForcedNetwork, getRainbowkitChains } from './utils';
-import { walletConnectorsList } from './constants';
 import { useConfig } from '../base-provider';
 
 export interface WagmiRainbowkitProviderProps {
@@ -22,8 +26,7 @@ export interface WagmiRainbowkitProviderProps {
 export const WagmiRainbowkitProvider = ({
   children,
 }: WagmiRainbowkitProviderProps) => {
-  const { allowedNetworkNames, allowedWallets, rainbowkitConfig, forceChain } =
-    useConfig();
+  const { allowedNetworkNames, rainbowkitConfig, forceChain } = useConfig();
   const rainbowkitChains = useMemo(
     () =>
       getChainsSortedByForcedNetwork(
@@ -33,45 +36,30 @@ export const WagmiRainbowkitProvider = ({
     [allowedNetworkNames, forceChain]
   );
 
-  const { chains, publicClient, webSocketPublicClient } = configureChains(
-    rainbowkitChains,
-    [
-      publicProvider(),
-      jsonRpcProvider({
-        rpc: (chain: Chain) => ({ http: chain.rpcUrls.default.http[0] }),
-      }),
-    ]
-  );
+  console.log({ rainbowkitChains });
 
-  const walletConnectors =
-    allowedWallets?.map((wallet: 'metamask' | 'valora' | 'walletconnect') => {
-      if (walletConnectorsList[wallet]) {
-        const walletListFunc = walletConnectorsList[wallet];
-        return walletListFunc(chains) as unknown as WalletList;
-      }
-      return undefined;
-    }) ?? [];
+  const newConfig: CreateConfigParameters = {
+    chains: rainbowkitChains,
+    transports: rainbowkitChains.reduce(
+      (acc: Record<Chain['id'], Transport>, val: Chain) => {
+        const { id } = val;
+        acc[id] = http();
+        return acc;
+      },
+      {} as Record<Chain['id'], Transport>
+    ),
+  };
 
-  const celoConnectors = connectorsForWallets(
-    walletConnectors as unknown as WalletList
-  );
+  console.log({ newConfig });
 
-  const wagmiClient = createConfig({
-    autoConnect: true,
-    connectors: celoConnectors,
-    publicClient,
-    webSocketPublicClient,
-  });
+  const wagmiConfig = createConfig(newConfig);
 
   return (
-    <WagmiConfig config={wagmiClient}>
-      <RainbowKitProvider
-        modalSize={rainbowkitConfig?.modalSize}
-        chains={rainbowkitChains}
-      >
-        {children}
-      </RainbowKitProvider>
-    </WagmiConfig>
+    <WagmiProvider config={wagmiConfig}>
+      {/* <RainbowKitProvider modalSize={rainbowkitConfig?.modalSize}>
+      </RainbowKitProvider> */}
+      {children}
+    </WagmiProvider>
   );
 };
 

src/wallet-client/wallet-client-provider.tsx

@@ -7,7 +7,8 @@ import React, {
   useMemo,
 } from 'react';
 
-import type { Chain } from 'wagmi';
+// import type { Chain } from '@wagmi/core';
+import type { Chain } from 'viem';
 import { useWallet } from './wallet/use-wallet';
 import { useNetwork } from './network/use-network';
 import { useAccountChangeListen } from './wallet/use-account-change-listen';

src/wallet-client/wallet/use-account-change-listen.ts

@@ -1,5 +1,6 @@
 import { useAsync } from 'react-use';
-import { ConnectorData, useAccount } from 'wagmi';
+import { useAccount } from 'wagmi';
+
 import { useEthersProvider } from '../helpers/ethers';
 
 export const useAccountChangeListen = ({
@@ -13,15 +14,22 @@ export const useAccountChangeListen = ({
   const { connector } = useAccount();
 
   useAsync(async () => {
-    const onChangeConnector = async ({ chain, account }: ConnectorData) => {
-      if (account) {
+    const onChangeConnector = async ({
+      chainId,
+      accounts,
+    }: {
+      accounts?: readonly `0x${string}`[] | undefined;
+      chainId?: number | undefined;
+    } & { uid: string }) => {
+      if (accounts && accounts.length > 0) {
         // NOTE: this is a hack to fix the walletconnect issue
         if (typeof window !== 'undefined') {
           window.localStorage.removeItem('walletconnect');
         }
 
-        onAccountChange?.(account);
-      } else if (chain) {
+        console.log('accchange', { accounts });
+        onAccountChange?.(accounts[0]);
+      } else if (chainId) {
         // NOTE: this is a hack to fix the walletconnect issue
         if (typeof window !== 'undefined') {
           window.localStorage.removeItem('walletconnect');
@@ -37,8 +45,8 @@ export const useAccountChangeListen = ({
       await Promise.resolve();
     };
 
-    connector?.on('change', onChangeConnector);
-    connector?.on('disconnect', onDisconnectConnector);
+    connector?.emitter.on('change', onChangeConnector);
+    connector?.emitter.on('disconnect', onDisconnectConnector);
     // * walletconnect
 
     const onAccountsChanged = async (accounts: string[]) => {
@@ -67,8 +75,8 @@ export const useAccountChangeListen = ({
     await Promise.resolve();
 
     return () => {
-      connector?.off('change', onChangeConnector);
-      connector?.off('disconnect', onDisconnectConnector);
+      connector?.emitter.off('change', onChangeConnector);
+      connector?.emitter.off('disconnect', onDisconnectConnector);
       provider?.off('accountsChanged', onAccountsChanged);
       provider?.off('chainChanged', onChainChanged);
       provider?.off('disconnect', onDisconnect);

src/wallet-client/wallet/use-wallet.ts

@@ -7,16 +7,17 @@ import { useEffect, useMemo, useState } from 'react';
 
 import {
   Connector,
-  PublicClient,
   useAccount,
   useBalance,
   useDisconnect,
   usePublicClient,
   useWalletClient as useWalletClientWagmi,
-  WalletClient,
 } from 'wagmi';
 import { Signer } from 'ethers';
-
+import {
+  GetPublicClientReturnType,
+  type GetWalletClientReturnType,
+} from '@wagmi/core';
 import type { Provider } from '@ethersproject/providers';
 import { useEthersProvider, useEthersSigner } from '../helpers/ethers';
 
@@ -27,8 +28,8 @@ export interface UseWalletReturn {
   previousAddress?: `0x${string}`;
   compareAddress?: `0x${string}`;
   shortAddress?: `0x${string}`;
-  publicClient?: PublicClient;
-  walletClient?: WalletClient;
+  publicClient?: GetPublicClientReturnType;
+  walletClient?: GetWalletClientReturnType;
   signer?: Signer;
   provider?: Provider;
   connector?: Connector;