@lifi/widget 4.0.0-alpha.3 → 4.0.0-alpha.5

package/src/pages/TransactionPage/StatusBottomSheet.style.tsx

@@ -1,5 +1,6 @@
 import type { Theme } from '@mui/material'
 import { Box, styled } from '@mui/material'
+import type React from 'react'
 import { RouteExecutionStatus } from '../../stores/routes/types.js'
 
 type StatusColor = RouteExecutionStatus | 'warning'
@@ -8,14 +9,14 @@ const getStatusColor = (status: StatusColor, theme: Theme) => {
   switch (status) {
     case RouteExecutionStatus.Done:
       return {
-        color: theme.vars.palette.success.mainChannel,
+        color: theme.vars.palette.success.main,
         alpha: 0.12,
         lightDarken: 0,
         darkDarken: 0,
       }
     case RouteExecutionStatus.Failed:
       return {
-        color: theme.vars.palette.error.mainChannel,
+        color: theme.vars.palette.error.main,
         alpha: 0.12,
         lightDarken: 0,
         darkDarken: 0,
@@ -24,14 +25,14 @@ const getStatusColor = (status: StatusColor, theme: Theme) => {
     case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:
     case 'warning':
       return {
-        color: theme.vars.palette.warning.mainChannel,
+        color: theme.vars.palette.warning.main,
         alpha: 0.48,
         lightDarken: 0.32,
         darkDarken: 0,
       }
     default:
       return {
-        color: theme.vars.palette.primary.mainChannel,
+        color: theme.vars.palette.primary.main,
         alpha: 0.12,
         lightDarken: 0,
         darkDarken: 0,
@@ -39,36 +40,42 @@ const getStatusColor = (status: StatusColor, theme: Theme) => {
   }
 }
 
-export const CenterContainer = styled(Box)(() => ({
+export const CenterContainer: React.FC<
+  React.ComponentProps<typeof Box> & { status?: StatusColor }
+> = styled(Box)(() => ({
   display: 'grid',
   placeItems: 'center',
   position: 'relative',
 }))
 
-export const IconCircle = styled(Box, {
+export const IconCircle: React.FC<
+  React.ComponentProps<typeof Box> & { status?: StatusColor }
+> = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'status',
-})<{ status: StatusColor }>(({ theme, status }) => {
-  const statusConfig = getStatusColor(status, theme)
+})<{ status?: StatusColor }>(
+  ({ theme, status = RouteExecutionStatus.Idle }) => {
+    const statusConfig = getStatusColor(status, theme)
 
-  return {
-    backgroundColor: `rgba(${statusConfig.color} / ${statusConfig.alpha})`,
-    borderRadius: '50%',
-    width: 72,
-    height: 72,
-    display: 'grid',
-    position: 'relative',
-    placeItems: 'center',
-    '& > svg': {
-      color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.lightDarken) * 100}%, black)`,
-      width: 36,
-      height: 36,
-    },
-    ...theme.applyStyles('dark', {
+    return {
+      backgroundColor: `color-mix(in srgb, ${statusConfig.color} ${statusConfig.alpha * 100}%, transparent)`,
+      borderRadius: '50%',
+      width: 72,
+      height: 72,
+      display: 'grid',
+      position: 'relative',
+      placeItems: 'center',
       '& > svg': {
-        color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.darkDarken) * 100}%, black)`,
+        color: `color-mix(in srgb, ${statusConfig.color} ${(1 - statusConfig.lightDarken) * 100}%, black)`,
         width: 36,
         height: 36,
       },
-    }),
+      ...theme.applyStyles('dark', {
+        '& > svg': {
+          color: `color-mix(in srgb, ${statusConfig.color} ${(1 - statusConfig.darkDarken) * 100}%, black)`,
+          width: 36,
+          height: 36,
+        },
+      }),
+    }
   }
-})
+)

package/src/pages/TransactionPage/StatusBottomSheet.tsx

@@ -1,3 +1,4 @@
+import type { ExecutionActionType } from '@lifi/sdk'
 import Done from '@mui/icons-material/Done'
 import ErrorRounded from '@mui/icons-material/ErrorRounded'
 import InfoRounded from '@mui/icons-material/InfoRounded'
