0xtrails 0.2.5 → 0.2.6

package/src/widget/components/WaasFeeOptions.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react"
 import { useWaasFeeOptions } from "@0xsequence/connect"
 import { TokenImage } from "./TokenImage.js"
-import { ChevronDown, ChevronUp } from "lucide-react"
+import { ChevronDown, ChevronUp, Copy } from "lucide-react"
 import { formatUnits } from "viem"
 
 // Define types based on the @0xsequence/connect documentation
@@ -29,12 +29,14 @@ interface WaasFeeOptionsProps {
   chainId?: number
   setIsFeeOptionConfirmed: (isFeeOptionConfirmed: boolean) => void
   onFeeOptionsLoaded?: () => void
+  setIsError?: (isError: boolean) => void
 }
 
 export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
   chainId,
   setIsFeeOptionConfirmed,
   onFeeOptionsLoaded,
+  setIsError,
 }) => {
   const [
     pendingFeeOptionConfirmation,
@@ -47,6 +49,7 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
   const [isExpanded, setIsExpanded] = useState(false)
   const [isProcessing, setIsProcessing] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
+  const [copiedAddress, setCopiedAddress] = useState<string | null>(null)
 
   // Debug logging
   useEffect(() => {
@@ -88,6 +91,7 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
 
   // Initialize with first option when fee options become available
   useEffect(() => {
+    setIsError?.(false)
     if (pendingFeeOptionConfirmation) {
       console.log(
         "[trails-sdk] Pending fee options: ",
@@ -97,7 +101,10 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
       // Notify parent that fee options are loaded
       if (
         onFeeOptionsLoaded &&
-        pendingFeeOptionConfirmation.options?.length > 0
+        pendingFeeOptionConfirmation.options?.length > 0 &&
+        pendingFeeOptionConfirmation.options.find(
+          (option: any) => option.hasEnoughBalanceForFee,
+        )
       ) {
         onFeeOptionsLoaded()
       }
@@ -112,7 +119,7 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
         }
       }
     }
-  }, [pendingFeeOptionConfirmation, onFeeOptionsLoaded])
+  }, [pendingFeeOptionConfirmation, onFeeOptionsLoaded, setIsError])
 
   // Handle fee option selection and confirmation
   const handleConfirmFee = async (tokenAddress: string | null) => {
@@ -139,6 +146,30 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
     }
   }
 
