feat: wagmi version updated

features/stake/hooks.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { isDesktop } from 'react-device-detect';
-import { useConnectorInfo } from 'reef-knot/web3-react';
+import { useConnectorInfo } from 'reef-knot/core-react';
 
 const LEDGER_LIVE_ONE_INCH_DESKTOP_DEEPLINK = 'ledgerlive://discover/1inch-lld';
 const LEDGER_LIVE_ONE_INCH_MOBILE_DEEPLINK = 'ledgerlive://discover/1inch-llm';

package.json

@@ -44,6 +44,7 @@
     "@lidofinance/next-pages": "^0.41.0",
     "@lidofinance/rpc": "^0.41.0",
     "@lidofinance/satanizer": "^0.41.0",
+    "@tanstack/react-query": "^5.48.0",
     "bignumber.js": "9.1.0",
     "copy-to-clipboard": "^3.3.1",
     "cors": "^2.8.5",
@@ -67,7 +68,7 @@
     "react-hook-form": "^7.45.2",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.2",
-    "reef-knot": "^4.2.0",
+    "reef-knot": "5.0.1 ",
     "remark": "^13.0.0",
     "remark-external-links": "^8.0.0",
     "remark-html": "^13.0.1",
@@ -76,7 +77,8 @@
     "tiny-async-pool": "^1.2.0",
     "tiny-invariant": "^1.1.0",
     "uuid": "^8.3.2",
-    "wagmi": "0.12.19"
+    "viem": "2.13.3",
+    "wagmi": "2.10.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.4.4",
@@ -123,7 +125,7 @@
     "prettier": "^3.0.1",
     "ts-jest": "^29.1.0",
     "typechain": "^5.1.2",
-    "typescript": "^4.9.4",
+    "typescript": "5.4.5",
     "url-loader": "^4.1.1",
     "webpack-preprocessor-loader": "^1.3.0"
   },

providers/sdk-legacy.tsx

@@ -1,86 +1,65 @@
-import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
-import { ProviderSDK } from '@lido-sdk/react';
-import { getStaticRpcBatchProvider } from '@lido-sdk/providers';
+import React, { PropsWithChildren, useMemo } from 'react';
+import { useSupportedChains, useWeb3 } from 'reef-knot/web3-react';
+import { useConnectorClient } from 'wagmi';
+
 import { Web3Provider } from '@ethersproject/providers';
-import { Chain, useAccount } from 'wagmi';
+import { ProviderSDK } from '@lido-sdk/react';
+
 import { mainnet } from 'wagmi/chains';
