@lifi/widget 4.0.0-alpha.4 → 4.0.0-alpha.6

package/src/hooks/useLanguages.ts

@@ -11,7 +11,11 @@ import { useSettings } from '../stores/settings/useSettings.js'
 import { useSettingsActions } from '../stores/settings/useSettingsActions.js'
 import { getConfigItemSets, isItemAllowedForSets } from '../utils/item.js'
 
-export const useLanguages = () => {
+export const useLanguages = (): {
+  availableLanguages: LanguageKey[]
+  selectedLanguageCode: LanguageKey | string
+  setLanguageWithCode: (languageCode: LanguageKey) => void
+} => {
   const { i18n } = useTranslation()
   const { languages: languagesConfig, languageResources } = useWidgetConfig()
   const { language } = useSettings(['language'])
@@ -82,7 +86,7 @@ export const useLanguages = () => {
     : languagesConfig?.default || 'en'
 
   return {
-    availableLanguages: sortedLanguages,
+    availableLanguages: sortedLanguages as LanguageKey[],
     selectedLanguageCode: selectedLanguageCode,
     setLanguageWithCode: handleLanguageChange,
   }

package/src/hooks/useListHeight.ts

@@ -61,8 +61,8 @@ const minMobileListHeight = 160
 export const useListHeight = ({
   listParentRef,
   headerRef,
-}: UseContentHeightProps) => {
-  const elementId = useDefaultElementId()
+}: UseContentHeightProps): { listHeight: number } => {
+  const elementId = useDefaultElementId() ?? ''
   const [contentHeight, setContentHeight] = useState<number>(0)
   const theme = useTheme()
 

package/src/hooks/useLongPress.ts

@@ -1,6 +1,15 @@
 import { useCallback, useRef } from 'react'
 
-export const useLongPress = (callback = () => {}, ms = 500) => {
+export const useLongPress = (
+  callback: () => void = () => {},
+  ms: number = 500
+): {
+  onPointerDown: (e: React.PointerEvent) => void
+  onPointerUp: () => void
+  onPointerLeave: () => void
+  onPointerCancel: () => void
+  onPointerMove: (e: React.PointerEvent) => void
+} => {
   const timerRef = useRef<NodeJS.Timeout | null>(null)
   const isPressedRef = useRef(false)
   const startPosRef = useRef<{ x: number; y: number } | null>(null)

package/src/hooks/useNavigateBack.ts

@@ -1,8 +1,8 @@
 import { useRouter } from '@tanstack/react-router'
 import { useCallback } from 'react'
-import { navigationRoutes } from '../utils/navigationRoutes'
+import { navigationRoutes } from '../utils/navigationRoutes.js'
 
-export const useNavigateBack = () => {
+export const useNavigateBack = (): (() => void) => {
   const router = useRouter()
 
   const navigateBack = useCallback(() => {

package/src/hooks/useRouteExecution.ts

@@ -1,4 +1,4 @@
-import type { ExchangeRateUpdateParams, Route } from '@lifi/sdk'
+import type { ExchangeRateUpdateParams, Route, RouteExtended } from '@lifi/sdk'
 import { executeRoute, resumeRoute, updateRouteExecution } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
@@ -9,6 +9,7 @@ import {
   useRouteExecutionStore,
   useRouteExecutionStoreContext,
 } from '../stores/routes/RouteExecutionStore.js'
+import type { RouteExecutionStatus } from '../stores/routes/types.js'
 import {
   getUpdatedAction,
   isRouteActive,
@@ -32,7 +33,13 @@ export const useRouteExecution = ({
   routeId,
   executeInBackground,
   onAcceptExchangeRateUpdate,
-}: RouteExecutionProps) => {
+}: RouteExecutionProps): {
+  executeRoute: () => void
+  restartRoute: () => void
+  deleteRoute: () => void
+  route: RouteExtended | undefined
+  status: RouteExecutionStatus | undefined
+} => {
   const queryClient = useQueryClient()
   const { account } = useAccount()
   const resumedAfterMount = useRef(false)

package/src/hooks/useRouteRequiredAccountConnection.ts

@@ -7,7 +7,11 @@ import { useChain } from './useChain.js'
 export const useRouteRequiredAccountConnection = (
   route?: Route,
   chain?: ExtendedChain
-) => {
+): {
+  connected: boolean
+  missingChain?: ExtendedChain
+  missingAccountAddress?: string
+} => {
   const { account, accounts } = useAccount({ chainType: chain?.chainType })
   const [toAddress] = useFieldValues('toAddress')
   const { getChainById } = useChain()

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,7 +40,21 @@ 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,

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)
   )
@@ -26,8 +28,8 @@ export const useScrollableContainer = (elementId: string) => {
   return containerElement
 }
 
-export const useScrollableOverflowHidden = () => {
-  const elementId = useDefaultElementId()
+export const useScrollableOverflowHidden = (): void => {
+  const elementId = useDefaultElementId() ?? ''
   useLayoutEffect(() => {
     const element = getScrollableContainer(elementId)
     if (element) {

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'
 
-export const useSwapOnly = () => {
+export const useSwapOnly = (): boolean => {
   const state = useSplitSubvariantStore((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,4 +1,4 @@
-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'
@@ -7,7 +7,19 @@ 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 +69,26 @@ export const useToAddressRequirements = (route?: RouteExtended) => {
     fromChainId !== toChainId &&
     !fromContractCodeHasDelegationIndicator
 
-  const requiredToAddress =
+  const requiredToAddress = Boolean(
     (isDifferentChainType ||
       isCrossChainContractAddress ||
       requiredUI?.includes(RequiredUI.ToAddress)) &&
-    !hiddenUI?.includes(HiddenUI.ToAddress)
+      !hiddenUI?.includes(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,15 +4,15 @@ 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) => {
@@ -24,30 +24,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,6 +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 type { TokenAmount } from '../types/token.js'
 import { HiddenUI } from '../types/widget.js'
 import { formatTokenPrice } from '../utils/format.js'
 import { isSearchMatch, processTokenBalances } from '../utils/tokenList.js'
@@ -15,7 +16,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,

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,

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