0xtrails 0.13.0 → 0.13.2

package/src/widget/components/QuoteDetails.tsx

@@ -6,7 +6,7 @@ import {
   TriangleAlert,
 } from "lucide-react"
 import type React from "react"
-import { useCallback, useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { getExplorerUrl, getExplorerUrlForAddress } from "../../explorer.js"
 import { logger } from "../../logger.js"
 import type { MeldQuote } from "../../meld/utils/meld.js"
@@ -67,6 +67,12 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
   const [showCalldata, setShowCalldata] = useState(false)
   const [showOriginRate, setShowOriginRate] = useState(true)
   const [isExpanded, setIsExpanded] = useState(initialExpanded)
+  const [prevInitialExpanded, setPrevInitialExpanded] =
+    useState(initialExpanded)
+  if (initialExpanded !== prevInitialExpanded) {
+    setPrevInitialExpanded(initialExpanded)
+    setIsExpanded(initialExpanded)
+  }
   const containerRef = useRef<HTMLDivElement>(null)
   const { trailsAppUrl } = useTrails()
   const calldataRef = useRef<HTMLDivElement>(null)
@@ -86,13 +92,6 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
     })
   }
 
-  // Sync with initialExpanded prop changes
-  useEffect(() => {
-    if (initialExpanded !== undefined) {
-      setIsExpanded(initialExpanded)
-    }
-  }, [initialExpanded])
-
   // Notify parent when expansion state changes
   useEffect(() => {
     onExpand?.(isExpanded)
@@ -132,42 +131,48 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
     }
   }, [onRampQuote, quote])
 
-  // Calculate total fees in USD
-  const [totalFeeUsd, setTotalFeeUsd] = useState(0)
-  const [totalFeeUsdDisplay, setTotalFeeUsdDisplay] = useState("$0.00")
-  const [totalFeeUsdLocaleDisplay, setTotalFeeUsdLocaleDisplay] =
-    useState("$0.00")
-
-  useEffect(() => {
-    if (onRampQuote) {
-      const feeInUsd =
-        totalOnRampFeeInUsd + parseFloat(quote?.fees.totalFeeAmountUsd || "0")
-
-      setTotalFeeUsd(feeInUsd)
-      setTotalFeeUsdDisplay(formatUsdAmountDisplay(feeInUsd))
-      setTotalFeeUsdLocaleDisplay(formatUsdAmountLocaleDisplay(feeInUsd))
-    } else if (quote?.fees?.totalFeeAmountUsd) {
-      const feeInUsd = parseFloat(quote.fees.totalFeeAmountUsd)
-      setTotalFeeUsd(feeInUsd)
-      setTotalFeeUsdDisplay(
-        quote.fees.totalFeeAmountUsdDisplay ?? formatUsdAmountDisplay(feeInUsd),
-      )
-      setTotalFeeUsdLocaleDisplay(
-        quote.fees.totalFeeAmountUsdLocaleDisplay ??
-          formatUsdAmountLocaleDisplay(feeInUsd),
-      )
-    } else {
-      setTotalFeeUsd(0)
-      setTotalFeeUsdDisplay("$0.00")
-      setTotalFeeUsdLocaleDisplay(formatUsdAmountLocaleDisplay(0))
-    }
-  }, [onRampQuote, quote?.fees, totalOnRampFeeInUsd])
+  const { totalFeeUsd, totalFeeUsdDisplay, totalFeeUsdLocaleDisplay } =
+    useMemo(() => {
+      if (onRampQuote) {
+        const feeInUsd =
+          totalOnRampFeeInUsd + parseFloat(quote?.fees.totalFeeAmountUsd || "0")
+        return {
+          totalFeeUsd: feeInUsd,
+          totalFeeUsdDisplay: formatUsdAmountDisplay(feeInUsd),
+          totalFeeUsdLocaleDisplay: formatUsdAmountLocaleDisplay(feeInUsd),
+        }
+      }
+      if (quote?.fees?.totalFeeAmountUsd) {
+        const feeInUsd = parseFloat(quote.fees.totalFeeAmountUsd)
+        return {
+          totalFeeUsd: feeInUsd,
+          totalFeeUsdDisplay:
+            quote.fees.totalFeeAmountUsdDisplay ??
+            formatUsdAmountDisplay(feeInUsd),
+          totalFeeUsdLocaleDisplay:
+            quote.fees.totalFeeAmountUsdLocaleDisplay ??
+            formatUsdAmountLocaleDisplay(feeInUsd),
+        }
+      }
+      return {
+        totalFeeUsd: 0,
+        totalFeeUsdDisplay: "$0.00",
+        totalFeeUsdLocaleDisplay: formatUsdAmountLocaleDisplay(0),
+      }
+    }, [onRampQuote, quote?.fees, totalOnRampFeeInUsd])
 
   const parseSlippageTolerance = useCallback(() => {
     if (!quote?.slippageTolerance) return null
     return parseFloat(quote.slippageTolerance) * 100
   }, [quote?.slippageTolerance])
 
