@luxexchange/lx 1.0.0

package/src/features/transactions/swap/hooks/useTrade/useIndicativeTradeServiceQueryOptions.ts

@@ -0,0 +1,36 @@
+import { queryOptions } from '@tanstack/react-query'
+import type { TradeService } from '@luxexchange/lx/src/features/transactions/swap/services/tradeService/tradeService'
+import type { ValidatedTradeInput } from '@luxexchange/lx/src/features/transactions/swap/services/tradeService/transformations/buildQuoteRequest'
+import type { IndicativeTrade, UseTradeArgs } from '@luxexchange/lx/src/features/transactions/swap/types/trade'
+import { ReactQueryCacheKey } from '@luxfi/utilities/src/reactQuery/cache'
+import type { QueryOptionsResult } from '@luxfi/utilities/src/reactQuery/queryOptions'
+
+export type IndicativeTradeServiceQueryOptions = QueryOptionsResult<
+  IndicativeTrade | null,
+  Error,
+  IndicativeTrade | null,
+  [ReactQueryCacheKey.TradeService, 'getIndicativeTrade', ValidatedTradeInput | null]
+>
+
+/**
+ * Creates the queryOptions for handling indicative trades via a trade service
+ * @param ctx - ctx containing the trade service
+ * @returns The query options
+ */
+export function createIndicativeTradeServiceQueryOptions(ctx: {
+  tradeService: TradeService
+}): (params?: UseTradeArgs) => IndicativeTradeServiceQueryOptions {
+  return (params?: UseTradeArgs) => {
+    const validatedInput = ctx.tradeService.prepareIndicativeTradeInput(params)
+    return queryOptions({
+      queryKey: [ReactQueryCacheKey.TradeService, 'getIndicativeTrade', validatedInput],
+      queryFn: async (): Promise<IndicativeTrade | null> => {
+        if (!params) {
+          return null
+        }
+        return ctx.tradeService.getIndicativeTrade(params)
+      },
+      enabled: !!params && !params.skip && !!validatedInput,
+    })
+  }
+}

package/src/features/transactions/swap/hooks/useTrade/useTradeQuery.ts

@@ -0,0 +1,46 @@
+import { UseQueryResult } from '@tanstack/react-query'
+import { useQueryWithImmediateGarbageCollection } from '@luxfi/api'
+import { useRef } from 'react'
+import { useTradeService } from '@luxexchange/lx/src/features/services'
+import { usePollingIntervalByChain } from '@luxexchange/lx/src/features/transactions/hooks/usePollingIntervalByChain'
+import { parseQuoteCurrencies } from '@luxexchange/lx/src/features/transactions/swap/hooks/useTrade/parseQuoteCurrencies'
+import { createTradeServiceQueryOptions } from '@luxexchange/lx/src/features/transactions/swap/hooks/useTrade/useTradeServiceQueryOptions'
+import { TradeWithGasEstimates } from '@luxexchange/lx/src/features/transactions/swap/services/tradeService/tradeService'
+import { UseTradeArgs } from '@luxexchange/lx/src/features/transactions/swap/types/trade'
+import { useEvent } from '@luxfi/utilities/src/react/hooks'
+import { ONE_SECOND_MS } from '@luxfi/utilities/src/time/time'
+
+export function useTradeQuery(params: UseTradeArgs): UseQueryResult<TradeWithGasEstimates> {
+  const quoteCurrencyData = parseQuoteCurrencies(params)
+  const pollingIntervalForChain = usePollingIntervalByChain(quoteCurrencyData.currencyIn?.chainId)
+  const internalPollInterval = params.pollInterval ?? pollingIntervalForChain
+  const tradeService = useTradeService()
+  const getTradeQueryOptions = useEvent(createTradeServiceQueryOptions({ tradeService }))
+
+  const response = useQueryWithImmediateGarbageCollection({
+    ...getTradeQueryOptions(params),
+    refetchInterval: internalPollInterval,
+    // We set the `gcTime` to 15 seconds longer than the refetch interval so that there's more than enough time for a refetch to complete before we clear the stale data.
+    // If the user loses internet connection (or leaves the app and comes back) for longer than this,
+    // then we clear stale data and show a big loading spinner in the swap review screen.
+    immediateGcTime: internalPollInterval + ONE_SECOND_MS * 15,
+    // We want to retry once, rather than the default, in order to populate response.error / Error UI sooner.
+    // The query will still poll after failed retries, due to staleness.
+    retry: 1,
+  })
+
+  const errorRef = useRef<Error | null>(response.error)
+
+  // We want to keep the error while react-query is refetching, so that the error message doesn't go in and out while it's polling.
+  if (response.errorUpdatedAt > response.dataUpdatedAt) {
+    // If there's a new error, save the new one. If there's no error (we're re-fetching), keep the old one.
+    errorRef.current = response.error ?? errorRef.current
+  } else {
+    errorRef.current = response.error
+  }
+
+  return {
+    ...response,
+    error: errorRef.current,
+  } as UseQueryResult<TradeWithGasEstimates>
+}

