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

package/src/components/Tools/ToolItem.tsx

@@ -1,5 +1,5 @@
 import { Avatar, Checkbox, ListItemAvatar } from '@mui/material'
-import { memo } from 'react'
+import { memo, type NamedExoticComponent } from 'react'
 import { ListItemText } from '../ListItemText.js'
 import { SettingsListItemButton } from '../SettingsListItemButton.js'
 
@@ -10,8 +10,8 @@ interface ToolItemProps {
   onToggle: (key: string) => void
 }
 
-export const ToolItem = memo<ToolItemProps>(
-  ({ tool, typeKey, isEnabled, onToggle }) => {
+export const ToolItem: NamedExoticComponent<ToolItemProps> =
+  memo<ToolItemProps>(({ tool, typeKey, isEnabled, onToggle }) => {
     const handleClick = () => {
       onToggle(tool.key)
     }
@@ -38,5 +38,4 @@ export const ToolItem = memo<ToolItemProps>(
         />
       </SettingsListItemButton>
     )
-  }
-)
+  })

package/src/components/Tools/Tools.tsx

@@ -1,5 +1,5 @@
 import type { ToolsResponse } from '@lifi/sdk'
-import { useMemo, useRef } from 'react'
+import { type JSX, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSettingsStore } from '../../stores/settings/SettingsStore.js'
 import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
@@ -16,7 +16,7 @@ interface ToolsProps {
   type: 'Bridges' | 'Exchanges'
 }
 
-export const Tools = ({ filteredTools, type }: ToolsProps) => {
+export const Tools = ({ filteredTools, type }: ToolsProps): JSX.Element => {
   const { t } = useTranslation()
   const typeKey = type.toLowerCase() as 'bridges' | 'exchanges'
   const enabledTools = useSettingsStore((state) => state[`_enabled${type}`])

package/src/components/TransactionCard/ActiveTransactionCard.style.tsx

@@ -0,0 +1,36 @@
+import { Box, IconButton, styled } from '@mui/material'
+import type React from 'react'
+
+export const PendingCircle: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  position: 'relative',
+  width: 24,
+  height: 24,
+  flexShrink: 0,
+  borderRadius: '50%',
+  border: `2px solid ${theme.vars.palette.grey[300]}`,
+  ...theme.applyStyles('dark', {
+    borderColor: theme.vars.palette.grey[800],
+  }),
+}))
+
+export const StatusRow: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: theme.spacing(1),
+  padding: theme.spacing(1),
+  borderRadius: theme.vars.shape.borderRadiusTertiary,
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+}))
+
+export const DeleteButton: React.FC<React.ComponentProps<typeof IconButton>> =
+  styled(IconButton)(({ theme }) => ({
+    padding: theme.spacing(0.5),
+    backgroundColor: theme.vars.palette.background.paper,
+    width: 24,
+    height: 24,
+  }))

package/src/components/TransactionCard/ActiveTransactionCard.tsx

