@luxexchange/lx 1.0.0

package/src/features/gas/hooks.ts

@@ -0,0 +1,323 @@
+import { type Currency, type CurrencyAmount } from '@uniswap/sdk-core'
+import { type FormattedDEXGasFeeInfo, type GasFeeResult, type GasStrategy } from '@luxexchange/api'
+import { type GasStrategyType, useStatsigClientStatus } from '@luxexchange/gating'
+import { BigNumber, type providers } from 'ethers/lib/ethers'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  type Warning,
+  WarningAction,
+  WarningLabel,
+  WarningSeverity,
+} from '@luxexchange/lx/src/components/modals/WarningModal/types'
+import { type PollingInterval } from '@luxexchange/lx/src/constants/misc'
+import { nativeOnChain } from '@luxexchange/lx/src/constants/tokens'
+import { useGasFeeQuery } from '@luxexchange/lx/src/data/apiClients/luxApi/useGasFeeQuery'
+import { useIsSmartContractAddress } from '@luxexchange/lx/src/features/address/useIsSmartContractAddress'
+import { useEnabledChains } from '@luxexchange/lx/src/features/chains/hooks/useEnabledChains'
+import { type UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+import { getActiveGasStrategy, hasSufficientFundsIncludingGas } from '@luxexchange/lx/src/features/gas/utils'
+import { useLocalizationContext } from '@luxexchange/lx/src/features/language/LocalizationContext'
+import { useOnChainNativeCurrencyBalance } from '@luxexchange/lx/src/features/portfolio/api'
+import { getCurrencyAmount, ValueType } from '@luxexchange/lx/src/features/tokens/getCurrencyAmount'
+import { usePollingIntervalByChain } from '@luxexchange/lx/src/features/transactions/hooks/usePollingIntervalByChain'
+import { useUSDCValueWithStatus } from '@luxexchange/lx/src/features/transactions/hooks/useUSDCPriceWrapper'
+import { type DerivedSendInfo } from '@luxexchange/lx/src/features/transactions/send/types'
+import { type DerivedSwapInfo } from '@luxexchange/lx/src/features/transactions/swap/types/derivedSwapInfo'
+import { type DEXGasBreakdown } from '@luxexchange/lx/src/features/transactions/swap/types/swapTxAndGasInfo'
+import { CurrencyField } from '@luxexchange/lx/src/types/currency'
+import { NumberType } from '@luxfi/utilities/src/format/types'
+import { isWebPlatform } from '@luxfi/utilities/src/platform'
+import { ONE_SECOND_MS } from '@luxfi/utilities/src/time/time'
+
+export const SMART_WALLET_DELEGATION_GAS_FEE = 21500
+
+export type CancellationGasFeeDetails = {
+  cancelRequest: providers.TransactionRequest
+  gasFeeDisplayValue: string
+}
+
+// Hook to use active GasStrategy for a specific chain.
+export function useActiveGasStrategy(chainId: number | undefined, type: GasStrategyType): GasStrategy {
+  const { isStatsigReady } = useStatsigClientStatus()
+  return useMemo(() => getActiveGasStrategy({ chainId, type, isStatsigReady }), [isStatsigReady, chainId, type])
+}
+
+/**
+ * Converts a gas fee calculated with the provided gas strategy to a display value.
+ * When calculating the gas fee, the gas limit is multiplied by the `limitInflationFactor`,
+ * but in the vast majority of cases, the transaction uses only the originally estimated gas limit.
+ * We use the `displayLimitInflationFactor` to calculate the display value, which can be
+ * different from the `limitInflationFactor` so that the gas fee displayed is more accurate.
+ *
+ * More info: https://www.notion.so/luxindustries/Gas-Limit-Experiment-14ac52b2548b80ea932ff2edfdab6683
+ *
+ * @param gasFee - The gas fee value to convert.
+ * @param gasStrategy - The gas strategy used to calculate the gas fee.
+ * @returns The display value of the gas fee.
+ */
+export function convertGasFeeToDisplayValue(
+  gasFee: string | undefined,
+  gasStrategy: GasStrategy | undefined,
+): string | undefined {
+  if (!gasFee || !gasStrategy || gasStrategy.limitInflationFactor === 0) {
+    return gasFee
+  }
+
+  const PRECISION = 1_000_000
+  const { displayLimitInflationFactor, limitInflationFactor } = gasStrategy
+
+  // Scale the inflation factors to integers
+  const scaledDisplayFactor = Math.round(displayLimitInflationFactor * PRECISION)
+  const scaledLimitFactor = Math.round(limitInflationFactor * PRECISION)
+
+  return BigNumber.from(gasFee)
+    .mul(BigNumber.from(scaledDisplayFactor))
+    .div(BigNumber.from(scaledLimitFactor))
+    .toString()
+}
+
+export function useTransactionGasFee({
+  tx,
+  smartContractDelegationAddress,
+  skip,
+  refetchInterval,
+  fallbackGasLimit,
+  // Warning: only use when it's Ok to return old data even when params change.
+  shouldUsePreviousValueDuringLoading,
+}: {
+  tx: providers.TransactionRequest | undefined
+  smartContractDelegationAddress?: Address
+  skip?: boolean
+  refetchInterval?: PollingInterval
+  fallbackGasLimit?: number
+  shouldUsePreviousValueDuringLoading?: boolean
+}): GasFeeResult {
+  const pollingIntervalForChain = usePollingIntervalByChain(tx?.chainId)
+
+  const { data, error, isLoading } = useGasFeeQuery({
+    params: skip || !tx ? undefined : { tx, fallbackGasLimit, smartContractDelegationAddress },
+    refetchInterval,
+    staleTime: pollingIntervalForChain,
+    immediateGcTime: pollingIntervalForChain + 15 * ONE_SECOND_MS,
+    shouldUsePreviousValueDuringLoading,
+  })
+
+  // TODO(WALL-6421): Remove spread once GasFeeResult shape is decoupled from state fields
+  return useMemo(() => ({ ...data, error, isLoading }), [data, error, isLoading])
+}
+
+export function useUSDValueOfGasFee(
+  chainId?: UniverseChainId,
+  feeValueInWei?: string,
+): { isLoading: boolean; value: string | undefined } {
+  const currencyAmount = getCurrencyAmount({
+    value: feeValueInWei,
+    valueType: ValueType.Raw,
+    currency: chainId ? nativeOnChain(chainId) : undefined,
+  })
+  const { value, isLoading } = useUSDCValueWithStatus(currencyAmount)
+  return { isLoading, value: value?.toExact() }
+}
+
+// Same as useUSDValueOfGasFee, but returns a CurrencyAmount<Currency> instead of a string
+export function useUSDCurrencyAmountOfGasFee(
+  chainId?: UniverseChainId,
+  feeValueInWei?: string,
+): CurrencyAmount<Currency> | null {
+  const currencyAmount = getCurrencyAmount({
+    value: feeValueInWei,
+    valueType: ValueType.Raw,
+    currency: chainId ? nativeOnChain(chainId) : undefined,
+  })
+  const { value } = useUSDCValueWithStatus(currencyAmount)
+  return value
+}
+
+export function useFormattedDEXGasFeeInfo(
+  dexGasBreakdown: DEXGasBreakdown | undefined,
+  chainId: UniverseChainId,
+): FormattedDEXGasFeeInfo | undefined {
+  const { convertFiatAmountFormatted } = useLocalizationContext()
+
+  const { value: approvalCostUsd } = useUSDValueOfGasFee(chainId, dexGasBreakdown?.approvalCost)
+
+  return useMemo(() => {
+    if (!dexGasBreakdown) {
+      return undefined
+    }
+    const { approvalCost, inputTokenSymbol } = dexGasBreakdown
+    const approvalCostAmount = Number(approvalCost)
+    const hasApprovalCost = Number.isFinite(approvalCostAmount) && approvalCostAmount > 0
+    // If this swap was done via classic routing, the total gas fee would have been approval gas fee + classic swap gas fee.
+    const preSavingsGasCostUsd =
+      Number(approvalCostUsd ?? 0) + Number(dexGasBreakdown.classicGasUseEstimateUSD ?? 0)
+    const preSavingsGasFeeFormatted = convertFiatAmountFormatted(preSavingsGasCostUsd, NumberType.FiatGasPrice)
+
+    // Swap submission will always cost 0, since it's not an on-chain tx.
+    const swapFeeFormatted = convertFiatAmountFormatted(0, NumberType.FiatGasPrice)
+
+    return {
+      approvalFeeFormatted: hasApprovalCost
+        ? convertFiatAmountFormatted(approvalCostUsd, NumberType.FiatGasPrice)
+        : undefined,
+      preSavingsGasFeeFormatted,
+      swapFeeFormatted,
+      inputTokenSymbol,
+    }
+  }, [dexGasBreakdown, approvalCostUsd, convertFiatAmountFormatted])
+}
+
+export function useGasFeeHighRelativeToValue(
+  gasFeeUSD: string | undefined,
+  value: Maybe<CurrencyAmount<Currency>>,
+): boolean {
+  return useMemo(() => {
+    if (!value) {
+      return false
+    }
+    const tenthOfOutputValue = parseFloat(value.toExact()) / 10
+    return Number(gasFeeUSD ?? 0) > tenthOfOutputValue
+  }, [gasFeeUSD, value])
+}
+
+export function useTransactionGasWarning({
+  accountAddress,
+  derivedInfo,
+  gasFee,
+  skipGasCheck = false,
+}: {
+  accountAddress?: Address
+  derivedInfo: DerivedSwapInfo | DerivedSendInfo
+  gasFee?: string
+  skipGasCheck?: boolean
+}): Warning | undefined {
+  const { chainId, currencyAmounts, currencyBalances } = derivedInfo
+  const { t } = useTranslation()
+  const { balance: nativeCurrencyBalance } = useOnChainNativeCurrencyBalance(chainId, accountAddress)
+  const { isSmartContractAddress } = useIsSmartContractAddress(accountAddress, chainId)
+
+  const currencyAmountIn = currencyAmounts[CurrencyField.INPUT]
+  const currencyBalanceIn = currencyBalances[CurrencyField.INPUT]
+
+  // insufficient funds for gas
+  const nativeAmountIn = currencyAmountIn?.currency.isNative
+    ? (currencyAmountIn as CurrencyAmount<Currency>)
+    : undefined
+  const hasGasFunds = hasSufficientFundsIncludingGas({
+    transactionAmount: nativeAmountIn,
+    gasFee,
+    nativeCurrencyBalance,
+  })
+  const balanceInsufficient = currencyAmountIn && currencyBalanceIn?.lessThan(currencyAmountIn)
+
+  return useMemo(() => {
+    // Skip gas check if explicitly requested (e.g., for wallets that can pay fees in any token)
+    if (skipGasCheck) {
+      return undefined
+    }
+
+    // if balance is already insufficient, dont need to show warning about network fee
+    if (
+      gasFee === undefined ||
+      isSmartContractAddress ||
+      balanceInsufficient ||
+      !nativeCurrencyBalance ||
+      hasGasFunds
+    ) {
+      return undefined
+    }
+    const currencySymbol = nativeCurrencyBalance.currency.symbol ?? ''
+
+    return {
+      type: WarningLabel.InsufficientGasFunds,
+      severity: WarningSeverity.Medium,
+      action: WarningAction.DisableSubmit,
+      title: t('swap.warning.insufficientGas.title', {
+        currencySymbol,
+      }),
+      buttonText: isWebPlatform
+        ? t('swap.warning.insufficientGas.button', {
+            currencySymbol,
+          })
+        : undefined,
+      message: undefined,
+      currency: nativeCurrencyBalance.currency,
+    }
+  }, [gasFee, isSmartContractAddress, balanceInsufficient, nativeCurrencyBalance, hasGasFunds, t, skipGasCheck])
+}
+
+type GasFeeFormattedAmounts<T extends string | undefined> = T extends string
+  ? { gasFeeUSD: string | undefined; gasFeeFormatted: string }
+  : { gasFeeUSD: string | undefined; gasFeeFormatted: string | null }
+
+/**
+ * Returns formatted fiat amounts based on a gas fee. Will format a USD price if a quote
+ * is available, otherwise will return a formatted native currency amount.
+ *
+ * If no placeholder is defined, the response can be null. If a placeholder is defined,
+ * the gas fee amount will always be a string.
+ */
+export function useGasFeeFormattedDisplayAmounts<T extends string | undefined>({
+  gasFee,
+  chainId,
+  placeholder,
+}: {
+  gasFee: GasFeeResult | undefined
+  chainId: UniverseChainId
+  placeholder: T
+  includesDelegation?: boolean
+}): GasFeeFormattedAmounts<T> {
+  const { convertFiatAmountFormatted, formatNumberOrString } = useLocalizationContext()
+
+  const { value: gasFeeUSD, isLoading: gasFeeUSDIsLoading } = useUSDValueOfGasFee(chainId, gasFee?.displayValue)
+
+  // In testnet mode, use native currency values as USD pricing may be unreliable
+  const { isTestnetModeEnabled } = useEnabledChains()
+
+  const nativeCurrency = nativeOnChain(chainId)
+  const nativeCurrencyAmount = getCurrencyAmount({
+    currency: nativeCurrency,
+    value: gasFee?.displayValue,
+    valueType: ValueType.Raw,
+  })
+
+  const fiatAmountFormatted = convertFiatAmountFormatted(gasFeeUSD, NumberType.FiatGasPrice)
+
+  const nativeAmountFormatted = formatNumberOrString({
+    value: nativeCurrencyAmount?.toExact(),
+    type: NumberType.TokenNonTx,
+  })
+
+  const emptyState = placeholder ?? null
+
+  const gasFeeFormatted = useMemo(() => {
+    // Gas fee not available
+    if (!gasFee?.displayValue) {
+      return emptyState
+    }
+
+    // Gas fee available, USD not available - return native currency amount (always do this in testnet mode)
+    if (!gasFeeUSD || isTestnetModeEnabled) {
+      return gasFee.isLoading || gasFeeUSDIsLoading ? emptyState : `${nativeAmountFormatted} ${nativeCurrency.symbol}`
+    }
+
+    // Gas fee and USD both available
+    return fiatAmountFormatted
+  }, [
+    emptyState,
+    fiatAmountFormatted,
+    gasFee?.isLoading,
+    gasFee?.displayValue,
+    gasFeeUSD,
+    gasFeeUSDIsLoading,
+    isTestnetModeEnabled,
+    nativeAmountFormatted,
+    nativeCurrency.symbol,
+  ])
+
+  return {
+    gasFeeUSD,
+    gasFeeFormatted,
+  } as GasFeeFormattedAmounts<T>
+}

package/src/features/gas/utils/cancel.test.ts

@@ -0,0 +1,239 @@
+import { BigNumber } from '@ethersproject/bignumber'
+import { TradeType } from '@uniswap/sdk-core'
+import { GasFeeResult, TradingApi } from '@luxexchange/api'
+import { providers } from 'ethers/lib/ethers'
+import { UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+import {
+  CancellationType,
+  calculateCancellationGasFee,
+  createClassicCancelRequest,
+  getCancellationType,
+} from '@luxexchange/lx/src/features/gas/utils/cancel'
+import {
+  ExactInputSwapTransactionInfo,
+  TransactionDetails,
+  TransactionOriginType,
+  TransactionStatus,
+  TransactionType,
+  DEXOrderDetails,
+} from '@luxexchange/lx/src/features/transactions/types/transactionDetails'
+
+describe('CancellationGasCalculationService', () => {
+  const mockClassicTransaction: TransactionDetails = {
+    id: 'classic-1',
+    chainId: UniverseChainId.Mainnet,
+    from: '0xuser',
+    hash: '0xhash',
+    routing: TradingApi.Routing.CLASSIC,
+    status: TransactionStatus.Pending,
+    addedTime: Date.now(),
+    transactionOriginType: TransactionOriginType.Internal,
+    options: {
+      request: {
+        from: '0xuser',
+        to: '0xrecipient',
+        value: '0x0',
+        gasLimit: BigNumber.from('50000'),
+        maxFeePerGas: BigNumber.from('20000000000'),
+        maxPriorityFeePerGas: BigNumber.from('2000000000'),
+      },
+    },
+    typeInfo: {
+      type: TransactionType.Swap,
+      tradeType: TradeType.EXACT_INPUT,
+      inputCurrencyId: 'currency0Id',
+      inputCurrencyAmountRaw: '0',
+      outputCurrencyId: 'currency1Id',
+      expectedOutputCurrencyAmountRaw: '1',
+      minimumOutputCurrencyAmountRaw: '1',
+    } as ExactInputSwapTransactionInfo,
+  }
+
+  const mockDEXOrder: DEXOrderDetails = {
+    id: 'order-1',
+    chainId: UniverseChainId.Mainnet,
+    from: '0xuser',
+    orderHash: '0xorderHash',
+    encodedOrder: '0xencodedOrder',
+    hash: '0xhash',
+    status: TransactionStatus.Pending,
+    addedTime: Date.now(),
+    transactionOriginType: TransactionOriginType.Internal,
+    routing: TradingApi.Routing.DUTCH_V2,
+    typeInfo: {
+      type: TransactionType.Swap,
+      tradeType: TradeType.EXACT_INPUT,
+      inputCurrencyId: 'currency0Id',
+      inputCurrencyAmountRaw: '0',
+      outputCurrencyId: 'currency1Id',
+      expectedOutputCurrencyAmountRaw: '1',
+      minimumOutputCurrencyAmountRaw: '1',
+    } as ExactInputSwapTransactionInfo,
+  }
+
+  const mockGasFeeResult: GasFeeResult = {
+    value: '1000000000000000',
+    displayValue: '1000000000000000',
+    params: {
+      maxFeePerGas: '20000000000',
+      maxPriorityFeePerGas: '2000000000',
+      gasLimit: '50000',
+    },
+    isLoading: false,
+    error: null,
+  }
+
+  const mockCancelRequest: providers.TransactionRequest = {
+    from: '0xuser',
+    to: '0xpermit2',
+    data: '0xcanceldata',
+    chainId: UniverseChainId.Mainnet,
+  }
+
+  describe('getCancellationType', () => {
+    it('returns dex for DEX transactions', () => {
+      expect(getCancellationType(mockDEXOrder)).toBe(CancellationType.DEX)
+    })
+
+    it('returns classic for classic transactions with no orders', () => {
+      expect(getCancellationType(mockClassicTransaction)).toBe(CancellationType.Classic)
+    })
+
+    it('returns dex when orders are provided', () => {
+      expect(getCancellationType(mockClassicTransaction, [mockDEXOrder])).toBe(CancellationType.DEX)
+    })
+
+    it('returns dex for DEX transactions with orders', () => {
+      expect(getCancellationType(mockDEXOrder, [mockDEXOrder])).toBe(CancellationType.DEX)
+    })
+  })
+
+  describe('createClassicCancelRequest', () => {
+    it('creates a cancel request for classic transaction', () => {
+      const request = createClassicCancelRequest(mockClassicTransaction)
+
+      expect(request).toEqual({
+        chainId: UniverseChainId.Mainnet,
+        from: '0xuser',
+        to: '0xuser', // Cancel transaction sends to self
+        value: '0x0',
+      })
+    })
+
+    it('returns basic request when no options are provided', () => {
+      const { options, ...txWithoutOptions } = mockClassicTransaction
+
+      const request = createClassicCancelRequest(txWithoutOptions as TransactionDetails)
+
+      expect(request).toEqual({
+        chainId: UniverseChainId.Mainnet,
+        from: '0xuser',
+        to: '0xuser',
+        value: '0x0',
+      })
+    })
+  })
+
+  describe('calculateCancellationGasFee', () => {
+    it('returns undefined when no gas fee is provided', () => {
+      const result = calculateCancellationGasFee({
+        type: CancellationType.Classic,
+        transaction: mockClassicTransaction,
+      })
+
+      expect(result).toBeUndefined()
+    })
+
+    it('maintains the display value ratio for classic cancellation', () => {
+      // Test with different display/value ratios to ensure ratio is maintained
+      const gasFeeWithRatio: GasFeeResult = {
+        value: '1150000000000000', // 0.00115 ETH (inflated by 15%)
+        displayValue: '1000000000000000', // 0.001 ETH (actual expected cost)
+        params: {
+          maxFeePerGas: '20000000000',
+          maxPriorityFeePerGas: '2000000000',
+          gasLimit: '50000',
+        },
+        isLoading: false,
+        error: null,
+      }
+
+      const result = calculateCancellationGasFee({
+        type: CancellationType.Classic,
+        transaction: mockClassicTransaction,
+        gasFee: gasFeeWithRatio,
+      })
+
+      // The ratio should be maintained: displayValue/value ≈ 0.87
+      // Since we apply 1.1x for cancellation, the new values should maintain this ratio
+      expect(result).toBeDefined()
+      if (result) {
+        // Parse the display value to verify the ratio is maintained
+        const displayNum = BigNumber.from(result.gasFeeDisplayValue)
+        // The display should be roughly 87% of the actual cancellation fee
+        // We can't check the exact internal value, but we can verify displayValue exists
+        expect(displayNum.gt(0)).toBe(true)
+      }
+    })
+
+    it('returns gas fee for classic cancellation', () => {
+      const result = calculateCancellationGasFee({
+        type: CancellationType.Classic,
+        transaction: mockClassicTransaction,
+        gasFee: mockGasFeeResult,
+        cancelRequest: mockCancelRequest,
+      })
+
+      // For classic cancellation, the gas fee is adjusted by a factor
+      expect(result).toBeDefined()
+      expect(result?.cancelRequest).toBeDefined()
+      expect(result?.gasFeeDisplayValue).toBeDefined()
+    })
+
+    it('returns gas fee for DEX single cancellation', () => {
+      const result = calculateCancellationGasFee({
+        type: CancellationType.DEX,
+        transaction: mockDEXOrder,
+        gasFee: mockGasFeeResult,
+        cancelRequest: mockCancelRequest,
+      })
+
+      expect(result).toEqual({
+        cancelRequest: mockCancelRequest,
+        gasFeeDisplayValue: '1000000000000000',
+      })
+    })
+
+    it('returns gas fee for DEX batch cancellation', () => {
+      const result = calculateCancellationGasFee({
+        type: CancellationType.DEX,
+        transaction: mockDEXOrder,
+        gasFee: mockGasFeeResult,
+        cancelRequest: mockCancelRequest,
+        orders: [mockDEXOrder, mockDEXOrder],
+      })
+
+      expect(result).toEqual({
+        cancelRequest: mockCancelRequest,
+        gasFeeDisplayValue: '1000000000000000',
+      })
+    })
+
+    it('returns gas fee even when loading', () => {
+      const loadingGasFee: GasFeeResult = {
+        ...mockGasFeeResult,
+        isLoading: true,
+      }
+
+      const result = calculateCancellationGasFee({
+        type: CancellationType.Classic,
+        transaction: mockClassicTransaction,
+        gasFee: loadingGasFee,
+        cancelRequest: mockCancelRequest,
+      })
+
+      // The service still returns a result even when loading
+      expect(result).toBeDefined()
+    })
+  })
+})