0xtrails 0.1.13 → 0.2.0

package/src/prices.ts

@@ -1,8 +1,4 @@
-import type {
-  SequenceAPIClient,
-  Token,
-  TokenPrice,
-} from "@0xsequence/trails-api"
+import type { SequenceAPIClient, Token, TokenPrice } from "@0xsequence/api"
 import { QueryClient, useQuery } from "@tanstack/react-query"
 import { zeroAddress } from "viem"
 import { logger } from "./logger.js"
@@ -193,13 +189,61 @@ export function calcAmountUsdPrice({
   amount: number | string
   usdPrice: string | number | null | undefined
 }) {
-  return normalizeNumber(amount) * normalizeNumber(usdPrice)
+  const sanitizedAmount = normalizeNumber(amount)
+  const sanitizedPrice = normalizeNumber(usdPrice)
+
+  // Validate inputs
+  if (
+    !Number.isFinite(sanitizedAmount) ||
+    Number.isNaN(sanitizedAmount) ||
+    sanitizedAmount < 0
+  ) {
+    return 0
+  }
+  if (
+    !Number.isFinite(sanitizedPrice) ||
+    Number.isNaN(sanitizedPrice) ||
+    sanitizedPrice < 0
+  ) {
+    return 0
+  }
+
+  const result = sanitizedAmount * sanitizedPrice
+
+  // Validate result
+  if (!Number.isFinite(result) || Number.isNaN(result)) {
+    logger.console.error("[trails-sdk] Error calculating amount USD:", {
+      sanitizedAmount,
+      sanitizedPrice,
+      result,
+      amount,
+      usdPrice,
+    })
+    return 0
+  }
+
+  return result
 }
 
 export function normalizeNumber(
   number: number | string | null | undefined,
 ): number {
-  return Number(number?.toString().replace(/[^0-9.-]/g, "") || 0)
+  if (number === null || number === undefined) {
+    return 0
+  }
+
+  const normalized = Number(number?.toString().replace(/[^0-9.-]/g, "") || 0)
+
+  // Return 0 for invalid numbers
+  if (!Number.isFinite(normalized) || Number.isNaN(normalized)) {
+    logger.console.error("[trails-sdk] Error normalizing number:", {
+      number,
+      normalized,
+    })
+    return 0
+  }
+
+  return normalized
 }
 
 // Format TVL (Total Value Locked) for display

package/src/relaySdk.ts

@@ -69,6 +69,7 @@ import {
   arenaz,
   b3,
 } from "viem/chains"
+import { somnia } from "./customChains.js"
 import { logger } from "./logger.js"
 
 export type Chain = any
