@lifi/widget 3.30.0 → 3.30.1

package/src/components/AmountInput/AmountInput.tsx

@@ -60,7 +60,7 @@ export const AmountInput: React.FC<FormTypeProps & CardProps> = ({
   )
 }
 
-export const AmountInputBase: React.FC<
+const AmountInputBase: React.FC<
   FormTypeProps &
     CardProps & {
       token?: Token

package/src/components/AmountInput/AmountInputAdornment.style.tsx

@@ -1,4 +1,4 @@
-import { Box, Skeleton, styled } from '@mui/material'
+import { Box, styled } from '@mui/material'
 import { cardClasses } from '@mui/material/Card'
 import { ButtonTertiary } from '../ButtonTertiary.js'
 
@@ -67,9 +67,3 @@ export const MaxButton = styled(ButtonTertiary)(({ theme }) => ({
     },
   },
 }))
-
-export const MaxButtonSkeleton = styled(Skeleton)(({ theme }) => ({
-  width: 46,
-  height: 24,
-  borderRadius: theme.vars.shape.borderRadiusSecondary,
-}))

package/src/components/AmountInput/PriceFormHelperText.tsx

@@ -28,7 +28,7 @@ export const PriceFormHelperText = memo<FormTypeProps>(({ formType }) => {
   )
 })
 
-export const PriceFormHelperTextBase: React.FC<
+const PriceFormHelperTextBase: React.FC<
   FormTypeProps & {
     isLoading?: boolean
     tokenAddress?: string

package/src/components/Avatar/Avatar.tsx

@@ -39,7 +39,7 @@ export const AvatarBadgedSkeleton: React.FC<{
   )
 }
 
