@lifi/widget 3.24.3 → 3.25.0-beta.1

package/src/components/SendToWallet/SendToWalletButton.tsx

@@ -111,13 +111,12 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
   const collapseTransitionTime = useRef(0)
 
   // Timeout is needed here to push the collapseTransitionTime update to the back of the event loop so that it doesn't fired too quickly
-  // biome-ignore lint/correctness/useExhaustiveDependencies:
   useEffect(() => {
     const timeout = setTimeout(() => {
       collapseTransitionTime.current = 225
     }, 0)
     return () => clearTimeout(timeout)
-  }, [collapseTransitionTime])
+  }, [])
 
   const isOpenCollapse =
     !hiddenToAddress && (requiredToAddress || showSendToWallet)
@@ -134,8 +133,8 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
       mountOnEnter
       unmountOnExit
     >
+      {/** biome-ignore lint/a11y/useSemanticElements: allowed in react */}
       <Card
-        // biome-ignore lint/a11y/useSemanticElements:
         role="button"
         onClick={disabledForChanges ? undefined : handleOnClick}
         sx={{ width: '100%', ...props.sx }}

package/src/components/Skeleton/WidgetSkeleton.style.tsx

@@ -72,7 +72,6 @@ export const SkeletonHeaderContainer = styled(Box)(({ theme }) => {
     display: 'flex',
     flexDirection: 'column',
     backgroundColor: theme.vars.palette.background.default,
-    backdropFilter: 'blur(12px)',
     position: 'relative',
     top: 0,
     zIndex: 1200,

package/src/components/Step/CircularProgress.style.tsx

@@ -2,9 +2,9 @@ import type { ProcessStatus, Substatus } from '@lifi/sdk'
 import type { Theme } from '@mui/material'
 import {
   Box,
-  CircularProgress as MuiCircularProgress,
   circularProgressClasses,
   keyframes,
+  CircularProgress as MuiCircularProgress,
   styled,
 } from '@mui/material'
 

package/src/components/StepActions/StepActions.style.tsx

@@ -2,10 +2,10 @@ import {
   Box,
   StepConnector as MuiStepConnector,
   StepLabel as MuiStepLabel,
-  Typography,
   stepConnectorClasses,
   stepLabelClasses,
   styled,
+  Typography,
 } from '@mui/material'
 import { AvatarMasked } from '../Avatar/Avatar.style.js'
 

package/src/components/StepActions/StepActions.tsx

@@ -1,5 +1,5 @@
 import type { LiFiStep, StepExtended } from '@lifi/sdk'
-import { isGaslessStep } from '@lifi/sdk'
+import { isRelayerStep } from '@lifi/sdk'
 import ArrowForward from '@mui/icons-material/ArrowForward'
 import ExpandLess from '@mui/icons-material/ExpandLess'
 import ExpandMore from '@mui/icons-material/ExpandMore'
@@ -162,7 +162,7 @@ export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
     ) : null
   }
 
