feat: add loaders to wrap, unwrap, withdraw forms

lidofinance · Feb 8, 2024 · a32c49d · a32c49d
1 parent e768031
commit a32c49d
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 43 deletions.
diff --git a/features/withdrawals/hooks/useEthAmountByStethWsteth.ts b/features/withdrawals/hooks/useEthAmountByStethWsteth.ts
@@ -1,9 +1,10 @@
 import { parseEther } from '@ethersproject/units';
 import { BigNumber } from 'ethers';
 import { useMemo } from 'react';
+import { useContractSWR, useWSTETHContractRPC } from '@lido-sdk/react';
 
-import { useStethByWsteth } from 'shared/hooks';
 import { isValidEtherValue } from 'utils/isValidEtherValue';
+import { STRATEGY_LAZY } from 'utils/swrStrategies';
 
 type useEthAmountByInputProps = {
   isSteth: boolean;
@@ -21,9 +22,17 @@ export const useEthAmountByStethWsteth = ({
     [input, isValidValue],
   );
 
-  const stethByWstethBalance = useStethByWsteth(isSteth ? undefined : inputBN);
+  const wsteth = isSteth ? undefined : inputBN;
+  const { data: stethByWstethBalance, loading } = useContractSWR({
+    contract: useWSTETHContractRPC(),
+    method: 'getStETHByWstETH',
+    params: [wsteth],
+    shouldFetch: !!wsteth,
+    config: STRATEGY_LAZY,
+  });
 
-  if (!isValidValue) return undefined;
-  if (isSteth) return inputBN;
-  return stethByWstethBalance;
+  const result = { amount: stethByWstethBalance, loading };
+  if (!isValidValue) result.amount = undefined;
+  if (isSteth) result.amount = inputBN;
+  return result;
 };
diff --git a/features/withdrawals/request/form/options/lido-option.tsx b/features/withdrawals/request/form/options/lido-option.tsx
@@ -18,6 +18,7 @@ import {
   LidoIcon,
   LidoOptionContainer,
   LidoOptionValue,
+  LidoOptionInlineLoader,
 } from './styles';
 
 const TooltipWithdrawalAmount = () => {
@@ -56,23 +57,29 @@ export const LidoOption = () => {
   });
 
   // TODO: refactor to use intermediate validation values
-  const ethAmount = useEthAmountByStethWsteth({
-    isSteth: token === TOKENS.STETH,
-    input: amount ? formatEther(amount) : undefined,
-  });
+  const { amount: ethAmount, loading: amountLoading } =
+    useEthAmountByStethWsteth({
+      isSteth: token === TOKENS.STETH,
+      input: amount ? formatEther(amount) : undefined,
+    });
 
   return (
     <LidoOptionContainer data-testid="lidoOptionSection">
       <LidoIcon />
       Lido
       <LidoOptionValue data-testid="lidoOptionAmount">
-        <FormatTokenStyled
-          data-testid="lidoOptionAmount"
-          showAmountTip
-          amount={ethAmount}
-          symbol="ETH"
-        />{' '}
-        <TooltipWithdrawalAmount />
+        {amountLoading && <LidoOptionInlineLoader />}
+        {!amountLoading && (
+          <>
+            <FormatTokenStyled
+              data-testid="lidoOptionAmount"
+              showAmountTip
+              amount={ethAmount}
+              symbol="ETH"
+            />{' '}
+            <TooltipWithdrawalAmount />
+          </>
+        )}
       </LidoOptionValue>
     </LidoOptionContainer>
   );

diff --git a/features/withdrawals/request/form/options/styles.ts b/features/withdrawals/request/form/options/styles.ts
@@ -65,6 +65,11 @@ export const LidoOptionValue = styled.div`
   margin-left: auto;
 `;
 
+export const LidoOptionInlineLoader = styled(InlineLoader)`
+  display: block;
+  width: 100px;
+`;
+
 export const FormatTokenStyled = styled(FormatToken)`
   font-size: 14px;
   line-height: 24px;

diff --git a/features/wsteth/unwrap/unwrap-form/unwrap-stats.tsx b/features/wsteth/unwrap/unwrap-form/unwrap-stats.tsx
@@ -22,7 +22,7 @@ export const UnwrapStats = () => {
         <FormatPrice amount={unwrapTxCostInUsd} />
       </DataTableRow>
       <DataTableRowStethByWsteth />
-      <DataTableRow title="You will receive">
+      <DataTableRow title="You will receive" loading={!willReceiveStETH}>
         <FormatToken
           data-testid="youWillReceive"
           amount={willReceiveStETH}

diff --git a/features/wsteth/wrap/wrap-form/wrap-stats.tsx b/features/wsteth/wrap/wrap-form/wrap-stats.tsx
@@ -62,7 +62,7 @@ export const WrapFormStats = () => {
       >
         {isSteth ? <FormatToken amount={allowance} symbol="stETH" /> : <>-</>}
       </DataTableRow>
-      <DataTableRow title="You will receive">
+      <DataTableRow title="You will receive" loading={!willReceiveWsteth}>
         <FormatToken
           amount={willReceiveWsteth}
           data-testid="youWillReceive"

diff --git a/shared/hooks/useStethByWsteth.ts b/shared/hooks/useStethByWsteth.ts
@@ -1,31 +1,15 @@
-import { useMemo, useEffect, useState } from 'react';
-import { useWSTETHContractRPC } from '@lido-sdk/react';
+import { useContractSWR, useWSTETHContractRPC } from '@lido-sdk/react';
 import { BigNumber } from 'ethers';
-import debounce from 'lodash/debounce';
+import { STRATEGY_LAZY } from 'utils/swrStrategies';
 
 export const useStethByWsteth = (
   wsteth: BigNumber | undefined,
 ): BigNumber | undefined => {
-  const [stethBalance, setStethBalance] = useState<BigNumber>();
-
-  const wstethContractRPC = useWSTETHContractRPC();
-
-  const getStethBalance = useMemo(
-    () =>
-      debounce(async (wsteth: BigNumber | undefined) => {
-        if (!wsteth) {
-          return;
-        }
-
-        const steth = await wstethContractRPC.getStETHByWstETH(wsteth);
-        setStethBalance(steth);
-      }, 500),
-    [wstethContractRPC],
-  );
-
-  useEffect(() => {
-    void getStethBalance(wsteth);
-  }, [getStethBalance, wsteth]);
-
-  return stethBalance;
+  return useContractSWR({
+    contract: useWSTETHContractRPC(),
+    method: 'getStETHByWstETH',
+    params: [wsteth],
+    shouldFetch: !!wsteth,
+    config: STRATEGY_LAZY,
+  }).data;
 };