0xtrails 0.4.3 → 0.6.0

package/src/widget/components/SlippageToleranceSettings.tsx

@@ -1,7 +1,7 @@
 import type React from "react"
 import { useState, useEffect } from "react"
 import { HelpCircle } from "lucide-react"
-import { getSlippageTolerance, setSlippageTolerance } from "../../config.js"
+import { useTrails } from "../providers/TrailsProvider.js"
 
 // Convert decimal format to percentage for display
 // Format: "0.05" (5%) -> "5"
@@ -17,6 +17,20 @@ const percentageToDecimal = (percentage: string): string => {
   return (num / 100).toString()
 }
 
+// Local storage key for user's slippage preference
+const SLIPPAGE_STORAGE_KEY = "trails-slippage-tolerance"
+
+// 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 => {
+  try {
+    const stored = localStorage.getItem(SLIPPAGE_STORAGE_KEY)
+    return stored || defaultValue
+  } catch (_error) {
+    return defaultValue
+  }
+}
+
 interface SlippageToleranceSettingsProps {
   className?: string
 }
@@ -24,14 +38,25 @@ interface SlippageToleranceSettingsProps {
 export const SlippageToleranceSettings: React.FC<
   SlippageToleranceSettingsProps
 > = ({ className = "" }) => {
+  const config = useTrails()
   const [displayValue, setDisplayValue] = useState("")
   const [showTooltip, setShowTooltip] = useState(false)
 
-  // Initialize display value from current config
+  // Initialize display value from local storage or config
   useEffect(() => {
-    const currentSlippage = getSlippageTolerance()
-    setDisplayValue(decimalToPercentage(currentSlippage))
-  }, [])
+    try {
+      const stored = localStorage.getItem(SLIPPAGE_STORAGE_KEY)
+      if (stored) {
+        setDisplayValue(decimalToPercentage(stored))
+      } else {
+        // Default to config value
+        setDisplayValue(decimalToPercentage(String(config.slippageTolerance)))
+      }
+    } catch (_error) {
+      // Fallback to config if localStorage fails
+      setDisplayValue(decimalToPercentage(String(config.slippageTolerance)))
+    }
+  }, [config.slippageTolerance])
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value
@@ -49,9 +74,17 @@ export const SlippageToleranceSettings: React.FC<
 
   const handleInputBlur = () => {
     if (displayValue === "") {
-      // Reset to current value if empty
-      const currentSlippage = getSlippageTolerance()
-      setDisplayValue(decimalToPercentage(currentSlippage))
+      // Reset to stored value or config default
+      try {
+        const stored = localStorage.getItem(SLIPPAGE_STORAGE_KEY)
+        if (stored) {
+          setDisplayValue(decimalToPercentage(stored))
+        } else {
+          setDisplayValue(decimalToPercentage(String(config.slippageTolerance)))
+        }
+      } catch (_error) {
+        setDisplayValue(decimalToPercentage(String(config.slippageTolerance)))
+      }
       return
     }
 
@@ -59,15 +92,27 @@ export const SlippageToleranceSettings: React.FC<
 
     // Validate range (0.01% to 50%)
     if (percentage < 0.01 || percentage > 50) {
-      // Reset to current value if invalid
-      const currentSlippage = getSlippageTolerance()
-      setDisplayValue(decimalToPercentage(currentSlippage))
+      // Reset to stored value or config default
+      try {
+        const stored = localStorage.getItem(SLIPPAGE_STORAGE_KEY)
+        if (stored) {
+          setDisplayValue(decimalToPercentage(stored))
+        } else {
+          setDisplayValue(decimalToPercentage(String(config.slippageTolerance)))
+        }
+      } catch (_error) {
+        setDisplayValue(decimalToPercentage(String(config.slippageTolerance)))
+      }
       return
     }
 
-    // Convert to decimal format and save
+    // Convert to decimal format and save to localStorage
     const decimalValue = percentageToDecimal(displayValue)
-    setSlippageTolerance(decimalValue)
+    try {
+      localStorage.setItem(SLIPPAGE_STORAGE_KEY, decimalValue)
+    } catch (error) {
+      console.warn("Failed to save slippage tolerance to localStorage:", error)
+    }
 
     // Update display to show formatted value
     setDisplayValue(percentage.toString())
@@ -83,7 +128,11 @@ export const SlippageToleranceSettings: React.FC<
     const percentageStr = percentage.toString()
     setDisplayValue(percentageStr)
     const decimalValue = percentageToDecimal(percentageStr)
-    setSlippageTolerance(decimalValue)
+    try {
+      localStorage.setItem(SLIPPAGE_STORAGE_KEY, decimalValue)
+    } catch (error) {
+      console.warn("Failed to save slippage tolerance to localStorage:", error)
+    }
   }
 
   return (

package/src/widget/components/Toast.tsx

@@ -298,6 +298,16 @@ function ToastItem({ toast, onRemove }: ToastItemProps) {
             <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
               {toast.message}
             </p>
+            {toast.type === "error" && (
+              <a
+                href="https://support.trails.build/en/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-2 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline inline-block"
+              >
+                Visit support
+              </a>
+            )}
           </div>
           <button
             type="button"

package/src/widget/components/TokenImage.tsx

@@ -1,16 +1,18 @@
-import React, { useMemo } from "react"
+import { useMemo, useState, useEffect, useRef } from "react"
+import type React from "react"
 import { ChainImage } from "./ChainImage.js"
 import { getCommonTokenImageUrl } from "../../tokens.js"
 import { logger } from "../../logger.js"
+import { commonTokenImages } from "../../tokens.js"
 
 function normalizeImageUrl(
   imageUrl?: string | null,
   symbol?: string | null,
   chainId?: number | null,
   contractAddress?: string | null,
-) {
+): string | null {
   if (symbol === "ETH") {
-    return "https://assets.sequence.info/images/tokens/large/1/0x0000000000000000000000000000000000000000.webp"
+    return commonTokenImages.ETH!
   }
   const commonImageUrl = getCommonTokenImageUrl({
     symbol,
@@ -43,24 +45,64 @@ export const TokenImage: React.FC<TokenImageProps> = ({
   contractAddress,
   size = 24,
 }) => {
-  const [imageError, setImageError] = React.useState(false)
-  const effectiveImageUrl = useMemo(() => {
-    logger.console.log("[TokenImage] normalizeImageUrl", {
-      imageUrl,
-      symbol,
-      chainId,
-      contractAddress,
-    })
+  const [imageError, setImageError] = useState(false)
+  const [imageSize, setImageSize] = useState<{
+    width: number
+    height: number
+  } | null>(null)
+  const previousUrlRef = useRef<string | null>(null)
+
+  const effectiveImageUrl = useMemo<string | null>(() => {
     return normalizeImageUrl(imageUrl, symbol, chainId, contractAddress)
   }, [imageUrl, symbol, chainId, contractAddress])
 
+  // Reset image size and error when URL changes
+  useEffect(() => {
+    if (previousUrlRef.current !== effectiveImageUrl) {
+      setImageSize(null)
+      setImageError(false)
+      previousUrlRef.current = effectiveImageUrl
+    }
+  }, [effectiveImageUrl])
+
   const displaySymbol = symbol?.[0]?.toUpperCase() || "?"
 
+  const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    const img = e.currentTarget
+    const size = {
+      width: img.naturalWidth,
+      height: img.naturalHeight,
+    }
+    setImageSize(size)
+    logger.console.log("[TokenImage] Image loaded", {
+      effectiveImageUrl,
+      naturalWidth: img.naturalWidth,
+      naturalHeight: img.naturalHeight,
+      symbol,
+      chainId,
+      contractAddress,
+    })
+  }
+
   const handleImageError = () => {
-    setImageError(true)
+    // Only set error if we haven't already determined it's invalid
+    // This prevents unnecessary state updates
+    if (!imageError) {
+      logger.console.error("[TokenImage] Image load error", {
+        effectiveImageUrl,
+        imageUrl,
+        symbol,
+        chainId,
+        contractAddress,
+      })
+      setImageError(true)
+    }
   }
 
-  const shouldShowText = !effectiveImageUrl || imageError
+  // Show text if no URL, error, or image is 1x1 or less (transparent pixel)
+  const isTransparentPixel =
+    imageSize !== null && imageSize.width <= 1 && imageSize.height <= 1
+  const shouldShowText = !effectiveImageUrl || imageError || isTransparentPixel
 
   return (
     <div
@@ -92,6 +134,7 @@ export const TokenImage: React.FC<TokenImageProps> = ({
           src={effectiveImageUrl}
           alt={symbol || "Token"}
           className="absolute w-full h-full rounded-full object-contain"
+          onLoad={handleImageLoad}
           onError={handleImageError}
           title={`Token: ${symbol}`}
           style={{

package/src/widget/components/WalletConnect.tsx

@@ -3,7 +3,7 @@ import { useAccount, useConnect, useDisconnect } from "wagmi"
 import { walletConnect } from "wagmi/connectors"
 import { QrCode } from "./QrCode.js"
 import { TruncatedAddress } from "./TruncatedAddress.js"
-import { getWalletConnectProjectId } from "../../config.js"
+import { useTrails } from "../providers/TrailsProvider.js"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { getWalletIcon, getWalletName } from "../../wallets.js"
 import { logger } from "../../logger.js"
@@ -18,14 +18,14 @@ export interface WalletConnectProps {
 
 // Local singleton to avoid multiple Core initializations from this screen
 let wcConnectorSingleton: ReturnType<typeof walletConnect> | null = null
-function getWalletConnectConnector(projectId?: string) {
+function getWalletConnectConnector(projectId: string) {
   if (!wcConnectorSingleton) {
     logger.console.log(
       "[trails-sdk] [WalletConnect] Creating new connector with projectId:",
-      projectId || getWalletConnectProjectId(),
+      projectId,
     )
     wcConnectorSingleton = walletConnect({
-      projectId: projectId || getWalletConnectProjectId(),
+      projectId: projectId,
       showQrModal: false,
     })
   }
@@ -35,16 +35,17 @@ function getWalletConnectConnector(projectId?: string) {
 export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
   onBack,
   onContinue,
-  projectId,
+  projectId: projectIdProp,
   onReconnectPreviousWallet,
   selectedWalletId,
 }) => {
+  const config = useTrails()
+  const projectId = projectIdProp || config.walletConnectProjectId
   const { connect, connectors, status } = useConnect() as any
   const { disconnect } = useDisconnect()
   const { isConnected, address, connector } = useAccount()
   const [wcUri, setWcUri] = React.useState<string | null>(null)
   const [showUri, setShowUri] = React.useState(false)
-  const [copied, setCopied] = React.useState(false)
   const listenerRef = React.useRef<(() => void) | null>(null)
   const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
@@ -58,21 +59,6 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
       setWcUri(uri)
     }, 500) // 300ms debounce delay
   }, [])
-
-  // Copy URI to clipboard
-  const handleCopyUri = useCallback(async () => {
-    if (!wcUri) return
-    try {
-      await navigator.clipboard.writeText(wcUri)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    } catch (err) {
-      logger.console.error(
-        "[trails-sdk] [WalletConnect] Failed to copy URI",
-        err,
-      )
-    }
-  }, [wcUri])
   const isWalletConnectConnector = React.useMemo(() => {
     return connector?.name === "WalletConnect" && isConnected
   }, [connector, isConnected])
@@ -84,13 +70,18 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
     (c.id || "").toLowerCase().includes("walletconnect"),
   )
 
-  // Only auto-navigate to home if we successfully connect a new wallet
+  // Only auto-navigate back if we successfully connect a new wallet
   // Don't auto-navigate if user was already connected when they entered this screen
   useEffect(() => {
-    if (isConnected && status === "success" && !wasConnectedOnMount.current) {
-      onContinue()
+    if (
+      isConnected &&
+      status === "success" &&
+      !wasConnectedOnMount.current &&
+      onBack
+    ) {
+      onBack()
     }
-  }, [isConnected, status, onContinue])
+  }, [isConnected, status, onBack])
 
   const handleConnect = useCallback(
     async (force: boolean = false) => {
@@ -101,7 +92,7 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
       })
       if ((status === "pending" || status === "success") && !force) return
 
-      const makeConnector = () => getWalletConnectConnector(projectId)
+      const makeConnector = () => getWalletConnectConnector(projectId!)
       const connector = wcConnectorFromConfig || makeConnector()
 
       logger.console.log(
@@ -317,82 +308,29 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
                       getWalletIcon("walletconnect")
                     }
                   />
-                  <div className="flex items-center justify-center gap-2 mt-2">
-                    <button
-                      type="button"
-                      onClick={handleCopyUri}
-                      className="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer flex items-center gap-1 hover:underline"
-                      title="Copy URI to clipboard"
+                  <button
+                    onClick={() => setShowUri(!showUri)}
+                    className="mt-2 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:underline cursor-pointer flex items-center gap-1"
+                  >
+                    {showUri ? "Hide URI" : "Show URI"}
+                    <svg
+                      className={`w-3 h-3 transition-transform ${showUri ? "rotate-180" : ""}`}
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
                     >
-                      {copied ? (
-                        <>
-                          <svg
-                            className="w-3 h-3"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                            aria-hidden="true"
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                              d="M5 13l4 4L19 7"
-                            />
-                          </svg>
-                          Copied!
-                        </>
-                      ) : (
-                        <>
-                          <svg
-                            className="w-3 h-3"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                            aria-hidden="true"
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                              d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-                            />
-                          </svg>
-                          Copy URI
-                        </>
-                      )}
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => setShowUri(!showUri)}
-                      className="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:underline cursor-pointer flex items-center gap-1"
-                    >
-                      {showUri ? "Hide URI" : "Show URI"}
-                      <svg
-                        className={`w-3 h-3 transition-transform ${showUri ? "rotate-180" : ""}`}
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        aria-hidden="true"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M19 9l-7 7-7-7"
-                        />
-                      </svg>
-                    </button>
-                  </div>
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 9l-7 7-7-7"
+                      />
+                    </svg>
+                  </button>
                   {showUri && (
-                    <button
-                      type="button"
-                      className="mt-2 text-xs text-gray-600 dark:text-gray-400 break-all cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 p-2 rounded transition-colors text-left w-full"
-                      onClick={handleCopyUri}
-                      title="Click to copy URI"
-                    >
+                    <p className="mt-2 text-xs text-gray-600 dark:text-gray-400 break-all">
                       {wcUri}
-                    </button>
+                    </p>
                   )}
                 </div>
               ) : (

package/src/widget/hooks/useCheckout.ts

@@ -19,6 +19,15 @@ export type CheckoutCallbacks = {
     sessionId: string
     error: unknown
   }) => void
+  onCheckoutApprovalRequest?: (data: { sessionId: string }) => void
+  onCheckoutApprovalConfirmed?: (data: {
+    sessionId: string
+    transactionHash: `0x${string}`
+  }) => void
+  onCheckoutApprovalRejected?: (data: {
+    sessionId: string
+    error: unknown
+  }) => void
   onCheckoutComplete?: (data: { sessionId: string }) => void
   onCheckoutError?: (data: { sessionId: string; error: unknown }) => void
   onCheckoutStatusUpdate?: (data: {
@@ -33,6 +42,9 @@ export type CheckoutOnHandlers = {
   triggerCheckoutSignatureRequest: () => void
   triggerCheckoutSignatureConfirmed: () => void
   triggerCheckoutSignatureRejected: (error: unknown) => void
+  triggerCheckoutApprovalRequest: () => void
+  triggerCheckoutApprovalConfirmed: (transactionHash: `0x${string}`) => void
+  triggerCheckoutApprovalRejected: (error: unknown) => void
   triggerCheckoutComplete: (
     txStatus: "success" | "fail",
     accountAddress?: string,
@@ -59,6 +71,9 @@ export function useCheckout({
   onCheckoutSignatureRequest,
   onCheckoutSignatureConfirmed,
   onCheckoutSignatureRejected,
+  onCheckoutApprovalRequest,
+  onCheckoutApprovalConfirmed,
+  onCheckoutApprovalRejected,
   onCheckoutComplete,
   onCheckoutError,
   onCheckoutStatusUpdate,
@@ -152,6 +167,59 @@ export function useCheckout({
     [onCheckoutSignatureRejected],
   )
 
+  const triggerCheckoutApprovalRequest = useCallback(() => {
+    if (onCheckoutApprovalRequest && sessionIdRef.current) {
+      try {
+        onCheckoutApprovalRequest({
+          sessionId: sessionIdRef.current,
+        })
+      } catch (error) {
+        logger.console.error(
+          "[trails-sdk] Error calling onCheckoutApprovalRequest:",
+          error,
+        )
+      }
+    }
+  }, [onCheckoutApprovalRequest])
+
+  const triggerCheckoutApprovalConfirmed = useCallback(
+    (transactionHash: `0x${string}`) => {
+      if (onCheckoutApprovalConfirmed && sessionIdRef.current) {
+        try {
+          onCheckoutApprovalConfirmed({
+            sessionId: sessionIdRef.current,
+            transactionHash,
+          })
+        } catch (error) {
+          logger.console.error(
+            "[trails-sdk] Error calling onCheckoutApprovalConfirmed:",
+            error,
+          )
+        }
+      }
+    },
+    [onCheckoutApprovalConfirmed],
+  )
+
+  const triggerCheckoutApprovalRejected = useCallback(
+    (error: unknown) => {
+      if (onCheckoutApprovalRejected && sessionIdRef.current) {
+        try {
+          onCheckoutApprovalRejected({
+            sessionId: sessionIdRef.current,
+            error,
+          })
+        } catch (callbackError) {
+          logger.console.error(
+            "[trails-sdk] Error calling onCheckoutApprovalRejected:",
+            callbackError,
+          )
+        }
+      }
+    },
+    [onCheckoutApprovalRejected],
+  )
+
   const triggerCheckoutComplete = useCallback(
     (txStatus: "success" | "fail", accountAddress?: string) => {
       if (onCheckoutComplete && sessionIdRef.current) {
@@ -256,6 +324,9 @@ export function useCheckout({
       triggerCheckoutSignatureRequest,
       triggerCheckoutSignatureConfirmed,
       triggerCheckoutSignatureRejected,
+      triggerCheckoutApprovalRequest,
+      triggerCheckoutApprovalConfirmed,
+      triggerCheckoutApprovalRejected,
       triggerCheckoutComplete,
       triggerCheckoutError,
       triggerCheckoutStatusUpdate,

package/src/widget/hooks/useCurrentScreen.tsx

@@ -12,6 +12,7 @@ export type Screen =
   | "swap"
   | "receive"
   | "wallet-confirmation"
+  | "qr-code-wallet-select"
   | "qr-code-deposit"
   | "pending"
   | "receipt"

package/src/widget/hooks/useDebugScreens.ts

@@ -16,6 +16,7 @@ type Screen =
   | "swap"
   | "receive"
   | "wallet-confirmation"
+  | "qr-code-wallet-select"
   | "qr-code-deposit"
   | "pending"
   | "receipt"
@@ -132,6 +133,10 @@ export const useDebugScreens = ({
           setShowWalletConfirmRetry(false)
           setCurrentScreen("wallet-confirmation")
           break
+        case "qr-code-wallet-select":
+          setPrepareSendQuote(dummyQuote)
+          setCurrentScreen("qr-code-wallet-select")
+          break
         case "wallet-confirmation-retry":
           // Set dummy USDC token for debug mode
           setSelectedToken(dummySelectedToken)