feat: add allowance loading

lidofinance · Mar 5, 2024 · 390a130 · 390a130
1 parent f6d703f
commit 390a130
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git a/features/withdrawals/hooks/contract/useRequest.ts b/features/withdrawals/hooks/contract/useRequest.ts
@@ -318,7 +318,7 @@ export const useWithdrawalRequest = ({
     approve,
     needsApprove,
     allowance,
-    loading: loadingUseApprove,
+    initialLoading: loadingUseApprove,
   } = useApprove(
     valueBN,
     tokenContract.address,
@@ -331,10 +331,11 @@ export const useWithdrawalRequest = ({
     spender: withdrawalQueueAddress,
   });
 
-  const isApprovalFlow =
+  const isApprovalFlow = Boolean(
     connector?.id === 'walletConnect' ||
-    isMultisig ||
-    (allowance.gt(BigNumber.from(0)) && !needsApprove);
+      isMultisig ||
+      (allowance && allowance.gt(Zero) && !needsApprove),
+  );
 
   const isApprovalFlowLoading =
     isMultisigLoading || (isApprovalFlow && loadingUseApprove);

diff --git a/features/wsteth/unwrap/unwrap-form/unwrap-stats.tsx b/features/wsteth/unwrap/unwrap-form/unwrap-stats.tsx
@@ -37,6 +37,7 @@ export const UnwrapStats = () => {
       >
         <FormatToken
           data-testid="youWillReceive"
+          fallback="-"
           amount={willReceiveStETH}
           symbol="stETH"
           showAmountTip

diff --git a/features/wsteth/wrap/wrap-form/wrap-stats.tsx b/features/wsteth/wrap/wrap-form/wrap-stats.tsx
@@ -94,6 +94,7 @@ export const WrapFormStats = () => {
         <FormatToken
           amount={willReceiveWsteth}
           data-testid="youWillReceive"
+          fallback="-"
           symbol="wstETH"
           showAmountTip
           trimEllipsis

diff --git a/shared/components/allowance-data-table-row/allowance-data-table-row.tsx b/shared/components/allowance-data-table-row/allowance-data-table-row.tsx
@@ -13,6 +13,7 @@ export type AllowanceDataTableRowProps = Omit<
   title?: ReactNode;
   token: TOKENS.WSTETH | TOKENS.STETH | 'ETH';
   allowance?: BigNumber;
+  loading?: boolean;
   isBlank?: boolean;
 };
 

diff --git a/shared/hooks/useApprove.ts b/shared/hooks/useApprove.ts
@@ -2,7 +2,6 @@ import invariant from 'tiny-invariant';
 import { useCallback } from 'react';
 
 import { ContractReceipt, ContractTransaction } from '@ethersproject/contracts';
-import { Zero } from '@ethersproject/constants';
 import { BigNumber } from '@ethersproject/bignumber';
 import { getERC20Contract } from '@lido-sdk/contracts';
 import { useAllowance, useSDK } from '@lido-sdk/react';
@@ -26,7 +25,7 @@ export type UseApproveResponse = {
   approve: (options?: ApproveOptions) => Promise<void>;
   needsApprove: boolean;
   initialLoading: boolean;
-  allowance: BigNumber;
+  allowance: BigNumber | undefined;
   loading: boolean;
   error: unknown;
 };
@@ -45,14 +44,11 @@ export const useApprove = (
   invariant(spender != null, 'Spender is required');
 
   const result = useAllowance(token, spender, mergedOwner, STRATEGY_LAZY);
-  const {
-    data: allowance = Zero,
-    initialLoading,
-    update: updateAllowance,
-  } = result;
+  const { data: allowance, initialLoading, update: updateAllowance } = result;
 
-  const needsApprove =
-    !initialLoading && !amount.isZero() && amount.gt(allowance);
+  const needsApprove = Boolean(
+    !initialLoading && allowance && !amount.isZero() && amount.gt(allowance),
+  );
 
   const approve = useCallback<UseApproveResponse['approve']>(
     async ({ onTxStart, onTxSent, onTxAwaited } = {}) => {