@lifi/widget 3.25.0-beta.5 → 3.26.0

package/src/i18n/vi.json

@@ -36,7 +36,7 @@
     "getGas": "Thiết lập gas",
     "learnMore": "Xem thêm",
     "light": "Sáng",
-    "max": "Tối đa",
+    "max": "",
     "ok": "Ok",
     "options": "Tùy chỉnh",
     "removeTransaction": "Xoá giao dịch",
@@ -129,6 +129,7 @@
       "highValueLoss": "Giá trị của token nhận được đang thấp hơn rất nhiều so với token được swap và chi phí giao dịch.",
       "insufficientFunds": "Bạn không có đủ tiền để thực hiện tác vụ này.",
       "insufficientGas": "Bạn không đủ gas để thực hiện swap. Bạn cần thêm ít nhất:",
+      "minFromAmountUSD": "",
       "rateChanged": "Tỉ lệ hoán đổi đã thay đổi. Để tiếp tục Swap, bạn sẽ chấp nhận tỉ lệ mới.",
       "resetSettings": "Thao tác này sẽ đặt lại mức độ ưu tiên của tuyến đường, độ trượt giá, giá gas, bridge và sàn giao dịch.",
       "slippageOutsideRecommendedLimits": "Khả năng trượt giá cao có thể dẫn đến giao dịch không thành công do front-running.",
@@ -345,6 +346,8 @@
   },
   "tokenMetric": {
     "currentPrice": "",
-    "contractAddress": ""
+    "contractAddress": "",
+    "marketCap": "",
+    "volume24h": ""
   }
 }

package/src/i18n/zh.json

@@ -36,7 +36,7 @@
     "getGas": "开始兑换燃气费",
     "learnMore": "了解更多",
     "light": "浅色主题",
-    "max": "最大",
+    "max": "",
     "ok": "确认",
     "options": "选项",
     "removeTransaction": "删除交易",
@@ -129,6 +129,7 @@
       "highValueLoss": "收到的代币的价值明显低于要被兑换的代币和交易成本。",
       "insufficientFunds": "你没有足够的资金来完成这笔交易。",
       "insufficientGas": "您没有足够的燃气费来完成此次交易。您至少需要添加：",
+      "minFromAmountUSD": "",
       "rateChanged": "兑换比例已经改变，如果继续兑换，您将接受新的兑换比例。",
       "resetSettings": "这将重置您的路由优先级，滑点，燃气费，选中的跨链桥和链上交易所。",
       "slippageOutsideRecommendedLimits": "过高的滑点可能会导致交易被抢跑，造成财产损失",
@@ -345,6 +346,8 @@
   },
   "tokenMetric": {
     "currentPrice": "",
-    "contractAddress": ""
+    "contractAddress": "",
+    "marketCap": "",
+    "volume24h": ""
   }
 }

package/src/pages/SelectEnabledToolsPage.tsx