@@ -0,0 +1,84 @@
+import type { RouteExtended } from '@lifi/sdk'
+import DeleteOutline from '@mui/icons-material/DeleteOutline'
+import { Box, Tooltip, Typography } from '@mui/material'
+import type { JSX, MouseEvent } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useActionMessage } from '../../hooks/useActionMessage.js'
+import { RouteExecutionStatus } from '../../stores/routes/types.js'
+import { Card } from '../Card/Card.js'
+import { IconCircle } from '../IconCircle/IconCircle.js'
+import { RouteTokens } from '../RouteCard/RouteTokens.js'
+import { CircularProgressPending } from '../Step/CircularProgress.style.js'
+import { ExecutionTimerText, getExpiryTimestamp } from '../Timer/StepTimer.js'
+import {
+  DeleteButton,
+  PendingCircle,
+  StatusRow,
+} from './ActiveTransactionCard.style.js'
+
+interface ActiveTransactionCardProps {
+  route: RouteExtended
+  status?: RouteExecutionStatus
+  onClick: () => void
+  onDelete: (e: MouseEvent) => void
+}
+
+export const ActiveTransactionCard = ({
+  route,
+  status,
+  onClick,
+  onDelete,
+}: ActiveTransactionCardProps): JSX.Element => {
+  const { t } = useTranslation()
+
+  const lastActiveStep = route.steps.findLast((step) => step.execution)
+  const lastActiveAction = lastActiveStep?.execution?.actions?.at(-1)
+  const { title } = useActionMessage(lastActiveStep, lastActiveAction)
+
+  const isFailed = status === RouteExecutionStatus.Failed
+
+  const statusIcon = (() => {
+    if (isFailed) {
+      return <IconCircle status="error" size={24} />
+    }
+    if (
+      ['ACTION_REQUIRED', 'MESSAGE_REQUIRED', 'RESET_REQUIRED'].includes(
+        lastActiveAction?.status ?? ''
+      )
+    ) {
+      return <IconCircle status="info" size={24} />
+    }
+    return (
+      <PendingCircle>
+        <CircularProgressPending size={24} sx={{ top: -2, left: -2 }} />
+      </PendingCircle>
+    )
+  })()
+
+  return (
+    <Card onClick={onClick} indented>
+      <StatusRow sx={{ mb: 1.5 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+          {statusIcon}
+          <Typography sx={{ fontSize: 12, fontWeight: 500 }}>
+            {title}
+          </Typography>
+        </Box>
+        {isFailed ? (
+          <Tooltip title={t('button.clearTransaction')}>
+            <DeleteButton size="small" onClick={onDelete}>
+              <DeleteOutline sx={{ fontSize: 16 }} />
+            </DeleteButton>
+          </Tooltip>
+        ) : lastActiveStep?.execution?.signedAt ? (
+          <Typography sx={{ fontSize: 12, fontWeight: 600 }}>
+            <ExecutionTimerText
+              expiryTimestamp={getExpiryTimestamp(lastActiveStep)}
+            />
+          </Typography>
+        ) : null}
+      </StatusRow>
+      <RouteTokens route={route} />
+    </Card>
+  )
+}

package/src/components/TransactionCard/TransactionCard.style.tsx

@@ -0,0 +1,14 @@
+import { Box, styled, Typography } from '@mui/material'
+import type React from 'react'
+
+export const DateLabelContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)({
+    display: 'flex',
+    justifyContent: 'space-between',
+  })
+
+export const DateLabelText: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)({
+    fontSize: 12,
+    fontWeight: 500,
+  })

package/src/components/TransactionCard/TransactionCard.tsx

@@ -0,0 +1,37 @@
+import type { RouteExtended } from '@lifi/sdk'
+import { Box } from '@mui/material'
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Card } from '../Card/Card.js'
+import { RouteTokens } from '../RouteCard/RouteTokens.js'
+import { DateLabelContainer, DateLabelText } from './TransactionCard.style.js'
+
+interface TransactionCardProps {
+  route: RouteExtended
+  date: Date
+  onClick?: () => void
+}
+
+export const TransactionCard = ({
+  route,
+  date,
+  onClick,
+}: TransactionCardProps): JSX.Element => {
+  const { i18n } = useTranslation()
+
+  return (
+    <Card indented onClick={onClick}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+        <DateLabelContainer>
+          <DateLabelText color="text.secondary">
+            {date.toLocaleString(i18n.language, { dateStyle: 'long' })}
+          </DateLabelText>
+          <DateLabelText color="text.secondary">
+            {date.toLocaleString(i18n.language, { timeStyle: 'short' })}
+          </DateLabelText>
+        </DateLabelContainer>
+        <RouteTokens route={route} />
+      </Box>
+    </Card>
+  )
+}

package/src/components/TransactionCard/TransactionCardSkeleton.tsx

