0xtrails 0.8.3 → 0.8.4

package/src/widget/hooks/useDefaultDestinationToken.tsx

@@ -0,0 +1,173 @@
+import { useMemo, useRef } from "react"
+import { useAccount } from "wagmi"
+import { base, arbitrum } from "viem/chains"
+import type { Address } from "ox"
+import { useSupportedTokens } from "../../tokens.js"
+import type { Token } from "../../tokens.js"
+import { useTokenBalances } from "../../tokenBalances.js"
+import { logger } from "../../logger.js"
+
+/**
+ * Hook for intelligent default destination token selection.
+ *
+ * This hook calculates the best destination token based on:
+ * - Origin token's chain (to minimize bridging costs)
+ * - Token availability on destination chain
+ * - User's existing balances for accurate balance display
+ *
+ * Only calculates destination when toToken/toChainId are NOT specified.
+ *
+ * @param originToken - The selected origin token
+ * @returns defaultDestinationToken - Best destination token or null
+ * @returns isLoading - Whether token data is still loading
+ */
+export function useDefaultDestinationToken(originToken: Token | null) {
+  const { address } = useAccount()
+
+  const { supportedTokens, isLoadingTokens } = useSupportedTokens()
+
+  const { sortedTokens, isLoadingSortedTokens } = useTokenBalances(
+    address as Address.Address,
+  )
+
+  const isLoading = isLoadingTokens || isLoadingSortedTokens
+
+  // Use a ref to prevent unnecessary recalculations on balance-only updates
+  const stableDestTokenRef = useRef<Token | null>(null)
+  const lastOriginTokenKey = useRef<string>("")
+
+  const defaultDestinationToken = useMemo(() => {
+    // Don't compute destination if no origin token or still loading
+    if (!originToken || !supportedTokens?.length || !sortedTokens?.length) {
+      stableDestTokenRef.current = null
+      return null
+    }
+
+    // Create a key based on origin token identity (not balance)
+    const originTokenKey = `${originToken.symbol}-${originToken.chainId}-${originToken.contractAddress || "native"}`
+
+    // Only recalculate if origin token has actually changed
+    const shouldRecalculate =
+      originTokenKey !== lastOriginTokenKey.current ||
+      !stableDestTokenRef.current
+
+    if (!shouldRecalculate && stableDestTokenRef.current) {
+      return stableDestTokenRef.current
+    }
+
+    lastOriginTokenKey.current = originTokenKey
+
+    // Determine destination chain: Base if origin is not Base, Arbitrum if origin is Base
+    const defaultDestChainId =
+      originToken.chainId === base.id ? arbitrum.id : base.id
+
+    // Find USDC on destination chain first (preferred stable coin)
+    const usdcOnDestChain = supportedTokens.find(
+      (token: Token) =>
+        token.chainId === defaultDestChainId && token.symbol === "USDC",
+    )
+
+    let destToken: Token | null = null
+
+    if (usdcOnDestChain) {
+      destToken = usdcOnDestChain
+      logger.console.log(
+        "[trails-sdk] Selected USDC as destination token on chain:",
+        defaultDestChainId,
+      )
+    } else {
+      // Fallback: Find matching token on destination chain
+      const destChainTokens = supportedTokens.filter(
+        (token: Token) => token.chainId === defaultDestChainId,
+      )
+
+      // Try to find same symbol on destination chain first
+      const sameSymbolOnDestChain = destChainTokens.find((token: Token) => {
+        return token.symbol.toUpperCase() === originToken.symbol.toUpperCase()
+      })
+
+      if (sameSymbolOnDestChain) {
+        destToken = sameSymbolOnDestChain
+        logger.console.log(
+          "[trails-sdk] Selected same symbol token on destination chain:",
+          sameSymbolOnDestChain.symbol,
+        )
+      } else {
+        // Fallback: ETH on destination chain > first available token on destination chain
+        destToken =
+          destChainTokens.find((token: Token) => token.symbol === "ETH") ||
+          destChainTokens[0] ||
+          null
+
+        if (destToken) {
+          logger.console.log(
+            "[trails-sdk] Selected fallback token on destination chain:",
+            destToken.symbol,
+          )
+        }
+      }
+    }
+
+    if (!destToken) {
+      logger.console.log(
+        "[trails-sdk] No suitable destination token found on chain:",
+        defaultDestChainId,
+      )
+      return null
+    }
+
+    const decimals = destToken.decimals
+    if (!decimals) {
+      logger.console.warn(
+        "[trails-sdk] Missing decimals for destination token, skipping:",
+        destToken,
+      )
+      return null
+    }
+
+    // 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()
+      )
+    })
+
+    const finalDestinationToken = {
+      ...destToken,
+      balance: matchingUserToken?.balance ?? "0",
+      balanceUsdFormatted: matchingUserToken?.balanceUsdFormatted ?? "0",
+      priceUsd: matchingUserToken?.priceUsd ?? 0,
+      decimals,
+    }
+
+    logger.console.log("[trails-sdk] Default destination token selection:", {
+      destination: {
+        symbol: finalDestinationToken.symbol,
+        chainId: finalDestinationToken.chainId,
+        hasUserBalance: !!matchingUserToken,
+        userBalanceUsd: matchingUserToken?.balanceUsdFormatted ?? "0",
+      },
+      originChain: originToken.chainId,
+      destinationChain: defaultDestChainId,
+    })
+
+    // Store the calculated result in ref for stability
+    stableDestTokenRef.current = finalDestinationToken
+
+    return finalDestinationToken
+  }, [originToken, supportedTokens, sortedTokens])
+
+  return {
+    defaultDestinationToken,
+    isLoading,
+  }
+}

