0xtrails 0.13.1 → 0.13.2

package/src/widget/components/PoolDeposit.tsx

@@ -25,9 +25,9 @@ import { useViewManager } from "../hooks/useViewManager.js"
 import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
 import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
 import type { OnCompleteProps } from "../hooks/useSendForm.js"
+import { useDefaultOriginToken } from "../hooks/useDefaultOriginToken.js"
 import { useSendForm } from "../hooks/useSendForm.js"
-import { useTokenList } from "../hooks/useTokenList.js"
-import { useTokenWithFreshBalance } from "../hooks/useTokenWithFreshBalance.js"
+import { useAccountTokenBalanceOnchain } from "../../query/balance.hooks.js"
 import { ChainList } from "./ChainList.js"
 import { DynamicSizeInputField } from "./DynamicSizeInputField.js"
 import { EarnPools } from "./EarnPools.js"
@@ -96,24 +96,19 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
   const {
     token: freshOriginToken,
     isLoadingBalance: isLoadingFreshOriginBalance,
-  } = useTokenWithFreshBalance(originToken, account?.address)
+  } = useAccountTokenBalanceOnchain(originToken, account?.address)
 
   const { selectedPool, setSelectedPool } = useEarnPool()
 
+  const { defaultOriginToken, isLoading: isLoadingOriginDefaults } =
+    useDefaultOriginToken()
+
   const [showEarnPools, setShowEarnPools] = useState(false)
   const [showOriginTokenSelector, setShowOriginTokenSelector] = useState(false)
   const [showOriginChainList, setShowOriginChainList] = useState(false)
   const [amount, setAmount] = useState("")
   const inputRef = useRef<HTMLInputElement>(null)
 
