0xtrails 0.13.0 → 0.13.2

package/src/widget/components/AccountIntentTransactionHistory.tsx

@@ -1,7 +1,11 @@
 import { ChevronDown } from "lucide-react"
 import type React from "react"
 import { useEffect, useMemo, useRef, useState } from "react"
+import { createWalletClient, custom, type EIP1193Provider } from "viem"
 import { useAccount, useConnections } from "wagmi"
+import type { Connector } from "wagmi"
+import type { WalletClient } from "viem"
+import { getChainInfo } from "../../chains.js"
 import { logger } from "../../logger.js"
 import { useMeldServiceProviders } from "../../query/meld.hooks.js"
 import { useCommitIntent } from "../../mutations.js"
@@ -9,10 +13,13 @@ import type { FlatTokenBalancesData } from "../../query/balance.fetchers.js"
 import { formatRawAmount } from "../../utils/format.js"
 import type { Token } from "../../tokens.js"
 import { isNativeToken, truncateAddress } from "../../utils/address.js"
+import { useCombinedHistory } from "../hooks/useCombinedHistory.js"
 import {
-  useCombinedHistory,
+  getHistoryEmptyMessage,
+  getIntentStatuses,
+  HISTORY_FILTER_OPTIONS,
   type HistoryFilterType,
-} from "../hooks/useCombinedHistory.js"
+} from "../utils/historyFilters.js"
 import Identicon from "./Identicon.js"
 import { OnrampHistoryRow } from "./OnrampHistoryRow.js"
 import { ScreenHeader } from "./ScreenHeader.js"