package/src/features/transactions/swap/hooks/useTrade/useTradeServiceQueryOptions.ts

@@ -0,0 +1,39 @@
+import { queryOptions, UseQueryOptions } from '@tanstack/react-query'
+import type { JupiterOrderUrlParams } from '@luxfi/api/src/clients/jupiter/types'
+import type {
+  TradeService,
+  TradeWithGasEstimates,
+} from '@luxexchange/lx/src/features/transactions/swap/services/tradeService/tradeService'
+import { ValidatedTradeInput } from '@luxexchange/lx/src/features/transactions/swap/services/tradeService/transformations/buildQuoteRequest'
+import { UseTradeArgs } from '@luxexchange/lx/src/features/transactions/swap/types/trade'
+import { ReactQueryCacheKey } from '@luxfi/utilities/src/reactQuery/cache'
+
+export type TradeServiceQueryOptions = UseQueryOptions<
+  TradeWithGasEstimates,
+  Error,
+  TradeWithGasEstimates,
+  [
+    ReactQueryCacheKey.TradeService,
+    'getTrade',
+    ValidatedTradeInput | JupiterOrderUrlParams | null, // TODO(SWAP-383): Remove JupiterOrderUrlParams from union once Solana trade repo is implemented
+  ]
+>
+
+export function createTradeServiceQueryOptions(ctx: {
+  tradeService: TradeService
+}): (params?: UseTradeArgs) => TradeServiceQueryOptions {
+  return (params?: UseTradeArgs) => {
+    const validatedInput = params ? ctx.tradeService.prepareTradeInput(params) : null
+
+    return queryOptions({
+      queryKey: [ReactQueryCacheKey.TradeService, 'getTrade', validatedInput],
+      queryFn: async (): Promise<TradeWithGasEstimates> => {
+        if (!params) {
+          return { trade: null }
+        }
+        return ctx.tradeService.getTrade(params)
+      },
+      enabled: !!params && !params.skip && !!validatedInput,
+    })
+  }
+}

package/src/features/transactions/swap/hooks/useTrade.ts

