0xtrails 0.2.5 → 0.3.0

package/src/widget/components/QuoteDetails.tsx

@@ -1,5 +1,7 @@
 import { TokenImage } from "./TokenImage.js"
-import { InfoIcon, Tooltip } from "@0xsequence/design-system"
+import { ChainImage } from "./ChainImage.js"
+import { InfoIcon } from "@0xsequence/design-system"
+import { Tooltip } from "./Tooltip.js"
 import type React from "react"
 import { getExplorerUrlForAddress } from "../../explorer.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
@@ -7,6 +9,7 @@ import { useState, useEffect, useRef } from "react"
 import { truncateAddress } from "../../utils.js"
 import { PriceImpactWarning } from "./PriceImpactWarning.js"
 import { usePriceImpactWarning } from "../hooks/usePriceImpactWarning.js"
+import { formatUsdAmountDisplay } from "../../tokenBalances.js"
 
 interface QuoteDetailsProps {
   quote?: PrepareSendQuote | null
@@ -14,6 +17,8 @@ interface QuoteDetailsProps {
   children?: React.ReactNode
   onExpand?: (isExpanded: boolean) => void
   swapMode?: boolean
+  compact?: boolean
+  isRefetching?: boolean
 }
 
 // Helper function to format completion time
@@ -44,12 +49,16 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
   children,
   onExpand,
   swapMode,
+  compact = false,
+  isRefetching = false,
 }) => {
   const [showCalldata, setShowCalldata] = useState(false)
   const [showOriginRate, setShowOriginRate] = useState(true)
   const [isExpanded, setIsExpanded] = useState(false)
+  const [showMoreInfo, setShowMoreInfo] = useState(false)
   const containerRef = useRef<HTMLDivElement>(null)
   const calldataRef = useRef<HTMLDivElement>(null)
+  const moreInfoRef = useRef<HTMLDivElement>(null)
 
   const priceImpactConfig = usePriceImpactWarning()
 
@@ -72,7 +81,9 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
   if (!showContent) return null
 
   return (
-    <div className="relative">
+    <div
+      className={`relative transition-opacity duration-300 ${isRefetching ? "opacity-50" : ""}`}
+    >
       {/* Price Impact Warning - always visible when conditions are met */}
       <PriceImpactWarning
         quote={quote}
@@ -81,6 +92,35 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
         fallbackBridgeUrl={priceImpactConfig.fallbackBridgeUrl}
       />
 
+      {/* Insufficient Balance Warning - always visible when conditions are met */}
+      {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">
+              <InfoIcon className="w-3 h-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>
+            Insufficient Balance
+          </span>
+        </div>
+      )}
+
       {/* More Details Button - only visible when collapsed */}
       {!isExpanded && (
         <div className={`flex justify-center`}>
@@ -88,7 +128,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
             <button
               type="button"
               onClick={() => setIsExpanded(true)}
-              className="w-full flex items-center justify-between py-2 px-4 trails-border-radius-button transition-colors cursor-pointer text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-600"
+              className="w-full flex items-center justify-between py-2 px-4 trails-border-radius-button transition-colors cursor-pointer text-xs"
               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">
@@ -161,7 +201,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
             <button
               type="button"
               onClick={() => setIsExpanded(true)}
-              className="w-full max-w-md flex items-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"
+              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>
@@ -195,9 +235,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
           className={`text-sm ${swapMode ? "p-2 space-y-2" : "p-4 rounded-lg space-y-4 trails-bg-secondary"}`}
         >
           {/* Close Button - only visible when expanded, at top center */}
-          <div
-            className={`flex justify-center ${swapMode ? "mb-2 -mt-1" : "mb-4 -mt-2"}`}
-          >
+          <div className={`flex justify-center mb-4 -mt-2`}>
             {swapMode ? (
               <button
                 type="button"
@@ -246,54 +284,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
             )}
           </div>
           <div className="space-y-3">
-            {/* Insufficient Balance Warning */}
-            {quote?.noSufficientBalance && (
-              <div className="flex justify-between items-center">
-                <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">
-                    <InfoIcon className="w-3 h-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>
-                  Insufficient Balance
-                </span>
-              </div>
-            )}
-
-            {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">
-                  Exchange Rate:
-                  <Tooltip message="The current exchange rate between the origin and destination tokens">
-                    <InfoIcon 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-900 hover:text-gray-700 dark:text-white dark:hover:text-gray-300"
-                >
-                  {showOriginRate
-                    ? quote.originTokenRate
-                    : quote.destinationTokenRate}
-                </button>
-              </div>
-            )}
+            {/* Estimated Time */}
             {quote?.completionEstimateSeconds != null && (
               <div className="flex justify-between items-center">
                 <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
@@ -322,465 +313,896 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
               </div>
             )}
 
-            {quote?.gasCostUsd != null && quote?.gasCostUsd > 0 && (
-              <div className="flex justify-between items-center">
-                <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
-                  Network Cost:
-                  <Tooltip message="The estimated gas cost for executing this transaction on the origin chain">
-                    <InfoIcon className="w-3 h-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
-                    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"
-                    ></path>
-                  </svg>
-                  {quote.gasCostUsdDisplay}
-                </span>
-              </div>
-            )}
+            {/* Spacer */}
+            <div className="h-2" />
 
-            {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">
-                      <InfoIcon 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-900 dark:text-white 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}
+            {/* Gas Costs Section */}
+            {quote?.trailsFeeBreakdown &&
+              (quote?.trailsFeeBreakdown.originRelayFee ||
+                quote?.trailsFeeBreakdown.destinationRelayFee) && (
+                <>
+                  {/* Origin Gas */}
+                  {quote.trailsFeeBreakdown.originRelayFee && (
+                    <div className="flex justify-between items-center">
+                      <span className="text-xs text-gray-600 dark:text-gray-400 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">
+                          <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
+                        </Tooltip>
+                      </span>
+                      <span className="font-medium text-xs text-gray-900 dark:text-white">
+                        {quote.trailsFeeBreakdown.originRelayFee.usdValue}
+                      </span>
+                    </div>
+                  )}
+
+                  {/* Destination Gas */}
+                  {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">
+                        Destination Gas
+                        <ChainImage
+                          chainId={quote.destinationChain.id}
+                          size={16}
+                        />
+                        :
+                        <Tooltip message="Gas fee for executing the transaction on the destination chain">
+                          <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
+                        </Tooltip>
+                      </span>
+                      <span className="font-medium text-xs text-gray-900 dark:text-white">
+                        {quote.trailsFeeBreakdown.destinationRelayFee.usdValue}
+                      </span>
+                    </div>
+                  )}
+
+                  {/* All Gas Costs */}
+                  {(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">
+                          <InfoIcon className="w-3 h-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 pt-2 border-t border-gray-200 dark:border-gray-700">
+                        <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"
                           />
-                          {quote.originAmountDisplay} {quote.originToken.symbol}
+                        </svg>
+                        {(() => {
+                          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>
+                  )}
+
+                  {/* Spacer */}
+                  <div className="h-2" />
+                </>
+              )}
+
+            {/* Provider Costs Section */}
+            {(() => {
+              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
+
+              // Check if trails fee is non-zero
+              const hasTrailsFee =
+                quote.trailsFeeBreakdown.trailsFee &&
+                parseFloat(
+                  quote.trailsFeeBreakdown.trailsFee.usdValue?.replace(
+                    /[^0-9.-]/g,
+                    "",
+                  ) || "0",
+                ) !== 0
+
+              if (!hasProviderFee && !hasTrailsFee) return null
+
+              return (
+                <>
+                  {/* Bridge/Swap Provider Fee */}
+                  {hasProviderFee &&
+                    quote.trailsFeeBreakdown.providerFee &&
+                    (() => {
+                      const providerFee = quote.trailsFeeBreakdown.providerFee
+                      const isCrossChain =
+                        quote.originChain.id !== quote.destinationChain.id
+                      const providerName = quote.quoteProvider?.name || ""
+
+                      return (
+                        <div className="flex justify-between items-center">
+                          <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
+                            {isCrossChain ? (
+                              providerName ? (
+                                <>
+                                  Bridge (
+                                  <a
+                                    href={quote.quoteProvider?.url}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="hover:underline flex items-center gap-0.5"
+                                  >
+                                    {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>
+                                  </a>
+                                  ):
+                                </>
+                              ) : (
+                                <>Bridge:</>
+                              )
+                            ) : providerName ? (
+                              <>
+                                Liquidity Provider (
+                                <a
+                                  href={quote.quoteProvider?.url}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  className="hover:underline flex items-center gap-0.5"
+                                >
+                                  {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>
+                                </a>
+                                ):
+                              </>
+                            ) : (
+                              <>Liquidity Provider:</>
+                            )}
+                            <Tooltip message="Fee charged by the bridge/swap provider for executing the transaction">
+                              <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
+                            </Tooltip>
+                          </span>
+                          <span className="font-medium text-xs text-gray-900 dark:text-white">
+                            {providerFee.usdValue}
+                          </span>
                         </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"
+                      )
+                    })()}
+
+                  {/* 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
+
+                    // 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-600 dark:text-gray-400 flex items-center gap-1">
+                          Swap:
+                          <Tooltip message="Implicit costs including DEX fees, liquidity provider fees, and routing costs">
+                            <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
+                          </Tooltip>
+                        </span>
+                        <span className="font-medium text-xs text-gray-900 dark:text-white">
+                          {formatUsdAmountDisplay(swapFeesUsd)}
+                        </span>
+                      </div>
+                    )
+                  })()}
+
+                  {/* Trails Platform Fee */}
+                  {hasTrailsFee &&
+                    quote.trailsFeeBreakdown.trailsFee &&
+                    (() => {
+                      const trailsFee = quote.trailsFeeBreakdown.trailsFee
+
+                      return (
+                        <div className="flex justify-between items-center">
+                          <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
+                            Trails:
+                            <Tooltip message="Platform fee for using the Trails service">
+                              <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
+                            </Tooltip>
+                          </span>
+                          <span className="font-medium text-xs text-gray-900 dark:text-white">
+                            {trailsFee.usdValue}
+                          </span>
+                        </div>
+                      )
+                    })()}
+
+                  {/* All Provider Costs */}
+                  {(hasProviderFee || hasTrailsFee) &&
+                    (() => {
+                      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
+
+                      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">
+                              <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
+                            </Tooltip>
+                          </span>
+                          <span className="font-medium text-xs text-gray-900 dark:text-white pt-2 border-t border-gray-200 dark:border-gray-700">
+                            {formatUsdAmountDisplay(totalProviderUsd)}
+                          </span>
+                        </div>
+                      )
+                    })()}
+
+                  {/* Spacer */}
+                  <div className="h-2" />
+
+                  {/* 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-xs font-semibold text-gray-700 dark:text-gray-300 flex items-center gap-1">
+                          Total fees:
+                          <Tooltip message="The total fees for this transaction, including gas costs and all provider fees">
+                            <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
+                          </Tooltip>
+                        </span>
+                        <span className="font-semibold text-xs text-gray-900 dark:text-white">
+                          ≈ {formatUsdAmountDisplay(grandTotalUsd)}
+                        </span>
+                      </div>
+                    )
+                  })()}
+
+                  {/* Spacer */}
+                  <div className="h-2" />
+                </>
+              )
+            })()}
+
+            {/* Transaction Details Section */}
+            {(() => {
+              const hasSlippage =
+                quote?.slippageTolerance != null &&
+                Number(quote.slippageTolerance) !== 0
+              const hasPriceImpact =
+                quote?.priceImpact != null && Number(quote.priceImpact) !== 0
+              const showSection = hasSlippage || hasPriceImpact
+
+              if (!showSection) return null
+
+              return (
+                <>
+                  <div className="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2 text-center">
+                    Transaction details
+                  </div>
+
+                  {/* 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">
+                        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.">
+                          <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
+                        </Tooltip>
+                      </span>
+                      <span className="font-medium text-xs text-gray-900 dark:text-white">
+                        {quote.slippageTolerance}%
+                      </span>
+                    </div>
+                  )}
+
+                  {/* 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">
+                          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.">
+                            <InfoIcon 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 ${
+                            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-900 dark:text-white"
+                          }`}
                         >
-                          <div className="font-medium text-xs text-gray-900 dark:text-white 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>
-                        )}
-                      </>
+                          {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>
+                            </span>
+                          )}
+                          {quote.priceImpact}%
+                        </span>
+                      </div>
+                      {quote.priceImpactUsdDisplay && (
+                        <div className="text-right">
+                          <span className="text-xs text-gray-500 dark:text-gray-400">
+                            ≈ {quote.priceImpactUsdDisplay}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </>
+              )
+            })()}
+
+            {/* More Info Section */}
+            <div className="space-y-2">
+              <button
+                type="button"
+                onClick={() => {
+                  setShowMoreInfo(!showMoreInfo)
+                  if (!showMoreInfo) {
+                    setTimeout(() => {
+                      if (moreInfoRef.current) {
+                        moreInfoRef.current.scrollIntoView({
+                          behavior: "smooth",
+                          block: "nearest",
+                        })
+                      }
+                    }, 150)
+                  }
+                }}
+                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={showMoreInfo ? "Hide more info" : "Show more info"}
+              >
+                <span>More</span>
+                <svg
+                  className={`w-3 h-3 transition-transform duration-300 ease-out ${
+                    showMoreInfo ? "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={moreInfoRef}
+                className={`overflow-hidden transition-all duration-300 ease-out ${
+                  showMoreInfo
+                    ? "max-h-[500px] opacity-100"
+                    : "max-h-0 opacity-0"
+                }`}
+              >
+                <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">
+                        Exchange Rate:
+                        <Tooltip message="The current exchange rate between the origin and destination tokens">
+                          <InfoIcon 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-900 hover:text-gray-700 dark:text-white dark:hover:text-gray-300"
+                      >
+                        {showOriginRate
+                          ? quote.originTokenRate
+                          : quote.destinationTokenRate}
+                      </button>
+                    </div>
+                  )}
+
+                  {/* Origin Transfer Amount */}
+                  {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">
+                            <InfoIcon 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-900 dark:text-white 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-900 dark:text-white 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>
+                      </div>
                     )}
-                  </div>
-                </div>
-              )}
 
-            {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">
-                      <InfoIcon 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-900 dark:text-white 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}
+                  {/* 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">
+                            <InfoIcon 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-900 dark:text-white 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-900 dark:text-white 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>
-                        {quote.destinationAmountUsdDisplay && (
-                          <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-                            ≈ {quote.destinationAmountUsdDisplay}
-                          </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">
+                          <InfoIcon 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-gray-700 dark:text-gray-300"
+                      >
+                        {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">
+                            <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
+                          </Tooltip>
+                        </span>
                         <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-gray-700 dark:text-gray-300"
                         >
-                          <div className="font-medium text-xs text-gray-900 dark:text-white 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}
+                          {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"
                             />
-                            {quote.destinationAmountDisplay}{" "}
-                            {quote.destinationToken.symbol}
-                          </div>
+                          </svg>
                         </a>
-                        {quote.destinationAmountUsdDisplay && (
-                          <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-                            ≈ {quote.destinationAmountUsdDisplay}
-                          </div>
-                        )}
-                      </>
+                      </div>
                     )}
-                  </div>
-                </div>
-              )}
-
-            {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">
-                    <InfoIcon 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-gray-700 dark:text-gray-300"
-                >
-                  {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>
-            )}
-
-            {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">
-                      <InfoIcon 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-gray-700 dark:text-gray-300"
-                  >
-                    {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>
-              )}
-
-            {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">
-                    <InfoIcon 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-gray-700 dark:text-gray-300"
-                >
-                  {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>
-            )}
 
-            {quote?.slippageTolerance != null && (
-              <div className="flex justify-between items-center">
-                <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
-                  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.">
-                    <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                  </Tooltip>
-                </span>
-                <span className="font-medium text-xs text-gray-900 dark:text-white">
-                  {quote.slippageTolerance}%
-                </span>
-              </div>
-            )}
-
-            {quote?.priceImpact != null &&
-              (() => {
-                const priceImpactNum = Math.abs(Number(quote.priceImpact))
-                return (
-                  <div className="space-y-1">
+                  {/* 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">
-                        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.">
+                        Destination Target Address:
+                        <Tooltip message="This is the final execution address or recipient address">
                           <InfoIcon 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 ${
-                          priceImpactNum > 5
-                            ? "text-red-600 dark:text-red-400"
-                            : priceImpactNum > 0.5
-                              ? "text-orange-600 dark:text-orange-400"
-                              : "text-gray-900 dark:text-white"
-                        }`}
+                      <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-gray-700 dark:text-gray-300"
                       >
-                        {priceImpactNum > 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>
-                          </span>
-                        )}
-                        {quote.priceImpact}%
-                      </span>
+                        {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>
-                    {quote.priceImpactUsdDisplay && (
-                      <div className="text-right">
-                        <span className="text-xs text-gray-500 dark:text-gray-400">
-                          ≈ {quote.priceImpactUsdDisplay}
+                  )}
+
+                  {/* Custom Calldata */}
+                  {quote?.destinationCalldata && (
+                    <div className="space-y-2">
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setShowCalldata(!showCalldata)
+                          // Auto-scroll to calldata when expanding
+                          if (!showCalldata) {
+                            setTimeout(() => {
+                              if (calldataRef.current) {
+                                calldataRef.current.scrollIntoView({
+                                  behavior: "smooth",
+                                  block: "nearest",
+                                })
+                              }
+                            }, 150) // Delay to let the expansion animation start
+                          }
+                        }}
+                        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>
+                        <svg
+                          className={`w-3 h-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}
+                        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>
-                )
-              })()}
-
-            {quote?.fees?.totalFeeAmountUsd != null && (
-              <div className="flex justify-between items-center">
-                <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
-                  Total Fees:
-                  <Tooltip message="The total fees charged for this transaction, including gas fees, bridge fees, and any platform fees. These fees are deducted from your transaction.">
-                    <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                  </Tooltip>
-                </span>
-                <span className="font-medium text-xs text-gray-900 dark:text-white">
-                  {quote.fees.totalFeeAmountUsdDisplay}
-                </span>
-              </div>
-            )}
-
-            {quote?.quoteProvider?.name && (
-              <div className="flex justify-between items-center">
-                <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
-                  {quote.originChain.id === quote.destinationChain.id
-                    ? "Swap Provider"
-                    : "Bridge"}
-                  :
-                  <Tooltip message="The service that fullfils the swap and/or bridge">
-                    <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                  </Tooltip>
-                </span>
-                <a
-                  href={quote.quoteProvider?.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="font-medium text-xs text-gray-900 dark:text-white hover:underline flex items-center gap-1"
-                >
-                  {quote.quoteProvider?.name}
-                  <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>
-            )}
+                    </div>
+                  )}
 
-            {quote?.destinationCalldata && (
-              <div className="space-y-2">
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShowCalldata(!showCalldata)
-                    // Auto-scroll to calldata when expanding
-                    if (!showCalldata) {
-                      setTimeout(() => {
-                        if (calldataRef.current) {
-                          calldataRef.current.scrollIntoView({
-                            behavior: "smooth",
-                            block: "nearest",
-                          })
-                        }
-                      }, 150) // Delay to let the expansion animation start
-                    }
-                  }}
-                  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>
-                  <svg
-                    className={`w-3 h-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}
-                  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>
+                  {/* Children content */}
+                  {children && <div className="mb-0">{children}</div>}
                 </div>
               </div>
-            )}
-
-            {/* Children content */}
-            {children && <div className="mb-0">{children}</div>}
+            </div>
           </div>
         </div>
       </div>