@@ -32,11 +39,12 @@ interface HistoryHeaderProps {
   onRefresh: () => void
   loading: boolean
   effectiveAccountAddress: string | undefined
-  onWalletSelect: (address: string) => void
+  onWalletSelect: (wallet: { address: string; connector: Connector }) => void
   searchInput: string
   setSearchInput: (value: string) => void
   statusFilter: HistoryFilterType
   setStatusFilter: (filter: HistoryFilterType) => void
+  resetIntentPagination: () => void
 }
 
 const HistoryHeader: React.FC<HistoryHeaderProps> = ({
@@ -49,6 +57,7 @@ const HistoryHeader: React.FC<HistoryHeaderProps> = ({
   setSearchInput,
   statusFilter,
   setStatusFilter,
+  resetIntentPagination,
 }) => {
   // Wallet dropdown state (internal to this component)
   const [isWalletDropdownOpen, setIsWalletDropdownOpen] = useState(false)
@@ -138,7 +147,10 @@ const HistoryHeader: React.FC<HistoryHeaderProps> = ({
                         key={wallet.address}
                         type="button"
                         onClick={() => {
-                          onWalletSelect(wallet.address)
+                          onWalletSelect({
+                            address: wallet.address,
+                            connector: wallet.connector,
+                          })
                           setIsWalletDropdownOpen(false)
                         }}
                         className={`w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer first:rounded-t-xl last:rounded-b-xl ${
@@ -200,94 +212,26 @@ const HistoryHeader: React.FC<HistoryHeaderProps> = ({
       {/* Status Filter Buttons */}
       <div className="py-2">
         <div className="flex items-center gap-2 mt-2 overflow-x-auto scrollbar-hide">
-          <button
-            type="button"
-            onClick={() => setStatusFilter("all")}
-            className={`px-2 py-1.5 rounded-xl transition-colors cursor-pointer text-xs ${
-              statusFilter === "all"
-                ? "bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200"
-                : "trails-bg-secondary text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
-            }`}
-          >
-            <span className="text-xs font-medium">All</span>
-          </button>
-          <button
-            type="button"
-            onClick={() => setStatusFilter("succeeded")}
-            className={`px-2 py-1.5 rounded-xl transition-colors cursor-pointer text-xs ${
-              statusFilter === "succeeded"
-                ? "bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20"
-                : "trails-bg-secondary text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
-            }`}
-          >
-            <span className="text-xs font-medium">Succeeded</span>
-          </button>
-          <button
-            type="button"
-            onClick={() => setStatusFilter("pending")}
-            className={`px-2 py-1.5 rounded-xl transition-colors cursor-pointer text-xs ${
-              statusFilter === "pending"
-                ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
-                : "trails-bg-secondary text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
-            }`}
-          >
-            <span className="text-xs font-medium">Pending</span>
-          </button>
-          <button
-            type="button"
-            onClick={() => setStatusFilter("failed")}
-            className={`px-2 py-1.5 rounded-xl transition-colors cursor-pointer text-xs ${
-              statusFilter === "failed"
-                ? "bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
-                : "trails-bg-secondary text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
-            }`}
-          >
-            <span className="text-xs font-medium">Failed</span>
-          </button>
-          <button
-            type="button"
-            onClick={() => setStatusFilter("aborted")}
-            className={`px-2 py-1.5 rounded-xl transition-colors cursor-pointer text-xs ${
-              statusFilter === "aborted"
-                ? "bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
-                : "trails-bg-secondary text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
-            }`}
-          >
-            <span className="text-xs font-medium">Aborted</span>
-          </button>
-          <button
-            type="button"
-            onClick={() => setStatusFilter("mining")}
-            className={`px-2 py-1.5 rounded-xl transition-colors cursor-pointer text-xs ${
-              statusFilter === "mining"
-                ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
-                : "trails-bg-secondary text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
-            }`}
-          >
-            <span className="text-xs font-medium">Mining</span>
-          </button>
-          <button
-            type="button"
-            onClick={() => setStatusFilter("committed")}
-            className={`px-2 py-1.5 rounded-xl transition-colors cursor-pointer text-xs ${
-              statusFilter === "committed"
-                ? "bg-teal-50 dark:bg-teal-900/20 text-teal-600 dark:text-teal-400 hover:bg-teal-50 dark:hover:bg-teal-900/20"
-                : "trails-bg-secondary text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
-            }`}
-          >
-            <span className="text-xs font-medium">Committed</span>
-          </button>
-          <button
-            type="button"
-            onClick={() => setStatusFilter("onramp")}
-            className={`px-2 py-1.5 rounded-xl transition-colors cursor-pointer text-xs ${
-              statusFilter === "onramp"
-                ? "bg-purple-50 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20"
-                : "trails-bg-secondary text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
-            }`}
-          >
-            <span className="text-xs font-medium">Onramp</span>
-          </button>
+          {HISTORY_FILTER_OPTIONS.map((option) => (
+            <button
+              key={option.key}
+              type="button"
+              title={option.tooltip}
+              onClick={() => {
+                setStatusFilter(option.key)
+                resetIntentPagination()
+              }}
+              className={`px-2 py-1.5 rounded-xl transition-colors cursor-pointer text-xs ${
+                statusFilter === option.key
+                  ? option.activeClass
+                  : "trails-bg-secondary text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
+              }`}
+            >
+              <span className="text-xs font-medium whitespace-nowrap">
+                {option.label}
+              </span>
+            </button>
+          ))}
         </div>
       </div>
     </>
@@ -342,9 +286,13 @@ export const AccountIntentTransactionHistory: React.FC<
   const [recentlyCommittedIntent, setRecentlyCommittedIntent] = useState<
     string | null
   >(null)
-  const [selectedWalletAddress, setSelectedWalletAddress] = useState<
-    string | null
-  >(null)
+  const [selectedWallet, setSelectedWallet] = useState<{
+    address: string
+    connector: Connector
+  } | null>(null)
+  const [selectedWalletClient, setSelectedWalletClient] =
+    useState<WalletClient | null>(null)
+  const connections = useConnections()
   const scrollContainerRef = useRef<HTMLDivElement>(null)
 
   // Hook for committing intent
@@ -364,7 +312,85 @@ export const AccountIntentTransactionHistory: React.FC<
     /^0x[a-fA-F0-9]+$/.test(searchInput) &&
     searchInput.length >= 42
 
-  const effectiveAccountAddress = selectedWalletAddress || accountAddress
+  const effectiveAccountAddress = selectedWallet?.address || accountAddress
+  const intentStatuses = useMemo(
+    () => getIntentStatuses(statusFilter),
+    [statusFilter],
+  )
+
+  useEffect(() => {
+    if (!selectedWallet) {
+      return
+    }
+
+    const isStillConnected = connections.some((connection) =>
+      connection?.accounts?.some(
+        (account) =>
+          account?.toLowerCase() === selectedWallet.address.toLowerCase(),
+      ),
+    )
+
+    if (!isStillConnected) {
+      setSelectedWallet(null)
+      setSelectedWalletClient(null)
+    }
+  }, [connections, selectedWallet])
+
+  useEffect(() => {
+    let cancelled = false
+
+    const loadSelectedWalletClient = async () => {
+      if (!selectedWallet) {
+        setSelectedWalletClient(null)
+        return
+      }
+
+      try {
+        const provider = (await selectedWallet.connector.getProvider()) as
+          | EIP1193Provider
+          | undefined
+        const chainId = await selectedWallet.connector.getChainId()
+        const chain = getChainInfo(chainId)
+
+        if (cancelled) {
+          return
+        }
+
+        if (!provider || !chain) {
+          setSelectedWalletClient(null)
+          return
+        }
+
+        const client = createWalletClient({
+          account: selectedWallet.address as `0x${string}`,
+          chain,
+          transport: custom(provider),
+        })
+
+        if (!cancelled) {
+          setSelectedWalletClient(client)
+        }
+      } catch (error) {
+        if (!cancelled) {
+          logger.console.error(
+            "[AccountIntentTransactionHistory] Failed to create selected wallet client",
+            {
+              address: selectedWallet.address,
+              connectorId: selectedWallet.connector.id,
+              error,
+            },
+          )
+          setSelectedWalletClient(null)
+        }
+      }
+    }
+
+    void loadSelectedWalletClient()
+
+    return () => {
+      cancelled = true
+    }
+  }, [selectedWallet])
 
   logger.console.log(
     "[AccountIntentTransactionHistory] Using account address:",
@@ -383,11 +409,13 @@ export const AccountIntentTransactionHistory: React.FC<
     hasPrevIntent: hasPrev,
     currentIntentPage: page,
     refetchIntent,
+    resetIntentPagination,
     getFilteredAndSearchedItems,
   } = useCombinedHistory({
     accountAddress: effectiveAccountAddress,
     intentPageSize: ITEMS_PER_PAGE,
     enabled: !!effectiveAccountAddress,
+    intentStatuses,
   })
 
   const hasMore = hasMoreData.intent
@@ -485,11 +513,12 @@ export const AccountIntentTransactionHistory: React.FC<
         onRefresh={refetch}
         loading={loading}
         effectiveAccountAddress={effectiveAccountAddress}
-        onWalletSelect={setSelectedWalletAddress}
+        onWalletSelect={setSelectedWallet}
         searchInput={searchInput}
         setSearchInput={setSearchInput}
         statusFilter={statusFilter}
         setStatusFilter={setStatusFilter}
+        resetIntentPagination={resetIntentPagination}
       />
 
       <PartialErrorBanner errors={errors} refetch={refetch} />
@@ -570,11 +599,14 @@ export const AccountIntentTransactionHistory: React.FC<
                 </svg>
               </div>
               <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
-                No Intent Transactions
+                {statusFilter === "quoted"
+                  ? "No Quoted Transactions"
+                  : "No Intent Transactions"}
               </h3>
               <p className="text-gray-600 dark:text-gray-400">
-                No intent transactions found for this account. Create your first
-                intent transaction to see it here.
+                {statusFilter === "quoted"
+                  ? "No quoted transactions found for this account."
+                  : "No intent transactions found for this account. Create your first intent transaction to see it here."}
               </p>
             </div>
           </div>
@@ -607,15 +639,7 @@ export const AccountIntentTransactionHistory: React.FC<
                     : `No ${statusFilter} transactions match "${searchInput}".`
                   : searchInput
                     ? `No transactions match your search "${searchInput}".`
-                    : statusFilter === "onramp"
-                      ? "No onramp transactions found. Buy crypto to see them here."
-                      : statusFilter === "pending"
-                        ? "No pending transactions."
-                        : statusFilter === "succeeded"
-                          ? "No completed transactions yet."
-                          : statusFilter === "failed"
-                            ? "No failed transactions."
-                            : "No transactions found."}
+                    : getHistoryEmptyMessage(statusFilter)}
               </p>
             </div>
           </div>
@@ -634,6 +658,7 @@ export const AccountIntentTransactionHistory: React.FC<
                     onRefetch={refetch}
                     commitIntentMutation={commitIntentMutation}
                     balancesByIntentAddress={balancesByIntentAddress}
+                    selectedWalletClient={selectedWalletClient}
                     onRefetchBalances={refetchIntent}
                     onCommitSuccess={() => {
                       // Track this intent as recently committed to keep it visible

package/src/widget/components/ClassicSwap.tsx

@@ -6,8 +6,9 @@ import { isValidNumber } from "../../utils/validation.js"
 import { openPopup, setPopupUrl, closePopup } from "../utils/windowUtils.js"
 import type { BaseProps, OnrampConfirmCallback } from "../types/commonProps.js"
 import type { Token } from "../../tokens.js"
-import { useSendForm } from "../hooks/useSendForm.js"
+import { useSendForm, type OnCompleteProps } from "../hooks/useSendForm.js"
 import { QuoteDetails } from "./QuoteDetails.js"
+import { HighPriceImpactBlock } from "./HighPriceImpactBlock.js"
 import { TradeType } from "../../prepareSend.js"
 import { getChainInfo } from "../../chains.js"
 import { ScreenHeader } from "./ScreenHeader.js"
@@ -46,7 +47,7 @@ import {
   formatUsdAmountDisplay,
   formatUsdAmountLocaleDisplay,
 } from "../../utils/format.js"
-import { useTokenWithFreshBalance } from "../hooks/useTokenWithFreshBalance.js"
+import { useAccountTokenBalanceOnchain } from "../../query/balance.hooks.js"
 import { base } from "viem/chains"
 import { MeldProvidersList } from "../../meld/components/MeldProvidersList.js"
 import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
@@ -269,6 +270,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     setSellAmount,
     buyAmount,
     setBuyAmount,
+    resetSwapState,
     enterFormMode,
   } = useSwapState()
 
@@ -282,6 +284,15 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   const [isCreatingWidgetSession, setIsCreatingWidgetSession] = useState(false)
   const [widgetError, setWidgetError] = useState<string | null>(null)
 
+  const handleCompleteAndClearAmounts = useCallback(
+    (result: OnCompleteProps) => {
+      setSellFiatAmount("")
+      resetSwapState()
+      onComplete(result)
+    },
+    [onComplete, resetSwapState, setSellFiatAmount],
+  )
+
   // Initialize and update selected recipient from toRecipient prop (but don't auto-set to account address)
   // biome-ignore lint/correctness/useExhaustiveDependencies: selectedRecipient is intentionally excluded to avoid infinite loops
   useEffect(() => {
@@ -306,6 +317,10 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     selectedRecipient || toRecipient || account?.address
 
   const effectiveFundMethod = isMeldOnRampActive ? "onramp-meld" : fundMethod
+  const skipBalanceFetch =
+    effectiveFundMethod === "onramp-meld" ||
+    effectiveFundMethod === "direct-transfer" ||
+    effectiveFundMethod === "onramp-mesh"
 
   // Get onramp quote when onramp is active
   const {
@@ -341,7 +356,6 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     isLoadingQuote,
     selectedDestinationChain,
     selectedDestToken,
-    setAmount,
     setSelectedDestinationChain,
     setSelectedDestToken,
     buttonText,
@@ -349,6 +363,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     destinationTokenAddress,
     isValidCustomToken,
     prepareSendQuote,
+    quoteError,
     processedFeeOptions,
     selectedFeeOption,
     setSelectedFeeOption,
@@ -369,7 +384,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     paymasterUrls,
     onSend,
     onConfirm,
-    onComplete,
+    onComplete: handleCompleteAndClearAmounts,
     selectedToken: originToken ?? undefined,
     setWalletConfirmRetryHandler,
     tradeType: tradeType,
@@ -429,16 +444,19 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   }, [isMeldOnRampActive, setOriginToken, setTradeType])
 
   // Get destination token with fresh balance
-  const { token: freshDestinationToken } = useTokenWithFreshBalance(
+  const { token: freshDestinationToken } = useAccountTokenBalanceOnchain(
     destinationToken,
     account?.address,
+    { disabled: skipBalanceFetch },
   )
 
   // Get origin token with fresh balance for fee option checks
   const {
     token: freshOriginToken,
     isLoadingBalance: isLoadingFreshOriginBalance,
-  } = useTokenWithFreshBalance(originToken, account?.address)
+  } = useAccountTokenBalanceOnchain(originToken, account?.address, {
+    disabled: skipBalanceFetch,
+  })
 
   const destinationBalanceDisplay = useMemo(() => {
     if (!freshDestinationToken) return "0.00"
@@ -453,15 +471,6 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     }
   }, [freshDestinationToken])
 
-  // Update amount based on last input type
-  useEffect(() => {
-    if (tradeType === TradeType.EXACT_INPUT) {
-      setAmount(sellAmount)
-    } else {
-      setAmount(buyAmount)
-    }
-  }, [sellAmount, buyAmount, tradeType, setAmount])
-
   const handleSellFiatAmountChange = useCallback(
     (value: string) => {
       setWidgetError(null)
@@ -709,15 +718,6 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   const [showDestinationChainList, setShowDestinationChainList] =
     useState(false)
 
-  useEffect(() => {
-    if (selectedDestToken) {
-      const chainInfo = getChainInfo(selectedDestToken.chainId)
-      if (chainInfo) {
-        setSelectedDestinationChain(chainInfo)
-      }
-    }
-  }, [selectedDestToken, setSelectedDestinationChain])
-
   // Sync destination token from hook with useSendForm
   // This ensures the destination token auto-selection flows into useSendForm
   useEffect(() => {
@@ -1616,6 +1616,8 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
           </div>
         )}
 
+        <HighPriceImpactBlock quoteError={quoteError} />
+
         {/* Onramp Provider Selector */}
         {isMeldOnRampActive &&
           !isLoadingOnrampQuote &&

package/src/widget/components/ConnectWallet.tsx

@@ -1,4 +1,5 @@
 import { AlignJustify, ChevronRight, LogOut, Wallet } from "lucide-react"
+import { wagmiConnectorToWalletId } from "@0xtrails/wallet-registry"
 import React, { useEffect, useMemo, useState } from "react"
 import {
   useAccount,
@@ -9,7 +10,7 @@ import {
 } from "wagmi"
 import { logger } from "../../logger.js"
 import { truncateAddress } from "../../utils/address.js"
-import { useWallets, wagmiConnectorToWalletId } from "../../wallets.js"
+import { useWallets } from "../../wallets.js"
 import { useClickTracking } from "../hooks/useClickTracking.js"
 import { useViewManager } from "../hooks/useViewManager.js"
 import { useWidgetProps } from "../hooks/useWidgetProps.js"
@@ -38,6 +39,8 @@ export interface ConnectWalletProps {
   showDisconnect?: boolean
 }
 
+const alwaysShowWallets = ["metamask", "walletconnect"]
+
 export const ConnectWallet: React.FC<ConnectWalletProps> = ({
   onConnect,
   onContinue,
@@ -262,7 +265,6 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
       connector: () => wallet.connector?.connect?.(),
     }))
 
-    const alwaysShowWallets = ["metamask", "walletconnect"]
     const filteredWallets = walletOptionsFromAllWallets
       .filter((wallet) => alwaysShowWallets.includes(wallet.id))
       .sort((a, b) => {

package/src/widget/components/ConnectedWallets.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react"
 import type React from "react"
 import { Wallet, X, ChevronRight } from "lucide-react"
+import { wagmiConnectorToWalletId } from "@0xtrails/wallet-registry"
 import { CopyButton } from "./CopyButton.js"
 import {
   useAccount,
@@ -8,11 +9,7 @@ import {
   useSwitchAccount,
   useDisconnect,
 } from "wagmi"
-import {
-  isEmbeddedConnector,
-  useWallets,
-  wagmiConnectorToWalletId,
-} from "../../wallets.js"
+import { isEmbeddedConnector, useWallets } from "../../wallets.js"
 import { logger } from "../../logger.js"
 import { useAccountTotalBalanceUsd } from "../../query/balance.hooks.js"
 import {

package/src/widget/components/DirectTransfer.tsx

@@ -1,4 +1,8 @@
 import { ChevronDown, ExternalLink } from "lucide-react"
+import {
+  getQRCodeWallets,
+  type QRCodeWalletOption,
+} from "@0xtrails/wallet-registry"
 import type React from "react"
 import { useCallback, useRef, useState } from "react"
 import { formatUnits, getAddress } from "viem"
@@ -6,7 +10,6 @@ import { getExplorerUrlForAddress } from "../../explorer.js"
 import { logger } from "../../logger.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import { isNativeToken, truncateAddress } from "../../utils/address.js"
-import { useQRCodeWallets, type QRCodeWalletOption } from "../../wallets.js"
 import { CopyButton } from "./CopyButton.js"
 import { DepositTracker } from "./DepositTracker.js"
 import { QrCode } from "./QrCode.js"
@@ -33,7 +36,7 @@ export const DirectTransfer: React.FC<DirectTransferProps> = ({
   walletOptions,
   onIntentExecuted,
 }) => {
-  const defaultQrCodeWallets = useQRCodeWallets()
+  const defaultQrCodeWallets = getQRCodeWallets()
   const defaultWalletOptions = walletOptions || defaultQrCodeWallets
   const hasTriggeredExecuteRef = useRef(false)
   const [isAmountCopied, setIsAmountCopied] = useState(false)

package/src/widget/components/EarnPools.tsx

@@ -5,8 +5,7 @@ import { useAccount } from "wagmi"
 import { getChainInfo } from "../../chains.js"
 import { logger } from "../../logger.js"
 import { usePools, type Pool } from "../../pools.js"
-import { formatTvl } from "../../prices.js"
-import { formatUsdAmountLocaleDisplay } from "../../utils/format.js"
+import { formatTvl, formatUsdAmountLocaleDisplay } from "../../utils/format.js"
 import {
   useTokenBalances,
   WIDGET_REFRESH_INTERVAL,

package/src/widget/components/ExecutionStatusBadge.tsx

@@ -1,4 +1,9 @@
+import { formatRawStatusLabel } from "../utils/statusLabel.js"
+import { getHistoryStatusDescription } from "../utils/historyFilters.js"
+
 const ExecutionStatusBadge: React.FC<{ status?: string }> = ({ status }) => {
+  const description = getHistoryStatusDescription(status)
+
   const getStatusColor = (status?: string) => {
     const upperStatus = status?.toUpperCase()
     switch (upperStatus) {
@@ -35,11 +40,12 @@ const ExecutionStatusBadge: React.FC<{ status?: string }> = ({ status }) => {
 
   return (
     <span
-      className={`inline-flex items-center px-2.5 py-0.5 rounded text-xs font-medium ${getStatusColor(
-        status,
-      )}`}
+      title={description}
+      className={`inline-flex items-center px-2.5 py-0.5 rounded text-xs font-medium ${
+        description ? "cursor-help" : ""
+      } ${getStatusColor(status)}`}
     >
-      {status?.toLowerCase() || "unknown"}
+      {formatRawStatusLabel(status)}
     </span>
   )
 }