0xtrails 0.8.2 → 0.8.4

package/src/widget/components/QuoteDetails.tsx

@@ -280,7 +280,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                             />
                           </RowLabel>
                           <RowValue>
-                            <span title={`$${quote.destGasUsd ?? 0}`}>
+                            <span title={`$${quote.destinationGasUsd ?? 0}`}>
                               {
                                 quote.trailsFeeBreakdown.destinationRelayFee
                                   .usdValue
@@ -301,37 +301,28 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
               if (!quote?.trailsFeeBreakdown) return null
 
               // Check if provider fee is non-zero
-              const hasProviderFee = (quote.providerUsd ?? 0) > 0
+              const hasProviderFee = (quote.providerFeeUsd ?? 0) > 0
 
               // Check if trails fee is non-zero
-              const hasTrailsFee = (quote.trailsUsd ?? 0) > 0
+              const hasTrailsFee = (quote.trailsFeeUsd ?? 0) > 0
 
               if (!hasProviderFee && !hasTrailsFee) return null
 
               return (
                 <RowGroup>
-                  {/* All Provider Fees = provider fee + swap fee */}
-                  {((quote.providerUsd ?? 0) > 0 ||
-                    (quote.swapFeesUsd ?? 0) > 0) &&
-                    quote.allProviderFeesUsdDisplay &&
-                    (() => {
-                      const allProviderFees =
-                        (quote.providerUsd ?? 0) + (quote.swapFeesUsd ?? 0)
-                      if (allProviderFees <= 0) return null
-
-                      return (
-                        <Row>
-                          <RowLabel tooltip="Total provider fees including bridge fees and swap fees">
-                            All provider fees
-                          </RowLabel>
-                          <RowValue>
-                            <span title={`$${quote.allProviderFeesUsd ?? 0}`}>
-                              {quote.allProviderFeesUsdDisplay}
-                            </span>
-                          </RowValue>
-                        </Row>
-                      )
-                    })()}
+                  {/* All Provider Fees (swap spread is shown in priceImpact) */}
+                  {(quote.totalProviderFeesUsd ?? 0) > 0 && (
+                    <Row>
+                      <RowLabel tooltip="Total provider fees for bridge and routing">
+                        All provider fees
+                      </RowLabel>
+                      <RowValue>
+                        <span title={`$${quote.totalProviderFeesUsd ?? 0}`}>
+                          {quote.totalProviderFeesUsdDisplay}
+                        </span>
+                      </RowValue>
+                    </Row>
+                  )}
 
                   {hasProviderFee &&
                     quote.trailsFeeBreakdown.providerFee &&
@@ -394,7 +385,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                             )}
                           </RowLabel>
                           <RowValue>
-                            <span title={`$${quote.providerUsd ?? 0}`}>
+                            <span title={`$${quote.providerFeeUsd ?? 0}`}>
                               {providerFee.usdValue}
                             </span>
                           </RowValue>
@@ -497,7 +488,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                               <TriangleAlert className="size-3" />
                             </span>
                           )}