@@ -0,0 +1,68 @@
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
+import { Box, Skeleton } from '@mui/material'
+import type { JSX } from 'react'
+import { Card } from '../Card/Card.js'
+import { TokenSkeleton } from '../Token/Token.js'
+
+interface TransactionCardSkeletonProps {
+  active?: boolean
+}
+
+export const TransactionCardSkeleton = ({
+  active,
+}: TransactionCardSkeletonProps): JSX.Element => {
+  return (
+    <Card indented>
+      {active ? (
+        <Skeleton
+          variant="rectangular"
+          height={40}
+          sx={(theme) => ({
+            borderRadius: theme.vars.shape.borderRadiusTertiary,
+            mb: 1.5,
+          })}
+        />
+      ) : (
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            pb: 1.5,
+          }}
+        >
+          <Skeleton
+            variant="rectangular"
+            width={96}
+            height={18}
+            sx={(theme) => ({
+              borderRadius: theme.vars.shape.borderRadius,
+            })}
+          />
+          <Skeleton
+            variant="rectangular"
+            width={64}
+            height={18}
+            sx={(theme) => ({
+              borderRadius: theme.vars.shape.borderRadius,
+            })}
+          />
+        </Box>
+      )}
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+        <TokenSkeleton />
+        <Box
+          sx={{
+            width: 40,
+            height: 20,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <ArrowDownwardIcon sx={{ fontSize: 16, color: 'text.secondary' }} />
+        </Box>
+        <TokenSkeleton />
+      </Box>
+    </Card>
+  )
+}

package/src/config/queryClient.ts

@@ -1,6 +1,6 @@
 import { QueryClient } from '@tanstack/react-query'
 
