Merge pull request #427 from lidofinance/feature/si-1198-use-ethereum…

…-sdk-on-stake-widget

Wagmi + Lido SDK

config/groups/web3.ts

@@ -1,7 +1,9 @@
 import { parseEther } from '@ethersproject/units';
 
 // interval in ms for RPC event polling for token balance and tx updates
-export const PROVIDER_POLLING_INTERVAL = 12_000;
+export const PROVIDER_POLLING_INTERVAL = 7_000;
+// how long in ms to wait for RPC batching(multicall and provider)
+export const PROVIDER_BATCH_TIME = 150;
 
 // account for gas estimation
 // will always have >=0.001 ether, >=0.001 stETH, >=0.001 wstETH

features/rewards/components/rewardsListContent/RewardsListContent.tsx

@@ -1,13 +1,11 @@
 import { FC } from 'react';
 import { Loader, Divider } from '@lidofinance/lido-ui';
-import { useSDK, useTokenBalance } from '@lido-sdk/react';
-import { TOKENS, getTokenAddress } from '@lido-sdk/constants';
 import { Zero } from '@ethersproject/constants';
 
-import { STRATEGY_LAZY } from 'consts/swr-strategies';
 import { useRewardsHistory } from 'features/rewards/hooks';
 import { ErrorBlockNoSteth } from 'features/rewards/components/errorBlocks/ErrorBlockNoSteth';
 import { RewardsTable } from 'features/rewards/components/rewardsTable';
+import { useStethBalance } from 'shared/hooks/use-balance';
 import { useDappStatus } from 'shared/hooks/use-dapp-status';
 
 import { RewardsListsEmpty } from './RewardsListsEmpty';
@@ -19,6 +17,8 @@ import {
   ErrorWrapper,
 } from './RewardsListContentStyles';
 
