0xtrails 0.6.6 → 0.7.0

package/src/widget/components/QuoteDetails.tsx

@@ -8,8 +8,15 @@ import { useState, useEffect, useRef, useCallback } from "react"
 import { truncateAddress } from "../../utils.js"
 import { PriceImpactWarning } from "./PriceImpactWarning.js"
 import { usePriceImpactWarning } from "../hooks/usePriceImpactWarning.js"
-import { formatUsdAmountDisplay } from "../../tokenBalances.js"
-import { Copy, Check, Info } from "lucide-react"
+import {
+  Copy,
+  Check,
+  Info,
+  ExternalLink,
+  Clock,
+  ChevronDown,
+  TriangleAlert,
+} from "lucide-react"
 
 interface QuoteDetailsProps {
   quote?: PrepareSendQuote | null
@@ -21,30 +28,6 @@ interface QuoteDetailsProps {
   isRefetching?: boolean
 }
 
-// Helper function to format completion time
-const formatCompletionTime = (seconds: number): string => {
-  if (seconds < 60) {
-    return `${seconds}s`
-  } else if (seconds < 3600) {
-    const minutes = Math.floor(seconds / 60)
-    const remainingSeconds = seconds % 60
-    return remainingSeconds > 0
-      ? `${minutes}m${remainingSeconds}s`
-      : `${minutes}m`
-  } else {
-    const hours = Math.floor(seconds / 3600)
-    const remainingMinutes = Math.floor((seconds % 3600) / 60)
-    const remainingSeconds = seconds % 60
-    if (remainingMinutes > 0 || remainingSeconds > 0) {
-      return `${hours}h${remainingMinutes}m${
-        remainingSeconds > 0 ? `${remainingSeconds}s` : ""
-      }`
-    } else {
-      return `${hours}h`
-    }
-  }
-}
-
 export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
   quote,
   showContent = true,
@@ -97,6 +80,10 @@ 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"
+
   return (
     <div
       className={`relative transition-opacity duration-300 ${
@@ -117,24 +104,11 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
           <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="w-3 h-3 text-amber-500 dark:text-amber-400 cursor-pointer" />
+              <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">
-            <svg
-              className="w-3 h-3"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-            >
-              <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>
+            <TriangleAlert className="size-3" />
             Insufficient Balance
           </span>
         </div>
@@ -145,38 +119,25 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
           <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-xs"
+            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="flex items-center gap-2 text-gray-600 dark:text-gray-400 whitespace-nowrap max-w-48 truncate">
-              {quote?.originTokenRate && (
-                <span className="font-medium">{quote.originTokenRate}</span>
-              )}
+            <div className="font-semibold text-gray-900 dark:text-white flex items-center gap-2 whitespace-nowrap max-w-48 truncate">
+              {quote?.originTokenRate && quote.originTokenRate !== "0" ? (
+                <span>{quote.originTokenRate}</span>
+              ) : null}
             </div>
             <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
-              {quote?.completionEstimateSeconds != null && (
-                <>
-                  <svg
-                    className="w-3 h-3"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    aria-hidden="true"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
+              {quote?.completionEstimateDisplay && (
+                <div className="flex items-center gap-1">
+                  <Clock className="size-3" />
                   <span className="font-medium">
-                    ~{formatCompletionTime(quote.completionEstimateSeconds)}
+                    ~{quote.completionEstimateDisplay}
                   </span>
-                </>
+                </div>
               )}
-              {quote?.gasCostUsd != null && quote?.gasCostUsd > 0 && (
-                <>
+              {grandTotalUsd > 0 && (
+                <div className="flex items-center gap-1">
                   <svg
                     aria-hidden="true"
                     focusable="false"
@@ -193,25 +154,14 @@ 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">{quote.gasCostUsdDisplay}</span>
-                </>
+                  <span className="font-medium">{grandTotalUsdDisplay}</span>
+                </div>
               )}
-              <svg
-                className={`w-3 h-3 transition-transform duration-300 ease-out ${
+              <ChevronDown
+                className={`size-3 transition-transform duration-300 ease-out text-gray-600 dark:text-gray-400 ${
                   isExpanded ? "rotate-180" : ""
                 }`}
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M19 9l-7 7-7-7"
-                />
-              </svg>
+              />
             </div>
           </button>
         ) : (
@@ -224,22 +174,11 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
             aria-label="Show transaction details"
           >
             <span>Transaction details</span>
-            <svg
-              className={`w-3 h-3 transition-transform duration-300 ease-out ${
+            <ChevronDown
+              className={`size-3 transition-transform duration-300 ease-out ${
                 isExpanded ? "rotate-180" : ""
               }`}
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M19 9l-7 7-7-7"
-              />
-            </svg>
+            />
           </button>
         )}
       </div>
@@ -259,25 +198,11 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                 <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
                   Estimated Time:
                   <Tooltip message="Estimated time for the transaction to complete across all chains">
-                    <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
+                    <Info className="size-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
                   </Tooltip>
                 </span>
                 <span className="font-medium text-xs text-gray-900 dark:text-white flex items-center gap-1">
-                  <svg
-                    className="w-3 h-3"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    aria-hidden="true"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  ~{formatCompletionTime(quote.completionEstimateSeconds)}
+                  ~{quote.completionEstimateDisplay}
                 </span>
               </div>
             )} */}
@@ -288,149 +213,73 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
             {/* Gas Costs Section */}
             {quote?.trailsFeeBreakdown &&
               (quote?.trailsFeeBreakdown.originRelayFee ||
-                quote?.trailsFeeBreakdown.destinationRelayFee) && (
+                quote?.trailsFeeBreakdown.destinationRelayFee) &&
+              grandTotalUsd > 0 && (
                 <>
-                  {/* Total Fees */}
-                  {(() => {
-                    // Calculate total gas costs
-                    const originGasUsd = parseFloat(
-                      quote.trailsFeeBreakdown?.originRelayFee?.usdValue?.replace(
-                        /[^0-9.-]/g,
-                        "",
-                      ) || "0",
-                    )
-                    const destGasUsd = parseFloat(
-                      quote.trailsFeeBreakdown?.destinationRelayFee?.usdValue?.replace(
-                        /[^0-9.-]/g,
-                        "",
-                      ) || "0",
-                    )
-                    const totalGasUsd = originGasUsd + destGasUsd
-
-                    // Calculate total provider costs (including swap fees)
-                    const providerUsd = parseFloat(
-                      quote.trailsFeeBreakdown?.providerFee?.usdValue?.replace(
-                        /[^0-9.-]/g,
-                        "",
-                      ) || "0",
-                    )
-                    const trailsUsd = parseFloat(
-                      quote.trailsFeeBreakdown?.trailsFee?.usdValue?.replace(
-                        /[^0-9.-]/g,
-                        "",
-                      ) || "0",
-                    )
-                    const originUsd = parseFloat(
-                      quote.originAmountUsdDisplay?.replace(/[^0-9.-]/g, "") ||
-                        "0",
-                    )
-                    const destUsd = parseFloat(
-                      quote.destinationAmountUsdDisplay?.replace(
-                        /[^0-9.-]/g,
-                        "",
-                      ) || "0",
-                    )
-                    const totalFeesUsd = parseFloat(
-                      quote.fees?.totalFeeAmountUsdDisplay?.replace(
-                        /[^0-9.-]/g,
-                        "",
-                      ) || "0",
-                    )
-                    const swapFeesUsd = Math.max(
-                      0,
-                      originUsd - destUsd - totalFeesUsd,
-                    )
-                    const totalProviderUsd =
-                      providerUsd + trailsUsd + swapFeesUsd
-
-                    // Sum of all gas costs and all provider costs
-                    const grandTotalUsd = totalGasUsd + totalProviderUsd
-
-                    if (grandTotalUsd <= 0) return null
-
-                    return (
-                      <div className="flex justify-between items-center">
-                        <span className="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-1">
-                          Fees total
-                          <Tooltip message="The total fees for this transaction, including gas costs and all provider fees">
-                            <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                          </Tooltip>
-                        </span>
-                        <span className="font-semibold text-sm text-gray-900 dark:text-white">
-                          ≈ {formatUsdAmountDisplay(grandTotalUsd)}
-                        </span>
-                      </div>
-                    )
-                  })()}
-
+                  <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>
+                    </RowValue>
+                  </Row>
                   <div className="h-0" />
-
-                  {/* All Gas Costs */}
+                  {/* Gas Costs Group */}
                   {(quote.trailsFeeBreakdown.originRelayFee ||
                     quote.trailsFeeBreakdown.destinationRelayFee) && (
-                    <div className="flex justify-between items-center">
-                      <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
-                        All gas costs
-                        <Tooltip message="Total gas costs for executing transactions on both origin and destination chains">
-                          <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                        </Tooltip>
-                      </span>
-                      <span className="font-medium text-xs text-gray-600 dark:text-gray-400  flex items-center gap-1">
-                        {(() => {
-                          const originGasUsd = parseFloat(
-                            quote.trailsFeeBreakdown.originRelayFee?.usdValue?.replace(
-                              /[^0-9.-]/g,
-                              "",
-                            ) || "0",
-                          )
-                          const destGasUsd = parseFloat(
-                            quote.trailsFeeBreakdown.destinationRelayFee?.usdValue?.replace(
-                              /[^0-9.-]/g,
-                              "",
-                            ) || "0",
-                          )
-                          const totalGasUsd = originGasUsd + destGasUsd
-                          return formatUsdAmountDisplay(totalGasUsd)
-                        })()}
-                      </span>
-                    </div>
-                  )}
-
-                  {/* Origin Gas */}
-                  {quote.trailsFeeBreakdown.originRelayFee && (
-                    <div className="flex justify-between items-center">
-                      <span className="text-xs text-gray-400 dark:text-gray-600 flex items-center gap-1">
-                        Origin Gas
-                        <ChainImage chainId={quote.originChain.id} size={16} />
-                        <Tooltip message="Gas fee for executing the transaction on the origin chain">
-                          <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                        </Tooltip>
-                      </span>
-                      <span className="font-medium text-xs text-gray-400 dark:text-gray-600">
-                        {quote.trailsFeeBreakdown.originRelayFee.usdValue}
-                      </span>
-                    </div>
-                  )}
+                    <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.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.trailsFeeBreakdown.originRelayFee.usdValue}
+                            </span>
+                          </RowValue>
+                        </Row>
+                      )}
 
-                  {/* Destination Gas */}
-                  {quote.trailsFeeBreakdown.destinationRelayFee && (
-                    <div className="flex justify-between items-center">
-                      <span className="text-xs text-gray-400 dark:text-gray-600 flex items-center gap-1">
-                        Destination Gas
-                        <ChainImage
-                          chainId={quote.destinationChain.id}
-                          size={16}
-                        />
-                        <Tooltip message="Gas fee for executing the transaction on the destination chain">
-                          <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                        </Tooltip>
-                      </span>
-                      <span className="font-medium text-xs text-gray-400 dark:text-gray-600">
-                        {quote.trailsFeeBreakdown.destinationRelayFee.usdValue}
-                      </span>
-                    </div>
+                      {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.destGasUsd ?? 0}`}>
+                              {
+                                quote.trailsFeeBreakdown.destinationRelayFee
+                                  .usdValue
+                              }
+                            </span>
+                          </RowValue>
+                        </Row>
+                      )}
+                    </RowGroup>
                   )}
