@lifi/widget 3.25.0 → 3.26.1

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",

package/src/i18n/zh.json

@@ -36,7 +36,7 @@
     "getGas": "开始兑换燃气费",
     "learnMore": "了解更多",
     "light": "浅色主题",
-    "max": "最大",
+    "max": "",
     "ok": "确认",
     "options": "选项",
     "removeTransaction": "删除交易",

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'
@@ -115,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/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,4 +1,5 @@
 import { createContext, useContext, useRef } from 'react'
+import { useShallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
 import type { PersistStoreProviderProps } from '../types.js'
 import type { HeaderState, HeaderStore } from './types.js'
@@ -27,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.

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))
 }

package/src/stores/routes/useExecutingRoutesIds.ts

@@ -1,5 +1,4 @@
 import { useAccount } from '@lifi/wallet-management'
-import { shallow } from 'zustand/shallow'
 import { useRouteExecutionStore } from './RouteExecutionStore.js'
 import type { RouteExecution } from './types.js'
 import { RouteExecutionStatus } from './types.js'
@@ -7,21 +6,19 @@ import { RouteExecutionStatus } from './types.js'
 export const useExecutingRoutesIds = () => {
   const { accounts } = useAccount()
   const accountAddresses = accounts.map((account) => account.address)
-  return useRouteExecutionStore(
-    (state) =>
-      (Object.values(state.routes) as RouteExecution[])
-        .filter(
-          (item) =>
-            accountAddresses.includes(item.route.fromAddress) &&
-            (item.status === RouteExecutionStatus.Pending ||
-              item.status === RouteExecutionStatus.Failed)
-        )
-        .sort(
-          (a, b) =>
-            (b?.route.steps[0].execution?.process[0]?.startedAt ?? 0) -
-            (a?.route.steps[0].execution?.process[0]?.startedAt ?? 0)
-        )
-        .map(({ route }) => route.id),
-    shallow
+  return useRouteExecutionStore((state) =>
+    (Object.values(state.routes) as RouteExecution[])
+      .filter(
+        (item) =>
+          accountAddresses.includes(item.route.fromAddress) &&
+          (item.status === RouteExecutionStatus.Pending ||
+            item.status === RouteExecutionStatus.Failed)
+      )
+      .sort(
+        (a, b) =>
+          (b?.route.steps[0].execution?.process[0]?.startedAt ?? 0) -
+          (a?.route.steps[0].execution?.process[0]?.startedAt ?? 0)
+      )
+      .map(({ route }) => route.id)
   )
 }

package/src/stores/settings/useSendToWalletStore.ts

@@ -1,8 +1,8 @@
-import { shallow } from 'zustand/shallow'
+import { useShallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
 import type { SendToWalletStore } from './types.js'
 
-export const useSendToWalletStore = createWithEqualityFn<SendToWalletStore>(
+export const sendToWalletStore = createWithEqualityFn<SendToWalletStore>(
   (set) => ({
     showSendToWallet: false,
     setSendToWallet: (value) =>
@@ -13,13 +13,16 @@ export const useSendToWalletStore = createWithEqualityFn<SendToWalletStore>(
   Object.is
 )
 
+export const useSendToWalletStore = <T>(
+  selector: (state: SendToWalletStore) => T
+): T => {
+  return sendToWalletStore(useShallow(selector))
+}
+
 export const useSendToWalletActions = () => {
-  const actions = useSendToWalletStore(
-    (store) => ({
-      setSendToWallet: store.setSendToWallet,
-    }),
-    shallow
-  )
+  const actions = useSendToWalletStore((store) => ({
+    setSendToWallet: store.setSendToWallet,
+  }))
 
   return actions
 }

package/src/stores/settings/useSettings.ts

@@ -1,19 +1,16 @@
-import { shallow } from 'zustand/shallow'
 import type { SettingsState } from './types.js'
 import { useSettingsStore } from './useSettingsStore.js'
 
 export const useSettings = <K extends keyof SettingsState>(
   keys: Array<K>
 ): Pick<SettingsState, (typeof keys)[number]> => {
-  return useSettingsStore(
-    (state) =>
-      keys.reduce(
-        (values, key) => {
-          values[key] = state[key]
-          return values
-        },
-        {} as Pick<SettingsState, (typeof keys)[number]>
-      ),
-    shallow
+  return useSettingsStore((state) =>
+    keys.reduce(
+      (values, key) => {
+        values[key] = state[key]
+        return values
+      },
+      {} as Pick<SettingsState, (typeof keys)[number]>
+    )
   )
 }

package/src/stores/settings/useSettingsActions.ts

@@ -1,5 +1,4 @@
 import { useCallback } from 'react'
-import { shallow } from 'zustand/shallow'
 import type { widgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { WidgetEvent } from '../../types/events.js'
@@ -47,17 +46,14 @@ const emitEventOnChange = <T extends (...args: any[]) => any>(
 
 export const useSettingsActions = () => {
   const emitter = useWidgetEvents()
-  const actions = useSettingsStore(
-    (state) => ({
-      setValue: state.setValue,
-      getValue: state.getValue,
-      getSettings: state.getSettings,
-      reset: state.reset,
-      setToolValue: state.setToolValue,
-      toggleToolKeys: state.toggleToolKeys,
-    }),
-    shallow
-  )
+  const actions = useSettingsStore((state) => ({
+    setValue: state.setValue,
+    getValue: state.getValue,
+    getSettings: state.getSettings,
+    reset: state.reset,
+    setToolValue: state.setToolValue,
+    toggleToolKeys: state.toggleToolKeys,
+  }))
 
   const setValueWithEmittedEvent = useCallback<ValueSetter<SettingsProps>>(
     (value, newValue) => {

package/src/stores/settings/useSettingsStore.ts

@@ -1,6 +1,7 @@
 /** biome-ignore-all lint/correctness/noUnusedVariables: allowed in this store */
 import type { StateCreator } from 'zustand'
 import { persist } from 'zustand/middleware'
+import { useShallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
 import type { SettingsProps, SettingsState } from './types.js'
 import { SettingsToolTypes } from './types.js'
@@ -28,7 +29,7 @@ export const defaultSettings: SettingsProps = {
   _enabledExchanges: {},
 }
 
-export const useSettingsStore = createWithEqualityFn<SettingsState>(
+export const settingsStore = createWithEqualityFn<SettingsState>(
   persist(
     (set, get) => ({
       ...defaultSettings,
@@ -176,3 +177,9 @@ export const useSettingsStore = createWithEqualityFn<SettingsState>(
   ) as StateCreator<SettingsState, [], [], SettingsState>,
   Object.is
 )
+
+export const useSettingsStore = <T>(
+  selector: (state: SettingsState) => T
+): T => {
+  return settingsStore(useShallow(selector))
+}

package/src/stores/settings/useSplitSubvariantStore.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext, useRef } from 'react'
+import { useShallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
 import type {
   SplitSubvariantProps,
@@ -47,7 +48,7 @@ export function useSplitSubvariantStore<T>(
   selector: (state: SplitSubvariantState) => T
 ): T {
   const useStore = useSplitSubvariantStoreContext()
-  return useStore(selector)
+  return useStore(useShallow(selector))
 }
 
 export const createSplitSubvariantStore = ({ state }: SplitSubvariantProps) =>