@lifi/widget 4.4.0 → 4.6.0

package/src/hooks/useGasSufficiency.ts

@@ -5,6 +5,7 @@ import { useQuery } from '@tanstack/react-query'
 import { useMemo } from 'react'
 import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { getSelfFundedGasAmount } from '../utils/gas.js'
 import { getQueryKey } from '../utils/queries.js'
 import { useAvailableChains } from './useAvailableChains.js'
 import { useIsContractAddress } from './useIsContractAddress.js'
@@ -108,7 +109,14 @@ export const useGasSufficiency = (
                   amount + BigInt(Number(gasCost.amount).toFixed(0)),
                 0n
               )
-              if (gasCostAmount > 0n) {
+              // A previous step can deliver this step's gas token (XLM bridged to
+              // Stellar), so the user does not have to hold it up front
+              const selfFundedGasAmount = getSelfFundedGasAmount(
+                route,
+                step,
+                getChainById(token.chainId)?.chainType
+              )
+              if (gasCostAmount > 0n && gasCostAmount > selfFundedGasAmount) {
                 groupedGasCosts[token.chainId] = {
                   gasAmount: groupedGasCosts[token.chainId]
                     ? groupedGasCosts[token.chainId].gasAmount + gasCostAmount

package/src/hooks/useMaxSendAmount.ts

@@ -0,0 +1,21 @@
+import { useGasRecommendation } from './useGasRecommendation.js'
+import { useTokenAddressBalance } from './useTokenAddressBalance.js'
+
+// Largest amount of the token the wallet can send: for the native token that is
+// the balance less the gas the chain recommends keeping back.
+export const useMaxSendAmount = (
+  chainId?: number,
+  tokenAddress?: string
+): bigint => {
+  const { token, chain } = useTokenAddressBalance(chainId, tokenAddress)
+  const { data } = useGasRecommendation(chainId)
+
+  if (!token?.amount) {
+    return 0n
+  }
+  if (chain?.nativeToken.address !== tokenAddress) {
+    return token.amount
+  }
+  const reserved = BigInt(data?.recommended?.amount ?? 0)
+  return token.amount > reserved ? token.amount - reserved : token.amount
+}

package/src/hooks/useRoutes.ts

@@ -29,6 +29,7 @@ import { defaultSlippage } from '../stores/settings/createSettingsStore.js'
 import { useSettings } from '../stores/settings/useSettings.js'
 import { WidgetEvent } from '../types/events.js'
 import type { TokensByChain } from '../types/token.js'
+import { isCustomReceiverUnsupported } from '../utils/customReceiver.js'
 import { getQueryKey } from '../utils/queries.js'
 import { updateTokenInCache } from '../utils/token.js'
 import { useChain } from './useChain.js'
@@ -177,6 +178,11 @@ export const useRoutes = ({
     ? hasToAddressAndChainTypeSatisfied
     : true
 
+  // Stellar settles to the signer, so a set receiver makes the route unfulfillable.
+  const customReceiverBlocked =
+    isCustomReceiverUnsupported(fromChain?.chainType, toChain?.chainType) &&
+    Boolean(toAddress)
+
   // toAddress might be an empty string, but we need to pass undefined if there is no value
   const toWalletAddress = toAddress || undefined
 
@@ -197,6 +203,7 @@ export const useRoutes = ({
     !Number.isNaN(slippage) &&
     hasAmount &&
     isToAddressSatisfied &&
+    !customReceiverBlocked &&
     contractCallQuoteEnabled &&
     !isBatchingSupportedLoading
 

package/src/hooks/useToAddressRequirements.ts

@@ -4,12 +4,15 @@ import { useEthereumContext } from '@lifi/widget-provider'
 import { useChain } from '../hooks/useChain.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { isCustomReceiverUnsupported } from '../utils/customReceiver.js'
 import { useIsContractAddress } from './useIsContractAddress.js'
 
 export const useToAddressRequirements = (
   route?: RouteExtended
 ): {
   requiredToAddress: boolean
+  unsupportedToAddress: boolean
+  unsupportedReceiverBlocking: boolean
   requiredToChainType: ChainType | undefined
   accountNotDeployedAtDestination: boolean
   accountDeployedAtDestination: boolean
@@ -68,11 +71,22 @@ export const useToAddressRequirements = (
     fromChainId !== toChainId &&
     !fromContractCodeHasDelegationIndicator
 
+  const unsupportedToAddress = isCustomReceiverUnsupported(
+    fromChain?.chainType,
+    toChain?.chainType
+  )
+
+  // Stellar routes settle to the signer, so a required receiver is never honoured.
+  const unsupportedReceiverBlocking = Boolean(
+    unsupportedToAddress && (toAddress || requiredUI?.toAddress)
+  )
+
   const requiredToAddress = Boolean(
     (isDifferentChainType ||
       isCrossChainContractAddress ||
       requiredUI?.toAddress) &&
-      !hiddenUI?.toAddress
+      !hiddenUI?.toAddress &&
+      !unsupportedToAddress
   )
 
   const accountNotDeployedAtDestination = Boolean(
@@ -91,6 +105,8 @@ export const useToAddressRequirements = (
 
   return {
     requiredToAddress,
+    unsupportedToAddress,
+    unsupportedReceiverBlocking,
     requiredToChainType: toChain?.chainType,
     accountNotDeployedAtDestination,
     accountDeployedAtDestination,

package/src/hooks/useTokenBalances.ts

@@ -4,7 +4,11 @@ import type { FormType } from '../stores/form/types.js'
 import { useSettings } from '../stores/settings/useSettings.js'
 import type { TokenAmount } from '../types/token.js'
 import { formatTokenPrice } from '../utils/format.js'
-import { isSearchMatch, processTokenList } from '../utils/tokenList.js'
+import {
+  hoistNativeToken,
+  isSearchMatch,
+  processTokenList,
+} from '../utils/tokenList.js'
 import { useAccountsBalancesData } from './useAccountsBalancesData.js'
 import { useDisplayedTokens } from './useDisplayedTokens.js'
 import { useTokenBalancesQueries } from './useTokenBalancesQueries.js'
@@ -115,7 +119,7 @@ export const useTokenBalances = (
   ])
 
   const { processedTokens, withCategories, withPinnedTokens } = useMemo(() => {
-    return processTokenList(
+    const result = processTokenList(
       isBalanceLoading,
       isAllNetworks || !!search,
       configTokens,
@@ -124,6 +128,18 @@ export const useTokenBalances = (
       displayedTokensWithBalances,
       isPinnedToken
     )
+    // A search keeps its results ranked by match, and "All networks" has no
+    // single native token to lead with.
+    if (isAllNetworks || search) {
+      return result
+    }
+    return {
+      ...result,
+      processedTokens: hoistNativeToken(
+        result.processedTokens,
+        selectedChainId
+      ),
+    }
   }, [
     isBalanceLoading,
     isAllNetworks,

package/src/hooks/useTokenBalancesQueries.ts

@@ -1,5 +1,5 @@
 import { getTokenBalances, type TokenExtended } from '@lifi/sdk'
-import { useQueries } from '@tanstack/react-query'
+import { keepPreviousData, useQueries } from '@tanstack/react-query'
 import { useMemo, useRef } from 'react'
 import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
@@ -7,6 +7,10 @@ import type { TokenAmount, TokenAmountExtended } from '../types/token.js'
 import { getQueryKey } from '../utils/queries.js'
 
 const defaultRefetchInterval = 32_000
+// Max time to hold the skeleton before revealing balances in the multi-chain view.
+// Sits just below the typical full-settle time so the list reveals once, sorted,
+// instead of reordering as each chain streams in.
+const balanceRevealTimeout = 2_000
 
 export const useTokenBalancesQueries = (
   accountsWithTokens?: Record<string, Record<number, TokenExtended[]>>,
@@ -44,7 +48,10 @@ export const useTokenBalancesQueries = (
             enabled: isBalanceLoadingEnabled,
             refetchInterval: defaultRefetchInterval,
             staleTime: defaultRefetchInterval,
-            keepPreviousData: true,
+            placeholderData: keepPreviousData,
+            // Resolve a failed chain immediately instead of retrying past the reveal
+            // window (retries would pop the chain in late and re-sort the list).
+            retry: false,
           }
         })
     )
@@ -74,8 +81,9 @@ export const useTokenBalancesQueries = (
         ? now - firstLoadStartRef.current
         : 0
 
-      // Return results if all complete OR if 500ms have passed since first query started
-      const shouldReturnResults = allComplete || timeSinceStart >= 500
+      // Return results once all queries complete, or once the reveal timeout elapses
+      const shouldReturnResults =
+        allComplete || timeSinceStart >= balanceRevealTimeout
 
       if (shouldReturnResults) {
         const data: TokenAmount[] = results

package/src/hooks/useTokenSearch.ts

@@ -74,13 +74,9 @@ export const useTokenSearch = (
             ) {
               return data
             }
-            // Mark token from search as unverified
             return {
               ...data,
-              [chainId as number]: [
-                ...(chainTokens ?? []),
-                { ...token, verified: false },
-              ],
+              [chainId as number]: [...(chainTokens ?? []), token],
             }
           }
         )

package/src/hooks/useTokens.ts

@@ -17,8 +17,10 @@ import { isItemAllowed } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 import {
   filterAllowedTokens,
+  getNativeTokenAddresses,
   mergeVerifiedWithSearchTokens,
 } from '../utils/token.js'
+import { useAvailableChains } from './useAvailableChains.js'
 
 const refetchInterval = 300_000
 
@@ -49,6 +51,7 @@ export const useTokens = (
         ChainType.UTXO,
         ChainType.MVM,
         ChainType.TVM,
+        ChainType.STL,
       ].filter((chainType) => isItemAllowed(chainType, chainsConfig?.types))
 
       const tokensResponse: TokensExtendedResponse = await getTokens(
@@ -63,11 +66,11 @@ export const useTokens = (
         { signal }
       )
 
-      // Mark all tokens as verified
+      // `listed` tells a main-list token from a searched one
       const tokens: TokensByChain = Object.fromEntries(
         Object.entries(tokensResponse.tokens).map(([chainId, tokens]) => [
           chainId,
-          tokens.map((token) => ({ ...token, verified: true })),
+          tokens.map((token) => ({ ...token, listed: true })),
         ])
       )
 
@@ -92,6 +95,7 @@ export const useTokens = (
         ChainType.UTXO,
         ChainType.MVM,
         ChainType.TVM,
+        ChainType.STL,
       ].filter((chainType) => isItemAllowed(chainType, chainsConfig?.types))
 
       const tokensResponse: TokensExtendedResponse = await getTokens(
@@ -130,26 +134,37 @@ export const useTokens = (
         }
       }
 
-      // Mark all search tokens as unverified
-      const tokens: TokensByChain = Object.fromEntries(
-        Object.entries(tokensResponse.tokens).map(([chainId, tokens]) => [
-          chainId,
-          tokens.map((token) => ({ ...token, verified: false })),
-        ])
-      )
-
-      return tokens
+      return tokensResponse.tokens as TokensByChain
     },
     enabled: !!search,
     refetchInterval,
     staleTime: refetchInterval,
   })
 
+  const { chains } = useAvailableChains()
+  const nativeTokenAddresses = useMemo(
+    () => getNativeTokenAddresses(chains),
+    [chains]
+  )
+
   // Merge tokens at read time - single place where caches are combined
   const allTokens = useMemo(() => {
     const merged = mergeVerifiedWithSearchTokens(verifiedTokens, searchTokens)
-    return filterAllowedTokens(merged, configTokens, chainsConfig, formType)
-  }, [verifiedTokens, searchTokens, configTokens, chainsConfig, formType])
+    return filterAllowedTokens(
+      merged,
+      configTokens,
+      chainsConfig,
+      formType,
+      nativeTokenAddresses
+    )
+  }, [
+    verifiedTokens,
+    searchTokens,
+    configTokens,
+    chainsConfig,
+    formType,
+    nativeTokenAddresses,
+  ])
 
   return {
     allTokens,

package/src/pages/MainPage/ReviewButton.tsx

@@ -16,7 +16,8 @@ export const ReviewButton: React.FC = () => {
   const emitter = useWidgetEvents()
   const { mode, modeOptions } = useWidgetConfig()
   const splitState = useSplitMode()
-  const { toAddress, requiredToAddress } = useToAddressRequirements()
+  const { toAddress, requiredToAddress, unsupportedReceiverBlocking } =
+    useToAddressRequirements()
   const { routes, setReviewableRoute } = useRoutes()
   const [selectedRouteId] = useFieldValues('selectedRouteId')
 
@@ -85,7 +86,10 @@ export const ReviewButton: React.FC = () => {
     <BaseTransactionButton
       text={getButtonText()}
       onClick={handleClick}
-      disabled={currentRoute && requiredToAddress && !toAddress}
+      disabled={
+        currentRoute &&
+        (unsupportedReceiverBlocking || (requiredToAddress && !toAddress))
+      }
       route={currentRoute}
       sx={{ flex: 1 }}
     />

package/src/pages/RoutesPage/RoutesPage.tsx

@@ -36,7 +36,8 @@ export const RoutesPage = (): JSX.Element => {
   } = useRoutes()
   const { account } = useAccount({ chainType: fromChain?.chainType })
   const [toAddress] = useFieldValues('toAddress')
-  const { requiredToAddress } = useToAddressRequirements()
+  const { requiredToAddress, unsupportedReceiverBlocking } =
+    useToAddressRequirements()
 
   const headerAction = useMemo(
     () => (
@@ -72,7 +73,9 @@ export const RoutesPage = (): JSX.Element => {
 
   const routeNotFound = !routes?.length && !isLoading && !isFetching
 
-  const toAddressUnsatisfied = routes?.[0] && requiredToAddress && !toAddress
+  const toAddressUnsatisfied =
+    routes?.[0] &&
+    (unsupportedReceiverBlocking || (requiredToAddress && !toAddress))
 
   const allowInteraction = account.isConnected && !toAddressUnsatisfied
 

package/src/pages/TransactionPage/TokenVerificationBottomSheet.tsx

@@ -0,0 +1,93 @@
+import type { Token } from '@lifi/sdk'
+import { Button, Checkbox, FormControlLabel } from '@mui/material'
+import type { JSX, Ref, RefObject } from 'react'
+import { useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { IconCircle } from '../../components/IconCircle/IconCircle.js'
+import { useSetContentHeight } from '../../hooks/useSetContentHeight.js'
+import {
+  ButtonRow,
+  CenterContainer,
+  ContentContainer,
+  WarningMessage,
+  WarningTitle,
+} from './TokenValueBottomSheet.style.js'
+
+interface TokenVerificationBottomSheetProps {
+  /** Source and/or destination tokens the screening provider flagged. */
+  tokens: Token[]
+  onContinue(): void
+  onCancel?(): void
+}
+
+export const TokenVerificationBottomSheet = ({
+  tokens,
+  onContinue,
+  onCancel,
+  ref,
+}: TokenVerificationBottomSheetProps & {
+  ref?: Ref<BottomSheetBase>
+}): JSX.Element => {
+  const handleCancel = () => {
+    ;(ref as RefObject<BottomSheetBase>).current?.close()
+    onCancel?.()
+  }
+
+  return (
+    <BottomSheet ref={ref} onClose={onCancel}>
+      <TokenVerificationBottomSheetContent
+        tokens={tokens}
+        onContinue={onContinue}
+        onCancel={handleCancel}
+      />
+    </BottomSheet>
+  )
+}
+
+const TokenVerificationBottomSheetContent: React.FC<
+  TokenVerificationBottomSheetProps
+> = ({ tokens, onCancel, onContinue }) => {
+  const [accepted, setAccepted] = useState(false)
+  const { t } = useTranslation()
+  const ref = useRef<HTMLElement>(null)
+  useSetContentHeight(ref)
+
+  return (
+    <ContentContainer ref={ref}>
+      <CenterContainer>
+        <IconCircle status="error" sx={{ mb: 2.5 }} />
+        <WarningTitle>{t('warning.title.tokenFlagged')}</WarningTitle>
+      </CenterContainer>
+      {tokens.map((token) => (
+        <WarningMessage key={`${token.chainId}-${token.address}`}>
+          {t('warning.message.tokenFlagged', { tokenSymbol: token.symbol })}
+        </WarningMessage>
+      ))}
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={accepted}
+            onChange={(_, checked) => setAccepted(checked)}
+          />
+        }
+        label={t('warning.checkbox.tokenFlagged')}
+        sx={{ mt: 1 }}
+      />
+      <ButtonRow>
+        <Button variant="text" onClick={onCancel} fullWidth>
+          {t('button.cancel')}
+        </Button>
+        <Button
+          variant="contained"
+          onClick={onContinue}
+          disabled={!accepted}
+          fullWidth
+        >
+          {t('button.continue')}
+        </Button>
+      </ButtonRow>
+    </ContentContainer>
+  )
+}

package/src/pages/TransactionPage/TransactionReview.tsx

@@ -8,6 +8,7 @@ import { Card } from '../../components/Card/Card.js'
 import { WarningMessages } from '../../components/Messages/WarningMessages.js'
 import { RouteTokens } from '../../components/RouteCard/RouteTokens.js'
 import { useAddressActivity } from '../../hooks/useAddressActivity.js'
+import { useFlaggedTokenGuard } from '../../hooks/useFlaggedTokenGuard.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
@@ -18,6 +19,7 @@ import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'
 import { StartTransactionButton } from './StartTransactionButton.js'
 import { TokenValueBottomSheet } from './TokenValueBottomSheet.js'
+import { TokenVerificationBottomSheet } from './TokenVerificationBottomSheet.js'
 import {
   calculateValueLossPercentage,
   getTokenValueLossThreshold,
@@ -44,6 +46,8 @@ export const TransactionReview: React.FC<TransactionReviewProps> = ({
   const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)
   const confirmToAddressSheetRef = useRef<BottomSheetBase>(null)
 
+  const { flaggedTokens, flaggedTokenSheetRef } = useFlaggedTokenGuard(route)
+
   const {
     toAddress,
     hasActivity,
@@ -70,6 +74,7 @@ export const TransactionReview: React.FC<TransactionReviewProps> = ({
       })
     }
     tokenValueBottomSheetRef.current?.close()
+    flaggedTokenSheetRef.current?.close()
     executeRoute()
     setFieldValue('fromAmount', '')
     if (mode === 'custom') {
@@ -81,7 +86,9 @@ export const TransactionReview: React.FC<TransactionReviewProps> = ({
     })
   }
 
-  const handleStartClick = () => {
+  // Runs the remaining gates. The flagged-token sheet continues into this
+  // rather than executing, so accepting it does not skip the others.
+  const handleStartAfterTokenCheck = () => {
     if (
       toAddress &&
       !hasActivity &&
@@ -109,6 +116,19 @@ export const TransactionReview: React.FC<TransactionReviewProps> = ({
     }
   }
 
+  const handleStartClick = () => {
+    if (flaggedTokens.length) {
+      flaggedTokenSheetRef.current?.open()
+      return
+    }
+    handleStartAfterTokenCheck()
+  }
+
+  const handleFlaggedTokensContinue = () => {
+    flaggedTokenSheetRef.current?.close()
+    handleStartAfterTokenCheck()
+  }
+
   const getButtonText = (): string => {
     switch (mode) {
       case 'custom':
@@ -150,6 +170,13 @@ export const TransactionReview: React.FC<TransactionReviewProps> = ({
           onContinue={handleExecuteRoute}
         />
       ) : null}
+      {flaggedTokens.length ? (
+        <TokenVerificationBottomSheet
+          ref={flaggedTokenSheetRef}
+          tokens={flaggedTokens}
+          onContinue={handleFlaggedTokensContinue}
+        />
+      ) : null}
       {!hiddenUI?.lowAddressActivityConfirmation ? (
         <ConfirmToAddressSheet
           ref={confirmToAddressSheetRef}

package/src/providers/WalletProvider/useExternalWalletProvider.ts

@@ -3,6 +3,7 @@ import {
   useBitcoinContext,
   useEthereumContext,
   useSolanaContext,
+  useStellarContext,
   useSuiContext,
   useTronContext,
 } from '@lifi/widget-provider'
@@ -21,6 +22,7 @@ const internalChainTypes = [
   ChainType.UTXO,
   ChainType.MVM,
   ChainType.TVM,
+  ChainType.STL,
 ]
 
 export function useExternalWalletProvider(): ExternalWalletProvider {
@@ -30,6 +32,7 @@ export function useExternalWalletProvider(): ExternalWalletProvider {
   const { isExternalContext: hasExternalBitcoinContext } = useBitcoinContext()
   const { isExternalContext: hasExternalSuiContext } = useSuiContext()
   const { isExternalContext: hasExternalTronContext } = useTronContext()
+  const { isExternalContext: hasExternalStellarContext } = useStellarContext()
   const data = useMemo(() => {
     const providers: ChainType[] = []
     if (hasExternalEthereumContext) {
@@ -47,12 +50,16 @@ export function useExternalWalletProvider(): ExternalWalletProvider {
     if (hasExternalTronContext) {
       providers.push(ChainType.TVM)
     }
+    if (hasExternalStellarContext) {
+      providers.push(ChainType.STL)
+    }
     const hasExternalProvider =
       hasExternalEthereumContext ||
       hasExternalSolanaContext ||
       hasExternalBitcoinContext ||
       hasExternalSuiContext ||
-      hasExternalTronContext
+      hasExternalTronContext ||
+      hasExternalStellarContext
 
     const useExternalWalletProvidersOnly =
       hasExternalProvider &&
@@ -71,6 +78,7 @@ export function useExternalWalletProvider(): ExternalWalletProvider {
     hasExternalBitcoinContext,
     hasExternalSuiContext,
     hasExternalTronContext,
+    hasExternalStellarContext,
     walletConfig?.usePartialWalletManagement,
     walletConfig?.forceInternalWalletManagement,
   ])

package/src/types/token.ts

@@ -4,11 +4,14 @@ import type {
   TokenExtended,
 } from '@lifi/sdk'
 
-interface TokenFlags {
+export interface TokenFlags {
   featured?: boolean
   popular?: boolean
   pinned?: boolean
   verified?: boolean
+  native?: boolean
+  /** Came from the main token list rather than from a search. */
+  listed?: boolean
 }
 
 export interface TokenAmount extends SDKTokenAmount, TokenFlags {}
@@ -17,5 +20,5 @@ export interface TokenAmountExtended
   extends SDKTokenAmountExtended,
     TokenFlags {}
 
-export type TokenWithVerified = TokenExtended & { verified?: boolean }
-export type TokensByChain = Record<number, TokenWithVerified[]>
+export type TokenWithFlags = TokenExtended & TokenFlags
+export type TokensByChain = Record<number, TokenWithFlags[]>

package/src/utils/customReceiver.ts

@@ -0,0 +1,7 @@
+import { ChainType } from '@lifi/sdk'
+
+// Stellar routes always settle to the account that signs them.
+export const isCustomReceiverUnsupported = (
+  fromChainType?: ChainType,
+  toChainType?: ChainType
+): boolean => fromChainType === ChainType.STL && toChainType === ChainType.STL

package/src/utils/gas.ts

@@ -0,0 +1,41 @@
+import type { LiFiStepExtended, RouteExtended } from '@lifi/sdk'
+import { ChainType } from '@lifi/sdk'
+
+/**
+ * Returns how much of a step's gas token the route itself delivers before that
+ * step runs. The previous step must output the gas token on the same chain, and
+ * whatever this step consumes as input is not available for gas.
+ * Stellar routes only — they bridge XLM to the receiver and hold back a buffer
+ * for the account reserve and the destination step fees.
+ */
+export const getSelfFundedGasAmount = (
+  route: RouteExtended,
+  step: LiFiStepExtended,
+  gasChainType?: ChainType
+): bigint => {
+  // TODO: remove the chain gate when the backend reserves gas on every chain
+  if (gasChainType !== ChainType.STL) {
+    return 0n
+  }
+  const gasToken = step.estimate.gasCosts?.[0]?.token
+  const previousStep = route.steps[route.steps.indexOf(step) - 1]
+  if (!gasToken || !previousStep) {
+    return 0n
+  }
+  const { toToken } = previousStep.action
+  if (
+    toToken.chainId !== gasToken.chainId ||
+    toToken.address.toLowerCase() !== gasToken.address.toLowerCase()
+  ) {
+    return 0n
+  }
+  const deliveredAmount = BigInt(previousStep.estimate.toAmountMin)
+  const consumedAmount =
+    step.action.fromToken.address.toLowerCase() ===
+    gasToken.address.toLowerCase()
+      ? BigInt(step.action.fromAmount)
+      : 0n
+  return deliveredAmount > consumedAmount
+    ? deliveredAmount - consumedAmount
+    : 0n
+}