0xtrails 0.13.2 → 0.14.0

package/src/widget/components/QuoteDetails.tsx

@@ -1,1275 +0,0 @@
-import {
-  ChevronDown,
-  Clock,
-  ExternalLink,
-  Info,
-  TriangleAlert,
-} from "lucide-react"
-import type React from "react"
-import { useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { getExplorerUrl, getExplorerUrlForAddress } from "../../explorer.js"
-import { logger } from "../../logger.js"
-import type { MeldQuote } from "../../meld/utils/meld.js"
-import type { PrepareSendQuote } from "../../prepareSend.js"
-import {
-  formatUsdAmountDisplay,
-  formatUsdAmountLocaleDisplay,
-} from "../../utils/format.js"
-import {
-  type TransactionState,
-  isDisplayableTransactionHash,
-} from "../../transactions.js"
-import { isNativeToken, truncateAddress } from "../../utils/address.js"
-import { isSameChainSameToken } from "../../utils/passthrough.js"
-import { usePriceImpactWarning } from "../hooks/usePriceImpactWarning.js"
-import { useTrails } from "../providers/TrailsProvider.js"
-import { ChainImage } from "./ChainImage.js"
-import { PriceImpactWarning } from "./PriceImpactWarning.js"
-import { TokenImage } from "./TokenImage.js"
-import { Tooltip } from "./Tooltip.js"
-import { hasFailedOrAbortedTransaction } from "../utils/transactionFailure.js"
-
-interface QuoteDetailsProps {
-  quote?: PrepareSendQuote | null
-  onRampQuote?: MeldQuote | null
-  fiatToUsdExchangeRate?: number | undefined
-  showContent?: boolean
-  children?: React.ReactNode
-  onExpand?: (isExpanded: boolean) => void
-  swapMode?: boolean
-  compact?: boolean
-  isRefetching?: boolean
-  initialExpanded?: boolean
-  showInsufficientFunds?: boolean
-  isPassthrough?: boolean
-  /** Actual transaction states with hashes (for receipt view) */
-  liveTransactionStates?: TransactionState[]
-  /** Callback to check if a transaction has meta tx errors */
-  hasMetaTxError?: (tx: TransactionState) => boolean | undefined
-}
-
-export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
-  quote,
-  onRampQuote,
-  fiatToUsdExchangeRate,
-  showContent = true,
-  children,
-  onExpand,
-  swapMode,
-  compact = false,
-  isRefetching = false,
-  initialExpanded = false,
-  showInsufficientFunds = true,
-  isPassthrough = false,
-  liveTransactionStates,
-  hasMetaTxError,
-}) => {
-  const [showCalldata, setShowCalldata] = useState(false)
-  const [showOriginRate, setShowOriginRate] = useState(true)
-  const [isExpanded, setIsExpanded] = useState(initialExpanded)
-  const [prevInitialExpanded, setPrevInitialExpanded] =
-    useState(initialExpanded)
-  if (initialExpanded !== prevInitialExpanded) {
-    setPrevInitialExpanded(initialExpanded)
-    setIsExpanded(initialExpanded)
-  }
-  const containerRef = useRef<HTMLDivElement>(null)
-  const { trailsAppUrl } = useTrails()
-  const calldataRef = useRef<HTMLDivElement>(null)
-
-  const priceImpactConfig = usePriceImpactWarning()
-
-  // Check if origin and destination are the same token on the same chain
-  const isSameToken = isSameChainSameToken(quote)
-
-  const totalOnRampFeeInUsd = onRampQuote?.totalFee
-    ? onRampQuote?.totalFee / (fiatToUsdExchangeRate ?? 1)
-    : 0
-
-  if (onRampQuote) {
-    logger.console.log("[trails-sdk] OnRamp Quote", {
-      onRampQuote,
-    })
-  }
-
-  // Notify parent when expansion state changes
-  useEffect(() => {
-    onExpand?.(isExpanded)
-  }, [isExpanded, onExpand])
-
-  const getFiatToCryptoRate = useCallback(() => {
-    if (!onRampQuote || !quote?.originTokenRate) {
-      return null
-    }
-
-    const fiatToUsdcRate = onRampQuote.exchangeRate
-    if (!fiatToUsdcRate || quote.originTokenRate === "0") {
-      return null
-    }
-
-    // Parse USDC -> Destination Token rate
-    const usdcToDestMatch = quote.originTokenRate.match(/=\s*([\d.]+)/)
-    const usdcToDestRate = usdcToDestMatch
-      ? parseFloat(usdcToDestMatch[1]!)
-      : null
-
-    if (!usdcToDestRate) {
-      return null
-    }
-
-    // Calculate final rate: FIAT <-> Destination Token
-    const fiatToDestinationToken = usdcToDestRate / fiatToUsdcRate
-
-    const fiatSymbol = onRampQuote.sourceCurrencyCode
-    const destSymbol = quote.destinationToken?.symbol || "TOKEN"
-
-    return {
-      fiatToDestinationToken,
-      fiatSymbol,
-      destSymbol,
-      fiatToUsdcRate,
-    }
-  }, [onRampQuote, quote])
-
-  const { totalFeeUsd, totalFeeUsdDisplay, totalFeeUsdLocaleDisplay } =
-    useMemo(() => {
-      if (onRampQuote) {
-        const feeInUsd =
-          totalOnRampFeeInUsd + parseFloat(quote?.fees.totalFeeAmountUsd || "0")
-        return {
-          totalFeeUsd: feeInUsd,
-          totalFeeUsdDisplay: formatUsdAmountDisplay(feeInUsd),
-          totalFeeUsdLocaleDisplay: formatUsdAmountLocaleDisplay(feeInUsd),
-        }
-      }
-      if (quote?.fees?.totalFeeAmountUsd) {
-        const feeInUsd = parseFloat(quote.fees.totalFeeAmountUsd)
-        return {
-          totalFeeUsd: feeInUsd,
-          totalFeeUsdDisplay:
-            quote.fees.totalFeeAmountUsdDisplay ??
-            formatUsdAmountDisplay(feeInUsd),
-          totalFeeUsdLocaleDisplay:
-            quote.fees.totalFeeAmountUsdLocaleDisplay ??
-            formatUsdAmountLocaleDisplay(feeInUsd),
-        }
-      }
-      return {
-        totalFeeUsd: 0,
-        totalFeeUsdDisplay: "$0.00",
-        totalFeeUsdLocaleDisplay: formatUsdAmountLocaleDisplay(0),
-      }
-    }, [onRampQuote, quote?.fees, totalOnRampFeeInUsd])
-
-  const parseSlippageTolerance = useCallback(() => {
-    if (!quote?.slippageTolerance) return null
-    return parseFloat(quote.slippageTolerance) * 100
-  }, [quote?.slippageTolerance])
-
-  const protocolVersionDisplay = useMemo(() => {
-    const normalized = (quote?.intentProtocol || "v1")
-      .replace("_", ".")
-      .toUpperCase()
-    return normalized.startsWith("V") ? normalized : `V${normalized}`
-  }, [quote?.intentProtocol])
-
-  if (!showContent) return null
-
-  return (
-    <div
-      className={`relative transition-opacity duration-300 ${
-        isRefetching ? "opacity-50" : ""
-      }`}
-    >
-      {/* Price Impact Warning - always visible when conditions are met */}
-      <PriceImpactWarning
-        quote={quote}
-        thresholdBps={priceImpactConfig.thresholdBps}
-        warningMessage={priceImpactConfig.warningMessage}
-        fallbackBridgeUrl={priceImpactConfig.fallbackBridgeUrl}
-      />
-
-      {/* Insufficient Balance Warning - only visible when showInsufficientFunds is true */}
-      {showInsufficientFunds && quote?.noSufficientBalance && (
-        <div className="flex justify-between items-center mb-2 p-2 bg-amber-50 dark:bg-amber-900/20 rounded-lg">
-          <span className="text-xs text-amber-600 dark:text-amber-400 flex items-center gap-1">
-            Balance Status:
-            <Tooltip message="Your wallet does not have sufficient balance to complete this transaction">
-              <Info className="size-3 text-amber-500 dark:text-amber-400 cursor-pointer" />
-            </Tooltip>
-          </span>
-          <span className="font-medium text-xs text-amber-600 dark:text-amber-400 flex items-center gap-1">
-            <TriangleAlert className="size-3" />
-            Insufficient Balance
-          </span>
-        </div>
-      )}
-
-      <div className={`flex justify-center`}>
-        {swapMode ? (
-          <button
-            type="button"
-            onClick={() => setIsExpanded(!isExpanded)}
-            className="w-full flex items-center justify-between px-2 py-2 trails-border-radius-button transition-colors cursor-pointer text-sm"
-            aria-label="Show more details"
-          >
-            <div className="font-semibold text-gray-900 dark:text-white flex items-center gap-2 whitespace-nowrap max-w-48 truncate">
-              {(() => {
-                const finalRate = getFiatToCryptoRate()
-                if (finalRate) {
-                  const { fiatToDestinationToken, fiatSymbol, destSymbol } =
-                    finalRate
-                  return (
-                    <span>
-                      1 {fiatSymbol} = {fiatToDestinationToken.toFixed(6)}{" "}
-                      {destSymbol}
-                    </span>
-                  )
-                }
-
-                if (onRampQuote?.exchangeRate) {
-                  const fiatSymbol = onRampQuote.sourceCurrencyCode
-                  const destSymbol =
-                    onRampQuote.destinationCurrencyCode.split("_")[0]
-                  return (
-                    <span>
-                      1 {fiatSymbol} ={" "}
-                      {(1 / onRampQuote.exchangeRate).toFixed(6)} {destSymbol}
-                    </span>
-                  )
-                }
-
-                if (quote?.originTokenRate && quote.originTokenRate !== "0") {
-                  return <span>{quote.originTokenRate}</span>
-                }
-
-                return null
-              })()}
-            </div>
-            <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
-              {quote?.completionEstimateDisplay && (
-                <div className="flex items-center gap-1">
-                  <Clock className="size-3" />
-                  <span className="font-medium">
-                    ~{onRampQuote ? "3 min" : quote.completionEstimateDisplay}
-                  </span>
-                </div>
-              )}
-              {totalFeeUsd > 0 && (
-                <div className="flex items-center gap-1">
-                  <svg
-                    aria-hidden="true"
-                    focusable="false"
-                    data-prefix="fas"
-                    data-icon="gas-pump"
-                    className="svg-inline--fa fa-gas-pump"
-                    role="img"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 512 512"
-                    width="12"
-                  >
-                    <path
-                      fill="currentColor"
-                      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" title={totalFeeUsdDisplay}>
-                    {totalFeeUsdLocaleDisplay}
-                  </span>
-                </div>
-              )}
-              <ChevronDown
-                className={`size-3 transition-transform duration-300 ease-out text-gray-600 dark:text-gray-400 ${
-                  isExpanded ? "rotate-180" : ""
-                }`}
-              />
-            </div>
-          </button>
-        ) : (
-          <button
-            type="button"
-            onClick={() => setIsExpanded(!isExpanded)}
-            className={`w-full max-w-md flex items-center ${
-              compact ? "justify-center" : "justify-between"
-            } gap-2 py-1 px-1 trails-border-radius-button transition-colors cursor-pointer text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300`}
-            aria-label="Show transaction details"
-          >
-            <span>Transaction details</span>
-            <ChevronDown
-              className={`size-3 transition-transform duration-300 ease-out ${
-                isExpanded ? "rotate-180" : ""
-              }`}
-            />
-          </button>
-        )}
-      </div>
-
-      {/* Details container */}
-      <div
-        ref={containerRef}
-        className={`overflow-auto transition-all duration-300 ease-out ${
-          isExpanded ? "max-h-[250px] opacity-100" : "max-h-0 opacity-0"
-        }`}
-      >
-        <div className={`text-sm p-2 space-y-2`}>
-          <div className="space-y-2">
-            {/* Gas Costs Section */}
-            {quote?.trailsFeeBreakdown &&
-              (quote?.trailsFeeBreakdown.originRelayFee ||
-                quote?.trailsFeeBreakdown.destinationRelayFee) &&
-              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
-                        className="notranslate"
-                        translate="no"
-                        title={`${totalFeeUsd}`}
-                      >
-                        ≈{" "}
-                        {totalFeeUsdLocaleDisplay ||
-                          quote?.fees?.totalFeeAmountUsdLocaleDisplay}
-                      </span>
-                    </RowValue>
-                  </Row>
-                  <div className="h-0" />
-                  {/* Gas Costs Group */}
-                  {(quote.trailsFeeBreakdown.originRelayFee ||
-                    quote.trailsFeeBreakdown.destinationRelayFee) && (
-                    <RowGroup>
-                      <Row>
-                        <RowLabel tooltip="Total gas costs for executing transactions on both origin and destination chains">
-                          All gas costs
-                        </RowLabel>
-                        <RowValue>
-                          <span title={`$${quote.totalGasUsd ?? 0}`}>
-                            {quote.totalGasUsdLocaleDisplay ||
-                              quote.totalGasUsdDisplay ||
-                              "$0.00"}
-                          </span>
-                        </RowValue>
-                      </Row>
-
-                      {quote.trailsFeeBreakdown.originRelayFee && (
-                        <Row variant="light">
-                          <RowLabel tooltip="Gas fee for executing the transaction on the origin chain">
-                            Origin Gas
-                            <ChainImage
-                              chainId={quote.originChain.id}
-                              size={16}
-                            />
-                          </RowLabel>
-                          <RowValue>
-                            <span title={`$${quote.originGasUsd ?? 0}`}>
-                              {quote.originGasUsdLocaleDisplay ||
-                                quote.trailsFeeBreakdown.originRelayFee
-                                  .usdValueLocale ||
-                                quote.trailsFeeBreakdown.originRelayFee
-                                  .usdValue}
-                            </span>
-                          </RowValue>
-                        </Row>
-                      )}
-
-                      {quote.trailsFeeBreakdown.destinationRelayFee && (
-                        <Row variant="light">
-                          <RowLabel tooltip="Gas fee for executing the transaction on the destination chain">
-                            Destination Gas
-                            <ChainImage
-                              chainId={quote.destinationChain.id}
-                              size={16}
-                            />
-                          </RowLabel>
-                          <RowValue>
-                            <span title={`$${quote.destinationGasUsd ?? 0}`}>
-                              {quote.destinationGasUsdLocaleDisplay ||
-                                quote.trailsFeeBreakdown.destinationRelayFee
-                                  .usdValueLocale ||
-                                quote.trailsFeeBreakdown.destinationRelayFee
-                                  .usdValue}
-                            </span>
-                          </RowValue>
-                        </Row>
-                      )}
-                    </RowGroup>
-                  )}
-                  {/* Spacer */}
-                  <div className="h-1" />
-                </>
-              )}
-
-            {/* Provider Costs Section */}
-            {(() => {
-              // Check if we have any provider fees to show
-              const hasQuoteProviderFee =
-                quote?.trailsFeeBreakdown && (quote.providerFeeUsd ?? 0) > 0
-              const hasTrailsFee =
-                quote?.trailsFeeBreakdown && (quote.trailsFeeUsd ?? 0) > 0
-              const hasOnRampFee =
-                onRampQuote && (onRampQuote.totalFee ?? 0) > 0
-
-              if (!hasQuoteProviderFee && !hasTrailsFee && !hasOnRampFee)
-                return null
-
-              return (
-                <RowGroup>
-                  {/* All Provider Fees */}
-                  {((quote?.totalProviderFeesUsd ?? 0) > 0 || hasOnRampFee) && (
-                    <Row>
-                      <RowLabel tooltip="Total provider fees for bridge, routing, and onramp services">
-                        All provider fees
-                      </RowLabel>
-                      <RowValue>
-                        <span
-                          title={`$${
-                            !quote
-                              ? (totalOnRampFeeInUsd ?? 0)
-                              : (quote?.totalProviderFeesUsd ?? 0) +
-                                (totalOnRampFeeInUsd ?? 0)
-                          }`}
-                        >
-                          {(() => {
-                            // If no quote, only show onramp fee
-                            if (!quote) {
-                              return formatUsdAmountLocaleDisplay(
-                                totalOnRampFeeInUsd,
-                              )
-                            }
-                            // If quote exists, show combined fees
-                            return formatUsdAmountLocaleDisplay(
-                              (quote?.totalProviderFeesUsd ?? 0) +
-                                (totalOnRampFeeInUsd ?? 0),
-                            )
-                          })()}
-                        </span>
-                      </RowValue>
-                    </Row>
-                  )}
-
-                  {/* Individual Provider Fees */}
-                  {hasQuoteProviderFee &&
-                    quote?.trailsFeeBreakdown?.providerFees &&
-                    quote.trailsFeeBreakdown.providerFees.length > 0 &&
-                    quote.trailsFeeBreakdown.providerFees.map((providerFee) => (
-                      <Row key={providerFee.id} variant="light">
-                        <RowLabel
-                          tooltip={`Fee charged by ${providerFee.name || providerFee.id}`}
-                        >
-                          {providerFee.isBridge ? "Bridge" : "Swap"}
-                          {providerFee.name && (
-                            <span>
-                              {" "}
-                              (
-                              <a
-                                href={providerFee.url}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="hover:underline inline-flex items-center gap-0.5 text-blue-500"
-                              >
-                                {providerFee.name}
-                                <ExternalLink className="size-3" />
-                              </a>
-                              )
-                            </span>
-                          )}
-                        </RowLabel>
-                        <RowValue>
-                          <span title={`$${providerFee.feeUsd}`}>
-                            {providerFee.usdValueLocale || providerFee.usdValue}
-                          </span>
-                        </RowValue>
-                      </Row>
-                    ))}
-
-                  {/* Onramp Provider Fee */}
-                  {hasOnRampFee && (
-                    <Row variant="light">
-                      <RowLabel tooltip="Fee charged by the onramp service provider, including network and transaction fees">
-                        Onramp
-                        {onRampQuote.serviceProvider && (
-                          <span>({onRampQuote.serviceProvider})</span>
-                        )}
-                      </RowLabel>
-                      <RowValue>
-                        <span title={`$${totalOnRampFeeInUsd ?? 0}`}>
-                          {/* onRampQuote.totalFee is in the source fiat currency so we need to convert into USD  */}
-                          {formatUsdAmountLocaleDisplay(totalOnRampFeeInUsd)}
-                        </span>
-                      </RowValue>
-                    </Row>
-                  )}
-
-                  {/* Trails Platform Fee */}
-                  {hasTrailsFee &&
-                    quote?.trailsFeeBreakdown?.trailsFee &&
-                    (() => {
-                      const trailsFee = quote.trailsFeeBreakdown.trailsFee
-
-                      return (
-                        <Row variant="light">
-                          <RowLabel tooltip="Platform fee for using the Trails service">
-                            Trails
-                          </RowLabel>
-                          <RowValue>
-                            <span title={trailsFee.usdValue}>
-                              {trailsFee.usdValueLocale || trailsFee.usdValue}
-                            </span>
-                          </RowValue>
-                        </Row>
-                      )
-                    })()}
-                </RowGroup>
-              )
-            })()}
-
-            <div className="h-px bg-gray-200 dark:bg-gray-800 my-4" />
-
-            {/* Transaction Details Section */}
-            {(() => {
-              const hasSlippage =
-                quote?.slippageTolerance != null &&
-                Number(quote.slippageTolerance) !== 0
-              const hasPriceImpact =
-                quote?.priceImpact != null && Number(quote.priceImpact) !== 0
-              const hasIntentId =
-                quote?.intentId != null && quote.intentId !== ""
-              const showSection = hasSlippage || hasPriceImpact || hasIntentId
-
-              if (!showSection) return null
-
-              return (
-                <RowGroup>
-                  <Row variant="bold">
-                    <RowLabel>Transaction details</RowLabel>
-                  </Row>
-
-                  {/* Intent ID */}
-                  {hasIntentId && (
-                    <Row>
-                      <RowLabel>Intent ID</RowLabel>
-                      <RowValue>
-                        <a
-                          href={`${trailsAppUrl}/intent/${quote.intentId}`}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="font-mono text-xs hover:underline flex items-center gap-1 text-blue-500"
-                        >
-                          {truncateAddress(quote?.intentId ?? "", 9, 3)}
-                          <ExternalLink className="size-3" />
-                        </a>
-                      </RowValue>
-                    </Row>
-                  )}
-
-                  {/* Max Slippage */}
-                  {hasSlippage && (
-                    <Row>
-                      <RowLabel tooltip="The maximum percentage by which the exchange rate can change before the transaction fails. Higher slippage means more tolerance for price changes but potentially worse rates.">
-                        Max slippage
-                      </RowLabel>
-                      <RowValue>{parseSlippageTolerance()}%</RowValue>
-                    </Row>
-                  )}
-
-                  {/* Price Impact */}
-                  {hasPriceImpact && (
-                    <div className="space-y-1">
-                      <Row>
-                        <RowLabel tooltip="The percentage change in the token price caused by your trade. Higher impact means your trade affects the market price more, potentially resulting in worse rates.">
-                          Price impact
-                        </RowLabel>
-                        <RowValue
-                          className={`flex items-center gap-1 ${
-                            Math.abs(Number(quote.priceImpact)) > 5
-                              ? "text-red-600 dark:text-red-400"
-                              : Math.abs(Number(quote.priceImpact)) > 0.5
-                                ? "text-orange-600 dark:text-orange-400"
-                                : "text-gray-600 dark:text-gray-400"
-                          }`}
-                        >
-                          {Math.abs(Number(quote.priceImpact)) > 0.5 && (
-                            <span title="High price impact">
-                              <TriangleAlert className="size-3" />
-                            </span>
-                          )}
-                          {Number(quote.priceImpact).toFixed(2)}%
-                        </RowValue>
-                      </Row>
-                      {quote.priceImpactUsdDisplay && (
-                        <div className="text-right">
-                          <span
-                            className="text-xs text-gray-500 dark:text-gray-400 notranslate"
-                            translate="no"
-                            title={quote.priceImpactUsdDisplay}
-                          >
-                            ≈{" "}
-                            {quote.priceImpactUsdLocaleDisplay ||
-                              quote.priceImpactUsdDisplay}
-                          </span>
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </RowGroup>
-              )
-            })()}
-
-            <div className="space-y-3 pt-2">
-              {/* Exchange Rate - hide when same token on same chain */}
-              {!isSameToken &&
-                (() => {
-                  // Handle onramp case: show combined FIAT -> DEST rate
-                  const finalRate = getFiatToCryptoRate()
-                  if (finalRate) {
-                    const { fiatToDestinationToken, fiatSymbol, destSymbol } =
-                      finalRate
-                    return (
-                      <Row>
-                        <RowLabel
-                          tooltip={`Combined exchange rate from ${fiatSymbol} to ${destSymbol} (via USDC on Base)`}
-                        >
-                          Exchange Rate
-                        </RowLabel>
-                        <RowValue>
-                          <button
-                            type="button"
-                            onClick={() => setShowOriginRate(!showOriginRate)}
-                            className="hover:underline cursor-pointer"
-                          >
-                            1 {fiatSymbol} = $
-                            {fiatToDestinationToken.toFixed(6)} ${destSymbol}`
-                          </button>
-                        </RowValue>
-                      </Row>
-                    )
-                  }
-
-                  // Fallback: show just the onramp rate if quote rates aren't available
-                  if (onRampQuote?.exchangeRate) {
-                    const fiatSymbol = onRampQuote.sourceCurrencyCode
-                    const destSymbol =
-                      onRampQuote.destinationCurrencyCode.split("_")[0]
-                    const fiatToUsdcRate = onRampQuote.exchangeRate
-
-                    return (
-                      <Row>
-                        <RowLabel
-                          tooltip={`Exchange rate from ${fiatSymbol} to ${destSymbol}`}
-                        >
-                          Exchange Rate
-                        </RowLabel>
-                        <RowValue>
-                          1 {fiatSymbol} = ${(1 / fiatToUsdcRate).toFixed(6)} $
-                          {destSymbol}
-                        </RowValue>
-                      </Row>
-                    )
-                  }
-
-                  // Standard case: show quote exchange rate
-                  if (
-                    quote?.originTokenRate &&
-                    quote?.destinationTokenRate &&
-                    quote.originTokenRate !== "0" &&
-                    quote.destinationTokenRate !== "0"
-                  ) {
-                    return (
-                      <Row>
-                        <RowLabel tooltip="The current exchange rate between the origin and destination tokens">
-                          Exchange Rate
-                        </RowLabel>
-                        <RowValue>
-                          <button
-                            type="button"
-                            onClick={() => setShowOriginRate(!showOriginRate)}
-                            className="hover:underline cursor-pointer"
-                          >
-                            {showOriginRate
-                              ? quote.originTokenRate
-                              : quote.destinationTokenRate}
-                          </button>
-                        </RowValue>
-                      </Row>
-                    )
-                  }
-
-                  return null
-                })()}
-
-              {/* Transfer Amounts Group */}
-              {((quote?.originAmount &&
-                quote?.originToken.symbol &&
-                quote?.originChain.id) ||
-                (quote?.destinationToken.symbol &&
-                  quote?.destinationAmount &&
-                  quote?.destinationAmountUsdDisplay &&
-                  quote?.destinationChain.id)) && (
-                <RowGroup>
-                  {/* Hide origin transfer amount when same token - only show target amount */}
-                  {!isSameToken &&
-                    quote?.originAmount &&
-                    quote?.originToken.symbol &&
-                    quote?.originChain.id && (
-                      <Row className="items-start">
-                        <RowLabel
-                          tooltip={
-                            isPassthrough
-                              ? "The amount of tokens you will transfer"
-                              : "The amount of tokens you will send from the origin chain"
-                          }
-                        >
-                          {isPassthrough
-                            ? "Transfer Amount"
-                            : "Origin Transfer Amount"}
-                        </RowLabel>
-                        <div className="text-right">
-                          {isNativeToken(quote.originToken.contractAddress) ? (
-                            <>
-                              <div className="font-medium text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1 justify-end">
-                                <TokenImage
-                                  imageUrl={quote.originToken.imageUrl}
-                                  symbol={quote.originToken.symbol}
-                                  chainId={quote.originChain.id}
-                                  contractAddress={
-                                    quote.originToken.contractAddress
-                                  }
-                                  size={16}
-                                />
-                                <span className="notranslate" translate="no">
-                                  {quote.originAmountFormattedLocale ||
-                                    quote.originAmountDisplay}{" "}
-                                  {quote.originToken.symbol}
-                                </span>
-                              </div>
-                              {quote.originAmountUsdDisplay && (
-                                <div
-                                  className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 notranslate"
-                                  translate="no"
-                                  title={quote.originAmountUsdDisplay}
-                                >
-                                  ≈{" "}
-                                  {quote.originAmountUsdLocaleDisplay ||
-                                    quote.originAmountUsdDisplay}
-                                </div>
-                              )}
-                            </>
-                          ) : (
-                            <>
-                              <a
-                                href={getExplorerUrlForAddress({
-                                  address: quote.originToken.contractAddress,
-                                  chainId: quote.originChain.id,
-                                })}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="hover:underline cursor-pointer"
-                              >
-                                <div className="font-medium text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1 justify-end">
-                                  <TokenImage
-                                    imageUrl={quote.originToken.imageUrl}
-                                    symbol={quote.originToken.symbol}
-                                    chainId={quote.originChain.id}
-                                    contractAddress={
-                                      quote.originToken.contractAddress
-                                    }
-                                    size={16}
-                                  />
-                                  {quote.originAmountFormattedLocale ||
-                                    quote.originAmountDisplay}{" "}
-                                  {quote.originToken.symbol}
-                                </div>
-                              </a>
-                              {quote.originAmountUsdDisplay && (
-                                <div
-                                  className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 notranslate"
-                                  translate="no"
-                                  title={quote.originAmountUsdDisplay}
-                                >
-                                  ≈{" "}
-                                  {quote.originAmountUsdLocaleDisplay ||
-                                    quote.originAmountUsdDisplay}
-                                </div>
-                              )}
-                            </>
-                          )}
-                        </div>
-                      </Row>
-                    )}
-
-                  {quote?.destinationToken.symbol &&
-                    quote?.destinationAmount &&
-                    quote?.destinationAmountUsdDisplay &&
-                    quote?.destinationChain.id && (
-                      <Row className="items-start">
-                        <RowLabel
-                          tooltip={
-                            isPassthrough
-                              ? "The amount of tokens the recipient will receive"
-                              : "The amount of tokens you will receive on the destination chain after the swap and/or bridge"
-                          }
-                        >
-                          {isPassthrough
-                            ? "Target Amount"
-                            : "Destination Target Amount"}
-                        </RowLabel>
-                        <div className="text-right">
-                          {isNativeToken(
-                            quote.destinationToken.contractAddress,
-                          ) ? (
-                            <>
-                              <div className="font-medium text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1 justify-end">
-                                <TokenImage
-                                  imageUrl={quote.destinationToken.imageUrl}
-                                  symbol={quote.destinationToken.symbol}
-                                  chainId={quote.destinationChain.id}
-                                  contractAddress={
-                                    quote.destinationToken.contractAddress
-                                  }
-                                  size={16}
-                                />
-                                <span className="notranslate" translate="no">
-                                  {quote.destinationAmountFormattedLocale ||
-                                    quote.destinationAmountDisplay}{" "}
-                                  {quote.destinationToken.symbol}
-                                </span>
-                              </div>
-                              {quote.destinationAmountUsdDisplay && (
-                                <div
-                                  className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 notranslate"
-                                  translate="no"
-                                  title={quote.destinationAmountUsdDisplay}
-                                >
-                                  ≈{" "}
-                                  {quote.destinationAmountUsdLocaleDisplay ||
-                                    quote.destinationAmountUsdDisplay}
-                                </div>
-                              )}
-                            </>
-                          ) : (
-                            <>
-                              <a
-                                href={getExplorerUrlForAddress({
-                                  address:
-                                    quote.destinationToken.contractAddress,
-                                  chainId: quote.destinationChain.id,
-                                })}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="hover:underline cursor-pointer"
-                              >
-                                <div className="font-medium text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1 justify-end">
-                                  <TokenImage
-                                    imageUrl={quote.destinationToken.imageUrl}
-                                    symbol={quote.destinationToken.symbol}
-                                    chainId={quote.destinationChain.id}
-                                    contractAddress={
-                                      quote.destinationToken.contractAddress
-                                    }
-                                    size={16}
-                                  />
-                                  {quote.destinationAmountFormattedLocale ||
-                                    quote.destinationAmountDisplay}{" "}
-                                  {quote.destinationToken.symbol}
-                                </div>
-                              </a>
-                              {quote.destinationAmountUsdDisplay && (
-                                <div
-                                  className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 notranslate"
-                                  translate="no"
-                                  title={quote.destinationAmountUsdDisplay}
-                                >
-                                  ≈{" "}
-                                  {quote.destinationAmountUsdLocaleDisplay ||
-                                    quote.destinationAmountUsdDisplay}
-                                </div>
-                              )}
-                            </>
-                          )}
-                        </div>
-                      </Row>
-                    )}
-                </RowGroup>
-              )}
-
-              {/* Address Group */}
-              {(quote?.originDepositAddress ||
-                quote?.destinationDepositAddress ||
-                quote?.destinationAddress) && (
-                <RowGroup>
-                  {/* For passthrough: show only Target Address (the recipient) */}
-                  {isPassthrough ? (
-                    quote?.destinationAddress && (
-                      <Row>
-                        <RowLabel tooltip="The address that will receive the tokens">
-                          Target Address
-                        </RowLabel>
-                        <RowValue>
-                          <a
-                            href={getExplorerUrlForAddress({
-                              address: quote.destinationAddress,
-                              chainId: quote.destinationChain.id,
-                            })}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="font-mono text-xs hover:underline flex items-center gap-1 text-blue-500"
-                          >
-                            {truncateAddress(quote.destinationAddress)}
-                            <ExternalLink className="size-3" />
-                          </a>
-                        </RowValue>
-                      </Row>
-                    )
-                  ) : (
-                    <>
-                      {quote?.originDepositAddress && (
-                        <Row>
-                          <RowLabel tooltip="This is the intent address to deposit to that will then execute the swap and/or bridge">
-                            Origin Deposit Address
-                          </RowLabel>
-                          <RowValue>
-                            <a
-                              href={getExplorerUrlForAddress({
-                                address: quote.originDepositAddress,
-                                chainId: quote.originChain.id,
-                              })}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              className="font-mono text-xs hover:underline flex items-center gap-1 text-blue-500"
-                            >
-                              {truncateAddress(quote.originDepositAddress)}
-                              <ExternalLink className="size-3" />
-                            </a>
-                          </RowValue>
-                        </Row>
-                      )}
-
-                      {quote?.destinationDepositAddress &&
-                        quote?.destinationDepositAddress !==
-                          quote?.originDepositAddress && (
-                          <Row>
-                            <RowLabel tooltip="This is the address that will receive the tokens after any swap and/or bridge from the origin chain">
-                              Destination Deposit Address
-                            </RowLabel>
-                            <RowValue>
-                              <a
-                                href={getExplorerUrlForAddress({
-                                  address: quote.destinationDepositAddress,
-                                  chainId: quote.destinationChain.id,
-                                })}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="font-mono text-xs hover:underline flex items-center gap-1 text-blue-500"
-                              >
-                                {truncateAddress(
-                                  quote.destinationDepositAddress,
-                                )}
-                                <ExternalLink className="size-3" />
-                              </a>
-                            </RowValue>
-                          </Row>
-                        )}
-
-                      {quote?.destinationAddress && (
-                        <Row>
-                          <RowLabel tooltip="This is the final execution address or recipient address">
-                            Destination Target Address
-                          </RowLabel>
-                          <RowValue>
-                            <a
-                              href={getExplorerUrlForAddress({
-                                address: quote.destinationAddress,
-                                chainId: quote.destinationChain.id,
-                              })}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              className="font-mono text-xs hover:underline flex items-center gap-1 text-blue-500"
-                            >
-                              {truncateAddress(quote.destinationAddress)}
-                              <ExternalLink className="size-3" />
-                            </a>
-                          </RowValue>
-                        </Row>
-                      )}
-                    </>
-                  )}
-                </RowGroup>
-              )}
-
-              {/* Custom Calldata */}
-              {quote?.destinationCalldata && (
-                <div className="space-y-2">
-                  <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"
-                      }
-                    >
-                      <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 ${
-                      showCalldata
-                        ? "max-h-32 opacity-100"
-                        : "max-h-0 opacity-0"
-                    }`}
-                  >
-                    <div className="mt-2">
-                      <textarea
-                        value={quote.destinationCalldata}
-                        readOnly
-                        className={`w-full p-2 text-xs font-mono rounded border border-solid resize-none transition-all duration-200 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-800 dark:text-gray-200`}
-                        rows={4}
-                        placeholder="No custom calldata"
-                      />
-                    </div>
-                  </div>
-                </div>
-              )}
-
-              {/* Transaction Steps Section */}
-              {(() => {
-                // Use live transaction states if available (receipt view), otherwise use quote states
-                const hasLiveStates =
-                  liveTransactionStates && liveTransactionStates.length > 0
-                const displayStates = hasLiveStates
-                  ? liveTransactionStates
-                  : isPassthrough && quote?.passthroughTransactionStates?.length
-                    ? quote.passthroughTransactionStates
-                    : quote?.transactionStates
-
-                if (!displayStates || displayStates.length === 0) return null
-
-                return (
-                  <div className="mt-4">
-                    <div className="h-px bg-gray-200 dark:bg-gray-800 mb-3" />
-                    <RowGroup>
-                      <Row variant="bold">
-                        <RowLabel>
-                          <span className="flex items-center gap-2">
-                            {hasLiveStates
-                              ? "Transactions"
-                              : "Transaction Steps"}
-                            {isPassthrough && (
-                              <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 font-medium">
-                                Direct
-                              </span>
-                            )}
-                          </span>
-                        </RowLabel>
-                      </Row>
-                      {displayStates.map((txState, index) => {
-                        const liveTxState = txState as TransactionState
-                        const hasTxHash =
-                          hasLiveStates &&
-                          isDisplayableTransactionHash(
-                            liveTxState.transactionHash,
-                          )
-                        const txExplorerUrl =
-                          liveTxState.explorerUrl ||
-                          (isDisplayableTransactionHash(
-                            liveTxState.transactionHash,
-                          ) && liveTxState.chainId
-                            ? getExplorerUrl({
-                                txHash: liveTxState.transactionHash,
-                                chainId: liveTxState.chainId,
-                              })
-                            : null)
-                        const txHasMetaError =
-                          hasMetaTxError && hasLiveStates
-                            ? hasMetaTxError(liveTxState)
-                            : false
-
-                        return (
-                          <div
-                            key={txState.label || index}
-                            className={`p-2 rounded ${hasLiveStates ? "bg-gray-100 dark:bg-gray-700/50" : ""}`}
-                          >
-                            <div className="flex justify-between items-center">
-                              <span className="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
-                                {!hasLiveStates && (
-                                  <span className="w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-[10px] font-medium">
-                                    {index + 1}
-                                  </span>
-                                )}
-                                {txState.label}
-                              </span>
-                              <span className="flex items-center gap-2">
-                                <ChainImage
-                                  chainId={txState.chainId}
-                                  size={14}
-                                />
-                                {hasLiveStates && liveTxState.state && (
-                                  <span
-                                    className={`px-2 py-0.5 rounded-full text-xs ${
-                                      hasFailedOrAbortedTransaction(liveTxState)
-                                        ? "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-400"
-                                        : liveTxState.state === "confirmed"
-                                          ? "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-400"
-                                          : "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-400"
-                                    }`}
-                                  >
-                                    {liveTxState.state.charAt(0).toUpperCase() +
-                                      liveTxState.state.slice(1)}
-                                  </span>
-                                )}
-                              </span>
-                            </div>
-                            {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>
-                                <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>
-                                  <ExternalLink className="w-3 h-3" />
-                                </a>
-                              </div>
-                            )}
-                          </div>
-                        )
-                      })}
-                    </RowGroup>
-                  </div>
-                )
-              })()}
-
-              {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>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default QuoteDetails
-
-interface RowGroupProps {
-  children: React.ReactNode
-  className?: string
-}
-
-const RowGroup: React.FC<RowGroupProps> = ({ children, className = "" }) => (
-  <div className={`space-y-2 ${className}`}>{children}</div>
-)
-
-const rowVariants = {
-  default: "text-xs text-gray-600 dark:text-gray-400",
-  light: "text-xs text-gray-400 dark:text-gray-600",
-  bold: "text-sm font-semibold text-gray-900 dark:text-white",
-}
-
-interface RowProps {
-  children: React.ReactNode
-  className?: string
-  variant?: keyof typeof rowVariants
-}
-
-const Row: React.FC<RowProps> = ({
-  children,
-  className = "",
-  variant = "default",
-}) => (
-  <div
-    className={`flex justify-between items-center ${rowVariants[variant]} ${className}`}
-  >
-    {children}
-  </div>
-)
-
-interface RowLabelProps {
-  children: React.ReactNode
-  tooltip?: string
-  className?: string
-}
-
-const RowLabel: React.FC<RowLabelProps> = ({
-  children,
-  tooltip,
-  className = "",
-}) => {
-  return (
-    <div className={`flex items-center gap-1 ${className}`}>
-      {children}
-      {tooltip && (
-        <Tooltip message={tooltip}>
-          <Info className="size-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-        </Tooltip>
-      )}
-    </div>
-  )
-}
-
-interface RowValueProps {
-  children: React.ReactNode
-  className?: string
-}
-
-const RowValue: React.FC<RowValueProps> = ({ children, className }) => {
-  return <div className={className}>{children}</div>
-}