0xtrails 0.12.2 → 0.13.0

package/src/widget/components/Recipients.tsx

@@ -1,15 +1,17 @@
 import { Plus, X } from "lucide-react"
 import type React from "react"
-import { useCallback, useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 import { isAddress } from "viem"
 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 { useBack } from "../hooks/useBack.js"
-import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
-import { useMode } from "../hooks/useMode.js"
+import {
+  useViewManager,
+  type Mode,
+  type Screen,
+} from "../hooks/useViewManager.js"
 import { useRecipients, type RecentRecipient } from "../hooks/useRecipients.js"
 import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
 import { AddressOrEnsName } from "./AddressOrEnsName.js"
@@ -47,15 +49,33 @@ interface RecipientsProps {
   onRecipientSelect?: (address: string) => void
 }
 
+type RecipientReturnScreen = Exclude<Screen, "recipients">
+type RecipientFallbackScreen = Extract<
+  RecipientReturnScreen,
+  "send-form" | "fund-form" | "earn" | "swap" | "withdraw"
+>
+
+const isRecipientReturnScreen = (
+  screen: Screen | null,
+): screen is RecipientReturnScreen => {
+  return screen !== null && screen !== "recipients"
+}
+
+const fallbackRecipientTargetByMode = {
+  pay: "send-form",
+  fund: "fund-form",
+  earn: "earn",
+  swap: "swap",
+  withdraw: "withdraw",
+} satisfies Record<Mode, RecipientFallbackScreen>
+
 export const Recipients: React.FC<RecipientsProps> = ({
   onBack,
   selectedRecipient = "",
   onRecipientSelect,
 }) => {
-  const { setCurrentScreen } = useCurrentScreen()
-  const { mode } = useMode()
+  const { navigate, mode, backScreen } = useViewManager()
   const { setSelectedRecipient } = useSelectedRecipient()
-  const { getPreviousScreen } = useBack()
   const { recentRecipients, addRecentRecipient, clearRecentRecipients } =
     useRecipients()
   const [recipientInput, setRecipientInput] = useState(selectedRecipient)
@@ -65,7 +85,7 @@ export const Recipients: React.FC<RecipientsProps> = ({
   const { address } = useAccount()
   const connections = useConnections()
   const { wallets: allWallets } = useWallets()
-  const isWithdrawBack = useRef(getPreviousScreen() === "withdraw").current
+  const isWithdrawBack = backScreen === "withdraw"
 
   // Use wagmi ENS resolution for both directions
   const trimmedInput = recipientInput.trim()
@@ -166,13 +186,12 @@ export const Recipients: React.FC<RecipientsProps> = ({
 
   // Determine the screen to navigate to after selection
   const getTargetScreen = useCallback(() => {
-    if (mode === "fund") {
-      return "fund-form"
-    } else if (mode === "withdraw") {
-      return "withdraw"
+    if (isRecipientReturnScreen(backScreen)) {
+      return backScreen
     }
-    return "home"
-  }, [mode])
+
+    return fallbackRecipientTargetByMode[mode]
+  }, [mode, backScreen])
 
   // Handle recent recipient selection
   const handleRecentRecipientSelect = useCallback(
@@ -180,14 +199,9 @@ export const Recipients: React.FC<RecipientsProps> = ({
       logger.console.log("[trails-sdk] Selected recent recipient:", recipient)
       setSelectedRecipient(recipient.address)
       onRecipientSelect?.(recipient.address)
-      setCurrentScreen(getTargetScreen())
+      navigate(getTargetScreen())
     },
-    [
-      setSelectedRecipient,
-      onRecipientSelect,
-      setCurrentScreen,
-      getTargetScreen,
-    ],
+    [setSelectedRecipient, onRecipientSelect, navigate, getTargetScreen],
   )
 
   // Handle connected wallet selection
@@ -199,14 +213,9 @@ export const Recipients: React.FC<RecipientsProps> = ({
       )
       setSelectedRecipient(walletAddress)
       onRecipientSelect?.(walletAddress)
-      setCurrentScreen(getTargetScreen())
+      navigate(getTargetScreen())
     },
-    [
-      setSelectedRecipient,
-      onRecipientSelect,
-      setCurrentScreen,
-      getTargetScreen,
-    ],
+    [setSelectedRecipient, onRecipientSelect, navigate, getTargetScreen],
   )
 
   const getValidationMessage = () => {
@@ -277,7 +286,7 @@ export const Recipients: React.FC<RecipientsProps> = ({
             ))}
             <button
               type="button"
-              onClick={() => setCurrentScreen("connect")}
+              onClick={() => navigate("connect")}
               className="w-full text-left px-4 py-2 text-sm flex items-center justify-between cursor-pointer transition-colors rounded-xl trails-text-primary trails-hover-bg"
             >
               <div className="flex items-center gap-3">

package/src/widget/components/Swap.tsx

@@ -6,8 +6,8 @@ import type { Token } from "../../tokens.js"
 import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import { ClassicSwap } from "./ClassicSwap.js"
-import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
 import type { FundMethod } from "../../transactionIntent/types.js"
+import type { OnrampConfirmCallback } from "../types/commonProps.js"
 
 interface SwapProps {
   selectedToken: Token | null
@@ -25,30 +25,7 @@ interface SwapProps {
   onTransactionStateChange: (transactionStates: TransactionState[]) => void
   onError: (error: Error | string | null) => void
   onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
-  onWaitingForOnrampConfirm?: (
-    props: PrepareSendQuote,
-    onrampProviderQuote?: OnrampQuote | null,
-    widgetParams?: {
-      depositAddress: string
-      userAddress: string
-      countryCode: string
-      sourceCurrencyCode: string
-      sourceAmount: string
-      destinationCurrencyCode: string
-      serviceProvider: string
-      paymentMethodType?: string
-    },
-    sessionId?: string,
-    sendFn?:
-      | ((options?: {
-          selectedFeeOption?: any | null
-          onOriginSend?: () => void
-          depositTransactionHash?: string
-          skipCommit?: boolean
-        }) => Promise<any>)
-      | null,
-    popupWindowRef?: Window | null,
-  ) => void
+  onWaitingForOnrampConfirm?: OnrampConfirmCallback
   paymasterUrls?: Array<{ chainId: number; url: string }>
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   swapProvider?: string

package/src/widget/components/TokenList.tsx

@@ -5,7 +5,7 @@ import { ScreenHeader } from "./ScreenHeader.js"
 import { TokenSelector } from "./TokenSelector.js"
 import { ChainList } from "./ChainList.js"
 import { useTokenList } from "../hooks/useTokenList.js"
-import { useMode } from "../hooks/useMode.js"
+import { useViewManager } from "../hooks/useViewManager.js"
 import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
 import type { FundMethod } from "../../transactionIntent/types.js"
 
@@ -35,7 +35,7 @@ export const TokenList: React.FC<TokenListProps> = ({
   onNavigateToFundMethods,
   onShowChainList,
 }) => {
-  const { mode } = useMode()
+  const { mode } = useViewManager()
   const { setSelectedToken } = useOriginSelectedToken()
   const [showChainListInternal, setShowChainListInternal] = useState(false)
 

package/src/widget/components/TokenSelector.tsx

@@ -26,6 +26,7 @@ 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"
 import { CopyButton } from "./CopyButton.js"
 import { RecentTokens } from "./RecentTokens.js"
@@ -425,6 +426,7 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
     selectedChainId: filterByChainId,
     setSelectedChainId: setFilterByChainId,
   } = useChainFilter()
+  const { data: supportedChains = [] } = useSupportedChains()
 
   // Handle custom token search and integration
   // Only enable custom token search after initial load is complete
@@ -452,22 +454,20 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
     !hasInitiallyLoaded &&
     (isLoadingTokens || rawChainFilteredTokens.length === 0)
 
-  // Get unique chains from all tokens (not filtered by chain)
+  // Chain selector should show all supported chains, not just chains present in
+  // currently filtered token results.
   const uniqueChains = useMemo(() => {
-    const chainIds = new Set(
-      filteredTokensFormatted.map((token) => token.chainId || 0),
-    )
-    return Array.from(chainIds)
-      .map((chainId) => {
-        const chainInfo = getChainInfo(chainId)
+    return supportedChains
+      .map((chain) => {
+        const chainInfo = getChainInfo(chain.id)
         return {
-          chainId,
-          name: chainInfo?.name || `Chain ${chainId}`,
+          chainId: chain.id,
+          name: chainInfo?.name || chain.name || `Chain ${chain.id}`,
           imageUrl: "", // We'll use TokenImage component for chain icons
         }
       })
       .sort((a, b) => a.name.localeCompare(b.name))
-  }, [filteredTokensFormatted])
+  }, [supportedChains])
 
   // Filter recent tokens to only show ones that exist in the current token list and match search
   const filteredRecentTokens = recentTokens.filter((recentToken) => {
@@ -714,7 +714,7 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
         <div className="text-center pt-2 pb-1">
           <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
             {fundMethod === "direct-transfer"
-              ? "Paying with Direct Transfer"
+              ? "Paying with Crypto Transfer"
               : "Paying with Exchange Deposit"}
           </p>
         </div>

package/src/widget/components/TokenSelectorButton.tsx

@@ -4,7 +4,7 @@ import { useMemo } from "react"
 import { useConnections } from "wagmi"
 import { getChainInfo } from "../../chains.js"
 import { useClickTracking } from "../hooks/useClickTracking.js"
-import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
+import { useViewManager } from "../hooks/useViewManager.js"
 import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
 import { TokenImage } from "./TokenImage.js"
 
@@ -31,7 +31,7 @@ export const TokenSelectorButton: React.FC<TokenSelectorButtonProps> = ({
   fullWidth = false,
 }) => {
   const connections = useConnections()
-  const { setCurrentScreen } = useCurrentScreen()
+  const { navigate } = useViewManager()
   const { selectedFundMethod } = useSelectedFundMethod()
   const displayChainId = token?.chainId || chainId
 
@@ -61,7 +61,7 @@ export const TokenSelectorButton: React.FC<TokenSelectorButtonProps> = ({
 
     // If no wallet connected and fund method is "wallet", redirect to connect screen
     if (!isConnected && selectedFundMethod === "wallet") {
-      setCurrentScreen("connect")
+      navigate("connect")
       return
     }
 

package/src/widget/components/TrailsHookModal.tsx

@@ -82,7 +82,7 @@ export function TrailsHookModal() {
     return createWagmiConfig({
       apiKey,
       nodeGatewayUrl: trailsContext?.sequenceNodeGatewayUrl,
-      connectors: getConnectorsInternal(apiKey),
+      connectors: getConnectorsInternal(apiKey, trailsContext?.trailsApiUrl),
       storage: createStorage({
         storage: localStorage,
         key: "trails-hook-modal-wagmi",

package/src/widget/components/TransactionDetails.tsx

@@ -1,5 +1,8 @@
 import type React from "react"
-import type { IntentTransaction } from "../../transactions.js"
+import {
+  type IntentTransaction,
+  isDisplayableTransactionHash,
+} from "../../transactions.js"
 import { TokenImage } from "./TokenImage.js"
 import { ChainImage } from "./ChainImage.js"
 import { getExplorerUrlForAddress, getExplorerUrl } from "../../explorer.js"
@@ -57,39 +60,40 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
       )}
 
       {/* Deposit Transaction Hash */}
-      {transaction.depositTransactionHash && transaction.originChainId && (
-        <div className="flex justify-between items-center">
-          <span className="text-xs text-gray-600 dark:text-gray-400">
-            Deposit Tx:
-          </span>
-          <a
-            href={getExplorerUrl({
-              txHash: transaction.depositTransactionHash,
-              chainId: transaction.originChainId,
-            })}
-            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.originChainId} size={16} />
-            {truncateAddress(transaction.depositTransactionHash)}
-            <svg
-              aria-hidden="true"
-              className="w-3 h-3"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
+      {isDisplayableTransactionHash(transaction.depositTransactionHash) &&
+        transaction.originChainId && (
+          <div className="flex justify-between items-center">
+            <span className="text-xs text-gray-600 dark:text-gray-400">
+              Deposit Tx:
+            </span>
+            <a
+              href={getExplorerUrl({
+                txHash: transaction.depositTransactionHash,
+                chainId: transaction.originChainId,
+              })}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs font-mono hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
             >
-              <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>
-      )}
+              <ChainImage chainId={transaction.originChainId} size={16} />
+              {truncateAddress(transaction.depositTransactionHash)}
+              <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 && (
@@ -159,7 +163,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
       )}
 
       {/* Origin Intent Deposit Tx Hash */}
-      {transaction.originIntentDepositTxHash &&
+      {isDisplayableTransactionHash(transaction.originIntentDepositTxHash) &&
         transaction.originIntentDepositTxExplorerUrl &&
         transaction.originChainId && (
           <div className="flex justify-between items-center">
@@ -193,7 +197,9 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
         )}
 
       {/* Destination Intent Deposit Tx Hash */}
-      {transaction.destinationIntentDepositTxHash &&
+      {isDisplayableTransactionHash(
+        transaction.destinationIntentDepositTxHash,
+      ) &&
         transaction.destinationIntentDepositTxExplorerUrl &&
         transaction.destinationChainId && (
           <div className="flex justify-between items-center">
@@ -267,7 +273,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
       )}
 
       {/* Origin Intent Action Tx Hash */}
-      {transaction.originIntentTxHash &&
+      {isDisplayableTransactionHash(transaction.originIntentTxHash) &&
         transaction.originIntentTxExplorerUrl &&
         transaction.originChainId && (
           <div className="flex justify-between items-center">
@@ -445,7 +451,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
         )}
 
       {/* Destination Intent Action Tx Hash */}
-      {transaction.destinationIntentTxHash &&
+      {isDisplayableTransactionHash(transaction.destinationIntentTxHash) &&
         transaction.destinationIntentTxExplorerUrl &&
         transaction.destinationChainId && (
           <div className="flex justify-between items-center">

package/src/widget/components/TransactionHistoryItem.tsx

@@ -148,8 +148,6 @@ const TransactionHistoryItem: React.FC<{
   const [commitError, setCommitError] = useState<string | null>(null)
   const [isExecuting, setIsExecuting] = useState(false)
   const [executeError, setExecuteError] = useState<string | null>(null)
-  const [manualDepositTxHash, setManualDepositTxHash] = useState<string>("")
-  const [showDepositHashInput, setShowDepositHashInput] = useState(false)
 
   // Execute intent mutation
   const executeIntentMutation = useExecuteIntent()
@@ -251,8 +249,7 @@ const TransactionHistoryItem: React.FC<{
       setIsExecuting(true)
       setExecuteError(null)
 
-      // For committed intents, we need to provide a depositTransactionHash
-      // First try the provided hash, then try to use any available transaction hash from the history
+      // Deposit tx hash is optional. If available, include it for backend correlation.
       const depositTxHash =
         providedDepositTxHash ||
         transaction.originTransactionHash ||
@@ -261,19 +258,8 @@ const TransactionHistoryItem: React.FC<{
         transaction.txnHash ||
         getQueryParam("depositTransactionHash")
 
-      if (!depositTxHash) {
-        // Show the input field for manual entry
-        setShowDepositHashInput(true)
-        setExecuteError(
-          "No deposit transaction hash found. Please enter the deposit transaction hash manually.",
-        )
-        setIsExecuting(false)
-        return
-      }
-
       await executeIntentMutation.mutateAsync({
         intentId: transaction.intentId,
-        depositTransactionHash: depositTxHash,
       })
 
       logger.console.log(
@@ -284,10 +270,6 @@ const TransactionHistoryItem: React.FC<{
         },
       )
 
-      // Reset manual input fields on success
-      setManualDepositTxHash("")
-      setShowDepositHashInput(false)
-
       // Call success callback to refresh the list
       if (onCommitSuccess) {
         onCommitSuccess()
@@ -590,29 +572,6 @@ const TransactionHistoryItem: React.FC<{
       {executeError && (
         <div className="w-full">
           <ErrorDisplay error={executeError} severity="error" />
-          {showDepositHashInput && (
-            <div className="mt-2 flex gap-1.5">
-              <input
-                type="text"
-                value={manualDepositTxHash}
-                onChange={(e) => setManualDepositTxHash(e.target.value)}
-                placeholder="Enter deposit tx hash (0x...)"
-                className="flex-1 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent"
-              />
-              <button
-                type="button"
-                onClick={() => {
-                  if (manualDepositTxHash.trim()) {
-                    handleExecute(manualDepositTxHash.trim())
-                  }
-                }}
-                disabled={!manualDepositTxHash.trim() || isExecuting}
-                className="px-2 py-1 text-xs bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white rounded transition-colors disabled:cursor-not-allowed whitespace-nowrap"
-              >
-                {isExecuting ? "Executing..." : "Execute"}
-              </button>
-            </div>
-          )}
         </div>
       )}
       {recoverError && (

package/src/widget/components/TransferPendingVertical.tsx

@@ -6,7 +6,7 @@ import type { PrepareSendQuote } from "../../prepareSend.js"
 import type { TransactionState } from "../../transactions.js"
 import { formatDuration, MINUTE_MS } from "../../utils/time.js"
 import { hasMetaTxError } from "../../utils/passthrough.js"
-import { useMode } from "../hooks/useMode.js"
+import { useViewManager } from "../hooks/useViewManager.js"
 import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
 import {
   hasAnyFailedOrAbortedTransactions,
@@ -28,6 +28,8 @@ const isOFTRoute = (routeProviders?: { id: string }[]): boolean => {
 // Timeout constants
 const OFT_TIMEOUT_MS = 60 * MINUTE_MS // 1 hour for OFT routes
 const DEFAULT_TIMEOUT_MS = MINUTE_MS // 1 minute for normal routes
+const MAINNET_TIMEOUT_MS = 2 * MINUTE_MS // 2 minutes for Ethereum mainnet routes
+const ETHEREUM_MAINNET_CHAIN_ID = 1
 
 // Checkmark icon for completed steps
 const CheckmarkIcon = () => (
@@ -116,7 +118,7 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
   timestamp,
   onContinue,
 }) => {
-  const { mode } = useMode()
+  const { mode } = useViewManager()
   const [showContent, setShowContent] = useState(false)
   const [activePendingIndex, setActivePendingIndex] = useState(-1)
   const [showDots, setShowDots] = useState(false)
@@ -127,20 +129,25 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
     null,
   )
   const isOFT = isOFTRoute(quote?.routeProviders)
+  const isMainnetOrigin = quote?.originChain?.id === ETHEREUM_MAINNET_CHAIN_ID
 
   const showContinueButton =
     hasAnyFailedOrAbortedTransactions(transactionStates) && onContinue
 
   // Timeout warning: OFT routes can take significantly longer than standard routes.
   useEffect(() => {
-    const timeoutMs = isOFT ? OFT_TIMEOUT_MS : DEFAULT_TIMEOUT_MS
+    const timeoutMs = isOFT
+      ? OFT_TIMEOUT_MS
+      : isMainnetOrigin
+        ? MAINNET_TIMEOUT_MS
+        : DEFAULT_TIMEOUT_MS
 
     const timeoutTimer = setTimeout(() => {
       setShowTimeoutWarning(true)
     }, timeoutMs)
 
     return () => clearTimeout(timeoutTimer)
-  }, [isOFT])
+  }, [isOFT, isMainnetOrigin])
   useEffect(() => {
     const depositConfirmed = transactionStates?.[0]?.state === "confirmed"
 

package/src/widget/components/TruncatedTransactionHash.tsx

@@ -1,6 +1,7 @@
 import type React from "react"
 import { useState } from "react"
 import { getExplorerUrl } from "../../explorer.js"
+import { isDisplayableTransactionHash } from "../../transactions.js"
 
 interface TruncatedTransactionHashProps {
   txHash: string
@@ -23,6 +24,10 @@ export const TruncatedTransactionHash: React.FC<
 }) => {
   const [isHovered, setIsHovered] = useState(false)
 
+  if (!isDisplayableTransactionHash(txHash)) {
+    return null
+  }
+
   const truncatedHash = `${txHash.slice(0, sliceStart)}…${txHash.slice(-sliceEnd)}`
   const explorerUrl = getExplorerUrl({ txHash, chainId })
 

package/src/widget/components/WalletConfirmation.tsx

@@ -10,7 +10,6 @@ import { ErrorAnimationIcon } from "./ErrorAnimationIcon.js"
 import { QuoteDetails } from "./QuoteDetails.js"
 import { TokenImage } from "./TokenImage.js"
 import { WaasFeeOptions } from "./WaasFeeOptions.js"
-import { removeStoredIntent } from "../../intentStorage.js"
 
 interface WalletConfirmationProps {
   onBack?: () => void
@@ -69,17 +68,15 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
     return isSequenceWaas
   }, [connector])
 
+  const hasOriginTokenVisual =
+    !!quote?.originToken?.symbol || !!quote?.originToken?.imageUrl
+
   return (
     <div className="space-y-6">
       <div className="flex items-center relative">
         <button
           type="button"
-          onClick={() => {
-            if (quote?.intentId) {
-              removeStoredIntent(quote.intentId)
-            }
-            onBack?.()
-          }}
+          onClick={onBack}
           className="absolute left-0 top-0 p-2 rounded-full transition-colors cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 hover:trails-hover-bg text-gray-600 dark:text-gray-400"
         >
           <ChevronLeft className="h-6 w-6" />
@@ -99,7 +96,7 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
               <div className="animate-spin rounded-full h-24 w-24 border-solid border-b-2 border-blue-500 dark:border-blue-400" />
             )}
 
-            {!feeOptionsError && (
+            {!feeOptionsError && hasOriginTokenVisual && (
               <div className="absolute">
                 <TokenImage
                   imageUrl={quote?.originToken.imageUrl}

package/src/widget/components/WalletConnect.tsx

@@ -1,6 +1,7 @@
 import { type FC, useEffect, useMemo, useState } from "react"
 import { useAccount, useConnect, useDisconnect } from "wagmi"
 import { logger } from "../../logger.js"
+import { isWalletConnectConnector as checkIsWalletConnectConnector } from "../../walletUtils.js"
 import {
   getWalletIcon,
   getWalletName,
@@ -49,7 +50,7 @@ export const WalletConnectScreen: FC<WalletConnectProps> = ({
   )
 
   const isWalletConnectConnector =
-    connector?.name === "WalletConnect" && isConnected
+    checkIsWalletConnectConnector(connector) && isConnected
 
   // Track if we've already processed the initial disconnect
   const [hasDisconnected, setHasDisconnected] = useState(false)
@@ -60,7 +61,10 @@ export const WalletConnectScreen: FC<WalletConnectProps> = ({
   useEffect(() => {
     const resetWalletConnect = async () => {
       // Check if we're connected via WalletConnect
-      if (isWalletConnectConnector || connector?.id === "walletConnect") {
+      if (
+        isWalletConnectConnector ||
+        checkIsWalletConnectConnector(connector)
+      ) {
         setIsResetting(true)
         logger.console.log(
           "[trails-sdk] [WalletConnect] Resetting WalletConnect connection to show fresh QR code",