0xtrails 0.6.6 → 0.7.0

package/src/widget/hooks/useDefaultTokenSelection.tsx

@@ -7,7 +7,8 @@ import { zeroAddress } from "viem"
 import { useWidgetProps } from "./useWidgetProps.js"
 import { useTargetAmount } from "./useTargetAmount.js"
 import { useTokenBalances } from "../../tokenBalances.js"
-import type { TokenBalanceExtended } from "../../tokenBalances.js"
+import type { Token } from "../../tokens.js"
+import { isNativeToken } from "../../utils.js"
 import { useIndexerGatewayClient } from "../../indexerClient.js"
 import { useSupportedTokens } from "../../tokens.js"
 import { getChainInfo } from "../../chains.js"
@@ -42,67 +43,43 @@ const MINIMUM_BALANCE_USD_FOR_PRIORITIZATION = 1 // $1
  * @returns defaultDestinationToken - Matching token on different chain (null if toToken/toChainId set)
  * @returns isLoading - Whether token data is still loading
  */
-export interface DefaultToken {
-  id: number
-  name: string
-  symbol: string
-  balance: string
-  imageUrl: string
-  chainId: number
-  contractAddress: string
-  balanceUsdFormatted: string
-  tokenPriceUsd: number
-  decimals: number // Top-level decimals for compatibility
-  contractInfo?: {
-    decimals: number
-    symbol: string
-    name: string
-  }
-}
-
 export interface UseDefaultTokenSelectionReturn {
-  defaultOriginToken: DefaultToken | null
-  defaultDestinationToken: DefaultToken | null
+  defaultOriginToken: Token | null
+  defaultDestinationToken: Token | null
   isLoading: boolean
 }
 