-
                   {/* Spacer */}
                   <div className="h-1" />
                 </>
@@ -441,86 +290,35 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
               if (!quote?.trailsFeeBreakdown) return null
 
               // Check if provider fee is non-zero
-              const hasProviderFee =
-                quote.trailsFeeBreakdown.providerFee &&
-                parseFloat(
-                  quote.trailsFeeBreakdown.providerFee.usdValue?.replace(
-                    /[^0-9.-]/g,
-                    "",
-                  ) || "0",
-                ) !== 0
+              const hasProviderFee = (quote.providerUsd ?? 0) > 0
 
               // Check if trails fee is non-zero
-              const hasTrailsFee =
-                quote.trailsFeeBreakdown.trailsFee &&
-                parseFloat(
-                  quote.trailsFeeBreakdown.trailsFee.usdValue?.replace(
-                    /[^0-9.-]/g,
-                    "",
-                  ) || "0",
-                ) !== 0
+              const hasTrailsFee = (quote.trailsUsd ?? 0) > 0
 
               if (!hasProviderFee && !hasTrailsFee) return null
 
               return (
-                <>
-                  {/* Bridge/Swap Provider Fee */}
-
-                  {/* All Provider Costs */}
-                  {(hasProviderFee || hasTrailsFee) &&
+                <RowGroup>
+                  {/* All Provider Fees = provider fee + swap fee */}
+                  {((quote.providerUsd ?? 0) > 0 ||
+                    (quote.swapFeesUsd ?? 0) > 0) &&
+                    quote.allProviderFeesUsdDisplay &&
                     (() => {
-                      const providerUsd = parseFloat(
-                        quote.trailsFeeBreakdown.providerFee?.usdValue?.replace(
-                          /[^0-9.-]/g,
-                          "",
-                        ) || "0",
-                      )
-                      const trailsUsd = parseFloat(
-                        quote.trailsFeeBreakdown.trailsFee?.usdValue?.replace(
-                          /[^0-9.-]/g,
-                          "",
-                        ) || "0",
-                      )
-
-                      // Calculate swap fees
-                      const originUsd = parseFloat(
-                        quote.originAmountUsdDisplay?.replace(
-                          /[^0-9.-]/g,
-                          "",
-                        ) || "0",
-                      )
-                      const destUsd = parseFloat(
-                        quote.destinationAmountUsdDisplay?.replace(
-                          /[^0-9.-]/g,
-                          "",
-                        ) || "0",
-                      )
-                      const totalFeesUsd = parseFloat(
-                        quote.fees?.totalFeeAmountUsdDisplay?.replace(
-                          /[^0-9.-]/g,
-                          "",
-                        ) || "0",
-                      )
-                      const swapFeesUsd = Math.max(
-                        0,
-                        originUsd - destUsd - totalFeesUsd,
-                      )
-
-                      const totalProviderUsd =
-                        providerUsd + trailsUsd + swapFeesUsd
+                      const allProviderFees =
+                        (quote.providerUsd ?? 0) + (quote.swapFeesUsd ?? 0)
+                      if (allProviderFees <= 0) return null
 
                       return (
-                        <div className="flex justify-between items-center">
-                          <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
-                            All provider costs
-                            <Tooltip message="Total fees charged by providers, including bridge/swap, platform fees, and implicit swap costs">
-                              <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                            </Tooltip>
-                          </span>
-                          <span className="font-medium text-xs text-gray-600 dark:text-gray-400">
-                            {formatUsdAmountDisplay(totalProviderUsd)}
-                          </span>
-                        </div>
+                        <Row>
+                          <RowLabel tooltip="Total provider fees including bridge fees and swap fees">
+                            All provider fees
+                          </RowLabel>
+                          <RowValue>
+                            <span title={`$${quote.allProviderFeesUsd ?? 0}`}>
+                              {quote.allProviderFeesUsdDisplay}
+                            </span>
+                          </RowValue>
+                        </Row>
                       )
                     })()}
 
@@ -533,8 +331,8 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                       const providerName = quote.quoteProvider?.name || ""
 
                       return (
-                        <div className="flex justify-between items-center">
-                          <span className="text-xs text-gray-400 dark:text-gray-600 flex items-center gap-1">
+                        <Row variant="light">
+                          <RowLabel tooltip="Fee charged by the bridge/swap provider for executing the transaction">
                             {isCrossChain ? (
                               providerName ? (
                                 <>
@@ -548,20 +346,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                                       className="hover:underline inline-flex items-center gap-0.5 text-blue-500"
                                     >
                                       {providerName}
-                                      <svg
-                                        className="w-3 h-3"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        viewBox="0 0 24 24"
-                                        aria-hidden="true"
-                                      >
-                                        <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>
+                                      <ExternalLink className="size-3" />
                                     </a>
                                     )
                                   </span>
@@ -581,20 +366,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                                     className="hover:underline inline-flex items-center gap-0.5 text-blue-500"
                                   >
                                     {providerName}
-                                    <svg
-                                      className="w-3 h-3"
-                                      fill="none"
-                                      stroke="currentColor"
-                                      viewBox="0 0 24 24"
-                                      aria-hidden="true"
-                                    >
-                                      <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>
+                                    <ExternalLink className="size-3" />
                                   </a>
                                   )
                                 </span>
@@ -602,56 +374,37 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                             ) : (
                               <>Liquidity Provider</>
                             )}
-                            <Tooltip message="Fee charged by the bridge/swap provider for executing the transaction">
-                              <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                            </Tooltip>
-                          </span>
-                          <span className="font-medium text-xs text-gray-400 dark:text-gray-600">
-                            {providerFee.usdValue}
-                          </span>
-                        </div>
+                          </RowLabel>
+                          <RowValue>
+                            <span title={`$${quote.providerUsd ?? 0}`}>
+                              {providerFee.usdValue}
+                            </span>
+                          </RowValue>
+                        </Row>
                       )
                     })()}
 
                   {/* Swap Fees (implicit costs) */}
