0xtrails 0.7.0 → 0.8.0

package/src/widget/components/AccountIntentTransactionHistory.tsx

@@ -10,10 +10,13 @@ import { formatRelativeDate } from "../../time.js"
 import { SearchInputField } from "./SearchInputField.js"
 import { Identicon } from "./Identicon.js"
 import { truncateAddress } from "../../utils.js"
-import { useConnections, useAccount } from "wagmi"
+import { useConnections, useAccount, useWalletClient } from "wagmi"
 import { ChevronDown } from "lucide-react"
 import { getExplorerUrl } from "../../explorer.js"
+import { ErrorDisplay } from "./ErrorDisplay.js"
+import { attemptSwitchChain } from "../../chainSwitch.js"
 import { logger } from "../../logger.js"
+import { useTrailsRefund } from "../../refund.js"
 
 interface AccountIntentTransactionHistoryProps {
   accountAddress?: string
@@ -35,6 +38,8 @@ const ExecutionStatusBadge: React.FC<{ status?: string }> = ({ status }) => {
         return "bg-yellow-100 text-gray-800 dark:bg-yellow-900 dark:text-gray-200"
       case "refunded":
         return "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200"
+      case "aborted":
+        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
       case "created":
         return "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200"
       default:
@@ -56,10 +61,136 @@ const ExecutionStatusBadge: React.FC<{ status?: string }> = ({ status }) => {
 const TransactionItem: React.FC<{
   transaction: IntentTransaction
   index: number
-}> = ({ transaction, index }) => {
+  onRefetch?: () => void
+}> = ({ transaction, index, onRefetch }) => {
   const [isExpanded, setIsExpanded] = useState(false)
   const containerRef = useRef<HTMLDivElement>(null)
   const dateInfo = formatRelativeDate(transaction.createdAt)
+  const { data: walletClient } = useWalletClient()
+
+  // Track refund transaction hash per intent
+  const [refundTxHash, setRefundTxHash] = useState<`0x${string}` | null>(null)
+
+  // Check if intent is not completed
+  const isCompleted =
+    transaction.executionStatus === "executed" ||
+    transaction.executionStatus === "completed" ||
+    transaction.executionStatus === "succeeded"
+
+  // Hook for refunding intents (recover) - call early to get hasIntentBalance
+  const {
+    signPayload,
+    getRefundTx,
+    isLoadingIntent,
+    isLoadingBalances,
+    intentError,
+    balancesError,
+    hasIntentBalance,
+    refetchIntent,
+  } = useTrailsRefund({
+    intentId:
+      !isCompleted && transaction.intentId && !refundTxHash
+        ? transaction.intentId
+        : "",
+    walletClient: walletClient || undefined,
+  })
+
+  // Create a wrapper for onRefetch that also refetches intent data and balances
+  // This ensures the recover button state is updated when the refresh button is clicked
+  const enhancedOnRefetch = useMemo(() => {
+    if (!onRefetch) return undefined
+    return () => {
+      onRefetch()
+      // Refetch intent data and balances to update recover button state
+      if (!isCompleted && transaction.intentId && !refundTxHash) {
+        refetchIntent()
+      }
+    }
+  }, [
+    onRefetch,
+    isCompleted,
+    transaction.intentId,
+    refundTxHash,
+    refetchIntent,
+  ])
+
+  const canRecover =
+    !isCompleted &&
+    transaction.intentId &&
+    walletClient &&
+    !refundTxHash &&
+    hasIntentBalance
+
+  const [isRecovering, setIsRecovering] = useState(false)
+  const [recoverError, setRecoverError] = useState<string | null>(null)
+
+  const handleRecover = async () => {
+    if (!transaction.intentId || !walletClient) {
+      logger.console.error(
+        "[AccountIntentTransactionHistory] Cannot recover: missing intentId or walletClient",
+      )
+      return
+    }
+
+    try {
+      setIsRecovering(true)
+      setRecoverError(null)
+
+      // Sign the payload
+      const { signature, payload } = await signPayload()
+
+      // Get the refund transaction
+      const refundTx = await getRefundTx({
+        signedHash: signature,
+        payload,
+      })
+
+      // Ensure we're on the correct chain before sending
+      // attemptSwitchChain already checks if we're on the correct chain
+      await attemptSwitchChain({
+        walletClient,
+        desiredChainId: refundTx.chainId,
+      })
+
+      // Send the refund transaction with explicit chain
+      const hash = await walletClient.sendTransaction({
+        to: refundTx.to,
+        data: refundTx.data,
+        chain: refundTx.chain,
+      })
+
+      logger.console.log(
+        "[AccountIntentTransactionHistory] Refund transaction sent",
+        { intentId: transaction.intentId, hash },
+      )
+
+      // Store the transaction hash to show explorer link
+      setRefundTxHash(hash)
+      setRecoverError(null)
+
+      // Refetch history after recovery
+      if (enhancedOnRefetch) {
+        setTimeout(() => {
+          enhancedOnRefetch()
+        }, 2000)
+      }
+    } catch (error) {
+      logger.console.error(
+        "[AccountIntentTransactionHistory] Failed to recover intent",
+        { intentId: transaction.intentId, error },
+      )
+      // Set error message for display
+      const errorMessage =
+        error instanceof Error
+          ? error.message
+          : typeof error === "string"
+            ? error
+            : "Failed to recover intent. Please try again."
+      setRecoverError(errorMessage)
+    } finally {
+      setIsRecovering(false)
+    }
+  }
 
   // Determine the last known intent transaction hash and chain ID
   // Priority: destinationTransactionHash > destinationIntentTxHash > originTransactionHash > originIntentTxHash > txnHash
@@ -119,11 +250,22 @@ const TransactionItem: React.FC<{
     })
   }, [lastKnownTxHash])
 
+  // Get explorer URL for refund transaction if available
+  const refundExplorerUrl = useMemo(() => {
+    if (!refundTxHash || !transaction.originChainId) {
+      return null
+    }
+    return getExplorerUrl({
+      txHash: refundTxHash,
+      chainId: transaction.originChainId,
+    })
+  }, [refundTxHash, transaction.originChainId])
+
   return (
     <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
       {/* Header with status and metadata */}
       <div className="flex items-center justify-between mb-2">
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 flex-wrap">
           <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
             #{index + 1}
           </span>
@@ -209,9 +351,58 @@ const TransactionItem: React.FC<{
         </div>
       </div>
 
-      {/* More Details Button - only visible when collapsed */}
+      {/* Action Buttons - only visible when collapsed */}
       {!isExpanded && (
-        <div className="flex justify-center">
+        <div className="flex flex-col items-center gap-2">
+          {refundTxHash && refundExplorerUrl ? (
+            <a
+              href={refundExplorerUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 px-3 py-1.5 rounded-md font-medium transition-colors border border-solid text-sm bg-white border-gray-200 text-black hover:bg-gray-50 hover:text-gray-900 dark:bg-gray-900 dark:border-gray-700 dark:text-blue-300 dark:hover:bg-gray-800 dark:hover:text-blue-200"
+              aria-label="View refund transaction on explorer"
+            >
+              View on Explorer
+              <svg
+                className="w-4 h-4 ml-1 text-black dark:text-blue-300"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                aria-hidden="true"
+              >
+                <title>External Link</title>
+                <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>
+          ) : canRecover ? (
+            <button
+              type="button"
+              onClick={handleRecover}
+              disabled={
+                isRecovering ||
+                isLoadingIntent ||
+                isLoadingBalances ||
+                !!intentError ||
+                !!balancesError
+              }
+              className="flex items-center justify-center gap-1 py-1 px-3 rounded-md transition-colors cursor-pointer text-xs font-medium text-white bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
+              aria-label="Recover intent"
+            >
+              {isRecovering || isLoadingIntent || isLoadingBalances
+                ? "Recovering..."
+                : "Recover"}
+            </button>
+          ) : null}
+          {recoverError && (
+            <div className="w-full">
+              <ErrorDisplay error={recoverError} severity="error" />
+            </div>
+          )}
           <button
             type="button"
             onClick={() => setIsExpanded(true)}
@@ -731,6 +922,7 @@ export const AccountIntentTransactionHistory: React.FC<
                 key={`${transaction.originIntentAddress}-${transaction.destinationIntentAddress}-${index}`}
                 transaction={transaction}
                 index={page * ITEMS_PER_PAGE + index}
+                onRefetch={refetch}
               />
             ))}
           </div>

package/src/widget/components/ClassicSwap.tsx

@@ -51,7 +51,8 @@ interface ClassicSwapProps {
   onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
   paymasterUrls?: Array<{ chainId: number; url: string }>
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
-  quoteProvider?: string
+  swapProvider?: string
+  bridgeProvider?: string
   fundMethod?: string
   onNavigateToOnramp?: (
     props: {
@@ -90,7 +91,8 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   onWaitingForWalletConfirm,
   paymasterUrls,
   setWalletConfirmRetryHandler,
-  quoteProvider,
+  swapProvider,
+  bridgeProvider,
   fundMethod,
   onNavigateToOnramp,
   onAmountUpdate,
@@ -201,7 +203,8 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     selectedToken: originToken as any,
     setWalletConfirmRetryHandler,
     tradeType: tradeType,
-    quoteProvider,
+    swapProvider,
+    bridgeProvider,
     fundMethod,
     mode,
     onNavigateToOnramp,

package/src/widget/components/Earn.tsx

@@ -24,7 +24,8 @@ interface EarnProps {
   onSend: (amount: string, recipient: string) => void
   paymasterUrls?: Array<{ chainId: number; url: string }>
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
-  quoteProvider?: string
+  swapProvider?: string
+  bridgeProvider?: string
   fundMethod?: string
   onNavigateToOnramp?: (
     props: {
@@ -54,7 +55,8 @@ export const Earn: React.FC<EarnProps> = ({
   onSend,
   paymasterUrls,
   setWalletConfirmRetryHandler,
-  quoteProvider,
+  swapProvider,
+  bridgeProvider,
   fundMethod,
   onNavigateToOnramp,
   checkoutOnHandlers,
@@ -117,7 +119,8 @@ export const Earn: React.FC<EarnProps> = ({
           onSend={onSend}
           paymasterUrls={paymasterUrls}
           setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
-          quoteProvider={quoteProvider}
+          swapProvider={swapProvider}
+          bridgeProvider={bridgeProvider}
           fundMethod={fundMethod}
           onNavigateToOnramp={onNavigateToOnramp}
           checkoutOnHandlers={checkoutOnHandlers}

package/src/widget/components/ErrorDisplay.tsx

@@ -82,8 +82,10 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
 
   const colors = getSeverityColors()
 
-  // Only show if we have a prettified error (either provided or computed)
-  if (!computedErrorPrettified) {
+  // Show error if we have a prettified error or a raw error message
+  // If we can't prettify it, show the raw error
+  const displayError = computedErrorPrettified || error
+  if (!displayError) {
     return null
   }
 
@@ -107,8 +109,8 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
           />
         </svg>
         <div className="flex-1 min-w-0">
-          <p className={`text-sm ${colors.text}`}>{computedErrorPrettified}</p>
-          {error && error !== computedErrorPrettified && (
+          <p className={`text-sm ${colors.text}`}>{displayError}</p>
+          {error && error !== displayError && (
             <div className="mt-2">
               <button
                 type="button"

package/src/widget/components/Fund.tsx

@@ -46,7 +46,8 @@ interface FundProps {
   paymasterUrls?: Array<{ chainId: number; url: string }>
   isSequenceWallet?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
-  quoteProvider?: string
+  swapProvider?: string
+  bridgeProvider?: string
   fundMethod?: string
   onNavigateToOnramp?: (
     props: {
@@ -82,7 +83,8 @@ export const Fund: React.FC<FundProps> = ({
   paymasterUrls,
   isSequenceWallet = false,
   setWalletConfirmRetryHandler,
-  quoteProvider,
+  swapProvider,
+  bridgeProvider,
   fundMethod,
   onNavigateToOnramp,
   checkoutOnHandlers,
@@ -164,7 +166,8 @@ export const Fund: React.FC<FundProps> = ({
     selectedToken: originToken as any,
     setWalletConfirmRetryHandler,
     tradeType: TradeType.EXACT_INPUT,
-    quoteProvider,
+    swapProvider,
+    bridgeProvider,
     fundMethod,
     mode,
     onNavigateToOnramp,

package/src/widget/components/FundSwap.tsx

@@ -25,7 +25,8 @@ interface FundProps {
   onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
   paymasterUrls?: Array<{ chainId: number; url: string }>
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
-  quoteProvider?: string
+  swapProvider?: string
+  bridgeProvider?: string
   fundMethod?: string
   onNavigateToOnramp?: (
     props: {

package/src/widget/components/Pay.tsx

@@ -54,7 +54,8 @@ interface PayProps {
   paymasterUrls?: Array<{ chainId: number; url: string }>
   isSequenceWallet?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
-  quoteProvider?: string
+  swapProvider?: string
+  bridgeProvider?: string
   fundMethod?: string
   onNavigateToOnramp?: (
     props: {
@@ -92,7 +93,8 @@ export const Pay: React.FC<PayProps> = ({
   paymasterUrls,
   isSequenceWallet = false,
   setWalletConfirmRetryHandler,
-  quoteProvider,
+  swapProvider,
+  bridgeProvider,
   fundMethod,
   onNavigateToOnramp,
   checkoutOnHandlers,
@@ -140,6 +142,7 @@ export const Pay: React.FC<PayProps> = ({
     useState(false)
   const [showDestinationChainList, setShowDestinationChainList] =
     useState(false)
+  const [showQuoteDetails, setShowQuoteDetails] = useState(false)
   const inputRef = useRef<HTMLInputElement>(null)
   const paymentRequestInputRef = useRef<HTMLInputElement>(null)
   const lastAutoSelectedRef = useRef<string | null>(null)
@@ -217,7 +220,8 @@ export const Pay: React.FC<PayProps> = ({
     selectedToken: originToken as any,
     setWalletConfirmRetryHandler,
     tradeType: TradeType.EXACT_OUTPUT, // Key difference: using EXACT_OUTPUT
-    quoteProvider,
+    swapProvider,
+    bridgeProvider,
     fundMethod,
     mode,
     onNavigateToOnramp,
@@ -682,16 +686,19 @@ export const Pay: React.FC<PayProps> = ({
                       </>
                     ) : (
                       <>
-                        ≈ {prepareSendQuote?.originAmountUsdDisplay || "$0.00"}
+                        ≈ {prepareSendQuote?.originAmountUsdDisplay || "$0.00"}{" "}
                         {prepareSendQuote?.fees?.totalFeeAmountUsd &&
                         parseFloat(prepareSendQuote.fees.totalFeeAmountUsd) >
                           0 ? (
-                          <span className="text-green-600 dark:text-green-400">
-                            {" "}
+                          <button
+                            type="button"
+                            onClick={() => setShowQuoteDetails(true)}
+                            className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer transition-colors"
+                          >
                             (incl.{" "}
                             {prepareSendQuote.fees.totalFeeAmountUsdDisplay}{" "}
                             fees)
-                          </span>
+                          </button>
                         ) : null}
                       </>
                     )
@@ -993,6 +1000,7 @@ export const Pay: React.FC<PayProps> = ({
             quote={prepareSendQuote}
             showContent={true}
             isRefetching={isLoadingQuote}
+            initialExpanded={showQuoteDetails}
           />
         </div>
       )}

package/src/widget/components/PoolDeposit.tsx

@@ -54,7 +54,8 @@ interface PoolDepositProps {
   onSend: (amount: string, recipient: string) => void
   paymasterUrls?: Array<{ chainId: number; url: string }>
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
-  quoteProvider?: string
+  swapProvider?: string
+  bridgeProvider?: string
   fundMethod?: string
   onNavigateToOnramp?: (
     props: {
@@ -84,7 +85,8 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
   onSend,
   paymasterUrls,
   setWalletConfirmRetryHandler,
-  quoteProvider,
+  swapProvider,
+  bridgeProvider,
   fundMethod,
   onNavigateToOnramp,
   checkoutOnHandlers,
@@ -205,7 +207,8 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
     selectedToken: originToken as any,
     setWalletConfirmRetryHandler,
     tradeType: TradeType.EXACT_INPUT,
-    quoteProvider,
+    swapProvider,
+    bridgeProvider,
     fundMethod,
     mode,
     onNavigateToOnramp,

package/src/widget/components/QuoteDetails.tsx

@@ -26,6 +26,7 @@ interface QuoteDetailsProps {
   swapMode?: boolean
   compact?: boolean
   isRefetching?: boolean
+  initialExpanded?: boolean
 }
 
 export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
@@ -36,10 +37,11 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
   swapMode,
   compact = false,
   isRefetching = false,
+  initialExpanded = false,
 }) => {
   const [showCalldata, setShowCalldata] = useState(false)
   const [showOriginRate, setShowOriginRate] = useState(true)
-  const [isExpanded, setIsExpanded] = useState(false)
+  const [isExpanded, setIsExpanded] = useState(initialExpanded)
   const [intentIdCopied, setIntentIdCopied] = useState(false)
   const containerRef = useRef<HTMLDivElement>(null)
   const calldataRef = useRef<HTMLDivElement>(null)
@@ -57,6 +59,13 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
     }
   }, [showContent])
 
+  // Sync with initialExpanded prop changes
+  useEffect(() => {
+    if (initialExpanded !== undefined) {
+      setIsExpanded(initialExpanded)
+    }
+  }, [initialExpanded])
+
   // Notify parent when expansion state changes
   useEffect(() => {
     onExpand?.(isExpanded)
@@ -80,9 +89,11 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
 
   if (!showContent) return null
 
-  // Use grandTotalUsd from normalized quote object
-  const grandTotalUsd = quote?.grandTotalUsd ?? 0
-  const grandTotalUsdDisplay = quote?.grandTotalUsdDisplay ?? "$0.00"
+  // Use totalFeeAmountUsd from fees prop (this is the total fee from the API)
+  const totalFeeUsd = quote?.fees?.totalFeeAmountUsd
+    ? parseFloat(quote.fees.totalFeeAmountUsd)
+    : 0
+  const totalFeeUsdDisplay = quote?.fees?.totalFeeAmountUsdDisplay ?? "$0.00"
 
   return (
     <div
@@ -136,7 +147,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                   </span>
                 </div>
               )}
-              {grandTotalUsd > 0 && (
+              {totalFeeUsd > 0 && (
                 <div className="flex items-center gap-1">
                   <svg
                     aria-hidden="true"
@@ -154,7 +165,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                       d="M32 64C32 28.7 60.7 0 96 0H256c35.3 0 64 28.7 64 64V256h8c48.6 0 88 39.4 88 88v32c0 13.3 10.7 24 24 24s24-10.7 24-24V222c-27.6-7.1-48-32.2-48-62V96L384 64c-8.8-8.8-8.8-23.2 0-32s23.2-8.8 32 0l77.3 77.3c12 12 18.7 28.3 18.7 45.3V168v24 32V376c0 39.8-32.2 72-72 72s-72-32.2-72-72V344c0-22.1-17.9-40-40-40h-8V448c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32V64zM96 80v96c0 8.8 7.2 16 16 16H240c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16H112c-8.8 0-16 7.2-16 16z"
                     />
                   </svg>
-                  <span className="font-medium">{grandTotalUsdDisplay}</span>
+                  <span className="font-medium">{totalFeeUsdDisplay}</span>
                 </div>
               )}
               <ChevronDown
@@ -214,15 +225,15 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
             {quote?.trailsFeeBreakdown &&
               (quote?.trailsFeeBreakdown.originRelayFee ||
                 quote?.trailsFeeBreakdown.destinationRelayFee) &&
-              grandTotalUsd > 0 && (
+              totalFeeUsd > 0 && (
                 <>
                   <Row variant="bold">
                     <RowLabel tooltip="The total fees for this transaction, including gas costs and all provider fees">
                       Fees total
                     </RowLabel>
                     <RowValue>
-                      <span title={`$${grandTotalUsd}`}>
-                        ≈ {grandTotalUsdDisplay}
+                      <span title={`$${totalFeeUsd}`}>
+                        ≈ {totalFeeUsdDisplay}
                       </span>
                     </RowValue>
                   </Row>
@@ -328,24 +339,31 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                       const providerFee = quote.trailsFeeBreakdown.providerFee
                       const isCrossChain =
                         quote.originChain.id !== quote.destinationChain.id
-                      const providerName = quote.quoteProvider?.name || ""
+
+                      const routeProviders = quote.routeProviders || []
+
+                      // Filter out providers with empty names and get the first one
+                      const validProviders = routeProviders.filter(
+                        (p) => p.name,
+                      )
+                      const firstProvider = validProviders[0]
 
                       return (
                         <Row variant="light">
                           <RowLabel tooltip="Fee charged by the bridge/swap provider for executing the transaction">
                             {isCrossChain ? (
-                              providerName ? (
+                              firstProvider ? (
                                 <>
                                   Bridge
                                   <span>
                                     (
                                     <a
-                                      href={quote.quoteProvider?.url}
+                                      href={firstProvider.url}
                                       target="_blank"
                                       rel="noopener noreferrer"
                                       className="hover:underline inline-flex items-center gap-0.5 text-blue-500"
                                     >
-                                      {providerName}
+                                      {firstProvider.name}
                                       <ExternalLink className="size-3" />
                                     </a>
                                     )
@@ -354,18 +372,18 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                               ) : (
                                 <>Bridge:</>
                               )
-                            ) : providerName ? (
+                            ) : firstProvider ? (
                               <>
                                 Liquidity Provider{" "}
                                 <span>
                                   (
                                   <a
-                                    href={quote.quoteProvider?.url}
+                                    href={firstProvider.url}
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     className="hover:underline inline-flex items-center gap-0.5 text-blue-500"
                                   >
-                                    {providerName}
+                                    {firstProvider.name}
                                     <ExternalLink className="size-3" />
                                   </a>
                                   )
@@ -384,28 +402,6 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                       )
                     })()}
 
-                  {/* Swap Fees (implicit costs) */}
-                  {quote.swapFeesUsdDisplay &&
-                    (() => {
-                      const swapFeesUsd = quote.swapFeesUsd ?? 0
-
-                      // Only show if swap fees > 0
-                      if (swapFeesUsd <= 0) return null
-
-                      return (
-                        <Row variant="light">
-                          <RowLabel tooltip="Implicit costs including DEX fees, liquidity provider fees, and routing costs">
-                            Swap
-                          </RowLabel>
-                          <RowValue>
-                            <span title={`$${swapFeesUsd}`}>
-                              {quote.swapFeesUsdDisplay}
-                            </span>
-                          </RowValue>
-                        </Row>
-                      )
-                    })()}
-
                   {/* Trails Platform Fee */}
                   {hasTrailsFee &&
                     quote.trailsFeeBreakdown.trailsFee &&

package/src/widget/components/Swap.tsx

@@ -25,7 +25,8 @@ interface SwapProps {
   onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
   paymasterUrls?: Array<{ chainId: number; url: string }>
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
-  quoteProvider?: string
+  swapProvider?: string
+  bridgeProvider?: string
   fundMethod?: string
   onNavigateToOnramp?: (
     props: {