-export const queryClient = new QueryClient({
+export const queryClient: QueryClient = new QueryClient({
   defaultOptions: {
     queries: {
       enabled: true,

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '4.0.0-alpha.3'
+export const version = '4.0.0-alpha.5'

package/src/hooks/timer/useExecutionTimer.ts

@@ -0,0 +1,21 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { formatTimer } from '../../utils/timer.js'
+import { useTimer } from './useTimer.js'
+
+export const useExecutionTimer = (
+  expiryTimestamp: Date
+): { formatted: string | null; isTimerExpired: boolean } => {
+  const { i18n } = useTranslation()
+  const [isExpired, setExpired] = useState(false)
+  const { days, hours, minutes, seconds } = useTimer({
+    autoStart: true,
+    expiryTimestamp,
+    onExpire: () => setExpired(true),
+  })
+  const isTimerExpired = isExpired || (!minutes && !seconds)
+  const formatted = isTimerExpired
+    ? null
+    : formatTimer({ locale: i18n.language, days, hours, minutes, seconds })
+  return { formatted, isTimerExpired }
+}

package/src/hooks/timer/useInterval.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react'
 
-export function useInterval(callback: () => void, delay: number | null) {
+export function useInterval(callback: () => void, delay: number | null): void {
   const callbackRef = useRef(callback)
 
   // update callback function with current render callback that has access to latest props and state

package/src/hooks/timer/validate.ts

@@ -1,4 +1,4 @@
-export function validateExpiryTimestamp(expiryTimestamp: Date) {
+export function validateExpiryTimestamp(expiryTimestamp: Date): boolean {
   const isValid = new Date(expiryTimestamp).getTime() > 0
   if (!isValid) {
     console.warn('useTimer Invalid expiryTimestamp settings', expiryTimestamp)
@@ -6,7 +6,7 @@ export function validateExpiryTimestamp(expiryTimestamp: Date) {
   return isValid
 }
 
-export function validateOnExpire(onExpire: () => void) {
+export function validateOnExpire(onExpire: () => void): boolean {
   const isValid = onExpire && typeof onExpire === 'function'
   if (onExpire && !isValid) {
     console.warn('useTimer Invalid onExpire settings function', onExpire)

package/src/hooks/useAccountsBalancesData.ts

@@ -10,7 +10,10 @@ export const useAccountsBalancesData = (
   formType?: FormType,
   isAllNetworks?: boolean,
   allTokens?: Record<number, TokenExtended[]>
-) => {
+): {
+  data: Record<string, Record<number, TokenExtended[]>> | undefined
+  isLoading: boolean
+} => {
   const { data: accountsWithTokens, isLoading: isAccountsLoading } =
     useAccountsData(selectedChainId, formType, isAllNetworks, allTokens)
 

package/src/hooks/useActionMessage.ts

@@ -8,7 +8,7 @@ import { useAvailableChains } from './useAvailableChains.js'
 export const useActionMessage = (
   step?: LiFiStepExtended,
   action?: ExecutionAction
-) => {
+): { title?: string; message?: string } => {
   const { subvariant, subvariantOptions } = useWidgetConfig()
   const { t } = useTranslation()
   const { getChainById } = useAvailableChains()

package/src/hooks/useAddressValidation.ts

@@ -3,7 +3,7 @@ import { getNameServiceAddress } from '@lifi/sdk'
 import { useChainTypeFromAddress } from '@lifi/widget-provider'
 import { useMutation } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import { useSDKClient } from '../providers/SDKClientProvider'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
 
 export enum AddressType {
   Address = 0,
@@ -28,7 +28,12 @@ type InvalidResponse = {
   isValid: false
 }
 
-export const useAddressValidation = () => {
+export const useAddressValidation = (): {
+  validateAddress: (
+    args: ValidationArgs
+  ) => Promise<ValidResponse | InvalidResponse>
+  isValidating: boolean
+} => {
   const { t } = useTranslation()
   const { getChainTypeFromAddress } = useChainTypeFromAddress()
   const sdkClient = useSDKClient()

package/src/hooks/useAvailableChains.ts

@@ -23,7 +23,11 @@ const supportedChainTypes = [
 export const useAvailableChains = (
   chainTypes?: ChainType[],
   widgetConfig?: WidgetConfig
-) => {
+): {
+  chains: ExtendedChain[] | undefined
+  getChainById: GetChainById
+  isLoading: boolean
+} => {
   const { chains: internalChains, keyPrefix: internalKeyPrefix } =
     useWidgetConfig()
   const internalClient = useSDKClient()

package/src/hooks/useChain.ts

@@ -1,7 +1,17 @@
+import type { ExtendedChain } from '@lifi/sdk'
 import { useMemo } from 'react'
 import { useAvailableChains } from './useAvailableChains.js'
 
-export const useChain = (chainId?: number) => {
+export const useChain = (
+  chainId?: number
+): {
+  chain: ExtendedChain | undefined
+  isLoading: boolean
+  getChainById: (
+    chainId?: number,
+    chains?: ExtendedChain[]
+  ) => ExtendedChain | undefined
+} => {
   const { isLoading, getChainById } = useAvailableChains()
 
   const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])

package/src/hooks/useChains.ts

@@ -1,11 +1,21 @@
-import type { ChainType } from '@lifi/sdk'
+import type { ChainType, ExtendedChain } from '@lifi/sdk'
 import { useMemo } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { FormType } from '../stores/form/types.js'
 import { getConfigItemSets, isFormItemAllowed } from '../utils/item.js'
 import { useAvailableChains } from './useAvailableChains.js'
 
-export const useChains = (type?: FormType, chainTypes?: ChainType[]) => {
+export const useChains = (
+  type?: FormType,
+  chainTypes?: ChainType[]
+): {
+  chains: ExtendedChain[] | undefined
+  getChainById: (
+    chainId?: number,
+    chains?: ExtendedChain[]
+  ) => ExtendedChain | undefined
+  isLoading: boolean
+} => {
   const { chains } = useWidgetConfig()
   const {
     chains: availableChains,

package/src/hooks/useContactSupport.ts

@@ -0,0 +1,16 @@
+import { WidgetEvent } from '../types/events.js'
+import { useWidgetEvents } from './useWidgetEvents.js'
+
+export const useContactSupport = (supportId?: string): (() => void) => {
+  const widgetEvents = useWidgetEvents()
+
+  const handleContactSupport = () => {
+    if (!widgetEvents.all.has(WidgetEvent.ContactSupport)) {
+      window.open('https://help.li.fi', '_blank', 'nofollow noreferrer')
+    } else {
+      widgetEvents.emit(WidgetEvent.ContactSupport, { supportId })
+    }
+  }
+
+  return handleContactSupport
+}

package/src/hooks/useDebouncedWatch.ts

@@ -1,11 +1,11 @@
 import { useEffect, useRef, useState } from 'react'
-import type { FormFieldNames } from '../stores/form/types.js'
+import type { FormFieldArray, FormFieldNames } from '../stores/form/types.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
 
 export const useDebouncedWatch = <T extends FormFieldNames[]>(
   delay: number,
   ...name: T
-) => {
+): FormFieldArray<T> => {
   const watchedValue = useFieldValues(...name)
   const [debouncedValue, setDebouncedValue] = useState(watchedValue)
   const debouncedValueRef = useRef<typeof watchedValue>(null)

package/src/hooks/useDefaultElementId.ts

@@ -1,6 +1,6 @@
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 
-export const useDefaultElementId = () => {
+export const useDefaultElementId = (): string | undefined => {
   const { elementId } = useWidgetConfig()
   return elementId
 }

package/src/hooks/useExplorer.ts

@@ -17,7 +17,10 @@ type TransactionLinkProps = { chain?: Chain | number } & (
     }
 )
 
-export const useExplorer = () => {
+export const useExplorer = (): {
+  getTransactionLink: (props: TransactionLinkProps) => string | undefined
+  getAddressLink: (address: string, chain?: Chain | number) => string
+} => {
   const { explorerUrls } = useWidgetConfig()
   const { getChainById } = useAvailableChains()
 

package/src/hooks/useFilteredByTokenBalances.ts

@@ -19,7 +19,10 @@ export const useFilteredTokensByBalance = (
     { chainType: ChainType; tokens: Record<number, TokenExtended[]> }
   >,
   formType?: FormType
-) => {
+): {
+  data: Record<string, Record<number, TokenExtended[]>> | undefined
+  isLoading: boolean
+} => {
   const { tokens: configTokens } = useWidgetConfig()
   const sdkClient = useSDKClient()
 

package/src/hooks/useFromAmountThreshold.ts

@@ -5,7 +5,10 @@ import { useFieldValues } from '../stores/form/useFieldValues.js'
 import { formatTokenPrice } from '../utils/format.js'
 import { useToken } from './useToken.js'
 
-export const useFromAmountThreshold = () => {
+export const useFromAmountThreshold = (): {
+  belowMinFromAmountUSD: boolean
+  minFromAmountUSD: number | undefined
+} => {
   const { minFromAmountUSD } = useWidgetConfig()
 
   const [chainId, tokenAddress, fromAmount] = useFieldValues(

package/src/hooks/useFromTokenSufficiency.ts

@@ -11,7 +11,12 @@ import { getTokenBalancesWithRetry } from './useTokenBalance.js'
 
 const refetchInterval = 30_000
 
-export const useFromTokenSufficiency = (route?: RouteExtended) => {
+export const useFromTokenSufficiency = (
+  route?: RouteExtended
+): {
+  insufficientFromToken: boolean | undefined
+  isLoading: boolean
+} => {
   const [fromChainId, fromTokenAddress, fromAmount] = useFieldValues(
     'fromChain',
     'fromToken',

package/src/hooks/useGasRecommendation.ts

@@ -1,4 +1,5 @@
 import { type ChainId, getGasRecommendation } from '@lifi/sdk'
+import type { UseQueryResult } from '@tanstack/react-query'
 import { useQuery } from '@tanstack/react-query'
 import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
@@ -12,7 +13,7 @@ export const useGasRecommendation = (
   toChainId?: ChainId,
   fromChain?: ChainId,
   fromToken?: string
-) => {
+): UseQueryResult<Awaited<ReturnType<typeof getGasRecommendation>> | null> => {
   const { chains } = useAvailableChains()
   const { keyPrefix, hiddenUI } = useWidgetConfig()
   const sdkClient = useSDKClient()

package/src/hooks/useGasRefuel.ts

@@ -1,3 +1,4 @@
+import type { ExtendedChain } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useMemo } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
@@ -8,7 +9,13 @@ import { useGasRecommendation } from './useGasRecommendation.js'
 import { useIsContractAddress } from './useIsContractAddress.js'
 import { useTokenBalance } from './useTokenBalance.js'
 
-export const useGasRefuel = () => {
+export const useGasRefuel = (): {
+  enabled: boolean
+  availble: boolean | undefined
+  isLoading: boolean
+  chain: ExtendedChain | undefined
+  fromAmount: string | undefined
+} => {
   const { getChainById } = useAvailableChains()
   const { hiddenUI } = useWidgetConfig()
   const [fromChainId, fromTokenAddress, toChainId, toAddress] = useFieldValues(

package/src/hooks/useGasSufficiency.ts

@@ -22,7 +22,12 @@ export interface GasSufficiency {
 
 const refetchInterval = 30_000
 
-export const useGasSufficiency = (route?: RouteExtended) => {
+export const useGasSufficiency = (
+  route?: RouteExtended
+): {
+  insufficientGas: GasSufficiency[] | undefined
+  isLoading: boolean
+} => {
   const { getChainById } = useAvailableChains()
   const { account: EVMAccount, accounts } = useAccount({
     chainType: ChainType.EVM,

package/src/hooks/useHasChainExpansion.ts

@@ -4,7 +4,10 @@ import { ExpansionType, HiddenUI } from '../types/widget.js'
 import { navigationRoutes } from '../utils/navigationRoutes.js'
 import { useSwapOnly } from './useSwapOnly.js'
 
-export const useHasChainExpansion = () => {
+export const useHasChainExpansion = (): readonly [
+  boolean,
+  ExpansionType | null,
+] => {
   const { hiddenUI, subvariantOptions } = useWidgetConfig()
   const swapOnly = useSwapOnly()
   const { pathname } = useLocation()

package/src/hooks/useHeader.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 import { useEffect } from 'react'
 import { useHeaderStore } from '../stores/header/useHeaderStore.js'
 
-export function useHeader(title: string, action?: ReactNode) {
+export function useHeader(title: string, action?: ReactNode): void {
   const [setTitle, setAction] = useHeaderStore((state) => [
     state.setTitle,
     state.setAction,

package/src/hooks/useInitializeSDKProviders.ts

@@ -1,8 +1,8 @@
 import { useSDKProviders } from '@lifi/widget-provider'
 import { useEffect } from 'react'
-import { useSDKClient } from '../providers/SDKClientProvider'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
 
-export const useInitializeSDKProviders = () => {
+export const useInitializeSDKProviders = (): void => {
   const sdkProviders = useSDKProviders()
   const sdkClient = useSDKClient()
 

package/src/hooks/useInitializer.ts

@@ -5,7 +5,7 @@ import { useTools } from './useTools.js'
 
 let checkedPackageUpdates = false
 
-export const useInitializer = () => {
+export const useInitializer = (): void => {
   useTools()
   useEffect(() => {
     if (!checkedPackageUpdates && process.env.NODE_ENV === 'development') {

package/src/hooks/useIsBatchingSupported.ts

@@ -9,7 +9,10 @@ import { getQueryKey } from '../utils/queries.js'
 export function useIsBatchingSupported(
   chain?: ExtendedChain,
   address?: string
-) {
+): {
+  isBatchingSupported: boolean | undefined
+  isBatchingSupportedLoading: boolean
+} {
   const { keyPrefix } = useWidgetConfig()
   const sdkClient = useSDKClient()
   const { isBatchingSupported } = useEthereumContext()