package/src/widget/hooks/{useDefaultTokenSelection.tsx → useDefaultOriginToken.tsx}

@@ -1,53 +1,18 @@
-import { createContext, useContext, useMemo } from "react"
-import type { ReactNode } from "react"
+import { useMemo, useRef } from "react"
 import { useAccount } from "wagmi"
 import type { Address } from "ox"
-import { base, arbitrum } from "viem/chains"
-import { zeroAddress } from "viem"
 import { useWidgetProps } from "./useWidgetProps.js"
 import { useTargetAmount } from "./useTargetAmount.js"
 import { useTokenBalances } from "../../tokenBalances.js"
 import type { Token } from "../../tokens.js"
-import { isNativeToken } from "../../utils.js"
-import { useSupportedTokens } from "../../tokens.js"
 import { getChainInfo } from "../../chains.js"
+import { isNativeToken } from "../../utils.js"
 import { logger } from "../../logger.js"
+import { zeroAddress } from "viem"
 
 const MINIMUM_24H_VOLUME_USD = 1_000_000 // $1M
 const MINIMUM_BALANCE_USD_FOR_PRIORITIZATION = 1 // $1
 
-/**
- * Hook for intelligent default token selection in 0xtrails widget.
- *
- * When toToken and toChainId are specified (user wants specific destination):
- * 1. Same-chain, same-token with balance >= targetAmountUsd (no swap, no bridge) - FASTEST
- * 2. Same-chain, different-token with balance >= targetAmountUsd (swap only) - FAST
- *    - Ordered by: 24h volume > $1M first, then highest balance USD
- * 3. Different-chain, same-token with balance >= targetAmountUsd (bridge only) - SLOWER
- *    - Ordered by: 24h volume > $1M first, then highest balance USD
- * 4. Different-chain, different-token with balance >= targetAmountUsd (swap + bridge) - SLOWEST
- *    - Ordered by: 24h volume > $1M first, then highest balance USD
- * 5. Fallback: Any token with balance > 0 if none can cover target amount
- *
- * When toToken/toChainId NOT specified (general send/bridge):
- * - Select highest balance token with 24h volume > $1M
- * - Fallback to any token with balance > 0
- *
- * Destination Token Logic (only when toToken/toChainId not provided):
- * - Default destination chain: Base if origin is not Base, Arbitrum if origin is Base
- * - Default destination token: USDC on destination chain
- * - Fallback: Same symbol on destination chain > ETH on destination chain > first available token on destination chain
- *
- * @returns defaultOriginToken - Best origin token that can cover targetAmountUsd (if specified)
- * @returns defaultDestinationToken - Matching token on different chain (null if toToken/toChainId set)
- * @returns isLoading - Whether token data is still loading
- */
-export interface UseDefaultTokenSelectionReturn {
-  defaultOriginToken: Token | null
-  defaultDestinationToken: Token | null
-  isLoading: boolean
-}
-
 function getToken24hVolume(_token: Token): number {
   // Note: price24hVol is not in Token, so we return 0
   // This can be added to Token later if needed
@@ -94,7 +59,27 @@ function tokenMatches(
   return symbol?.toUpperCase() === targetSymbolOrAddress.toUpperCase()
 }
 
-function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
+/**
+ * Hook for intelligent default origin token selection in 0xtrails widget.
+ *
+ * When toToken and toChainId are specified (user wants specific destination):
+ * 1. Same-chain, same-token with balance >= targetAmountUsd (no swap, no bridge) - FASTEST
+ * 2. Same-chain, different-token with balance >= targetAmountUsd (swap only) - FAST
+ *    - Ordered by: 24h volume > $1M first, then highest balance USD
+ * 3. Different-chain, same-token with balance >= targetAmountUsd (bridge only) - SLOWER
+ *    - Ordered by: 24h volume > $1M first, then highest balance USD
+ * 4. Different-chain, different-token with balance >= targetAmountUsd (swap + bridge) - SLOWEST
+ *    - Ordered by: 24h volume > $1M first, then highest balance USD
+ * 5. Fallback: Any token with balance > 0 if none can cover target amount
+ *
+ * When toToken/toChainId NOT specified (general send/bridge):
+ * - Select highest balance token with 24h volume > $1M
+ * - Fallback to any token with balance > 0
+ *
+ * @returns defaultOriginToken - Best origin token that can cover targetAmountUsd (if specified)
+ * @returns isLoading - Whether token data is still loading
+ */
+export function useDefaultOriginToken() {
   const { toToken, toChainId } = useWidgetProps()
   const { targetAmountUsd } = useTargetAmount()
   const { address } = useAccount()
@@ -103,22 +88,33 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
     address as Address.Address,
   )
 
-  const { supportedTokens, isLoadingTokens: isLoadingSupportedTokens } =
-    useSupportedTokens()
+  const isLoading = isLoadingSortedTokens
 
-  const isLoading = isLoadingSortedTokens || isLoadingSupportedTokens
+  // Use a ref to prevent unnecessary recalculations on balance-only updates
+  const stableTokenRef = useRef<Token | null>(null)
+  const lastTokenListKey = useRef<string>("")
 
-  const { defaultOriginToken, defaultDestinationToken } = useMemo(() => {
-    if (!sortedTokens?.length || !supportedTokens?.length) {
-      return {
-        defaultOriginToken: null,
-        defaultDestinationToken: null,
-      }
+  const defaultOriginToken = useMemo(() => {
+    if (!sortedTokens?.length) {
+      stableTokenRef.current = null
+      return null
+    }
+
+    // Create a key based on available tokens (not their balances)
+    const tokenListKey = sortedTokens
+      .map((t) => `${t.symbol}-${t.chainId}-${t.contractAddress || "native"}`)
+      .join(",")
+
+    // Only recalculate if the token list has actually changed (not just balances)
+    // or if meaningful selection parameters have changed
+    const shouldRecalculate =
+      tokenListKey !== lastTokenListKey.current || !stableTokenRef.current
+
+    if (!shouldRecalculate && stableTokenRef.current) {
+      return stableTokenRef.current
     }
 
-    // Determine if we should compute destination token
-    // Only compute destination defaults if toToken and toChainId are NOT set
-    const shouldComputeDestination = !toToken && !toChainId
+    lastTokenListKey.current = tokenListKey
 
     // Helper to ensure Token has required properties set
     const ensureToken = (token: Token): Token | null => {
@@ -165,7 +161,7 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
       }
     }
 
-    // Filter tokens with balance > 0 (sortedTokens is already Token[])
+    // Filter tokens with balance > 0
     const tokensWithBalance = sortedTokens.filter((token) => {
       const balanceUsd = token.balanceUsd ?? 0
       return balanceUsd > 0
@@ -173,12 +169,9 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
 
     if (tokensWithBalance.length === 0) {
       logger.console.log(
-        "[trails-sdk] No tokens with balance found for default selection",
+        "[trails-sdk] No tokens with balance found for default origin selection",
       )
-      return {
-        defaultOriginToken: null,
-        defaultDestinationToken: null,
-      }
+      return null
     }
 
     // Helper to sort tokens by balance USD and volume
@@ -342,7 +335,7 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
       const sortedByBalanceAndVolume = sortTokensByBalanceAndVolume(
         tokensWithBalance,
         MINIMUM_BALANCE_USD_FOR_PRIORITIZATION,
-      ) // Use minimum balance for prioritization
+      )
       bestOriginToken = sortedByBalanceAndVolume[0] ?? null
       logger.console.log(
         "[trails-sdk] No destination specified, selected highest value token with best liquidity",
@@ -350,102 +343,12 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
     }
 
     if (!bestOriginToken) {
-      return {
-        defaultOriginToken: null,
-        defaultDestinationToken: null,
-      }
+      return null
     }
 
     const originToken = ensureToken(bestOriginToken)
 
-    if (!originToken) {
-      return {
-        defaultOriginToken: null,
-        defaultDestinationToken: null,
-      }
-    }
-
-    // Compute destination token only when toToken and toChainId are not provided
-    let destinationToken: Token | null = null
-
-    if (shouldComputeDestination) {
-      // Determine destination chain: Base if origin is not Base, Arbitrum if origin is Base
-      const defaultDestChainId =
-        originToken.chainId === base.id ? arbitrum.id : base.id
-
-      // Find USDC on destination chain first
-      const usdcOnDestChain = supportedTokens.find(
-        (token: Token) =>
-          token.chainId === defaultDestChainId && token.symbol === "USDC",
-      )
-
-      let destToken: Token | null = null
-
-      if (usdcOnDestChain) {
-        destToken = usdcOnDestChain
-      } else {
-        // Fallback: Find matching token on destination chain
-        const destChainTokens = supportedTokens.filter(
-          (token: Token) => token.chainId === defaultDestChainId,
-        )
-
-        // Try to find same symbol on destination chain first
-        const sameSymbolOnDestChain = destChainTokens.find((token: Token) => {
-          return token.symbol.toUpperCase() === originToken.symbol.toUpperCase()
-        })
-
-        if (sameSymbolOnDestChain) {
-          destToken = sameSymbolOnDestChain
-        } else {
-          // Fallback: ETH on destination chain > first available token on destination chain
-          destToken =
-            destChainTokens.find((token: Token) => token.symbol === "ETH") ||
-            destChainTokens[0] ||
-            null
-        }
-      }
-
-      if (!destToken) {
-        destinationToken = null
-      } else {
-        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,
-          }
-        }
-      }
-    }
-
-    logger.console.log("[trails-sdk] Default token selection:", {
+    logger.console.log("[trails-sdk] Default origin token selection:", {
       origin: originToken
         ? {
             symbol: originToken.symbol,
@@ -454,13 +357,6 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
             volume24h: getToken24hVolume(bestOriginToken),
           }
         : null,
-      destination: destinationToken
-        ? {
-            symbol: destinationToken.symbol,
-            chainId: destinationToken.chainId,
-          }
-        : null,
-      shouldComputeDestination,
       toToken,
       toChainId,
       targetAmountUsd,
@@ -468,43 +364,14 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
         toToken && toChainId ? (targetAmountUsd ?? 0.01) : null,
     })
 
-    return {
-      defaultOriginToken: originToken,
-      defaultDestinationToken: destinationToken,
-    }
-  }, [toToken, toChainId, sortedTokens, supportedTokens, targetAmountUsd])
+    // Store the calculated result in ref for stability
+    stableTokenRef.current = originToken
+
+    return originToken
+  }, [toToken, toChainId, sortedTokens, targetAmountUsd])
 
   return {
     defaultOriginToken,
-    defaultDestinationToken,
     isLoading,
   }
 }
-
-// Context for sharing default token selection across components
-const DefaultTokenSelectionContext =
-  createContext<UseDefaultTokenSelectionReturn | null>(null)
-
-export function DefaultTokenSelectionProvider({
-  children,
-}: {
-  children: ReactNode
-}) {
-  const value = useDefaultTokenSelectionInternal()
-
-  return (
-    <DefaultTokenSelectionContext.Provider value={value}>
-      {children}
-    </DefaultTokenSelectionContext.Provider>
-  )
-}
-
-export function useDefaultTokenSelection(): UseDefaultTokenSelectionReturn {
-  const context = useContext(DefaultTokenSelectionContext)
-  if (!context) {
-    throw new Error(
-      "useDefaultTokenSelection must be used within a DefaultTokenSelectionProvider",
-    )
-  }
-  return context
-}

package/src/widget/widget.tsx

@@ -2026,6 +2026,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             recentTokens={recentTokens}
             onRecentTokenSelect={handleRecentTokenSelect}
             onTrackToken={handleTrackToken}
+            exactInputOnly={true}
           />
         )
       case "wallet-confirmation": {
@@ -2325,6 +2326,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             recentTokens={recentTokens}
             onRecentTokenSelect={handleRecentTokenSelect}
             onTrackToken={handleTrackToken}
+            exactInputOnly={true}
           />
         )
       case "wallet-connection-pending":

package/dist/widget/hooks/useDefaultTokenSelection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDefaultTokenSelection.d.ts","sourceRoot":"","sources":["../../../src/widget/hooks/useDefaultTokenSelection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQtC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAS5C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,WAAW,8BAA8B;IAC7C,kBAAkB,EAAE,KAAK,GAAG,IAAI,CAAA;IAChC,uBAAuB,EAAE,KAAK,GAAG,IAAI,CAAA;IACrC,SAAS,EAAE,OAAO,CAAA;CACnB;AAubD,wBAAgB,6BAA6B,CAAC,EAC5C,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;CACpB,2CAQA;AAED,wBAAgB,wBAAwB,IAAI,8BAA8B,CAQzE"}