+  const protocolVersionDisplay = useMemo(() => {
+    const normalized = (quote?.intentProtocol || "v1")
+      .replace("_", ".")
+      .toUpperCase()
+    return normalized.startsWith("V") ? normalized : `V${normalized}`
+  }, [quote?.intentProtocol])
+
   if (!showContent) return null
 
   return (
@@ -996,38 +1001,40 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
               {/* Custom Calldata */}
               {quote?.destinationCalldata && (
                 <div className="space-y-2">
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setShowCalldata(!showCalldata)
-                      // Auto-scroll to calldata when expanding
-                      if (!showCalldata) {
-                        setTimeout(() => {
-                          if (calldataRef.current) {
-                            calldataRef.current.scrollIntoView({
-                              behavior: "smooth",
-                              block: "nearest",
-                            })
-                          }
-                        }, 150) // Delay to let the expansion animation start
+                  <div className="space-y-0.5">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setShowCalldata(!showCalldata)
+                        // Auto-scroll to calldata when expanding
+                        if (!showCalldata) {
+                          setTimeout(() => {
+                            if (calldataRef.current) {
+                              calldataRef.current.scrollIntoView({
+                                behavior: "smooth",
+                                block: "nearest",
+                              })
+                            }
+                          }, 150) // Delay to let the expansion animation start
+                        }
+                      }}
+                      className="flex items-center gap-1 text-xs hover:underline cursor-pointer transition-colors duration-200 text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+                      aria-label={
+                        showCalldata
+                          ? "Hide custom calldata"
+                          : "Show custom calldata"
                       }
-                    }}
-                    className="flex items-center gap-1 text-xs hover:underline cursor-pointer transition-colors duration-200 text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
-                    aria-label={
-                      showCalldata
-                        ? "Hide custom calldata"
-                        : "Show custom calldata"
-                    }
-                  >
-                    <span className="text-[10px]">
-                      Includes custom destination calldata
-                    </span>
-                    <ChevronDown
-                      className={`size-3 transition-transform duration-300 ease-out ${
-                        showCalldata ? "rotate-180" : ""
-                      }`}
-                    />
-                  </button>
+                    >
+                      <span className="text-[10px]">
+                        Includes custom destination calldata
+                      </span>
+                      <ChevronDown
+                        className={`size-3 transition-transform duration-300 ease-out ${
+                          showCalldata ? "rotate-180" : ""
+                        }`}
+                      />
+                    </button>
+                  </div>
                   <div
                     ref={calldataRef}
                     className={`overflow-hidden transition-all duration-300 ease-out ${
@@ -1137,49 +1144,43 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                                 )}
                               </span>
                             </div>
-                            {hasLiveStates && (
+                            {hasLiveStates && hasTxHash && txExplorerUrl && (
                               <div className="mt-1 flex justify-between items-center">
                                 <span className="text-xs text-gray-600 dark:text-gray-400">
                                   Hash
                                 </span>
-                                {hasTxHash && txExplorerUrl ? (
-                                  <a
-                                    href={txExplorerUrl}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="text-xs flex items-center gap-1 hover:underline text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
-                                  >
-                                    {txHasMetaError && (
-                                      <svg
-                                        className="w-4 h-4 text-orange-500"
-                                        fill="none"
-                                        viewBox="0 0 24 24"
-                                        stroke="currentColor"
-                                      >
-                                        <title>
-                                          An internal meta transaction failure
-                                          occurred
-                                        </title>
-                                        <path
-                                          strokeLinecap="round"
-                                          strokeLinejoin="round"
-                                          strokeWidth={2}
-                                          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
-                                        />
-                                      </svg>
+                                <a
+                                  href={txExplorerUrl}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  className="text-xs flex items-center gap-1 hover:underline text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+                                >
+                                  {txHasMetaError && (
+                                    <svg
+                                      className="w-4 h-4 text-orange-500"
+                                      fill="none"
+                                      viewBox="0 0 24 24"
+                                      stroke="currentColor"
+                                    >
+                                      <title>
+                                        An internal meta transaction failure
+                                        occurred
+                                      </title>
+                                      <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+                                      />
+                                    </svg>
+                                  )}
+                                  <span>
+                                    {truncateAddress(
+                                      liveTxState.transactionHash,
                                     )}
-                                    <span>
-                                      {truncateAddress(
-                                        liveTxState.transactionHash,
-                                      )}
-                                    </span>
-                                    <ExternalLink className="w-3 h-3" />
-                                  </a>
-                                ) : (
-                                  <span className="text-xs text-gray-400 dark:text-gray-500">
-                                    ...
                                   </span>
-                                )}
+                                  <ExternalLink className="w-3 h-3" />
+                                </a>
                               </div>
                             )}
                           </div>
@@ -1190,6 +1191,12 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                 )
               })()}
 
+              {protocolVersionDisplay.length > 0 && (
+                <div className="pt-1 text-[10px] opacity-50 text-gray-600 dark:text-gray-400">
+                  Protocol version: {protocolVersionDisplay}
+                </div>
+              )}
+
               {/* Children content */}
               {children && <div className="mb-0">{children}</div>}
             </div>

package/src/widget/components/Receipt.tsx

@@ -5,7 +5,6 @@ import { useEffect, useMemo, useState } from "react"
 import { useAccount } from "wagmi"
 import { getChainInfo } from "../../chains.js"
 import { getExplorerUrl } from "../../explorer.js"
-import { logger } from "../../logger.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import {
   type TransactionState,
@@ -302,16 +301,6 @@ export const Receipt: React.FC<ReceiptProps> = ({
     isDisplayableTransactionHash(tx.transactionHash),
   )
 
-  // Log intent ID if available when aborted (for debugging)
-  useEffect(() => {
-    if (hasAborted && quote?.intentId) {
-      logger.console.error(
-        "[trails-sdk] Transaction aborted with intent ID:",
-        quote.intentId,
-      )
-    }
-  }, [hasAborted, quote?.intentId])
-
   if (
     (!finalExplorerUrl && !shouldShowRefundInfo && !hasAnyTransactionHash) ||
     (hasFailedOrAborted && !hasRefunded)

package/src/widget/components/Recipients.tsx

@@ -1,4 +1,5 @@
 import { Plus, X } from "lucide-react"
+import { wagmiConnectorToWalletId } from "@0xtrails/wallet-registry"
 import type React from "react"
 import { useCallback, useEffect, useState } from "react"
 import { isAddress } from "viem"
@@ -6,7 +7,7 @@ import { useAccount, useConnections } from "wagmi"
 import { useResolveEnsAddress, useResolveEnsName } from "../../ens.js"
 import { logger } from "../../logger.js"
 import { addressEqual, truncateAddress } from "../../utils/address.js"
-import { useWallets, wagmiConnectorToWalletId } from "../../wallets.js"
+import { useWallets } from "../../wallets.js"
 import {
   useViewManager,
   type Mode,

package/src/widget/components/RefundWarning.tsx

@@ -9,17 +9,15 @@ interface RefundWarningProps {
 }
 
 export const RefundWarning: React.FC<RefundWarningProps> = ({
-  fundMethod,
   isSenderContractOnOrigin,
   isSenderContractOnDestination,
   isSequenceWallet = false,
 }) => {
   // Determine if we should show the warning
   const shouldShowWarning =
-    fundMethod === "onramp-mesh" ||
-    (isSenderContractOnOrigin &&
-      !isSenderContractOnDestination &&
-      !isSequenceWallet)
+    isSenderContractOnOrigin &&
+    !isSenderContractOnDestination &&
+    !isSequenceWallet
 
   if (!shouldShowWarning) {
     return null
@@ -27,16 +25,13 @@ export const RefundWarning: React.FC<RefundWarningProps> = ({
 
   // Determine the warning message
   let warningMessage = ""
-  if (fundMethod === "onramp-mesh") {
-    warningMessage =
-      "Using exchange funding may result in loss of funds if the transaction fails and the sender address cannot accept refunds on the origin chain."
-  } else if (isSenderContractOnOrigin && !isSenderContractOnDestination) {
+  if (isSenderContractOnOrigin && !isSenderContractOnDestination) {
     warningMessage =
       "The sender is a contract address. Funds may be lost if the transaction fails and the contract cannot accept refunds on the destination chain."
   }
 
   return (
-    <div className="px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
+    <div className="mb-2 px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
       <div className="flex items-start space-x-2">
         <svg
           className="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5"

package/src/widget/components/ThemeProvider.tsx

@@ -33,12 +33,12 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
 }) => {
   const [theme, setTheme] = useState<Theme>(initialTheme)
   const [isDark, setIsDark] = useState(getIsDark(initialTheme))
-
-  // Update theme when initialTheme prop changes
-  useEffect(() => {
+  const [prevInitialTheme, setPrevInitialTheme] = useState(initialTheme)
+  if (initialTheme !== prevInitialTheme) {
+    setPrevInitialTheme(initialTheme)
     setTheme(initialTheme)
     setIsDark(getIsDark(initialTheme))
-  }, [initialTheme])
+  }
 
   // Listen for system theme changes when in auto mode
   useEffect(() => {

package/src/widget/components/TokenSelector.tsx

@@ -11,6 +11,7 @@ import {
   useRef,
   useState,
 } from "react"
+import { isAddress } from "viem"
 import { useAccount } from "wagmi"
 import { getChainInfo } from "../../chains.js"
 import type { Token } from "../../tokens.js"
@@ -24,7 +25,6 @@ import {
 import { isValueZero } from "../../utils.js"
 import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
 import { useChainFilter } from "../hooks/useChainFilter.js"
-import { useCustomTokenSearch } from "../hooks/useCustomTokenSearch.js"
 import { useTokenList } from "../hooks/useTokenList.js"
 import { useSupportedChains } from "../../query/chains.hooks.js"
 import { ChainFilterDropdown } from "./ChainFilterDropdown.js"
@@ -409,10 +409,13 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
     setSearchQuery,
     handleTokenSelect,
     filteredTokens,
+    chainFilteredTokens: rawChainFilteredTokens,
+    foundTokensAllChains,
     isLoadingTokens,
+    isLoadingCustomToken,
     isSearching,
+    customTokenError,
     isTokenSelected,
-    filteredTokensFormatted,
     balanceError,
   } = useTokenList({
     onContinue: onTokenSelect, // Use onTokenSelect for the hook
@@ -428,20 +431,25 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
   } = useChainFilter()
   const { data: supportedChains = [] } = useSupportedChains()
 
-  // Handle custom token search and integration
-  // Only enable custom token search after initial load is complete
-  const {
-    chainFilteredTokens: rawChainFilteredTokens,
-    isLoadingCustomToken,
-    customTokenError,
-  } = useCustomTokenSearch({
-    searchQuery: hasInitiallyLoaded ? searchQuery : "", // Disable during initial load
-    filteredTokensFormatted,
-    filterByChainId,
-  })
-
   const chainFilteredTokens = useDeferredValue(rawChainFilteredTokens)
 
+  // When searching by address with a chain filter active, the token may not
+  // exist on the selected chain but may have been found on other chains.
+  // Compute those "other chain" results so we can offer them to the user.
+  const tokensFoundOnOtherChains = useMemo(() => {
+    if (
+      filterByChainId === null ||
+      chainFilteredTokens.length > 0 ||
+      foundTokensAllChains.length === 0 ||
+      !isAddress(searchQuery.trim())
+    ) {
+      return []
+    }
+    return foundTokensAllChains.filter(
+      (t) => (t.chainId || 0) !== filterByChainId,
+    )
+  }, [filterByChainId, chainFilteredTokens, foundTokensAllChains, searchQuery])
+
   // Track when initial load is complete
   useEffect(() => {
     if (!isLoadingTokens && !hasInitiallyLoaded) {
@@ -638,8 +646,69 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
         filteredTokens.length === 0 &&
         chainFilteredTokens.length === 0 &&
         errorMessage && (
-          <div className="text-center py-4 rounded-lg trails-bg-secondary">
-            <p className="text-gray-500 dark:text-gray-400">{errorMessage}</p>
+          <div className="space-y-3">
+            <div className="text-center py-4 rounded-lg trails-bg-secondary">
+              <p className="text-gray-500 dark:text-gray-400">{errorMessage}</p>
+            </div>
+
+            {/* Show tokens found on other chains when address search has results on non-selected chains */}
+            {tokensFoundOnOtherChains.length > 0 && (
+              <div className="space-y-2">
+                <p className="text-xs font-medium text-gray-500 dark:text-gray-400 px-2">
+                  {tokensFoundOnOtherChains.length === 1
+                    ? "Found on another chain"
+                    : `Found on ${tokensFoundOnOtherChains.length} other chains`}
+                </p>
+                <div className="max-h-48 overflow-y-auto trails-scrollbar">
+                  {tokensFoundOnOtherChains.map((token) => {
+                    const chainInfo = getChainInfo(token.chainId || 0)
+                    const chainName =
+                      token.chainName ||
+                      chainInfo?.name ||
+                      `Chain ${token.chainId || 0}`
+                    return (
+                      <div
+                        key={`${token.chainId}-${token.contractAddress}`}
+                        onClick={() => handleTokenSelectWithReset(token)}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault()
+                            handleTokenSelectWithReset(token)
+                          }
+                        }}
+                        className="w-full py-2 px-4 flex items-center space-x-3 transition-all duration-200 trails-list-item trails-border-radius-list-button cursor-pointer"
+                      >
+                        <div className="relative shrink-0 mr-2">
+                          <div className="rounded-full flex items-center justify-center bg-gray-100 dark:bg-gray-700">
+                            {token.contractAddress ? (
+                              <TokenImage
+                                symbol={token.symbol}
+                                imageUrl={token.imageUrl}
+                                chainId={token.chainId}
+                                contractAddress={token.contractAddress}
+                                size={32}
+                              />
+                            ) : (
+                              <span className="text-base font-medium text-gray-600 dark:text-gray-300">
+                                {token.symbol}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                        <div className="flex-1 min-w-0 text-left">
+                          <h3 className="text-sm font-medium truncate text-gray-900 dark:text-white">
+                            {token.name}
+                          </h3>
+                          <span className="text-xs text-gray-500 dark:text-gray-400">
+                            {token.symbol} on {chainName}
+                          </span>
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            )}
           </div>
         )}
 

package/src/widget/components/TransactionDetails.tsx

@@ -95,6 +95,52 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
           </div>
         )}
 
+      {/* Refund Transaction Hash */}
+      {isDisplayableTransactionHash(transaction.refundTransactionHash) &&
+        (transaction.refundTransactionChainId || transaction.originChainId) && (
+          <div className="flex justify-between items-center">
+            <span className="text-xs text-gray-600 dark:text-gray-400">
+              Refund Tx:
+            </span>
+            <a
+              href={getExplorerUrl({
+                txHash: transaction.refundTransactionHash,
+                chainId:
+                  transaction.refundTransactionChainId ||
+                  transaction.originChainId ||
+                  0,
+              })}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs font-mono hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
+            >
+              <ChainImage
+                chainId={
+                  transaction.refundTransactionChainId ||
+                  transaction.originChainId ||
+                  0
+                }
+                size={16}
+              />
+              {truncateAddress(transaction.refundTransactionHash)}
+              <svg
+                aria-hidden="true"
+                className="w-3 h-3"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                />
+              </svg>
+            </a>
+          </div>
+        )}
+
       {/* Origin Token - Moved before Origin Intent */}
       {transaction.originToken && (
         <div className="flex justify-between items-start">