From a32c49d4b78a804e60c0628e9574886ff5abd9de Mon Sep 17 00:00:00 2001
From: Alexander Khramov <alx.khramov@gmail.com>
Date: Fri, 9 Feb 2024 00:34:54 +0300
Subject: [PATCH] feat: add loaders to wrap, unwrap, withdraw forms

---
 .../hooks/useEthAmountByStethWsteth.ts        | 19 ++++++++---
 .../request/form/options/lido-option.tsx      | 29 ++++++++++------
 .../request/form/options/styles.ts            |  5 +++
 .../unwrap/unwrap-form/unwrap-stats.tsx       |  2 +-
 features/wsteth/wrap/wrap-form/wrap-stats.tsx |  2 +-
 shared/hooks/useStethByWsteth.ts              | 34 +++++--------------
 6 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/features/withdrawals/hooks/useEthAmountByStethWsteth.ts b/features/withdrawals/hooks/useEthAmountByStethWsteth.ts
index ecad26bda..ebfb5b9ab 100644
--- 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
index 6d6c2de96..1c0ab3cc0 100644
--- 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
index f4df085b9..90f3cdb11 100644
--- 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
index 2875ca65d..08f231a4c 100644
--- 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
index df11f848b..59d3880cc 100644
--- 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
index 8d2c938c2..df05c4531 100644
--- 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;
 };