-  // Get sorted tokens to auto-select the highest USD value token
-  const { filteredTokensFormatted, isLoadingTokens } = useTokenList({
-    onContinue: () => {}, // Not used for auto-selection
-    onError: () => {}, // Not used for auto-selection
-    fundMethod: undefined,
-    allSupportedTokens: false,
-  })
-
   // Memoized generated calldata
   const generatedDepositCalldata = useMemo(() => {
     if (!selectedPool || !amount || !walletClient || Number(amount) <= 0) {
@@ -232,19 +227,15 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
     chainId: originToken?.chainId,
   })
 
-  // Auto-select the highest USD value token as origin token
   useEffect(() => {
-    if (
-      !originToken &&
-      !isLoadingTokens &&
-      filteredTokensFormatted?.length > 0
-    ) {
-      const highestValueToken = filteredTokensFormatted[0] // First token is highest USD value
-      if (highestValueToken && Number(highestValueToken.balanceUsd) > 0) {
-        setOriginToken(highestValueToken)
-      }
+    if (!originToken && !isLoadingOriginDefaults && defaultOriginToken) {
+      logger.console.log(
+        "[trails-sdk] Auto-selecting origin token:",
+        defaultOriginToken,
+      )
+      setOriginToken(defaultOriginToken as any)
     }
-  }, [originToken, isLoadingTokens, filteredTokensFormatted, setOriginToken])
+  }, [originToken, isLoadingOriginDefaults, defaultOriginToken, setOriginToken])
 
   // Auto-focus input field on component mount
   useEffect(() => {

package/src/widget/components/QRCodeWalletSelect.tsx

@@ -1,5 +1,8 @@
+import {
+  getQRCodeWallets,
+  type QRCodeWalletOption,
+} from "@0xtrails/wallet-registry"
 import type React from "react"
-import { useQRCodeWallets, type QRCodeWalletOption } from "../../wallets.js"
 import { ScreenHeader } from "./ScreenHeader.js"
 
 interface QRCodeWalletSelectProps {
@@ -19,7 +22,7 @@ export const QRCodeWalletSelect: React.FC<QRCodeWalletSelectProps> = ({
   title = "Which wallet will scan the QR code?",
   disabled = false,
 }) => {
-  const defaultQrCodeWallets = useQRCodeWallets()
+  const defaultQrCodeWallets = getQRCodeWallets()
   const defaultWalletOptions = walletOptions || defaultQrCodeWallets
   return (
     <div className="space-y-6">

package/src/widget/components/QuoteDetails.tsx

@@ -166,6 +166,13 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
     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 (
@@ -994,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 ${
@@ -1135,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>
@@ -1188,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/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/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">

package/src/widget/components/TransferPendingVertical.tsx

@@ -1,6 +1,7 @@
 import { ChevronRight, ExternalLink } from "lucide-react"
 import type React from "react"
-import { useEffect, useMemo, useState } from "react"
+import { useEffect, useState } from "react"
+import { mainnet } from "viem/chains"
 import { TRAILS_SUPPORT_URL } from "../../constants.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import type { TransactionState } from "../../transactions.js"
@@ -29,7 +30,7 @@ const isOFTRoute = (routeProviders?: { id: string }[]): boolean => {
 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
+const MESH_ONRAMP_TIMEOUT_MS = 3 * MINUTE_MS // 3 minutes for Mesh onramp
 
 // Checkmark icon for completed steps
 const CheckmarkIcon = () => (
@@ -108,6 +109,7 @@ interface TransferPendingProps {
   timestamp?: number
   onContinue?: () => void
   onRampQuote?: OnrampQuote | null
+  fundMethod?: string | null
 }
 
 export const TransferPending: React.FC<TransferPendingProps> = ({
@@ -117,6 +119,7 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
   onRampQuote,
   timestamp,
   onContinue,
+  fundMethod,
 }) => {
   const { mode } = useViewManager()
   const [showContent, setShowContent] = useState(false)
@@ -128,25 +131,28 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
     null,
   )
   const isOFT = isOFTRoute(quote?.routeProviders)
-  const isMainnetOrigin = quote?.originChain?.id === ETHEREUM_MAINNET_CHAIN_ID
+  const isMainnetOrigin = quote?.originChain?.id === mainnet.id
 
   const showContinueButton =
     hasAnyFailedOrAbortedTransactions(transactionStates) && onContinue
 
   // Timeout warning: OFT routes can take significantly longer than standard routes.
   useEffect(() => {
-    const timeoutMs = isOFT
-      ? OFT_TIMEOUT_MS
-      : isMainnetOrigin
-        ? MAINNET_TIMEOUT_MS
-        : DEFAULT_TIMEOUT_MS
+    const timeoutMs =
+      fundMethod === "onramp-mesh"
+        ? MESH_ONRAMP_TIMEOUT_MS
+        : isOFT
+          ? OFT_TIMEOUT_MS
+          : isMainnetOrigin
+            ? MAINNET_TIMEOUT_MS
+            : DEFAULT_TIMEOUT_MS
 
     const timeoutTimer = setTimeout(() => {
       setShowTimeoutWarning(true)
     }, timeoutMs)
 
     return () => clearTimeout(timeoutTimer)
-  }, [isOFT, isMainnetOrigin])
+  }, [fundMethod, isMainnetOrigin, isOFT])
   useEffect(() => {
     const depositConfirmed = transactionStates?.[0]?.state === "confirmed"
 
@@ -181,16 +187,18 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
     }
   }, [])
 
-  const activePendingIndex = useMemo(
-    () => transactionStates.findIndex((tx) => tx.state === "pending"),
-    [transactionStates],
-  )
-  const [prevActivePendingIndex, setPrevActivePendingIndex] =
-    useState(activePendingIndex)
-  if (activePendingIndex !== prevActivePendingIndex) {
-    setPrevActivePendingIndex(activePendingIndex)
-    setActivePendingTimer(0)
-  }
+  const [activePendingIndex, setActivePendingIndex] = useState(-1)
+
+  useEffect(() => {
+    const newActiveIndex = transactionStates.findIndex(
+      (tx) => tx.state === "pending",
+    )
+
+    if (newActiveIndex !== activePendingIndex) {
+      setActivePendingIndex(newActiveIndex)
+      setActivePendingTimer(0)
+    }
+  }, [transactionStates, activePendingIndex])
 
   // Add CSS animation for draw effect
   useEffect(() => {

package/src/widget/components/WalletConnect.tsx

@@ -1,12 +1,9 @@
+import { getWalletIcon, getWalletName } from "@0xtrails/wallet-registry"
 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,
-  useWalletConfigs,
-} from "../../wallets.js"
+import { useWalletConfigs } from "../../wallets.js"
 import { useConnector } from "../hooks/useConnector.js"
 import { useIsMobile } from "../hooks/useIsMobile.js"
 import { useWalletConnectUri } from "../hooks/useWalletConnectUri.js"