feat: not show allowance if not need

lidofinance · Oct 1, 2024 · 7e30d40 · 7e30d40
1 parent 9b0b4ee
commit 7e30d40
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 16 deletions.
diff --git a/features/wsteth/unwrap/hooks/use-unwrap-tx-on-l2-approve.ts b/features/wsteth/unwrap/hooks/use-unwrap-tx-on-l2-approve.ts
@@ -3,12 +3,14 @@ import type { BigNumber } from 'ethers';
 
 import { runWithTransactionLogger } from 'utils';
 import { useLidoSDK } from 'providers/lido-sdk';
+import { useDappStatus } from 'shared/hooks/use-dapp-status';
 
 type UseUnwrapTxApproveArgs = {
   amount: BigNumber;
 };
 
 export const useUnwrapTxOnL2Approve = ({ amount }: UseUnwrapTxApproveArgs) => {
+  const { isDappActiveOnL2 } = useDappStatus();
   const { sdk } = useLidoSDK();
   const [allowance, setAllowance] = useState<bigint | null>(null);
   const [isApprovalNeededBeforeUnwrap, setIsApprovalNeededBeforeUnwrap] =
@@ -67,12 +69,14 @@ export const useUnwrapTxOnL2Approve = ({ amount }: UseUnwrapTxApproveArgs) => {
       refetchAllowance,
       allowance,
       isApprovalNeededBeforeUnwrap,
+      isShowAllowance: isDappActiveOnL2,
     }),
     [
       processApproveTx,
       refetchAllowance,
       allowance,
       isApprovalNeededBeforeUnwrap,
+      isDappActiveOnL2,
     ],
   );
 };
diff --git a/features/wsteth/unwrap/unwrap-form/unwrap-stats.tsx b/features/wsteth/unwrap/unwrap-form/unwrap-stats.tsx
@@ -1,16 +1,20 @@
 import { useWatch } from 'react-hook-form';
+import { BigNumber } from 'ethers';
 import { DataTableRow, DataTable } from '@lidofinance/lido-ui';
+import { TOKENS } from '@lido-sdk/constants';
 
-import { useTxCostInUsd } from 'shared/hooks';
-import { FormatToken } from 'shared/formatters/format-token';
 import { DataTableRowStethByWsteth } from 'shared/components/data-table-row-steth-by-wsteth';
+import { AllowanceDataTableRow } from 'shared/components/allowance-data-table-row';
+import { FormatToken } from 'shared/formatters/format-token';
 import { FormatPrice } from 'shared/formatters';
+import { useTxCostInUsd } from 'shared/hooks';
 
 import { useDebouncedStethByWsteth } from 'features/wsteth/shared/hooks/use-debounced-wsteth-steth';
 import { useUnwrapGasLimit } from '../hooks/use-unwrap-gas-limit';
-import type { UnwrapFormInputType } from '../unwrap-form-context';
+import { useUnwrapFormData, UnwrapFormInputType } from '../unwrap-form-context';
 
 export const UnwrapStats = () => {
+  const { allowance, isShowAllowance } = useUnwrapFormData();
   const amount = useWatch<UnwrapFormInputType, 'amount'>({ name: 'amount' });
   const unwrapGasLimit = useUnwrapGasLimit();
   const {
@@ -43,6 +47,14 @@ export const UnwrapStats = () => {
         <FormatPrice amount={unwrapTxCostInUsd} />
       </DataTableRow>
       <DataTableRowStethByWsteth />
+      {isShowAllowance && (
+        <AllowanceDataTableRow
+          data-testid="allowance"
+          allowance={BigNumber.from(allowance || '0')}
+          loading={false}
+          token={TOKENS.WSTETH}
+        />
+      )}
     </DataTable>
   );
 };
diff --git a/features/wsteth/wrap/hooks/use-wrap-tx-on-l1-approve.ts b/features/wsteth/wrap/hooks/use-wrap-tx-on-l1-approve.ts
@@ -18,7 +18,7 @@ export const useWrapTxOnL1Approve = ({
   amount,
   token,
 }: UseWrapTxApproveArgs) => {
-  const { isDappActive } = useDappStatus();
+  const { isDappActive, isDappActiveOnL1 } = useDappStatus();
   const { address } = useAccount();
   const { chainId } = useSDK();
 
@@ -54,6 +54,7 @@ export const useWrapTxOnL1Approve = ({
       isApprovalLoading,
       isApprovalNeededBeforeWrap,
       refetchAllowance,
+      isShowAllowance: isDappActiveOnL1,
     }),
     [
       allowance,
@@ -62,6 +63,7 @@ export const useWrapTxOnL1Approve = ({
       isApprovalLoading,
       processApproveTx,
       refetchAllowance,
+      isDappActiveOnL1,
     ],
   );
 };
diff --git a/features/wsteth/wrap/wrap-form/wrap-stats.tsx b/features/wsteth/wrap/wrap-form/wrap-stats.tsx
@@ -19,7 +19,8 @@ const oneSteth = parseEther('1');
 
 export const WrapFormStats = () => {
   const { isDappActive } = useDappStatus();
-  const { allowance, wrapGasLimit, isApprovalLoading } = useWrapFormData();
+  const { allowance, isShowAllowance, wrapGasLimit, isApprovalLoading } =
+    useWrapFormData();
 
   const { watch } = useFormContext<WrapFormInputType>();
   const [token, amount] = watch(['token', 'amount']);
@@ -91,13 +92,15 @@ export const WrapFormStats = () => {
           DATA_UNAVAILABLE
         )}
       </DataTableRow>
-      <AllowanceDataTableRow
-        data-testid="allowance"
-        allowance={allowance}
-        isBlank={!(isSteth && isDappActive)}
-        loading={isApprovalLoading}
-        token={TOKENS.STETH}
-      />
+      {isShowAllowance && (
+        <AllowanceDataTableRow
+          data-testid="allowance"
+          allowance={allowance}
+          isBlank={!(isSteth && isDappActive)}
+          loading={isApprovalLoading}
+          token={TOKENS.STETH}
+        />
+      )}
     </DataTable>
   );
 };
diff --git a/shared/hooks/use-dapp-status.ts b/shared/hooks/use-dapp-status.ts
@@ -19,25 +19,30 @@ export const useDappStatus = () => {
     [chainId, multiChainBanner],
   );
 
-  // TODO: rename isDappActive to isDappActiveOnL1
   const isDappActive = useMemo(() => {
     if (!chainId) return false;
 
     return isWalletConnected && isSupportedChain;
   }, [chainId, isWalletConnected, isSupportedChain]);
 
+  const isDappActiveOnL1 = useMemo(() => {
+    if (!chainId) return false;
+
+    return isDappActive && !isSDKSupportedL2Chain(chainId);
+  }, [chainId, isDappActive]);
+
   const isDappActiveOnL2 = useMemo(() => {
     if (!chainId) return false;
 
-    // TODO: check connected
-    return isSDKSupportedL2Chain(chainId);
-  }, [chainId]);
+    return isDappActive && isSDKSupportedL2Chain(chainId);
+  }, [chainId, isDappActive]);
 
   return {
     isWalletConnected,
     isSupportedChain,
     isLidoMultichainChain,
     isDappActive,
+    isDappActiveOnL1,
     isDappActiveOnL2,
   };
 };