@@ -14,7 +14,6 @@ import {
 import type { MouseEventHandler } from 'react'
 import { type FormEventHandler, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { shallow } from 'zustand/shallow'
 import { FullPageContainer } from '../components/FullPageContainer.js'
 import { ListItemText } from '../components/ListItemText.js'
 import { StickySearchInput } from '../components/Search/SearchInput.js'
@@ -76,10 +75,10 @@ export const SelectEnabledToolsPage: React.FC<{
   const typeKey = type.toLowerCase() as 'bridges' | 'exchanges'
   const { tools } = useTools()
   const { setToolValue, toggleToolKeys } = useSettingsActions()
-  const [enabledTools, disabledTools] = useSettingsStore(
-    (state) => [state[`_enabled${type}`], state[`disabled${type}`]],
-    shallow
-  )
+  const [enabledTools, disabledTools] = useSettingsStore((state) => [
+    state[`_enabled${type}`],
+    state[`disabled${type}`],
+  ])
 
   const { t } = useTranslation()
   const elementId = useDefaultElementId()

package/src/pages/SelectTokenPage/SearchTokenInput.tsx

@@ -1,15 +1,27 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { SearchInput } from '../../components/Search/SearchInput.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
-import { useFieldController } from '../../stores/form/useFieldController.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
 
 export const SearchTokenInput = () => {
   const { t } = useTranslation()
-  const { setFieldValue } = useFieldActions()
-  const { onChange, onBlur, name, value } = useFieldController({
-    name: 'tokenSearchFilter',
-  })
+  const [value] = useFieldValues('tokenSearchFilter')
+  const { setFieldValue, setAsTouched } = useFieldActions()
+
+  const onChange = useCallback(
+    (newValue: string | number | undefined) => {
+      setFieldValue('tokenSearchFilter', newValue, {
+        isDirty: true,
+        isTouched: true,
+      })
+    },
+    [setFieldValue]
+  )
+
+  const onBlur = useCallback(() => {
+    setAsTouched('tokenSearchFilter')
+  }, [setAsTouched])
 
   useEffect(
     () => () => {
@@ -20,7 +32,7 @@ export const SearchTokenInput = () => {
 
   return (
     <SearchInput
-      name={name}
+      name="tokenSearchFilter"
       placeholder={t('main.tokenSearch')}
       onChange={(e) => onChange((e.target as HTMLInputElement).value)}
       onBlur={onBlur}

package/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx

@@ -2,7 +2,6 @@ import AirlineStops from '@mui/icons-material/AirlineStops'
 import SwapHoriz from '@mui/icons-material/SwapHoriz'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
-import { shallow } from 'zustand/shallow'
 import { CardButton } from '../../components/Card/CardButton.js'
 import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
@@ -25,7 +24,7 @@ export const BridgeAndExchangeSettings: React.FC<{
   const [enabledTools, tools] = useSettingsStore((state) => {
     const enabledTools = Object.values(state[`_enabled${type}`])
     return [enabledTools.filter(Boolean).length, enabledTools.length]
-  }, shallow)
+  })
 
   const { hiddenUI } = useWidgetConfig()
 

package/src/pages/TransactionPage/TransactionPage.tsx

@@ -19,6 +19,7 @@ import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.j
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { RouteExecutionStatus } from '../../stores/routes/types.js'
 import { WidgetEvent } from '../../types/events.js'
+import { HiddenUI } from '../../types/widget.js'
 import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
 import { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'
 import type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js'
@@ -37,8 +38,12 @@ export const TransactionPage: React.FC = () => {
   const { setFieldValue } = useFieldActions()
   const emitter = useWidgetEvents()
   const { navigateBack } = useNavigateBack()
-  const { subvariant, subvariantOptions, contractSecondaryComponent } =
-    useWidgetConfig()
+  const {
+    subvariant,
+    subvariantOptions,
+    contractSecondaryComponent,
+    hiddenUI,
+  } = useWidgetConfig()
   const { state }: any = useLocation()
   const stateRouteId = state?.routeId
   const [routeId, setRouteId] = useState<string>(stateRouteId)
@@ -141,7 +146,8 @@ export const TransactionPage: React.FC = () => {
         toAddress &&
         !hasActivity &&
         !isLoadingAddressActivity &&
-        isActivityAddressFetched
+        isActivityAddressFetched &&
+        !hiddenUI?.includes(HiddenUI.LowAddressActivityConfirmation)
       ) {
         confirmToAddressSheetRef.current?.open()
         return
@@ -248,12 +254,14 @@ export const TransactionPage: React.FC = () => {
         />
       ) : null}
       <ExchangeRateBottomSheet ref={exchangeRateBottomSheetRef} />
-      <ConfirmToAddressSheet
-        ref={confirmToAddressSheetRef}
-        onContinue={handleExecuteRoute}
-        toAddress={toAddress!}
-        toChainId={route.toChainId!}
-      />
+      {!hiddenUI?.includes(HiddenUI.LowAddressActivityConfirmation) ? (
+        <ConfirmToAddressSheet
+          ref={confirmToAddressSheetRef}
+          onContinue={handleExecuteRoute}
+          toAddress={toAddress!}
+          toChainId={route.toChainId!}
+        />
+      ) : null}
     </PageContainer>
   )
 }

package/src/stores/bookmarks/BookmarkStore.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext, useRef } from 'react'
-import { shallow } from 'zustand/shallow'
+import { useShallow } from 'zustand/shallow'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import type { PersistStoreProviderProps } from '../types.js'
 import { createBookmarksStore } from './createBookmarkStore.js'
@@ -25,10 +25,7 @@ export const BookmarkStoreProvider: React.FC<PersistStoreProviderProps> = ({
   )
 }
 
-export function useBookmarkStore<T>(
-  selector: (store: BookmarkState) => T,
-  equalityFunction = shallow
-) {
+export function useBookmarkStore<T>(selector: (store: BookmarkState) => T) {
   const useStore = useContext(BookmarkStoreContext)
 
   if (!useStore) {
@@ -37,5 +34,5 @@ export function useBookmarkStore<T>(
     )
   }
 
-  return useStore(selector, equalityFunction)
+  return useStore(useShallow(selector))
 }

package/src/stores/bookmarks/useBookmarkActions.ts

@@ -1,20 +1,16 @@
-import { shallow } from 'zustand/shallow'
 import { useBookmarkStore } from './BookmarkStore.js'
 import type { BookmarkActions } from './types.js'
 
 export const useBookmarkActions = () => {
-  const actions = useBookmarkStore<BookmarkActions>(
-    (store) => ({
-      getBookmark: store.getBookmark,
-      addBookmark: store.addBookmark,
-      removeBookmark: store.removeBookmark,
-      setSelectedBookmark: store.setSelectedBookmark,
-      getSelectedBookmark: store.getSelectedBookmark,
-      addRecentWallet: store.addRecentWallet,
-      removeRecentWallet: store.removeRecentWallet,
-    }),
-    shallow
-  )
+  const actions = useBookmarkStore<BookmarkActions>((store) => ({
+    getBookmark: store.getBookmark,
+    addBookmark: store.addBookmark,
+    removeBookmark: store.removeBookmark,
+    setSelectedBookmark: store.setSelectedBookmark,
+    getSelectedBookmark: store.getSelectedBookmark,
+    addRecentWallet: store.addRecentWallet,
+    removeRecentWallet: store.removeRecentWallet,
+  }))
 
   return actions
 }

package/src/stores/bookmarks/useBookmarks.ts

@@ -1,11 +1,9 @@
-import { shallow } from 'zustand/shallow'
 import { useBookmarkStore } from './BookmarkStore.js'
 import type { BookmarkProps } from './types.js'
 
 export const useBookmarks = (): BookmarkProps => {
   const [bookmarks, selectedBookmark, recentWallets] = useBookmarkStore(
-    (store) => [store.bookmarks, store.selectedBookmark, store.recentWallets],
-    shallow
+    (store) => [store.bookmarks, store.selectedBookmark, store.recentWallets]
   )
 
   return {

package/src/stores/chains/ChainOrderStore.tsx

@@ -1,5 +1,6 @@
 import { createContext, useContext, useEffect, useRef } from 'react'
 import type { StoreApi } from 'zustand'
+import { useShallow } from 'zustand/shallow'
 import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
 import { useChains } from '../../hooks/useChains.js'
 import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'
@@ -27,6 +28,7 @@ export function ChainOrderStoreProvider({
   const storeRef = useRef<ChainOrderStore>(null)
   const { chains } = useChains()
   const { setFieldValue, getFieldValues } = useFieldActions()
+  const { variant, subvariantOptions } = useWidgetConfig()
   const { externalChainTypes, useExternalWalletProvidersOnly } =
     useExternalWalletProvider()
 
@@ -58,15 +60,30 @@ export function ChainOrderStoreProvider({
             : true
           return passesChainsConfigFilter && passesWalletConfigFilter
         })
+
         const chainOrder = storeRef.current?.getState().initializeChains(
           filteredChains.map((chain) => chain.id),
           key
         )
-        if (chainOrder) {
-          const [chainValue] = getFieldValues(`${key}Chain`)
-          if (!chainValue) {
-            setFieldValue(`${key}Chain`, chainOrder[0])
-          }
+
+        const [chainValue] = getFieldValues(`${key}Chain`)
+        if (chainValue) {
+          return
+        }
+
+        const firstAllowedPinnedChain = storeRef.current
+          ?.getState()
+          .pinnedChains?.find((chainId) =>
+            filteredChains.some((chain) => chain.id === chainId)
+          )
+        if (
+          variant === 'wide' &&
+          subvariantOptions?.wide?.enableChainSidebar &&
+          firstAllowedPinnedChain
+        ) {
+          setFieldValue(`${key}Chain`, firstAllowedPinnedChain)
+        } else if (chainOrder?.length) {
+          setFieldValue(`${key}Chain`, chainOrder[0])
         }
       })
     }
@@ -77,6 +94,8 @@ export function ChainOrderStoreProvider({
     getFieldValues,
     setFieldValue,
     useExternalWalletProvidersOnly,
+    variant,
+    subvariantOptions?.wide?.enableChainSidebar,
   ])
 
   return (
@@ -97,9 +116,8 @@ export function useChainOrderStoreContext() {
 }
 
 export function useChainOrderStore<T>(
-  selector: (state: ChainOrderState) => T,
-  equalityFn?: (left: T, right: T) => boolean
+  selector: (state: ChainOrderState) => T
 ): T {
   const useStore = useChainOrderStoreContext()
-  return useStore(selector, equalityFn)
+  return useStore(useShallow(selector))
 }

package/src/stores/chains/createChainOrderStore.ts

@@ -17,6 +17,7 @@ export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
       (set, get) => ({
         chainOrder: defaultChainState,
         availableChains: defaultChainState,
+        pinnedChains: [],
         initializeChains: (chainIds, type) => {
           set((state: ChainOrderState) => {
             const chainOrder = state.chainOrder[type].filter((chainId) =>
@@ -76,11 +77,28 @@ export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
             }
           })
         },
+        setPinnedChain: (chainId) => {
+          set((state: ChainOrderState) => {
+            const pinnedChains = [...state.pinnedChains]
+            if (pinnedChains.includes(chainId)) {
+              return {
+                pinnedChains: pinnedChains.filter((id) => id !== chainId),
+              }
+            }
+            pinnedChains.push(chainId)
+            return {
+              pinnedChains,
+            }
+          })
+        },
       }),
       {
         name: `${namePrefix || 'li.fi'}-widget-chains-order`,
         version: 2,
-        partialize: (state) => ({ chainOrder: state.chainOrder }),
+        partialize: (state) => ({
+          chainOrder: state.chainOrder,
+          pinnedChains: state.pinnedChains,
+        }),
       }
     ) as StateCreator<ChainOrderState, [], [], ChainOrderState>,
     Object.is

package/src/stores/chains/types.ts

@@ -9,9 +9,11 @@ export interface ChainOrderProps {
     from: number[]
     to: number[]
   }
+  pinnedChains: number[]
 }
 
 export interface ChainOrderState extends ChainOrderProps {
   initializeChains(chainIds: number[], type: FormType): number[]
   setChain(chainId: number, type: FormType): void
+  setPinnedChain(chainId: number): void
 }

package/src/stores/chains/useChainOrder.ts

@@ -1,12 +1,8 @@
-import { shallow } from 'zustand/shallow'
 import type { FormType } from '../form/types.js'
 import { useChainOrderStore } from './ChainOrderStore.js'
 
 export const useChainOrder = (
   type: FormType
 ): [number[], (chainId: number, type: FormType) => void] => {
-  return useChainOrderStore(
-    (state) => [state.chainOrder[type], state.setChain],
-    shallow
-  )
+  return useChainOrderStore((state) => [state.chainOrder[type], state.setChain])
 }

package/src/stores/form/useFieldActions.ts

@@ -1,5 +1,4 @@
 import { useCallback } from 'react'
-import { shallow } from 'zustand/shallow'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import type { FormFieldChanged } from '../../types/events.js'
 import { WidgetEvent } from '../../types/events.js'
@@ -14,19 +13,16 @@ import { useFormStore } from './useFormStore.js'
 
 export const useFieldActions = () => {
   const emitter = useWidgetEvents()
-  const actions = useFormStore<FormActions>(
-    (store) => ({
-      getFieldValues: store.getFieldValues,
-      isTouched: store.isTouched,
-      isDirty: store.isDirty,
-      resetField: store.resetField,
-      setAsTouched: store.setAsTouched,
-      setDefaultValues: store.setDefaultValues,
-      setFieldValue: store.setFieldValue,
-      setUserAndDefaultValues: store.setUserAndDefaultValues,
-    }),
-    shallow
-  )
+  const actions = useFormStore<FormActions>((store) => ({
+    getFieldValues: store.getFieldValues,
+    isTouched: store.isTouched,
+    isDirty: store.isDirty,
+    resetField: store.resetField,
+    setAsTouched: store.setAsTouched,
+    setDefaultValues: store.setDefaultValues,
+    setFieldValue: store.setFieldValue,
+    setUserAndDefaultValues: store.setUserAndDefaultValues,
+  }))
 
   const setFieldValueWithEmittedEvents = useCallback(
     (

package/src/stores/form/useFieldValues.ts

@@ -1,4 +1,3 @@
-import { shallow } from 'zustand/shallow'
 import type { FormFieldArray, FormFieldNames } from './types.js'
 import { useFormStore } from './useFormStore.js'
 
@@ -6,8 +5,7 @@ import { useFormStore } from './useFormStore.js'
 export const useFieldValues = <T extends FormFieldNames[]>(...names: T) => {
   const values = useFormStore(
     (store) =>
-      names.map((name) => store.userValues[name]?.value) as FormFieldArray<T>,
-    shallow
+      names.map((name) => store.userValues[name]?.value) as FormFieldArray<T>
   )
 
   return values

package/src/stores/form/useFormStore.ts

@@ -1,17 +1,14 @@
 import { useContext } from 'react'
-import { shallow } from 'zustand/shallow'
+import { useShallow } from 'zustand/shallow'
 import { FormStoreContext } from './FormStoreContext.js'
 import type { FormValuesState } from './types.js'
 
-export function useFormStore<T>(
-  selector: (state: FormValuesState) => T,
-  equalityFn = shallow
-): T {
+export function useFormStore<T>(selector: (state: FormValuesState) => T): T {
   const useStore = useContext(FormStoreContext)
 
   if (!useStore) {
     throw new Error('You forgot to wrap your component in <FormStoreProvider>.')
   }
 
-  return useStore(selector, equalityFn)
+  return useStore(useShallow(selector))
 }

package/src/stores/form/useTouchedFields.ts

@@ -1,8 +1,7 @@
-import { shallow } from 'zustand/shallow'
 import { useFormStore } from './useFormStore.js'
 
 export const useTouchedFields = () => {
-  const touchedFields = useFormStore((store) => store.touchedFields, shallow)
+  const touchedFields = useFormStore((store) => store.touchedFields)
 
   return touchedFields
 }

package/src/stores/form/useValidation.ts

@@ -1,11 +1,11 @@
-import { shallow } from 'zustand/shallow'
 import type { ValidationProps } from './types.js'
 import { useFormStore } from './useFormStore.js'
 export const useValidation = (): Omit<ValidationProps, 'validation'> => {
-  const [isValid, isValidating, errors] = useFormStore(
-    (store) => [store.isValid, store.isValidating, store.errors],
-    shallow
-  )
+  const [isValid, isValidating, errors] = useFormStore((store) => [
+    store.isValid,
+    store.isValidating,
+    store.errors,
+  ])
 
   return {
     isValid,

package/src/stores/form/useValidationActions.ts

@@ -1,16 +1,12 @@
-import { shallow } from 'zustand/shallow'
 import type { ValidationActions } from './types.js'
 import { useFormStore } from './useFormStore.js'
 
 export const useValidationActions = () => {
-  const actions = useFormStore<ValidationActions>(
-    (store) => ({
-      addFieldValidation: store.addFieldValidation,
-      triggerFieldValidation: store.triggerFieldValidation,
-      clearErrors: store.clearErrors,
-    }),
-    shallow
-  )
+  const actions = useFormStore<ValidationActions>((store) => ({
+    addFieldValidation: store.addFieldValidation,
+    triggerFieldValidation: store.triggerFieldValidation,
+    clearErrors: store.clearErrors,
+  }))
 
   return actions
 }

package/src/stores/header/useHeaderStore.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext, useRef } from 'react'
-import { shallow } from 'zustand/shallow'
+import { useShallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
 import type { PersistStoreProviderProps } from '../types.js'
 import type { HeaderState, HeaderStore } from './types.js'
@@ -28,12 +28,9 @@ export function useHeaderStoreContext() {
   return useStore
 }
 
-export function useHeaderStore<T>(
-  selector: (state: HeaderState) => T,
-  equalityCheck?: (objA: T, objB: T) => boolean
-): T {
+export function useHeaderStore<T>(selector: (state: HeaderState) => T): T {
   const useStore = useHeaderStoreContext()
-  return useStore(selector, equalityCheck)
+  return useStore(useShallow(selector))
 }
 
 // We use fixed position on the header when Widget is in Full Height layout.
@@ -42,10 +39,7 @@ export function useHeaderStore<T>(
 // To prevent the remaining page content from appearing behind the header we need to
 // pass the headers height so that the position of the page content can be adjusted
 export function useHeaderHeight() {
-  const [headerHeight] = useHeaderStore(
-    (state) => [state.headerHeight],
-    shallow
-  )
+  const headerHeight = useHeaderStore((state) => state.headerHeight)
 
   return {
     headerHeight,
@@ -53,10 +47,7 @@ export function useHeaderHeight() {
 }
 
 export function useSetHeaderHeight() {
-  const [setHeaderHeight] = useHeaderStore(
-    (state) => [state.setHeaderHeight],
-    shallow
-  )
+  const setHeaderHeight = useHeaderStore((state) => state.setHeaderHeight)
 
   return {
     setHeaderHeight,

package/src/stores/inputMode/useInputModeStore.ts

@@ -0,0 +1,29 @@
+import { create } from 'zustand'
+import type { FormTypeProps } from '../form/types.js'
+
+export type InputMode = 'amount' | 'price'
+
+interface InputModeState {
+  inputMode: Record<'from' | 'to', InputMode>
+  setInputMode: (formType: FormTypeProps['formType'], mode: InputMode) => void
+  toggleInputMode: (formType: FormTypeProps['formType']) => void
+}
+
+export const useInputModeStore = create<InputModeState>((set, get) => ({
+  inputMode: {
+    from: 'amount',
+    to: 'amount',
+  },
+  setInputMode: (formType, mode) =>
+    set((state) => ({
+      inputMode: {
+        ...state.inputMode,
+        [formType]: mode,
+      },
+    })),
+  toggleInputMode: (formType) => {
+    const currentMode = get().inputMode[formType]
+    const newMode = currentMode === 'amount' ? 'price' : 'amount'
+    get().setInputMode(formType, newMode)
+  },
+}))

package/src/stores/routes/RouteExecutionStore.tsx

@@ -1,5 +1,6 @@
 import { createContext, useContext, useRef } from 'react'
 import type { StoreApi } from 'zustand'
+import { useShallow } from 'zustand/shallow'
 import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
 import type { PersistStoreProviderProps } from '../types.js'
 import { createRouteExecutionStore } from './createRouteExecutionStore.js'
@@ -38,9 +39,8 @@ export function useRouteExecutionStoreContext() {
 }
 
 export function useRouteExecutionStore<T>(
-  selector: (state: RouteExecutionState) => T,
-  equalityFn?: (left: T, right: T) => boolean
+  selector: (state: RouteExecutionState) => T
 ): T {
   const useStore = useRouteExecutionStoreContext()
-  return useStore(selector, equalityFn)
+  return useStore(useShallow(selector))
 }