@@ -0,0 +1,81 @@
+import { Currency } from '@luxfi/amm-core'
+import { useMemo } from 'react'
+import { parseQuoteCurrencies } from '@luxexchange/lx/src/features/transactions/swap/hooks/useTrade/parseQuoteCurrencies'
+import { useIndicativeTradeQuery } from '@luxexchange/lx/src/features/transactions/swap/hooks/useTrade/useIndicativeTradeQuery'
+import { useTradeQuery } from '@luxexchange/lx/src/features/transactions/swap/hooks/useTrade/useTradeQuery'
+import type { TradeWithGasEstimates } from '@luxexchange/lx/src/features/transactions/swap/services/tradeService/tradeService'
+import { TradeWithStatus, UseTradeArgs } from '@luxexchange/lx/src/features/transactions/swap/types/trade'
+
+// error strings hardcoded in @l.x/unified-routing-api
+// https://github.com/Lux/unified-routing-api/blob/020ea371a00d4cc25ce9f9906479b00a43c65f2c/lib/util/errors.ts#L4
+export const SWAP_QUOTE_ERROR = 'QUOTE_ERROR'
+
+export const API_RATE_LIMIT_ERROR = 'TOO_MANY_REQUESTS'
+
+export function useTrade(params: UseTradeArgs): TradeWithStatus {
+  const { error, data, isLoading: queryIsLoading, isFetching } = useTradeQuery(params)
+  const isLoading = (params.amountSpecified && params.isDebouncing) || queryIsLoading
+  const indicative = useIndicativeTradeQuery(params)
+  const { currencyIn, currencyOut } = parseQuoteCurrencies(params)
+
+  return useMemo(() => {
+    return parseTradeResult({
+      data,
+      currencyIn,
+      currencyOut,
+      isLoading,
+      isFetching,
+      indicative,
+      error,
+      isDebouncing: params.isDebouncing,
+    })
+  }, [currencyIn, currencyOut, data, error, indicative, isFetching, isLoading, params.isDebouncing])
+}
+
+function parseTradeResult(input: {
+  data?: TradeWithGasEstimates
+  currencyIn?: Currency
+  currencyOut?: Currency
+  isLoading: boolean
+  isFetching: boolean
+  indicative: ReturnType<typeof useIndicativeTradeQuery>
+  error: Error | null
+  isDebouncing?: boolean
+}): TradeWithStatus {
+  const { data, currencyIn, currencyOut, isLoading, isFetching, indicative, error, isDebouncing } = input
+  if (!data?.trade || !currencyIn || !currencyOut) {
+    return {
+      isLoading: Boolean(isLoading || isDebouncing),
+      isFetching,
+      trade: null,
+      indicativeTrade: isLoading ? indicative.trade : undefined,
+      isIndicativeLoading: indicative.isLoading,
+      error,
+      gasEstimate: data?.gasEstimate,
+    }
+  }
+
+  // If `transformTradingApiResponseToTrade` returns a `null` trade, it means we have a non-null quote, but no routes.
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (data.trade === null) {
+    return {
+      isLoading,
+      isFetching,
+      trade: null,
+      indicativeTrade: undefined, // We don't want to show the indicative trade if there is no completable trade
+      isIndicativeLoading: false,
+      error: new Error('Unable to validate trade'),
+      gasEstimate: data.gasEstimate,
+    }
+  }
+
+  return {
+    isLoading: isDebouncing || isLoading,
+    isFetching,
+    trade: data.trade,
+    indicativeTrade: indicative.trade,
+    isIndicativeLoading: indicative.isLoading,
+    error,
+    gasEstimate: data.gasEstimate,
+  }
+}

package/src/features/transactions/swap/hooks/useTradeFromExistingPlan.ts