+import type { Address } from 'viem';
+
 export const RewardsListContent: FC = () => {
   const { isWalletConnected, isSupportedChain } = useDappStatus();
   const {
@@ -31,14 +31,11 @@ export const RewardsListContent: FC = () => {
     setPage,
     isLagging,
   } = useRewardsHistory();
-  // temporarily until we switched to a new SDK
-  const { chainId } = useSDK();
-  const { data: stethBalance, initialLoading: isStethBalanceLoading } =
-    useTokenBalance(
-      getTokenAddress(chainId || 1, TOKENS.STETH),
-      address,
-      STRATEGY_LAZY,
-    );
+  const { data: stethBalance, isLoading: isStethBalanceLoading } =
+    useStethBalance({
+      account: address as Address,
+      shouldSubscribeToUpdates: false,
+    });
   const hasSteth = stethBalance?.gt(Zero);
 
   if (isWalletConnected && !isSupportedChain)

features/stake/stake-form/stake-form-context/stake-form-context.tsx

@@ -11,7 +11,6 @@ import {
 import { useForm, FormProvider } from 'react-hook-form';
 import { useRouter } from 'next/router';
 
-import { useEthereumBalance, useSTETHBalance } from '@lido-sdk/react';
 import { parseEther } from '@ethersproject/units';
 
 import {
@@ -24,7 +23,6 @@ import { useMaxGasPrice } from 'shared/hooks';
 import { useIsMultisig } from 'shared/hooks/useIsMultisig';
 import { useFormControllerRetry } from 'shared/hook-form/form-controller/use-form-controller-retry-delegate';
 
-import { STRATEGY_LAZY } from 'consts/swr-strategies';
 import { config } from 'config';
 
 import {
@@ -39,6 +37,7 @@ import {
 
 import { useStake } from '../use-stake';
 import { useStethSubmitGasLimit } from '../hooks';
+import { useEthereumBalance, useStethBalance } from 'shared/hooks/use-balance';
 
 //
 // Data context
@@ -60,9 +59,9 @@ export const useStakeFormData = () => {
 const useStakeFormNetworkData = (): StakeFormNetworkData => {
   const {
     data: stethBalance,
-    update: updateStethBalance,
-    initialLoading: isStethBalanceLoading,
-  } = useSTETHBalance(STRATEGY_LAZY);
+    refetch: updateStethBalance,
+    isLoading: isStethBalanceLoading,
+  } = useStethBalance();
   const { isMultisig, isLoading: isMultisigLoading } = useIsMultisig();
   const gasLimit = useStethSubmitGasLimit();
   const { maxGasPrice, initialLoading: isMaxGasPriceLoading } =
@@ -75,9 +74,10 @@ const useStakeFormNetworkData = (): StakeFormNetworkData => {
 
   const {
     data: etherBalance,
-    update: updateEtherBalance,
-    initialLoading: isEtherBalanceLoading,
-  } = useEthereumBalance(undefined, STRATEGY_LAZY);
+    refetch: updateEtherBalance,
+    isLoading: isEtherBalanceLoading,
+  } = useEthereumBalance();
+
   const {
     data: stakingLimitInfo,
     mutate: mutateStakeLimit,

features/stake/stake-form/use-stake.ts

@@ -18,6 +18,7 @@ import { MockLimitReachedError, getAddress } from './utils';
 import { useTxModalStagesStake } from './hooks/use-tx-modal-stages-stake';
 
 import { sendTx } from 'utils/send-tx';
+import { useTxConfirmation } from 'shared/hooks/use-tx-conformation';
 
 type StakeArguments = {
   amount: BigNumber | null;
@@ -31,17 +32,17 @@ type StakeOptions = {
 
 export const useStake = ({ onConfirm, onRetry }: StakeOptions) => {
   const stethContractWeb3 = useSTETHContractWeb3();
-  const { address, chainId } = useAccount();
+  const { address } = useAccount();
   const stethContract = useSTETHContractRPC();
   const { staticRpcProvider } = useCurrentStaticRpcProvider();
   const { providerWeb3 } = useSDK();
   const { txModalStages } = useTxModalStagesStake();
+  const waitForTx = useTxConfirmation();
 
   return useCallback(
     async ({ amount, referral }: StakeArguments): Promise<boolean> => {
       try {
         invariant(amount, 'amount is null');
-        invariant(chainId, 'chainId is not defined');
         invariant(address, 'account is not defined');
         invariant(providerWeb3, 'providerWeb3 not defined');
         invariant(stethContractWeb3, 'steth is not defined');
@@ -92,11 +93,9 @@ export const useStake = ({ onConfirm, onRetry }: StakeOptions) => {
 
         txModalStages.pending(amount, txHash);
 
-        if (!isMultisig) {
-          await runWithTransactionLogger('Stake block confirmation', () =>
-            staticRpcProvider.waitForTransaction(txHash),
-          );
-        }
+        await runWithTransactionLogger('Stake block confirmation', () =>
+          waitForTx(txHash),
+        );
 
         const stethBalance = await stethContract.balanceOf(address);
 
@@ -112,14 +111,14 @@ export const useStake = ({ onConfirm, onRetry }: StakeOptions) => {
       }
     },
     [
-      chainId,
       address,
       providerWeb3,
       stethContractWeb3,
       txModalStages,
       staticRpcProvider,
       stethContract,
       onConfirm,
+      waitForTx,
       onRetry,
     ],
   );

features/withdrawals/hooks/contract/useClaim.ts

@@ -12,6 +12,7 @@ import { useCurrentStaticRpcProvider } from 'shared/hooks/use-current-static-rpc
 import { runWithTransactionLogger } from 'utils';
 import { isContract } from 'utils/isContract';
 import { sendTx } from 'utils/send-tx';
+import { useTxConfirmation } from 'shared/hooks/use-tx-conformation';
 
 import { useWithdrawalsContract } from './useWithdrawalsContract';
 
@@ -26,6 +27,7 @@ export const useClaim = ({ onRetry }: Args) => {
   const { staticRpcProvider } = useCurrentStaticRpcProvider();
   const { optimisticClaimRequests } = useClaimData();
   const { txModalStages } = useTxModalStagesClaim();
+  const waitForTx = useTxConfirmation();
 
   return useCallback(
     async (sortedRequests: RequestStatusClaimable[]) => {
@@ -71,8 +73,8 @@ export const useClaim = ({ onRetry }: Args) => {
 
         txModalStages.pending(amount, txHash);
 
-        await runWithTransactionLogger('Claim block confirmation', async () =>
-          staticRpcProvider.waitForTransaction(txHash),
+        await runWithTransactionLogger('Claim block confirmation', () =>
+          waitForTx(txHash),
         );
 
         await optimisticClaimRequests(sortedRequests);
@@ -90,8 +92,9 @@ export const useClaim = ({ onRetry }: Args) => {
       address,
       providerWeb3,
       txModalStages,
-      staticRpcProvider,
       optimisticClaimRequests,
+      staticRpcProvider,
+      waitForTx,
       onRetry,
     ],
   );

features/withdrawals/hooks/contract/useRequest.ts

@@ -28,12 +28,13 @@ import { useTxModalStagesRequest } from 'features/withdrawals/request/transactio
 import { useTransactionModal } from 'shared/transaction-modal/transaction-modal';
 import { sendTx } from 'utils/send-tx';
 import { overrideWithQAMockBoolean } from 'utils/qa';
+import { useTxConfirmation } from 'shared/hooks/use-tx-conformation';
 
 // this encapsulates permit/approval & steth/wsteth flows
 const useWithdrawalRequestMethods = () => {
   const { providerWeb3 } = useSDK();
   const { staticRpcProvider } = useCurrentStaticRpcProvider();
-  const { address, chainId, contractWeb3 } = useWithdrawalsContract();
+  const { address, contractWeb3 } = useWithdrawalsContract();
 
   const permitSteth = useCallback(
     async ({
@@ -43,8 +44,6 @@ const useWithdrawalRequestMethods = () => {
       signature?: GatherPermitSignatureResult;
       requests: BigNumber[];
     }) => {
-      invariant(chainId, 'must have chainId');
-      invariant(address, 'must have address');
       invariant(providerWeb3, 'must have providerWeb3');
       invariant(signature, 'must have signature');
       invariant(contractWeb3, 'must have contractWeb3');
@@ -72,7 +71,7 @@ const useWithdrawalRequestMethods = () => {
 
       return callback;
     },
-    [address, chainId, contractWeb3, providerWeb3, staticRpcProvider],
+    [contractWeb3, providerWeb3, staticRpcProvider],
   );
 
   const permitWsteth = useCallback(
@@ -83,8 +82,6 @@ const useWithdrawalRequestMethods = () => {
       signature?: GatherPermitSignatureResult;
       requests: BigNumber[];
     }) => {
-      invariant(chainId, 'must have chainId');
-      invariant(address, 'must have address');
       invariant(signature, 'must have signature');
       invariant(providerWeb3, 'must have providerWeb3');
       invariant(contractWeb3, 'must have contractWeb3');
@@ -112,17 +109,16 @@ const useWithdrawalRequestMethods = () => {
 
       return callback;
     },
-    [address, chainId, contractWeb3, providerWeb3, staticRpcProvider],
+    [contractWeb3, providerWeb3, staticRpcProvider],
   );
 
   const steth = useCallback(
     async ({ requests }: { requests: BigNumber[] }) => {
-      invariant(chainId, 'must have chainId');
       invariant(address, 'must have account');
       invariant(contractWeb3, 'must have contractWeb3');
       invariant(providerWeb3, 'must have providerWeb3');
 
-      const isMultisig = await isContract(address, contractWeb3.provider);
+      const isMultisig = await isContract(address, staticRpcProvider);
 
       const tx = await contractWeb3.populateTransaction.requestWithdrawals(
         requests,
@@ -139,16 +135,15 @@ const useWithdrawalRequestMethods = () => {
 
       return callback;
     },
-    [address, chainId, contractWeb3, staticRpcProvider, providerWeb3],
+    [address, contractWeb3, staticRpcProvider, providerWeb3],
   );
 
   const wstETH = useCallback(
     async ({ requests }: { requests: BigNumber[] }) => {
-      invariant(chainId, 'must have chainId');
       invariant(address, 'must have address');
       invariant(contractWeb3, 'must have contractWeb3');
       invariant(providerWeb3, 'must have providerWeb3');
-      const isMultisig = await isContract(address, contractWeb3.provider);
+      const isMultisig = await isContract(address, staticRpcProvider);
 
       const tx =
         await contractWeb3.populateTransaction.requestWithdrawalsWstETH(
@@ -166,7 +161,7 @@ const useWithdrawalRequestMethods = () => {
 
       return callback;
     },
-    [address, chainId, contractWeb3, staticRpcProvider, providerWeb3],
+    [address, contractWeb3, staticRpcProvider, providerWeb3],
   );
 
   return useCallback(
@@ -201,13 +196,13 @@ export const useWithdrawalRequest = ({
 }: useWithdrawalRequestParams) => {
   const { chainId } = useSDK();
   const withdrawalQueueAddress = getWithdrawalQueueAddress(chainId);
-  const { staticRpcProvider } = useCurrentStaticRpcProvider();
 
   const { connector, address } = useAccount();
   const { isBunker } = useWithdrawals();
   const { txModalStages } = useTxModalStagesRequest();
   const getRequestMethod = useWithdrawalRequestMethods();
   const { isMultisig, isLoading: isMultisigLoading } = useIsMultisig();
+  const waitForTx = useTxConfirmation();
 
   const wstethContract = useWSTETHContractRPC();
   const stethContract = useSTETHContractRPC();
@@ -222,7 +217,7 @@ export const useWithdrawalRequest = ({
     approve,
     needsApprove,
     allowance,
-    initialLoading: loadingUseApprove,
+    isLoading: loadingUseApprove,
   } = useApprove(
     valueBN,
     tokenContract.address,
@@ -320,8 +315,9 @@ export const useWithdrawalRequest = ({
         txModalStages.pending(amount, token, txHash);
 
         if (!isMultisig) {
-          await runWithTransactionLogger('Stake block confirmation', () =>
-            staticRpcProvider.waitForTransaction(txHash),
+          await runWithTransactionLogger(
+            'Withdrawal Request block confirmation',
+            () => waitForTx(txHash),
           );
         }
 
@@ -345,8 +341,8 @@ export const useWithdrawalRequest = ({
       needsApprove,
       onConfirm,
       onRetry,
-      staticRpcProvider,
       txModalStages,
+      waitForTx,
     ],
   );
 

features/withdrawals/request/request-form-context/use-request-form-data-context-value.ts

@@ -1,14 +1,10 @@
-import {
-  useSTETHContractRPC,
-  useSTETHBalance,
-  useWSTETHBalance,
-  useContractSWR,
-} from '@lido-sdk/react';
+import { useSTETHContractRPC, useContractSWR } from '@lido-sdk/react';
 import { useClaimData } from 'features/withdrawals/contexts/claim-data-context';
 import { useWithdrawals } from 'features/withdrawals/contexts/withdrawals-context';
 import { useUnfinalizedStETH } from 'features/withdrawals/hooks';
 import { useCallback, useMemo } from 'react';
 import { useWstethBySteth } from 'shared/hooks';
+import { useStethBalance, useWstethBalance } from 'shared/hooks/use-balance';
 import { STRATEGY_LAZY } from 'consts/swr-strategies';
 
 // Provides all data fetching for form to function
@@ -28,14 +24,14 @@ export const useRequestFormDataContextValue = () => {
   } = useWithdrawals();
   const {
     data: balanceSteth,
-    update: stethUpdate,
-    initialLoading: isStethBalanceLoading,
-  } = useSTETHBalance(STRATEGY_LAZY);
+    refetch: stethUpdate,
+    isLoading: isStethBalanceLoading,
+  } = useStethBalance();
   const {
     data: balanceWSteth,
-    update: wstethUpdate,
-    initialLoading: isWstethBalanceLoading,
-  } = useWSTETHBalance(STRATEGY_LAZY);
+    refetch: wstethUpdate,
+    isLoading: isWstethBalanceLoading,
+  } = useWstethBalance();
   const {
     data: unfinalizedStETH,
     update: unfinalizedStETHUpdate,