-export const AvatarSkeleton: React.FC<{
+const AvatarSkeleton: React.FC<{
   avatarSize: number
   badgeSize: number
 }> = ({ avatarSize, badgeSize }) => {

package/src/components/Avatar/TokenAvatar.tsx

@@ -45,7 +45,7 @@ export const TokenAvatar: React.FC<{
   )
 }
 
-export const TokenAvatarFallback: React.FC<{
+const TokenAvatarFallback: React.FC<{
   token?: StaticToken
   isLoading?: boolean
   sx?: SxProps<Theme>
@@ -69,7 +69,7 @@ export const TokenAvatarFallback: React.FC<{
   )
 }
 
-export const TokenAvatarBase: React.FC<{
+const TokenAvatarBase: React.FC<{
   token?: StaticToken
   chain?: Chain
   isLoading?: boolean

package/src/components/Card/CardButton.style.tsx

@@ -15,14 +15,6 @@ export const CardRowButton = styled(ButtonBase)(({ theme }) => ({
   borderRadius: theme.vars.shape.borderRadius,
 }))
 
-export const CardRowContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  width: '100%',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: theme.spacing(2),
-}))
-
 export const CardValue = styled(Typography)({
   lineHeight: '1.25',
   fontWeight: 500,

package/src/components/FeeBreakdownTooltip.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import type { FeesBreakdown } from '../utils/fees.js'
 import { formatTokenAmount } from '../utils/format.js'
 
-export interface FeeBreakdownTooltipProps {
+interface FeeBreakdownTooltipProps {
   gasCosts?: FeesBreakdown[]
   feeCosts?: FeesBreakdown[]
   relayerSupport?: boolean
@@ -49,10 +49,7 @@ export const FeeBreakdownTooltip: React.FC<FeeBreakdownTooltipProps> = ({
   )
 }
 
-export const getFeeBreakdownTypography = (
-  fees: FeesBreakdown[],
-  t: TFunction
-) =>
+const getFeeBreakdownTypography = (fees: FeesBreakdown[], t: TFunction) =>
   fees.map((fee, index) => (
     <Typography
       color="inherit"

package/src/components/Header/Header.tsx

@@ -9,7 +9,7 @@ import { Container } from './Header.style.js'
 import { NavigationHeader } from './NavigationHeader.js'
 import { WalletHeader } from './WalletHeader.js'
 
-export const HeaderContainer: FC<PropsWithChildren> = ({ children }) => {
+const HeaderContainer: FC<PropsWithChildren> = ({ children }) => {
   const { pathname } = useLocation()
   const elementId = useDefaultElementId()
   const headerRef = useRef<HTMLDivElement>(null)

package/src/components/Header/WalletHeader.tsx

@@ -50,7 +50,7 @@ export const WalletHeader: React.FC = () => {
   ) : null
 }
 
-export const WalletMenuButton: React.FC = () => {
+const WalletMenuButton: React.FC = () => {
   const { variant, hiddenUI } = useWidgetConfig()
   const { account, accounts } = useAccount()
 

package/src/components/SendToWallet/SendToWalletButton.tsx

@@ -133,7 +133,6 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
       mountOnEnter
       unmountOnExit
     >
-      {/** biome-ignore lint/a11y/useSemanticElements: allowed in react */}
       <Card
         role="button"
         onClick={disabledForChanges ? undefined : handleOnClick}

package/src/components/StepActions/StepActions.tsx

@@ -120,7 +120,7 @@ export const StepActions: React.FC<StepActionsProps> = ({
   )
 }
 
-export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
+const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
   const { subvariant, subvariantOptions, feeConfig, hiddenUI } =
     useWidgetConfig()
 
@@ -211,7 +211,7 @@ export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
   )
 }
 
-export const StepDetailsContent: React.FC<{
+const StepDetailsContent: React.FC<{
   step: StepExtended
 }> = ({ step }) => {
   const { t } = useTranslation()
@@ -293,7 +293,7 @@ export const StepDetailsContent: React.FC<{
   )
 }
 
-export const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({
+const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({
   step,
   subvariant,
   subvariantOptions,
@@ -325,7 +325,7 @@ export const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({
   )
 }
 
-export const BridgeStepDetailsLabel: React.FC<
+const BridgeStepDetailsLabel: React.FC<
   Omit<StepDetailsLabelProps, 'variant'>
 > = ({ step }) => {
   const { t } = useTranslation()
@@ -341,7 +341,7 @@ export const BridgeStepDetailsLabel: React.FC<
   )
 }
 
-export const SwapStepDetailsLabel: React.FC<
+const SwapStepDetailsLabel: React.FC<
   Omit<StepDetailsLabelProps, 'variant'>
 > = ({ step }) => {
   const { t } = useTranslation()
@@ -356,7 +356,7 @@ export const SwapStepDetailsLabel: React.FC<
   )
 }
 
-export const ProtocolStepDetailsLabel: React.FC<
+const ProtocolStepDetailsLabel: React.FC<
   Omit<StepDetailsLabelProps, 'variant'>
 > = ({ step, feeConfig, relayerSupport }) => {
   const { t } = useTranslation()

package/src/components/Tabs/Tabs.style.tsx

@@ -7,7 +7,7 @@ import {
   tabsClasses,
 } from '@mui/material'
 
-export const Tabs = styled(MuiTabs)(({ theme }) => ({
+const Tabs = styled(MuiTabs)(({ theme }) => ({
   flex: 1,
   [`.${tabsClasses.indicator}`]: {
     top: theme.spacing(0.5),

package/src/components/Timer/TimerContent.tsx

@@ -1,6 +1,5 @@
 import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'
-import { Tooltip } from '@mui/material'
-import { Box } from '@mui/system'
+import { Box, Tooltip } from '@mui/material'
 import type { FC, PropsWithChildren } from 'react'
 import { useTranslation } from 'react-i18next'
 import { IconTypography } from '../IconTypography.js'

package/src/components/Token/Token.tsx

@@ -30,7 +30,7 @@ export const Token: FC<TokenProps & BoxProps> = ({ token, ...other }) => {
   return <TokenBase token={token} {...other} />
 }
 
-export const TokenFallback: FC<TokenProps & BoxProps> = ({
+const TokenFallback: FC<TokenProps & BoxProps> = ({
   token,
   isLoading,
   ...other
@@ -49,7 +49,7 @@ export const TokenFallback: FC<TokenProps & BoxProps> = ({
   )
 }
 
-export const TokenBase: FC<TokenProps & BoxProps> = ({
+const TokenBase: FC<TokenProps & BoxProps> = ({
   token,
   impactToken,
   enableImpactTokenTooltip,

package/src/components/TokenList/TokenListItem.tsx

@@ -62,24 +62,22 @@ export const TokenListItem: React.FC<TokenListItemProps> = memo(
   }
 )
 
-export const TokenListItemAvatar = memo(
-  ({ token }: TokenListItemAvatarProps) => {
-    const [isImageLoading, setIsImageLoading] = useState(true)
+const TokenListItemAvatar = memo(({ token }: TokenListItemAvatarProps) => {
+  const [isImageLoading, setIsImageLoading] = useState(true)
 
-    return (
-      <Avatar
-        src={token.logoURI}
-        alt={token.symbol}
-        sx={(theme) =>
-          isImageLoading ? { bgcolor: theme.vars.palette.grey[300] } : null
-        }
-        onLoad={() => setIsImageLoading(false)}
-      >
-        {token.symbol?.[0]}
-      </Avatar>
-    )
-  }
-)
+  return (
+    <Avatar
+      src={token.logoURI}
+      alt={token.symbol}
+      sx={(theme) =>
+        isImageLoading ? { bgcolor: theme.vars.palette.grey[300] } : null
+      }
+      onLoad={() => setIsImageLoading(false)}
+    >
+      {token.symbol?.[0]}
+    </Avatar>
+  )
+})
 
 interface OpenTokenDetailsButtonProps {
   tokenAddress: string | undefined
@@ -115,7 +113,7 @@ const OpenTokenDetailsButton = ({
   )
 }
 
-export const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
+const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
   ({
     onClick,
     token,
@@ -373,7 +371,7 @@ export const TokenListItemSkeleton = () => {
   )
 }
 
-export const TokenAmountSkeleton: React.FC = () => {
+const TokenAmountSkeleton: React.FC = () => {
   return (
     <Box
       sx={{

package/src/components/TokenList/types.ts

@@ -22,7 +22,7 @@ export interface VirtualizedTokenListProps {
   isAllNetworks: boolean
 }
 
-export interface TokenListItemBaseProps {
+interface TokenListItemBaseProps {
   onClick?(tokenAddress: string, chainId?: number): void
   size: number
   start: number

package/src/components/TokenList/useTokenSelect.ts

@@ -10,11 +10,6 @@ import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvarian
 import { WidgetEvent } from '../../types/events.js'
 import type { DisabledUI } from '../../types/widget.js'
 
-export type UseTokenSelectArgs = {
-  formType: FormType
-  onClick?: () => void
-}
-
 export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
   const { subvariant, disabledUI } = useWidgetConfig()
   const splitSubvariant = useSplitSubvariantStore((store) => store.state)

package/src/components/TokenRate/TokenRate.tsx

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

package/src/components/TransactionDetails.tsx

@@ -102,7 +102,6 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
             feeCosts={feeCosts}
             relayerSupport={hasRelayerSupport}
           >
-            {/** biome-ignore lint/a11y/useSemanticElements: allowed in react */}
             <Box
               onClick={toggleCard}
               role="button"

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.30.0'
+export const version = '3.30.1'

package/src/hooks/timer/time.ts

@@ -8,16 +8,6 @@ export type TimeFromMillisecondsType = {
   days: number
 }
 
-export type AMPMType = '' | 'pm' | 'am'
-
-export type FormattedTimeFromMillisecondsType = {
-  milliseconds: number
-  seconds: number
-  minutes: number
-  hours: number
-  ampm?: AMPMType
-}
-
 export function getTimeFromMilliseconds(
   millisecs: number,
   isCountDown = true

package/src/hooks/timer/useTimer.ts

@@ -9,14 +9,14 @@ import { validateExpiryTimestamp, validateOnExpire } from './validate.js'
 
 const SECOND_INTERVAL = 1000
 
-export type useTimerSettingsType = {
+type useTimerSettingsType = {
   expiryTimestamp: Date
   onExpire?: () => void
   autoStart?: boolean
   interval?: number
 }
 
-export type useTimerResultType = TimeFromMillisecondsType & {
+type useTimerResultType = TimeFromMillisecondsType & {
   start: () => void
   pause: () => void
   resume: () => void

package/src/hooks/useAccountsBalancesData.ts

@@ -16,7 +16,7 @@ export const useAccountsBalancesData = (
 
   // Filter out EVM tokens that do not have balances
   const { data: filteredTokens, isLoading: isCachedBalancesLoading } =
-    useFilteredTokensByBalance(accountsWithTokens)
+    useFilteredTokensByBalance(accountsWithTokens, formType)
 
   return {
     data: filteredTokens,

package/src/hooks/useAvailableChains.ts

@@ -6,7 +6,7 @@ import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { getConfigItemSets, isItemAllowedForSets } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 
-export type GetChainById = (
+type GetChainById = (
   chainId?: number,
   chains?: ExtendedChain[]
 ) => ExtendedChain | undefined

package/src/hooks/useExplorer.ts

@@ -7,7 +7,7 @@ import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 
 const sanitiseBaseUrl = (baseUrl: string) => baseUrl.trim().replace(/\/+$/, '')
 
-export type TransactionLinkProps = { chain?: Chain | number } & (
+type TransactionLinkProps = { chain?: Chain | number } & (
   | {
       txHash: string
       txLink?: never

package/src/hooks/useFilteredByTokenBalances.ts

@@ -1,4 +1,5 @@
 import {
+  type BaseToken,
   ChainType,
   getWalletBalances,
   type TokenExtended,
@@ -6,14 +7,20 @@ import {
 } from '@lifi/sdk'
 import { useQuery } from '@tanstack/react-query'
 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 { isSupportedToken } from '../utils/tokenList.js'
 
 export const useFilteredTokensByBalance = (
   accountsWithTokens?: Record<
     string,
     { chainType: ChainType; tokens: Record<number, TokenExtended[]> }
-  >
+  >,
+  formType?: FormType
 ) => {
+  const { tokens: configTokens } = useWidgetConfig()
+
   const evmAddress = useMemo(() => {
     const evmAccount = Object.entries(accountsWithTokens ?? {}).find(
       ([_, { chainType }]) => chainType === ChainType.EVM
@@ -75,10 +82,32 @@ export const useFilteredTokensByBalance = (
         const chainTokenSet = new Set(
           chainTokens.map((token) => token.address.toLowerCase())
         )
+
+        // Get allowed addresses from config tokens
+        const allowedAddressesConfig = getConfigItemSets(
+          configTokens,
+          (tokens: BaseToken[]) =>
+            new Set(
+              tokens
+                .filter((t) => Number(t.chainId) === chainId)
+                .map((t) => t.address.toLowerCase())
+            ),
+          formType
+        )
+
         const additionalTokens = balances.filter(
           (balance: WalletTokenExtended) => {
             const balanceKey = balance.address.toLowerCase()
-            return !chainTokenSet.has(balanceKey) && isSupportedToken(balance)
+            return (
+              !chainTokenSet.has(balanceKey) &&
+              isSupportedToken(balance) &&
+              isFormItemAllowed(
+                balance,
+                allowedAddressesConfig,
+                formType,
+                (t) => t.address.toLowerCase()
+              )
+            )
           }
         ) as TokenExtended[]
 
@@ -95,7 +124,7 @@ export const useFilteredTokensByBalance = (
     }
 
     return result
-  }, [accountsWithTokens, existingBalances])
+  }, [accountsWithTokens, existingBalances, configTokens, formType])
 
   return { data: accountsWithFilteredTokens, isLoading }
 }

package/src/hooks/useListHeight.ts

@@ -51,8 +51,8 @@ interface UseContentHeightProps {
   headerRef?: RefObject<HTMLElement | null>
 }
 
-export const defaultMinListHeight = 360
-export const minMobileListHeight = 160
+const defaultMinListHeight = 360
+const minMobileListHeight = 160
 
 // NOTE: this hook is implicitly tied to the widget height functionality in the
 //   AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts

package/src/hooks/useRoutes.ts

@@ -5,6 +5,7 @@ import {
   getContractCallsQuote,
   getRelayerQuote,
   getRoutes,
+  isGaslessStep,
   isRelayerStep,
   LiFiErrorCode,
 } from '@lifi/sdk'
@@ -331,8 +332,9 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           return
         }
 
-        const isObservableRelayerRoute =
-          observableRoute?.steps?.some(isRelayerStep)
+        const isObservableRelayerRoute = observableRoute?.steps?.some(
+          (step) => isRelayerStep(step) && isGaslessStep(step, fromChain)
+        )
 
         const shouldUseMainRoutes =
           !observableRoute || !isObservableRelayerRoute

package/src/hooks/useToAddressAutoPopulate.ts

@@ -7,7 +7,7 @@ import { useSendToWalletActions } from '../stores/settings/useSendToWalletStore.
 import { getChainTypeFromAddress } from '../utils/chainType.js'
 import { useAvailableChains } from './useAvailableChains.js'
 
-export type UpdateToAddressArgs = {
+type UpdateToAddressArgs = {
   formType: FormType
   selectedToAddress?: string
   selectedChainId?: number

package/src/hooks/useToken.ts

@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { useTokenSearch } from './useTokenSearch.js'
 import { useTokens } from './useTokens.js'
 
@@ -8,10 +9,15 @@ export const useToken = (
 ) => {
   const { allTokens, isLoading: isTokensLoading } = useTokens()
 
-  const token =
-    chainId && tokenAddress
-      ? allTokens?.[chainId]?.find((t) => t.address === tokenAddress)
-      : undefined
+  const token = useMemo(
+    () =>
+      chainId && tokenAddress
+        ? allTokens?.[chainId]?.find(
+            (t) => t.address.toLowerCase() === tokenAddress.toLowerCase()
+          )
+        : undefined,
+    [allTokens, chainId, tokenAddress]
+  )
 
   const tokenSearchEnabled =
     !!chainId && !!tokenAddress && (latest || (!isTokensLoading && !token))

package/src/hooks/useTokenAddressBalance.ts

@@ -1,3 +1,4 @@
+import type { TokenAmount } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useChain } from './useChain.js'
 import { useToken } from './useToken.js'
@@ -18,7 +19,7 @@ export const useTokenAddressBalance = (
   } = useTokenBalance(account?.address, token)
 
   return {
-    token: tokenBalance,
+    token: tokenBalance ?? (token as TokenAmount),
     chain,
     isLoading: isBalanceLoading || isChainLoading || isTokenLoading,
     refetch,

package/src/hooks/useTokenBalances.ts

@@ -16,7 +16,7 @@ export const useTokenBalances = (
     allTokens,
     isLoading: isTokensLoading,
     isSearchLoading,
-  } = useTokens(formType, search)
+  } = useTokens(formType, search, isAllNetworks ? undefined : selectedChainId)
 
   const { data: accountsWithAllTokens, isLoading: isAccountsLoading } =
     useAccountsBalancesData(selectedChainId, formType, isAllNetworks, allTokens)

package/src/hooks/useTokenSearch.ts

@@ -35,18 +35,15 @@ export const useTokenSearch = (
             new Set(
               tokens
                 .filter((t) => t.chainId === token.chainId)
-                .map((t) => t.address)
+                .map((t) => t.address.toLowerCase())
             ),
           formType
         )
 
         // Return undefined if the token is denied
         if (
-          !isFormItemAllowed(
-            token,
-            filteredConfigTokens,
-            formType,
-            (t) => t.address
+          !isFormItemAllowed(token, filteredConfigTokens, formType, (t) =>
+            t.address.toLowerCase()
           )
         ) {
           return undefined
@@ -58,7 +55,7 @@ export const useTokenSearch = (
             if (
               data &&
               !data.tokens[chainId as number]?.some(
-                (t) => t.address === token.address
+                (t) => t.address.toLowerCase() === token.address.toLowerCase()
               )
             ) {
               const clonedData = { ...data, tokens: { ...data.tokens } }