0xtrails 0.6.6 → 0.7.0

package/src/tokenBalances.ts

@@ -8,7 +8,7 @@ import type {
 } from "@0xsequence/indexer"
 import { ContractVerificationStatus } from "@0xsequence/indexer"
 import type { Page } from "@0xsequence/indexer"
-import type { TokenPrice as TrailsTokenPrice } from "@0xsequence/trails-api"
+import type { TokenPrice } from "@0xtrails/api"
 import { QueryClient, useQuery } from "@tanstack/react-query"
 import type { Address } from "ox"
 import { useEffect, useState } from "react"
@@ -17,7 +17,7 @@ import { useIndexerGatewayClient } from "./indexerClient.js"
 import { getTokenPrices, useTokenPrices } from "./prices.js"
 import { logger } from "./logger.js"
 import { getChainInfo } from "./chains.js"
-import { useGetTokenImageUrl, getTokenImageUrl } from "./tokens.js"
+import { getTokenImageUrl, type Token } from "./tokens.js"
 import type { TrailsClient } from "./trailsClient.js"
 import { useTrailsClient } from "./trailsClient.js"
 import { getFullErrorMessage } from "./error.js"
@@ -29,6 +29,139 @@ export type Price = {
   currency: string
 }
 
+// ============================================================================
+// Conversion Helpers for TokenBalance -> Token
+// ============================================================================
+
+/**
+ * Converts TokenBalance to Token
+ */
+function convertTokenBalanceToToken(
+  token: TokenBalance,
+  priceData?: TokenPrice,
+  chainInfo?: ReturnType<typeof getChainInfo>,
+): Token {
+  const chainId = token.contractInfo?.chainId || 0
+  const chain = chainInfo || getChainInfo(chainId)
+  const contractAddress = token.contractAddress || zeroAddress
+
+  const result: Token = {
+    symbol: token.contractInfo?.symbol || "???",
+    name: token.contractInfo?.name || "Unknown Token",
+    decimals: token.contractInfo?.decimals || 18,
+    contractAddress,
+    chainId,
+    chainName: chain?.name || `Chain ${chainId}`,
+    imageUrl: getTokenImageUrl({
+      chainId,
+      contractAddress,
+      symbol: token.contractInfo?.symbol || "???",
+      fallbackImageUrl: token.contractInfo?.logoURI,
+    }),
+    isNativeToken: false,
+  }
+
+  // Format balance if available
+  if (token.balance) {
+    const decimals = result.decimals
+    const balanceFields = formatBalanceFields(token.balance, decimals)
+    result.balance = balanceFields.balance
+    result.balanceFormatted = balanceFields.balanceFormatted
+    result.balanceDisplay = balanceFields.balanceDisplay
+  }
+
+  // Add price and USD balance if price data is available
+  if (priceData?.priceUsd !== undefined) {
+    const priceFields = formatPriceFields(priceData.priceUsd)
+    result.priceUsd = priceFields.priceUsd
+    result.priceUsdFormatted = priceFields.priceUsdFormatted
+    result.priceUsdDisplay = priceFields.priceUsdDisplay
+
+    if (token.balance) {
+      const price: Price = {
+        value: priceData.priceUsd,
+        currency: "USD",
+      }
+      const balanceUsd = getTokenBalanceUsd(token, price)
+      if (balanceUsd !== undefined) {
+        const usdFields = formatUsdFields(balanceUsd)
+        result.balanceUsd = usdFields.balanceUsd
+        result.balanceUsdFormatted = usdFields.balanceUsdFormatted
+        result.balanceUsdDisplay = usdFields.balanceUsdDisplay
+      }
+    }
+  }
+
+  // Default isSufficientBalance to true
+  result.isSufficientBalance = true
+
+  return result
+}
+
+/**
+ * Converts NativeTokenBalance to Token
+ */
+function convertNativeTokenBalanceToToken(
+  token: NativeTokenBalance,
+  priceData?: TokenPrice,
+  chainInfo?: ReturnType<typeof getChainInfo>,
+): Token {
+  const chainId = token.chainId
+  const chain = chainInfo || getChainInfo(chainId)
+  const symbol = chain?.nativeCurrency.symbol || "ETH"
+
+  const result: Token = {
+    symbol,
+    name: chain?.nativeCurrency.name || "Native Token",
+    decimals: chain?.nativeCurrency.decimals || 18,
+    contractAddress: zeroAddress,
+    chainId,
+    chainName: chain?.name || `Chain ${chainId}`,
+    imageUrl: getTokenImageUrl({
+      chainId,
+      contractAddress: zeroAddress,
+      symbol,
+    }),
+    isNativeToken: true,
+  }
+
+  // Format balance if available
+  if (token.balance) {
+    const decimals = result.decimals
+    const balanceFields = formatBalanceFields(token.balance, decimals)
+    result.balance = balanceFields.balance
+    result.balanceFormatted = balanceFields.balanceFormatted
+    result.balanceDisplay = balanceFields.balanceDisplay
+  }
+
+  // Add price and USD balance if price data is available
+  if (priceData?.priceUsd !== undefined) {
+    const priceFields = formatPriceFields(priceData.priceUsd)
+    result.priceUsd = priceFields.priceUsd
+    result.priceUsdFormatted = priceFields.priceUsdFormatted
+    result.priceUsdDisplay = priceFields.priceUsdDisplay
+
+    if (token.balance) {
+      const price: Price = {
+        value: priceData.priceUsd,
+        currency: "USD",
+      }
+      const balanceUsd = getTokenBalanceUsd(token, price)
+      if (balanceUsd !== undefined) {
+        const usdFields = formatUsdFields(balanceUsd)
+        result.balanceUsd = usdFields.balanceUsd
+        result.balanceUsdFormatted = usdFields.balanceUsdFormatted
+        result.balanceUsdDisplay = usdFields.balanceUsdDisplay
+      }
+    }
+  }
+
+  // Default isSufficientBalance to true
+  result.isSufficientBalance = true
+
+  return result
+}
+
 const REFRESH_INTERVAL = 10000 // 10 seconds
 
 // Initialize query client for token balances