-import { useWeb3 } from 'reef-knot/web3-react';
-import { onRpcProviderError } from 'utils/rpc-error-handler';
+import { getStaticRpcBatchProvider } from '@lido-sdk/providers';
+import { useReefKnotContext } from 'reef-knot/core-react';
 
 const POLLING_INTERVAL = 12_000;
 
 type SDKLegacyProviderProps = PropsWithChildren<{
   defaultChainId: number;
-  supportedChains: Chain[];
-  rpc: Record<number, string>;
   pollingInterval?: number;
 }>;
 
 export const SDKLegacyProvider = ({
   children,
   defaultChainId,
-  rpc,
-  supportedChains,
   pollingInterval = POLLING_INTERVAL,
 }: SDKLegacyProviderProps) => {
-  const { chainId = defaultChainId, account } = useWeb3();
-  const { connector, isConnected } = useAccount();
+  const { chainId = defaultChainId, account, active } = useWeb3();
+  const { supportedChains } = useSupportedChains();
+  const { data: client } = useConnectorClient();
+  const { rpc } = useReefKnotContext();
 
-  const [providerWeb3, setProviderWeb3] = useState<Web3Provider>();
+  const providerWeb3 = useMemo(() => {
+    if (!client || !client.account || !active) return;
+    const { chain, transport } = client;
 
-  // Reset web3 provider if the provider was set previously,
-  // and currently no wallet is connected.
-  // Gets triggered on a wallet disconnection, for example.
-  if (!isConnected && providerWeb3) {
-    setProviderWeb3(undefined);
-  }
+    // https://wagmi.sh/core/guides/ethers#reference-implementation-1
+    const network = {
+      chainId: chain.id,
+      name: chain.name,
+      ensAddress: chain.contracts?.ensRegistry?.address,
+    };
+    const provider = new Web3Provider(transport, network);
+    provider.pollingInterval = pollingInterval;
 
-  useEffect(() => {
-    void (async () => {
-      if (!providerWeb3 && connector && isConnected) {
-        const provider = await connector.getProvider();
-        // `any` param + page reload on network change
-        // are described here: https://github.com/ethers-io/ethers.js/issues/866
-        // this approach is needed to fix a NETWORK_ERROR after chain changing
-        const wrappedProvider = new Web3Provider(provider, 'any');
-        wrappedProvider.on('network', (newNetwork, oldNetwork) => {
-          // When a Provider makes its initial connection, it emits a "network"
-          // event with a null oldNetwork along with the newNetwork. So, if the
-          // oldNetwork exists, it represents a changing network
-          if (oldNetwork) {
-            window.location.reload();
-          }
-        });
-        wrappedProvider.pollingInterval = pollingInterval;
-        setProviderWeb3(wrappedProvider);
-      }
-    })();
-  }, [connector, isConnected, pollingInterval, providerWeb3]);
+    return provider;
+  }, [active, client, pollingInterval]);
 
   const supportedChainIds = useMemo(
-    () => supportedChains.map((chain) => chain.id),
+    () => supportedChains.map((chain) => chain.chainId),
     [supportedChains],
   );
 
-  const { providerRpc, providerMainnetRpc } = useMemo(() => {
-    const providerRpc = getStaticRpcBatchProvider(
-      chainId,
-      rpc[chainId],
-      chainId,
-      pollingInterval,
-    );
-
-    const providerMainnetRpc = getStaticRpcBatchProvider(
-      mainnet.id,
-      rpc[mainnet.id],
-      mainnet.id,
-      pollingInterval,
-    );
-    providerRpc.on('debug', onRpcProviderError);
-    providerMainnetRpc.on('debug', onRpcProviderError);
+  const providerRpc = getStaticRpcBatchProvider(
+    chainId,
+    rpc[chainId],
+    0,
+    POLLING_INTERVAL,
+  );
 
-    return { providerRpc, providerMainnetRpc };
-  }, [chainId, pollingInterval, rpc]);
+  const providerMainnetRpc = getStaticRpcBatchProvider(
+    mainnet.id,
+    rpc[mainnet.id],
+    0,
+    POLLING_INTERVAL,
+  );
 
   return (
     // @ts-expect-error Property children does not exist on type

providers/web3.tsx

@@ -1,18 +1,26 @@
 import { FC, PropsWithChildren, useMemo } from 'react';
-import { ReefKnot, getConnectors, holesky } from 'reef-knot/core-react';
-import { WagmiConfig, createClient, configureChains, Chain } from 'wagmi';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { http, WagmiProvider, createConfig } from 'wagmi';
 import * as wagmiChains from 'wagmi/chains';
-import { getStaticRpcBatchProvider } from '@lido-sdk/providers';
+import {
+  AutoConnect,
+  ReefKnot,
+  getWalletsDataList,
+} from 'reef-knot/core-react';
+import { WalletsListEthereum } from 'reef-knot/wallets';
 
 import { useUserConfig } from 'config/user-config';
 import { useGetRpcUrlByChainId } from 'config/rpc';
 import { CHAINS } from 'consts/chains';
 import { ConnectWalletModal } from 'shared/wallet/connect-wallet-modal';
-import { onRpcProviderError } from 'utils/rpc-error-handler';
 
 import { SDKLegacyProvider } from './sdk-legacy';
 
-const wagmiChainsArray = Object.values({ ...wagmiChains, holesky });
+type ChainsList = [wagmiChains.Chain, ...wagmiChains.Chain[]];
+
+const wagmiChainsArray = Object.values(wagmiChains) as any as ChainsList;
+
+const queryClient = new QueryClient();
 
 const Web3Provider: FC<PropsWithChildren> = ({ children }) => {
   const {
@@ -37,12 +45,15 @@ const Web3Provider: FC<PropsWithChildren> = ({ children }) => {
     const defaultChain =
       supportedChains.find((chain) => chain.id === defaultChainId) ||
       supportedChains[0]; // first supported chain as fallback
-    return { supportedChains, defaultChain };
+    return {
+      supportedChains: supportedChains as ChainsList,
+      defaultChain,
+    };
   }, [defaultChainId, supportedChainIds]);
 
   const getRpcUrlByChainId = useGetRpcUrlByChainId();
 
-  const backendRPC = useMemo(
+  const backendRPC: Record<number, string> = useMemo(
     () =>
       supportedChainIds.reduce(
         (res, curr) => ({ ...res, [curr]: getRpcUrlByChainId(curr) }),
@@ -54,70 +65,44 @@ const Web3Provider: FC<PropsWithChildren> = ({ children }) => {
     [supportedChainIds, getRpcUrlByChainId],
   );
 
-  const client = useMemo(() => {
-    const jsonRpcBatchProvider = (chain: Chain) => ({
-      provider: () =>
-        getStaticRpcBatchProvider(
-          chain.id,
-          getRpcUrlByChainId(chain.id),
-          undefined,
-          12000,
-        ).on('debug', onRpcProviderError),
-      chain: {
-        ...chain,
-        rpcUrls: {
-          ...chain.rpcUrls,
-          public: { http: [getRpcUrlByChainId(chain.id)] },
-          default: { http: [getRpcUrlByChainId(chain.id)] },
-        },
-      },
-    });
-
-    const { chains, provider, webSocketProvider } = configureChains(
-      supportedChains,
-      [jsonRpcBatchProvider],
-    );
-
-    const connectors = getConnectors({
-      chains,
-      defaultChain,
+  const { walletsDataList } = useMemo(() => {
+    return getWalletsDataList({
+      walletsList: WalletsListEthereum,
       rpc: backendRPC,
-      walletconnectProjectId,
+      walletconnectProjectId: walletconnectProjectId,
+      defaultChain: defaultChain,
     });
+  }, [backendRPC, defaultChain, walletconnectProjectId]);
 
-    return createClient({
-      connectors,
-      autoConnect: false, // default wagmi autoConnect, MUST be false in our case, because we use custom autoConnect from Reef Knot
-      provider,
-      webSocketProvider,
+  const config = useMemo(() => {
+    return createConfig({
+      chains: supportedChains,
+      ssr: true,
+      multiInjectedProviderDiscovery: false,
+      transports: supportedChains.reduce((res, curr) => ({
+        ...res,
+        [curr.id]: http(backendRPC[curr.id], { batch: true }),
+      })),
     });
-  }, [
-    supportedChains,
-    defaultChain,
-    backendRPC,
-    walletconnectProjectId,
-    getRpcUrlByChainId,
-  ]);
+  }, [supportedChains, backendRPC]);
 
   return (
-    <WagmiConfig client={client}>
-      <ReefKnot
-        autoConnect={isWalletConnectionAllowed}
-        defaultChain={defaultChain}
-        chains={supportedChains}
-        rpc={backendRPC}
-        walletconnectProjectId={walletconnectProjectId}
-      >
-        <SDKLegacyProvider
-          defaultChainId={defaultChain.id}
-          supportedChains={supportedChains}
+    // default wagmi autoConnect, MUST be false in our case, because we use custom autoConnect from Reef Knot
+    <WagmiProvider config={config} reconnectOnMount={false}>
+      <QueryClientProvider client={queryClient}>
+        <ReefKnot
           rpc={backendRPC}
+          chains={supportedChains}
+          walletDataList={walletsDataList}
         >
-          {children}
-          <ConnectWalletModal />
-        </SDKLegacyProvider>
-      </ReefKnot>
-    </WagmiConfig>
+          {isWalletConnectionAllowed && <AutoConnect autoConnect />}
+          <SDKLegacyProvider defaultChainId={defaultChain.id}>
+            {children}
+            <ConnectWalletModal />
+          </SDKLegacyProvider>
+        </ReefKnot>
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 };
 

shared/transaction-modal/transaction-modal.tsx

@@ -1,5 +1,5 @@
 import { Modal } from '@lidofinance/lido-ui';
-import { useConnectorInfo } from 'reef-knot/web3-react';
+import { useConnectorInfo } from 'reef-knot/core-react';
 import { getUseModal, ModalComponentType } from 'providers/modal-provider';
 
 type TransactionModalProps = {

shared/transaction-modal/tx-stages-basic/icons.tsx

@@ -1,4 +1,4 @@
-import { useConnectorInfo } from 'reef-knot/web3-react';
+import { useConnectorInfo } from 'reef-knot/core-react';
 
 import {
   LedgerFail,

shared/wallet/fallback/useErrorMessage.ts

@@ -1,18 +1,27 @@
 import {
-  useSupportedChains,
-  useConnectorError,
-  helpers,
-} from 'reef-knot/web3-react';
-import { useNetwork } from 'wagmi';
+  useConnectorInfo,
+  getUnsupportedChainError,
+} from 'reef-knot/core-react';
+import { helpers, useSupportedChains, useWeb3 } from 'reef-knot/web3-react';
+import { useAccount, useConfig } from 'wagmi';
 
 export const useErrorMessage = (): string | undefined => {
-  const error = useConnectorError();
+  const { error } = useWeb3();
+  const { chains } = useConfig();
+  const { isConnected } = useAccount();
   const { isUnsupported } = useSupportedChains();
-  const { chains: supportedChains } = useNetwork();
+  const { isLedger } = useConnectorInfo();
 
-  // TODO: fix useConnectorError in reef-knot and remove this block
-  if (isUnsupported) {
-    return helpers.getUnsupportedChainError(supportedChains).message;
+  if (isConnected && isUnsupported) {
+    return getUnsupportedChainError(chains).message;
+  }
+
+  if (!error) {
+    return;
+  }
+
+  if (isLedger) {
+    return helpers.interceptLedgerError(error).message;
   }
 
   return error?.message;