0xtrails 0.6.6 → 0.7.0

package/src/tokens.ts

@@ -1,9 +1,9 @@
 import { useQuery } from "@tanstack/react-query"
-import { zeroAddress, erc20Abi } from "viem"
+import { erc20Abi, zeroAddress } from "viem"
 import {
   getChainInfo,
-  getSupportedChains,
   getChainRpcClient,
+  getSupportedSequenceChains,
 } from "./chains.js"
 import {
   arbitrum,
@@ -17,8 +17,8 @@ import {
   unichain,
   worldchain,
   bsc,
+  monad,
 } from "viem/chains"
-import { getRelaySupportedTokens, type Chain } from "./relaySdk.js"
 import { useReadContracts } from "wagmi"
 import { useMemo } from "react"
 import { logger } from "./logger.js"
@@ -26,16 +26,112 @@ import { isNativeToken } from "./utils.js"
 import { somnia } from "./customChains.js"
 import { PROD_SEQUENCE_METADATA_URL } from "./constants.js"
 import { useTrails } from "./widget/providers/TrailsProvider.js"
+import { useCustomTokens } from "./customTokens.js"
+import { getTrailsClient } from "./trailsClient.js"
+import { formatBalanceFields, formatPriceFields } from "./tokenBalances.js"
 
-export type SupportedToken = {
-  id: string
+// ApiTokenInfo type from trails-api (internal use only)
+interface ApiTokenInfo {
+  chainId: number
+  address: string
+  name: string
+  symbol: string
+  decimals: number
+  supportsBridging: boolean
+  logoUri?: string
+}
+
+/**
+ * Unified token type for the Trails SDK.
+ * This type replaces all previous token type variations (SupportedToken, TokenBalanceExtended, etc.)
+ */
+export type Token = {
+  // Required properties
   symbol: string
   name: string
-  contractAddress: string
   decimals: number
-  chainId: number
-  chainName: string
-  imageUrl: string
+  contractAddress: string // Use zeroAddress for native tokens
+
+  // Optional properties
+  tokenId?: string // For NFTs or specific token IDs if applicable
+  chainId?: number
+  chainName?: string
+  imageUrl?: string
+  isCustomToken?: boolean
+  isSufficientBalance?: boolean
+  isNativeToken?: boolean
+
+  // Balance fields (raw → formatted → display)
+  balance?: string // Raw big number string (e.g., "1000000000000000000")
+  balanceFormatted?: string // Formatted number without commas (e.g., "1.0")
+  balanceDisplay?: string // Formatted number with commas (e.g., "1,000.00")
+
+  // USD Balance fields
+  balanceUsd?: number // Raw number (e.g., 1000.50)
+  balanceUsdFormatted?: string // Formatted number without commas or currency symbol (e.g., "1000.50")
+  balanceUsdDisplay?: string // Formatted number with commas and currency symbol (e.g., "$1,000.50")
+
+  // Price fields (raw → formatted → display)
+  priceUsd?: number // Raw number (e.g., 1.50)
+  priceUsdFormatted?: string // Formatted number without commas or currency symbol (e.g., "1.50")
+  priceUsdDisplay?: string // Formatted number with commas and currency symbol (e.g., "$1.50")
+}
+
+// ============================================================================
+// Conversion Helper Functions
+// ============================================================================
+
+/**
+ * Converts ApiTokenInfo (from trails-api) to Token
+ */
+export function convertApiTokenInfoToToken(
+  tokenInfo: ApiTokenInfo,
+  options?: {
+    balance?: string
+    priceUsd?: number
+  },
+): Token {
+  const chainInfo = getChainInfo(tokenInfo.chainId)
+  const isNative = tokenInfo.address === zeroAddress || !tokenInfo.address
+
+  const result: Token = {
+    symbol: tokenInfo.symbol,
+    name: tokenInfo.name,
+    decimals: tokenInfo.decimals,
+    contractAddress: tokenInfo.address,
+    tokenId: `${tokenInfo.symbol}-${chainInfo?.name || `chain-${tokenInfo.chainId}`}`, // Generate tokenId
+    chainId: tokenInfo.chainId,
+    chainName: chainInfo?.name || `Chain ${tokenInfo.chainId}`,
+    imageUrl:
+      tokenInfo.logoUri ||
+      getTokenImageUrl({
+        chainId: tokenInfo.chainId,
+        contractAddress: tokenInfo.address,
+        symbol: tokenInfo.symbol,
+      }),
+    isNativeToken: isNative,
+  }
+
+  // Format balance if provided
+  if (options?.balance) {
+    const balanceFields = formatBalanceFields(
+      options.balance,
+      tokenInfo.decimals,
+    )
+    result.balance = balanceFields.balance
+    result.balanceFormatted = balanceFields.balanceFormatted
+    result.balanceDisplay = balanceFields.balanceDisplay
+  }
+
+  // Format price if provided
+  if (options?.priceUsd !== undefined) {
+    const priceFields = formatPriceFields(options.priceUsd)
+    result.priceUsd = priceFields.priceUsd
+    result.priceUsdFormatted = priceFields.priceUsdFormatted
+    result.priceUsdDisplay = priceFields.priceUsdDisplay
+  }
+
+  return result
 }
 
 export const commonTokenImages: Record<string, string> = {
@@ -58,6 +154,10 @@ export const commonTokenImages: Record<string, string> = {
   ANIME:
     "https://assets.coingecko.com/coins/images/53575/large/anime.jpg?1736748703",
   AVAX: "https://assets.sequence.info/images/tokens/large/43114/0x0000000000000000000000000000000000000000.webp",
+  MON: "https://assets.sequence.info/images/tokens/large/143/0x0000000000000000000000000000000000000000.webp",
+  USDT0:
+    "https://assets.coingecko.com/coins/images/53705/standard/usdt0.jpg?1737086183",
+  AUSD: "https://assets.coingecko.com/coins/images/39284/standard/Circle_Agora_White_on_Olive_1080px.png?1722961274",
 }
 
 const cacheVersion = "01"
@@ -76,15 +176,18 @@ interface TokenImageCacheEntry {
 const TOKEN_INFO_CACHE_KEY = `trails-sdk:token-info-cache:${cacheVersion}`
 const TOKEN_INFO_CACHE_EXPIRY = 24 * 60 * 60 * 1000 // 24 hours
 
+// Cache entry matches Token structure (without optional fields)
 interface TokenInfoCacheEntry {
-  id: string
+  tokenId?: string
   symbol: string
   name: string
   contractAddress: string
   decimals: number
   chainId: number
-  chainName: string
-  imageUrl: string
+  chainName?: string
+  imageUrl?: string
+  isNativeToken?: boolean
+  isCustomToken?: boolean
   timestamp: number
 }
 
@@ -115,31 +218,37 @@ function getTokenInfoCache(): Record<string, TokenInfoCacheEntry> {
   }
 }
 
-function setTokenInfoCache(
-  key: string,
-  tokenInfo: {
-    id: string
-    symbol: string
-    name: string
-    contractAddress: string
-    decimals: number
-    chainId: number
-    chainName: string
-    imageUrl: string
-  },
-): void {
+function setTokenInfoCache(key: string, tokenInfo: Token): void {
   if (typeof window === "undefined") return
 
   try {
     const cache = getTokenInfoCache()
-    cache[key] = {
-      ...tokenInfo,
+    // Ensure chainId is required for cache entry
+    if (!tokenInfo.chainId) {
+      logger.console.warn(
+        "[trails-sdk] Cannot cache token without chainId:",
+        tokenInfo,
+      )
+      return
+    }
+    const cacheEntry: TokenInfoCacheEntry = {
+      tokenId: tokenInfo.tokenId,
+      symbol: tokenInfo.symbol,
+      name: tokenInfo.name,
+      contractAddress: tokenInfo.contractAddress,
+      decimals: tokenInfo.decimals,
+      chainId: tokenInfo.chainId,
+      chainName: tokenInfo.chainName,
+      imageUrl: tokenInfo.imageUrl,
+      isNativeToken: tokenInfo.isNativeToken,
+      isCustomToken: tokenInfo.isCustomToken,
       timestamp: Date.now(),
     }
+    cache[key] = cacheEntry
     localStorage.setItem(TOKEN_INFO_CACHE_KEY, JSON.stringify(cache))
 
     // Also update in-memory cache
-    tokenInfoCache.set(key, cache[key])
+    tokenInfoCache.set(key, cacheEntry)
   } catch (error) {
     logger.console.warn("[trails-sdk] Failed to cache token info:", error)
   }
@@ -148,13 +257,25 @@ function setTokenInfoCache(
 function getCachedTokenInfo(
   chainId: number,
   contractAddress: string,
-): TokenInfoCacheEntry | null {
+): Token | null {
   const key = `${chainId}:${contractAddress.toLowerCase()}`
 
   // Check in-memory cache first
   const memoryEntry = tokenInfoCache.get(key)
   if (memoryEntry) {
-    return memoryEntry
+    // Convert cache entry to Token
+    return {
+      symbol: memoryEntry.symbol,
+      name: memoryEntry.name,
+      decimals: memoryEntry.decimals,
+      contractAddress: memoryEntry.contractAddress,
+      tokenId: memoryEntry.tokenId,
+      chainId: memoryEntry.chainId,
+      chainName: memoryEntry.chainName,
+      imageUrl: memoryEntry.imageUrl,
+      isNativeToken: memoryEntry.isNativeToken,
+      isCustomToken: memoryEntry.isCustomToken,
+    }
   }
 
   // Check localStorage cache
@@ -163,7 +284,19 @@ function getCachedTokenInfo(
   if (cachedEntry) {
     // Update in-memory cache
     tokenInfoCache.set(key, cachedEntry)
-    return cachedEntry
+    // Convert cache entry to Token
+    return {
+      symbol: cachedEntry.symbol,
+      name: cachedEntry.name,
+      decimals: cachedEntry.decimals,
+      contractAddress: cachedEntry.contractAddress,
+      tokenId: cachedEntry.tokenId,
+      chainId: cachedEntry.chainId,
+      chainName: cachedEntry.chainName,
+      imageUrl: cachedEntry.imageUrl,
+      isNativeToken: cachedEntry.isNativeToken,
+      isCustomToken: cachedEntry.isCustomToken,
+    }
   }
 
   return null
@@ -214,7 +347,7 @@ const PRIORITY_TOKENS = [
 ]
 
 // Sort function for tokens with the specified priority order
-function sortTokens(tokens: SupportedToken[]): SupportedToken[] {
+function sortTokens(tokens: Token[]): Token[] {
   return tokens.sort((a, b) => {
     // 1. Priority tokens first (ETH, USDC, USDT, DAI)
     const aPriority = PRIORITY_TOKENS.indexOf(a.symbol)
@@ -243,7 +376,9 @@ function sortTokens(tokens: SupportedToken[]): SupportedToken[] {
     }
 
     // 4. If symbols are the same, sort by chainName
-    return a.chainName.localeCompare(b.chainName)
+    const aChainName = a.chainName || ""
+    const bChainName = b.chainName || ""
+    return aChainName.localeCompare(bChainName)
   })
 }
 
@@ -258,17 +393,67 @@ export function getCachedTokenImageUrl(
   return cachedEntry?.imageUrl || ""
 }
 
-export async function getAllTokens(): Promise<SupportedToken[]> {
-  const relayTokens = (await getRelaySupportedTokens()) as SupportedToken[]
-  return relayTokens
-}
+export async function getSupportedTokens(config: {
+  trailsApiKey: string
+  trailsApiUrl: string
+}): Promise<Token[]> {
+  // Get chainIds from getSupportedSequenceChains
+  const sequenceChains = await getSupportedSequenceChains()
+  const chainIds = sequenceChains.map((chain) => chain.id)
+
+  // Get trails client using provided config
+  const trailsClient = getTrailsClient({
+    apiKey: config.trailsApiKey || "",
+    hostname: config.trailsApiUrl,
+  })
+
+  // Fetch tokens from trails-api using getTokenList
+  // This is the new endpoint that replaces getFeaturedTokens
+  // It uses go-tokendirectory to fetch efficiently and cache data from token-directory
+  // includeAllListed: true returns all tokens in the index (except external) even if not featured
+  // Featured tokens are always included and sorted at the top
+  let apiTokens: Token[] = []
+  try {
+    if (config.trailsApiKey && trailsClient) {
+      // Use getTokenList to get tokens for the specified chains
+      // includeAllListed: true includes all tokens in the index, not just featured
+      // The API applies limit per chain, and lists are sorted, normalized, and deduped
+      // When filtering by a single chain, use limit of 100, otherwise use 30 per chain
+      // Type assertion needed because TrailsClient extends TrailsApi which has these methods
+      const limit = chainIds.length === 1 ? 100 : 30
+      const tokenListResponse = await trailsClient.getTokenList({
+        chainIds,
+        includeAllListed: true,
+        limit, // Limit per chain - 100 for single chain, 30 for multiple chains
+      })
 
-export async function getSupportedTokens(): Promise<SupportedToken[]> {
-  const tokens = await getAllTokens()
-  for (const token of tokens) {
+      // The API already handles sorting (featured first, then alphabetically) and deduplication
+      // Map ApiTokenInfo from API to Token format using conversion helper
+      apiTokens = (tokenListResponse.tokens || []).map((tokenInfo: any) => {
+        const chainInfo = getChainInfo(tokenInfo.chainId)
+        const tokenId = `${tokenInfo.symbol}-${chainInfo?.name || `chain-${tokenInfo.chainId}`}`
+        const trailsToken = convertApiTokenInfoToToken(tokenInfo, {
+          // No balance or price data from getTokenList
+        })
+        // Set tokenId for consistency
+        trailsToken.tokenId = tokenId
+        return trailsToken
+      })
+    }
+  } catch (error) {
+    logger.console.warn(
+      "[trails-sdk] Error fetching tokens from trails-api:",
+      error,
+    )
+    // Continue with empty apiTokens - will fall back to commonTokens
+    apiTokens = []
+  }
+
+  // Ensure imageUrl is set for all tokens
+  for (const token of apiTokens) {
     if (!token.imageUrl) {
       token.imageUrl = getTokenImageUrl({
-        chainId: token.chainId,
+        chainId: token.chainId || 0,
         contractAddress: token.contractAddress,
         symbol: token.symbol,
       })
@@ -276,7 +461,7 @@ export async function getSupportedTokens(): Promise<SupportedToken[]> {
 
     // Use getTokenImageUrl directly (synchronous)
     const imageUrl = getTokenImageUrl({
-      chainId: token.chainId,
+      chainId: token.chainId || 0,
       contractAddress: token.contractAddress,
       symbol: token.symbol,
     })
@@ -285,46 +470,34 @@ export async function getSupportedTokens(): Promise<SupportedToken[]> {
     }
   }
 
-  const additionalTokens: SupportedToken[] = []
+  // Add common tokens that don't exist in API tokens
+  const additionalTokens: Token[] = []
   for (const commonToken of commonTokens) {
     const contractAddress = commonToken.contractAddress
-    const exists = tokens.some(
+    const exists = apiTokens.some(
       (t) =>
         t.chainId === commonToken.chainId &&
         t.contractAddress.toLowerCase() === contractAddress.toLowerCase(),
     )
     if (!exists) {
+      // commonTokens is now Token[], so we can use it directly
       additionalTokens.push(commonToken)
     }
   }
 
-  let supportedChains: Chain[] = []
-  try {
-    supportedChains = await getSupportedChains({ quoteProvider: "relay" })
-  } catch (error) {
-    logger.console.error("[trails-sdk] Error getting supported chains:", error)
-    // Fallback: include all chains that have tokens
-    supportedChains = []
-  }
+  const allTokens = [...apiTokens, ...additionalTokens]
 
-  const allTokens = [...tokens, ...additionalTokens]
+  // Filter to only include tokens from supported sequence chains
   const supportedChainTokens = allTokens.filter((token) => {
     // Always include Etherlink tokens
     if (token.chainId === etherlink.id) {
       return true
     }
-    // If we have supported chains, filter by them
-    if (supportedChains.length > 0) {
-      return supportedChains.some((chain) => chain.id === token.chainId)
-    }
-    // Fallback: include tokens from chains that are in both relay tokens and common tokens
-    const relayChainIds = tokens.map((t) => t.chainId)
-    const commonChainIds = commonTokens.map((t) => t.chainId)
-    const supportedChainIds = [
-      ...new Set([...relayChainIds, ...commonChainIds]),
-    ]
-    return supportedChainIds.includes(token.chainId)
+    // Filter by sequence chains
+    return token.chainId && chainIds.includes(token.chainId)
   })
+
+  // Remove duplicates
   const uniqueTokens = supportedChainTokens.filter(
     (token, index, self) =>
       index ===
@@ -337,30 +510,64 @@ export async function getSupportedTokens(): Promise<SupportedToken[]> {
   )
 
   // Sort tokens according to priority order
-  const sortedTokens = sortTokens(uniqueTokens as SupportedToken[])
+  const sortedTokens = sortTokens(uniqueTokens)
 
   return sortedTokens
 }
 
 export function useSupportedTokens({ chainId }: { chainId?: number } = {}): {
-  supportedTokens: SupportedToken[]
+  supportedTokens: Token[]
   isLoadingTokens: boolean
 } {
+  const { customTokens } = useCustomTokens()
+  const trailsConfig = useTrails()
   const { data: supportedTokens = [], isLoading: isLoadingTokens } = useQuery({
-    queryKey: ["supportedTokens"],
-    queryFn: getSupportedTokens,
+    queryKey: [
+      "supportedTokens",
+      trailsConfig.trailsApiUrl,
+      trailsConfig.trailsApiKey,
+    ],
+    queryFn: () =>
+      getSupportedTokens({
+        trailsApiKey: trailsConfig.trailsApiKey,
+        trailsApiUrl: trailsConfig.trailsApiUrl,
+      }),
     staleTime: 60 * 60 * 1000, // 1 hour - tokens rarely change
     gcTime: 24 * 60 * 60 * 1000, // 24 hours - keep in cache for a full day
     refetchOnWindowFocus: false, // Don't refetch when window regains focus
     refetchOnReconnect: false, // Don't refetch on network reconnect
   })
 
+  // Merge custom tokens with supported tokens
+  // Only add custom tokens that don't already exist in supported tokens
+  const mergedTokens = useMemo(() => {
+    const tokenMap = new Map<string, Token>()
+
+    // Add regular supported tokens first
+    supportedTokens.forEach((token) => {
+      const key = `${token.chainId}-${token.contractAddress.toLowerCase()}`
+      tokenMap.set(key, token)
+    })
+
+    // Only add custom tokens that don't already exist in supported tokens
+    // customTokens is already Token[]
+    customTokens.forEach((token) => {
+      const key = `${token.chainId || 0}-${token.contractAddress.toLowerCase()}`
+      // Only add if it doesn't already exist (supported tokens take precedence)
+      if (!tokenMap.has(key)) {
+        tokenMap.set(key, token)
+      }
+    })
+
+    return Array.from(tokenMap.values())
+  }, [supportedTokens, customTokens])
+
   const filteredTokens = useMemo(() => {
     if (!chainId) {
-      return supportedTokens
+      return mergedTokens
     }
-    return supportedTokens.filter((token) => token.chainId === chainId)
-  }, [supportedTokens, chainId])
+    return mergedTokens.filter((token) => token.chainId === chainId)
+  }, [mergedTokens, chainId])
 
   return {
     supportedTokens: filteredTokens || [],
@@ -424,30 +631,22 @@ export function getFormatttedTokenName(
 export async function getTokenInfo(
   chainId: number,
   contractAddress: string,
-): Promise<SupportedToken | null> {
+  config: { trailsApiKey: string; trailsApiUrl: string },
+): Promise<Token | null> {
   const normalizedAddress = contractAddress.toLowerCase()
 
   // Check cache first
   const cachedInfo = getCachedTokenInfo(chainId, normalizedAddress)
   if (cachedInfo) {
-    return {
-      id: cachedInfo.id,
-      symbol: cachedInfo.symbol,
-      name: cachedInfo.name,
-      contractAddress: cachedInfo.contractAddress,
-      decimals: cachedInfo.decimals,
-      chainId: cachedInfo.chainId,
-      chainName: cachedInfo.chainName,
-      imageUrl: cachedInfo.imageUrl,
-    }
+    return cachedInfo
   }
 
   // Check if it's a native token
   const chainInfo = getChainInfo(chainId)
   if (normalizedAddress === zeroAddress.toLowerCase()) {
     const decimals = chainInfo?.nativeCurrency.decimals ?? 18
-    const nativeInfo: SupportedToken = {
-      id: `${chainInfo?.nativeCurrency.symbol || "ETH"}-${chainInfo?.name || "ethereum"}`,
+    const nativeToken: Token = {
+      tokenId: `${chainInfo?.nativeCurrency.symbol || "ETH"}-${chainInfo?.name || "ethereum"}`,
       symbol: chainInfo?.nativeCurrency.symbol || "ETH",
       name: chainInfo?.nativeCurrency.name || "Ethereum",
       contractAddress: zeroAddress,
@@ -459,16 +658,17 @@ export async function getTokenInfo(
         contractAddress: zeroAddress,
         symbol: chainInfo?.nativeCurrency.symbol || "ETH",
       }),
+      isNativeToken: true,
     }
 
     // Cache the native token info
-    setTokenInfoCache(`${chainId}:${normalizedAddress}`, nativeInfo)
+    setTokenInfoCache(`${chainId}:${normalizedAddress}`, nativeToken)
 
-    return nativeInfo
+    return nativeToken
   }
 
   // Look in supported tokens
-  const tokens = await getSupportedTokens()
+  const tokens = await getSupportedTokens(config)
   const token = tokens.find(
     (t) =>
       t.chainId === chainId &&
@@ -515,8 +715,8 @@ export async function getTokenInfo(
     ])
 
     // Create token info from on-chain data
-    const onChainTokenInfo: SupportedToken = {
-      id: `${symbol}-${chainInfo.name}`,
+    const onChainToken: Token = {
+      tokenId: `${symbol}-${chainInfo.name}`,
       name: name,
       symbol: symbol,
       decimals: decimals,
@@ -531,13 +731,14 @@ export async function getTokenInfo(
     }
 
     // Cache the on-chain token info
-    setTokenInfoCache(`${chainId}:${normalizedAddress}`, onChainTokenInfo)
+    setTokenInfoCache(`${chainId}:${normalizedAddress}`, onChainToken)
 
     logger.console.log(
       "[trails-sdk] Fetched token info on-chain:",
-      onChainTokenInfo,
+      onChainToken,
     )
-    return onChainTokenInfo
+
+    return onChainToken
   } catch (error) {
     logger.console.error(
       "[trails-sdk] Error fetching on-chain token info:",
@@ -553,7 +754,11 @@ const HYPHENATED_SYMBOL_MAP: Record<string, string> = {
   "BNB-USD": "USDT",
 }
 
-export async function getTokenAddress(chainId: number, tokenSymbol: string) {
+export async function getTokenAddress(
+  chainId: number,
+  tokenSymbol: string,
+  config: { trailsApiKey: string; trailsApiUrl: string },
+) {
   const chainInfo = getChainInfo(chainId)
   // Normalize token symbol: trim whitespace and convert to uppercase for comparison
   const normalizedTokenSymbol = tokenSymbol.trim().toUpperCase()
@@ -563,7 +768,7 @@ export async function getTokenAddress(chainId: number, tokenSymbol: string) {
     return zeroAddress
   }
 
-  const tokens = await getSupportedTokens()
+  const tokens = await getSupportedTokens(config)
 
   // First try exact match (normalized)
   let token = tokens.find(
@@ -602,10 +807,16 @@ export function useTokenAddress({
   chainId,
   tokenSymbol,
 }: UseTokenAddressProps) {
+  const trailsConfig = useTrails()
   const { data: tokenAddress } = useQuery({
     queryKey: ["tokenAddress", chainId, tokenSymbol],
     queryFn: () =>
-      chainId && tokenSymbol ? getTokenAddress(chainId, tokenSymbol) : null,
+      chainId && tokenSymbol
+        ? getTokenAddress(chainId, tokenSymbol, {
+            trailsApiKey: trailsConfig.trailsApiKey,
+            trailsApiUrl: trailsConfig.trailsApiUrl,
+          })
+        : null,
     enabled: !!chainId && !!tokenSymbol,
     staleTime: 60 * 60 * 1000, // 1 hour - token addresses rarely change
     gcTime: 24 * 60 * 60 * 1000, // 24 hours - keep in cache for a full day
@@ -784,7 +995,7 @@ export function useTokenInfo({
   address: string
   chainId?: number
 }): {
-  tokenInfo: Partial<SupportedToken> | null
+  tokenInfo: Token | null
   isLoading: boolean
   error: Error | null
 } {
@@ -828,8 +1039,8 @@ export function useTokenInfo({
       const nativeName = chainInfo?.nativeCurrency.name || "Ethereum"
       const decimals = chainInfo?.nativeCurrency.decimals ?? 18
 
-      return {
-        id: `${nativeSymbol}-${chainInfo?.name || ""}`,
+      const nativeToken: Token = {
+        tokenId: `${nativeSymbol}-${chainInfo?.name || ""}`,
         name: nativeName,
         symbol: nativeSymbol,
         decimals,
@@ -841,27 +1052,24 @@ export function useTokenInfo({
           contractAddress: zeroAddress,
           symbol: nativeSymbol,
         }),
+        isNativeToken: true,
       }
+
+      // Cache the native token
+      setTokenInfoCache(`${chainId}:${address.toLowerCase()}`, nativeToken)
+
+      return nativeToken
     }
 
-    // If we have cached info, use it
+    // If we have cached info, use it directly (already Token)
     if (cachedInfo) {
-      return {
-        id: cachedInfo.id,
-        name: cachedInfo.name,
-        symbol: cachedInfo.symbol,
-        decimals: cachedInfo.decimals,
-        chainId: cachedInfo.chainId,
-        contractAddress: cachedInfo.contractAddress,
-        chainName: cachedInfo.chainName,
-        imageUrl: cachedInfo.imageUrl,
-      }
+      return cachedInfo
     }
 
     // If we have blockchain data, use it and cache it
     if (symbol?.result && name?.result && decimals?.result != null) {
-      const tokenInfo: SupportedToken = {
-        id: symbol.result,
+      const onChainToken: Token = {
+        tokenId: `${symbol.result}-${chainInfo?.name || ""}`,
         name: name.result,
         symbol: symbol.result,
         decimals: decimals.result,
@@ -875,10 +1083,10 @@ export function useTokenInfo({
         }),
       }
 
-      // Cache the result
-      setTokenInfoCache(`${chainId}:${address.toLowerCase()}`, tokenInfo)
+      // Cache the result as Token
+      setTokenInfoCache(`${chainId}:${address.toLowerCase()}`, onChainToken)
 
-      return tokenInfo
+      return onChainToken
     }
 
     return null
@@ -929,16 +1137,18 @@ export const tokenImageSymbolMap: Record<string, string> = {
   BAT: "BAT",
   ARB: "ARB",
   LINK: "LINK",
+  MON: "MON",
+  WMON: "MON",
 
   // vault tokens
   aBasUSDC: "USDC",
   steakUSDC: "USDC",
 }
 
-export const commonTokens: SupportedToken[] = [
+export const commonTokens: Token[] = [
   // Native tokens
   {
-    id: "ETH-ethereum",
+    tokenId: "ETH-ethereum",
     symbol: "ETH",
     name: "Ethereum",
     contractAddress: "0x0000000000000000000000000000000000000000",
@@ -946,9 +1156,10 @@ export const commonTokens: SupportedToken[] = [
     chainId: mainnet.id,
     chainName: mainnet.name,
     imageUrl: commonTokenImages.ETH!,
+    isNativeToken: true,
   },
   {
-    id: "ETH-arbitrum",
+    tokenId: "ETH-arbitrum",
     symbol: "ETH",
     name: "ETH Arbitrum",
     contractAddress: "0x0000000000000000000000000000000000000000",
@@ -956,9 +1167,10 @@ export const commonTokens: SupportedToken[] = [
     chainId: arbitrum.id,
     chainName: arbitrum.name,
     imageUrl: commonTokenImages.ETH!,
+    isNativeToken: true,
   },
   {
-    id: "ETH-optimism",
+    tokenId: "ETH-optimism",
     symbol: "ETH",
     name: "ETH Optimism",
     contractAddress: "0x0000000000000000000000000000000000000000",
@@ -966,9 +1178,10 @@ export const commonTokens: SupportedToken[] = [
     chainId: optimism.id,
     chainName: optimism.name,
     imageUrl: commonTokenImages.ETH!,
+    isNativeToken: true,
   },
   {
-    id: "ETH-base",
+    tokenId: "ETH-base",
     symbol: "ETH",
     name: "ETH Base",
     contractAddress: "0x0000000000000000000000000000000000000000",
@@ -976,9 +1189,10 @@ export const commonTokens: SupportedToken[] = [
     chainId: base.id,
     chainName: base.name,
     imageUrl: commonTokenImages.ETH!,
+    isNativeToken: true,
   },
   {
-    id: "POL-polygon",
+    tokenId: "POL-polygon",
     symbol: "POL",
     name: "Polygon",
     contractAddress: "0x0000000000000000000000000000000000000000",
@@ -986,11 +1200,12 @@ export const commonTokens: SupportedToken[] = [
     chainId: polygon.id,
     chainName: polygon.name,
     imageUrl: commonTokenImages.POL!,
+    isNativeToken: true,
   },
 
   // USDC
   {
-    id: "USDC-ethereum",
+    tokenId: "USDC-ethereum",
     symbol: "USDC",
     name: "USDC",
     contractAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
@@ -1000,7 +1215,7 @@ export const commonTokens: SupportedToken[] = [
     imageUrl: commonTokenImages.USDC!,
   },
   {
-    id: "USDC-arbitrum",
+    tokenId: "USDC-arbitrum",
     symbol: "USDC",
     name: "USDC Arbitrum",
     contractAddress: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
@@ -1010,7 +1225,7 @@ export const commonTokens: SupportedToken[] = [
     imageUrl: commonTokenImages.USDC!,
   },
   {
-    id: "USDC-avalanche",
+    tokenId: "USDC-avalanche",
     symbol: "USDC",
     name: "USDC Avalanche",
     contractAddress: "0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E",
@@ -1020,7 +1235,7 @@ export const commonTokens: SupportedToken[] = [
     imageUrl: commonTokenImages.USDC!,
   },
   {
-    id: "USDC-base",
+    tokenId: "USDC-base",
     symbol: "USDC",
     name: "USDC Base",
     contractAddress: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
@@ -1030,7 +1245,7 @@ export const commonTokens: SupportedToken[] = [
     imageUrl: commonTokenImages.USDC!,
   },
   {
-    id: "USDC-linea",
+    tokenId: "USDC-linea",
     symbol: "USDC",
     name: "USDC Linea",
     contractAddress: "0x176211869cA2b568f2A7D4EE941E073a821EE1ff",
@@ -1040,7 +1255,7 @@ export const commonTokens: SupportedToken[] = [
     imageUrl: commonTokenImages.USDC!,
   },
   {
-    id: "USDC-optimism",
+    tokenId: "USDC-optimism",
     symbol: "USDC",
     name: "USDC Optimism",
     contractAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85",
@@ -1050,7 +1265,7 @@ export const commonTokens: SupportedToken[] = [
     imageUrl: commonTokenImages.USDC!,
   },
   {
-    id: "USDC-polygon",
+    tokenId: "USDC-polygon",
     symbol: "USDC",
     name: "USDC Polygon",
     contractAddress: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359",
@@ -1060,7 +1275,7 @@ export const commonTokens: SupportedToken[] = [
     imageUrl: commonTokenImages.USDC!,
   },
   {
-    id: "USDC-unichain",
+    tokenId: "USDC-unichain",
     symbol: "USDC",
     name: "USDC Unichain",
     contractAddress: "0x078D782b760474a361dDA0AF3839290b0EF57AD6",
@@ -1070,7 +1285,7 @@ export const commonTokens: SupportedToken[] = [
     imageUrl: commonTokenImages.USDC!,
   },
   {
-    id: "USDC-worldchain",
+    tokenId: "USDC-worldchain",
     symbol: "USDC",
     name: "USDC WorldChain",
     contractAddress: "0x79A02482A880bCe3F13E09da970dC34dB4cD24D1",
@@ -1082,7 +1297,7 @@ export const commonTokens: SupportedToken[] = [
 
   // Basic Attention Token
   {
-    id: "BAT-ethereum",
+    tokenId: "BAT-ethereum",
     symbol: "BAT",
     name: "Basic Attention Token",
     contractAddress: "0x0D8775F648430679A709E98d2b0Cb6250d2887EF",
@@ -1092,7 +1307,7 @@ export const commonTokens: SupportedToken[] = [
     imageUrl: commonTokenImages.BAT!,
   },
   {
-    id: "BAT-polygon",
+    tokenId: "BAT-polygon",
     symbol: "BAT",
     name: "Basic Attention Token",
     contractAddress: "0x3Cef98bb43d732E2F285eE605a8158cDE967D219",
@@ -1102,7 +1317,7 @@ export const commonTokens: SupportedToken[] = [
     imageUrl: commonTokenImages.BAT!,
   },
   {
-    id: "BAT-avalanche",
+    tokenId: "BAT-avalanche",
     symbol: "BAT",
     name: "Basic Attention Token",
     contractAddress: "0x98443B96EA4b0858FDF3219Cd13e98C7A4690588",
@@ -1114,7 +1329,7 @@ export const commonTokens: SupportedToken[] = [
 
   // ARB
   {
-    id: "ARB-arbitrum",
+    tokenId: "ARB-arbitrum",
     symbol: "ARB",
     name: "Arbitrum",
     contractAddress: "0x912CE59144191C1204E64559FE8253a0e49E6548",
@@ -1126,7 +1341,7 @@ export const commonTokens: SupportedToken[] = [
 
   // Chainlink
   {
-    id: "LINK-ethereum",
+    tokenId: "LINK-ethereum",
     symbol: "LINK",
     name: "Chainlink",
     contractAddress: "0x514910771AF9Ca656af840dff83E8264EcF986CA",
@@ -1138,7 +1353,7 @@ export const commonTokens: SupportedToken[] = [
 
   // Etherlink tokens
   {
-    id: "XTZ-etherlink",
+    tokenId: "XTZ-etherlink",
     symbol: "XTZ",
     name: "Tezos",
     contractAddress: "0x0000000000000000000000000000000000000000",
@@ -1146,9 +1361,10 @@ export const commonTokens: SupportedToken[] = [
     chainId: etherlink.id,
     chainName: etherlink.name,
     imageUrl: commonTokenImages.XTZ as string,
+    isNativeToken: true,
   },
   {
-    id: "WXTZ-etherlink",
+    tokenId: "WXTZ-etherlink",
     symbol: "WXTZ",
     name: "Wrapped XTZ",
     contractAddress: "0xc9B53AB2679f573e480d01e0f49e2B5CFB7a3EAb",
@@ -1158,7 +1374,7 @@ export const commonTokens: SupportedToken[] = [
     imageUrl: commonTokenImages.WXTZ as string,
   },
   {
-    id: "USDC-etherlink",
+    tokenId: "USDC-etherlink",
     symbol: "USDC",
     name: "USD Coin",
     contractAddress: "0x796Ea11Fa2dD751eD01b53C372fFDB4AAa8f00F9",
@@ -1168,7 +1384,7 @@ export const commonTokens: SupportedToken[] = [
     imageUrl: commonTokenImages.USDC as string,
   },
   {
-    id: "WETH-etherlink",
+    tokenId: "WETH-etherlink",
     symbol: "WETH",
     name: "Wrapped ETH",
     contractAddress: "0xfc24f770F94edBca6D6f885E12d4317320BcB401",
@@ -1178,7 +1394,7 @@ export const commonTokens: SupportedToken[] = [
     imageUrl: commonTokenImages.WETH as string,
   },
   {
-    id: "USDT-etherlink",
+    tokenId: "USDT-etherlink",
     symbol: "USDT",
     name: "Bridged USDT",
     contractAddress: "0x2C03058C8AFC06713be23e58D2febC8337dbfE6A",
@@ -1188,7 +1404,7 @@ export const commonTokens: SupportedToken[] = [
     imageUrl: commonTokenImages.USDT as string,
   },
   {
-    id: "USDT-bsc",
+    tokenId: "USDT-bsc",
     symbol: "USDT",
     name: "Tether USD",
     contractAddress: "0x55d398326f99059ff775485246999027b3197955",
@@ -1198,7 +1414,7 @@ export const commonTokens: SupportedToken[] = [
     imageUrl: commonTokenImages.USDT as string,
   },
   {
-    id: "BNB-bsc",
+    tokenId: "BNB-bsc",
     symbol: "BNB",
     name: "BNB",
     contractAddress: "0x0000000000000000000000000000000000000000",
@@ -1206,11 +1422,12 @@ export const commonTokens: SupportedToken[] = [
     chainId: bsc.id,
     chainName: bsc.name,
     imageUrl: commonTokenImages.BNB as string,
+    isNativeToken: true,
   },
 
   // Somnia
   {
-    id: "SOMI-somnia",
+    tokenId: "SOMI-somnia",
     symbol: "SOMI",
     name: "Somnia",
     contractAddress: "0x0000000000000000000000000000000000000000",
@@ -1218,6 +1435,40 @@ export const commonTokens: SupportedToken[] = [
     chainId: somnia.id,
     chainName: somnia.name,
     imageUrl: commonTokenImages.SOMI as string,
+    isNativeToken: true,
+  },
+
+  // Monad
+  {
+    tokenId: "MON-monad",
+    symbol: "MON",
+    name: "Monad",
+    contractAddress: "0x0000000000000000000000000000000000000000",
+    decimals: 18,
+    chainId: monad.id,
+    chainName: monad.name,
+    imageUrl: commonTokenImages.MONAD as string,
+    isNativeToken: true,
+  },
+  {
+    tokenId: "WMON-monad",
+    symbol: "WMON",
+    name: "Wrapped MON",
+    contractAddress: "0x3bd359c1119da7da1d913d1c4d2b7c461115433a",
+    decimals: 18,
+    chainId: monad.id,
+    chainName: monad.name,
+    imageUrl: commonTokenImages.MON as string,
+  },
+  {
+    tokenId: "USDC-monad",
+    symbol: "USDC",
+    name: "USDC",
+    contractAddress: "0x754704Bc059F8C67012fEd69BC8A327a5aafb603",
+    decimals: 6,
+    chainId: monad.id,
+    chainName: monad.name,
+    imageUrl: commonTokenImages.USDC as string,
   },
 ]