@@ -62,36 +195,10 @@ export function isNativeToken(
   return false
 }
 
-export interface TokenBalanceWithPrice extends TokenBalance {
-  price?: Price
-  balanceUsd?: number
-  balanceUsdFormatted?: string
-  chainName?: string
-  imageUrl?: string
-  symbol?: string
-  name?: string
-  decimals?: number
-}
-
-export interface NativeTokenBalanceWithPrice extends NativeTokenBalance {
-  price?: Price
-  balanceUsd?: number
-  balanceUsdFormatted?: string
-  symbol?: string
-  chainName?: string
-  imageUrl?: string
-  name?: string
-  decimals?: number
-}
-
-export type TokenBalanceExtended =
-  | TokenBalanceWithPrice
-  | NativeTokenBalanceWithPrice
-
-export function sortTokensByPriority(
-  a: TokenBalanceExtended,
-  b: TokenBalanceExtended,
-): number {
+/**
+ * Sort function for Token by priority
+ */
+export function sortTokensByPriority(a: Token, b: Token): number {
   // First sort by USD balance if available
   const aUsdBalance = a.balanceUsd ?? 0
   const bUsdBalance = b.balanceUsd ?? 0
@@ -105,48 +212,29 @@ export function sortTokensByPriority(
   if (aUsdBalance > 0 && bUsdBalance === 0) return -1
   if (aUsdBalance === 0 && bUsdBalance > 0) return 1
 
-  // If both have zero balance, sort by volume
+  // If both have zero balance, sort by price volume (if available)
   if (aUsdBalance === 0 && bUsdBalance === 0) {
-    const aVolume = getTokenVolume24h(a.price)
-    const bVolume = getTokenVolume24h(b.price)
-    if (aVolume !== bVolume) {
-      return bVolume - aVolume // Higher volume first for zero balance tokens
-    }
+    // Note: price24hVol is not in Token, so we skip volume sorting
+    // This can be added later if needed
   }
 
   // Then sort by native token status
-  if (isNativeToken(a) && !isNativeToken(b)) return -1
-  if (!isNativeToken(a) && isNativeToken(b)) return 1
+  if (a.isNativeToken && !b.isNativeToken) return -1
+  if (!a.isNativeToken && b.isNativeToken) return 1
 
   // Then sort by token balance
   try {
-    const balanceA = BigInt(a.balance)
-    const balanceB = BigInt(b.balance)
+    const balanceA = BigInt(a.balance || "0")
+    const balanceB = BigInt(b.balance || "0")
     if (balanceA > balanceB) return -1
     if (balanceA < balanceB) return 1
   } catch {
-    // If balance comparison fails, continue to volume sorting
+    // If balance comparison fails, continue
   }
 
   return 0
 }
 
-// Helper function to extract 24h volume from price data
-function getTokenVolume24h(price?: any): number {
-  // Try different possible volume field names from the API
-  if (!price) return 0
-
-  // Primary: use price24hVol if available, otherwise try other common field names
-  return Number(
-    price.price24hVol ||
-      price.volume24h ||
-      price.volume_24h ||
-      price.vol24h ||
-      price.dailyVolume ||
-      0,
-  )
-}
-
 export interface GetTokenBalancesWithPrice {
   page: Page
   nativeBalances: Array<
@@ -178,12 +266,11 @@ export function useTokenBalances(
   isLoadingPrices: boolean
   isLoadingSortedTokens: boolean
   balanceError: Error | null
-  sortedTokens: TokenBalanceExtended[]
+  sortedTokens: Token[]
 } {
   // Always call hooks unconditionally to fix React rules violation
   const hookIndexerClient = useIndexerGatewayClient()
   const hookTrailsClient = useTrailsClient()
-  const { getTokenImageUrl } = useGetTokenImageUrl()
 
   // Use passed parameters if available, otherwise use hook results
   const indexerClient = indexerGatewayClient ?? hookIndexerClient
@@ -294,7 +381,7 @@ export function useTokenBalances(
   )
 
   const { data: sortedTokens = [], isLoading: isLoadingSortedTokens } =
-    useQuery<TokenBalanceExtended[]>({
+    useQuery<Token[]>({
       queryKey: [
         "tokenBalances",
         "sorted",
@@ -307,76 +394,36 @@ export function useTokenBalances(
           return []
         }
 
-        const balances = [
-          ...tokenBalancesData.nativeBalances.map((token) => ({
-            ...token,
-            contractAddress: zeroAddress, // Native tokens always use zero address
-            chainName: getChainInfo(token.chainId)?.name || "",
-            symbol: token.symbol ?? (token as any).contractInfo?.symbol,
-            name: (token as any).name ?? (token as any).contractInfo?.name,
-            decimals:
-              (token as any).decimals ??
-              (token as any).contractInfo?.decimals ??
-              18, // Use token decimals or default to 18
-            imageUrl: getTokenImageUrl({
-              chainId: token.chainId,
-              contractAddress: zeroAddress,
-              symbol: token.symbol ?? (token as any).contractInfo?.symbol,
-              fallbackImageUrl: (token as any).contractInfo?.logoURI,
-            }),
-          })),
-          ...tokenBalancesData.balances.map((token) => ({
-            ...token,
-            contractAddress: token.contractAddress,
-            chainName: getChainInfo(token.contractInfo?.chainId)?.name || "",
-            symbol: token.contractInfo?.symbol,
-            name: token.contractInfo?.name,
-            decimals: token.contractInfo?.decimals,
-            imageUrl: getTokenImageUrl({
-              chainId: token.contractInfo?.chainId || 0,
-              contractAddress: token.contractAddress,
-              symbol: token.contractInfo?.symbol,
-              fallbackImageUrl: token.contractInfo?.logoURI,
-            }),
-          })),
-        ].filter((token) => {
-          try {
-            return BigInt(token.balance) > 0n
-          } catch {
-            return false
-          }
-        })
-
-        // First pass: add prices to all tokens
-        const tokensWithPrices = balances.map((token) => {
-          const isNative = isNativeToken(token)
-          const priceData: TrailsTokenPrice | undefined = tokenPrices.find(
-            (p) =>
-              p.token.tokenAddress ===
-                (isNative ? zeroAddress : token.contractAddress) &&
-              p.token.chainId ===
-                (isNative ? token.chainId : token.contractInfo?.chainId),
-          )
-
-          if (priceData?.priceUsd !== undefined) {
-            // Create a Price object compatible with the indexer API
-            const price: Price = {
-              value: priceData.priceUsd,
-              currency: "USD",
-            }
-            const tokenWithPrice = { ...token, price }
-            tokenWithPrice.balanceUsd = getTokenBalanceUsd(token, price)
-            tokenWithPrice.balanceUsdFormatted = getTokenBalanceUsdFormatted(
-              token,
-              price,
+        // Build Token directly from balances
+        const trailsTokens: Token[] = [
+          ...tokenBalancesData.nativeBalances.map((token) => {
+            const priceData = tokenPrices.find(
+              (p) =>
+                p.token.tokenAddress === zeroAddress &&
+                p.token.chainId === token.chainId,
             )
-            return tokenWithPrice
-          }
-
-          return token
-        })
+            return convertNativeTokenBalanceToToken(token, priceData)
+          }),
+          ...tokenBalancesData.balances.map((token) => {
+            const priceData = tokenPrices.find(
+              (p) =>
+                p.token.tokenAddress?.toLowerCase() ===
+                  token.contractAddress.toLowerCase() &&
+                p.token.chainId === token.contractInfo?.chainId,
+            )
+            return convertTokenBalanceToToken(token, priceData)
+          }),
+        ]
+          .filter((token) => {
+            try {
+              return token.balance && BigInt(token.balance) > 0n
+            } catch {
+              return false
+            }
+          })
+          .sort(sortTokensByPriority)
 
-        return tokensWithPrices.sort(sortTokensByPriority)
+        return trailsTokens
       },
       enabled:
         !isLoadingBalances &&
@@ -593,6 +640,160 @@ export function getTokenBalanceUsdFormatted(
   return formatUsdAmountDisplay(balanceUsd)
 }
 
+/**
+ * Formats USD value without currency symbol (for formatted fields)
+ * Similar to formatUsdAmountDisplay but without the $ sign
+ */
+export function formatUsdAmountFormatted(value: number | string = 0): string {
+  if (!value) {
+    value = 0
+  }
+
+  const numValue = Number(value)
+
+  // Validate input
+  if (!Number.isFinite(numValue) || Number.isNaN(numValue)) {
+    return "0.00"
+  }
+
+  // Handle negative values explicitly
+  const isNegative = numValue < 0
+  const absValue = Math.abs(numValue)
+
+  // Cap at reasonable max to prevent display issues (100 trillion)
+  const MAX_DISPLAY_VALUE = 100_000_000_000_000
+  const cappedValue = Math.min(absValue, MAX_DISPLAY_VALUE)
+
+  // For very small amounts (less than 0.01), show 3 decimal places
+  if (cappedValue > 0 && cappedValue < 0.01) {
+    const formatted = Number(cappedValue).toLocaleString(undefined, {
+      maximumFractionDigits: 3,
+      minimumFractionDigits: 3,
+      useGrouping: false,
+    })
+    return isNegative ? `-${formatted}` : formatted
+  }
+
+  // For amounts >= 0.01, use standard 2 decimal places
+  const formatted = Number(cappedValue).toLocaleString(undefined, {
+    maximumFractionDigits: 2,
+    minimumFractionDigits: 2,
+    useGrouping: false,
+  })
+  return isNegative ? `-${formatted}` : formatted
+}
+
+/**
+ * Formats balance fields (raw → formatted → display)
+ * Returns all three versions for Token
+ */
+export function formatBalanceFields(
+  balance: string | bigint,
+  decimals: number,
+): {
+  balance: string // Raw value as string (e.g., "1000000000000000000")
+  balanceFormatted: string // Formatted with decimals, no commas (e.g., "1.0")
+  balanceDisplay: string // Display with commas (e.g., "1,000.00")
+} {
+  if (!balance) {
+    return {
+      balance: "0",
+      balanceFormatted: "0",
+      balanceDisplay: "0",
+    }
+  }
+
+  try {
+    // Validate decimals
+    if (!Number.isInteger(decimals) || decimals < 1 || decimals > 18) {
+      throw new Error("Invalid decimals")
+    }
+
+    const balanceBigInt = BigInt(balance)
+    const balanceString = balanceBigInt.toString()
+
+    // Check for negative balance
+    if (balanceBigInt < 0n) {
+      throw new Error("Negative balance")
+    }
+
+    // Format using formatUnits
+    const formatted = formatUnits(balanceBigInt, decimals)
+
+    // balanceFormatted: no commas (uses formatAmount with useGrouping: false)
+    const balanceFormatted = formatAmount(formatted)
+
+    // balanceDisplay: with commas (uses formatAmountDisplay with useGrouping: true)
+    const balanceDisplay = formatAmountDisplay(formatted)
+
+    return {
+      balance: balanceString,
+      balanceFormatted,
+      balanceDisplay,
+    }
+  } catch (err) {
+    logger.console.error("[trails-sdk] Error formatting balance fields:", {
+      balance,
+      decimals,
+      err,
+    })
+    // Return safe defaults on error
+    return {
+      balance: typeof balance === "string" ? balance : balance.toString(),
+      balanceFormatted: "0",
+      balanceDisplay: "0",
+    }
+  }
+}
+
+/**
+ * Formats USD value fields (raw → formatted → display)
+ * Returns all three versions for Token
+ */
+export function formatUsdFields(usdValue: number | string | null | undefined): {
+  balanceUsd?: number // Raw number (e.g., 1000.50)
+  balanceUsdFormatted?: string // Formatted, no commas or $ (e.g., "1000.50")
+  balanceUsdDisplay?: string // Display with commas and $ (e.g., "$1,000.50")
+} {
+  if (usdValue === null || usdValue === undefined) {
+    return {}
+  }
+
+  const numValue = Number(usdValue)
+
+  // Validate input
+  if (!Number.isFinite(numValue) || Number.isNaN(numValue)) {
+    return {
+      balanceUsd: 0,
+      balanceUsdFormatted: "0.00",
+      balanceUsdDisplay: "$0.00",
+    }
+  }
+
+  return {
+    balanceUsd: numValue,
+    balanceUsdFormatted: formatUsdAmountFormatted(numValue),
+    balanceUsdDisplay: formatUsdAmountDisplay(numValue),
+  }
+}
+
+/**
+ * Formats price fields (raw → formatted → display)
+ * Returns all three versions for Token
+ */
+export function formatPriceFields(price: number | string | null | undefined): {
+  priceUsd?: number // Raw number (e.g., 1.50)
+  priceUsdFormatted?: string // Formatted, no commas or $ (e.g., "1.50")
+  priceUsdDisplay?: string // Display with commas and $ (e.g., "$1.50")
+} {
+  const usdFields = formatUsdFields(price)
+  return {
+    priceUsd: usdFields.balanceUsd,
+    priceUsdFormatted: usdFields.balanceUsdFormatted,
+    priceUsdDisplay: usdFields.balanceUsdDisplay,
+  }
+}
+
 export function useTokenBalanceUsdFormat(
   token: TokenBalance | NativeTokenBalance,
   tokenPrice: Price,
@@ -772,7 +973,7 @@ export type GetTokenBalancesWithPricesParams = {
 }
 
 export type GetTokenBalancesWithPriceReturn = {
-  balances: TokenBalanceWithPrice[]
+  balances: Token[]
 }
 
 export async function getTokenBalancesWithPrices({
@@ -792,9 +993,10 @@ export async function getTokenBalancesWithPrices({
       tokenSymbol: t.contractInfo?.symbol || "",
     })),
   )
-  const balancesWithPrices = tokens.map((b) => {
-    const priceData: TrailsTokenPrice | undefined = tokenPrices.find((p) => {
-      const isSameChain = p.token.chainId === b.chainId
+  const balancesWithPrices: Token[] = tokens.map((b) => {
+    const priceData: TokenPrice | undefined = tokenPrices.find((p) => {
+      const tokenChainId = b.chainId ?? (b as any).contractInfo?.chainId
+      const isSameChain = p.token.chainId === tokenChainId
       let isSameToken = p.token.tokenAddress === b.contractAddress
       if (!b.contractAddress) {
         isSameToken =
@@ -803,20 +1005,14 @@ export async function getTokenBalancesWithPrices({
       return isSameChain && isSameToken
     })
 
-    // Convert TrailsTokenPrice to Price format for compatibility
-    const price: Price | undefined =
-      priceData?.priceUsd !== undefined
-        ? { value: priceData.priceUsd, currency: "USD" }
-        : undefined
-
-    return {
-      ...b,
-      price,
-      balanceUsd: price ? getTokenBalanceUsd(b, price) : undefined,
-      balanceUsdFormatted: price
-        ? getTokenBalanceUsdFormatted(b, price)
-        : undefined,
+    const isNative = isNativeToken(b)
+    if (isNative) {
+      return convertNativeTokenBalanceToToken(
+        b as NativeTokenBalance,
+        priceData,
+      )
     }
+    return convertTokenBalanceToToken(b as TokenBalance, priceData)
   })
 
   return {
@@ -858,7 +1054,7 @@ export function useAccountTokenBalance({
       })
       const tokenBalance = balances.find(
         (b) =>
-          b.chainId === chainId &&
+          (b.chainId ?? 0) === chainId &&
           (b.contractAddress?.toLowerCase() === token.toLowerCase() ||
             (!b.contractAddress && token === zeroAddress)),
       )
@@ -895,21 +1091,20 @@ export async function getHasSufficientBalanceToken({
     indexerGatewayClient,
     trailsClient,
   })
-  const tokenBalance: TokenBalanceExtended | null | undefined = balances.find(
+  const tokenBalance = balances.find(
     (b) =>
-      b.chainId === chainId &&
+      (b.chainId ?? 0) === chainId &&
       (b.contractAddress?.toLowerCase() === token.toLowerCase() ||
         (!b.contractAddress && token === zeroAddress)),
   )
   if (!tokenBalance) {
     return false
   }
-  const isNative = isNativeToken(tokenBalance)
-  const decimals = isNative ? 18 : tokenBalance?.contractInfo?.decimals
+  const decimals = tokenBalance.decimals
   if (!decimals) {
     throw new Error("Decimals not found")
   }
-  return tokenBalance?.balance
+  return tokenBalance.balance
     ? BigInt(tokenBalance.balance) >= parseUnits(amount, decimals)
     : false
 }