@@ -140,6 +141,7 @@ export const relaySupportedChains: Record<number, Chain> = {
   [zksync.id]: zksync,
   [zora.id]: zora,
   [katana.id]: katana,
+  [somnia.id]: somnia,
 }
 
 getRelaySupportedChains().then((relayChains) => {
@@ -347,7 +349,7 @@ export async function getRelaySupportedTokens(): Promise<RelayToken[]> {
       if (!chain.disabled) {
         // Add native currency
         tokens.push({
-          id: chain.currency.id,
+          id: chain.currency.id || `${chain.currency.symbol}-${chain.name}`,
           symbol: chain.currency.symbol,
           name: chain.currency.name,
           contractAddress: chain.currency.address,
@@ -360,7 +362,7 @@ export async function getRelaySupportedTokens(): Promise<RelayToken[]> {
         // Add featured tokens
         chain.featuredTokens.forEach((token) => {
           tokens.push({
-            id: token.id,
+            id: token.id || `${token.symbol}-${chain.name}`,
             symbol: token.symbol,
             name: token.name,
             contractAddress: token.address,
@@ -374,7 +376,7 @@ export async function getRelaySupportedTokens(): Promise<RelayToken[]> {
         // Add ERC20 currencies
         chain.erc20Currencies.forEach((token) => {
           tokens.push({
-            id: token.id,
+            id: token.id || `${token.symbol}-${chain.name}`,
             symbol: token.symbol,
             name: token.name,
             contractAddress: token.address,
@@ -388,7 +390,7 @@ export async function getRelaySupportedTokens(): Promise<RelayToken[]> {
         // Add solver currencies (fallback for chains that might not have featuredTokens/erc20Currencies)
         chain.solverCurrencies.forEach((token) => {
           tokens.push({
-            id: token.id,
+            id: token.id || `${token.symbol}-${chain.name}`,
             symbol: token.symbol,
             name: token.name,
             contractAddress: token.address,

package/src/relayer.ts

@@ -24,6 +24,7 @@ import {
   blast,
   optimism,
 } from "viem/chains"
+import { somnia } from "./customChains.js"
 
 export interface MetaTxnReceiptLog {
   address: string
@@ -74,6 +75,7 @@ const relayerChainIdToSlug: Record<number, string> = {
   [blast.id]: "blast",
   [gnosis.id]: "gnosis",
   [soneium.id]: "soneium",
+  [somnia.id]: "somnia",
   [xai.id]: "xai",
   [bsc.id]: "bsc",
   [katana.id]: "katana",

package/src/toast.ts

@@ -0,0 +1,110 @@
+import type { ToastType } from "./widget/components/Toast.js"
+
+let globalShowToast:
+  | ((
+      title: string,
+      message: string,
+      type?: ToastType,
+      duration?: number,
+      iconUrl?: string,
+    ) => void)
+  | null = null
+
+let globalUpdatePersistentToast:
+  | ((
+      title: string,
+      message: string,
+      type?: ToastType,
+      iconUrl?: string,
+    ) => void)
+  | null = null
+
+let globalRemovePersistentToast: (() => void) | null = null
+
+let toastEnabled = false
+
+export function setGlobalShowToast(
+  showToast: (
+    title: string,
+    message: string,
+    type?: ToastType,
+    duration?: number,
+    iconUrl?: string,
+  ) => void,
+) {
+  globalShowToast = showToast
+}
+
+export function setGlobalUpdatePersistentToast(
+  updatePersistentToast: (
+    title: string,
+    message: string,
+    type?: ToastType,
+    iconUrl?: string,
+  ) => void,
+) {
+  globalUpdatePersistentToast = updatePersistentToast
+}
+
+export function setGlobalRemovePersistentToast(
+  removePersistentToast: () => void,
+) {
+  globalRemovePersistentToast = removePersistentToast
+}
+
+export function setToastEnabled(enabled: boolean) {
+  toastEnabled = enabled
+}
+
+export function showToast(
+  title: string,
+  message: string,
+  type?: ToastType,
+  duration?: number,
+  iconUrl?: string,
+) {
+  if (!toastEnabled) {
+    return
+  }
+
+  if (globalShowToast) {
+    globalShowToast(title, message, type, duration, iconUrl)
+  } else {
+    console.warn(
+      "[trails-sdk] Toast not available yet. Make sure ToastProvider is mounted.",
+    )
+  }
+}
+
+export function updatePersistentToast(
+  title: string,
+  message: string,
+  type?: ToastType,
+  iconUrl?: string,
+) {
+  if (!toastEnabled) {
+    return
+  }
+
+  if (globalUpdatePersistentToast) {
+    globalUpdatePersistentToast(title, message, type, iconUrl)
+  } else {
+    console.warn(
+      "[trails-sdk] Toast not available yet. Make sure ToastProvider is mounted.",
+    )
+  }
+}
+
+export function removePersistentToast() {
+  if (!toastEnabled) {
+    return
+  }
+
+  if (globalRemovePersistentToast) {
+    globalRemovePersistentToast()
+  } else {
+    console.warn(
+      "[trails-sdk] Toast not available yet. Make sure ToastProvider is mounted.",
+    )
+  }
+}

package/src/tokenBalances.ts

@@ -7,7 +7,7 @@ import type {
   TokenBalance,
 } from "@0xsequence/indexer"
 import { ContractVerificationStatus } from "@0xsequence/indexer"
-import type { Page, Price, SequenceAPIClient } from "@0xsequence/trails-api"
+import type { Page, Price, SequenceAPIClient } from "@0xsequence/api"
 import { QueryClient, useQuery } from "@tanstack/react-query"
 import type { Address } from "ox"
 import { useEffect, useState } from "react"
@@ -16,6 +16,7 @@ import { useAPIClient } from "./apiClient.js"
 import { useIndexerGatewayClient } from "./indexerClient.js"
 import { getTokenPrices, useTokenPrices } from "./prices.js"
 import { logger } from "./logger.js"
+import { getChainInfo } from "./chains.js"
 
 export type { NativeTokenBalance, TokenBalance }
 
@@ -30,6 +31,7 @@ const tokenBalancesQueryClient = new QueryClient({
       retry: 2,
       retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
       refetchOnWindowFocus: false,
+      refetchIntervalInBackground: true, // Refetch in background
       refetchOnReconnect: true,
     },
   },
@@ -42,16 +44,20 @@ const defaultPage = { page: 1, pageSize: 10, more: false }
 export function isNativeToken(
   token: TokenBalance | NativeTokenBalance,
 ): token is NativeTokenBalance {
-  if ("contractAddress" in token) {
-    return false
+  if (!("contractAddress" in token)) {
+    return true
+  }
+  if (token.contractAddress === zeroAddress) {
+    return true
   }
-  return true
+  return false
 }
 
 export interface TokenBalanceWithPrice extends TokenBalance {
   price?: Price
   balanceUsd?: number
   balanceUsdFormatted?: string
+  chainName?: string
 }
 
 export interface NativeTokenBalanceWithPrice extends NativeTokenBalance {
@@ -59,6 +65,7 @@ export interface NativeTokenBalanceWithPrice extends NativeTokenBalance {
   balanceUsd?: number
   balanceUsdFormatted?: string
   symbol?: string
+  chainName?: string
 }
 
 export type TokenBalanceExtended =
@@ -132,6 +139,7 @@ export interface GetTokenBalancesWithPrice {
       symbol?: string
       balanceUsd?: number
       balanceUsdFormatted?: string
+      chainName?: string
     }
   >
   balances: Array<
@@ -139,6 +147,7 @@ export interface GetTokenBalancesWithPrice {
       price?: Price
       balanceUsd?: number
       balanceUsdFormatted?: string
+      chainName?: string
     }
   >
 }
@@ -255,8 +264,16 @@ export function useTokenBalances(
         }
 
         const balances = [
-          ...tokenBalancesData.nativeBalances,
-          ...tokenBalancesData.balances,
+          ...tokenBalancesData.nativeBalances.map((token) => ({
+            ...token,
+            contractAddress: zeroAddress, // Native tokens always use zero address
+            chainName: getChainInfo(token.chainId)?.name || "",
+          })),
+          ...tokenBalancesData.balances.map((token) => ({
+            ...token,
+            contractAddress: token.contractAddress,
+            chainName: getChainInfo(token.contractInfo?.chainId)?.name || "",
+          })),
         ].filter((token) => {
           try {
             return BigInt(token.balance) > 0n
@@ -301,6 +318,7 @@ export function useTokenBalances(
         !!tokenPrices,
       staleTime: REFRESH_INTERVAL, // 10 seconds for sorted tokens
       gcTime: REFRESH_INTERVAL, // 10 seconds cache time
+      refetchIntervalInBackground: true, // Refetch in background
       refetchOnWindowFocus: true,
     })
 
@@ -318,17 +336,38 @@ export function useTokenBalances(
 // Helper to format balance
 export function formatRawAmount(
   balance: string | bigint,
-  decimals: number = 18,
+  decimals: number,
 ): string {
   if (!balance) {
     return "0"
   }
+
   try {
-    const formatted = formatUnits(BigInt(balance), decimals)
+    // Validate decimals
+    if (!Number.isInteger(decimals) || decimals < 0 || decimals > 18) {
+      throw new Error("Invalid decimals")
+    }
+
+    if (decimals === 0) {
+      throw new Error("Invalid decimals, decimals cannot be 0")
+    }
+
+    const balanceBigInt = BigInt(balance)
+
+    // Check for negative balance
+    if (balanceBigInt < 0n) {
+      throw new Error("Negative balance")
+    }
+
+    const formatted = formatUnits(balanceBigInt, decimals)
     return formatAmount(formatted)
-  } catch (e) {
-    logger.console.error("[trails-sdk] Error formatting balance:", e)
-    return balance.toString()
+  } catch (err) {
+    logger.console.error("[trails-sdk] Error formatting balance:", {
+      balance,
+      decimals,
+      err,
+    })
+    throw err
   }
 }
 
@@ -337,12 +376,45 @@ export function getTokenBalanceUsd(
   tokenPrice: Price,
 ): number {
   const isNative = isNativeToken(token)
-  const formattedBalance = formatRawAmount(
-    token.balance,
-    isNative ? 18 : token.contractInfo?.decimals,
-  )
+  const decimals = isNative ? 18 : token.contractInfo?.decimals
+  if (!decimals) {
+    throw new Error("Decimals not found")
+  }
+  const formattedBalance = formatRawAmount(token.balance, decimals)
+
   const priceUsd = Number(tokenPrice.value) ?? 0
-  return Number(formattedBalance) * priceUsd
+
+  // Validate price
+  if (!Number.isFinite(priceUsd) || Number.isNaN(priceUsd) || priceUsd < 0) {
+    return 0
+  }
+
+  const balanceNum = Number(formattedBalance)
+
+  // Validate balance
+  if (
+    !Number.isFinite(balanceNum) ||
+    Number.isNaN(balanceNum) ||
+    balanceNum < 0
+  ) {
+    return 0
+  }
+
+  const result = balanceNum * priceUsd
+
+  // Validate result
+  if (!Number.isFinite(result) || Number.isNaN(result)) {
+    logger.console.error("[trails-sdk] Error calculating balance USD:", {
+      balanceNum,
+      priceUsd,
+      result,
+      token,
+      tokenPrice,
+    })
+    return 0
+  }
+
+  return result
 }
 
 export function formatAmount(
@@ -395,14 +467,30 @@ export function formatUsdAmountDisplay(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)
+
   const displayValue = Intl.NumberFormat("en-US", {
     style: "currency",
     currency: "USD",
     maximumFractionDigits: 2,
     minimumFractionDigits: 2,
-  }).format(Number(value))
+  }).format(isNegative ? -cappedValue : cappedValue)
 
-  if (displayValue === "$0.00" && Number(value) > 0 && Number(value) < 0.01) {
+  if (displayValue === "$0.00" && absValue > 0 && absValue < 0.01) {
     return `<$0.01`
   }
 
@@ -658,7 +746,7 @@ export async function getHasSufficientBalanceToken({
     indexerGatewayClient,
     apiClient,
   })
-  const tokenBalance = balances.find(
+  const tokenBalance: TokenBalanceExtended | null | undefined = balances.find(
     (b) =>
       b.chainId === chainId &&
       (b.contractAddress?.toLowerCase() === token.toLowerCase() ||
@@ -667,7 +755,11 @@ export async function getHasSufficientBalanceToken({
   if (!tokenBalance) {
     return false
   }
-  const decimals = tokenBalance?.contractInfo?.decimals ?? 18
+  const isNative = isNativeToken(tokenBalance)
+  const decimals = isNative ? 18 : tokenBalance?.contractInfo?.decimals
+  if (!decimals) {
+    throw new Error("Decimals not found")
+  }
   return tokenBalance?.balance
     ? BigInt(tokenBalance.balance) >= parseUnits(amount, decimals)
     : false

package/src/tokens.ts

@@ -13,10 +13,11 @@ import {
   unichain,
   worldchain,
 } from "viem/chains"
-import { getRelaySupportedTokens } from "./relaySdk.js"
+import { getRelaySupportedTokens, type Chain } from "./relaySdk.js"
 import { useReadContracts } from "wagmi"
 import { useMemo } from "react"
 import { logger } from "./logger.js"
+import { somnia } from "./customChains.js"
 
 export type SupportedToken = {
   id: string
@@ -42,6 +43,7 @@ export const commonTokenImages: Record<string, string> = {
   LINK: "https://assets.sequence.info/images/tokens/large/1/0x514910771af9ca656af840dff83e8264ecf986ca.webp",
   XTZ: "https://assets.sequence.info/images/tokens/large/42793/0x0000000000000000000000000000000000000000.webp",
   WXTZ: "https://assets.coingecko.com/coins/images/976/standard/Tezos-logo.png?1696502091",
+  SOMI: "https://assets.sequence.info/images/tokens/large/5031/0x0000000000000000000000000000000000000000.webp",
 }
 
 const cacheVersion = "01"
@@ -375,14 +377,32 @@ export async function getSupportedTokens(): Promise<SupportedToken[]> {
     }
   }
 
-  const supportedChains = await getSupportedChains()
+  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 = [...tokens, ...additionalTokens]
   const supportedChainTokens = allTokens.filter((token) => {
     // Always include Etherlink tokens
     if (token.chainId === etherlink.id) {
       return true
     }
-    return supportedChains.some((chain) => chain.id === token.chainId)
+    // 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)
   })
   const uniqueTokens = supportedChainTokens.filter(
     (token, index, self) =>
@@ -521,12 +541,13 @@ export async function getTokenInfo(
   // 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"}`,
       symbol: chainInfo?.nativeCurrency.symbol || "ETH",
       name: chainInfo?.nativeCurrency.name || "Ethereum",
       contractAddress: zeroAddress,
-      decimals: chainInfo?.nativeCurrency.decimals || 18,
+      decimals,
       chainId,
       chainName: chainInfo?.name || "Ethereum",
       imageUrl: getTokenImageUrl({
@@ -803,6 +824,10 @@ export function useTokenInfo({
   // Always call hooks unconditionally
   const isAddress = address?.startsWith("0x") ?? false
 
+  // Handle any native token (zero address) - before any blockchain calls
+  const isNativeToken =
+    address?.toLowerCase() === zeroAddress.toLowerCase() && !!chainId
+
   // Check cache first
   const cachedInfo = useMemo(() => {
     if (!isAddress || !chainId) return null
@@ -816,7 +841,7 @@ export function useTokenInfo({
   } as const
   const result = useReadContracts({
     contracts:
-      !!isAddress && !!chainId && !cachedInfo
+      !!isAddress && !!chainId && !cachedInfo && !isNativeToken
         ? [
             { ...contract, functionName: "name" },
             { ...contract, functionName: "symbol" },
@@ -825,11 +850,33 @@ export function useTokenInfo({
         : [],
   })
   const error =
-    result?.error ?? result?.data?.find((r) => r.error)?.error ?? null
+    result?.error ?? result?.data?.find((r: any) => r.error)?.error ?? null
   const [name, symbol, decimals] = result.data ?? []
   const chainInfo = getChainInfo(chainId!)
 
   const tokenInfo = useMemo(() => {
+    // Handle native token (zero address) for any chain
+    if (isNativeToken) {
+      const nativeSymbol = chainInfo?.nativeCurrency.symbol || "ETH"
+      const nativeName = chainInfo?.nativeCurrency.name || "Ethereum"
+      const decimals = chainInfo?.nativeCurrency.decimals ?? 18
+
+      return {
+        id: `${nativeSymbol}-${chainInfo?.name || ""}`,
+        name: nativeName,
+        symbol: nativeSymbol,
+        decimals,
+        chainId: chainId!,
+        contractAddress: zeroAddress,
+        chainName: chainInfo?.name || "",
+        imageUrl: getTokenImageUrl({
+          chainId,
+          contractAddress: zeroAddress,
+          symbol: nativeSymbol,
+        }),
+      }
+    }
+
     // If we have cached info, use it
     if (cachedInfo) {
       return {
@@ -869,10 +916,14 @@ export function useTokenInfo({
 
     return null
   }, [
-    cachedInfo,
     address,
     chainId,
+    isNativeToken,
+    cachedInfo,
     chainInfo?.name,
+    chainInfo?.nativeCurrency.symbol,
+    chainInfo?.nativeCurrency.name,
+    chainInfo?.nativeCurrency.decimals,
     name?.result,
     symbol?.result,
     decimals?.result,
@@ -1163,6 +1214,18 @@ export const commonTokens: SupportedToken[] = [
     chainName: etherlink.name,
     imageUrl: commonTokenImages.USDT as string,
   },
+
+  // Somnia
+  {
+    id: "SOMI-somnia",
+    symbol: "SOMI",
+    name: "Somnia",
+    contractAddress: "0x0000000000000000000000000000000000000000",
+    decimals: 18,
+    chainId: somnia.id,
+    chainName: somnia.name,
+    imageUrl: commonTokenImages.SOMI as string,
+  },
 ]
 
 export const wethAddresses: Record<string, string> = {