@luxexchange/lx 1.0.0

package/src/features/activity/utils/swapInfo.ts

@@ -0,0 +1,49 @@
+import { SwapTypeTransactionInfo } from '@luxexchange/lx/src/components/activity/details/types'
+import { CurrencyInfo } from '@luxexchange/lx/src/features/dataApi/types'
+import { LocalizationContextState } from '@luxexchange/lx/src/features/language/LocalizationContext'
+import { getCurrencyAmount, ValueType } from '@luxexchange/lx/src/features/tokens/getCurrencyAmount'
+import { getAmountsFromTrade } from '@luxexchange/lx/src/features/transactions/swap/utils/getAmountsFromTrade'
+import { BridgeTransactionInfo } from '@luxexchange/lx/src/features/transactions/types/transactionDetails'
+import { NumberType } from '@luxfi/utilities/src/format/types'
+
+export function getFormattedSwapRatio({
+  typeInfo,
+  inputCurrency,
+  outputCurrency,
+  formatter,
+}: {
+  typeInfo: SwapTypeTransactionInfo | BridgeTransactionInfo
+  inputCurrency: CurrencyInfo
+  outputCurrency: CurrencyInfo
+  formatter: LocalizationContextState
+}): string {
+  const { inputCurrencyAmountRaw, outputCurrencyAmountRaw } = getAmountsFromTrade(typeInfo)
+
+  const inputCurrencyAmount = getCurrencyAmount({
+    value: inputCurrencyAmountRaw,
+    valueType: ValueType.Raw,
+    currency: inputCurrency.currency,
+  })
+
+  const outputCurrencyAmount = getCurrencyAmount({
+    value: outputCurrencyAmountRaw,
+    valueType: ValueType.Raw,
+    currency: outputCurrency.currency,
+  })
+
+  const inputExactAmount = inputCurrencyAmount ? parseFloat(inputCurrencyAmount.toExact()) : 0
+  const outputExactAmount = outputCurrencyAmount ? parseFloat(outputCurrencyAmount.toExact()) : 0
+
+  const outputMoreValuable = inputExactAmount > outputExactAmount // If there are more input tokens per output token, then output token is worth more
+  const swapRate = outputMoreValuable ? inputExactAmount / outputExactAmount : outputExactAmount / inputExactAmount
+  const higherValueSymbol = outputMoreValuable ? outputCurrency.currency.symbol : inputCurrency.currency.symbol
+  const lowerValueSymbol = outputMoreValuable ? inputCurrency.currency.symbol : outputCurrency.currency.symbol
+
+  const formattedSwapRate = formatter.formatNumberOrString({
+    value: swapRate,
+    type: NumberType.TokenTx,
+  })
+  const formattedLine = '1 ' + higherValueSymbol + ' = ' + formattedSwapRate + ' ' + lowerValueSymbol
+
+  return formattedLine
+}

package/src/features/address/avatar.ts

@@ -0,0 +1,35 @@
+import { useUnitagsAddressQuery } from '@luxexchange/lx/src/data/apiClients/unitagsApi/useUnitagsAddressQuery'
+import { useENSAvatar } from '@luxexchange/lx/src/features/ens/api'
+import { Platform } from '@luxexchange/lx/src/features/platforms/types/Platform'
+import { getValidAddress } from '@luxexchange/lx/src/utils/addresses'
+
+/*
+ * Fetches avatar for address, in priority uses: unitag avatar, ens avatar, undefined
+ *  Note that this hook is used instead of just useENSAvatar because our implementation
+ *  of useENSAvatar checks for reverse name resolution which Unitags does not support.
+ *  Chose to do this because even if we used useENSAvatar without reverse name resolution,
+ *  there is more latency because it has to go to the contract via CCIP-read first.
+ */
+export function useAvatar(address: string | undefined): {
+  avatar: string | undefined
+  loading: boolean
+} {
+  // TODO(WEB-8012): Update to support Solana
+  const validated = getValidAddress({ address, platform: Platform.EVM })
+  const { data: ensAvatar, isLoading: ensLoading } = useENSAvatar(validated)
+  const { data: unitag, isLoading: unitagLoading } = useUnitagsAddressQuery({
+    params: validated ? { address: validated } : undefined,
+  })
+
+  const unitagAvatar = unitag?.metadata?.avatar
+
+  if (unitagAvatar) {
+    return { avatar: unitagAvatar, loading: false }
+  }
+
+  if (ensAvatar) {
+    return { avatar: ensAvatar, loading: false }
+  }
+
+  return { avatar: undefined, loading: ensLoading || unitagLoading }
+}

