fix: include auto refuel into gas sufficiency check

Krustycoin0 · May 15, 2023 · d31f7e4 · d31f7e4
1 parent 3cf22d1
commit d31f7e4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 20 deletions.
diff --git a/packages/widget/src/components/GasMessage/GasMessage.tsx b/packages/widget/src/components/GasMessage/GasMessage.tsx
@@ -1,12 +1,7 @@
 import type { Route } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
 import { Box, Collapse } from '@mui/material';
-import {
-  useFundsSufficiency,
-  useGasRefuel,
-  useGasSufficiency,
-} from '../../hooks';
-import { useSettings } from '../../stores';
+import { useFundsSufficiency, useGasSufficiency } from '../../hooks';
 import { FundsSufficiencyMessage } from './FundsSufficiencyMessage';
 import { GasSufficiencyMessage } from './GasSufficiencyMessage';
 
@@ -18,25 +13,17 @@ export const GasMessage: React.FC<GasMessageProps> = ({ route, ...props }) => {
   const { insufficientGas } = useGasSufficiency(route);
   const { insufficientFunds } = useFundsSufficiency(route);
 
-  const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel']);
-  const { enabled, isLoading: isRefuelLoading } = useGasRefuel();
-
-  const enabledRefuel = enabled && enabledAutoRefuel;
-
-  const showGasSufficiencyMessage =
-    insufficientGas?.length && !isRefuelLoading && !enabledRefuel;
-
   return (
     <Collapse
       timeout={225}
-      in={Boolean(insufficientFunds || showGasSufficiencyMessage)}
+      in={Boolean(insufficientFunds || insufficientGas?.length)}
       unmountOnExit
       mountOnEnter
     >
       <Box {...props}>
         {insufficientFunds ? (
           <FundsSufficiencyMessage />
-        ) : showGasSufficiencyMessage ? (
+        ) : insufficientGas?.length ? (
           <GasSufficiencyMessage insufficientGas={insufficientGas} />
         ) : null}
       </Box>

diff --git a/packages/widget/src/components/StepActions/StepActions.tsx b/packages/widget/src/components/StepActions/StepActions.tsx
@@ -163,13 +163,14 @@ export const StepDetailsContent: React.FC<{
     step.action.fromToken.chainId === step.action.toToken.chainId &&
     step.action.fromToken.address === step.action.toToken.address;
 
-  let fromAmount;
+  let fromAmount: string;
   if (sameTokenProtocolStep) {
     fromAmount = Big(step.estimate.fromAmount)
       .div(10 ** step.action.fromToken.decimals)
       .minus(
         Big(step.estimate.toAmount).div(10 ** step.action.toToken.decimals),
-      );
+      )
+      .toString();
   } else {
     fromAmount = formatTokenAmount(
       step.estimate.fromAmount,

diff --git a/packages/widget/src/hooks/useGasSufficiency.ts b/packages/widget/src/hooks/useGasSufficiency.ts
@@ -1,8 +1,9 @@
 import type { EVMChain, Route, Token } from '@lifi/sdk';
 import { useQuery } from '@tanstack/react-query';
 import Big from 'big.js';
-import { useChains, useGetTokenBalancesWithRetry } from '.';
+import { useChains, useGasRefuel, useGetTokenBalancesWithRetry } from '.';
 import { useWallet } from '../providers';
+import { useSettings } from '../stores';
 
 export interface GasSufficiency {
   gasAmount: Big;
@@ -22,12 +23,22 @@ export const useGasSufficiency = (route?: Route) => {
     account.signer?.provider,
   );
 
+  const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel']);
+  const { enabled, isLoading: isRefuelLoading } = useGasRefuel();
+  const enabledRefuel = enabled && enabledAutoRefuel;
+
   const { data: insufficientGas, isInitialLoading } = useQuery(
     ['gas-sufficiency-check', account.address, route?.id],
     async () => {
       if (!account.address || !route) {
         return;
       }
+
+      // TODO: include LI.Fuel into calculation once steps and tools are properly typed
+      // const refuelSteps = route.steps
+      //   .flatMap((step) => step.includedSteps)
+      //   .filter((includedStep) => includedStep.tool === 'lifuelProtocol');
+
       const gasCosts = route.steps
         .filter((step) => !step.execution || step.execution.status !== 'DONE')
         .reduce((groupedGasCosts, step) => {
@@ -115,8 +126,11 @@ export const useGasSufficiency = (route?: Route) => {
     },
   );
 
+  const isInsufficientGas =
+    Boolean(insufficientGas?.length) && !isRefuelLoading && !enabledRefuel;
+
   return {
-    insufficientGas,
+    insufficientGas: isInsufficientGas ? insufficientGas : undefined,
     isInitialLoading,
   };
 };