@lifi/widget 4.4.0 → 4.6.0

package/src/utils/token.ts

@@ -1,6 +1,14 @@
-import type { BaseToken, RouteExtended, Token, TokenAmount } from '@lifi/sdk'
+import type {
+  BaseToken,
+  ExtendedChain,
+  RouteExtended,
+  StaticToken,
+  Token,
+  TokenAmount,
+} from '@lifi/sdk'
+import { ChainId } from '@lifi/sdk'
 import type { FormType } from '../stores/form/types.js'
-import type { TokensByChain, TokenWithVerified } from '../types/token.js'
+import type { TokensByChain, TokenWithFlags } from '../types/token.js'
 import type { WidgetChains, WidgetTokens } from '../types/widget.js'
 import { getConfigItemSets, isFormItemAllowed } from './item.js'
 
@@ -94,7 +102,8 @@ export const filterAllowedTokens = (
   dataTokens: TokensByChain | undefined,
   configTokens?: WidgetTokens,
   chainsConfig?: WidgetChains,
-  formType?: FormType
+  formType?: FormType,
+  nativeTokenAddresses?: Map<number, string>
 ): TokensByChain | undefined => {
   if (!dataTokens) {
     return
@@ -143,13 +152,14 @@ export const filterAllowedTokens = (
     )
 
     const verifiedAddresses = verifiedTokensSets?.get(chainId)
+    const nativeAddress = nativeTokenAddresses?.get(chainId)?.toLowerCase()
 
-    const chainTokens: TokenWithVerified[] = [
+    const chainTokens: TokenWithFlags[] = [
       ...(dataTokens[chainId] ?? []),
       ...chainIncludedTokens,
     ]
 
-    const filtered: TokenWithVerified[] = []
+    const filtered: TokenWithFlags[] = []
     const seenAddresses = new Set<string>()
     for (const token of chainTokens) {
       const address = token.address.toLowerCase()
@@ -167,12 +177,18 @@ export const filterAllowedTokens = (
         continue
       }
       // Include and verified-allowlist tokens are explicitly set by the
-      // integrator, mark them as verified
-      if (
+      // integrator, mark them as verified. Flags are only ever set to true,
+      // so a token that earns none keeps its cached object.
+      const markVerified =
         !token.verified &&
         (includedAddresses.has(address) || verifiedAddresses?.has(address))
-      ) {
-        filtered.push({ ...token, verified: true })
+      const markNative = !!nativeAddress && nativeAddress === address
+      if (markVerified || markNative) {
+        filtered.push({
+          ...token,
+          ...(markVerified ? { verified: true } : {}),
+          ...(markNative ? { native: true } : {}),
+        })
       } else {
         filtered.push(token)
       }
@@ -192,3 +208,31 @@ export const getExecutionToToken = (route: RouteExtended): TokenAmount => ({
       route.toAmount
   ),
 })
+
+/** Capitalized name of the first provider that verified the token. */
+export const getTokenVerificationProvider = (
+  token: Pick<StaticToken, 'verificationStatusBreakdown'>
+): string | undefined => {
+  const provider = token.verificationStatusBreakdown?.find(
+    (entry) => entry.result === 'verified'
+  )?.provider
+  return provider
+    ? `${provider.charAt(0).toUpperCase()}${provider.slice(1)}`
+    : undefined
+}
+
+/**
+ * Hyperliquid declares Arbitrum USDC as its native token, Lighter declares
+ * Ethereum USDC. Neither is a gas token you hold there. A chain-local
+ * stablecoin gas token, as on Arc or Stable, is genuine and stays.
+ */
+const chainIdsWithoutNativeToken = new Set([ChainId.HPL, ChainId.LTR])
+
+export const getNativeTokenAddresses = (
+  chains?: ExtendedChain[]
+): Map<number, string> =>
+  new Map(
+    chains
+      ?.filter((chain) => !chainIdsWithoutNativeToken.has(chain.id))
+      .map((chain) => [chain.id, chain.nativeToken.address])
+  )

package/src/utils/tokenList.ts

@@ -1,8 +1,4 @@
-import {
-  formatUnits,
-  type TokenExtended,
-  type WalletTokenExtended,
-} from '@lifi/sdk'
+import { formatUnits, type TokenExtended } from '@lifi/sdk'
 import type { TokenAmount, TokenAmountExtended } from '../types/token.js'
 import type { WidgetTokens } from '../types/widget.js'
 
@@ -279,6 +275,30 @@ export const isSearchMatch = (
   )
 }
 
-export const isSupportedToken = (token: WalletTokenExtended): boolean => {
-  return Boolean(token.name && token.symbol && token.priceUSD && token.chainId)
+/**
+ * Moves the chain's native token to the top of its own chain's list, unless an
+ * external list already places it. Returns the array unchanged when nothing
+ * moves, so a memo downstream keeps its reference.
+ */
+export const hoistNativeToken = (
+  tokens: TokenAmount[],
+  selectedChainId?: number
+): TokenAmount[] => {
+  if (!selectedChainId) {
+    return tokens
+  }
+  const index = tokens.findIndex(
+    (token) =>
+      token.native &&
+      token.chainId === selectedChainId &&
+      !token.featured &&
+      !token.popular &&
+      !token.pinned &&
+      !token.verified
+  )
+  // -1 is no native token, 0 is already first
+  if (index < 1) {
+    return tokens
+  }
+  return [tokens[index], ...tokens.slice(0, index), ...tokens.slice(index + 1)]
 }

package/dist/esm/hooks/useFilteredByTokenBalances.js

@@ -1,74 +0,0 @@
-import { getConfigItemSets, isFormItemAllowed } from "../utils/item.js";
-import { useWidgetConfig } from "../providers/WidgetProvider/WidgetProvider.js";
-import { useSDKClient } from "../providers/SDKClientProvider.js";
-import { getVerifiedTokensSets } from "../utils/token.js";
-import { isSupportedToken } from "../utils/tokenList.js";
-import { ChainType, getWalletBalances } from "@lifi/sdk";
-import { useMemo } from "react";
-import { useQuery } from "@tanstack/react-query";
-//#region src/hooks/useFilteredByTokenBalances.ts
-const useFilteredTokensByBalance = (accountsWithTokens, formType) => {
-	const { tokens: configTokens } = useWidgetConfig();
-	const sdkClient = useSDKClient();
-	const evmAddress = useMemo(() => {
-		return Object.entries(accountsWithTokens ?? {}).find(([_, { chainType }]) => chainType === ChainType.EVM)?.[0];
-	}, [accountsWithTokens]);
-	const { data: existingBalances, isLoading } = useQuery({
-		queryKey: ["existing-evm-balances", evmAddress],
-		queryFn: () => getWalletBalances(sdkClient, evmAddress ?? ""),
-		enabled: !!evmAddress,
-		refetchInterval: 3e4,
-		staleTime: 3e4,
-		retry: false
-	});
-	return {
-		data: useMemo(() => {
-			if (!accountsWithTokens) return;
-			const result = {};
-			if (!existingBalances) {
-				for (const [address, { tokens }] of Object.entries(accountsWithTokens)) result[address] = tokens;
-				return result;
-			}
-			const verifiedTokensSets = getVerifiedTokensSets(configTokens);
-			for (const [address, { tokens }] of Object.entries(accountsWithTokens)) {
-				result[address] = {};
-				for (const [chainIdStr, chainTokens] of Object.entries(tokens)) {
-					const chainId = Number(chainIdStr);
-					const verifiedAddresses = verifiedTokensSets?.get(chainId);
-					const balances = existingBalances?.[chainId];
-					if (!balances?.length) {
-						if (chainTokens.length) result[address][chainId] = chainTokens;
-						continue;
-					}
-					const balanceSet = new Set(balances.map((balance) => balance.address.toLowerCase()));
-					const filteredTokens = chainTokens.filter((token) => {
-						const tokenKey = token.address.toLowerCase();
-						return balanceSet.has(tokenKey);
-					});
-					const chainTokenSet = new Set(chainTokens.map((token) => token.address.toLowerCase()));
-					const allowedAddressesConfig = getConfigItemSets(configTokens, (tokens) => new Set(tokens.filter((t) => Number(t.chainId) === chainId).map((t) => t.address.toLowerCase())), formType);
-					const additionalTokens = balances.filter((balance) => {
-						const balanceKey = balance.address.toLowerCase();
-						return !chainTokenSet.has(balanceKey) && isSupportedToken(balance) && isFormItemAllowed(balance, allowedAddressesConfig, formType, (t) => t.address.toLowerCase());
-					}).map((token) => ({
-						...token,
-						verified: verifiedAddresses?.has(token.address.toLowerCase()) ?? false
-					}));
-					const allTokens = [...filteredTokens, ...additionalTokens];
-					if (allTokens.length) result[address][chainId] = allTokens;
-				}
-			}
-			return result;
-		}, [
-			accountsWithTokens,
-			existingBalances,
-			configTokens,
-			formType
-		]),
-		isLoading
-	};
-};
-//#endregion
-export { useFilteredTokensByBalance };
-
-//# sourceMappingURL=useFilteredByTokenBalances.js.map

package/dist/esm/hooks/useFilteredByTokenBalances.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFilteredByTokenBalances.js","names":[],"sources":["../../../src/hooks/useFilteredByTokenBalances.ts"],"sourcesContent":["import {\n  type BaseToken,\n  ChainType,\n  getWalletBalances,\n  type TokenExtended,\n  type WalletTokenExtended,\n} from '@lifi/sdk'\nimport { useQuery } from '@tanstack/react-query'\nimport { useMemo } from 'react'\nimport { useSDKClient } from '../providers/SDKClientProvider.js'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport type { FormType } from '../stores/form/types.js'\nimport { getConfigItemSets, isFormItemAllowed } from '../utils/item.js'\nimport { getVerifiedTokensSets } from '../utils/token.js'\nimport { isSupportedToken } from '../utils/tokenList.js'\n\nexport const useFilteredTokensByBalance = (\n  accountsWithTokens?: Record<\n    string,\n    { chainType: ChainType; tokens: Record<number, TokenExtended[]> }\n  >,\n  formType?: FormType\n): {\n  data: Record<string, Record<number, TokenExtended[]>> | undefined\n  isLoading: boolean\n} => {\n  const { tokens: configTokens } = useWidgetConfig()\n  const sdkClient = useSDKClient()\n\n  const evmAddress = useMemo(() => {\n    const evmAccount = Object.entries(accountsWithTokens ?? {}).find(\n      ([_, { chainType }]) => chainType === ChainType.EVM\n    )\n    return evmAccount?.[0]\n  }, [accountsWithTokens])\n\n  const { data: existingBalances, isLoading } = useQuery({\n    queryKey: ['existing-evm-balances', evmAddress],\n    queryFn: () => getWalletBalances(sdkClient, evmAddress ?? ''),\n    enabled: !!evmAddress,\n    refetchInterval: 30_000, // 30 seconds\n    staleTime: 30_000, // 30 seconds\n    retry: false,\n  })\n\n  const accountsWithFilteredTokens = useMemo(() => {\n    if (!accountsWithTokens) {\n      return undefined\n    }\n\n    // Early return if no existing balances - return all tokens\n    const result: Record<string, Record<number, TokenExtended[]>> = {}\n    if (!existingBalances) {\n      for (const [address, { tokens }] of Object.entries(accountsWithTokens)) {\n        result[address] = tokens\n      }\n      return result\n    }\n\n    const verifiedTokensSets = getVerifiedTokensSets(configTokens)\n\n    for (const [address, { tokens }] of Object.entries(accountsWithTokens)) {\n      result[address] = {}\n\n      for (const [chainIdStr, chainTokens] of Object.entries(tokens)) {\n        const chainId = Number(chainIdStr)\n        const verifiedAddresses = verifiedTokensSets?.get(chainId)\n        // Get balances for this specific chain\n        const balances = existingBalances?.[chainId]\n        // If no balances, RPC all tokens of the chain\n        if (!balances?.length) {\n          if (chainTokens.length) {\n            result[address][chainId] = chainTokens\n          }\n          continue\n        }\n\n        // Optimize token matching with Set for O(1) lookup\n        const balanceSet = new Set(\n          balances.map((balance: WalletTokenExtended) =>\n            balance.address.toLowerCase()\n          )\n        )\n\n        // Get tokens that are in chainTokens and have balances\n        const filteredTokens = chainTokens.filter((token) => {\n          const tokenKey = token.address.toLowerCase()\n          return balanceSet.has(tokenKey)\n        })\n\n        // Get tokens that are in balances but not in chainTokens\n        const chainTokenSet = new Set(\n          chainTokens.map((token) => token.address.toLowerCase())\n        )\n\n        // Get allowed addresses from config tokens\n        const allowedAddressesConfig = getConfigItemSets(\n          configTokens,\n          (tokens: BaseToken[]) =>\n            new Set(\n              tokens\n                .filter((t) => Number(t.chainId) === chainId)\n                .map((t) => t.address.toLowerCase())\n            ),\n          formType\n        )\n\n        const additionalTokens = balances\n          .filter((balance: WalletTokenExtended) => {\n            const balanceKey = balance.address.toLowerCase()\n            return (\n              !chainTokenSet.has(balanceKey) &&\n              isSupportedToken(balance) &&\n              isFormItemAllowed(\n                balance,\n                allowedAddressesConfig,\n                formType,\n                (t) => t.address.toLowerCase()\n              )\n            )\n          })\n          // Mark tokens from wallet balances as unverified unless allowlisted\n          .map((token: WalletTokenExtended) => ({\n            ...token,\n            verified:\n              verifiedAddresses?.has(token.address.toLowerCase()) ?? false,\n          })) as TokenExtended[]\n\n        // Combine both sets of tokens - convert WalletTokenExtended to TokenAmount\n        const allTokens = [\n          ...filteredTokens,\n          ...additionalTokens,\n        ] as TokenExtended[]\n\n        if (allTokens.length) {\n          result[address][chainId] = allTokens\n        }\n      }\n    }\n\n    return result\n  }, [accountsWithTokens, existingBalances, configTokens, formType])\n\n  return { data: accountsWithFilteredTokens, isLoading }\n}\n"],"mappings":";;;;;;;;;AAgBA,MAAa,8BACX,oBAIA,aAIG;CACH,MAAM,EAAE,QAAQ,iBAAiB,gBAAgB;CACjD,MAAM,YAAY,aAAa;CAE/B,MAAM,aAAa,cAAc;EAI/B,OAHmB,OAAO,QAAQ,sBAAsB,CAAC,CAAC,CAAC,CAAC,MACzD,CAAC,GAAG,EAAE,iBAAiB,cAAc,UAAU,GAElC,CAAC,GAAG;CACtB,GAAG,CAAC,kBAAkB,CAAC;CAEvB,MAAM,EAAE,MAAM,kBAAkB,cAAc,SAAS;EACrD,UAAU,CAAC,yBAAyB,UAAU;EAC9C,eAAe,kBAAkB,WAAW,cAAc,EAAE;EAC5D,SAAS,CAAC,CAAC;EACX,iBAAiB;EACjB,WAAW;EACX,OAAO;CACT,CAAC;CAoGD,OAAO;EAAE,MAlG0B,cAAc;GAC/C,IAAI,CAAC,oBACH;GAIF,MAAM,SAA0D,CAAC;GACjE,IAAI,CAAC,kBAAkB;IACrB,KAAK,MAAM,CAAC,SAAS,EAAE,aAAa,OAAO,QAAQ,kBAAkB,GACnE,OAAO,WAAW;IAEpB,OAAO;GACT;GAEA,MAAM,qBAAqB,sBAAsB,YAAY;GAE7D,KAAK,MAAM,CAAC,SAAS,EAAE,aAAa,OAAO,QAAQ,kBAAkB,GAAG;IACtE,OAAO,WAAW,CAAC;IAEnB,KAAK,MAAM,CAAC,YAAY,gBAAgB,OAAO,QAAQ,MAAM,GAAG;KAC9D,MAAM,UAAU,OAAO,UAAU;KACjC,MAAM,oBAAoB,oBAAoB,IAAI,OAAO;KAEzD,MAAM,WAAW,mBAAmB;KAEpC,IAAI,CAAC,UAAU,QAAQ;MACrB,IAAI,YAAY,QACd,OAAO,QAAQ,CAAC,WAAW;MAE7B;KACF;KAGA,MAAM,aAAa,IAAI,IACrB,SAAS,KAAK,YACZ,QAAQ,QAAQ,YAAY,CAC9B,CACF;KAGA,MAAM,iBAAiB,YAAY,QAAQ,UAAU;MACnD,MAAM,WAAW,MAAM,QAAQ,YAAY;MAC3C,OAAO,WAAW,IAAI,QAAQ;KAChC,CAAC;KAGD,MAAM,gBAAgB,IAAI,IACxB,YAAY,KAAK,UAAU,MAAM,QAAQ,YAAY,CAAC,CACxD;KAGA,MAAM,yBAAyB,kBAC7B,eACC,WACC,IAAI,IACF,OACG,QAAQ,MAAM,OAAO,EAAE,OAAO,MAAM,OAAO,CAAC,CAC5C,KAAK,MAAM,EAAE,QAAQ,YAAY,CAAC,CACvC,GACF,QACF;KAEA,MAAM,mBAAmB,SACtB,QAAQ,YAAiC;MACxC,MAAM,aAAa,QAAQ,QAAQ,YAAY;MAC/C,OACE,CAAC,cAAc,IAAI,UAAU,KAC7B,iBAAiB,OAAO,KACxB,kBACE,SACA,wBACA,WACC,MAAM,EAAE,QAAQ,YAAY,CAC/B;KAEJ,CAAC,CAAC,CAED,KAAK,WAAgC;MACpC,GAAG;MACH,UACE,mBAAmB,IAAI,MAAM,QAAQ,YAAY,CAAC,KAAK;KAC3D,EAAE;KAGJ,MAAM,YAAY,CAChB,GAAG,gBACH,GAAG,gBACL;KAEA,IAAI,UAAU,QACZ,OAAO,QAAQ,CAAC,WAAW;IAE/B;GACF;GAEA,OAAO;EACT,GAAG;GAAC;GAAoB;GAAkB;GAAc;EAAQ,CAExB;EAAG;CAAU;AACvD"}

package/src/hooks/useFilteredByTokenBalances.ts

@@ -1,145 +0,0 @@
-import {
-  type BaseToken,
-  ChainType,
-  getWalletBalances,
-  type TokenExtended,
-  type WalletTokenExtended,
-} from '@lifi/sdk'
-import { useQuery } from '@tanstack/react-query'
-import { useMemo } from 'react'
-import { useSDKClient } from '../providers/SDKClientProvider.js'
-import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
-import type { FormType } from '../stores/form/types.js'
-import { getConfigItemSets, isFormItemAllowed } from '../utils/item.js'
-import { getVerifiedTokensSets } from '../utils/token.js'
-import { isSupportedToken } from '../utils/tokenList.js'
-
-export const useFilteredTokensByBalance = (
-  accountsWithTokens?: Record<
-    string,
-    { chainType: ChainType; tokens: Record<number, TokenExtended[]> }
-  >,
-  formType?: FormType
-): {
-  data: Record<string, Record<number, TokenExtended[]>> | undefined
-  isLoading: boolean
-} => {
-  const { tokens: configTokens } = useWidgetConfig()
-  const sdkClient = useSDKClient()
-
-  const evmAddress = useMemo(() => {
-    const evmAccount = Object.entries(accountsWithTokens ?? {}).find(
-      ([_, { chainType }]) => chainType === ChainType.EVM
-    )
-    return evmAccount?.[0]
-  }, [accountsWithTokens])
-
-  const { data: existingBalances, isLoading } = useQuery({
-    queryKey: ['existing-evm-balances', evmAddress],
-    queryFn: () => getWalletBalances(sdkClient, evmAddress ?? ''),
-    enabled: !!evmAddress,
-    refetchInterval: 30_000, // 30 seconds
-    staleTime: 30_000, // 30 seconds
-    retry: false,
-  })
-
-  const accountsWithFilteredTokens = useMemo(() => {
-    if (!accountsWithTokens) {
-      return undefined
-    }
-
-    // Early return if no existing balances - return all tokens
-    const result: Record<string, Record<number, TokenExtended[]>> = {}
-    if (!existingBalances) {
-      for (const [address, { tokens }] of Object.entries(accountsWithTokens)) {
-        result[address] = tokens
-      }
-      return result
-    }
-
-    const verifiedTokensSets = getVerifiedTokensSets(configTokens)
-
-    for (const [address, { tokens }] of Object.entries(accountsWithTokens)) {
-      result[address] = {}
-
-      for (const [chainIdStr, chainTokens] of Object.entries(tokens)) {
-        const chainId = Number(chainIdStr)
-        const verifiedAddresses = verifiedTokensSets?.get(chainId)
-        // Get balances for this specific chain
-        const balances = existingBalances?.[chainId]
-        // If no balances, RPC all tokens of the chain
-        if (!balances?.length) {
-          if (chainTokens.length) {
-            result[address][chainId] = chainTokens
-          }
-          continue
-        }
-
-        // Optimize token matching with Set for O(1) lookup
-        const balanceSet = new Set(
-          balances.map((balance: WalletTokenExtended) =>
-            balance.address.toLowerCase()
-          )
-        )
-
-        // Get tokens that are in chainTokens and have balances
-        const filteredTokens = chainTokens.filter((token) => {
-          const tokenKey = token.address.toLowerCase()
-          return balanceSet.has(tokenKey)
-        })
-
-        // Get tokens that are in balances but not in chainTokens
-        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) &&
-              isFormItemAllowed(
-                balance,
-                allowedAddressesConfig,
-                formType,
-                (t) => t.address.toLowerCase()
-              )
-            )
-          })
-          // Mark tokens from wallet balances as unverified unless allowlisted
-          .map((token: WalletTokenExtended) => ({
-            ...token,
-            verified:
-              verifiedAddresses?.has(token.address.toLowerCase()) ?? false,
-          })) as TokenExtended[]
-
-        // Combine both sets of tokens - convert WalletTokenExtended to TokenAmount
-        const allTokens = [
-          ...filteredTokens,
-          ...additionalTokens,
-        ] as TokenExtended[]
-
-        if (allTokens.length) {
-          result[address][chainId] = allTokens
-        }
-      }
-    }
-
-    return result
-  }, [accountsWithTokens, existingBalances, configTokens, formType])
-
-  return { data: accountsWithFilteredTokens, isLoading }
-}