-  const hasGaslessSupport = isGaslessStep(step)
+  const hasRelayerSupport = isRelayerStep(step)
 
   return (
     <Box
@@ -194,7 +194,7 @@ export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
                 <ProtocolStepDetailsLabel
                   step={step}
                   feeConfig={feeConfig}
-                  relayerSupport={hasGaslessSupport}
+                  relayerSupport={hasRelayerSupport}
                 />
               ) : (
                 <SwapStepDetailsLabel step={step} />

package/src/components/TextFitter/TextFitter.tsx

@@ -50,7 +50,7 @@ export const TextFitter: React.FC<PropsWithChildren<TextFitterProps>> = ({
     onFit?.()
   }, [cropBottom, cropTop, onFit])
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies:
+  // biome-ignore lint/correctness/useExhaustiveDependencies: run only when children changes
   useLayoutEffect(() => {
     calculateBox()
   }, [calculateBox, children])

package/src/components/Token/Token.style.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography, styled } from '@mui/material'
+import { Box, styled, Typography } from '@mui/material'
 
 export const TextSecondaryContainer = styled(Box)(() => ({
   display: 'flex',

package/src/components/Token/Token.tsx

@@ -80,8 +80,8 @@ export const TokenBase: FC<TokenProps & BoxProps> = ({
     token.decimals
   )
 
-  let priceImpact: number | undefined = undefined
-  let priceImpactPercent: number | undefined = undefined
+  let priceImpact: number | undefined
+  let priceImpactPercent: number | undefined
   if (impactToken) {
     priceImpact = getPriceImpact({
       fromToken: impactToken,

package/src/components/TokenList/TokenDetailsSheet.tsx

@@ -3,6 +3,7 @@ import { BottomSheet } from '../BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../BottomSheet/types.js'
 import { TokenDetailsSheetContent } from './TokenDetailsSheetContent.js'
 import type { TokenDetailsSheetBase } from './types.js'
+
 interface TokenDetailsSheetProps {
   chainId: number | undefined
 }

package/src/components/TokenList/TokenDetailsSheetContent.style.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography, styled } from '@mui/material'
+import { Box, styled, Typography } from '@mui/material'
 import type { PageContainerProps } from '../PageContainer.js'
 import { PageContainer } from '../PageContainer.js'
 

package/src/components/TokenList/TokenDetailsSheetContent.tsx

@@ -2,7 +2,7 @@ import Close from '@mui/icons-material/Close'
 import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
 import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import { Box, IconButton, Link, Skeleton, Typography } from '@mui/material'
-import { type PropsWithChildren, forwardRef, useMemo } from 'react'
+import { forwardRef, type PropsWithChildren, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useExplorer } from '../../hooks/useExplorer.js'

package/src/components/TokenList/TokenList.style.tsx

@@ -1,5 +1,9 @@
 import type { IconButtonProps, LinkProps } from '@mui/material'
-import { IconButton as MuiIconButton, styled } from '@mui/material'
+import {
+  IconButton as MuiIconButton,
+  List as MuiList,
+  styled,
+} from '@mui/material'
 import { ListItem as ListItemBase } from '../ListItem/ListItem.js'
 
 export const ListItem = styled(ListItemBase)(() => ({
@@ -8,6 +12,12 @@ export const ListItem = styled(ListItemBase)(() => ({
   left: 0,
 }))
 
+export const List = styled(MuiList)(({ theme }) => ({
+  cursor: 'pointer',
+  marginLeft: theme.spacing(1.5),
+  marginRight: theme.spacing(1.5),
+}))
+
 export const IconButton = styled(MuiIconButton)<IconButtonProps & LinkProps>(
   ({ theme }) => ({
     lineHeight: 1,

package/src/components/TokenList/TokenList.tsx

@@ -11,10 +11,10 @@ import { useFieldValues } from '../../stores/form/useFieldValues.js'
 import { WidgetEvent } from '../../types/events.js'
 import type { TokenAmount } from '../../types/token.js'
 import { TokenNotFound } from './TokenNotFound.js'
-import { VirtualizedTokenList } from './VirtualizedTokenList.js'
 import type { TokenListProps } from './types.js'
 import { useTokenSelect } from './useTokenSelect.js'
 import { filteredTokensComparator } from './utils.js'
+import { VirtualizedTokenList } from './VirtualizedTokenList.js'
 
 export const TokenList: FC<TokenListProps> = ({
   formType,
@@ -23,7 +23,10 @@ export const TokenList: FC<TokenListProps> = ({
   onClick,
 }) => {
   const emitter = useWidgetEvents()
-  const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType))
+  const [selectedChainId, selectedTokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    FormKeyHelper.getTokenKey(formType)
+  )
   const [tokenSearchFilter]: string[] = useDebouncedWatch(
     320,
     'tokenSearchFilter'
@@ -118,6 +121,7 @@ export const TokenList: FC<TokenListProps> = ({
         isBalanceLoading={isBalanceLoading}
         showCategories={showCategories}
         onClick={handleTokenClick}
+        selectedTokenAddress={selectedTokenAddress}
       />
     </Box>
   )

package/src/components/TokenList/TokenListItem.tsx

@@ -10,7 +10,7 @@ import {
   Typography,
 } from '@mui/material'
 import type { MouseEventHandler } from 'react'
-import { useRef, useState } from 'react'
+import { memo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
 import { shortenAddress } from '../../utils/wallet.js'
@@ -22,42 +22,47 @@ import type {
   TokenListItemProps,
 } from './types.js'
 
-export const TokenListItem: React.FC<TokenListItemProps> = ({
-  onClick,
-  size,
-  start,
-  token,
-  chain,
-  accountAddress,
-  isBalanceLoading,
-  startAdornment,
-  endAdornment,
-  onShowTokenDetails,
-}) => {
-  const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {
-    e.stopPropagation()
-    onClick?.(token.address, chain?.id)
+export const TokenListItem: React.FC<TokenListItemProps> = memo(
+  ({
+    onClick,
+    size,
+    start,
+    token,
+    chain,
+    accountAddress,
+    isBalanceLoading,
+    startAdornment,
+    endAdornment,
+    selected,
+    onShowTokenDetails,
+  }) => {
+    const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {
+      e.stopPropagation()
+      onClick?.(token.address, chain?.id)
+    }
+    return (
+      <ListItem
+        style={{
+          height: `${size}px`,
+          transform: `translateY(${start}px)`,
+          padding: 0,
+        }}
+      >
+        {startAdornment}
+        <TokenListItemButton
+          token={token}
+          chain={chain}
+          accountAddress={accountAddress}
+          isBalanceLoading={isBalanceLoading}
+          onClick={handleClick}
+          selected={selected}
+          onShowTokenDetails={onShowTokenDetails}
+        />
+        {endAdornment}
+      </ListItem>
+    )
   }
-  return (
-    <ListItem
-      style={{
-        height: `${size}px`,
-        transform: `translateY(${start}px)`,
-      }}
-    >
-      {startAdornment}
-      <TokenListItemButton
-        token={token}
-        chain={chain}
-        accountAddress={accountAddress}
-        isBalanceLoading={isBalanceLoading}
-        onClick={handleClick}
-        onShowTokenDetails={onShowTokenDetails}
-      />
-      {endAdornment}
-    </ListItem>
-  )
-}
+)
 
 export const TokenListItemAvatar: React.FC<TokenListItemAvatarProps> = ({
   token,
@@ -110,6 +115,7 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
   chain,
   accountAddress,
   isBalanceLoading,
+  selected,
   onShowTokenDetails,
 }) => {
   const { t } = useTranslation()
@@ -147,6 +153,11 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       dense
+      selected={selected}
+      sx={{
+        height: 60,
+        marginBottom: '4px',
+      }}
     >
       <ListItemAvatar>
         <TokenListItemAvatar token={token} />
@@ -307,7 +318,12 @@ export const TokenListItemSkeleton = () => {
     <ListItem
       secondaryAction={<TokenAmountSkeleton />}
       disablePadding
-      sx={{ position: 'relative', flexDirection: 'row', alignItems: 'center' }}
+      sx={{
+        position: 'relative',
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 0,
+      }}
     >
       <ListItemAvatar>
         <Skeleton

package/src/components/TokenList/VirtualizedTokenList.tsx

@@ -1,10 +1,11 @@
-import { List, Typography } from '@mui/material'
+import { Typography } from '@mui/material'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import type { FC } from 'react'
 import { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { TokenAmount } from '../../types/token.js'
 import { TokenDetailsSheet } from './TokenDetailsSheet.js'
+import { List } from './TokenList.style.js'
 import { TokenListItem, TokenListItemSkeleton } from './TokenListItem.js'
 import type {
   TokenDetailsSheetBase,
@@ -17,6 +18,7 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
   scrollElementRef,
   chainId,
   chain,
+  selectedTokenAddress,
   isLoading,
   isBalanceLoading,
   showCategories,
@@ -33,9 +35,16 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
     []
   )
 
+  const getItemKey = useCallback(
+    (index: number) => {
+      return `${tokens[index].address}-${index}`
+    },
+    [tokens]
+  )
+
   const { getVirtualItems, getTotalSize, scrollToIndex } = useVirtualizer({
     count: tokens.length,
-    overscan: 10,
+    overscan: 5,
     paddingEnd: 12,
     getScrollElement: () => scrollElementRef.current,
     estimateSize: (index) => {
@@ -66,15 +75,17 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
 
       return size
     },
-    getItemKey: (index) => `${tokens[index].address}-${index}`,
+    getItemKey,
   })
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies:
+  // biome-ignore lint/correctness/useExhaustiveDependencies: run only when chainId changes
   useEffect(() => {
     // Scroll to the top of the list when switching the chains
     if (getVirtualItems().length) {
       scrollToIndex(0, { align: 'start' })
     }
+    // Close the token details sheet when switching the chains
+    tokenDetailsSheetRef.current?.close()
   }, [scrollToIndex, chainId, getVirtualItems])
 
   if (isLoading) {
@@ -144,6 +155,8 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
               start={item.start}
               token={currentToken}
               chain={chain}
+              selected={currentToken.address === selectedTokenAddress}
+              onShowTokenDetails={onShowTokenDetails}
               isBalanceLoading={isBalanceLoading}
               accountAddress={account.address}
               startAdornment={
@@ -162,7 +175,6 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
                   </Typography>
                 ) : null
               }
-              onShowTokenDetails={onShowTokenDetails}
             />
           )
         })}

package/src/components/TokenList/types.ts

@@ -21,6 +21,7 @@ export interface VirtualizedTokenListProps {
   chain?: ExtendedChain
   showCategories?: boolean
   onClick(tokenAddress: string, chainId?: number): void
+  selectedTokenAddress?: string
 }
 
 export interface TokenListItemBaseProps {
@@ -37,6 +38,7 @@ export interface TokenListItemProps extends TokenListItemBaseProps {
   isBalanceLoading?: boolean
   startAdornment?: React.ReactNode
   endAdornment?: React.ReactNode
+  selected?: boolean
 }
 
 export interface TokenListItemButtonProps {
@@ -46,6 +48,7 @@ export interface TokenListItemButtonProps {
   token: TokenAmount
   chain?: ExtendedChain
   isBalanceLoading?: boolean
+  selected?: boolean
 }
 
 export interface TokenListItemAvatarProps {

package/src/components/TokenRate/TokenRate.style.ts

@@ -1,4 +1,4 @@
-import { Typography, styled } from '@mui/material'
+import { styled, Typography } from '@mui/material'
 
 export const TokenRateTypography = styled(Typography)(({ theme }) => ({
   fontSize: 14,

package/src/components/TokenRate/TokenRate.tsx

@@ -56,7 +56,7 @@ export const TokenRate: React.FC<TokenRateProps> = ({ route }) => {
     : `1 ${toToken.symbol} ≈ ${t('format.tokenAmount', { value: toFromRate })} ${fromToken.symbol}`
 
   return (
-    // biome-ignore lint/a11y/useSemanticElements:
+    // biome-ignore lint/a11y/useSemanticElements: allowed in react
     <TokenRateTypography onClick={toggleRate} role="button">
       {rateText}
     </TokenRateTypography>

package/src/components/TransactionDetails.tsx

@@ -1,5 +1,5 @@
 import type { RouteExtended } from '@lifi/sdk'
-import { isGaslessStep } from '@lifi/sdk'
+import { isRelayerStep } from '@lifi/sdk'
 import ExpandLess from '@mui/icons-material/ExpandLess'
 import ExpandMore from '@mui/icons-material/ExpandMore'
 import LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'
@@ -71,10 +71,10 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
       ) ?? 0
   }
 
-  const hasGaslessSupport = route.steps.some(isGaslessStep)
+  const hasRelayerSupport = route.steps.every(isRelayerStep)
 
   const showIntegratorFeeCollectionDetails =
-    (feeAmountUSD || Number.isFinite(feeConfig?.fee)) && !hasGaslessSupport
+    (feeAmountUSD || Number.isFinite(feeConfig?.fee)) && !hasRelayerSupport
 
   return (
     <Card selectionColor="secondary" {...props}>
@@ -100,11 +100,11 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
           <FeeBreakdownTooltip
             gasCosts={gasCosts}
             feeCosts={feeCosts}
-            relayerSupport={hasGaslessSupport}
+            relayerSupport={hasRelayerSupport}
           >
+            {/** biome-ignore lint/a11y/useSemanticElements: allowed in react */}
             <Box
               onClick={toggleCard}
-              // biome-ignore lint/a11y/useSemanticElements:
               role="button"
               sx={{
                 display: 'flex',
@@ -117,7 +117,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                 <LocalGasStationRounded fontSize="inherit" />
               </IconTypography>
               <Typography
-                data-value={hasGaslessSupport ? 0 : combinedFeesUSD}
+                data-value={hasRelayerSupport ? 0 : combinedFeesUSD}
                 sx={{
                   fontSize: 14,
                   color: 'text.primary',
@@ -125,7 +125,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                   lineHeight: 1.429,
                 }}
               >
-                {hasGaslessSupport
+                {hasRelayerSupport
                   ? t('main.fees.free')
                   : t('format.currency', { value: combinedFeesUSD })}
               </Typography>
@@ -157,13 +157,13 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
             <Typography variant="body2">{t('main.fees.network')}</Typography>
             <FeeBreakdownTooltip
               gasCosts={gasCosts}
-              relayerSupport={hasGaslessSupport}
+              relayerSupport={hasRelayerSupport}
             >
               <Typography
                 variant="body2"
                 sx={{ fontWeight: 600, cursor: 'help' }}
               >
-                {hasGaslessSupport
+                {hasRelayerSupport
                   ? t('main.fees.free')
                   : t('format.currency', {
                       value: gasCostUSD,

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.24.3'
+export const version = '3.25.0-beta.1'

package/src/hooks/timer/time.ts

@@ -43,7 +43,7 @@ export function getTimeFromMilliseconds(
 }
 
 export function getMillisecondsFromExpiry(expiry: Date): number {
-  const now = new Date().getTime()
+  const now = Date.now()
   const milliSecondsDistance = expiry?.getTime() - now
   return milliSecondsDistance > 0 ? milliSecondsDistance : 0
 }

package/src/hooks/timer/useTimer.ts

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useState } from 'react'
 import {
-  type TimeFromMillisecondsType,
   getMillisecondsFromExpiry,
   getTimeFromMilliseconds,
+  type TimeFromMillisecondsType,
 } from './time.js'
 import { useInterval } from './useInterval.js'
 import { validateExpiryTimestamp, validateOnExpire } from './validate.js'

package/src/hooks/useAvailableChains.ts

@@ -3,7 +3,7 @@ import { ChainType, config, getChains } from '@lifi/sdk'
 import { useQuery } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
-import { isItemAllowed } from '../utils/item.js'
+import { getConfigItemSets, isItemAllowedForSets } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 
 export type GetChainById = (
@@ -33,9 +33,15 @@ export const useAvailableChains = (chainTypes?: ChainType[]) => {
       chains?.to,
     ] as const,
     queryFn: async ({ queryKey: [, chainTypesConfig] }) => {
+      const chainsConfigSets = getConfigItemSets(
+        chainTypesConfig,
+        (chains) => new Set(chains)
+      )
       const chainTypesRequest = supportedChainTypes
         // providers.length > 0 ? providers : supportedChainTypes
-        .filter((chainType) => isItemAllowed(chainType, chainTypesConfig))
+        .filter((chainType) =>
+          isItemAllowedForSets(chainType, chainsConfigSets)
+        )
 
       const availableChains = await getChains({
         chainTypes: chainTypes || chainTypesRequest,

package/src/hooks/useChains.ts

@@ -2,7 +2,7 @@ import type { ChainType } from '@lifi/sdk'
 import { useMemo } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { FormType } from '../stores/form/types.js'
-import { isItemAllowed } from '../utils/item.js'
+import { getConfigItemSets, isFormItemAllowed } from '../utils/item.js'
 import { useAvailableChains } from './useAvailableChains.js'
 
 export const useChains = (type?: FormType, chainTypes?: ChainType[]) => {
@@ -14,15 +14,21 @@ export const useChains = (type?: FormType, chainTypes?: ChainType[]) => {
   } = useAvailableChains()
 
   const filteredChains = useMemo(() => {
+    const chainsConfigSets = getConfigItemSets(
+      chains,
+      (chains) => new Set(chains),
+      type
+    )
     const filteredChains = type
       ? availableChains?.filter(
           (chain) =>
-            isItemAllowed(chain.id, chains) &&
-            isItemAllowed(chain.id, chains?.[type]) &&
+            isFormItemAllowed(chain.id, chainsConfigSets, type) &&
             // Check against chain types if they are provided
             (chainTypes?.includes(chain.chainType) ?? true)
         )
-      : availableChains?.filter((chain) => isItemAllowed(chain.id, chains))
+      : availableChains?.filter((chain) =>
+          isFormItemAllowed(chain.id, chainsConfigSets)
+        )
     return filteredChains
   }, [availableChains, chainTypes, chains, type])
 

package/src/hooks/useExpansionRoutes.ts

@@ -0,0 +1,29 @@
+import type { PropsWithChildren } from 'react'
+import type { RouteObject } from 'react-router-dom'
+import { useRoutes as useDOMRoutes } from 'react-router-dom'
+import { ExpansionType } from '../types/widget'
+import { navigationRoutes } from '../utils/navigationRoutes'
+
+const routes: RouteObject[] = [
+  {
+    path: '/',
+    element: ExpansionType.Routes,
+  },
+  {
+    path: navigationRoutes.fromToken,
+    element: ExpansionType.FromChain,
+  },
+  {
+    path: navigationRoutes.toToken,
+    element: ExpansionType.ToChain,
+  },
+  {
+    path: '*',
+    element: null,
+  },
+]
+
+export const useExpansionRoutes = () => {
+  const element = useDOMRoutes(routes)
+  return (element?.props as PropsWithChildren)?.children as ExpansionType
+}

package/src/hooks/useHasChainExpansion.ts

@@ -0,0 +1,19 @@
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider'
+import { ExpansionType, HiddenUI } from '../types/widget'
+import { useExpansionRoutes } from './useExpansionRoutes'
+import { useSwapOnly } from './useSwapOnly'
+
+export const useHasChainExpansion = () => {
+  const { hiddenUI, subvariantOptions } = useWidgetConfig()
+  const swapOnly = useSwapOnly()
+  const expansionType = useExpansionRoutes()
+
+  const withChainExpansion =
+    (expansionType === ExpansionType.FromChain ||
+      expansionType === ExpansionType.ToChain) &&
+    !(swapOnly && expansionType === ExpansionType.ToChain) &&
+    !hiddenUI?.includes(HiddenUI.ChainSelect) &&
+    (subvariantOptions?.wide?.enableChainSidebar ?? true)
+
+  return [withChainExpansion, expansionType] as const
+}

package/src/hooks/useIsBatchingSupported.ts

@@ -1,5 +1,5 @@
-import { ChainType, isBatchingSupported } from '@lifi/sdk'
 import type { ExtendedChain } from '@lifi/sdk'
+import { ChainType, isBatchingSupported } from '@lifi/sdk'
 import { useQuery } from '@tanstack/react-query'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { getQueryKey } from '../utils/queries.js'
@@ -20,7 +20,10 @@ export function useIsBatchingSupported(
       address,
     ],
     queryFn: () => {
-      return isBatchingSupported({ chainId: chain!.id })
+      return isBatchingSupported({
+        chainId: chain!.id,
+        skipReady: true,
+      })
     },
     enabled,
     staleTime: 3_600_000,