-                  {(() => {
-                    // Calculate swap fees: (originAmount - destinationAmount) - totalFees
-                    const originUsd = parseFloat(
-                      quote.originAmountUsdDisplay?.replace(/[^0-9.-]/g, "") ||
-                        "0",
-                    )
-                    const destUsd = parseFloat(
-                      quote.destinationAmountUsdDisplay?.replace(
-                        /[^0-9.-]/g,
-                        "",
-                      ) || "0",
-                    )
-                    const totalFeesUsd = parseFloat(
-                      quote.fees?.totalFeeAmountUsdDisplay?.replace(
-                        /[^0-9.-]/g,
-                        "",
-                      ) || "0",
-                    )
-
-                    const swapFeesUsd = originUsd - destUsd - totalFeesUsd
+                  {quote.swapFeesUsdDisplay &&
+                    (() => {
+                      const swapFeesUsd = quote.swapFeesUsd ?? 0
 
-                    // Only show if swap fees > 0
-                    if (swapFeesUsd <= 0) return null
+                      // Only show if swap fees > 0
+                      if (swapFeesUsd <= 0) return null
 
-                    return (
-                      <div className="flex justify-between items-center">
-                        <span className="text-xs text-gray-400 dark:text-gray-600 flex items-center gap-1">
-                          Swap
-                          <Tooltip message="Implicit costs including DEX fees, liquidity provider fees, and routing costs">
-                            <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                          </Tooltip>
-                        </span>
-                        <span className="font-medium text-xs text-gray-400 dark:text-gray-600">
-                          {formatUsdAmountDisplay(swapFeesUsd)}
-                        </span>
-                      </div>
-                    )
-                  })()}
+                      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 &&
@@ -660,20 +413,15 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                       const trailsFee = quote.trailsFeeBreakdown.trailsFee
 
                       return (
-                        <div className="flex justify-between items-center">
-                          <span className="text-xs text-gray-400 dark:text-gray-600 flex items-center gap-1">
+                        <Row variant="light">
+                          <RowLabel tooltip="Platform fee for using the Trails service">
                             Trails
-                            <Tooltip message="Platform fee for using the Trails service">
-                              <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                            </Tooltip>
-                          </span>
-                          <span className="font-medium text-xs text-gray-400 dark:text-gray-600">
-                            {trailsFee.usdValue}
-                          </span>
-                        </div>
+                          </RowLabel>
+                          <RowValue>{trailsFee.usdValue}</RowValue>
+                        </Row>
                       )
                     })()}
