@lifi/widget 4.0.0-beta.1 → 4.0.0-beta.11

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,6 +1,12 @@
 import { WalletManagementProviders } from '@lifi/wallet-management'
 import type { WidgetProviderProps } from '@lifi/widget-provider'
-import type { FC, PropsWithChildren, ReactNode } from 'react'
+import {
+  type FC,
+  type JSX,
+  type PropsWithChildren,
+  type ReactNode,
+  useMemo,
+} from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useInitializeSDKProviders } from '../../hooks/useInitializeSDKProviders.js'
@@ -14,24 +20,39 @@ interface WalletProviderProps extends PropsWithChildren {
 export const WalletProvider = ({
   children,
   providers,
-}: PropsWithChildren<WalletProviderProps>) => {
+}: PropsWithChildren<WalletProviderProps>): JSX.Element => {
   const { walletConfig } = useWidgetConfig()
   const { chains } = useAvailableChains()
   const { i18n } = useTranslation()
   const { useExternalWalletProvidersOnly, internalChainTypes } =
     useExternalWalletProvider()
 
-  // If all chain types are already managed externally (host app set up providers),
-  // skip re-composing — the contexts are already populated above us.
+  if (
+    !providers.length &&
+    !useExternalWalletProvidersOnly &&
+    process.env.NODE_ENV === 'development'
+  ) {
+    console.warn('No widget providers specified')
+  }
+
   const effectiveProviders = useExternalWalletProvidersOnly ? [] : providers
 
+  const walletManagementConfig = useMemo(
+    () => ({
+      locale: i18n.resolvedLanguage as never,
+      enabledChainTypes: internalChainTypes,
+      walletEcosystemsOrder: walletConfig?.walletEcosystemsOrder,
+    }),
+    [
+      i18n.resolvedLanguage,
+      internalChainTypes,
+      walletConfig?.walletEcosystemsOrder,
+    ]
+  )
+
   return (
     <WalletManagementProviders
-      config={{
-        locale: i18n.resolvedLanguage as never,
-        enabledChainTypes: internalChainTypes,
-        walletEcosystemsOrder: walletConfig?.walletEcosystemsOrder,
-      }}
+      config={walletManagementConfig}
       providers={effectiveProviders}
       chains={chains}
       forceInternalWalletManagement={
@@ -45,5 +66,5 @@ export const WalletProvider = ({
 
 const SDKProviderInitializer: FC<PropsWithChildren> = ({ children }) => {
   useInitializeSDKProviders()
-  return <>{children}</>
+  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,

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>

package/src/stores/form/useFormRef.ts

@@ -1,12 +1,13 @@
 import { useImperativeHandle } from 'react'
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
 import { formDefaultValues } from '../../stores/form/createFormStore.js'
-import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'
 import type { FormRef } from '../../types/widget.js'
 import type { FormStoreStore, GenericFormValue } from './types.js'
 
-export const useFormRef = (formStore: FormStoreStore, formRef?: FormRef) => {
-  const { setSendToWallet } = useSendToWalletActions()
+export const useFormRef = (
+  formStore: FormStoreStore,
+  formRef?: FormRef
+): void => {
   const { setSelectedBookmark } = useBookmarkActions()
 
   useImperativeHandle(formRef, () => {
@@ -26,12 +27,6 @@ export const useFormRef = (formStore: FormStoreStore, formRef?: FormRef) => {
           (isToAddressObj ? value?.address : value) ||
           formDefaultValues.toAddress
 
-        // sets the send to wallet button state to be open
-        // if there is an address to display
-        if (address) {
-          setSendToWallet(address)
-        }
-
         // we can assume that the toAddress has been passed as ToAddress object
         // and display it accordingly - this ensures that if a name is included
         // that it is displayed in the Send To Wallet form field correctly
@@ -58,5 +53,5 @@ export const useFormRef = (formStore: FormStoreStore, formRef?: FormRef) => {
           .setFieldValue(fieldName, sanitizedValue, fieldValueOptions)
       },
     }
-  }, [formStore, setSendToWallet, setSelectedBookmark])
+  }, [formStore, setSelectedBookmark])
 }

package/src/stores/form/useTouchedFields.ts

@@ -1,6 +1,7 @@
+import type { TouchedFields } from './types.js'
 import { useFormStore } from './useFormStore.js'
 
-export const useTouchedFields = () => {
+export const useTouchedFields = (): TouchedFields => {
   const touchedFields = useFormStore((store) => store.touchedFields)
 
   return touchedFields

package/src/stores/header/useHeaderStore.tsx

@@ -6,7 +6,9 @@ import type { HeaderState, HeaderStore } from './types.js'
 
 const HeaderStoreContext = createContext<HeaderStore | null>(null)
 
-export function HeaderStoreProvider({ children }: PersistStoreProviderProps) {
+export function HeaderStoreProvider({
+  children,
+}: PersistStoreProviderProps): any {
   const storeRef = useRef<HeaderStore>(null)
   if (!storeRef.current) {
     storeRef.current = createHeaderStore()
@@ -38,7 +40,7 @@ export function useHeaderStore<T>(selector: (state: HeaderState) => T): T {
 // As the header is position fixed its not in the document flow anymore.
 // 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() {
+export function useHeaderHeight(): any {
   const headerHeight = useHeaderStore((state) => state.headerHeight)
 
   return {
@@ -46,7 +48,7 @@ export function useHeaderHeight() {
   }
 }
 
-export function useSetHeaderHeight() {
+export function useSetHeaderHeight(): any {
   const setHeaderHeight = useHeaderStore((state) => state.setHeaderHeight)
 
   return {

package/src/stores/inputMode/useInputModeStore.ts

@@ -1,3 +1,4 @@
+import type { StoreApi, UseBoundStore } from 'zustand'
 import { create } from 'zustand'
 import type { FormTypeProps } from '../form/types.js'
 
@@ -9,21 +10,22 @@ interface InputModeState {
   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)
-  },
-}))
+export const useInputModeStore: UseBoundStore<StoreApi<InputModeState>> =
+  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/pinnedTokens/PinnedTokensStore.tsx

@@ -25,7 +25,7 @@ export const PinnedTokensStoreProvider: React.FC<PersistStoreProviderProps> = ({
 
 export function usePinnedTokensStore<T>(
   selector: (store: PinnedTokensState) => T
-) {
+): T {
   const useStore = useContext(PinnedTokensStoreContext)
 
   if (!useStore) {

package/src/stores/pinnedTokens/createPinnedTokensStore.ts

@@ -1,9 +1,12 @@
+import type { StoreApi, UseBoundStore } from 'zustand'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import type { PersistStoreProps } from '../types.js'
 import type { PinnedTokensState } from './types.js'
 
-export const createPinnedTokensStore = ({ namePrefix }: PersistStoreProps) =>
+export const createPinnedTokensStore = ({
+  namePrefix,
+}: PersistStoreProps): UseBoundStore<StoreApi<PinnedTokensState>> =>
   create<PinnedTokensState>()(
     persist(
       (set, get) => ({

package/src/stores/routes/RouteExecutionStore.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useRef } from 'react'
+import { createContext, type JSX, useContext, useRef } from 'react'
 import type { StoreApi, UseBoundStore } from 'zustand'
 import { useShallow } from 'zustand/shallow'
 import type { PersistStoreProviderProps } from '../types.js'
@@ -14,7 +14,7 @@ const RouteExecutionStoreContext = createContext<RouteExecutionStore | null>(
 export function RouteExecutionStoreProvider({
   children,
   ...props
-}: PersistStoreProviderProps) {
+}: PersistStoreProviderProps): JSX.Element {
   const storeRef = useRef<RouteExecutionStore>(null)
   if (!storeRef.current) {
     storeRef.current = createRouteExecutionStore(props)
@@ -26,7 +26,7 @@ export function RouteExecutionStoreProvider({
   )
 }
 
-export function useRouteExecutionStoreContext() {
+export function useRouteExecutionStoreContext(): any {
   const useStore = useContext(RouteExecutionStoreContext)
   if (!useStore) {
     throw new Error(