@lifi/widget 4.0.0-beta.9 → 4.0.0

package/src/hooks/useRoutes.ts

@@ -1,4 +1,4 @@
-import type { Route, Token } from '@lifi/sdk'
+import type { ExtendedChain, Route, Token } from '@lifi/sdk'
 import {
   ChainType,
   convertQuoteToRoute,
@@ -40,14 +40,27 @@ interface RoutesProps {
   observableRoute?: Route
 }
 
-export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
+export const useRoutes = ({
+  observableRoute,
+}: RoutesProps = {}): {
+  routes: Route[] | undefined
+  isLoading: boolean
+  isFetching: boolean
+  isFetched: boolean
+  dataUpdatedAt: number
+  refetchTime: number
+  refetch: () => void
+  fromChain: ExtendedChain | undefined
+  toChain: ExtendedChain | undefined
+  queryKey: readonly unknown[]
+  setReviewableRoute: (route: Route) => void
+} => {
   const {
-    subvariant,
-    subvariantOptions,
+    mode,
+    modeOptions,
     contractTool,
     bridges,
     exchanges,
-    fee,
     feeConfig,
     useRelayerRoutes,
     keyPrefix,
@@ -107,7 +120,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
   const hasAmount = Number(fromTokenAmount) > 0 || Number(toTokenAmount) > 0
 
   const contractCallQuoteEnabled: boolean =
-    subvariant === 'custom' ? Boolean(contractCalls && account.address) : true
+    mode === 'custom' ? Boolean(contractCalls && account.address) : true
 
   // When we bridge between ecosystems we need to be sure toAddress is set and has the same chainType as toChain
   // If toAddress is set, it must have the same chainType as toChain
@@ -164,11 +177,11 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
         allowedBridges,
         allowedExchanges,
         routePriority,
-        subvariant,
+        mode,
         allowSwitchChain,
         enabledRefuel && enabledAutoRefuel,
         gasRecommendationFromAmount,
-        feeConfig?.fee || fee,
+        feeConfig?.fee,
         disableMessageSigning,
         !!isBatchingSupported,
         observableRoute?.id,
@@ -191,13 +204,12 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
       allowedBridges,
       allowedExchanges,
       routePriority,
-      subvariant,
+      mode,
       allowSwitchChain,
       enabledRefuel,
       enabledAutoRefuel,
       gasRecommendationFromAmount,
       feeConfig?.fee,
-      fee,
       disableMessageSigning,
       isBatchingSupported,
       observableRoute?.id,
@@ -229,11 +241,11 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           allowedBridges,
           allowedExchanges,
           routePriority,
-          subvariant,
+          mode,
           allowSwitchChain,
           enabledRefuel,
           gasRecommendationFromAmount,
-          fee,
+          configuredFee,
           disableMessageSigning,
           isBatchingSupported,
           // _observableRouteId must be the last element in the query key
@@ -282,7 +294,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           slippage: formattedSlippage,
         })
 
-        if (subvariant === 'custom' && contractCalls && toAmount) {
+        if (mode === 'custom' && contractCalls && toAmount) {
           const contractCallQuote = await getContractCallsQuote(
             sdkClient,
             {
@@ -302,7 +314,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
               allowExchanges,
               toFallbackAddress: toAddress,
               slippage: formattedSlippage,
-              fee: calculatedFee || fee,
+              fee: calculatedFee || configuredFee,
             },
             { signal }
           )
@@ -310,7 +322,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           contractCallQuote.action.toToken = toToken!
 
           const customStep =
-            subvariant === 'custom'
+            mode === 'custom'
               ? contractCallQuote.includedSteps?.find(
                   (step) => step.type === 'custom'
                 )
@@ -332,11 +344,11 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
         }
 
         // Prevent sending a request for the same chain token combinations.
-        // Exception: proceed anyway if subvariant is custom and subvariantOptions is deposit
+        // Exception: proceed anyway if mode is custom and modeOptions custom type is deposit
         if (
           fromChainId === toChainId &&
           fromTokenAddress === toTokenAddress &&
-          !(subvariant === 'custom' && subvariantOptions?.custom === 'deposit')
+          !(mode === 'custom' && modeOptions?.custom?.type === 'deposit')
         ) {
           return
         }
@@ -375,7 +387,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
                     : undefined,
                 options: {
                   allowSwitchChain:
-                    subvariant === 'refuel' ? false : allowSwitchChain,
+                    mode === 'refuel' ? false : allowSwitchChain,
                   bridges:
                     allowBridges?.length || disabledBridges.length
                       ? {
@@ -396,7 +408,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
                       : undefined,
                   order: routePriority,
                   slippage: formattedSlippage,
-                  fee: calculatedFee || fee,
+                  fee: calculatedFee || configuredFee,
                   executionType: disableMessageSigning ? 'transaction' : 'all',
                 },
               },
@@ -421,7 +433,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
                     : undefined,
                 order: routePriority,
                 slippage: formattedSlippage,
-                fee: calculatedFee || fee,
+                fee: calculatedFee || configuredFee,
                 ...(allowBridges?.length || disabledBridges.length
                   ? {
                       allowBridges: allowBridges,

package/src/hooks/useScrollableContainer.ts

@@ -2,8 +2,8 @@ import { useCallback, useLayoutEffect, useState } from 'react'
 import { getScrollableContainer } from '../utils/elements.js'
 import { useDefaultElementId } from './useDefaultElementId.js'
 
-export const useGetScrollableContainer = () => {
-  const elementId = useDefaultElementId()
+export const useGetScrollableContainer = (): (() => HTMLElement | null) => {
+  const elementId = useDefaultElementId() ?? ''
   const getContainer = useCallback(
     () => getScrollableContainer(elementId),
     [elementId]
@@ -12,7 +12,9 @@ export const useGetScrollableContainer = () => {
   return getContainer
 }
 
-export const useScrollableContainer = (elementId: string) => {
+export const useScrollableContainer = (
+  elementId: string
+): HTMLElement | null => {
   const [containerElement, setContainerElement] = useState(() =>
     getScrollableContainer(elementId)
   )
@@ -25,18 +27,3 @@ export const useScrollableContainer = (elementId: string) => {
 
   return containerElement
 }
-
-export const useScrollableOverflowHidden = () => {
-  const elementId = useDefaultElementId()
-  useLayoutEffect(() => {
-    const element = getScrollableContainer(elementId)
-    if (element) {
-      element.style.overflowY = 'hidden'
-    }
-    return () => {
-      if (element) {
-        element.style.overflowY = 'auto'
-      }
-    }
-  }, [elementId])
-}

package/src/hooks/useSetContentHeight.ts

@@ -10,8 +10,8 @@ import { useDefaultElementId } from './useDefaultElementId.js'
 export const useSetContentHeight = (
   ref: RefObject<HTMLElement | null>,
   dependency?: unknown
-) => {
-  const elementId = useDefaultElementId()
+): void => {
+  const elementId = useDefaultElementId() ?? ''
   // biome-ignore lint/correctness/useExhaustiveDependencies: we use dependency to refresh height
   useLayoutEffect(() => {
     const relativeContainer = getRelativeContainer(elementId)

package/src/hooks/useSettingMonitor.ts

@@ -4,7 +4,19 @@ import { useSettingsStore } from '../stores/settings/SettingsStore.js'
 import { useSettingsActions } from '../stores/settings/useSettingsActions.js'
 import { useTools } from './useTools.js'
 
-export const useSettingMonitor = () => {
+export const useSettingMonitor = (): {
+  isBridgesChanged: boolean
+  isExchangesChanged: boolean
+  isSlippageChanged: boolean
+  isSlippageNotRecommended: boolean
+  isSlippageOutsideRecommendedLimits: boolean
+  isSlippageUnderRecommendedLimits: boolean
+  isRoutePriorityChanged: boolean
+  isGasPriceChanged: boolean
+  isCustomRouteSettings: boolean
+  isRouteSettingsWithWarnings: boolean
+  reset: () => void
+} => {
   const [
     disabledBridges,
     disabledExchanges,
@@ -27,10 +39,10 @@ export const useSettingMonitor = () => {
     : slippage !== defaultConfigurableSettings.slippage
 
   const isSlippageOutsideRecommendedLimits =
-    isSlippageChanged && slippage && Number(slippage) > 1
+    isSlippageChanged && !!slippage && Number(slippage) > 1
 
   const isSlippageUnderRecommendedLimits =
-    isSlippageChanged && slippage && Number(slippage) < 0.1
+    isSlippageChanged && !!slippage && Number(slippage) < 0.1
 
   const isSlippageNotRecommended = Boolean(
     isSlippageOutsideRecommendedLimits || isSlippageUnderRecommendedLimits

package/src/hooks/useSwapOnly.ts

@@ -1,6 +1,6 @@
-import { useSplitSubvariantStore } from '../stores/settings/useSplitSubvariantStore.js'
+import { useSplitModeStore } from '../stores/settings/useSplitModeStore.js'
 
-export const useSwapOnly = () => {
-  const state = useSplitSubvariantStore((state) => state.state)
+export const useSwapOnly = (): boolean => {
+  const state = useSplitModeStore((state) => state.state)
   return state === 'swap'
 }

package/src/hooks/useToAddressAutoPopulate.ts

@@ -4,7 +4,6 @@ import { useCallback } from 'react'
 import { useBookmarkActions } from '../stores/bookmarks/useBookmarkActions.js'
 import type { FormType } from '../stores/form/types.js'
 import { useFieldActions } from '../stores/form/useFieldActions.js'
-import { useSendToWalletActions } from '../stores/settings/useSendToWalletStore.js'
 import { useAvailableChains } from './useAvailableChains.js'
 
 type UpdateToAddressArgs = {
@@ -18,9 +17,10 @@ type UpdateToAddressArgs = {
 /**
  * Automatically populates toAddress field if bridging across ecosystems and compatible wallet is connected
  */
-export const useToAddressAutoPopulate = () => {
+export const useToAddressAutoPopulate = (): ((
+  args: UpdateToAddressArgs
+) => string | undefined) => {
   const { setFieldValue } = useFieldActions()
-  const { setSendToWallet } = useSendToWalletActions()
   const { setSelectedBookmark } = useBookmarkActions()
   const { getChainById } = useAvailableChains()
   const { accounts } = useAccount()
@@ -81,7 +81,6 @@ export const useToAddressAutoPopulate = () => {
           chainType: destinationAccount.chainType,
           isConnectedAccount: true,
         })
-        setSendToWallet(true)
         return destinationAccount.address
       }
     },
@@ -90,7 +89,6 @@ export const useToAddressAutoPopulate = () => {
       getChainById,
       setFieldValue,
       setSelectedBookmark,
-      setSendToWallet,
       getChainTypeFromAddress,
     ]
   )

package/src/hooks/useToAddressRequirements.ts

@@ -1,13 +1,24 @@
-import type { RouteExtended } from '@lifi/sdk'
+import type { ChainType, RouteExtended } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useEthereumContext } from '@lifi/widget-provider'
 import { useChain } from '../hooks/useChain.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
-import { HiddenUI, RequiredUI } from '../types/widget.js'
 import { useIsContractAddress } from './useIsContractAddress.js'
 
-export const useToAddressRequirements = (route?: RouteExtended) => {
+export const useToAddressRequirements = (
+  route?: RouteExtended
+): {
+  requiredToAddress: boolean
+  requiredToChainType: ChainType | undefined
+  accountNotDeployedAtDestination: boolean
+  accountDeployedAtDestination: boolean
+  toAddress: string | undefined
+  isFromContractAddress: boolean | undefined
+  isToContractAddress: boolean | undefined
+  isLoading: boolean
+  isFetched: boolean
+} => {
   const { requiredUI, hiddenUI } = useWidgetConfig()
   const [formFromChainId, formToChainId, formToAddress] = useFieldValues(
     'fromChain',
@@ -57,23 +68,26 @@ export const useToAddressRequirements = (route?: RouteExtended) => {
     fromChainId !== toChainId &&
     !fromContractCodeHasDelegationIndicator
 
-  const requiredToAddress =
+  const requiredToAddress = Boolean(
     (isDifferentChainType ||
       isCrossChainContractAddress ||
-      requiredUI?.includes(RequiredUI.ToAddress)) &&
-    !hiddenUI?.includes(HiddenUI.ToAddress)
+      requiredUI?.toAddress) &&
+      !hiddenUI?.toAddress
+  )
 
-  const accountNotDeployedAtDestination =
+  const accountNotDeployedAtDestination = Boolean(
     isFromContractAddress &&
-    !fromContractCodeHasDelegationIndicator &&
-    !isToContractAddress &&
-    fromAddress?.toLowerCase() === toAddress?.toLowerCase()
+      !fromContractCodeHasDelegationIndicator &&
+      !isToContractAddress &&
+      fromAddress?.toLowerCase() === toAddress?.toLowerCase()
+  )
 
-  const accountDeployedAtDestination =
+  const accountDeployedAtDestination = Boolean(
     isFromContractAddress &&
-    isToContractAddress &&
-    !fromContractCodeHasDelegationIndicator &&
-    fromAddress?.toLowerCase() === toAddress?.toLowerCase()
+      isToContractAddress &&
+      !fromContractCodeHasDelegationIndicator &&
+      fromAddress?.toLowerCase() === toAddress?.toLowerCase()
+  )
 
   return {
     requiredToAddress,

package/src/hooks/useToAddressReset.ts

@@ -4,19 +4,18 @@ import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useBookmarkActions } from '../stores/bookmarks/useBookmarkActions.js'
 import { useBookmarks } from '../stores/bookmarks/useBookmarks.js'
 import { useFieldActions } from '../stores/form/useFieldActions.js'
-import { useSendToWalletActions } from '../stores/settings/useSendToWalletStore.js'
-import { RequiredUI } from '../types/widget.js'
 
-export const useToAddressReset = () => {
+export const useToAddressReset = (): {
+  tryResetToAddress: (toChain: ExtendedChain) => void
+} => {
   const { requiredUI } = useWidgetConfig()
-  const { setFieldValue, isDirty } = useFieldActions()
+  const { setFieldValue } = useFieldActions()
   const { selectedBookmark } = useBookmarks()
   const { setSelectedBookmark } = useBookmarkActions()
-  const { setSendToWallet } = useSendToWalletActions()
 
   const tryResetToAddress = useCallback(
     (toChain: ExtendedChain) => {
-      const requiredToAddress = requiredUI?.includes(RequiredUI.ToAddress)
+      const requiredToAddress = requiredUI?.toAddress
 
       const bookmarkSatisfiesToChainType =
         selectedBookmark?.chainType === toChain?.chainType
@@ -24,30 +23,14 @@ export const useToAddressReset = () => {
       const shouldResetToAddress =
         !requiredToAddress && !bookmarkSatisfiesToChainType
 
-      // The toAddress field is required and always visible when bridging between
-      // different ecosystems (fromChain and toChain have different chain types).
       // We reset toAddress on each chain change if it's no longer required, ensuring that
-      // switching chain types doesn't leave a previously set toAddress value when
-      // the "Send to Wallet" field is hidden.
+      // switching chain types doesn't leave a stale toAddress from a different ecosystem.
       if (shouldResetToAddress) {
         setFieldValue('toAddress', '', { isTouched: true })
         setSelectedBookmark()
-        // If toAddress was auto-filled (e.g., when making cross-ecosystem bridging and compatible destination wallet was connected)
-        // and not manually edited by the user, we need to hide "Send to Wallet".
-        const isToAddressDirty = isDirty('toAddress')
-        if (!isToAddressDirty) {
-          setSendToWallet(false)
-        }
       }
     },
-    [
-      setFieldValue,
-      isDirty,
-      setSelectedBookmark,
-      setSendToWallet,
-      requiredUI,
-      selectedBookmark,
-    ]
+    [setFieldValue, setSelectedBookmark, requiredUI, selectedBookmark]
   )
 
   return {

package/src/hooks/useToken.ts

@@ -1,3 +1,4 @@
+import type { TokenExtended } from '@lifi/sdk'
 import { useMemo } from 'react'
 import { useTokenSearch } from './useTokenSearch.js'
 import { useTokens } from './useTokens.js'
@@ -6,7 +7,10 @@ export const useToken = (
   chainId?: number,
   tokenAddress?: string,
   latest?: boolean
-) => {
+): {
+  token: TokenExtended | undefined
+  isLoading: boolean
+} => {
   const { allTokens, isLoading: isTokensLoading } = useTokens()
 
   const token = useMemo(

package/src/hooks/useTokenAddressBalance.ts

@@ -1,4 +1,4 @@
-import type { TokenAmount } from '@lifi/sdk'
+import type { ExtendedChain, TokenAmount } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useChain } from './useChain.js'
 import { useToken } from './useToken.js'
@@ -7,7 +7,12 @@ import { useTokenBalance } from './useTokenBalance.js'
 export const useTokenAddressBalance = (
   chainId?: number,
   tokenAddress?: string
-) => {
+): {
+  token: TokenAmount
+  chain: ExtendedChain | undefined
+  isLoading: boolean
+  refetch: () => void
+} => {
   const { chain, isLoading: isChainLoading } = useChain(chainId)
   const { account } = useAccount({ chainType: chain?.chainType })
   const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress)

package/src/hooks/useTokenBalance.ts

@@ -12,7 +12,16 @@ import { getQueryKey } from '../utils/queries.js'
 
 const defaultRefetchInterval = 30_000
 
-export const useTokenBalance = (accountAddress?: string, token?: Token) => {
+export const useTokenBalance = (
+  accountAddress?: string,
+  token?: Token
+): {
+  token: TokenAmount | undefined
+  isLoading: boolean
+  refetch: () => void
+  refetchNewBalance: () => void
+  getTokenBalancesWithRetry: typeof getTokenBalancesWithRetry
+} => {
   const queryClient = useQueryClient()
   const { keyPrefix } = useWidgetConfig()
   const sdkClient = useSDKClient()

package/src/hooks/useTokenBalances.ts

@@ -3,7 +3,7 @@ import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { FormType } from '../stores/form/types.js'
 import { usePinnedTokensStore } from '../stores/pinnedTokens/PinnedTokensStore.js'
 import { useSettings } from '../stores/settings/useSettings.js'
-import { HiddenUI } from '../types/widget.js'
+import type { TokenAmount } from '../types/token.js'
 import { formatTokenPrice } from '../utils/format.js'
 import { isSearchMatch, processTokenBalances } from '../utils/tokenList.js'
 import { useAccountsBalancesData } from './useAccountsBalancesData.js'
@@ -15,7 +15,14 @@ export const useTokenBalances = (
   formType?: FormType,
   isAllNetworks?: boolean,
   search?: string
-) => {
+): {
+  tokens: TokenAmount[]
+  withCategories: boolean
+  withPinnedTokens: boolean
+  isTokensLoading: boolean
+  isSearchLoading: boolean
+  isBalanceLoading: boolean
+} => {
   const { hiddenUI } = useWidgetConfig()
   const {
     allTokens,
@@ -97,7 +104,7 @@ export const useTokenBalances = (
     )
 
     const hideSmallBalances =
-      !!smallBalanceThreshold && !hiddenUI?.includes(HiddenUI.HideSmallBalances)
+      !!smallBalanceThreshold && !hiddenUI?.hideSmallBalances
     const threshold = hideSmallBalances
       ? Number.parseFloat(smallBalanceThreshold)
       : undefined

package/src/hooks/useTokenBalancesQueries.ts

@@ -11,7 +11,11 @@ const defaultRefetchInterval = 32_000
 export const useTokenBalancesQueries = (
   accountsWithTokens?: Record<string, Record<number, TokenExtended[]>>,
   isBalanceLoadingEnabled?: boolean
-) => {
+): {
+  data: TokenAmount[] | undefined
+  isLoading: boolean
+  isError: boolean
+} => {
   const { keyPrefix } = useWidgetConfig()
   const sdkClient = useSDKClient()
   const firstLoadStartRef = useRef<number | null>(null)

package/src/hooks/useTokenRateText.ts

@@ -0,0 +1,55 @@
+import { formatUnits, type RouteExtended } from '@lifi/sdk'
+import type { MouseEventHandler } from 'react'
+import { useTranslation } from 'react-i18next'
+import { create } from 'zustand'
+
+interface TokenRateState {
+  isForward: boolean
+  toggleIsForward(): void
+}
+
+const useTokenRateStore = create<TokenRateState>((set) => ({
+  isForward: true,
+  toggleIsForward: () => set((state) => ({ isForward: !state.isForward })),
+}))
+
+export function useTokenRateText(route: RouteExtended): {
+  rateText: string
+  toggleRate: MouseEventHandler
+} {
+  const { t } = useTranslation()
+  const { isForward, toggleIsForward } = useTokenRateStore()
+
+  const lastStep = route.steps.at(-1)
+
+  const fromToken = {
+    ...route.fromToken,
+    amount: BigInt(route.fromAmount),
+  }
+  const toToken = {
+    ...(lastStep?.execution?.toToken ??
+      lastStep?.action.toToken ??
+      route.toToken),
+    amount: lastStep?.execution?.toAmount
+      ? BigInt(lastStep.execution.toAmount)
+      : BigInt(route.toAmount),
+  }
+
+  const fromToRate =
+    Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals)) /
+    Number.parseFloat(formatUnits(fromToken.amount!, fromToken.decimals))
+  const toFromRate =
+    Number.parseFloat(formatUnits(fromToken.amount!, fromToken.decimals)) /
+    Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals))
+
+  const rateText = isForward
+    ? `1 ${fromToken.symbol} ≈ ${t('format.tokenAmount', { value: fromToRate })} ${toToken.symbol}`
+    : `1 ${toToken.symbol} ≈ ${t('format.tokenAmount', { value: toFromRate })} ${fromToken.symbol}`
+
+  const toggleRate: MouseEventHandler = (e) => {
+    e.stopPropagation()
+    toggleIsForward()
+  }
+
+  return { rateText: rateText, toggleRate: toggleRate }
+}

package/src/hooks/useTokenSearch.ts

@@ -17,7 +17,10 @@ export const useTokenSearch = (
   tokenQuery?: string,
   enabled?: boolean,
   formType?: FormType
-) => {
+): {
+  token: TokenExtended | undefined
+  isLoading: boolean
+} => {
   const queryClient = useQueryClient()
   const { tokens: configTokens, keyPrefix } = useWidgetConfig()
   const sdkClient = useSDKClient()

package/src/hooks/useTokens.ts

@@ -2,6 +2,7 @@ import {
   ChainType,
   getToken,
   getTokens,
+  type TokenExtended,
   type TokensExtendedResponse,
 } from '@lifi/sdk'
 import { useChainTypeFromAddress } from '@lifi/widget-provider'
@@ -25,7 +26,11 @@ export const useTokens = (
   formType?: FormType,
   search?: string,
   chainId?: number
-) => {
+): {
+  allTokens: Record<number, TokenExtended[]> | undefined
+  isLoading: boolean
+  isSearchLoading: boolean
+} => {
   const {
     tokens: configTokens,
     chains: chainsConfig,
@@ -43,6 +48,7 @@ export const useTokens = (
         ChainType.SVM,
         ChainType.UTXO,
         ChainType.MVM,
+        ChainType.TVM,
       ].filter((chainType) => isItemAllowed(chainType, chainsConfig?.types))
 
       const tokensResponse: TokensExtendedResponse = await getTokens(
@@ -85,6 +91,7 @@ export const useTokens = (
         ChainType.SVM,
         ChainType.UTXO,
         ChainType.MVM,
+        ChainType.TVM,
       ].filter((chainType) => isItemAllowed(chainType, chainsConfig?.types))
 
       const tokensResponse: TokensExtendedResponse = await getTokens(

package/src/hooks/useTools.ts

@@ -6,7 +6,7 @@ import { useSettingsStoreContext } from '../stores/settings/SettingsStore.js'
 import { getConfigItemSets, isItemAllowedForSets } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 
-export const useTools = () => {
+export const useTools = (): { tools: ToolsResponse | undefined } => {
   const { bridges, exchanges, keyPrefix } = useWidgetConfig()
   const settingsStore = useSettingsStoreContext()
   const sdkClient = useSDKClient()

package/src/hooks/useTransactionDetails.ts

@@ -11,7 +11,12 @@ import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { getQueryKey } from '../utils/queries.js'
 
-export const useTransactionDetails = (transactionHash?: string) => {
+export const useTransactionDetails = (
+  transactionHash?: string
+): {
+  transaction: StatusResponse | undefined
+  isLoading: boolean
+} => {
   const { account, accounts } = useAccount()
   const queryClient = useQueryClient()
   const { keyPrefix } = useWidgetConfig()