@lifi/widget 3.30.0 → 3.30.2

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 } }

package/src/hooks/useTokens.ts

@@ -1,20 +1,36 @@
-import { ChainType, getTokens, type TokensExtendedResponse } from '@lifi/sdk'
+import {
+  ChainType,
+  getToken,
+  getTokens,
+  type TokensExtendedResponse,
+} from '@lifi/sdk'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useMemo } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { FormType } from '../stores/form/types.js'
+import {
+  defaultChainIdsByType,
+  getChainTypeFromAddress,
+} from '../utils/chainType.js'
 import { isItemAllowed } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 import { filterAllowedTokens } from '../utils/token.js'
 
-export const useTokens = (formType?: FormType, search?: string) => {
+export const useTokens = (
+  formType?: FormType,
+  search?: string,
+  chainId?: number
+) => {
   const {
     tokens: configTokens,
     chains: chainsConfig,
     keyPrefix,
   } = useWidgetConfig()
 
-  const { isLoading: isSearchLoading } = useBackgroundTokenSearch(search)
+  const { isLoading: isSearchLoading } = useBackgroundTokenSearch(
+    search,
+    chainId
+  )
 
   const { data, isLoading } = useQuery({
     queryKey: [getQueryKey('tokens', keyPrefix)],
@@ -59,13 +75,14 @@ export const useTokens = (formType?: FormType, search?: string) => {
 // This hook is used to search for tokens in the background.
 // It updates the main tokens cache with the search results,
 // if any of the tokens are not already in the cache.
-const useBackgroundTokenSearch = (search?: string) => {
+const useBackgroundTokenSearch = (search?: string, chainId?: number) => {
   const { chains: chainsConfig, keyPrefix } = useWidgetConfig()
   const queryClient = useQueryClient()
 
   const { isLoading: isSearchLoading } = useQuery({
-    queryKey: [getQueryKey('tokens-search', keyPrefix), search],
-    queryFn: async ({ queryKey: [, searchQuery], signal }) => {
+    queryKey: [getQueryKey('tokens-search', keyPrefix), search, chainId],
+    queryFn: async ({ queryKey, signal }) => {
+      const [, searchQuery, chainId] = queryKey as [string, string, number]
       const chainTypes = [
         ChainType.EVM,
         ChainType.SVM,
@@ -83,6 +100,27 @@ const useBackgroundTokenSearch = (search?: string) => {
         { signal }
       )
 
+      // If the chainId is not provided, try to get it from the search query
+      let _chainId = chainId
+      if (!_chainId) {
+        const chainType = getChainTypeFromAddress(searchQuery)
+        if (chainType) {
+          _chainId = defaultChainIdsByType[chainType]
+        }
+      }
+
+      // Fallback: If the main search returned no tokens for the specific chainId,
+      // fetch a single token using the /token endpoint
+      if (_chainId && searchQuery) {
+        const existingTokens = tokensResponse.tokens[_chainId] || []
+        if (!existingTokens.length) {
+          const token = await getToken(_chainId, searchQuery, { signal })
+          if (token) {
+            tokensResponse.tokens[_chainId] = [token]
+          }
+        }
+      }
+
       // Merge search results into main tokens cache
       if (searchQuery) {
         queryClient.setQueriesData<TokensExtendedResponse>(

package/src/i18n/pt.json

@@ -212,7 +212,7 @@
     "slippage": "A diferença percentual máxima entre o preço esperado, e o preço atual pelo qual a transferência é executada. Esse valor pode ser alterado nas configurações."
   },
   "main": {
-    "allNetworks": "",
+    "allNetworks": "Todas as redes",
     "allTokens": "Todos os tokens",
     "bridgeStepDetails": "Ponte de {{from}} para {{to}} via {{tool}}",
     "checkoutStepDetails": "Comprar via {{tool}}",
@@ -241,7 +241,7 @@
     "process": {
       "bridge": {
         "actionRequired": "Assinar a transação de transferência de fundos entre redes",
-        "messageRequired": "",
+        "messageRequired": "Assinar mensagem da ponte",
         "done": "Transação da ponte confirmada",
         "pending": "Transação de transferência de fundos entre redes, pendente",
         "started": "Preparando a transação da ponte"
@@ -260,7 +260,7 @@
       },
       "swap": {
         "actionRequired": "Assinar transação de troca",
-        "messageRequired": "",
+        "messageRequired": "Assinar mensagem da conversão",
         "done": "Conversão concluída",
         "pending": "Transação de troca pendente",
         "started": "Preparando a transação de conversão"
@@ -313,7 +313,7 @@
     "valueLoss": "Perda de Valor",
     "searchBridges": "Pesquisar pelo nome da ponte",
     "searchExchanges": "Pesquisar pelo nome da corretora",
-    "searchNetwork": ""
+    "searchNetwork": "Procurar rede"
   },
   "settings": {
     "appearance": "Aparência",

package/src/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx

@@ -37,7 +37,6 @@ export const SettingCardExpandable: React.FC<
         </CardTitleContainer>
         {!expanded && value}
       </CardRowButton>
-      {/** biome-ignore lint/a11y/useSemanticElements: allowed in react */}
       <Collapse
         id={collapseId}
         role="region"

package/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -1,14 +1,14 @@
 import Percent from '@mui/icons-material/Percent'
 import WarningRounded from '@mui/icons-material/WarningRounded'
-import { Box, debounce, Typography } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import type { ChangeEventHandler, FocusEventHandler } from 'react'
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSettingMonitor } from '../../../hooks/useSettingMonitor.js'
 import { useSettings } from '../../../stores/settings/useSettings.js'
 import { useSettingsActions } from '../../../stores/settings/useSettingsActions.js'
 import { defaultSlippage } from '../../../stores/settings/useSettingsStore.js'
-import { formatSlippage } from '../../../utils/format.js'
+import { formatInputAmount, formatSlippage } from '../../../utils/format.js'
 import { BadgedValue } from '../SettingsCard/BadgedValue.js'
 import { SettingCardExpandable } from '../SettingsCard/SettingCardExpandable.js'
 import {
@@ -18,7 +18,8 @@ import {
   SlippageLimitsWarningContainer,
 } from './SlippageSettings.style.js'
 
-const DEFAULT_CUSTOM_INPUT_VALUE = '0.5'
+const defaultSlippageInputValue = '0.5'
+const maxFractionDigits = 5
 
 export const SlippageSettings: React.FC = () => {
   const { t } = useTranslation()
@@ -35,7 +36,7 @@ export const SlippageSettings: React.FC = () => {
 
   const customInputValue =
     !slippage || slippage === defaultSlippage
-      ? DEFAULT_CUSTOM_INPUT_VALUE
+      ? defaultSlippageInputValue
       : slippage
 
   const [inputValue, setInputValue] = useState(customInputValue)
@@ -44,35 +45,37 @@ export const SlippageSettings: React.FC = () => {
     setValue('slippage', defaultSlippage)
   }
 
-  const debouncedSetValue = useMemo(() => debounce(setValue, 500), [setValue])
-
-  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = useCallback(
-    (event) => {
-      const { value } = event.target
-
-      const formattedValue = formatSlippage(value, defaultValue.current, true)
+  const formatAndSetSlippage = (value: string, returnInitial = false) => {
+    const formattedSlippage = formatSlippage(
+      value,
+      defaultValue.current,
+      returnInitial
+    )
+    const formattedValue =
+      Number(formattedSlippage) === 0 && !returnInitial
+        ? '0'
+        : formatInputAmount(formattedSlippage, maxFractionDigits, returnInitial)
+    const maxLength =
+      Number(formattedValue) < 10
+        ? maxFractionDigits + 2
+        : maxFractionDigits + 3
+    const slicedValue = formattedValue.slice(0, maxLength)
+    setInputValue(slicedValue)
+    setValue('slippage', slicedValue.length ? slicedValue : defaultSlippage)
+  }
 
-      setInputValue(formattedValue)
-      debouncedSetValue(
-        'slippage',
-        formattedValue.length ? formattedValue : defaultSlippage
-      )
-    },
-    [debouncedSetValue]
-  )
+  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {
+    formatAndSetSlippage(event.target.value, true)
+  }
 
   const handleInputFocus: FocusEventHandler<HTMLInputElement> = (event) => {
     setFocused('input')
+    formatAndSetSlippage(event.target.value)
+  }
 
-    const { value } = event.target
-
-    const formattedValue = formatSlippage(value, defaultValue.current)
-    setInputValue(formattedValue)
-
-    setValue(
-      'slippage',
-      formattedValue.length ? formattedValue : defaultSlippage
-    )
+  const handleInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {
+    setFocused(undefined)
+    formatAndSetSlippage(event.target.value)
   }
 
   const badgeColor = isSlippageNotRecommended
@@ -126,7 +129,7 @@ export const SlippageSettings: React.FC = () => {
             onFocus={handleInputFocus}
             value={inputValue}
             autoComplete="off"
-            onBlur={() => setFocused(undefined)}
+            onBlur={handleInputBlur}
           />
         </SettingsFieldSet>
         {isSlippageNotRecommended && (

package/src/pages/TransactionPage/RouteTracker.tsx

@@ -5,7 +5,7 @@ import { useRoutes } from '../../hooks/useRoutes.js'
 import { useRouteExecutionStoreContext } from '../../stores/routes/RouteExecutionStore.js'
 import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js'
 
-export interface RouteTrackerProps {
+interface RouteTrackerProps {
   observableRouteId: string
   onChange: Dispatch<SetStateAction<string>>
   onFetching: Dispatch<SetStateAction<boolean>>

package/src/pages/TransactionPage/StatusBottomSheet.tsx

@@ -59,9 +59,11 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
   )
 }
 
-export const StatusBottomSheetContent: React.FC<
-  StatusBottomSheetContentProps
-> = ({ status, route, onClose }) => {
+const StatusBottomSheetContent: React.FC<StatusBottomSheetContentProps> = ({
+  status,
+  route,
+  onClose,
+}) => {
   const { t } = useTranslation()
   const { navigateBack, navigate } = useNavigateBack()
   const { setFieldValue } = useFieldActions()

package/src/providers/I18nProvider/types.ts

@@ -1,6 +1,6 @@
 import type * as languages from '../../i18n/index.js'
 
-export type PartialResource<T> = T extends object
+type PartialResource<T> = T extends object
   ? {
       [P in keyof T]?: PartialResource<T[P]>
     }
@@ -8,7 +8,7 @@ export type PartialResource<T> = T extends object
 
 export type LanguageKey = keyof typeof languages
 
-export type LanguageResource = typeof languages.en
+type LanguageResource = typeof languages.en
 
 export type LanguageResources =
   | {
@@ -18,7 +18,7 @@ export type LanguageResources =
       [language: string]: PartialResource<LanguageResource>
     }
 
-export type LanguageTranslationResource = {
+type LanguageTranslationResource = {
   [N in 'translation']: PartialResource<LanguageResource>
 }
 

package/src/providers/WalletProvider/EVMProvider.tsx

@@ -7,7 +7,7 @@ import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
 import { EVMBaseProvider } from './EVMBaseProvider.js'
 import { EVMExternalContext } from './EVMExternalContext.js'
 
-export function useInWagmiContext(): boolean {
+function useInWagmiContext(): boolean {
   const { chains } = useWidgetConfig()
   const context = useContext(WagmiContext)
 

package/src/providers/WalletProvider/SVMProvider.tsx

@@ -7,7 +7,7 @@ import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
 import { SVMBaseProvider } from './SVMBaseProvider.js'
 import { SVMExternalContext } from './SVMExternalContext.js'
 
-export function useInSolanaContext(): boolean {
+function useInSolanaContext(): boolean {
   const { chains } = useWidgetConfig()
   const context = useContext(ConnectionContext)
   return (

package/src/providers/WalletProvider/SuiProvider.tsx

@@ -7,7 +7,7 @@ import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
 import { SuiBaseProvider } from './SuiBaseProvider.js'
 import { SuiExternalContext } from './SuiExternalContext.js'
 
-export function useInSuiContext(): boolean {
+function useInSuiContext(): boolean {
   const { chains } = useWidgetConfig()
   const context = useContext(SuiClientContext)
 

package/src/providers/WalletProvider/UTXOProvider.tsx

@@ -7,7 +7,7 @@ import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
 import { UTXOBaseProvider } from './UTXOBaseProvider.js'
 import { UTXOExternalContext } from './UTXOExternalContext.js'
 
-export function useInBigmiContext(): boolean {
+function useInBigmiContext(): boolean {
   const { chains } = useWidgetConfig()
   const context = useContext(BigmiContext)
 

package/src/providers/WalletProvider/WalletProvider.tsx

@@ -25,7 +25,7 @@ export const WalletProvider: FC<PropsWithChildren> = ({ children }) => {
   )
 }
 
-export const WalletMenuProvider: FC<PropsWithChildren> = ({ children }) => {
+const WalletMenuProvider: FC<PropsWithChildren> = ({ children }) => {
   const { walletConfig } = useWidgetConfig()
   const { i18n } = useTranslation()
   const { internalChainTypes } = useExternalWalletProvider()

package/src/stores/bookmarks/BookmarkStore.tsx

@@ -5,7 +5,7 @@ import type { PersistStoreProviderProps } from '../types.js'
 import { createBookmarksStore } from './createBookmarkStore.js'
 import type { BookmarkState, BookmarkStore } from './types.js'
 
-export const BookmarkStoreContext = createContext<BookmarkStore | null>(null)
+const BookmarkStoreContext = createContext<BookmarkStore | null>(null)
 
 export const BookmarkStoreProvider: React.FC<PersistStoreProviderProps> = ({
   children,

package/src/stores/chains/ChainOrderStore.tsx

@@ -12,13 +12,9 @@ import type { PersistStoreProviderProps } from '../types.js'
 import { createChainOrderStore } from './createChainOrderStore.js'
 import type { ChainOrderState } from './types.js'
 
-export type ChainOrderStore = UseBoundStoreWithEqualityFn<
-  StoreApi<ChainOrderState>
->
+type ChainOrderStore = UseBoundStoreWithEqualityFn<StoreApi<ChainOrderState>>
 
-export const ChainOrderStoreContext = createContext<ChainOrderStore | null>(
-  null
-)
+const ChainOrderStoreContext = createContext<ChainOrderStore | null>(null)
 
 export function ChainOrderStoreProvider({
   children,
@@ -105,7 +101,7 @@ export function ChainOrderStoreProvider({
   )
 }
 
-export function useChainOrderStoreContext() {
+function useChainOrderStoreContext() {
   const useStore = useContext(ChainOrderStoreContext)
   if (!useStore) {
     throw new Error(

package/src/stores/chains/types.ts

@@ -1,6 +1,6 @@
 import type { FormType } from '../form/types.js'
 
-export interface ChainOrderProps {
+interface ChainOrderProps {
   chainOrder: {
     from: number[]
     to: number[]

package/src/stores/header/types.ts

@@ -3,7 +3,7 @@ import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
 
 export type HeaderStore = UseBoundStoreWithEqualityFn<StoreApi<HeaderState>>
 
-export interface HeaderStateBase {
+interface HeaderStateBase {
   element?: React.ReactNode | null
   title?: string
   headerHeight: number

package/src/stores/header/useHeaderStore.tsx

@@ -4,7 +4,7 @@ import { createWithEqualityFn } from 'zustand/traditional'
 import type { PersistStoreProviderProps } from '../types.js'
 import type { HeaderState, HeaderStore } from './types.js'
 
-export const HeaderStoreContext = createContext<HeaderStore | null>(null)
+const HeaderStoreContext = createContext<HeaderStore | null>(null)
 
 export function HeaderStoreProvider({ children }: PersistStoreProviderProps) {
   const storeRef = useRef<HeaderStore>(null)
@@ -18,7 +18,7 @@ export function HeaderStoreProvider({ children }: PersistStoreProviderProps) {
   )
 }
 
-export function useHeaderStoreContext() {
+function useHeaderStoreContext() {
   const useStore = useContext(HeaderStoreContext)
   if (!useStore) {
     throw new Error(
@@ -54,7 +54,7 @@ export function useSetHeaderHeight() {
   }
 }
 
-export const createHeaderStore = () =>
+const createHeaderStore = () =>
   createWithEqualityFn<HeaderState>(
     (set, get) => ({
       headerHeight: 108, // a basic default height

package/src/stores/inputMode/useInputModeStore.ts

@@ -1,7 +1,7 @@
 import { create } from 'zustand'
 import type { FormTypeProps } from '../form/types.js'
 
-export type InputMode = 'amount' | 'price'
+type InputMode = 'amount' | 'price'
 
 interface InputModeState {
   inputMode: Record<'from' | 'to', InputMode>

package/src/stores/routes/RouteExecutionStore.tsx

@@ -6,12 +6,13 @@ import type { PersistStoreProviderProps } from '../types.js'
 import { createRouteExecutionStore } from './createRouteExecutionStore.js'
 import type { RouteExecutionState } from './types.js'
 
-export type RouteExecutionStore = UseBoundStoreWithEqualityFn<
+type RouteExecutionStore = UseBoundStoreWithEqualityFn<
   StoreApi<RouteExecutionState>
 >
 
-export const RouteExecutionStoreContext =
-  createContext<RouteExecutionStore | null>(null)
+const RouteExecutionStoreContext = createContext<RouteExecutionStore | null>(
+  null
+)
 
 export function RouteExecutionStoreProvider({
   children,

package/src/stores/settings/types.ts

@@ -9,11 +9,7 @@ export type ValueSetter<S> = <K extends keyof S>(
   value: S[Extract<K, string>]
 ) => void
 
-export type ValueGetter<S> = <K extends keyof S>(key: K) => S[K]
-
-export type ValuesSetter<S> = <K extends keyof S>(
-  values: Record<K, S[Extract<K, string>]>
-) => void
+type ValueGetter<S> = <K extends keyof S>(key: K) => S[K]
 
 export const SettingsToolTypes = ['Bridges', 'Exchanges'] as const
 export type SettingsToolType = (typeof SettingsToolTypes)[number]
@@ -48,7 +44,7 @@ export interface SettingsActions {
 
 export type SettingsState = SettingsProps & SettingsActions
 
-export interface SendToWalletState {
+interface SendToWalletState {
   showSendToWallet: boolean
 }
 

package/src/stores/settings/useSettingsStore.ts

@@ -18,7 +18,7 @@ export const defaultConfigurableSettings: Pick<
   gasPrice: 'normal',
 }
 
-export const defaultSettings: SettingsProps = {
+const defaultSettings: SettingsProps = {
   gasPrice: 'normal',
   enabledAutoRefuel: true,
   disabledBridges: [],

package/src/stores/settings/useSplitSubvariantStore.tsx

@@ -8,8 +8,9 @@ import type {
   SplitSubvariantStore,
 } from './types.js'
 
-export const SplitSubvariantStoreContext =
-  createContext<SplitSubvariantStore | null>(null)
+const SplitSubvariantStoreContext = createContext<SplitSubvariantStore | null>(
+  null
+)
 
 const shouldRecreateStore = (
   store: SplitSubvariantStore,
@@ -34,7 +35,7 @@ export function SplitSubvariantStoreProvider({
   )
 }
 
-export function useSplitSubvariantStoreContext() {
+function useSplitSubvariantStoreContext() {
   const useStore = useContext(SplitSubvariantStoreContext)
   if (!useStore) {
     throw new Error(
@@ -51,7 +52,7 @@ export function useSplitSubvariantStore<T>(
   return useStore(useShallow(selector))
 }
 
-export const createSplitSubvariantStore = ({ state }: SplitSubvariantProps) =>
+const createSplitSubvariantStore = ({ state }: SplitSubvariantProps) =>
   createWithEqualityFn<SplitSubvariantState>(
     (set) => ({
       state,

package/src/types/events.ts

@@ -20,10 +20,6 @@ export enum WidgetEvent {
    * @deprecated Use `PageEntered` event instead.
    */
   ReviewTransactionPageEntered = 'reviewTransactionPageEntered',
-  /**
-   * @deprecated use useWalletManagementEvents hook.
-   */
-  WalletConnected = 'walletConnected',
   WidgetExpanded = 'widgetExpanded',
   PageEntered = 'pageEntered',
   FormFieldChanged = 'formFieldChanged',

package/src/utils/fees.ts

@@ -31,7 +31,7 @@ export const getAccumulatedFeeCostsBreakdown = (
   }
 }
 
-export const getGasCostsBreakdown = (route: RouteExtended): FeesBreakdown[] => {
+const getGasCostsBreakdown = (route: RouteExtended): FeesBreakdown[] => {
   return Array.from(
     route.steps
       .reduce((groupedGasCosts, step) => {
@@ -62,7 +62,7 @@ export const getGasCostsBreakdown = (route: RouteExtended): FeesBreakdown[] => {
   )
 }
 
-export const getFeeCostsBreakdown = (
+const getFeeCostsBreakdown = (
   route: RouteExtended,
   included?: boolean
 ): FeesBreakdown[] => {
@@ -101,7 +101,7 @@ export const getFeeCostsBreakdown = (
   )
 }
 
-export const getStepFeeCostsBreakdown = (
+const getStepFeeCostsBreakdown = (
   feeCosts: FeeCost[] | GasCost[]
 ): FeesBreakdown => {
   const { token } = feeCosts[0]

package/src/utils/format.ts

@@ -33,7 +33,7 @@ export function formatSlippage(
   if (Number.isNaN(parsedSlippage)) {
     return defaultValue
   }
-  if (parsedSlippage > 100) {
+  if (parsedSlippage >= 100) {
     return '100'
   }
   if (parsedSlippage < 0) {
@@ -73,6 +73,7 @@ export function formatInputAmount(
   }
   integer = integer.replace(/^0+|-/, '')
   fraction = fraction.replace(/(0+)$/, '')
+
   return `${integer || (fraction ? '0' : '')}${fraction ? `.${fraction}` : ''}`
 }
 

package/src/utils/navigationRoutes.ts

@@ -65,7 +65,7 @@ export const backButtonRoutes = [
   navigationRoutes.configuredWallets,
 ]
 
-export type NavigationRouteTypeKeys = keyof typeof navigationRoutes
+type NavigationRouteTypeKeys = keyof typeof navigationRoutes
 
 export type NavigationRouteType =
   (typeof navigationRoutes)[NavigationRouteTypeKeys]

package/src/utils/token.ts

@@ -49,13 +49,15 @@ export const filterAllowedTokens = (
         new Set(
           tokens
             .filter((t) => Number(t.chainId) === chainId)
-            .map((t) => t.address)
+            .map((t) => t.address.toLowerCase())
         ),
       formType
     )
 
     const filtered = chainTokens.filter((token) =>
-      isFormItemAllowed(token, allowedAddresses, formType, (t) => t.address)
+      isFormItemAllowed(token, allowedAddresses, formType, (t) =>
+        t.address.toLowerCase()
+      )
     )
 
     allowedTokensByChain[chainId] = filtered

package/src/utils/tokenList.ts

@@ -70,7 +70,7 @@ export const processTokenBalances = (
 }
 
 // NB: only for non-all-networks
-export const processedTypedTokens = (
+const processedTypedTokens = (
   tokens: TokenAmount[],
   tokensWithBalances: TokenAmount[],
   selectedChainId?: number,
@@ -110,13 +110,13 @@ export const processedTypedTokens = (
 
   // Filter out config-added tokens from main list
   const configTokenAddresses = new Set(
-    [...popularTokensFromConfig, ...featuredTokensFromConfig].map(
-      (t) => t.address
+    [...popularTokensFromConfig, ...featuredTokensFromConfig].map((t) =>
+      t.address.toLowerCase()
     )
   )
 
   const remainingTokens = tokens.filter(
-    (token) => !configTokenAddresses.has(token.address)
+    (token) => !configTokenAddresses.has(token.address.toLowerCase())
   )
 
   const otherTokens: TokenAmount[] = []