@@ -0,0 +1,104 @@
+import { ChainedQuoteResponse, TradingApi } from '@luxexchange/api'
+import { useMemo } from 'react'
+import { getPlanCompoundSlippageTolerance } from '@luxexchange/lx/src/features/transactions/swap/plan/slippage'
+import { activePlanStore } from '@luxexchange/lx/src/features/transactions/swap/review/stores/activePlan/activePlanStore'
+import { prepareTradingApiTradeInput } from '@luxexchange/lx/src/features/transactions/swap/services/tradeService/evmTradeService'
+import { ValidatedTradeInput } from '@luxexchange/lx/src/features/transactions/swap/services/tradeService/transformations/buildQuoteRequest'
+import { ChainedActionTrade, TradeWithStatus, UseTradeArgs } from '@luxexchange/lx/src/features/transactions/swap/types/trade'
+import { useStore } from 'zustand'
+
+export interface TransformPlanParams {
+  planResponse: TradingApi.PlanResponse
+  validatedInput: ValidatedTradeInput
+  slippageTolerance: number
+}
+
+export function transformPlanResponseToChainedQuote({
+  planResponse,
+  validatedInput,
+  slippageTolerance,
+}: TransformPlanParams): ChainedQuoteResponse {
+  // Extract amount string from CurrencyAmount
+  const inputAmount = validatedInput.amount.quotient.toString()
+  // Construct ClassicInput and ClassicOutput objects
+  const input: TradingApi.ClassicInput = {
+    amount: inputAmount,
+    token: validatedInput.tokenInAddress,
+  }
+  const output: TradingApi.ClassicOutput = {
+    amount: planResponse.expectedOutput,
+    token: validatedInput.tokenOutAddress,
+    recipient: planResponse.recipient,
+  }
+  // Build ChainedQuote with proper structure
+  const chainedQuote: TradingApi.ChainedQuote = {
+    input,
+    output,
+    swapper: planResponse.swapper,
+    tokenInChainId: validatedInput.tokenInChainId as TradingApi.ChainId,
+    tokenOutChainId: validatedInput.tokenOutChainId as TradingApi.ChainId,
+    tradeType: validatedInput.requestTradeType,
+    slippage: slippageTolerance,
+    quoteId: planResponse.quoteId,
+    // Gas field mapping
+    gasFee: planResponse.gasFee,
+    gasFeeUSD: planResponse.gasFeeUSD,
+    gasFeeQuote: planResponse.gasFeeQuote,
+    gasUseEstimate: planResponse.gasUseEstimate,
+    timeEstimateMs: planResponse.timeEstimateMs,
+    gasStrategies: planResponse.gasStrategies ?? [],
+    steps: planResponse.steps.map((step) => ({
+      ...step,
+      // stepType should be defined but if not CLASSIC is a safe fallback since it's only used for estimations
+      stepType: step.stepType ?? TradingApi.PlanStepType.CLASSIC,
+    })),
+  }
+  // Construct complete ChainedQuoteResponse
+  const chainedQuoteResponse: ChainedQuoteResponse = {
+    routing: TradingApi.Routing.CHAINED,
+    quote: chainedQuote,
+    requestId: planResponse.requestId,
+    permitData: null, // Plans don't require new permits
+  } as ChainedQuoteResponse
+  return chainedQuoteResponse
+}
+
+export function useTradeFromExistingPlan(params: UseTradeArgs): TradeWithStatus | undefined {
+  const activePlanResponse = useStore(activePlanStore, (state) => state.activePlan?.response)
+
+  return useMemo(() => {
+    if (!activePlanResponse) {
+      return undefined
+    }
+
+    const validatedInput = prepareTradingApiTradeInput(params)
+    if (!validatedInput) {
+      return undefined
+    }
+
+    const slippageTolerance =
+      getPlanCompoundSlippageTolerance(activePlanResponse.steps) ?? params.customSlippageTolerance ?? 0
+
+    const adaptedChainedQuote = transformPlanResponseToChainedQuote({
+      planResponse: activePlanResponse,
+      validatedInput,
+      slippageTolerance,
+    })
+
+    const trade = new ChainedActionTrade({
+      quote: adaptedChainedQuote,
+      currencyIn: validatedInput.currencyIn,
+      currencyOut: validatedInput.currencyOut,
+    })
+
+    return {
+      trade,
+      isLoading: false,
+      isFetching: false,
+      error: null,
+      indicativeTrade: undefined,
+      isIndicativeLoading: false,
+      gasEstimate: undefined,
+    }
+  }, [activePlanResponse, params])
+}

package/src/features/transactions/swap/hooks/useV4SwapEnabled.ts