+  // Handle copy address to clipboard
+  const handleCopyAddress = async (address: string, e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    try {
+      await navigator.clipboard.writeText(address)
+      setCopiedAddress(address)
+      setTimeout(() => setCopiedAddress(null), 2000)
+    } catch (error) {
+      try {
+        const textArea = document.createElement("textarea")
+        textArea.value = address
+        document.body.appendChild(textArea)
+        textArea.select()
+        document.execCommand("copy")
+        document.body.removeChild(textArea)
+        setCopiedAddress(address)
+        setTimeout(() => setCopiedAddress(null), 2000)
+      } catch (fallbackError) {
+        console.error("Fallback copy failed:", fallbackError)
+      }
+    }
+  }
+
   // Don't render if no pending fee confirmation
   if (!pendingFeeOptionConfirmation) {
     return null
@@ -162,6 +193,94 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
     | FeeOptionExtended
     | undefined
 
+  const hasTokenForFee = pendingFeeOptionConfirmation.options.find(
+    (option: any) => option.hasEnoughBalanceForFee,
+  )
+
+  if (!hasTokenForFee) {
+    setIsError?.(true)
+  }
+
+  if (!hasTokenForFee) {
+    return (
+      <div className="space-y-4 py-6">
+        <div className="text-center space-y-1">
+          <p className="text-xs trails-text-muted">
+            Fund your wallet with one of the following tokens
+          </p>
+        </div>
+
+        <div className="flex flex-col space-y-2">
+          {pendingFeeOptionConfirmation.options.map((option: any) => {
+            const contractAddress = option.token.contractAddress
+
+            return (
+              <div
+                key={option.token.symbol || contractAddress}
+                className="flex items-center space-x-3 p-3 trails-bg-secondary trails-border-radius-container border border-transparent"
+              >
+                <div className="flex items-center shrink-0">
+                  <TokenImage
+                    symbol={option.token.symbol}
+                    imageUrl={(option.token as any).logoURL}
+                    chainId={chainId}
+                    size={32}
+                  />
+                </div>
+                <div className="flex-1 min-w-0 flex flex-col items-start">
+                  <span className="text-sm font-bold trails-text-primary leading-tight">
+                    {option.token.symbol}
+                  </span>
+                  {contractAddress ? (
+                    <div className="flex items-center space-x-1.5 mt-0.5">
+                      <span className="text-xs trails-text-muted leading-tight">
+                        {contractAddress.slice(0, 4)}...
+                        {contractAddress.slice(-4)}
+                      </span>
+                      <button
+                        type="button"
+                        onClick={(e) => handleCopyAddress(contractAddress, e)}
+                        className="shrink-0 p-0.5 rounded transition-colors cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center justify-center"
+                        title={
+                          copiedAddress === contractAddress
+                            ? "Copied!"
+                            : "Copy address"
+                        }
+                      >
+                        {copiedAddress === contractAddress ? (
+                          <svg
+                            className="w-3 h-3 text-green-600 dark:text-green-400"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                            aria-label="Copied"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M5 13l4 4L19 7"
+                            />
+                          </svg>
+                        ) : (
+                          <Copy className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
+                        )}
+                      </button>
+                    </div>
+                  ) : (
+                    <span className="text-xs trails-text-muted mt-0.5 leading-tight">
+                      Native Token
+                    </span>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="space-y-2">
       {/* Header */}
@@ -208,7 +327,7 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
             {/* Display balance info if available */}
             {selectedOption && "balanceFormatted" in selectedOption && (
               <div className="text-right">
-                <div className="text-xs trails-text-muted">
+                <div className="text-xs text-gray-500 dark:text-gray-400">
                   Balance: {String(selectedOption.balanceFormatted)}
                 </div>
                 {!selectedOption.hasEnoughBalanceForFee && (
@@ -266,7 +385,7 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
                 {/* Display balance info if available */}
                 {"balanceFormatted" in option && (
                   <div className="text-right">
-                    <div className="text-xs trails-text-muted">
+                    <div className="text-xs text-gray-500 dark:text-gray-400">
                       Balance: {String(option.balanceFormatted)}
                     </div>
                     <div className="text-xs trails-text-muted">

package/src/widget/components/WalletConfirmation.tsx

@@ -1,4 +1,5 @@
 import { TokenImage } from "./TokenImage.js"
+import { ErrorAnimationIcon } from "./ErrorAnimationIcon.js"
 import { ChevronLeft } from "lucide-react"
 import type React from "react"
 import { useEffect, useMemo, useState } from "react"
@@ -25,9 +26,11 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
   const [showTimeoutWarning, setShowTimeoutWarning] = useState(false)
   const [isFeeOptionConfirmed, setIsFeeOptionConfirmed] = useState(false)
   const [areFeeOptionsLoaded, setAreFeeOptionsLoaded] = useState(false)
+  const [feeOptionsError, setFeeOptionsError] = useState<boolean>(false)
   const { connector } = useAccount()
 
   useEffect(() => {
+    setAreFeeOptionsLoaded(false)
     setShowContent(true)
   }, [])
 
@@ -80,21 +83,25 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
           <div
             className={`mx-auto flex items-center justify-center transition-all duration-500 ease-out relative mb-4 ${showContent ? "transform -translate-y-8" : ""}`}
           >
-            {retryEnabled ? (
+            {feeOptionsError === true ? (
+              <ErrorAnimationIcon />
+            ) : retryEnabled ? (
               <div className={`h-24 w-24`} />
             ) : (
               <div className="animate-spin rounded-full h-24 w-24 border-solid border-b-2 border-blue-500 dark:border-blue-400" />
             )}
 
-            <div className="absolute">
-              <TokenImage
-                imageUrl={quote?.originToken.imageUrl}
-                symbol={quote?.originToken.symbol}
-                chainId={quote?.originChain.id}
-                contractAddress={quote?.originToken.contractAddress}
-                size={64}
-              />
-            </div>
+            {!feeOptionsError && (
+              <div className="absolute">
+                <TokenImage
+                  imageUrl={quote?.originToken.imageUrl}
+                  symbol={quote?.originToken.symbol}
+                  chainId={quote?.originChain.id}
+                  contractAddress={quote?.originToken.contractAddress}
+                  size={64}
+                />
+              </div>
+            )}
           </div>
 
           <div
@@ -109,7 +116,9 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
                     ? "Waiting for wallet…"
                     : areFeeOptionsLoaded
                       ? "Waiting for fee selection…"
-                      : "Waiting for fee options…"}
+                      : feeOptionsError
+                        ? "No fee token found"
+                        : "Waiting for fee options…"}
             </h2>
             <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
               {!isSequenceWaas
@@ -127,6 +136,7 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
               <WaasFeeOptions
                 chainId={quote?.originChain.id}
                 setIsFeeOptionConfirmed={setIsFeeOptionConfirmed}
+                setIsError={setFeeOptionsError}
                 onFeeOptionsLoaded={() => {
                   console.log("[trails-sdk] Fee options loaded callback called")
                   setAreFeeOptionsLoaded(true)
@@ -144,7 +154,7 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
             <div className="p-4 trails-border-radius-container text-sm bg-yellow-50 border border-solid border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-700/50">
               <div className="flex items-start space-x-3">
                 <svg
-                  className="w-5 h-5 mt-0.5 flex-shrink-0 text-yellow-600 dark:text-yellow-400"
+                  className="w-5 h-5 mt-0.5 shrink-0 text-yellow-600 dark:text-yellow-400"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -187,7 +197,7 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
         )}
 
         {/* Transaction Details */}
-        <QuoteDetails quote={quote} showContent={true} />
+        <QuoteDetails quote={quote} showContent={true} compact={true} />
       </div>
     </div>
   )

package/src/widget/components/WalletConnect.tsx

@@ -44,6 +44,7 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
   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)
 
@@ -57,6 +58,21 @@ 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])
@@ -68,18 +84,13 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
     (c.id || "").toLowerCase().includes("walletconnect"),
   )
 
-  // Only auto-navigate back if we successfully connect a new wallet
+  // Only auto-navigate to home 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 &&
-      onBack
-    ) {
-      onBack()
+    if (isConnected && status === "success" && !wasConnectedOnMount.current) {
+      onContinue()
     }
-  }, [isConnected, status, onBack])
+  }, [isConnected, status, onContinue])
 
   const handleConnect = useCallback(
     async (force: boolean = false) => {
@@ -306,29 +317,82 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
                       getWalletIcon("walletconnect")
                     }
                   />
-                  <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"
+                  <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"
                     >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M19 9l-7 7-7-7"
-                      />
-                    </svg>
-                  </button>
+                      {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>
                   {showUri && (
-                    <p className="mt-2 text-xs text-gray-600 dark:text-gray-400 break-all">
+                    <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"
+                    >
                       {wcUri}
-                    </p>
+                    </button>
                   )}
                 </div>
               ) : (