@@ -184,9 +185,13 @@ const StatusBottomSheetContent: React.FC<StatusBottomSheetContentProps> = ({
       if (!step) {
         break
       }
-      const action = step.execution?.actions.find(
+      const action = step.execution?.actions?.find(
         (action) => action.status === 'FAILED'
-      )
+      ) || {
+        status: 'FAILED',
+        type: 'EXECUTION' as ExecutionActionType,
+        error: step.execution?.error,
+      } // synthetic action to represent a failed execution with no actions
       const actionMessage = getErrorMessage(t, getChainById, step, action)
       title = actionMessage.title
       failedMessage = actionMessage.message

package/src/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -1,7 +1,7 @@
 import type { Route } from '@lifi/sdk'
 import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Box, Button, Typography } from '@mui/material'
-import type { RefObject } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'
 import { forwardRef, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
@@ -18,25 +18,26 @@ interface TokenValueBottomSheetProps {
   onCancel?(): void
 }
 
-export const TokenValueBottomSheet = forwardRef<
-  BottomSheetBase,
-  TokenValueBottomSheetProps
->(({ route, onContinue, onCancel }, ref) => {
-  const handleCancel = () => {
-    ;(ref as RefObject<BottomSheetBase>).current?.close()
-    onCancel?.()
-  }
+export const TokenValueBottomSheet: ForwardRefExoticComponent<
+  TokenValueBottomSheetProps & RefAttributes<BottomSheetBase>
+> = forwardRef<BottomSheetBase, TokenValueBottomSheetProps>(
+  ({ route, onContinue, onCancel }, ref) => {
+    const handleCancel = () => {
+      ;(ref as RefObject<BottomSheetBase>).current?.close()
+      onCancel?.()
+    }
 
-  return (
-    <BottomSheet ref={ref} onClose={onCancel}>
-      <TokenValueBottomSheetContent
-        route={route}
-        onContinue={onContinue}
-        onCancel={handleCancel}
-      />
-    </BottomSheet>
-  )
-})
+    return (
+      <BottomSheet ref={ref} onClose={onCancel}>
+        <TokenValueBottomSheetContent
+          route={route}
+          onContinue={onContinue}
+          onCancel={handleCancel}
+        />
+      </BottomSheet>
+    )
+  }
+)
 
 const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
   route,

package/src/pages/TransactionPage/TransactionPage.tsx

@@ -2,7 +2,7 @@ import type { ExchangeRateUpdateParams } from '@lifi/sdk'
 import Delete from '@mui/icons-material/Delete'
 import { Box, Button, Tooltip } from '@mui/material'
 import { useLocation, useNavigate } from '@tanstack/react-router'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { type JSX, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'
@@ -35,7 +35,7 @@ import {
   getTokenValueLossThreshold,
 } from './utils.js'
 
-export const TransactionPage = () => {
+export const TransactionPage = (): JSX.Element | null => {
   const { t } = useTranslation()
   const { setFieldValue } = useFieldActions()
   const emitter = useWidgetEvents()
@@ -236,7 +236,7 @@ export const TransactionPage = () => {
             />
             {status === RouteExecutionStatus.Failed ? (
               <Tooltip
-                title={t('button.removeTransaction')}
+                title={t('button.clearTransaction')}
                 placement="bottom-end"
               >
                 <Button

package/src/pages/TransactionPage/utils.ts

@@ -3,7 +3,7 @@ export const calculateValueLossPercentage = (
   toAmountUSD: number,
   gasCostUSD: number,
   feeCostUSD: number
-) => {
+): number => {
   return Number.parseFloat(
     (
       (toAmountUSD / (fromAmountUSD + gasCostUSD + feeCostUSD) - 1) *
@@ -17,7 +17,7 @@ export const getTokenValueLossThreshold = (
   toAmountUSD: number,
   gasCostUSD: number,
   feeCostUSD: number
-) => {
+): boolean => {
   if (!fromAmountUSD || !toAmountUSD) {
     return false
   }

package/src/providers/I18nProvider/I18nProvider.tsx

@@ -83,7 +83,6 @@ export const I18nProvider: React.FC<React.PropsWithChildren> = ({
         caches: [],
       },
       returnEmptyString: false,
-      showSupportNotice: false,
     })
 
     i18n.init()

package/src/providers/I18nProvider/i18n.ts

@@ -5,7 +5,7 @@ import type { LanguageKey, LanguageResource, PartialResource } from './types.js'
 export async function loadLocale(
   lng: LanguageKey,
   customLanguageResource?: PartialResource<LanguageResource>
-) {
+): Promise<LanguageResource> {
   let languageResource: LanguageResource
   try {
     const languageResourceModule = await import(`../../i18n/${lng}.json`)
@@ -19,7 +19,7 @@ export async function loadLocale(
 export function mergeWithLanguageResources(
   languageResource: LanguageResource,
   customLanguageResource?: PartialResource<LanguageResource>
-) {
+): LanguageResource {
   return customLanguageResource
     ? deepMerge(languageResource, customLanguageResource)
     : languageResource

package/src/providers/SDKClientProvider.tsx

@@ -1,6 +1,7 @@
 import { createClient, type SDKClient } from '@lifi/sdk'
 import {
   createContext,
+  type JSX,
   type PropsWithChildren,
   useContext,
   useMemo,
@@ -10,28 +11,47 @@ import { useWidgetConfig } from './WidgetProvider/WidgetProvider.js'
 
 const SDKClientContext = createContext<SDKClient>({} as SDKClient)
 
-export const useSDKClient = () => useContext(SDKClientContext)
+export const useSDKClient = (): SDKClient => useContext(SDKClientContext)
 
-export const SDKClientProvider = ({ children }: PropsWithChildren) => {
-  const widgetConfig = useWidgetConfig()
+export const SDKClientProvider = ({
+  children,
+}: PropsWithChildren): JSX.Element => {
+  const {
+    sdkConfig,
+    apiKey,
+    integrator,
+    feeConfig,
+    fee,
+    referrer,
+    routePriority,
+    slippage,
+  } = useWidgetConfig()
 
   const client: SDKClient = useMemo(() => {
     return createClient({
-      ...widgetConfig.sdkConfig,
-      apiKey: widgetConfig.apiKey,
-      integrator: widgetConfig.integrator ?? window?.location.hostname,
+      ...sdkConfig,
+      apiKey,
+      integrator: integrator ?? window?.location.hostname,
       routeOptions: {
-        fee: widgetConfig.feeConfig?.fee || widgetConfig.fee,
-        referrer: widgetConfig.referrer,
-        order: widgetConfig.routePriority,
-        slippage: widgetConfig.slippage,
-        ...widgetConfig.sdkConfig?.routeOptions,
+        fee: feeConfig?.fee || fee,
+        referrer,
+        order: routePriority,
+        slippage,
+        ...sdkConfig?.routeOptions,
       },
       disableVersionCheck: true,
       widgetVersion: version,
-      // debug: true,
     })
-  }, [widgetConfig])
+  }, [
+    sdkConfig,
+    apiKey,
+    integrator,
+    feeConfig,
+    fee,
+    referrer,
+    routePriority,
+    slippage,
+  ])
 
   return (
     <SDKClientContext.Provider value={client}>

package/src/providers/WalletProvider/WalletProvider.tsx

@@ -1,12 +1,11 @@
-import type { WalletManagementConfig } from '@lifi/wallet-management'
-import { WalletManagementProvider } from '@lifi/wallet-management'
+import { WalletManagementProviders } from '@lifi/wallet-management'
 import type { WidgetProviderProps } from '@lifi/widget-provider'
 import {
   type FC,
+  type JSX,
   type PropsWithChildren,
   type ReactNode,
   useMemo,
-  useRef,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
@@ -21,67 +20,51 @@ interface WalletProviderProps extends PropsWithChildren {
 export const WalletProvider = ({
   children,
   providers,
-}: PropsWithChildren<WalletProviderProps>) => {
+}: PropsWithChildren<WalletProviderProps>): JSX.Element => {
   const { walletConfig } = useWidgetConfig()
   const { chains } = useAvailableChains()
-
-  const prevProvidersRef = useRef(providers)
-
-  // Memoize providers to maintain referential stability and prevent remounts
-  const memoizedProviders = useMemo(() => {
-    if (
-      prevProvidersRef.current.length === providers.length &&
-      prevProvidersRef.current.every(
-        (provider, index) => provider === providers[index]
-      )
-    ) {
-      return prevProvidersRef.current
-    }
-    prevProvidersRef.current = providers
-    return providers
-  }, [providers])
-
-  const baseContent = <WalletMenuProvider>{children}</WalletMenuProvider>
-
-  return memoizedProviders.reduceRight(
-    (acc, ProviderComponent) => (
-      <ProviderComponent
-        key={ProviderComponent.name}
-        forceInternalWalletManagement={
-          walletConfig?.forceInternalWalletManagement
-        }
-        chains={chains ?? []}
-      >
-        {acc}
-      </ProviderComponent>
-    ),
-    baseContent
-  )
-}
-
-const WalletMenuProvider: FC<PropsWithChildren> = ({ children }) => {
-  const { walletConfig } = useWidgetConfig()
   const { i18n } = useTranslation()
-  const { internalChainTypes } = useExternalWalletProvider()
+  const { useExternalWalletProvidersOnly, internalChainTypes } =
+    useExternalWalletProvider()
 
-  // Initialize SDK client with providers wrapping the wallet menu provider
-  useInitializeSDKProviders()
+  if (
+    !providers.length &&
+    !useExternalWalletProvidersOnly &&
+    process.env.NODE_ENV === 'development'
+  ) {
+    console.warn('No widget providers specified')
+  }
 
-  const config: WalletManagementConfig = useMemo(() => {
-    return {
+  const effectiveProviders = useExternalWalletProvidersOnly ? [] : providers
+
+  const walletManagementConfig = useMemo(
+    () => ({
       locale: i18n.resolvedLanguage as never,
       enabledChainTypes: internalChainTypes,
       walletEcosystemsOrder: walletConfig?.walletEcosystemsOrder,
-    }
-  }, [
-    i18n.resolvedLanguage,
-    internalChainTypes,
-    walletConfig?.walletEcosystemsOrder,
-  ])
+    }),
+    [
+      i18n.resolvedLanguage,
+      internalChainTypes,
+      walletConfig?.walletEcosystemsOrder,
+    ]
+  )
 
   return (
-    <WalletManagementProvider config={config}>
-      {children}
-    </WalletManagementProvider>
+    <WalletManagementProviders
+      config={walletManagementConfig}
+      providers={effectiveProviders}
+      chains={chains}
+      forceInternalWalletManagement={
+        walletConfig?.forceInternalWalletManagement
+      }
+    >
+      <SDKProviderInitializer>{children}</SDKProviderInitializer>
+    </WalletManagementProviders>
   )
 }
+
+const SDKProviderInitializer: FC<PropsWithChildren> = ({ children }) => {
+  useInitializeSDKProviders()
+  return children
+}

package/src/stores/bookmarks/BookmarkStore.tsx

@@ -25,7 +25,7 @@ export const BookmarkStoreProvider: React.FC<PersistStoreProviderProps> = ({
   )
 }
 
-export function useBookmarkStore<T>(selector: (store: BookmarkState) => T) {
+export function useBookmarkStore<T>(selector: (store: BookmarkState) => T): T {
   const useStore = useContext(BookmarkStoreContext)
 
   if (!useStore) {

package/src/stores/bookmarks/createBookmarkStore.ts

@@ -1,3 +1,4 @@
+import type { StoreApi, UseBoundStore } from 'zustand'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import type { ToAddress } from '../../types/widget.js'
@@ -12,7 +13,7 @@ interface PersistBookmarkProps extends PersistStoreProps {
 export const createBookmarksStore = ({
   namePrefix,
   toAddress,
-}: PersistBookmarkProps) =>
+}: PersistBookmarkProps): UseBoundStore<StoreApi<BookmarkState>> =>
   create<BookmarkState>()(
     persist(
       (set, get) => ({

package/src/stores/bookmarks/useBookmarkActions.ts

@@ -1,7 +1,7 @@
 import { useBookmarkStore } from './BookmarkStore.js'
 import type { BookmarkActions } from './types.js'
 
-export const useBookmarkActions = () => {
+export const useBookmarkActions = (): BookmarkActions => {
   const actions = useBookmarkStore<BookmarkActions>((store) => ({
     getBookmark: store.getBookmark,
     addBookmark: store.addBookmark,

package/src/stores/chains/ChainOrderStore.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useRef } from 'react'
+import { createContext, type JSX, useContext, useEffect, useRef } from 'react'
 import type { StoreApi, UseBoundStore } from 'zustand'
 import { useShallow } from 'zustand/shallow'
 import { useChains } from '../../hooks/useChains.js'
@@ -21,7 +21,7 @@ const ChainOrderStoreContext = createContext<ChainOrderStore | null>(null)
 export function ChainOrderStoreProvider({
   children,
   ...props
-}: PersistStoreProviderProps) {
+}: PersistStoreProviderProps): JSX.Element {
   const {
     chains: chainsConfig,
     hiddenUI,
@@ -99,6 +99,14 @@ export function ChainOrderStoreProvider({
           setFieldValue('toChain', fromChainValue)
         }
 
+        // When "All Networks" is active, don't auto-select a chain from the
+        // persisted chain order. This prevents stale cross-ecosystem selections
+        // (e.g. EVM from + Solana to) from triggering the "destination wallet
+        // address required" message after a page refresh.
+        if (initialIsAllNetworks) {
+          return
+        }
+
         const [chainValue] = getFieldValues(`${key}Chain`)
         if (chainValue) {
           return

package/src/stores/chains/createChainOrderStore.ts

@@ -1,3 +1,4 @@
+import type { StoreApi, UseBoundStore } from 'zustand'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { widgetEvents } from '../../hooks/useWidgetEvents.js'
@@ -7,17 +8,19 @@ import type { ChainOrderState } from './types.js'
 
 // (10 tiles: 9 + 1 for "All chains")
 export const maxGridItemsToShow = 10
-export const maxChainsToShow = maxGridItemsToShow - 1
+export const maxChainsToShow: number = maxGridItemsToShow - 1
 // If there are more than maxChainsToShow chains to show,
 // -1 tile to show a button "+ N" more chains
-export const maxChainsToOrder = maxChainsToShow - 1
+export const maxChainsToOrder: number = maxChainsToShow - 1
 
 const defaultChainState = {
   from: [],
   to: [],
 }
 
-export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
+export const createChainOrderStore = ({
+  namePrefix,
+}: PersistStoreProps): UseBoundStore<StoreApi<ChainOrderState>> =>
   create<ChainOrderState>()(
     persist(
       (set, get) => ({

package/src/stores/form/FormStoreContext.ts

@@ -1,4 +1,5 @@
-import { createContext } from 'react'
+import { type Context, createContext } from 'react'
 import type { FormStoreStore } from './types.js'
 
-export const FormStoreContext = createContext<FormStoreStore | null>(null)
+export const FormStoreContext: Context<FormStoreStore | null> =
+  createContext<FormStoreStore | null>(null)

package/src/stores/form/FormUpdater.tsx

@@ -3,7 +3,6 @@ import { useEffect } from 'react'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
 import { formDefaultValues } from '../../stores/form/createFormStore.js'
-import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'
 import type { DefaultValues } from './types.js'
 import { useFieldActions } from './useFieldActions.js'
 
@@ -12,7 +11,6 @@ export const FormUpdater: React.FC<{
 }> = ({ reactiveFormValues }) => {
   const { toAddress } = useWidgetConfig()
   const { account } = useAccount()
-  const { setSendToWallet } = useSendToWalletActions()
   const { setSelectedBookmark } = useBookmarkActions()
   const { setUserAndDefaultValues } = useFieldActions()
 
@@ -20,9 +18,6 @@ export const FormUpdater: React.FC<{
   // Includes special logic for chain fields, where account.chainId is only a fallback and not a direct reactivity source.
   // biome-ignore lint/correctness/useExhaustiveDependencies: account.chainId is used as a fallback only and does not need to be a dependency for reactivity.
   useEffect(() => {
-    if (reactiveFormValues.toAddress) {
-      setSendToWallet(true)
-    }
     if (toAddress) {
       setSelectedBookmark(toAddress)
     }
@@ -34,7 +29,6 @@ export const FormUpdater: React.FC<{
     toAddress,
     reactiveFormValues,
     setUserAndDefaultValues,
-    setSendToWallet,
     setSelectedBookmark,
   ])
 

package/src/stores/form/URLSearchParamsBuilder.tsx

@@ -2,7 +2,6 @@ import { useLocation } from '@tanstack/react-router'
 import { useEffect } from 'react'
 import { useAddressValidation } from '../../hooks/useAddressValidation.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'
 import { useBookmarkActions } from '../bookmarks/useBookmarkActions.js'
 import type { FormFieldNames } from '../form/types.js'
 import { useFieldActions } from '../form/useFieldActions.js'
@@ -23,7 +22,6 @@ export const URLSearchParamsBuilder = () => {
   const { pathname } = useLocation()
   const touchedFields = useTouchedFields()
   const values = useFieldValues(...formValueKeys)
-  const { setSendToWallet } = useSendToWalletActions()
   const { setSelectedBookmark, addRecentWallet } = useBookmarkActions()
   const { validateAddress } = useAddressValidation()
   const { buildUrl } = useWidgetConfig()
@@ -58,7 +56,6 @@ export const URLSearchParamsBuilder = () => {
             setUserAndDefaultValues({ toAddress })
             setSelectedBookmark(bookmark)
             addRecentWallet(bookmark)
-            setSendToWallet(true)
           }
         } catch (_) {
           // Address validation failed
@@ -70,7 +67,6 @@ export const URLSearchParamsBuilder = () => {
     initializeFromAddress()
   }, [
     setUserAndDefaultValues,
-    setSendToWallet,
     validateAddress,
     setSelectedBookmark,
     addRecentWallet,

package/src/stores/form/createFormStore.ts

@@ -1,3 +1,4 @@
+import type { StoreApi, UseBoundStore } from 'zustand'
 import { create } from 'zustand'
 
 import type {
@@ -67,7 +68,9 @@ const mergeDefaultFormValues = (
     { ...valuesToFormValues(formDefaultValues) }
   )
 
-export const createFormStore = (defaultValues?: DefaultValues) =>
+export const createFormStore = (
+  defaultValues?: DefaultValues
+): UseBoundStore<StoreApi<FormValuesState>> =>
   create<FormValuesState>((set, get) => {
     const _defaultValues = valuesToFormValues({
       ...formDefaultValues,

package/src/stores/form/useFieldActions.ts

@@ -11,7 +11,7 @@ import type {
 } from './types.js'
 import { useFormStore } from './useFormStore.js'
 
-export const useFieldActions = () => {
+export const useFieldActions = (): FormActions => {
   const emitter = useWidgetEvents()
   const actions = useFormStore<FormActions>((store) => ({
     getFieldValues: store.getFieldValues,
@@ -81,7 +81,12 @@ export const useFieldActions = () => {
   )
 
   return {
-    ...actions,
+    getFieldValues: actions.getFieldValues,
+    isTouched: actions.isTouched,
+    isDirty: actions.isDirty,
+    resetField: actions.resetField,
+    setAsTouched: actions.setAsTouched,
+    setDefaultValues: actions.setDefaultValues,
     setFieldValue: setFieldValueWithEmittedEvents,
     setUserAndDefaultValues: setUserAndDefaultValuesWithEmittedEvents,
   }

package/src/stores/form/useFieldValues.ts

@@ -2,7 +2,9 @@ import type { FormFieldArray, FormFieldNames } from './types.js'
 import { useFormStore } from './useFormStore.js'
 
 // We should return a strongly-typed array based on the specific field names we pass to the function.
-export const useFieldValues = <T extends FormFieldNames[]>(...names: T) => {
+export const useFieldValues = <T extends FormFieldNames[]>(
+  ...names: T
+): FormFieldArray<T> => {
   const values = useFormStore(
     (store) =>
       names.map((name) => store.userValues[name]?.value) as FormFieldArray<T>