package/src/features/address/color.ts

@@ -0,0 +1,35 @@
+import { useMemo } from 'react'
+import { getUniconColors, passesContrast, useExtractedColors, useIsDarkMode, useSporeColors } from '@luxfi/ui/src'
+import { useAvatar } from '@luxexchange/lx/src/features/address/avatar'
+
+export function useAddressColorProps(address: Address): string {
+  const colors = useSporeColors()
+  const isDarkMode = useIsDarkMode()
+  const { color: uniconColor } = getUniconColors(address, isDarkMode) as { color: string }
+  const { avatar, loading: avatarLoading } = useAvatar(address)
+  const { colors: avatarColors } = useExtractedColors(avatar)
+  const hasAvatar = !!avatar && !avatarLoading
+
+  const smartColor: string = useMemo<string>(() => {
+    const contrastThreshold = 3 // WCAG AA standard for contrast
+    const backgroundColor = colors.surface2.val // replace with your actual background color
+
+    if (hasAvatar && avatarColors?.primary) {
+      if (passesContrast({ color: avatarColors.primary, backgroundColor, contrastThreshold })) {
+        return avatarColors.primary
+      }
+      if (avatarColors.base && passesContrast({ color: avatarColors.base, backgroundColor, contrastThreshold })) {
+        return avatarColors.base
+      }
+      if (avatarColors.detail && passesContrast({ color: avatarColors.detail, backgroundColor, contrastThreshold })) {
+        return avatarColors.detail
+      }
+      // Modify the color if it doesn't pass the contrast check
+      // Replace 'modifiedColor' with the actual color you want to use
+      return colors.neutral1.val as string
+    }
+    return uniconColor
+  }, [avatarColors, hasAvatar, uniconColor, colors.surface2.val, colors.neutral1.val])
+
+  return smartColor
+}

package/src/features/address/types.ts

@@ -0,0 +1,8 @@
+import { AccountType } from '@luxexchange/lx/src/features/accounts/types'
+
+export interface SearchableRecipient {
+  address: Address
+  name?: string | null
+  isUnitag?: boolean
+  type?: AccountType
+}

package/src/features/address/useIsSmartContractAddress.tsx