@@ -0,0 +1,25 @@
+import { getChainInfo } from '@luxexchange/lx/src/features/chains/chainInfo'
+import { useSupportedChainId } from '@luxexchange/lx/src/features/chains/hooks/useSupportedChainId'
+import { UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+
+export function useV4SwapEnabled(chainId?: number): boolean {
+  const supportedChainId = useSupportedChainId(chainId)
+
+  return createGetV4SwapEnabled({ getSupportedChainId: () => supportedChainId })(chainId)
+}
+
+export function createGetV4SwapEnabled(ctx: {
+  getSupportedChainId: (chainId?: number) => UniverseChainId | undefined
+}): (chainId?: number) => boolean {
+  function getV4SwapEnabled(chainId?: number): boolean {
+    const supportedChainId = ctx.getSupportedChainId(chainId)
+
+    if (!supportedChainId) {
+      return false
+    }
+
+    const chainInfo = getChainInfo(supportedChainId)
+    return chainInfo.supportsV4
+  }
+  return getV4SwapEnabled
+}

package/src/features/transactions/swap/orders.ts

@@ -0,0 +1,6 @@
+import { TradingApi } from '@luxfi/api'
+import { TradingApiClient } from '@luxexchange/lx/src/data/apiClients/tradingApi/TradingApiClient'
+
+export async function getOrders(orderIds: string[]): Promise<TradingApi.GetOrdersResponse> {
+  return await TradingApiClient.fetchOrders({ orderIds })
+}

package/src/features/transactions/swap/plan/intermediaryState/useCanResumePlan.ts

@@ -0,0 +1,53 @@
+import { useMemo } from 'react'
+import {
+  ActivePlanState,
+  activePlanStore,
+} from '@luxexchange/lx/src/features/transactions/swap/review/stores/activePlan/activePlanStore'
+import {
+  PlanTransactionInfo,
+  TransactionStatus,
+  TransactionType,
+  TransactionTypeInfo,
+} from '@luxexchange/lx/src/features/transactions/types/transactionDetails'
+import { useStore } from 'zustand'
+
+function planIsNotExecuting(typeInfo: TransactionTypeInfo, status: TransactionStatus): boolean {
+  if (typeInfo.type !== TransactionType.Plan) {
+    return false
+  }
+
+  // Plans awaiting action or failed can be resumed
+  if (status === TransactionStatus.AwaitingAction || status === TransactionStatus.Failed) {
+    return true
+  }
+
+  return false
+}
+
+function selectSwapFlowAlreadyHasActivePlan(state: ActivePlanState): boolean {
+  if (!state.activePlan?.planId) {
+    return false
+  }
+
+  // While this trigger is still in effect, the swap flow has not yet reacted to the plan being resumed.
+  if (state.resumePlanSwapFormState) {
+    return false
+  }
+
+  return true
+}
+
+export function useCanResumePlan(
+  typeInfo: TransactionTypeInfo,
+  status: TransactionStatus,
+): typeInfo is PlanTransactionInfo {
+  const swapFlowAlreadyHasActivePlan = useStore(activePlanStore, selectSwapFlowAlreadyHasActivePlan)
+
+  return useMemo(() => {
+    if (swapFlowAlreadyHasActivePlan) {
+      return false
+    }
+
+    return planIsNotExecuting(typeInfo, status)
+  }, [typeInfo, status, swapFlowAlreadyHasActivePlan])
+}

package/src/features/transactions/swap/plan/intermediaryState/useIntermediaryPlanState.ts

@@ -0,0 +1,90 @@
+import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
+import { useMemo } from 'react'
+import { getCurrencyAmount, ValueType } from '@luxexchange/lx/src/features/tokens/getCurrencyAmount'
+import { useCurrencyInfo } from '@luxexchange/lx/src/features/tokens/useCurrencyInfo'
+import { useCanResumePlan } from '@luxexchange/lx/src/features/transactions/swap/plan/intermediaryState/useCanResumePlan'
+import {
+  extractTransactionTypeInfoAttribute,
+  PlanTransactionInfo,
+  TransactionStatus,
+  TransactionType,
+} from '@luxexchange/lx/src/features/transactions/types/transactionDetails'
+
+export interface IntermediaryPlanState {
+  inputCurrency?: Currency
+  intermediaryCurrencyAmount?: CurrencyAmount<Currency>
+  hasSwapped: boolean
+  hasBridged: boolean
+}
+
+export function useIntermediaryPlanState({
+  typeInfo,
+  status,
+}: {
+  typeInfo: PlanTransactionInfo
+  status: TransactionStatus
+}): IntermediaryPlanState {
+  const inputCurrency = useCurrencyInfo(typeInfo.inputCurrencyId)?.currency ?? undefined
+  const canResumePlan = useCanResumePlan(typeInfo, status)
+
+  const skipIntermediaryCheck = !canResumePlan
+  const intermediaryCurrencyAmount = useIntermediaryCurrencyAmount(typeInfo, skipIntermediaryCheck) ?? undefined
+
+  return useMemo(
+    () => ({ inputCurrency, intermediaryCurrencyAmount, ...getStepFlags(typeInfo) }),
+    [inputCurrency, intermediaryCurrencyAmount, typeInfo],
+  )
+}
+
+function getIntermediaryCurrency(typeInfo: PlanTransactionInfo):
+  | {
+      intermediaryCurrencyId: string
+      intermediaryAmountRaw: string
+    }
+  | undefined {
+  const lastCompleteStep = typeInfo.stepDetails.findLast((stepInfo) => stepInfo.status === TransactionStatus.Success)
+  if (!lastCompleteStep) {
+    return undefined
+  }
+
+  const intermediaryCurrencyId = extractTransactionTypeInfoAttribute(lastCompleteStep.typeInfo, 'outputCurrencyId')
+  const intermediaryAmountRaw = extractTransactionTypeInfoAttribute(
+    lastCompleteStep.typeInfo,
+    'outputCurrencyAmountRaw',
+  )
+  if (!intermediaryCurrencyId || !intermediaryAmountRaw) {
+    return undefined
+  }
+
+  return {
+    intermediaryCurrencyId,
+    intermediaryAmountRaw,
+  }
+}
+
+function useIntermediaryCurrencyAmount(typeInfo: PlanTransactionInfo, skip: boolean): Maybe<CurrencyAmount<Currency>> {
+  const result = useMemo(() => (skip ? undefined : getIntermediaryCurrency(typeInfo)), [typeInfo, skip])
+  const intermediaryCurrencyInfo = useCurrencyInfo(result?.intermediaryCurrencyId)
+
+  return useMemo(() => {
+    if (!result?.intermediaryAmountRaw || !intermediaryCurrencyInfo?.currency) {
+      return undefined
+    }
+
+    return getCurrencyAmount({
+      value: result.intermediaryAmountRaw,
+      valueType: ValueType.Raw,
+      currency: intermediaryCurrencyInfo.currency,
+    })
+  }, [result?.intermediaryAmountRaw, intermediaryCurrencyInfo?.currency])
+}
+
+function getStepFlags(typeInfo: PlanTransactionInfo): { hasSwapped: boolean; hasBridged: boolean } {
+  const hasSwapped = typeInfo.stepDetails.some(
+    (stepInfo) => stepInfo.typeInfo.type === TransactionType.Swap && stepInfo.status === TransactionStatus.Success,
+  )
+  const hasBridged = typeInfo.stepDetails.some(
+    (stepInfo) => stepInfo.typeInfo.type === TransactionType.Bridge && stepInfo.status === TransactionStatus.Success,
+  )
+  return { hasSwapped, hasBridged }
+}

package/src/features/transactions/swap/plan/intermediaryState/useIntermediaryPlanStateDescriptor.ts

@@ -0,0 +1,73 @@
+import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
+import { TFunction } from 'i18next'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { getChainLabel } from '@luxexchange/lx/src/features/chains/utils'
+import { LocalizationContextState, useLocalizationContext } from '@luxexchange/lx/src/features/language/LocalizationContext'
+import { IntermediaryPlanState } from '@luxexchange/lx/src/features/transactions/swap/plan/intermediaryState/useIntermediaryPlanState'
+import { TransactionStatus } from '@luxexchange/lx/src/features/transactions/types/transactionDetails'
+
+interface IntermediaryStateDescriptorParams {
+  intermediaryState: IntermediaryPlanState
+  status: TransactionStatus
+  long?: boolean
+}
+
+export function useIntermediaryPlanStateDescriptor({
+  intermediaryState,
+  long,
+}: IntermediaryStateDescriptorParams): string | undefined {
+  const { inputCurrency, intermediaryCurrencyAmount, hasSwapped, hasBridged } = intermediaryState
+
+  const { t } = useTranslation()
+  const { formatCurrencyAmount } = useLocalizationContext()
+
+  const getDescriptor = long ? getLongIntermediaryStateDescriptor : getShortIntermediaryStateDescriptor
+
+  return useMemo(
+    () =>
+      inputCurrency && intermediaryCurrencyAmount
+        ? getDescriptor({ t, formatCurrencyAmount, inputCurrency, intermediaryCurrencyAmount, hasSwapped, hasBridged })
+        : undefined,
+    [t, formatCurrencyAmount, inputCurrency, intermediaryCurrencyAmount, hasSwapped, hasBridged, getDescriptor],
+  )
+}
+
+interface GetLongIntermediaryStateDescriptorParams {
+  t: TFunction
+  hasBridged: boolean
+  hasSwapped: boolean
+  inputCurrency: Currency
+  intermediaryCurrencyAmount: CurrencyAmount<Currency>
+}
+
+export function getLongIntermediaryStateDescriptor(params: GetLongIntermediaryStateDescriptorParams): string {
+  const tokenInSymbol = params.inputCurrency.symbol
+
+  if (params.hasBridged && !params.hasSwapped) {
+    const destinationChain = getChainLabel(params.intermediaryCurrencyAmount.currency.chainId)
+    return params.t('transaction.status.plan.intermediaryState.bridged.extended', { tokenInSymbol, destinationChain })
+  }
+
+  const tokenOutSymbol = params.intermediaryCurrencyAmount.currency.symbol
+  return params.t('transaction.status.plan.intermediaryState.swapped.extended', { tokenInSymbol, tokenOutSymbol })
+}
+
+interface GetShortIntermediaryStateDescriptorParams extends GetLongIntermediaryStateDescriptorParams {
+  formatCurrencyAmount: LocalizationContextState['formatCurrencyAmount']
+}
+
+function getShortIntermediaryStateDescriptor(params: GetShortIntermediaryStateDescriptorParams): string {
+  const tokenInSymbol = params.inputCurrency.symbol
+
+  if (params.hasBridged && !params.hasSwapped) {
+    const destinationChain = getChainLabel(params.intermediaryCurrencyAmount.currency.chainId)
+    return params.t('transaction.status.plan.intermediaryState.bridged', { tokenInSymbol, destinationChain })
+  }
+
+  const tokenOutSymbol = params.intermediaryCurrencyAmount.currency.symbol
+  const amount = params.formatCurrencyAmount({ value: params.intermediaryCurrencyAmount })
+  const strParams = { tokenInSymbol, tokenOutSymbol, amount }
+
+  return params.t('transaction.status.plan.intermediaryState.swapped', strParams)
+}

package/src/features/transactions/swap/plan/intermediaryState/useResumePlanMutation.ts

@@ -0,0 +1,112 @@
+import { UseMutationResult, useMutation } from '@tanstack/react-query'
+import { PlanResponse } from '@luxexchange/api/src/clients/trading/__generated__/models/PlanResponse'
+import { NavigateToSwapFlowArgs, useLuxContextSelector } from '@luxexchange/lx/src/contexts/LuxContext'
+import { TradingApiSessionClient } from '@luxexchange/lx/src/data/apiClients/tradingApi/TradingApiSessionClient'
+import { AssetType } from '@luxexchange/lx/src/entities/assets'
+import { extractPlanResponseAssetDetails } from '@luxexchange/lx/src/features/activity/extract/extractPlanResponseDetails'
+import { transformPlanResponse, updateGlobalPlanState } from '@luxexchange/lx/src/features/transactions/swap/plan/planSagaUtils'
+import { activePlanStore } from '@luxexchange/lx/src/features/transactions/swap/review/stores/activePlan/activePlanStore'
+import { SwapFormState } from '@luxexchange/lx/src/features/transactions/swap/stores/swapFormStore/types'
+import { CurrencyField } from '@luxexchange/lx/src/types/currency'
+import { currencyIdToAddress } from '@luxexchange/lx/src/utils/currencyId'
+import { logger } from '@luxfi/utilities/src/logger/logger'
+
+interface UseResumePlanParams {
+  planId: string
+  inputCurrencyId: string
+  outputCurrencyId: string
+  inputCurrencyAmount: string
+}
+
+/** Mutation for fetching a plan and navigating to swap with the plan loaded. */
+export function useResumePlanMutation({
+  successCallback,
+}: {
+  successCallback?: () => void
+}): UseMutationResult<NavigateToSwapFlowArgs | undefined, Error, UseResumePlanParams> {
+  const navigateToSwapFlow = useLuxContextSelector((ctx) => ctx.navigateToSwapFlow)
+
+  return useMutation({
+    mutationFn: async ({
+      planId,
+      inputCurrencyAmount,
+    }: UseResumePlanParams): Promise<NavigateToSwapFlowArgs | undefined> => {
+      // Fetch fresh plan details
+      const planResponse = await TradingApiSessionClient.refreshExistingPlan({ planId })
+
+      // Transform and store
+      const transformed = transformPlanResponse(planResponse)
+      const assetDetails = extractPlanResponseAssetDetails(planResponse.steps)
+
+      activePlanStore.setState({
+        activePlan: {
+          response: planResponse,
+          planId: planResponse.planId,
+          steps: transformed.steps,
+          inputChainId: transformed.inputChainId,
+          proofPending: false,
+          currentStepIndex: planResponse.currentStepIndex,
+        },
+        resumePlanSwapFormState: createSwapFormStateFromPlanResponse(planResponse, inputCurrencyAmount),
+      })
+      updateGlobalPlanState({ activePlan: transformed, originalResponse: planResponse })
+
+      if (assetDetails) {
+        return {
+          inputCurrencyId: assetDetails.inputCurrencyId,
+          outputCurrencyId: assetDetails.outputCurrencyId,
+          exactAmountToken: inputCurrencyAmount,
+          exactCurrencyField: CurrencyField.INPUT,
+        }
+      }
+
+      return undefined
+    },
+    onError: (error, { planId }) => {
+      logger.error(error, {
+        tags: { file: 'useResumePlanMutation.ts', function: 'useResumePlanMutation' },
+        extra: { planId },
+      })
+    },
+    onSuccess: (navigationParams) => {
+      successCallback?.()
+      navigateToSwapFlow?.(navigationParams ?? {})
+    },
+  })
+}
+
+function createSwapFormStateFromPlanResponse(
+  planResponse: PlanResponse,
+  exactAmountToken: string,
+): Partial<SwapFormState> | undefined {
+  const extractedAssetDetails = extractPlanResponseAssetDetails(planResponse.steps)
+  if (!extractedAssetDetails) {
+    return undefined
+  }
+  const { tokenInChainId, tokenOutChainId, inputCurrencyId, outputCurrencyId } = extractedAssetDetails
+
+  return {
+    input: {
+      type: AssetType.Currency,
+      chainId: tokenInChainId,
+      address: currencyIdToAddress(inputCurrencyId),
+    },
+    output: {
+      type: AssetType.Currency,
+      chainId: tokenOutChainId,
+      address: currencyIdToAddress(outputCurrencyId),
+    },
+    exactCurrencyField: CurrencyField.INPUT,
+    exactAmountToken,
+    exactAmountFiat: undefined,
+    showPendingUI: false,
+    isConfirmed: false,
+    instantReceiptFetchTime: undefined,
+    instantOutputAmountRaw: undefined,
+    txHash: undefined,
+    txHashReceivedTime: undefined,
+    isSubmitting: false,
+    focusOnCurrencyField: undefined,
+    isFiatMode: false,
+  }
+}