0xtrails 0.5.0 → 0.6.0

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/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)