-                          {quote.priceImpact}%
+                          {Number(quote.priceImpact).toFixed(2)}%
                         </RowValue>
                       </Row>
                       {quote.priceImpactUsdDisplay && (

package/src/widget/components/SlippageToleranceSettings.tsx

@@ -1,11 +1,12 @@
 import type React from "react"
 import { useState, useEffect } from "react"
 import { HelpCircle } from "lucide-react"
-import { useTrails } from "../providers/TrailsProvider.js"
+import { SLIPPAGE_AUTO } from "../../constants.js"
 
 // Convert decimal format to percentage for display
 // Format: "0.05" (5%) -> "5"
 const decimalToPercentage = (decimal: string): string => {
+  if (decimal === SLIPPAGE_AUTO) return SLIPPAGE_AUTO
   const num = parseFloat(decimal)
   return (num * 100).toString()
 }
@@ -13,6 +14,7 @@ const decimalToPercentage = (decimal: string): string => {
 // Convert percentage to decimal format for storage
 // Format: "5" (5%) -> "0.05"
 const percentageToDecimal = (percentage: string): string => {
+  if (percentage === SLIPPAGE_AUTO) return SLIPPAGE_AUTO
   const num = parseFloat(percentage)
   return (num / 100).toString()
 }
@@ -20,11 +22,23 @@ const percentageToDecimal = (percentage: string): string => {
 // Local storage key for user's slippage preference
 const SLIPPAGE_STORAGE_KEY = "trails-slippage-tolerance"
 
+// Helper function to check if slippage is in AUTO mode
+export const isSlippageAuto = (value: string | null | undefined): boolean => {
+  return value === SLIPPAGE_AUTO || value === null || value === undefined
+}
+
 // Helper function to get current slippage tolerance (for use in SDK functions)
 // Returns the user's stored preference or falls back to the provided default
-export const getSlippageToleranceValue = (defaultValue: string): string => {
+// Returns null if AUTO mode is selected (backend will calculate optimal slippage)
+export const getSlippageToleranceValue = (
+  defaultValue: string,
+): string | null => {
   try {
     const stored = localStorage.getItem(SLIPPAGE_STORAGE_KEY)
+    if (stored === SLIPPAGE_AUTO || stored === null) {
+      // AUTO mode - return null so backend calculates optimal slippage
+      return null
+    }
     return stored || defaultValue
   } catch (_error) {
     return defaultValue
@@ -38,7 +52,6 @@ interface SlippageToleranceSettingsProps {
 export const SlippageToleranceSettings: React.FC<
   SlippageToleranceSettingsProps
 > = ({ className = "" }) => {
-  const config = useTrails()
   const [displayValue, setDisplayValue] = useState("")
   const [showTooltip, setShowTooltip] = useState(false)
 
@@ -49,14 +62,14 @@ export const SlippageToleranceSettings: React.FC<
       if (stored) {
         setDisplayValue(decimalToPercentage(stored))
       } else {
-        // Default to config value
-        setDisplayValue(decimalToPercentage(String(config.slippageTolerance)))
+        // Default to AUTO mode
+        setDisplayValue(SLIPPAGE_AUTO)
       }
     } catch (_error) {
-      // Fallback to config if localStorage fails
-      setDisplayValue(decimalToPercentage(String(config.slippageTolerance)))
+      // Fallback to AUTO if localStorage fails
+      setDisplayValue(SLIPPAGE_AUTO)
     }
-  }, [config.slippageTolerance])
+  }, [])
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value
@@ -73,17 +86,13 @@ export const SlippageToleranceSettings: React.FC<
   }
 
   const handleInputBlur = () => {
-    if (displayValue === "") {
-      // Reset to stored value or config default
+    if (displayValue === "" || displayValue === SLIPPAGE_AUTO) {
+      // Reset to AUTO mode
+      setDisplayValue(SLIPPAGE_AUTO)
       try {
-        const stored = localStorage.getItem(SLIPPAGE_STORAGE_KEY)
-        if (stored) {
-          setDisplayValue(decimalToPercentage(stored))
-        } else {
-          setDisplayValue(decimalToPercentage(String(config.slippageTolerance)))
-        }
+        localStorage.setItem(SLIPPAGE_STORAGE_KEY, SLIPPAGE_AUTO)
       } catch (_error) {
-        setDisplayValue(decimalToPercentage(String(config.slippageTolerance)))
+        // Ignore localStorage errors
       }
       return
     }
@@ -91,17 +100,17 @@ export const SlippageToleranceSettings: React.FC<
     const percentage = parseFloat(displayValue)
 
     // Validate range (0.01% to 50%)
-    if (percentage < 0.01 || percentage > 50) {
-      // Reset to stored value or config default
+    if (Number.isNaN(percentage) || percentage < 0.01 || percentage > 50) {
+      // Reset to stored value or AUTO default
       try {
         const stored = localStorage.getItem(SLIPPAGE_STORAGE_KEY)
-        if (stored) {
+        if (stored && stored !== SLIPPAGE_AUTO) {
           setDisplayValue(decimalToPercentage(stored))
         } else {
-          setDisplayValue(decimalToPercentage(String(config.slippageTolerance)))
+          setDisplayValue(SLIPPAGE_AUTO)
         }
       } catch (_error) {
-        setDisplayValue(decimalToPercentage(String(config.slippageTolerance)))
+        setDisplayValue(SLIPPAGE_AUTO)
       }
       return
     }
@@ -124,6 +133,15 @@ export const SlippageToleranceSettings: React.FC<
     }
   }
 
+  const handleAutoClick = () => {
+    setDisplayValue(SLIPPAGE_AUTO)
+    try {
+      localStorage.setItem(SLIPPAGE_STORAGE_KEY, SLIPPAGE_AUTO)
+    } catch (error) {
+      console.warn("Failed to save slippage tolerance to localStorage:", error)
+    }
+  }
+
   const handlePresetClick = (percentage: number) => {
     const percentageStr = percentage.toString()
     setDisplayValue(percentageStr)
@@ -152,8 +170,9 @@ export const SlippageToleranceSettings: React.FC<
           </button>
           {showTooltip && (
             <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-64 p-2 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded-md shadow-lg z-10">
-              Higher slippage tolerance allows for larger price movements but
-              may result in less favorable rates. Maximum 50%.
+              Auto mode calculates optimal slippage based on transaction size
+              and routing. Higher slippage allows for larger price movements but
+              may result in less favorable rates.
               <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900 dark:border-t-gray-700"></div>
             </div>
           )}
@@ -162,7 +181,18 @@ export const SlippageToleranceSettings: React.FC<
 
       {/* Preset buttons */}
       <div className="flex items-center space-x-2">
-        {[0.1, 0.5, 1, 3, 5].map((preset) => (
+        <button
+          type="button"
+          onClick={handleAutoClick}
+          className={`px-2 py-1 text-xs font-medium trails-border-radius-container border border-solid transition-colors cursor-pointer ${
+            displayValue === SLIPPAGE_AUTO
+              ? "bg-blue-500 text-white border-blue-500"
+              : "border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg hover:border-gray-400 dark:hover:border-gray-500"
+          }`}
+        >
+          Auto
+        </button>
+        {[0.5, 1, 3, 5].map((preset) => (
           <button
             key={preset}
             type="button"

package/src/widget/components/Swap.tsx

@@ -44,6 +44,7 @@ interface SwapProps {
   onRecentTokenSelect?: (token: Token) => void
   onTrackToken?: (token: any) => void
   isSequenceWallet?: boolean
+  exactInputOnly?: boolean
 }
 
 export const Swap: React.FC<SwapProps> = (props) => {

package/src/widget/components/WidgetProviders.tsx

@@ -15,7 +15,6 @@ import { BalanceVisibleProvider } from "../hooks/useBalanceVisible.js"
 import { ThemeProvider as ThemePreferenceProvider } from "../hooks/useTheme.js"
 import { SelectedFundMethodProvider } from "../hooks/useSelectedFundMethod.js"
 import { EarnPoolProvider } from "../hooks/useEarnPool.js"
-import { DefaultTokenSelectionProvider } from "../hooks/useDefaultTokenSelection.js"
 
 // Default props for hook modal (minimal required config)
 const DEFAULT_HOOK_MODAL_PROPS: TrailsWidgetProps = {
@@ -52,11 +51,7 @@ export function WidgetProviders({
                           <BalanceVisibleProvider>
                             <ThemePreferenceProvider>
                               <SelectedFundMethodProvider>
-                                <EarnPoolProvider>
-                                  <DefaultTokenSelectionProvider>
-                                    {children}
-                                  </DefaultTokenSelectionProvider>
-                                </EarnPoolProvider>
+                                <EarnPoolProvider>{children}</EarnPoolProvider>
                               </SelectedFundMethodProvider>
                             </ThemePreferenceProvider>
                           </BalanceVisibleProvider>

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,
+  }
+}