@luxexchange/lx 1.0.0

package/src/features/transactions/swap/review/stores/activePlan/activePlanStore.test.ts

@@ -0,0 +1,123 @@
+import { UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+import {
+  ActivePlanData,
+  activePlanStore,
+} from '@luxexchange/lx/src/features/transactions/swap/review/stores/activePlan/activePlanStore'
+
+function createMockActivePlan(planId: string): ActivePlanData {
+  return {
+    response: {} as ActivePlanData['response'],
+    planId,
+    inputChainId: UniverseChainId.Mainnet,
+    steps: [],
+    proofPending: false,
+    currentStepIndex: 0,
+  }
+}
+
+describe('activePlanStore — execution lock', () => {
+  beforeEach(() => {
+    activePlanStore.setState({
+      activePlan: undefined,
+      backgroundedPlans: {},
+      cancelledPlanIds: new Set(),
+      executionLockPlanId: null,
+    })
+  })
+
+  it('lockPlanForExecution sets the lock to the given planId', () => {
+    activePlanStore.getState().actions.lockPlanForExecution('plan-A')
+    expect(activePlanStore.getState().executionLockPlanId).toBe('plan-A')
+  })
+
+  it('unlockPlanForExecution clears the lock when planId matches', () => {
+    activePlanStore.getState().actions.lockPlanForExecution('plan-A')
+    activePlanStore.getState().actions.unlockPlanForExecution('plan-A')
+    expect(activePlanStore.getState().executionLockPlanId).toBeNull()
+  })
+
+  it('unlockPlanForExecution is a no-op when planId does not match', () => {
+    activePlanStore.getState().actions.lockPlanForExecution('plan-B')
+    activePlanStore.getState().actions.unlockPlanForExecution('plan-A')
+    expect(activePlanStore.getState().executionLockPlanId).toBe('plan-B')
+  })
+
+  it('resetActivePlan does NOT clear the execution lock', () => {
+    activePlanStore.getState().actions.setActivePlan(createMockActivePlan('plan-A'))
+    activePlanStore.getState().actions.lockPlanForExecution('plan-A')
+
+    activePlanStore.getState().actions.resetActivePlan()
+
+    expect(activePlanStore.getState().activePlan).toBeUndefined()
+    expect(activePlanStore.getState().executionLockPlanId).toBe('plan-A')
+  })
+
+  describe('concurrent saga scenario', () => {
+    it('Plan A lock → Plan B lock → Plan A unlock is no-op → Plan B unlock clears', () => {
+      // Plan A acquires the lock
+      activePlanStore.getState().actions.lockPlanForExecution('plan-A')
+      expect(activePlanStore.getState().executionLockPlanId).toBe('plan-A')
+
+      // Plan B starts and overwrites the lock
+      activePlanStore.getState().actions.lockPlanForExecution('plan-B')
+      expect(activePlanStore.getState().executionLockPlanId).toBe('plan-B')
+
+      // Plan A's finally runs — should NOT clear Plan B's lock
+      activePlanStore.getState().actions.unlockPlanForExecution('plan-A')
+      expect(activePlanStore.getState().executionLockPlanId).toBe('plan-B')
+
+      // Plan B's finally runs — should clear the lock
+      activePlanStore.getState().actions.unlockPlanForExecution('plan-B')
+      expect(activePlanStore.getState().executionLockPlanId).toBeNull()
+    })
+  })
+
+  describe('resetActivePlan + unlockPlanForExecution interaction', () => {
+    it('resetActivePlan followed by unlockPlanForExecution correctly releases the lock', () => {
+      activePlanStore.getState().actions.setActivePlan(createMockActivePlan('plan-A'))
+      activePlanStore.getState().actions.lockPlanForExecution('plan-A')
+
+      // Saga calls resetActivePlan (e.g., on price change or error on first step)
+      activePlanStore.getState().actions.resetActivePlan()
+      expect(activePlanStore.getState().activePlan).toBeUndefined()
+      // Lock is still held — resetActivePlan doesn't touch it
+      expect(activePlanStore.getState().executionLockPlanId).toBe('plan-A')
+
+      // Saga's finally block releases the lock
+      activePlanStore.getState().actions.unlockPlanForExecution('plan-A')
+      expect(activePlanStore.getState().executionLockPlanId).toBeNull()
+    })
+  })
+
+  describe('isPlanExecutionLocked selector logic', () => {
+    it('lock is only considered active when it matches the active plan', () => {
+      const isPlanExecutionLocked = (): boolean => {
+        const state = activePlanStore.getState()
+        return state.executionLockPlanId != null && state.executionLockPlanId === state.activePlan?.planId
+      }
+
+      // No active plan, no lock
+      expect(isPlanExecutionLocked()).toBe(false)
+
+      // Active plan but no lock
+      activePlanStore.getState().actions.setActivePlan(createMockActivePlan('plan-A'))
+      expect(isPlanExecutionLocked()).toBe(false)
+
+      // Active plan with matching lock
+      activePlanStore.getState().actions.lockPlanForExecution('plan-A')
+      expect(isPlanExecutionLocked()).toBe(true)
+
+      // Lock for a different plan than the active one (backgrounded scenario)
+      activePlanStore.getState().actions.setActivePlan(createMockActivePlan('plan-B'))
+      expect(isPlanExecutionLocked()).toBe(false)
+
+      // Lock matches the new active plan
+      activePlanStore.getState().actions.lockPlanForExecution('plan-B')
+      expect(isPlanExecutionLocked()).toBe(true)
+
+      // resetActivePlan clears the plan but not the lock — selector returns false
+      activePlanStore.getState().actions.resetActivePlan()
+      expect(isPlanExecutionLocked()).toBe(false)
+    })
+  })
+})

package/src/features/transactions/swap/review/stores/activePlan/activePlanStore.ts

@@ -0,0 +1,153 @@
+import { PlanResponse } from '@luxexchange/api/src/clients/trading/__generated__'
+import { UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+import { TransactionAndPlanStep } from '@luxexchange/lx/src/features/transactions/swap/plan/planStepTransformer'
+import { SwapFormState } from '@luxexchange/lx/src/features/transactions/swap/stores/swapFormStore/types'
+import { isDevEnv } from '@luxfi/utilities/src/environment/env'
+import { devtools } from 'zustand/middleware'
+import { createStore } from 'zustand/vanilla'
+
+export interface ActivePlanData {
+  response: PlanResponse
+  planId: string
+  inputChainId: UniverseChainId
+  steps: TransactionAndPlanStep[]
+  proofPending: boolean
+  currentStepIndex: number
+}
+
+export interface ActivePlanState {
+  /** The currently active (foreground) plan */
+  activePlan?: ActivePlanData
+  /**
+   * Plans that are still executing but the user navigated away from. While a plan can be retried,
+   * Plans that are backgrounded are never meant to be resumed/can't be retried. */
+  backgroundedPlans: Record<string, ActivePlanData>
+  /** Defined when a plan is resumed to populate the swap form. */
+  resumePlanSwapFormState?: Partial<SwapFormState>
+  /** Plan IDs that have been requested for cancellation */
+  cancelledPlanIds: Set<string>
+  /**
+   * The planId currently holding the execution lock, or null if no saga is executing.
+   * Prevents `ActivePlanUpdater` polling from overwriting plan calldata mid-execution.
+   * Scoped to a planId (rather than a boolean) because on mobile/extension, `takeEvery`
+   * allows concurrent plan sagas — a boolean would let one saga's unlock clear another's lock.
+   */
+  executionLockPlanId: string | null
+  actions: {
+    /** Reset the active plan */
+    resetActivePlan: () => void
+    /** Reset the backgrounded plans */
+    resetBackgroundedPlans: () => void
+    /** Set the active plan */
+    setActivePlan: (plan: ActivePlanData) => void
+    /** Clear a specific plan from active or backgrounded */
+    clearPlan: (planId: string) => void
+    /** Move the current activePlan to backgroundedPlans */
+    backgroundPlan: (planId: string) => void
+    /** Mark a plan as cancelled (to stop saga execution) */
+    markPlanCancelled: (planId: string) => void
+    /** Check if a plan has been cancelled */
+    isPlanCancelled: (planId: string) => boolean
+    /** Clear a cancelled plan from tracking (after finalization) */
+    clearCancelledPlan: (planId: string) => void
+    /** Claim the execution lock for a specific planId */
+    lockPlanForExecution: (planId: string) => void
+    /** Release the execution lock only if the given planId still holds it */
+    unlockPlanForExecution: (planId: string) => void
+  }
+}
+
+export const activePlanStore = createStore<ActivePlanState>()(
+  devtools(
+    (set, get) => {
+      return {
+        activePlan: undefined,
+        backgroundedPlans: {},
+        cancelledPlanIds: new Set<string>(),
+        executionLockPlanId: null,
+        actions: {
+          resetActivePlan(): void {
+            // Does not clear executionLockPlanId — the saga's `finally` block
+            // is exclusively responsible for releasing the execution lock.
+            set({ activePlan: undefined })
+          },
+          resetBackgroundedPlans(): void {
+            set({ backgroundedPlans: {} })
+          },
+          setActivePlan(plan: ActivePlanData): void {
+            const { activePlan, backgroundedPlans } = get()
+
+            let updatedBackgroundedPlans = { ...backgroundedPlans }
+
+            if (updatedBackgroundedPlans[plan.planId]) {
+              const { [plan.planId]: _, ...remaining } = updatedBackgroundedPlans
+              updatedBackgroundedPlans = remaining
+            }
+
+            if (activePlan && activePlan.planId !== plan.planId) {
+              updatedBackgroundedPlans[activePlan.planId] = activePlan
+            }
+
+            set({ activePlan: plan, backgroundedPlans: updatedBackgroundedPlans })
+          },
+          clearPlan(planId: string): void {
+            const { activePlan, backgroundedPlans } = get()
+            const updatedState: Partial<ActivePlanState> = {}
+
+            if (activePlan && activePlan.planId === planId) {
+              updatedState.activePlan = undefined
+            }
+
+            if (backgroundedPlans[planId]) {
+              const { [planId]: _, ...remainingPlans } = backgroundedPlans
+              updatedState.backgroundedPlans = remainingPlans
+            }
+
+            if (Object.keys(updatedState).length > 0) {
+              set(updatedState)
+            }
+          },
+          backgroundPlan(planId: string): void {
+            const { activePlan, backgroundedPlans } = get()
+            if (activePlan && activePlan.planId === planId) {
+              set({
+                activePlan: undefined,
+                backgroundedPlans: {
+                  ...backgroundedPlans,
+                  [planId]: activePlan,
+                },
+              })
+            }
+          },
+          markPlanCancelled(planId: string): void {
+            const { cancelledPlanIds } = get()
+            set({ cancelledPlanIds: new Set([...cancelledPlanIds, planId]) })
+          },
+          isPlanCancelled(planId: string): boolean {
+            return get().cancelledPlanIds.has(planId)
+          },
+          clearCancelledPlan(planId: string): void {
+            const { cancelledPlanIds } = get()
+            const newSet = new Set([...cancelledPlanIds])
+            newSet.delete(planId)
+            set({ cancelledPlanIds: newSet })
+          },
+          lockPlanForExecution(planId: string): void {
+            set({ executionLockPlanId: planId })
+          },
+          unlockPlanForExecution(planId: string): void {
+            if (get().executionLockPlanId === planId) {
+              set({ executionLockPlanId: null })
+            }
+          },
+        },
+      }
+    },
+    {
+      name: 'activePlanStore',
+      enabled: isDevEnv(),
+      trace: true,
+      traceLimit: 25,
+    },
+  ),
+)

package/src/features/transactions/swap/review/stores/activePlan/usePopulateSwapFlowWithPlan.ts

@@ -0,0 +1,45 @@
+import { PlanResponse } from '@luxexchange/api/src/clients/trading/__generated__/models/PlanResponse'
+import { AssetType } from '@luxexchange/lx/src/entities/assets'
+import { extractPlanResponseAssetDetails } from '@luxexchange/lx/src/features/activity/extract/extractPlanResponseDetails'
+import { useSwapFormStore } from '@luxexchange/lx/src/features/transactions/swap/stores/swapFormStore/useSwapFormStore'
+import { CurrencyField } from '@luxexchange/lx/src/types/currency'
+import { currencyIdToAddress } from '@luxexchange/lx/src/utils/currencyId'
+import { useEvent } from '@luxfi/utilities/src/react/hooks'
+
+export function usePopulateSwapFlowWithPlan(): (planResponse: PlanResponse) => void {
+  const updateSwapForm = useSwapFormStore((s) => s.updateSwapForm)
+
+  return useEvent((planResponse: PlanResponse): void => {
+    const extractedAssetDetails = extractPlanResponseAssetDetails(planResponse.steps)
+    if (!extractedAssetDetails) {
+      return
+    }
+    const { tokenInChainId, tokenOutChainId, inputCurrencyId, outputCurrencyId, inputCurrencyAmountRaw } =
+      extractedAssetDetails
+
+    updateSwapForm({
+      input: {
+        type: AssetType.Currency,
+        chainId: tokenInChainId,
+        address: currencyIdToAddress(inputCurrencyId),
+      },
+      output: {
+        type: AssetType.Currency,
+        chainId: tokenOutChainId,
+        address: currencyIdToAddress(outputCurrencyId),
+      },
+      exactCurrencyField: CurrencyField.INPUT,
+      exactAmountToken: inputCurrencyAmountRaw,
+      exactAmountFiat: undefined,
+      showPendingUI: false,
+      isConfirmed: false,
+      instantReceiptFetchTime: undefined,
+      instantOutputAmountRaw: undefined,
+      txHash: undefined,
+      txHashReceivedTime: undefined,
+      isSubmitting: false,
+      focusOnCurrencyField: undefined,
+      isFiatMode: false,
+    })
+  })
+}

package/src/features/transactions/swap/review/stores/swapReviewCallbacksStore/SwapReviewCallbacksStoreContext.ts

@@ -0,0 +1,6 @@
+import { createContext } from 'react'
+import type { createSwapReviewCallbacksStore } from '@luxexchange/lx/src/features/transactions/swap/review/stores/swapReviewCallbacksStore/createSwapReviewCallbacksStore'
+
+export const SwapReviewCallbacksStoreContext = createContext<ReturnType<typeof createSwapReviewCallbacksStore> | null>(
+  null,
+)

package/src/features/transactions/swap/review/stores/swapReviewCallbacksStore/SwapReviewCallbacksStoreContextProvider.tsx

@@ -0,0 +1,90 @@
+import { type ReactNode, useEffect, useMemo, useState } from 'react'
+import type { AuthTrigger } from '@luxexchange/lx/src/features/auth/types'
+import type { TransactionScreen } from '@luxexchange/lx/src/features/transactions/components/TransactionModal/TransactionModalContext'
+import { useParsedSwapWarnings } from '@luxexchange/lx/src/features/transactions/swap/hooks/useSwapWarnings/useSwapWarnings'
+import { useCreateSwapReviewCallbacks } from '@luxexchange/lx/src/features/transactions/swap/review/hooks/useCreateSwapReviewCallbacks'
+import { createSwapReviewCallbacksStore } from '@luxexchange/lx/src/features/transactions/swap/review/stores/swapReviewCallbacksStore/createSwapReviewCallbacksStore'
+import { SwapReviewCallbacksStoreContext } from '@luxexchange/lx/src/features/transactions/swap/review/stores/swapReviewCallbacksStore/SwapReviewCallbacksStoreContext'
+import { useSwapReviewActions } from '@luxexchange/lx/src/features/transactions/swap/review/stores/swapReviewStore/useSwapReviewStore'
+import {
+  useSwapReviewWarningStateActions,
+  useSwapReviewWarningStore,
+} from '@luxexchange/lx/src/features/transactions/swap/review/stores/swapReviewWarningStore/useSwapReviewWarningStore'
+import type { GetExecuteSwapService } from '@luxexchange/lx/src/features/transactions/swap/services/executeSwapService'
+import { useSwapFormStore } from '@luxexchange/lx/src/features/transactions/swap/stores/swapFormStore/useSwapFormStore'
+import { useHasValueChanged } from '@luxfi/utilities/src/react/useHasValueChanged'
+
+interface SwapReviewCallbacksContextProviderProps {
+  children: ReactNode
+  setScreen: (screen: TransactionScreen) => void
+  authTrigger?: AuthTrigger
+  onSubmitSwap?: () => Promise<void> | void
+  onClose: () => void
+  getExecuteSwapService: GetExecuteSwapService
+}
+
+export const SwapReviewCallbacksContextProvider = ({
+  children,
+  setScreen,
+  authTrigger,
+  onSubmitSwap,
+  onClose,
+  getExecuteSwapService,
+}: SwapReviewCallbacksContextProviderProps): JSX.Element => {
+  const { setShowWarningModal, setWarningAcknowledged, setShouldSubmitTx } = useSwapReviewWarningStateActions()
+
+  const { showWarningModal, warningAcknowledged, shouldSubmitTx } = useSwapReviewWarningStore((s) => ({
+    showWarningModal: s.showWarningModal,
+    warningAcknowledged: s.warningAcknowledged,
+    shouldSubmitTx: s.shouldSubmitTx,
+  }))
+
+  const { setCurrentStep, setSteps, resetCurrentStep, setSubmissionError, setRetrySwap } = useSwapReviewActions()
+  const updateSwapForm = useSwapFormStore((s) => s.updateSwapForm)
+  const { reviewScreenWarning } = useParsedSwapWarnings()
+
+  const { onSwapButtonClick, onConfirmWarning, onCancelWarning, onShowWarning, onCloseWarning } =
+    useCreateSwapReviewCallbacks({
+      resetCurrentStep,
+      setSubmissionError,
+      setRetrySwap,
+      showWarningModal,
+      warningAcknowledged,
+      shouldSubmitTx,
+      setShowWarningModal,
+      setWarningAcknowledged,
+      setShouldSubmitTx,
+      setScreen,
+      authTrigger,
+      onSubmitSwap,
+      onClose,
+      getExecuteSwapService,
+      updateSwapForm,
+      reviewScreenWarning,
+      setCurrentStep,
+      setSteps,
+    })
+
+  const derivedState = useMemo(
+    () => ({
+      onSwapButtonClick,
+      onConfirmWarning,
+      onCancelWarning,
+      onShowWarning,
+      onCloseWarning,
+    }),
+    [onSwapButtonClick, onConfirmWarning, onCancelWarning, onShowWarning, onCloseWarning],
+  )
+
+  const [store] = useState(() => createSwapReviewCallbacksStore(derivedState))
+
+  const hasDerivedStateChanged = useHasValueChanged(derivedState)
+
+  useEffect(() => {
+    if (hasDerivedStateChanged) {
+      store.setState(derivedState)
+    }
+  }, [derivedState, store, hasDerivedStateChanged])
+
+  return <SwapReviewCallbacksStoreContext.Provider value={store}>{children}</SwapReviewCallbacksStoreContext.Provider>
+}

package/src/features/transactions/swap/review/stores/swapReviewCallbacksStore/createSwapReviewCallbacksStore.ts

@@ -0,0 +1,26 @@
+import { isDevEnv } from '@luxfi/utilities/src/environment/env'
+import type { StoreApi, UseBoundStore } from 'zustand'
+import { create } from 'zustand'
+import { devtools } from 'zustand/middleware'
+
+export type SwapReviewCallbacksStoreState = {
+  onSwapButtonClick: () => Promise<void>
+  onConfirmWarning: () => void
+  onCancelWarning: () => void
+  onShowWarning: () => void
+  onCloseWarning: () => void
+}
+
+export const createSwapReviewCallbacksStore = (
+  initialState: SwapReviewCallbacksStoreState,
+): UseBoundStore<StoreApi<SwapReviewCallbacksStoreState>> =>
+  create<SwapReviewCallbacksStoreState>()(
+    devtools(() => initialState, {
+      name: 'useSwapReviewCallbacksStore',
+      enabled: isDevEnv(),
+      trace: true,
+      traceLimit: 25,
+    }),
+  )
+
+export type UseSwapReviewCallbacksStore = ReturnType<typeof createSwapReviewCallbacksStore>

package/src/features/transactions/swap/review/stores/swapReviewCallbacksStore/useSwapReviewCallbacksStore.ts

@@ -0,0 +1,24 @@
+import { useContext } from 'react'
+import type {
+  SwapReviewCallbacksStoreState,
+  UseSwapReviewCallbacksStore,
+} from '@luxexchange/lx/src/features/transactions/swap/review/stores/swapReviewCallbacksStore/createSwapReviewCallbacksStore'
+import { SwapReviewCallbacksStoreContext } from '@luxexchange/lx/src/features/transactions/swap/review/stores/swapReviewCallbacksStore/SwapReviewCallbacksStoreContext'
+import { useStore } from 'zustand'
+import { useShallow } from 'zustand/shallow'
+
+const useSwapReviewCallbacksStoreBase = (): UseSwapReviewCallbacksStore => {
+  const store = useContext(SwapReviewCallbacksStoreContext)
+
+  if (!store) {
+    throw new Error('useSwapReviewCallbacksStore must be used within a SwapReviewCallbacksStoreContext')
+  }
+
+  return store
+}
+
+export function useSwapReviewCallbacksStore<T>(selector: (state: SwapReviewCallbacksStoreState) => T): T {
+  const store = useSwapReviewCallbacksStoreBase()
+
+  return useStore(store, useShallow(selector))
+}

package/src/features/transactions/swap/review/stores/swapReviewStore/SwapReviewContext.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react'
+import type { createSwapReviewStore } from '@luxexchange/lx/src/features/transactions/swap/review/stores/swapReviewStore/createSwapReviewStore'
+
+export const SwapReviewStoreContext = createContext<ReturnType<typeof createSwapReviewStore> | null>(null)

package/src/features/transactions/swap/review/stores/swapReviewStore/SwapReviewStoreContextProvider.tsx

@@ -0,0 +1,24 @@
+import type { PropsWithChildren } from 'react'
+import { useEffect, useState } from 'react'
+import { createSwapReviewStore } from '@luxexchange/lx/src/features/transactions/swap/review/stores/swapReviewStore/createSwapReviewStore'
+import { SwapReviewStoreContext } from '@luxexchange/lx/src/features/transactions/swap/review/stores/swapReviewStore/SwapReviewContext'
+import { useHasValueChanged } from '@luxfi/utilities/src/react/useHasValueChanged'
+
+type InitialState = Parameters<typeof createSwapReviewStore>[0]
+
+export const SwapReviewStoreContextProvider = ({
+  children,
+  hideContent,
+}: PropsWithChildren<InitialState>): JSX.Element => {
+  const [store] = useState(() => createSwapReviewStore({ hideContent }))
+
+  const hasHideContentChanged = useHasValueChanged(hideContent)
+
+  useEffect(() => {
+    if (hasHideContentChanged) {
+      store.setState({ hideContent })
+    }
+  }, [hasHideContentChanged, hideContent, store])
+
+  return <SwapReviewStoreContext.Provider value={store}>{children}</SwapReviewStoreContext.Provider>
+}

package/src/features/transactions/swap/review/stores/swapReviewStore/SyncActivePlanEffects.tsx

@@ -0,0 +1,63 @@
+import { TradingApi } from '@luxexchange/api'
+import { useEffect, useMemo } from 'react'
+import { TransactionAndPlanStep } from '@luxexchange/lx/src/features/transactions/swap/plan/planStepTransformer'
+import {
+  ActivePlanState,
+  activePlanStore,
+} from '@luxexchange/lx/src/features/transactions/swap/review/stores/activePlan/activePlanStore'
+import { useSwapReviewActions } from '@luxexchange/lx/src/features/transactions/swap/review/stores/swapReviewStore/useSwapReviewStore'
+import { useSwapFormStore } from '@luxexchange/lx/src/features/transactions/swap/stores/swapFormStore/useSwapFormStore'
+import { useStore } from 'zustand'
+import { useShallow } from 'zustand/shallow'
+
+function selectActivePlanData(state: ActivePlanState):
+  | {
+      steps: TransactionAndPlanStep[]
+      currentStep: TransactionAndPlanStep
+      previousStep: TransactionAndPlanStep | undefined
+      proofPending: boolean
+    }
+  | undefined {
+  if (!state.activePlan) {
+    return undefined
+  }
+
+  const { steps, currentStepIndex, proofPending } = state.activePlan
+
+  const currentStep = steps[currentStepIndex]
+  const previousStep = steps[currentStepIndex - 1]
+  if (!currentStep) {
+    return undefined
+  }
+
+  return { steps, currentStep, previousStep, proofPending }
+}
+
+export function SyncActivePlanEffects(): null {
+  const activePlanData = useStore(activePlanStore, useShallow(selectActivePlanData))
+  const { setSteps, setCurrentStep } = useSwapReviewActions()
+
+  const isSubmitting = useSwapFormStore((state) => state.isSubmitting)
+  const currentDisplayStep = useMemo(() => {
+    // Highlight last failed step if it exists and we're not submitting
+    if (activePlanData?.previousStep?.status === TradingApi.PlanStepStatus.STEP_ERROR && !isSubmitting) {
+      return activePlanData.previousStep
+    }
+
+    return activePlanData?.currentStep
+  }, [activePlanData?.currentStep, activePlanData?.previousStep, isSubmitting])
+
+  useEffect(() => {
+    if (activePlanData?.steps) {
+      setSteps(activePlanData.steps)
+    }
+  }, [activePlanData?.steps, setSteps])
+
+  useEffect(() => {
+    if (currentDisplayStep) {
+      setCurrentStep({ step: currentDisplayStep, accepted: activePlanData?.proofPending ?? false })
+    }
+  }, [currentDisplayStep, activePlanData?.proofPending, setCurrentStep])
+
+  return null
+}

package/src/features/transactions/swap/review/stores/swapReviewStore/createSwapReviewStore.ts

@@ -0,0 +1,52 @@
+import type { TransactionStep } from '@luxexchange/lx/src/features/transactions/steps/types'
+import { isDevEnv } from '@luxfi/utilities/src/environment/env'
+import type { StoreApi, UseBoundStore } from 'zustand'
+import { create } from 'zustand'
+import { devtools } from 'zustand/middleware'
+
+export type SwapReviewStore = UseBoundStore<StoreApi<SwapReviewState>>
+
+export type SwapReviewState = {
+  submissionError: Error | undefined
+  onPressRetry: (() => void) | undefined
+  steps: TransactionStep[]
+  currentStep: { step: TransactionStep; accepted: boolean } | undefined
+  hideContent: boolean
+  actions: {
+    setSubmissionError: (error?: Error) => void
+    setRetrySwap: (onPressRetry?: () => void) => void
+    setSteps: (steps: TransactionStep[]) => void
+    setCurrentStep: (step: { step: TransactionStep; accepted: boolean } | undefined) => void
+    resetCurrentStep: () => void
+    setHideContent: (hideContent: boolean) => void
+  }
+}
+
+export const EMPTY_STEPS: TransactionStep[] = []
+
+export const createSwapReviewStore = ({ hideContent }: { hideContent: boolean }): SwapReviewStore =>
+  create<SwapReviewState>()(
+    devtools(
+      (set) => ({
+        submissionError: undefined,
+        onPressRetry: undefined,
+        steps: EMPTY_STEPS,
+        currentStep: undefined,
+        hideContent,
+        actions: {
+          setSubmissionError: (error): void => set({ submissionError: error }),
+          setRetrySwap: (onPressRetry): void => set({ onPressRetry }),
+          setSteps: (steps): void => set({ steps }),
+          setCurrentStep: (currentStep): void => set({ currentStep }),
+          resetCurrentStep: (): void => set({ currentStep: undefined }),
+          setHideContent: (hideContentParam): void => set({ hideContent: hideContentParam }),
+        },
+      }),
+      {
+        name: 'useSwapReviewStore',
+        enabled: isDevEnv(),
+        trace: true,
+        traceLimit: 25,
+      },
+    ),
+  )

package/src/features/transactions/swap/review/stores/swapReviewStore/useSwapReviewStore.ts

@@ -0,0 +1,52 @@
+import { useContext } from 'react'
+import type {
+  SwapReviewState,
+  SwapReviewStore,
+} from '@luxexchange/lx/src/features/transactions/swap/review/stores/swapReviewStore/createSwapReviewStore'
+import { EMPTY_STEPS } from '@luxexchange/lx/src/features/transactions/swap/review/stores/swapReviewStore/createSwapReviewStore'
+import { SwapReviewStoreContext } from '@luxexchange/lx/src/features/transactions/swap/review/stores/swapReviewStore/SwapReviewContext'
+import { isWebApp } from '@luxfi/utilities/src/platform'
+import { useStore } from 'zustand'
+import { useShallow } from 'zustand/shallow'
+
+type ShowInterfaceSelectorReturn = Pick<SwapReviewState, 'currentStep' | 'steps'>
+
+const useSwapReviewStoreBase = (): SwapReviewStore => {
+  const store = useContext(SwapReviewStoreContext)
+
+  if (!store) {
+    throw new Error('useSwapReviewStore must be used within SwapReviewStoreContextProvider')
+  }
+
+  return store
+}
+
+export function useSwapReviewStore<T>(selector: (state: Omit<SwapReviewState, 'actions'>) => T): T {
+  const store = useSwapReviewStoreBase()
+
+  return useStore(store, useShallow(selector))
+}
+
+export const useSwapReviewActions = (): SwapReviewState['actions'] => {
+  const store = useSwapReviewStoreBase()
+
+  return useStore(
+    store,
+    useShallow((state) => state.actions),
+  )
+}
+
+// Derived selector hook for `showInterfaceReviewSteps`
+export const useShowInterfaceReviewSteps = (): boolean => {
+  // By conditionally defining the selector, we're able to avoid subscribing to the store when we're not on interface
+  const { currentStep, steps } = useSwapReviewStore(
+    isWebApp
+      ? (s): ShowInterfaceSelectorReturn => ({
+          currentStep: s.currentStep,
+          steps: s.steps,
+        })
+      : (): ShowInterfaceSelectorReturn => ({ currentStep: undefined, steps: EMPTY_STEPS }),
+  )
+
+  return Boolean(isWebApp && currentStep && steps.length > 1)
+}