-                </>
+                </RowGroup>
               )
             })()}
 
@@ -693,20 +441,16 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
               if (!showSection) return null
 
               return (
-                <>
-                  <div>
-                    <span className="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-1">
-                      Transaction details
-                    </span>
-                  </div>
+                <RowGroup>
+                  <Row variant="bold">
+                    <RowLabel>Transaction details</RowLabel>
+                  </Row>
 
                   {/* Intent ID */}
                   {hasIntentId && (
-                    <div className="flex justify-between items-center gap-2">
-                      <span className="text-xs text-gray-600 dark:text-gray-400">
-                        Intent ID
-                      </span>
-                      <div className="flex items-center gap-1 text-xs font-medium text-gray-600 dark:text-gray-400">
+                    <Row className="gap-2">
+                      <RowLabel>Intent ID</RowLabel>
+                      <RowValue className="flex items-center gap-1">
                         <span title={quote.intentId ?? undefined}>
                           {truncateAddress(quote?.intentId ?? "", 9, 3)}
                         </span>
@@ -717,42 +461,34 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                           aria-label="Copy intent ID"
                         >
                           {intentIdCopied ? (
-                            <Check className="w-3 h-3 text-emerald-500" />
+                            <Check className="size-3 text-emerald-500" />
                           ) : (
-                            <Copy className="w-3 h-3 text-gray-500 dark:text-gray-400" />
+                            <Copy className="size-3 text-gray-500 dark:text-gray-400" />
                           )}
                         </button>
-                      </div>
-                    </div>
+                      </RowValue>
+                    </Row>
                   )}
 
                   {/* Max Slippage */}
                   {hasSlippage && (
-                    <div className="flex justify-between items-center">
-                      <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
+                    <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
-                        <Tooltip message="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.">
-                          <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                        </Tooltip>
-                      </span>
-                      <span className="font-medium text-xs text-gray-600 dark:text-gray-400">
-                        {quote.slippageTolerance}%
-                      </span>
-                    </div>
+                      </RowLabel>
+                      <RowValue>{quote.slippageTolerance}%</RowValue>
+                    </Row>
                   )}
 
                   {/* Price Impact */}
                   {hasPriceImpact && (
                     <div className="space-y-1">
-                      <div className="flex justify-between items-center">
-                        <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-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
-                          <Tooltip message="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.">
-                            <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                          </Tooltip>
-                        </span>
-                        <span
-                          className={`font-medium text-xs flex items-center gap-1 ${
+                        </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
@@ -762,25 +498,12 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                         >
                           {Math.abs(Number(quote.priceImpact)) > 0.5 && (
                             <span title="High price impact">
-                              <svg
-                                className="w-3 h-3"
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
-                                aria-hidden="true"
-                              >
-                                <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>
+                              <TriangleAlert className="size-3" />
                             </span>
                           )}
                           {quote.priceImpact}%
-                        </span>
-                      </div>
+                        </RowValue>
+                      </Row>
                       {quote.priceImpactUsdDisplay && (
                         <div className="text-right">
                           <span className="text-xs text-gray-500 dark:text-gray-400">
@@ -790,284 +513,252 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                       )}
                     </div>
                   )}
-                </>
+                </RowGroup>
               )
             })()}
 
             <div className="space-y-3 pt-2">
               {/* Exchange Rate */}
-              {quote?.originTokenRate && quote?.destinationTokenRate && (
-                <div className="flex justify-between items-center">
-                  <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
+              {quote?.originTokenRate &&
+              quote?.destinationTokenRate &&
+              quote.originTokenRate !== "0" &&
+              quote.destinationTokenRate !== "0" ? (
+                <Row>
+                  <RowLabel tooltip="The current exchange rate between the origin and destination tokens">
                     Exchange Rate
-                    <Tooltip message="The current exchange rate between the origin and destination tokens">
-                      <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                    </Tooltip>
-                  </span>
-                  <button
-                    type="button"
-                    onClick={() => setShowOriginRate(!showOriginRate)}
-                    className="font-medium text-xs hover:underline cursor-pointer text-gray-600 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
-                  >
-                    {showOriginRate
-                      ? quote.originTokenRate
-                      : quote.destinationTokenRate}
-                  </button>
-                </div>
-              )}
-
-              {/* Origin Transfer Amount */}
-              {quote?.originAmount &&
+                  </RowLabel>
+                  <RowValue>
+                    <button
+                      type="button"
+                      onClick={() => setShowOriginRate(!showOriginRate)}
+                      className="hover:underline cursor-pointer"
+                    >
+                      {showOriginRate
+                        ? quote.originTokenRate
+                        : quote.destinationTokenRate}
+                    </button>
+                  </RowValue>
+                </Row>
+              ) : null}
+
+              {/* Transfer Amounts Group */}
+              {((quote?.originAmount &&
                 quote?.originToken.symbol &&
-                quote?.originChain.id && (
-                  <div className="flex justify-between items-start">
-                    <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
-                      Origin Transfer Amount
-                      <Tooltip message="The amount of tokens you will send from the origin chain">
-                        <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                      </Tooltip>
-                    </span>
-                    <div className="text-right">
-                      {quote.originToken.contractAddress ===
-                      "0x0000000000000000000000000000000000000000" ? (
-                        <>
-                          <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.originAmountDisplay}{" "}
-                            {quote.originToken.symbol}
-                          </div>
-                          {quote.originAmountUsdDisplay && (
-                            <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-                              ≈ {quote.originAmountUsdDisplay}
-                            </div>
+                quote?.originChain.id) ||
+                (quote?.destinationToken.symbol &&
+                  quote?.destinationAmount &&
+                  quote?.destinationAmountUsdDisplay &&
+                  quote?.destinationChain.id)) && (
+                <RowGroup>
+                  {quote?.originAmount &&
+                    quote?.originToken.symbol &&
+                    quote?.originChain.id && (
+                      <Row className="items-start">
+                        <RowLabel tooltip="The amount of tokens you will send from the origin chain">
+                          Origin Transfer Amount
+                        </RowLabel>
+                        <div className="text-right">
+                          {quote.originToken.contractAddress ===
+                          "0x0000000000000000000000000000000000000000" ? (
+                            <>
+                              <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.originAmountDisplay}{" "}
+                                {quote.originToken.symbol}
+                              </div>
+                              {quote.originAmountUsdDisplay && (
+                                <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                                  ≈ {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.originAmountDisplay}{" "}
+                                  {quote.originToken.symbol}
+                                </div>
+                              </a>
+                              {quote.originAmountUsdDisplay && (
+                                <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                                  ≈ {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.originAmountDisplay}{" "}
-                              {quote.originToken.symbol}
-                            </div>
-                          </a>
-                          {quote.originAmountUsdDisplay && (
-                            <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-                              ≈ {quote.originAmountUsdDisplay}
-                            </div>
+                        </div>
+                      </Row>
+                    )}
+
+                  {quote?.destinationToken.symbol &&
+                    quote?.destinationAmount &&
+                    quote?.destinationAmountUsdDisplay &&
+                    quote?.destinationChain.id && (
+                      <Row className="items-start">
+                        <RowLabel tooltip="The amount of tokens you will receive on the destination chain after the swap and/or bridge">
+                          Destination Target Amount
+                        </RowLabel>
+                        <div className="text-right">
+                          {quote.destinationToken.contractAddress ===
+                          "0x0000000000000000000000000000000000000000" ? (
+                            <>
+                              <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.destinationAmountDisplay}{" "}
+                                {quote.destinationToken.symbol}
+                              </div>
+                              {quote.destinationAmountUsdDisplay && (
+                                <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                                  ≈ {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.destinationAmountDisplay}{" "}
+                                  {quote.destinationToken.symbol}
+                                </div>
+                              </a>
+                              {quote.destinationAmountUsdDisplay && (
+                                <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                                  ≈ {quote.destinationAmountUsdDisplay}
+                                </div>
+                              )}
+                            </>
                           )}
-                        </>
-                      )}
-                    </div>
-                  </div>
-                )}
+                        </div>
+                      </Row>
+                    )}
+                </RowGroup>
+              )}
 
-              {/* Destination Target Amount */}
-              {quote?.destinationToken.symbol &&
-                quote?.destinationAmount &&
-                quote?.destinationAmountUsdDisplay &&
-                quote?.destinationChain.id && (
-                  <div className="flex justify-between items-start">
-                    <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
-                      Destination Target Amount
-                      <Tooltip message="The amount of tokens you will receive on the destination chain after the swap and/or bridge">
-                        <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                      </Tooltip>
-                    </span>
-                    <div className="text-right">
-                      {quote.destinationToken.contractAddress ===
-                      "0x0000000000000000000000000000000000000000" ? (
-                        <>
-                          <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.destinationAmountDisplay}{" "}
-                            {quote.destinationToken.symbol}
-                          </div>
-                          {quote.destinationAmountUsdDisplay && (
-                            <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-                              ≈ {quote.destinationAmountUsdDisplay}
-                            </div>
-                          )}
-                        </>
-                      ) : (
-                        <>
+              {/* Address Group */}
+              {(quote?.originDepositAddress ||
+                quote?.destinationDepositAddress ||
+                quote?.destinationAddress) && (
+                <RowGroup>
+                  {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.destinationToken.contractAddress,
+                              address: quote.destinationDepositAddress,
                               chainId: quote.destinationChain.id,
                             })}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="hover:underline cursor-pointer"
+                            className="font-mono text-xs hover:underline flex items-center gap-1 text-blue-500"
                           >
-                            <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.destinationAmountDisplay}{" "}
-                              {quote.destinationToken.symbol}
-                            </div>
+                            {truncateAddress(quote.destinationDepositAddress)}
+                            <ExternalLink className="size-3" />
                           </a>
-                          {quote.destinationAmountUsdDisplay && (
-                            <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-                              ≈ {quote.destinationAmountUsdDisplay}
-                            </div>
-                          )}
-                        </>
-                      )}
-                    </div>
-                  </div>
-                )}
-
-              {/* Origin Deposit Address */}
-              {quote?.originDepositAddress && (
-                <div className="flex justify-between items-center">
-                  <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
-                    Origin Deposit Address
-                    <Tooltip message="This is the intent address to deposit to that will then execute the swap and/or bridge">
-                      <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                    </Tooltip>
-                  </span>
-                  <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)}
-                    <svg
-                      className="w-3 h-3"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                      aria-hidden="true"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                      />
-                    </svg>
-                  </a>
-                </div>
-              )}
-
-              {/* Destination Deposit Address */}
-              {quote?.destinationDepositAddress &&
-                quote?.destinationDepositAddress !==
-                  quote?.originDepositAddress && (
-                  <div className="flex justify-between items-center">
-                    <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
-                      Destination Deposit Address
-                      <Tooltip message="This is the address that will receive the tokens after any swap and/or bridge from the origin chain">
-                        <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                      </Tooltip>
-                    </span>
-                    <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)}
-                      <svg
-                        className="w-3 h-3"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        aria-hidden="true"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                        />
-                      </svg>
-                    </a>
-                  </div>
-                )}
-
-              {/* Destination Target Address */}
-              {quote?.destinationAddress && (
-                <div className="flex justify-between items-center">
-                  <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
-                    Destination Target Address
-                    <Tooltip message="This is the final execution address or recipient address">
-                      <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                    </Tooltip>
-                  </span>
-                  <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)}
-                    <svg
-                      className="w-3 h-3"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                      aria-hidden="true"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                      />
-                    </svg>
-                  </a>
-                </div>
+                        </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 */}
@@ -1099,22 +790,11 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                     <span className="text-[10px]">
                       Includes custom destination calldata
                     </span>
-                    <svg
-                      className={`w-3 h-3 transition-transform duration-300 ease-out ${
+                    <ChevronDown
+                      className={`size-3 transition-transform duration-300 ease-out ${
                         showCalldata ? "rotate-180" : ""
                       }`}
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                      aria-hidden="true"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M19 9l-7 7-7-7"
-                      />
-                    </svg>
+                    />
                   </button>
                   <div
                     ref={calldataRef}
@@ -1148,3 +828,68 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
 }
 
 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>
+}