0xtrails 0.8.2 → 0.8.3

package/src/widget/components/AccountIntentTransactionHistory.tsx

@@ -11,7 +11,7 @@ import { SearchInputField } from "./SearchInputField.js"
 import { Identicon } from "./Identicon.js"
 import { truncateAddress } from "../../utils.js"
 import { useConnections, useAccount, useWalletClient } from "wagmi"
-import { ChevronDown } from "lucide-react"
+import { ChevronDown, Info } from "lucide-react"
 import { getExplorerUrl } from "../../explorer.js"
 import { ErrorDisplay } from "./ErrorDisplay.js"
 import { logger } from "../../logger.js"
@@ -79,6 +79,7 @@ const TransactionItem: React.FC<{
     intentError,
     balancesError,
     hasIntentBalance,
+    recoverToken,
     refetchIntent,
   } = useIntentRecover({
     intentId: transaction.intentId && !refundTxHash ? transaction.intentId : "",
@@ -341,23 +342,54 @@ const TransactionItem: React.FC<{
               </svg>
             </a>
           ) : canRecover ? (
-            <button
-              type="button"
-              onClick={handleRecover}
-              disabled={
-                isRecovering ||
-                isLoadingIntent ||
-                isLoadingBalances ||
-                !!intentError ||
-                !!balancesError
-              }
-              className="flex items-center justify-center gap-1 py-1 px-3 rounded-md transition-colors cursor-pointer text-xs font-medium text-white bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
-              aria-label="Recover intent"
-            >
-              {isRecovering || isLoadingIntent || isLoadingBalances
-                ? "Recovering..."
-                : "Recover"}
-            </button>
+            <div className="flex items-center gap-1">
+              <button
+                type="button"
+                onClick={handleRecover}
+                disabled={
+                  isRecovering ||
+                  isLoadingIntent ||
+                  isLoadingBalances ||
+                  !!intentError ||
+                  !!balancesError
+                }
+                className="flex items-center justify-center gap-1 py-1 px-3 rounded-md transition-colors cursor-pointer text-xs font-medium text-white bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
+                aria-label="Recover intent"
+              >
+                {isRecovering || isLoadingIntent || isLoadingBalances
+                  ? "Recovering..."
+                  : "Recover"}
+              </button>
+              {/* Info tooltip showing recoverable token details */}
+              {recoverToken &&
+                !isRecovering &&
+                !isLoadingIntent &&
+                !isLoadingBalances && (
+                  <div className="relative group">
+                    <Info
+                      className="w-4 h-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-help"
+                      aria-label="Token balance info"
+                    />
+                    <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 whitespace-nowrap z-50 pointer-events-none">
+                      <div className="flex flex-col gap-0.5">
+                        <span className="font-medium">
+                          Recover {recoverToken.symbol}
+                        </span>
+                        <span className="text-gray-300">
+                          {recoverToken.balanceFormatted} {recoverToken.symbol}
+                        </span>
+                        {recoverToken.balanceUsdDisplay && (
+                          <span className="text-gray-400">
+                            ≈ {recoverToken.balanceUsdDisplay}
+                          </span>
+                        )}
+                      </div>
+                      {/* Tooltip arrow */}
+                      <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-gray-900 dark:border-t-gray-700" />
+                    </div>
+                  </div>
+                )}
+            </div>
           ) : null}
           {recoverError && (
             <div className="w-full">

package/src/widget/components/ClassicSwap.tsx

@@ -249,15 +249,17 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     setLastInputType("buy")
   }, [])
 
-  // Handle buy input focus - clear field when user wants to type
+  // Handle buy input focus - only copy displayed value to state for editing
+  // Don't switch trade type or clear sellAmount here - that happens in handleBuyAmountChange
+  // This prevents unnecessary requotes when user just focuses without editing
   const handleBuyInputFocus = useCallback(() => {
-    // When focusing on buy field and it's in EXACT_INPUT mode (showing calculated value), switch to EXACT_OUTPUT mode
-    if (tradeType === TradeType.EXACT_INPUT && !buyAmount) {
-      setBuyAmount("")
-      setTradeType(TradeType.EXACT_OUTPUT)
-      setLastInputType("buy")
+    // When focusing on buy field in EXACT_INPUT mode, copy the calculated value
+    // to buyAmount state so user can edit it. The actual mode switch happens
+    // when the user starts typing (in handleBuyAmountChange)
+    if (tradeType === TradeType.EXACT_INPUT && toAmountDisplay && !buyAmount) {
+      setBuyAmount(toAmountDisplay)
     }
-  }, [tradeType, buyAmount])
+  }, [tradeType, toAmountDisplay, buyAmount])
 
   // Update amounts when quote is received
   useEffect(() => {
@@ -748,7 +750,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
                   value={
                     tradeType === TradeType.EXACT_OUTPUT
                       ? buyAmount
-                      : toAmountDisplay || ""
+                      : buyAmount || toAmountDisplay || ""
                   }
                   onChange={(e) => handleBuyAmountChange(e.target.value)}
                   onFocus={handleBuyInputFocus}
@@ -780,31 +782,24 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
           </div>
 
           {/* Bottom Info Row */}
-          <div
-            className={
-              !prepareSendQuote?.destinationAmountUsdDisplay && !isLoadingQuote
-                ? "flex justify-end mt-4"
-                : "mt-4 flex items-center justify-between"
-            }
-          >
+          <div className="mt-4 flex items-center justify-between">
             {/* Destination Amount USD from Quote */}
-            {(prepareSendQuote?.destinationAmountUsdDisplay ||
-              (isLoadingQuote && tradeType === TradeType.EXACT_INPUT)) && (
-              <div className="text-xs text-gray-500 dark:text-gray-400">
-                ≈{" "}
-                {isLoadingQuote && tradeType === TradeType.EXACT_INPUT
-                  ? "$0.00"
-                  : prepareSendQuote?.destinationAmountUsdDisplay}
-              </div>
-            )}
+            <div className="text-xs text-gray-500 dark:text-gray-400">
+              {(prepareSendQuote?.destinationAmountUsdDisplay ||
+                (isLoadingQuote && tradeType === TradeType.EXACT_INPUT)) && (
+                <>
+                  ≈{" "}
+                  {isLoadingQuote && tradeType === TradeType.EXACT_INPUT
+                    ? "$0.00"
+                    : prepareSendQuote?.destinationAmountUsdDisplay}
+                </>
+              )}
+            </div>
 
-            {/* Dest Token Balance */}
+            {/* Dest Token Balance - always on right */}
             {destinationToken && (
-              <div className="flex justify-end">
-                <div className="text-xs text-gray-500 dark:text-gray-400">
-                  Balance:{" "}
-                  {isBalanceVisible ? destinationBalanceDisplay : "0.00"}
-                </div>
+              <div className="text-xs text-gray-500 dark:text-gray-400">
+                Balance: {isBalanceVisible ? destinationBalanceDisplay : "0.00"}
               </div>
             )}
           </div>

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"