-function getToken24hVolume(token: TokenBalanceExtended): number {
-  const price = token.price as any
-  if (!price) return 0
-
-  return Number(
-    price.price24hVol?.value ||
-      price.volume24h ||
-      price.volume_24h ||
-      price.vol24h ||
-      price.dailyVolume ||
-      0,
-  )
+function getToken24hVolume(_token: Token): number {
+  // Note: price24hVol is not in Token, so we return 0
+  // This can be added to Token later if needed
+  return 0
 }
 
 function tokenMatches(
-  token: TokenBalanceExtended,
+  token: Token,
   targetSymbolOrAddress: string,
   targetChainId?: number,
 ): boolean {
-  const isNative =
-    !("contractAddress" in token) || token.contractAddress === zeroAddress
+  const tokenChainId = token.chainId || 0
+  const tokenIsNative = token.isNativeToken ?? false
+  const contractAddress = token.contractAddress
+  const symbol = token.symbol
 
   // Check chain match first
-  const chainMatches = !targetChainId || token.chainId === targetChainId
+  const chainMatches = !targetChainId || tokenChainId === targetChainId
   if (!chainMatches) return false
 
   // Check if target is an address (starts with 0x and is longer than 5 chars)
   const isTargetAddress =
     targetSymbolOrAddress.startsWith("0x") && targetSymbolOrAddress.length > 5
 
-  if (isNative) {
-    const chainInfo = getChainInfo(token.chainId)
+  if (tokenIsNative) {
+    const chainInfo = getChainInfo(tokenChainId)
     const nativeSymbol = chainInfo?.nativeCurrency.symbol || "ETH"
 
     // For native tokens, check if target is zero address or matches symbol
     if (isTargetAddress) {
-      return targetSymbolOrAddress.toLowerCase() === zeroAddress.toLowerCase()
+      return isNativeToken(targetSymbolOrAddress)
     }
 
     return nativeSymbol.toUpperCase() === targetSymbolOrAddress.toUpperCase()
@@ -111,15 +88,11 @@ function tokenMatches(
   // For non-native tokens, check both address and symbol
   if (isTargetAddress) {
     return (
-      token.contractAddress.toLowerCase() ===
-      targetSymbolOrAddress.toLowerCase()
+      contractAddress?.toLowerCase() === targetSymbolOrAddress.toLowerCase()
     )
   }
 
-  return (
-    token.contractInfo?.symbol.toUpperCase() ===
-    targetSymbolOrAddress.toUpperCase()
-  )
+  return symbol?.toUpperCase() === targetSymbolOrAddress.toUpperCase()
 }
 
 function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
@@ -150,72 +123,52 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
     // Only compute destination defaults if toToken and toChainId are NOT set
     const shouldComputeDestination = !toToken && !toChainId
 
-    // Helper to convert TokenBalanceExtended to DefaultToken
-    const toDefaultToken = (
-      token: TokenBalanceExtended,
-    ): DefaultToken | null => {
-      const isNative =
-        !("contractAddress" in token) || token.contractAddress === zeroAddress
-      const chainInfo = getChainInfo(token.chainId)
+    // Helper to ensure Token has required properties set
+    const ensureToken = (token: Token): Token | null => {
+      const isNative = token.isNativeToken ?? false
+      const chainInfo = getChainInfo(token.chainId || 0)
 
       if (isNative) {
-        // Native tokens - use token properties as-is
-        const tokenWithInfo = token as any
-        const imageUrl = tokenWithInfo.logoURI || tokenWithInfo.imageUrl || ""
-        const decimals = 18
+        // Native tokens - ensure chain info is set
+        const decimals = chainInfo?.nativeCurrency.decimals ?? 18
 
         return {
-          id: token.chainId,
-          name: chainInfo?.nativeCurrency.name || "Native Token",
-          symbol: chainInfo?.nativeCurrency.symbol || "ETH",
-          balance: token.balance,
-          imageUrl,
-          chainId: token.chainId,
+          ...token,
+          name: token.name || chainInfo?.nativeCurrency.name || "Native Token",
+          symbol: token.symbol || chainInfo?.nativeCurrency.symbol || "ETH",
+          balance: token.balance ?? "0",
+          imageUrl: token.imageUrl || "",
+          chainId: token.chainId ?? 0,
           contractAddress: zeroAddress,
           balanceUsdFormatted: token.balanceUsdFormatted ?? "0",
-          tokenPriceUsd: token.price?.value ?? 0,
-          decimals, // Top-level decimals
-          contractInfo: {
-            decimals,
-            symbol: chainInfo?.nativeCurrency.symbol || "ETH",
-            name: chainInfo?.nativeCurrency.name || "Native Token",
-          },
+          priceUsd: token.priceUsd ?? 0,
+          decimals,
+          isNativeToken: true,
         }
       } else {
-        // Non-native tokens - use contractInfo properties
-        const tokenWithInfo = token as any
-        const imageUrl =
-          tokenWithInfo.contractInfo?.logoURI || tokenWithInfo.imageUrl || ""
-        const decimals = token.contractInfo?.decimals
-        if (!decimals) {
+        // Non-native tokens - ensure required properties are set
+        if (!token.decimals) {
           logger.console.warn("[trails-sdk] Missing decimals for token:", {
-            token: token.contractInfo,
+            symbol: token.symbol,
             chainId: token.chainId,
           })
           return null // Return null instead of throwing
         }
 
         return {
-          id: token.chainId,
-          name: token.contractInfo?.name || "Unknown Token",
-          symbol: token.contractInfo?.symbol || "???",
-          balance: token.balance,
-          imageUrl,
-          chainId: token.chainId,
-          contractAddress: token.contractAddress,
+          ...token,
+          name: token.name ?? "Unknown Token",
+          symbol: token.symbol ?? "???",
+          balance: token.balance ?? "0",
+          imageUrl: token.imageUrl || "",
+          chainId: token.chainId ?? 0,
           balanceUsdFormatted: token.balanceUsdFormatted ?? "0",
-          tokenPriceUsd: token.price?.value ?? 0,
-          decimals, // Top-level decimals
-          contractInfo: {
-            decimals,
-            symbol: token.contractInfo?.symbol ?? "???",
-            name: token.contractInfo?.name ?? "Unknown Token",
-          },
+          priceUsd: token.priceUsd ?? 0,
         }
       }
     }
 
-    // Filter tokens with balance > 0
+    // Filter tokens with balance > 0 (sortedTokens is already Token[])
     const tokensWithBalance = sortedTokens.filter((token) => {
       const balanceUsd = token.balanceUsd ?? 0
       return balanceUsd > 0
@@ -233,7 +186,7 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
 
     // Helper to sort tokens by balance USD and volume
     const sortTokensByBalanceAndVolume = (
-      tokens: TokenBalanceExtended[],
+      tokens: Token[],
       targetAmount?: number,
     ) => {
       const sortedTokens = [...tokens].sort((a, b) => {
@@ -256,16 +209,14 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
       const effectiveTargetAmount =
         targetAmount ?? MINIMUM_BALANCE_USD_FOR_PRIORITIZATION
 
-      const prioritizedTokens: TokenBalanceExtended[] = []
-      const remainingTokens: TokenBalanceExtended[] = []
+      const prioritizedTokens: Token[] = []
+      const remainingTokens: Token[] = []
 
       // Separate tokens into prioritized and remaining
       for (const token of sortedTokens) {
         const balanceUsd = token.balanceUsd ?? 0
-        const isNative =
-          !("contractAddress" in token) || token.contractAddress === zeroAddress
-        const isUSDC =
-          !isNative && token.contractInfo?.symbol?.toUpperCase() === "USDC"
+        const isNative = token.isNativeToken ?? false
+        const isUSDC = !isNative && token.symbol?.toUpperCase() === "USDC"
 
         if ((isUSDC || isNative) && balanceUsd >= effectiveTargetAmount) {
           prioritizedTokens.push(token)
@@ -276,14 +227,10 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
 
       // Sort prioritized tokens: USDC first, then native tokens
       prioritizedTokens.sort((a, b) => {
-        const aIsNative =
-          !("contractAddress" in a) || a.contractAddress === zeroAddress
-        const bIsNative =
-          !("contractAddress" in b) || b.contractAddress === zeroAddress
-        const aIsUSDC =
-          !aIsNative && a.contractInfo?.symbol?.toUpperCase() === "USDC"
-        const bIsUSDC =
-          !bIsNative && b.contractInfo?.symbol?.toUpperCase() === "USDC"
+        const aIsNative = a.isNativeToken ?? false
+        const bIsNative = b.isNativeToken ?? false
+        const aIsUSDC = !aIsNative && a.symbol?.toUpperCase() === "USDC"
+        const bIsUSDC = !bIsNative && b.symbol?.toUpperCase() === "USDC"
 
         // USDC comes first
         if (aIsUSDC && !bIsUSDC) return -1
@@ -304,7 +251,7 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
     }
 
     // Find the best origin token using intelligent selection
-    let bestOriginToken: TokenBalanceExtended | null = null
+    let bestOriginToken: Token | null = null
 
     // When toToken and toChainId are specified (user wants specific destination)
     if (toToken && toChainId) {
@@ -412,7 +359,7 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
       }
     }
 
-    const originToken = toDefaultToken(bestOriginToken)
+    const originToken = ensureToken(bestOriginToken)
 
     if (!originToken) {
       return {
@@ -422,7 +369,7 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
     }
 
     // Compute destination token only when toToken and toChainId are not provided
-    let destinationToken: DefaultToken | null = null
+    let destinationToken: Token | null = null
 
     if (shouldComputeDestination) {
       // Determine destination chain: Base if origin is not Base, Arbitrum if origin is Base
@@ -431,22 +378,22 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
 
       // Find USDC on destination chain first
       const usdcOnDestChain = supportedTokens.find(
-        (token: any) =>
+        (token: Token) =>
           token.chainId === defaultDestChainId && token.symbol === "USDC",
       )
 
-      let destToken: any = null
+      let destToken: Token | null = null
 
       if (usdcOnDestChain) {
         destToken = usdcOnDestChain
       } else {
         // Fallback: Find matching token on destination chain
         const destChainTokens = supportedTokens.filter(
-          (token: any) => token.chainId === defaultDestChainId,
+          (token: Token) => token.chainId === defaultDestChainId,
         )
 
         // Try to find same symbol on destination chain first
-        const sameSymbolOnDestChain = destChainTokens.find((token: any) => {
+        const sameSymbolOnDestChain = destChainTokens.find((token: Token) => {
           return token.symbol.toUpperCase() === originToken.symbol.toUpperCase()
         })
 
@@ -455,40 +402,49 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
         } else {
           // Fallback: ETH on destination chain > first available token on destination chain
           destToken =
-            destChainTokens.find((token: any) => token.symbol === "ETH") ||
-            destChainTokens[0]
+            destChainTokens.find((token: Token) => token.symbol === "ETH") ||
+            destChainTokens[0] ||
+            null
         }
       }
 
-      const decimals = destToken?.decimals
-      if (!decimals) {
-        logger.console.warn(
-          "[trails-sdk] Missing decimals for destination token, skipping:",
-          {
-            token: destToken,
-          },
-        )
+      if (!destToken) {
         destinationToken = null
       } else {
-        destinationToken = destToken
-          ? {
-              id: destToken.chainId,
-              name: destToken.name,
-              symbol: destToken.symbol,
-              balance: "0", // Destination token doesn't have balance yet
-              imageUrl: destToken.imageUrl || "",
-              chainId: destToken.chainId,
-              contractAddress: destToken.contractAddress || zeroAddress,
-              balanceUsdFormatted: "0",
-              tokenPriceUsd: 0,
-              decimals, // Top-level decimals
-              contractInfo: {
-                decimals,
-                symbol: destToken.symbol,
-                name: destToken.name,
-              },
-            }
-          : null
+        const decimals = destToken.decimals
+        if (!decimals) {
+          logger.console.warn(
+            "[trails-sdk] Missing decimals for destination token, skipping:",
+            {
+              token: destToken,
+            },
+          )
+          destinationToken = null
+        } else {
+          // Try to find this token in user's balances to get the actual balance
+          const matchingUserToken = sortedTokens.find((t) => {
+            if (t.chainId !== destToken.chainId) return false
+
+            const isDestNative = destToken.isNativeToken ?? false
+            const isUserNative = t.isNativeToken ?? false
+
+            if (isDestNative && isUserNative) return true
+            if (isDestNative || isUserNative) return false
+
+            return (
+              t.contractAddress?.toLowerCase() ===
+              destToken.contractAddress?.toLowerCase()
+            )
+          })
+
+          destinationToken = {
+            ...destToken,
+            balance: matchingUserToken?.balance ?? "0",
+            balanceUsdFormatted: matchingUserToken?.balanceUsdFormatted ?? "0",
+            priceUsd: matchingUserToken?.priceUsd ?? 0,
+            decimals,
+          }
+        }
       }
     }
 

package/src/widget/hooks/useDestinationSelectedToken.tsx

@@ -6,20 +6,7 @@ import React, {
 } from "react"
 
 // Define the Token interface (matching the existing one in widget.tsx)
-export interface Token {
-  id: number
-  name: string
-  symbol: string
-  balance: string
-  imageUrl: string
-  chainId: number
-  contractAddress: string
-  contractInfo?: {
-    decimals: number
-    symbol: string
-    name: string
-  }
-}
+import type { Token } from "../../tokens.js"
 
 interface DestinationSelectedTokenContextType {
   selectedToken: Token | null

package/src/widget/hooks/useEarnPool.tsx

@@ -27,7 +27,7 @@ export const EarnPoolProvider: React.FC<{ children: ReactNode }> = ({
   )
 }
 
-export const useEarnPool = (): EarnPoolContextType => {
+export function useEarnPool(): EarnPoolContextType {
   const context = useContext(EarnPoolContext)
   if (context === undefined) {
     throw new Error("useEarnPool must be used within an EarnPoolProvider")

package/src/widget/hooks/useIntentTransactionHistory.ts

@@ -10,9 +10,9 @@ import { logger } from "../../logger.js"
 import { useTrails } from "../providers/TrailsProvider.js"
 import { commonTokenImages } from "../../tokens.js"
 import { getTrailsClient } from "../../trailsClient.js"
-import type { IntentSummary } from "@0xsequence/trails-api"
+import type { IntentSummary } from "@0xtrails/api"
 import {
-  decodeTrailsTokenSweeperEvents,
+  decodeTokenSweeperEvents,
   decodeGuestModuleEvents,
 } from "../../decoders.js"
 import { getChainRpcClient } from "../../chains.js"
@@ -110,6 +110,7 @@ async function getTokenInfoForTransaction(
   tokenAddress: string,
   chainId: number,
   supportedTokens: Awaited<ReturnType<typeof getSupportedTokens>>,
+  trailsConfig: ReturnType<typeof useTrails>,
 ): Promise<
   | {
       symbol: string
@@ -132,8 +133,8 @@ async function getTokenInfoForTransaction(
         symbol: nativeToken.symbol,
         name: nativeToken.name,
         decimals: nativeToken.decimals,
-        imageUrl: nativeToken.imageUrl,
-        chainId: nativeToken.chainId,
+        imageUrl: nativeToken.imageUrl || "",
+        chainId: nativeToken.chainId || chainId,
       }
     }
 
@@ -159,21 +160,24 @@ async function getTokenInfoForTransaction(
       symbol: supportedToken.symbol,
       name: supportedToken.name,
       decimals: supportedToken.decimals,
-      imageUrl: supportedToken.imageUrl,
-      chainId: supportedToken.chainId,
+      imageUrl: supportedToken.imageUrl || "",
+      chainId: supportedToken.chainId || chainId,
     }
   }
 
   // Fallback to on-chain lookup
   try {
-    const tokenInfo = await getTokenInfo(chainId, tokenAddress)
+    const tokenInfo = await getTokenInfo(chainId, tokenAddress, {
+      trailsApiKey: trailsConfig.trailsApiKey,
+      trailsApiUrl: trailsConfig.trailsApiUrl,
+    })
     if (tokenInfo) {
       return {
         symbol: tokenInfo.symbol,
         name: tokenInfo.name,
         decimals: tokenInfo.decimals,
-        imageUrl: tokenInfo.imageUrl,
-        chainId: tokenInfo.chainId,
+        imageUrl: tokenInfo.imageUrl || "",
+        chainId: tokenInfo.chainId || chainId,
       }
     }
   } catch (error) {
@@ -450,7 +454,7 @@ async function decodeTransactionEvents(
       })
 
       // Decode Trails Token Sweeper events (refunds)
-      const sweeperEvents = decodeTrailsTokenSweeperEvents(receipt)
+      const sweeperEvents = decodeTokenSweeperEvents(receipt)
       const hasRefund = sweeperEvents.some(
         (event) => event.type === "Refund" || event.type === "RefundAndSweep",
       )
@@ -586,6 +590,7 @@ async function enrichTransaction(
           transaction.originTokenAddress,
           transaction.originChainId,
           supportedTokens,
+          trailsConfig,
         )
       : undefined
 
@@ -595,6 +600,7 @@ async function enrichTransaction(
           transaction.destinationTokenAddress,
           transaction.destinationChainId,
           supportedTokens,
+          trailsConfig,
         )
       : undefined
 
@@ -797,7 +803,10 @@ export function useIntentTransactionHistory({
         apiResult.intents || []
       ).map(mapIntentSummaryToTransaction)
 
-      const supportedTokens = await getSupportedTokens()
+      const supportedTokens = await getSupportedTokens({
+        trailsApiKey: trailsConfig.trailsApiKey,
+        trailsApiUrl: trailsConfig.trailsApiUrl,
+      })
 
       const enrichedTransactions = await Promise.all(
         mappedTransactions.map(async (transaction) =>

package/src/widget/hooks/useIsMobile.tsx

@@ -0,0 +1,50 @@
+import { useState, useEffect } from "react"
+
+/**
+ * Hook to detect if the browser is on iOS or Android mobile
+ */
+export function useIsMobile(): boolean {
+  const [isMobile, setIsMobile] = useState(false)
+
+  useEffect(() => {
+    const checkMobile = () => {
+      if (typeof window === "undefined") {
+        return false
+      }
+
+      const userAgent =
+        window.navigator.userAgent ||
+        window.navigator.vendor ||
+        (window as unknown as { opera?: string }).opera
+
+      if (!userAgent) {
+        return false
+      }
+
+      // Check for iOS
+      const isIOS =
+        /iPad|iPhone|iPod/.test(userAgent) &&
+        !(window as unknown as { MSStream?: unknown }).MSStream
+
+      // Check for Android
+      const isAndroid = /android/i.test(userAgent)
+
+      // Also check screen width as a fallback
+      const isSmallScreen = window.innerWidth <= 768
+
+      return isIOS || isAndroid || isSmallScreen
+    }
+
+    setIsMobile(checkMobile())
+
+    // Listen for resize events to handle orientation changes
+    const handleResize = () => {
+      setIsMobile(checkMobile())
+    }
+
+    window.addEventListener("resize", handleResize)
+    return () => window.removeEventListener("resize", handleResize)
+  }, [])
+
+  return isMobile
+}

package/src/widget/hooks/useMode.ts

@@ -1,6 +1,5 @@
 import { createContext, useContext } from "react"
-
-export type Mode = "pay" | "fund" | "earn" | "swap" | "receive"
+import type { Mode } from "../../mode.js"
 
 export interface ModeConfig {
   mode?: Mode
@@ -10,7 +9,7 @@ const ModeContext = createContext<ModeConfig | null>(null)
 
 export const ModeProvider = ModeContext.Provider
 
-export const useMode = (): ModeConfig => {
+export function useMode(): ModeConfig {
   const context = useContext(ModeContext)
   return context || {}
 }

package/src/widget/hooks/useOriginSelectedToken.tsx

@@ -6,20 +6,7 @@ import React, {
 } from "react"
 
 // Define the Token interface (matching the existing one in widget.tsx)
-export interface Token {
-  id: number
-  name: string
-  symbol: string
-  balance: string
-  imageUrl: string
-  chainId: number
-  contractAddress: string
-  contractInfo?: {
-    decimals: number
-    symbol: string
-    name: string
-  }
-}
+import type { Token } from "../../tokens.js"
 
 interface OriginSelectedTokenContextType {
   selectedToken: Token | null
@@ -58,7 +45,7 @@ export const OriginSelectedTokenProvider: React.FC<
   )
 }
 
-export const useOriginSelectedToken = (): OriginSelectedTokenContextType => {
+export function useOriginSelectedToken(): OriginSelectedTokenContextType {
   const context = useContext(OriginSelectedTokenContext)
 
   if (context === undefined) {