Merge branch 'develop' of github.com:lidofinance/ethereum-staking-wid…

…get into feature/si-1411-update-widget-deprecation-middleware

consts/matomo-wallets-events.ts

@@ -1,5 +1,6 @@
 import { MatomoEventType, trackEvent } from '@lidofinance/analytics-matomo';
-import { Metrics as WalletsMetrics } from 'reef-knot/connect-wallet-modal';
+import { Metrics } from 'reef-knot/connect-wallet-modal';
+import { WalletIdsEthereum } from 'reef-knot/wallets';
 
 export const enum MATOMO_WALLETS_EVENTS_TYPES {
   onClickAmbire = 'onClickAmbire',
@@ -166,92 +167,43 @@ export const MATOMO_WALLETS_EVENTS: Record<
   ],
 };
 
-export const walletsMetrics: WalletsMetrics = {
+const getMetricHandler = (event: Parameters<typeof trackEvent>) => () =>
+  trackEvent(...event);
+
+export const walletsMetrics: Metrics<WalletIdsEthereum> = {
   events: {
     click: {
       handlers: {
-        onClickAmbire: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onClickAmbire);
-        },
-        onClickBrave: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onClickBrave);
-        },
-        onClickCoin98: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onClickCoin98);
-        },
-        onClickCoinbase: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onClickCoinbase);
-        },
-        onClickExodus: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onClickExodus);
-        },
-        onClickImToken: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onClickImToken);
-        },
-        onClickLedger: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onClickLedger);
-        },
-        onClickMetamask: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onClickMetamask);
-        },
-        onClickTrust: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onClickTrust);
-        },
-        onClickWalletconnect: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onClickWC);
-        },
-        onClickXdefi: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onClickXdefi);
-        },
-        onClickOkx: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onClickOkx);
-        },
-        onClickBitget: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onClickBitget);
-        },
+        ambire: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickAmbire),
+        brave: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickBrave),
+        coin98: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickCoin98),
+        coinbase: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickCoinbase),
+        exodus: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickExodus),
+        imToken: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickImToken),
+        ledgerHID: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickLedger),
+        metaMask: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickMetamask),
+        trust: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickTrust),
+        walletConnect: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickWC),
+        xdefi: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickXdefi),
+        okx: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickOkx),
+        bitget: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickBitget),
       },
     },
     connect: {
       handlers: {
-        onConnectAmbire: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onConnectAmbire);
-        },
-        onConnectBrave: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onConnectBrave);
-        },
-        onConnectCoin98: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onConnectCoin98);
-        },
-        onConnectCoinbase: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onConnectCoinbase);
-        },
-        onConnectExodus: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onConnectExodus);
-        },
-        onConnectImToken: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onConnectImToken);
-        },
-        onConnectLedger: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onConnectLedger);
-        },
-        onConnectMetamask: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onConnectMetamask);
-        },
-        onConnectTrust: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onConnectTrust);
-        },
-        onConnectWalletconnect: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onConnectWC);
-        },
-        onConnectXdefi: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onConnectXdefi);
-        },
-        onConnectOkx: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onConnectOkx);
-        },
-        onConnectBitget: () => {
-          trackEvent(...MATOMO_WALLETS_EVENTS.onConnectBitget);
-        },
+        ambire: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectAmbire),
+        brave: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectBrave),
+        coin98: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectCoin98),
+        coinbase: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectCoinbase),
+        exodus: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectExodus),
+        imToken: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectImToken),
+        ledgerHID: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectLedger),
+        metaMask: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectMetamask),
+        trust: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectTrust),
+        walletConnect: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectWC),
+        xdefi: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectXdefi),
+        okx: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectOkx),
+        bitget: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectBitget),
       },
     },
   },

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.2",
     "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,100 @@
 import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
-import { ProviderSDK } from '@lido-sdk/react';
-import { getStaticRpcBatchProvider } from '@lido-sdk/providers';
+import { useSupportedChains, useWeb3 } from 'reef-knot/web3-react';
+import { useClient, useConfig } 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 [providerWeb3, setProviderWeb3] = useState<Web3Provider>();
+  const { chainId: web3ChainId = defaultChainId, account, active } = useWeb3();
+  const { supportedChains } = useSupportedChains();
+  const config = useConfig();
+  const client = useClient();
+  const { rpc } = useReefKnotContext();
 
-  // 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);
-  }
+  const [providerWeb3, setProviderWeb3] = useState<Web3Provider | undefined>();
 
   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]);
+    let isHookMounted = true;
+
+    const getProviderTransport = async () => {
+      const { state } = config;
+      if (!state.current) return client?.transport;
+      const connector = state.connections.get(state.current)?.connector;
+      if (!connector) return client?.transport;
+      const provider: any = await connector.getProvider();
+      return provider || client?.transport;
+    };
+
+    const getProviderValue = async () => {
+      if (!client || !account || !active) return undefined;
+      const { chain } = client;
+      const providerTransport = await getProviderTransport();
+
+      // https://wagmi.sh/core/guides/ethers#reference-implementation-1
+      const provider = new Web3Provider(providerTransport, {
+        chainId: chain.id,
+        name: chain.name,
+        ensAddress: chain.contracts?.ensRegistry?.address,
+      });
+      provider.pollingInterval = pollingInterval;
+
+      return provider;
+    };
+
+    const getProviderAndSet = async () => {
+      const provider = await getProviderValue();
+      if (isHookMounted) setProviderWeb3(provider);
+    };
+
+    void getProviderAndSet();
+
+    return () => {
+      isHookMounted = false;
+    };
+  }, [config, config.state, client, account, active, 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);
-
-    return { providerRpc, providerMainnetRpc };
-  }, [chainId, pollingInterval, rpc]);
+  const chainId = useMemo(() => {
+    return supportedChainIds.indexOf(web3ChainId) > -1
+      ? web3ChainId
+      : defaultChainId;
+  }, [defaultChainId, supportedChainIds, web3ChainId]);
+
+  const providerRpc = useMemo(
+    () => getStaticRpcBatchProvider(chainId, rpc[chainId], 0, POLLING_INTERVAL),
+    [rpc, chainId],
+  );
+
+  const providerMainnetRpc = useMemo(
+    () =>
+      getStaticRpcBatchProvider(
+        mainnet.id,
+        rpc[mainnet.id],
+        0,
+        POLLING_INTERVAL,
+      ),
+    [rpc],
+  );
 
   return (
     // @ts-expect-error Property children does not exist on type