@lifi/widget 4.0.0-beta.8 → 4.0.0

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,15 +11,16 @@ 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) => {
+export const SDKClientProvider = ({
+  children,
+}: PropsWithChildren): JSX.Element => {
   const {
     sdkConfig,
     apiKey,
     integrator,
     feeConfig,
-    fee,
     referrer,
     routePriority,
     slippage,
@@ -30,7 +32,7 @@ export const SDKClientProvider = ({ children }: PropsWithChildren) => {
       apiKey,
       integrator: integrator ?? window?.location.hostname,
       routeOptions: {
-        fee: feeConfig?.fee || fee,
+        fee: feeConfig?.fee,
         referrer,
         order: routePriority,
         slippage,
@@ -44,7 +46,6 @@ export const SDKClientProvider = ({ children }: PropsWithChildren) => {
     apiKey,
     integrator,
     feeConfig,
-    fee,
     referrer,
     routePriority,
     slippage,

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, type PropsWithChildren, type ReactNode, useMemo } 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,7 +20,7 @@ interface WalletProviderProps extends PropsWithChildren {
 export const WalletProvider = ({
   children,
   providers,
-}: PropsWithChildren<WalletProviderProps>) => {
+}: PropsWithChildren<WalletProviderProps>): JSX.Element => {
   const { walletConfig } = useWidgetConfig()
   const { chains } = useAvailableChains()
   const { i18n } = useTranslation()

package/src/providers/WalletProvider/useExternalWalletProvider.ts

@@ -4,6 +4,7 @@ import {
   useEthereumContext,
   useSolanaContext,
   useSuiContext,
+  useTronContext,
 } from '@lifi/widget-provider'
 import { useMemo } from 'react'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
@@ -19,6 +20,7 @@ const internalChainTypes = [
   ChainType.SVM,
   ChainType.UTXO,
   ChainType.MVM,
+  ChainType.TVM,
 ]
 
 export function useExternalWalletProvider(): ExternalWalletProvider {
@@ -27,6 +29,7 @@ export function useExternalWalletProvider(): ExternalWalletProvider {
   const { isExternalContext: hasExternalSolanaContext } = useSolanaContext()
   const { isExternalContext: hasExternalBitcoinContext } = useBitcoinContext()
   const { isExternalContext: hasExternalSuiContext } = useSuiContext()
+  const { isExternalContext: hasExternalTronContext } = useTronContext()
   const data = useMemo(() => {
     const providers: ChainType[] = []
     if (hasExternalEthereumContext) {
@@ -41,11 +44,15 @@ export function useExternalWalletProvider(): ExternalWalletProvider {
     if (hasExternalSuiContext) {
       providers.push(ChainType.MVM)
     }
+    if (hasExternalTronContext) {
+      providers.push(ChainType.TVM)
+    }
     const hasExternalProvider =
       hasExternalEthereumContext ||
       hasExternalSolanaContext ||
       hasExternalBitcoinContext ||
-      hasExternalSuiContext
+      hasExternalSuiContext ||
+      hasExternalTronContext
 
     const useExternalWalletProvidersOnly =
       hasExternalProvider &&
@@ -63,6 +70,7 @@ export function useExternalWalletProvider(): ExternalWalletProvider {
     hasExternalSolanaContext,
     hasExternalBitcoinContext,
     hasExternalSuiContext,
+    hasExternalTronContext,
     walletConfig?.usePartialWalletManagement,
     walletConfig?.forceInternalWalletManagement,
   ])

package/src/stores/StoreProvider.tsx

@@ -1,13 +1,13 @@
 import type { PropsWithChildren } from 'react'
 import type { WidgetConfigProps } from '../types/widget.js'
-import { getSplitSubvariant } from '../utils/variant.js'
+import { getSplitMode } from '../utils/variant.js'
 import { BookmarkStoreProvider } from './bookmarks/BookmarkStore.js'
 import { ChainOrderStoreProvider } from './chains/ChainOrderStore.js'
 import { FormStoreProvider } from './form/FormStore.js'
 import { HeaderStoreProvider } from './header/useHeaderStore.js'
 import { PinnedTokensStoreProvider } from './pinnedTokens/PinnedTokensStore.js'
 import { RouteExecutionStoreProvider } from './routes/RouteExecutionStore.js'
-import { SplitSubvariantStoreProvider } from './settings/useSplitSubvariantStore.js'
+import { SplitModeStoreProvider } from './settings/useSplitModeStore.js'
 
 export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
   children,
@@ -15,10 +15,10 @@ export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
   formRef,
 }) => {
   return (
-    <SplitSubvariantStoreProvider
+    <SplitModeStoreProvider
       state={
-        config.subvariant === 'split'
-          ? getSplitSubvariant(config.subvariantOptions?.split)
+        config.mode === 'split'
+          ? getSplitMode(config.modeOptions?.split)
           : undefined
       }
     >
@@ -35,6 +35,6 @@ export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
           </PinnedTokensStoreProvider>
         </BookmarkStoreProvider>
       </HeaderStoreProvider>
-    </SplitSubvariantStoreProvider>
+    </SplitModeStoreProvider>
   )
 }

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,11 +1,10 @@
-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'
 import { useSwapOnly } from '../../hooks/useSwapOnly.js'
 import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { HiddenUI } from '../../types/widget.js'
 import { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'
 import { getDefaultValuesFromQueryString } from '../form/getDefaultValuesFromQueryString.js'
 import type { FormType } from '../form/types.js'
@@ -21,7 +20,7 @@ const ChainOrderStoreContext = createContext<ChainOrderStore | null>(null)
 export function ChainOrderStoreProvider({
   children,
   ...props
-}: PersistStoreProviderProps) {
+}: PersistStoreProviderProps): JSX.Element {
   const {
     chains: chainsConfig,
     hiddenUI,
@@ -33,7 +32,7 @@ export function ChainOrderStoreProvider({
   const { chains } = useChains()
   const { setFieldValue, getFieldValues } = useFieldActions()
   const swapOnly = useSwapOnly()
-  const { variant, subvariantOptions } = useWidgetConfig()
+  const { variant } = useWidgetConfig()
   const { externalChainTypes, useExternalWalletProvidersOnly } =
     useExternalWalletProvider()
 
@@ -77,9 +76,7 @@ export function ChainOrderStoreProvider({
 
         // Show "All networks" button if there are multiple networks
         const showAllNetworks =
-          filteredChains.length > 1 &&
-          !hiddenUI?.includes(HiddenUI.AllNetworks) &&
-          !isSwapTo
+          filteredChains.length > 1 && !hiddenUI?.allNetworks && !isSwapTo
 
         // Initialize the isAllNetworks with true if the tab is shown,
         // there is no config chain value and no url chain value
@@ -119,7 +116,7 @@ export function ChainOrderStoreProvider({
           )
         if (
           variant === 'wide' &&
-          !subvariantOptions?.wide?.disableChainSidebar &&
+          !hiddenUI?.chainSidebar &&
           firstAllowedPinnedChain
         ) {
           setFieldValue(`${key}Chain`, firstAllowedPinnedChain)
@@ -136,7 +133,6 @@ export function ChainOrderStoreProvider({
     setFieldValue,
     useExternalWalletProvidersOnly,
     variant,
-    subvariantOptions?.wide?.disableChainSidebar,
     hiddenUI,
     swapOnly,
     fromChainConfig,

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/useClearAmountFields.ts

@@ -0,0 +1,10 @@
+import { useCallback } from 'react'
+import { useFieldActions } from './useFieldActions.js'
+
+export const useClearAmountFields = (): (() => void) => {
+  const { setFieldValue } = useFieldActions()
+  return useCallback(() => {
+    setFieldValue('fromAmount', '')
+    setFieldValue('toAmount', '')
+  }, [setFieldValue])
+}

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,20 @@
 import { useImperativeHandle } from 'react'
+import { widgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
 import { formDefaultValues } from '../../stores/form/createFormStore.js'
-import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'
+import type { FormFieldChanged } from '../../types/events.js'
+import { WidgetEvent } from '../../types/events.js'
 import type { FormRef } from '../../types/widget.js'
-import type { FormStoreStore, GenericFormValue } from './types.js'
+import type {
+  FormFieldNames,
+  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 +34,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
@@ -53,10 +55,22 @@ export const useFormRef = (formStore: FormStoreStore, formRef?: FormRef) => {
           ? { isTouched: options?.setUrlSearchParam }
           : undefined
 
+        const oldValue = formStore
+          .getState()
+          .getFieldValues(fieldName as FormFieldNames)[0]
+
         formStore
           .getState()
           .setFieldValue(fieldName, sanitizedValue, fieldValueOptions)
+
+        if (sanitizedValue !== oldValue) {
+          widgetEvents.emit(WidgetEvent.FormFieldChanged, {
+            fieldName,
+            newValue: sanitizedValue,
+            oldValue,
+          } as FormFieldChanged)
+        }
       },
     }
-  }, [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 {
@@ -56,7 +58,7 @@ export function useSetHeaderHeight() {
 
 const createHeaderStore = () =>
   create<HeaderState>((set, get) => ({
-    headerHeight: 108, // a basic default height
+    headerHeight: 108, // default header height
     setAction: (element) => {
       set(() => ({
         element,

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(