@@ -0,0 +1,74 @@
+import { queryOptions, useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { useProvider } from '@luxexchange/lx/src/contexts/LuxContext'
+import { type UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+import { isDelegatedEOA } from '@luxexchange/lx/src/features/smartWallet/delegation/isDelegatedEOA'
+import { ensure0xHex } from '@luxfi/utilities/src/addresses/hex'
+import { ReactQueryCacheKey } from '@luxfi/utilities/src/reactQuery/cache'
+import type { QueryOptionsResult } from '@luxfi/utilities/src/reactQuery/queryOptions'
+
+export function useIsSmartContractAddress(
+  address: string | undefined,
+  chainId: UniverseChainId,
+): {
+  loading: boolean
+  isSmartContractAddress: boolean
+} {
+  const provider = useProvider(chainId)
+  const getQueryOptions = useMemo(() => createGetQueryOptions({ provider }), [provider])
+
+  const { data, isLoading } = useQuery(getQueryOptions({ address, chainId }))
+  return {
+    isSmartContractAddress: data?.isSmartContractAddress ?? false,
+    loading: isLoading,
+  }
+}
+
+const createGetQueryOptions = (ctx: {
+  provider: ReturnType<typeof useProvider>
+}): ((input: { address: string | undefined; chainId: UniverseChainId }) => GetCodeQueryOptions) => {
+  return (input: { address: string | undefined; chainId: UniverseChainId }): GetCodeQueryOptions =>
+    queryOptions({
+      queryKey: [ReactQueryCacheKey.IsSmartContractAddress, input.address, input.chainId],
+      queryFn: async () => {
+        if (!input.address) {
+          return null
+        }
+        const result = await ctx.provider?.getCode(input.address)
+        return result ?? null
+      },
+      enabled: !!input.address,
+      select: selectIsSmartContractAddress,
+      refetchInterval: false,
+      refetchOnWindowFocus: false,
+      refetchOnMount: true,
+      refetchOnReconnect: false,
+    })
+}
+
+type GetCodeQueryOptions = QueryOptionsResult<
+  string | null,
+  Error,
+  { isSmartContractAddress: boolean; isDelegatedAddress: boolean },
+  [ReactQueryCacheKey.IsSmartContractAddress, string | undefined, UniverseChainId]
+>
+
+function selectIsSmartContractAddress(bytecode: string | null): {
+  isSmartContractAddress: boolean
+  isDelegatedAddress: boolean
+} {
+  // provider.getCode(address) will return a hex string if a smart contract is deployed at that address
+  // returning just 0x means there's no code and it's not a smart contract
+  if (!bytecode || bytecode === '0x') {
+    return {
+      isSmartContractAddress: false,
+      isDelegatedAddress: false,
+    }
+  }
+  const result = isDelegatedEOA({ bytecode: ensure0xHex(bytecode) })
+
+  return {
+    isSmartContractAddress: !result.isDelegated,
+    isDelegatedAddress: result.isDelegated,
+  }
+}

package/src/features/address/utils.ts

@@ -0,0 +1,12 @@
+import { unique } from '@luxfi/utilities/src/primitives/array'
+
+interface HasAddress {
+  address: string
+}
+
+export function uniqueAddressesOnly<T extends HasAddress>(objectsWithAddress: T[]): T[] {
+  // the input array must be objects that have an obj.address field
+  // had to cast to any because ts doesn't recognize it as HasAddress... maybe issue with unique
+  // eslint-disable-next-line max-params
+  return unique(objectsWithAddress, (v, i, a) => a.findIndex((v2) => v2.address === v.address) === i)
+}

package/src/features/appearance/hooks.tsx

@@ -0,0 +1,85 @@
+import { useSelector } from 'react-redux'
+import { AppearanceSettingType } from '@luxexchange/lx/src/features/appearance/slice'
+import { ColorScheme } from '@luxexchange/lx/src/features/appearance/types'
+import { useColorScheme } from '@luxexchange/lx/src/features/appearance/useColorScheme'
+import { LuxState } from '@luxexchange/lx/src/state/luxReducer'
+
+export function useCurrentAppearanceSetting(): AppearanceSettingType {
+  const { selectedAppearanceSettings } = useSelector((state: LuxState) => state.appearanceSettings)
+  return selectedAppearanceSettings
+}
+
+export function useSelectedColorScheme(): ColorScheme {
+  const currentAppearanceSetting = useCurrentAppearanceSetting()
+  const isDarkMode = useColorScheme() === 'dark'
+  if (currentAppearanceSetting !== AppearanceSettingType.System) {
+    return currentAppearanceSetting === AppearanceSettingType.Dark ? 'dark' : 'light'
+  }
+
+  const systemTheme = isDarkMode ? 'dark' : 'light'
+  return systemTheme
+}
+
+/**
+ * Note commenting this out again, but since we still have some bugs and have
+ * tried a few versions of this already, going to leave this in for context.
+ *
+ * The general problem is that iOS wants to take a screenshot of both light/dark
+ * when an app backgrounds so it can use that for showing the placeholder screen
+ * in the app switcher properly even if you change from dark/light.
+ *
+ * React Native has some bugs around this, namely it just doesn't re-render fast
+ * enough sometimes and you see a slight flicker as you foreground the app.
+ *
+ * But unfortunately this fix - which just tries to avoid it by pausing all
+ * background scheme changes and accepting that sometimes the task switcher
+ * screen may be wrong, also causes a worse issue in that if you do actually
+ * change your color scheme while in the background (say you have Auto mode on
+ * and it becomes evening) then when you foreground now the app has to do the
+ * re-render *as it foregrounds*, which is even worse of a flicker. So, rock and
+ * a hard place.
+ *
+ * For now, disabling: it means we may get some flickers especially on slower
+ * devices.
+ *
+ * If we want less flickering in that case but stronger flickering in the case
+ * where the user changes scheme, then we can uncomment this and replace the
+ * `useColorScheme` above with `useColorSchemeForeground`.
+ */
+
+// ----
+
+// Until React Native supports sync rendering with Fabric, it has a glitch where
+// it can flicker the opposite color scheme as it resumes from the background.
+// This is caused by the iOS feature where it takes a screenshot of your app
+// using both color schemes when its backgrounded so it can show that screenshot
+// in the task switcher, etc
+
+// This basically disables that functionality. It means the app screenshot may be
+// the wrong color scheme if you change system light/dark while its backgrounded
+// but it avoids the flickering that you can see during task switching, which is
+// much more common.
+
+// Reference issues:
+//   https://github.com/facebook/react-native/issues/35972
+//   https://github.com/facebook/react-native/issues/28525
+//   https://github.com/expo/expo/issues/10815
+// const useColorSchemeForeground = (): ColorSchemeName => {
+//   const forceUpdate = useForceUpdate()
+//   const colorScheme = useColorScheme()
+//   const appState = AppState.currentState
+//   const lastCorrectColorScheme = useRef<ColorSchemeName>(colorScheme)
+
+//   useEffect(() => {
+//     AppState.addEventListener('change', forceUpdate)
+//   }, [forceUpdate])
+
+//   return useMemo((): ColorSchemeName => {
+//     if (Platform.OS === 'ios' && appState.match(/inactive|background/)) {
+//       return lastCorrectColorScheme.current
+//     } else {
+//       lastCorrectColorScheme.current = colorScheme
+//       return lastCorrectColorScheme.current
+//     }
+//   }, [appState, colorScheme])
+// }

package/src/features/appearance/slice.ts

@@ -0,0 +1,30 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
+
+export enum AppearanceSettingType {
+  System = 'system',
+  Light = 'light',
+  Dark = 'dark',
+}
+
+export interface AppearanceSettingsState {
+  selectedAppearanceSettings: AppearanceSettingType
+}
+
+export const initialAppearanceSettingsState: AppearanceSettingsState = {
+  selectedAppearanceSettings: AppearanceSettingType.System,
+}
+
+const slice = createSlice({
+  name: 'appearanceSettings',
+  initialState: initialAppearanceSettingsState,
+  reducers: {
+    setSelectedAppearanceSettings: (state, action: PayloadAction<AppearanceSettingType>) => {
+      state.selectedAppearanceSettings = action.payload
+    },
+    resetAppearanceSettings: () => initialAppearanceSettingsState,
+  },
+})
+
+export const { setSelectedAppearanceSettings, resetAppearanceSettings } = slice.actions
+
+export const appearanceSettingsReducer = slice.reducer

package/src/features/appearance/types.ts

@@ -0,0 +1 @@
+export type ColorScheme = 'light' | 'dark'

package/src/features/appearance/useColorScheme.native.ts

@@ -0,0 +1 @@
+export { useColorScheme } from 'react-native'

package/src/features/appearance/useColorScheme.ts

@@ -0,0 +1,6 @@
+import { type ColorScheme } from '@luxexchange/lx/src/features/appearance/types'
+import { PlatformSplitStubError } from '@luxfi/utilities/src/errors'
+
+export const useColorScheme = (): ColorScheme => {
+  throw new PlatformSplitStubError('Use the correct hook for your platform')
+}

package/src/features/appearance/useColorScheme.web.ts

@@ -0,0 +1,87 @@
+import { useEffect, useLayoutEffect, useState } from 'react'
+import { type ColorScheme } from '@luxexchange/lx/src/features/appearance/types'
+import { logger } from '@luxfi/utilities/src/logger/logger'
+import { isBrowser } from '@luxfi/utilities/src/platform'
+import { useEvent } from '@luxfi/utilities/src/react/hooks'
+
+/**
+ * Custom hook to detect and track the user's preferred color scheme.
+ *
+ * Features:
+ * - Detects system color scheme preference immediately (no flicker)
+ * - Listens for system color scheme changes in real-time
+ * - Properly cleans up event listeners
+ * - TypeScript support with strict typing
+ *
+ * @returns The current color scheme: 'light' or 'dark'
+ */
+/**
+ * Creates a media query for dark mode preference and returns both the query and current preference
+ */
+function getDarkModeMediaQuery(): { mediaQuery: MediaQueryList | null; colorScheme: ColorScheme } {
+  if (!isBrowser) {
+    return { mediaQuery: null, colorScheme: 'light' }
+  }
+
+  try {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    return {
+      mediaQuery,
+      colorScheme: mediaQuery.matches ? 'dark' : 'light',
+    }
+  } catch {
+    // Fallback for browsers that don't support matchMedia
+    return { mediaQuery: null, colorScheme: 'light' }
+  }
+}
+
+export function useColorScheme(): ColorScheme {
+  // Initialize with actual system preference to prevent flicker
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(() => getDarkModeMediaQuery().colorScheme)
+  // Handler for color scheme changes
+  const handleChange = useEvent((event: MediaQueryListEvent | MediaQueryList) => {
+    setColorScheme(event.matches ? 'dark' : 'light')
+  })
+
+  // Use useLayoutEffect for synchronous updates to prevent flashing
+  const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect
+
+  useIsomorphicLayoutEffect(() => {
+    if (!isBrowser) {
+      return
+    }
+
+    const { mediaQuery } = getDarkModeMediaQuery()
+
+    if (!mediaQuery) {
+      return
+    }
+
+    try {
+      // Modern browsers
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (mediaQuery.addEventListener) {
+        mediaQuery.addEventListener('change', handleChange)
+
+        // eslint-disable-next-line consistent-return
+        return (): void => {
+          mediaQuery.removeEventListener('change', handleChange)
+        }
+      }
+      // Legacy browsers (Safari < 14)
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      else if (mediaQuery.addListener) {
+        mediaQuery.addListener(handleChange)
+
+        // eslint-disable-next-line consistent-return
+        return (): void => {
+          mediaQuery.removeListener(handleChange)
+        }
+      }
+    } catch (error) {
+      logger.warn('useColorScheme.web.tsx', 'getDarkModeMediaQuery', 'matchMedia is not supported:', error)
+    }
+  }, [])
+
+  return colorScheme
+}

package/src/features/auth/types.ts

@@ -0,0 +1 @@
+export type AuthTrigger = (args: { successCallback: () => void; failureCallback: () => void }) => Promise<void>

package/src/features/behaviorHistory/selectors.ts

@@ -0,0 +1,30 @@
+import { LuxState } from '@luxexchange/lx/src/state/luxReducer'
+
+export const selectHasViewedBridgingBanner = (state: LuxState): boolean =>
+  state.luxBehaviorHistory.hasViewedBridgingBanner === true
+
+export const selectHasDismissedBridgingWarning = (state: LuxState): boolean =>
+  state.luxBehaviorHistory.hasDismissedBridgingWarning === true
+
+export const selectHasDismissedLowNetworkTokenWarning = (state: LuxState): boolean =>
+  state.luxBehaviorHistory.hasDismissedLowNetworkTokenWarning === true
+
+export const selectHasViewedContractAddressExplainer = (state: LuxState): boolean =>
+  state.luxBehaviorHistory.hasViewedContractAddressExplainer === true
+
+export const selectHasShownMismatchToast = (state: LuxState): boolean =>
+  state.luxBehaviorHistory.hasShownMismatchToast === true
+
+/** Returns true if user has seen the modal globally (when disconnected) */
+export const selectHasSeenToucanIntroModal = (state: LuxState): boolean =>
+  state.luxBehaviorHistory.hasSeenToucanIntroModal === true
+
+/** Returns true if user has seen the modal for a specific wallet */
+export const selectHasSeenToucanIntroModalForWallet = (state: LuxState, walletAddress: string): boolean =>
+  state.luxBehaviorHistory.toucanIntroModalSeenByWallet?.[walletAddress.toLowerCase()] === true
+
+export const selectHasDismissedLuxWrapped2025Banner = (state: LuxState): boolean =>
+  state.luxBehaviorHistory.hasDismissedLuxWrapped2025Banner === true
+
+export const selectHasDismissedCrosschainSwapsPromoBanner = (state: LuxState): boolean =>
+  state.luxBehaviorHistory.hasDismissedCrosschainSwapsPromoBanner === true

package/src/features/behaviorHistory/slice.ts

@@ -0,0 +1,161 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+/**
+ * Used to store persisted info about a users interactions with UI.
+ * We use this to show conditional UI, usually only for the first time a user views a new feature.
+ */
+export interface LuxBehaviorHistoryState {
+  hasViewedBridgingBanner?: boolean
+  hasDismissedBridgingWarning?: boolean
+  hasDismissedLowNetworkTokenWarning?: boolean
+  hasViewedContractAddressExplainer?: boolean
+  hasDismissedBridgedAssetsBannerV2?: boolean
+  unichainPromotion?: {
+    coldBannerDismissed?: boolean
+    warmBannerDismissed?: boolean
+    networkSelectorAnimationSeen?: boolean
+    networkSelectorTooltipSeen?: boolean
+    bridgingTooltipSeen?: boolean
+    bridgingAnimationSeen?: boolean
+    isFirstUnichainBridgeSelection?: boolean
+  }
+  // whether we have shown the mismatch toast (related to wallet capabilities & wallet bytecode)
+  hasShownMismatchToast?: boolean
+  /** Wallet addresses with timestamps that have dismissed the graduate wallet card for 30 days. The same property in the application reducer is a list of wallet addresses that have dismissed the graduated wallet card for this session. */
+  embeddedWalletGraduateCardDismissed?: {
+    [walletAddress: string]: number
+  }
+  hasShownSmartWalletNudge?: boolean
+  /** Global flag for when user sees modal without wallet connected */
+  hasSeenToucanIntroModal?: boolean
+  /** Per-wallet tracking for Toucan intro modal */
+  toucanIntroModalSeenByWallet?: {
+    [walletAddress: string]: boolean
+  }
+  hasDismissedLuxWrapped2025Banner?: boolean
+  hasDismissedCrosschainSwapsPromoBanner?: boolean
+}
+
+export const initialLuxBehaviorHistoryState: LuxBehaviorHistoryState = {
+  hasViewedBridgingBanner: false,
+  hasDismissedBridgingWarning: false,
+  hasDismissedLowNetworkTokenWarning: false,
+  hasViewedContractAddressExplainer: false,
+  hasDismissedBridgedAssetsBannerV2: false,
+  unichainPromotion: {
+    coldBannerDismissed: false,
+    warmBannerDismissed: false,
+    networkSelectorAnimationSeen: false,
+    networkSelectorTooltipSeen: false,
+    bridgingTooltipSeen: false,
+    bridgingAnimationSeen: false,
+    isFirstUnichainBridgeSelection: true,
+  },
+  hasShownMismatchToast: false,
+  hasShownSmartWalletNudge: false,
+  hasSeenToucanIntroModal: false,
+  hasDismissedLuxWrapped2025Banner: false,
+  hasDismissedCrosschainSwapsPromoBanner: false,
+}
+
+const slice = createSlice({
+  name: 'luxBehaviorHistory',
+  initialState: initialLuxBehaviorHistoryState,
+  reducers: {
+    setHasViewedBridgingBanner: (state, action: PayloadAction<boolean>) => {
+      state.hasViewedBridgingBanner = action.payload
+    },
+    setHasDismissedBridgingWarning: (state, action: PayloadAction<boolean>) => {
+      state.hasDismissedBridgingWarning = action.payload
+    },
+    setHasDismissedLowNetworkTokenWarning: (state, action: PayloadAction<boolean>) => {
+      state.hasDismissedLowNetworkTokenWarning = action.payload
+    },
+    setHasViewedContractAddressExplainer: (state, action: PayloadAction<boolean>) => {
+      state.hasViewedContractAddressExplainer = action.payload
+    },
+    setHasDismissedUnichainColdBanner: (state, action: PayloadAction<boolean>) => {
+      state.unichainPromotion ??= {}
+      state.unichainPromotion.coldBannerDismissed = action.payload
+    },
+    setHasDismissedUnichainWarmBanner: (state, action: PayloadAction<boolean>) => {
+      state.unichainPromotion ??= {}
+      state.unichainPromotion.warmBannerDismissed = action.payload
+    },
+    setHasSeenNetworkSelectorAnimation: (state, action: PayloadAction<boolean>) => {
+      state.unichainPromotion ??= {}
+      state.unichainPromotion.networkSelectorAnimationSeen = action.payload
+    },
+    setHasSeenNetworkSelectorTooltip: (state, action: PayloadAction<boolean>) => {
+      state.unichainPromotion ??= {}
+      state.unichainPromotion.networkSelectorTooltipSeen = action.payload
+    },
+    setHasSeenBridgingTooltip: (state, action: PayloadAction<boolean>) => {
+      state.unichainPromotion ??= {}
+      state.unichainPromotion.bridgingTooltipSeen = action.payload
+    },
+    setIsFirstUnichainBridgeSelection: (state, action: PayloadAction<boolean>) => {
+      state.unichainPromotion ??= {}
+      state.unichainPromotion.isFirstUnichainBridgeSelection = action.payload
+    },
+    setHasSeenBridgingAnimation: (state, action: PayloadAction<boolean>) => {
+      state.unichainPromotion ??= {}
+      state.unichainPromotion.bridgingAnimationSeen = action.payload
+    },
+    // Should only be used for testing
+    resetLuxBehaviorHistory: (_state, _action: PayloadAction) => {
+      return initialLuxBehaviorHistoryState
+    },
+    setHasShownMismatchToast: (state, action: PayloadAction<boolean>) => {
+      state.hasShownMismatchToast = action.payload
+    },
+    setEmbeddedWalletGraduateCardDismissed: (state, action: PayloadAction<{ walletAddress: string }>) => {
+      state.embeddedWalletGraduateCardDismissed ??= {}
+      state.embeddedWalletGraduateCardDismissed[action.payload.walletAddress] = new Date().getTime()
+    },
+    setHasShownSmartWalletNudge: (state, action: PayloadAction<boolean>) => {
+      state.hasShownSmartWalletNudge = action.payload
+    },
+    setHasSeenToucanIntroModal: (state, action: PayloadAction<boolean>) => {
+      state.hasSeenToucanIntroModal = action.payload
+    },
+    setToucanIntroModalSeenByWallet: (state, action: PayloadAction<{ walletAddress: string }>) => {
+      state.toucanIntroModalSeenByWallet ??= {}
+      state.toucanIntroModalSeenByWallet[action.payload.walletAddress.toLowerCase()] = true
+    },
+    setHasDismissedBridgedAssetsBannerV2: (state, action: PayloadAction<boolean>) => {
+      state.hasDismissedBridgedAssetsBannerV2 = action.payload
+    },
+    setHasDismissedLuxWrapped2025Banner: (state, action: PayloadAction<boolean>) => {
+      state.hasDismissedLuxWrapped2025Banner = action.payload
+    },
+    setHasDismissedCrosschainSwapsPromoBanner: (state, action: PayloadAction<boolean>) => {
+      state.hasDismissedCrosschainSwapsPromoBanner = action.payload
+    },
+  },
+})
+
+export const {
+  setHasViewedBridgingBanner,
+  setHasDismissedBridgingWarning,
+  setHasDismissedLowNetworkTokenWarning,
+  setHasDismissedUnichainColdBanner,
+  setHasDismissedUnichainWarmBanner,
+  setHasSeenNetworkSelectorAnimation,
+  setHasSeenNetworkSelectorTooltip,
+  setHasSeenBridgingTooltip,
+  setIsFirstUnichainBridgeSelection,
+  setHasSeenBridgingAnimation,
+  resetLuxBehaviorHistory,
+  setHasViewedContractAddressExplainer,
+  setHasShownMismatchToast,
+  setEmbeddedWalletGraduateCardDismissed,
+  setHasShownSmartWalletNudge,
+  setHasSeenToucanIntroModal,
+  setToucanIntroModalSeenByWallet,
+  setHasDismissedBridgedAssetsBannerV2,
+  setHasDismissedLuxWrapped2025Banner,
+  setHasDismissedCrosschainSwapsPromoBanner,
+} = slice.actions
+
+export const luxBehaviorHistoryReducer = slice.reducer