0xtrails 0.2.5 → 0.2.6

package/src/widget/components/PoolWithdraw.tsx

@@ -27,10 +27,12 @@ import { logger } from "../../logger.js"
 import { generateAaveWithdrawCalldata } from "../../aave.js"
 import { generateMorphoWithdrawCalldata } from "../../morpho.js"
 import { formatAmount } from "../../tokenBalances.js"
+import { useDynamicInputStyles } from "./DynamicInputStyles.js"
+import { TokenDisplayNonSelectable } from "./TokenDisplayNonSelectable.js"
 
 interface PoolWithdrawProps {
-  account: Account
-  walletClient: WalletClient
+  account?: Account
+  walletClient?: WalletClient
   onTransactionStateChange: (transactionStates: TransactionState[]) => void
   onError: (error: Error | string | null) => void
   onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
@@ -55,6 +57,7 @@ interface PoolWithdrawProps {
   recentTokens?: SupportedToken[]
   onRecentTokenSelect?: (token: SupportedToken) => void
   onTrackToken?: (token: any) => void
+  onPoolSelectorStateChange?: (isShowing: boolean) => void
 }
 
 export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
@@ -73,6 +76,7 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
   fundMethod,
   onNavigateToMeshConnect,
   checkoutOnHandlers,
+  onPoolSelectorStateChange,
 }) => {
   const { mode } = useMode()
   const { isBalanceVisible } = useBalanceVisible()
@@ -301,6 +305,13 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
 
   // Generate withdraw calldata dynamically based on user's entered amount
   const withdrawCalldata = useMemo(() => {
+    if (!account?.address) {
+      logger.console.log(
+        "[pool-withdraw] No account found, skipping calldata generation",
+      )
+      return undefined
+    }
+
     const isAave = selectedPool?.protocol === "Aave"
     const isMorpho = selectedPool?.protocol === "Morpho"
 
@@ -356,7 +367,7 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
       )
       return undefined
     }
-  }, [selectedPool, amount, account.address])
+  }, [selectedPool, amount, account?.address])
 
   // Convert pool to token format for useSendForm
   // For Aave, use the aToken address
@@ -539,6 +550,14 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
     }
   }, [])
 
+  // Notify parent component about pool selector visibility
+  useEffect(() => {
+    if (onPoolSelectorStateChange) {
+      // Only hide tabs when showing EarnPools selector
+      onPoolSelectorStateChange(showEarnPools)
+    }
+  }, [showEarnPools, onPoolSelectorStateChange])
+
   const handleAmountChange = (value: string) => {
     // Validate decimal places (max 8 decimals)
     const decimalMatch = value.match(/^\d*\.?\d{0,8}$/)
@@ -561,6 +580,17 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
     setSendFormAmount(selectedAmount)
   }
 
+  // Dynamic font size based on input length
+  const inputStyles = useDynamicInputStyles({
+    inputValue: amount,
+    variant: "default",
+  })
+
+  // Get chain info for selected pool
+  const chainInfo = useMemo(() => {
+    return selectedPool ? getChainInfo(selectedPool.chainId) : null
+  }, [selectedPool])
+
   if (showEarnPools) {
     return (
       <EarnPools
@@ -572,271 +602,222 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
 
   return (
     <div className="space-y-2">
-      <div className="space-y-1">
-        {/* Pool Selection (Primary Section) */}
-        <div className="trails-bg-secondary trails-border-radius-container transition-all duration-200 border border-transparent hover:!bg-white dark:hover:!bg-white hover:border-gray-400 dark:hover:border-gray-500">
-          {selectedPool ? (
-            <div className="p-3 trails-border-radius-container trails-bg-secondary transition-all overflow-hidden">
-              {/* Vault Label */}
-              <div className="flex justify-between items-center mb-2">
-                <div className="text-sm font-semibold trails-text-secondary text-left">
-                  Withdraw From
-                </div>
+      {/* Pool Selection (Primary Section) */}
+      <div className="trails-bg-secondary trails-border-radius-container transition-all duration-200 border border-transparent hover:!bg-white dark:hover:!bg-white hover:border-gray-400 dark:hover:border-gray-500">
+        {selectedPool ? (
+          <div className="p-3 trails-border-radius-container trails-bg-secondary transition-all overflow-hidden">
+            {/* Vault Label */}
+            <div className="flex justify-between items-center mb-2">
+              <div className="text-sm font-semibold trails-text-secondary text-left">
+                From
               </div>
+            </div>
 
-              <div className="px-1">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center space-x-3">
-                    <div style={{ width: "32px", height: "32px" }}>
-                      <a
-                        href={getExplorerUrlForAddress({
-                          address: selectedPool.token.address,
-                          chainId: selectedPool.chainId,
-                        })}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="cursor-pointer"
-                      >
-                        <TokenImage
-                          symbol={selectedPool.token.symbol}
-                          imageUrl={selectedPool.token.logoUrl}
-                          chainId={selectedPool.chainId}
-                          contractAddress={selectedPool.token.address}
-                          size={32}
-                        />
-                      </a>
-                    </div>
-                    <div>
-                      <h3 className="font-medium text-gray-900 dark:text-white text-sm">
-                        {selectedPool.poolUrl ? (
+            <div className="px-1">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-3">
+                  <div style={{ width: "32px", height: "32px" }}>
+                    <a
+                      href={getExplorerUrlForAddress({
+                        address: selectedPool.token.address,
+                        chainId: selectedPool.chainId,
+                      })}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="cursor-pointer"
+                    >
+                      <TokenImage
+                        symbol={selectedPool.token.symbol}
+                        imageUrl={selectedPool.token.logoUrl}
+                        chainId={selectedPool.chainId}
+                        contractAddress={selectedPool.token.address}
+                        size={32}
+                      />
+                    </a>
+                  </div>
+                  <div>
+                    <h3 className="font-medium text-gray-900 dark:text-white text-sm">
+                      {selectedPool.poolUrl ? (
+                        <a
+                          href={selectedPool.poolUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="hover:underline cursor-pointer"
+                        >
+                          {selectedPool.name}
+                        </a>
+                      ) : (
+                        selectedPool.name
+                      )}
+                    </h3>
+                    <div className="flex items-center space-x-2">
+                      <span className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
+                        {selectedPool.protocol === "Aave" && (
+                          <img
+                            src={aaveLogo}
+                            alt="Aave"
+                            className="w-3 h-3 mr-1"
+                          />
+                        )}
+                        {selectedPool.protocol === "Morpho" && (
+                          <img
+                            src={morphoLogo}
+                            alt="Morpho"
+                            className="w-3 h-3 mr-1"
+                          />
+                        )}
+                        {selectedPool.protocolUrl ? (
                           <a
-                            href={selectedPool.poolUrl}
+                            href={selectedPool.protocolUrl}
                             target="_blank"
                             rel="noopener noreferrer"
                             className="hover:underline cursor-pointer"
                           >
-                            {selectedPool.name}
+                            {selectedPool.protocol}
                           </a>
                         ) : (
-                          selectedPool.name
+                          selectedPool.protocol
                         )}
-                      </h3>
-                      <div className="flex items-center space-x-2">
-                        <span className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
-                          {selectedPool.protocol === "Aave" && (
-                            <img
-                              src={aaveLogo}
-                              alt="Aave"
-                              className="w-3 h-3 mr-1"
-                            />
-                          )}
-                          {selectedPool.protocol === "Morpho" && (
-                            <img
-                              src={morphoLogo}
-                              alt="Morpho"
-                              className="w-3 h-3 mr-1"
-                            />
-                          )}
-                          {selectedPool.protocolUrl ? (
-                            <a
-                              href={selectedPool.protocolUrl}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              className="hover:underline cursor-pointer"
-                            >
-                              {selectedPool.protocol}
-                            </a>
-                          ) : (
-                            selectedPool.protocol
-                          )}
-                        </span>
-                      </div>
+                      </span>
                     </div>
                   </div>
-                  <button
-                    type="button"
-                    title="Select Vault"
-                    onClick={() => setShowEarnPools(true)}
-                    className="text-right flex items-center space-x-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition-colors"
-                  >
-                    <div>
-                      <div className="flex items-center justify-end space-x-1 text-green-600 dark:text-green-400 mb-1 whitespace-nowrap">
-                        <TrendingUp className="w-3 h-3" />
-                        <span className="font-semibold text-sm">
-                          {selectedPool.apy.toFixed(1)}% APY
-                        </span>
-                      </div>
-                      <p className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
-                        TVL: {formatTvl(selectedPool.tvl)}
-                      </p>
-                    </div>
-                    <ChevronRight className="w-4 h-4 text-gray-400" />
-                  </button>
                 </div>
+                <button
+                  type="button"
+                  title="Select Vault"
+                  onClick={() => setShowEarnPools(true)}
+                  className="text-right flex items-center space-x-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition-colors"
+                >
+                  <div>
+                    <div className="flex items-center justify-end space-x-1 text-green-600 dark:text-green-400 mb-1 whitespace-nowrap">
+                      <TrendingUp className="w-3 h-3" />
+                      <span className="font-semibold text-sm">
+                        {selectedPool.apy.toFixed(1)}% APY
+                      </span>
+                    </div>
+                    <p className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                      TVL: {formatTvl(selectedPool.tvl)}
+                    </p>
+                  </div>
+                  <ChevronRight className="w-4 h-4 text-gray-400" />
+                </button>
               </div>
             </div>
-          ) : (
-            <button
-              type="button"
-              onClick={() => setShowEarnPools(true)}
-              className="w-full py-6 px-4 trails-list-item trails-border-radius-container transition-all duration-200 cursor-pointer"
-            >
-              <div className="flex items-center justify-between">
-                <div className="flex items-center space-x-3 flex-1">
-                  <div className="w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
-                    <Search className="w-4 h-4 text-gray-400" />
-                  </div>
-                  <div className="text-left flex-1">
-                    <div className="font-semibold text-gray-900 dark:text-white text-sm">
-                      Select vault to withdraw from
-                    </div>
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={() => setShowEarnPools(true)}
+            className="w-full py-6 px-4 trails-list-item trails-border-radius-container transition-all duration-200 cursor-pointer"
+          >
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-3 flex-1">
+                <div className="w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
+                  <Search className="w-4 h-4 text-gray-400" />
+                </div>
+                <div className="text-left flex-1">
+                  <div className="font-semibold text-gray-900 dark:text-white text-sm">
+                    Select vault to withdraw from
                   </div>
                 </div>
-                <ChevronRight className="w-4 h-4 trails-text-muted flex-shrink-0" />
               </div>
-            </button>
-          )}
-        </div>
+              <ChevronRight className="w-4 h-4 trails-text-muted flex-shrink-0" />
+            </div>
+          </button>
+        )}
+      </div>
 
-        {/* Amount Input Section */}
-        {selectedPool && (
-          <div className="trails-bg-secondary trails-bg-secondary-hover trails-border-radius-container p-3 group transition-all duration-200 border border-transparent focus-within:!bg-white dark:focus-within:!bg-gray-800 trails-focus-border-secondary">
-            {/* Withdraw Label */}
-            <div className="flex justify-between items-center mb-2">
-              <div className="text-sm font-semibold trails-text-secondary text-left">
-                Amount
+      {/* Amount Input Section */}
+      {selectedPool && (
+        <div className="pt-4 pb-4 mb-4 trails-bg-secondary trails-bg-secondary-hover trails-border-radius-container p-3 group transition-all duration-200 border border-transparent focus-within:!bg-white dark:focus-within:!bg-gray-800 trails-focus-border-secondary min-h-[120px] flex flex-col">
+          {/* Withdraw Label */}
+          <div className="mb-4 flex justify-between items-center">
+            <div className="text-sm font-medium trails-text-secondary text-left m-0">
+              Amount
+            </div>
+          </div>
+
+          <div className="flex items-center space-x-2 flex-1">
+            {/* Amount Input */}
+            <div className="flex-1">
+              <div className="flex items-center space-x-2">
+                <input
+                  ref={inputRef}
+                  id="amount"
+                  type="text"
+                  value={amount}
+                  onChange={(e) => handleAmountChange(e.target.value)}
+                  placeholder={"0"}
+                  className={`w-full bg-transparent font-bold trails-text-primary placeholder:trails-text-muted border-none outline-none ${
+                    isLoadingQuote ? "animate-pulse" : ""
+                  }`}
+                  style={inputStyles}
+                  inputMode="decimal"
+                />
+                {isLoadingQuote && (
+                  <div className="animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
+                )}
               </div>
             </div>
 
-            <div className="flex items-center space-x-2">
-              {/* Amount Input */}
-              <div className="flex-1">
+            {/* Token Display (Not Selectable) */}
+            <TokenDisplayNonSelectable
+              symbol={selectedPool.token.symbol}
+              imageUrl={selectedPool.token.logoUrl}
+              chainId={selectedPool.chainId}
+              contractAddress={selectedPool.token.address}
+              chainName={chainInfo?.name}
+            />
+          </div>
+
+          {/* Bottom Info Row */}
+          <div className="mt-4 flex justify-between items-center">
+            {/* USD Amount */}
+            <div className="text-xs text-gray-500 dark:text-gray-400">
+              {selectedPool && amount ? (
+                <>≈ {underlyingTokenUsdDisplay || "$0.00"}</>
+              ) : (
+                <span>&nbsp;</span>
+              )}
+            </div>
+
+            {/* Pool Balance and Percentage Buttons */}
+            {poolBalance && (
+              <div className="flex items-center space-x-2">
                 <button
                   type="button"
-                  className="flex items-center justify-start cursor-text bg-transparent border-none p-0 w-full"
-                  onClick={() => inputRef.current?.focus()}
+                  className="text-xs text-gray-500 dark:text-gray-400 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 transition-colors bg-transparent border-none p-0"
+                  onClick={() => handleAmountSelect(poolBalance || "0")}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault()
+                      handleAmountSelect(poolBalance || "0")
+                    }
+                  }}
+                  title="Click to withdraw full balance"
                 >
-                  <div className="flex items-center">
-                    <input
-                      ref={inputRef}
-                      type="text"
-                      value={amount}
-                      onChange={(e) => handleAmountChange(e.target.value)}
-                      placeholder="0"
-                      className={`bg-transparent border-none outline-none font-bold text-left trails-text-primary placeholder-trails-text-primary ${
-                        isLoadingQuote ? "animate-pulse" : ""
-                      }`}
-                      style={{
-                        fontSize:
-                          amount.length > 12
-                            ? "0.875rem"
-                            : amount.length > 9
-                              ? "1rem"
-                              : amount.length > 6
-                                ? "1.125rem"
-                                : amount.length > 3
-                                  ? "1.25rem"
-                                  : "1.5rem",
-                        width: `${Math.max((amount || "0").length, 1)}ch`,
-                        minWidth: "1ch",
-                        maxWidth: "270px",
-                        padding: "0",
-                        margin: "0",
-                        transition: "all 0.1s ease-in-out",
-                      }}
-                      inputMode="decimal"
-                    />
-                    <span
-                      className="font-bold text-gray-400 dark:text-gray-500"
-                      style={{
-                        fontSize:
-                          amount.length > 12
-                            ? "0.875rem"
-                            : amount.length > 9
-                              ? "1rem"
-                              : amount.length > 6
-                                ? "1.125rem"
-                                : amount.length > 3
-                                  ? "1.25rem"
-                                  : "1.5rem",
-                        marginLeft: "0.1em",
-                        padding: "0",
-                        transition: "all 0.2s ease-in-out",
-                      }}
-                    >
-                      {selectedPool?.token.symbol.slice(0, 4) || ""}
-                    </span>
-                    {isLoadingQuote && (
-                      <div className="ml-2 animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
-                    )}
-                  </div>
+                  Pool Balance:{" "}
+                  {isBalanceVisible
+                    ? isLoadingBalance
+                      ? "Loading..."
+                      : poolBalance || "0.00"
+                    : "••••••"}
                 </button>
-              </div>
 
-              {/* Token Display (Not Selectable) */}
-              <div className="flex items-center space-x-2 trails-bg-card trails-border-radius-input px-2.5 py-1.5 border trails-border-primary">
-                <TokenImage
-                  symbol={selectedPool.token.symbol}
-                  imageUrl={selectedPool.token.logoUrl}
+                {/* Percentage Buttons */}
+                <PercentageMaxButtons
+                  userBalance={poolBalance || undefined}
+                  isNativeToken={false} // Pool tokens are never native tokens
+                  gasCostFormatted={prepareSendQuote?.gasCostFormatted}
                   chainId={selectedPool.chainId}
-                  contractAddress={selectedPool.token.address}
-                  size={20}
+                  onAmountSelect={handleAmountSelect}
+                  className="opacity-100"
                 />
-                <span className="font-medium trails-text-primary text-sm">
-                  {selectedPool.token.symbol}
-                </span>
               </div>
-            </div>
-
-            {/* Bottom Info Row */}
-            <div className="mt-2 flex justify-between items-center">
-              {/* USD Amount */}
-              <div className="text-xs trails-text-muted">
-                {selectedPool && amount ? (
-                  <>≈ {underlyingTokenUsdDisplay || "$0.00"}</>
-                ) : (
-                  <span>&nbsp;</span>
-                )}
-              </div>
-
-              {/* Pool Balance and Percentage Buttons */}
-              {poolBalance && (
-                <div className="flex items-center space-x-2">
-                  <button
-                    type="button"
-                    className="text-xs trails-text-muted cursor-pointer hover:trails-hover-text transition-colors bg-transparent border-none p-0"
-                    onClick={() => handleAmountSelect(poolBalance || "0")}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault()
-                        handleAmountSelect(poolBalance || "0")
-                      }
-                    }}
-                    title="Click to withdraw full balance"
-                  >
-                    Pool Balance:{" "}
-                    {isBalanceVisible
-                      ? isLoadingBalance
-                        ? "Loading..."
-                        : poolBalance || "0.00"
-                      : "••••••"}
-                  </button>
-
-                  {/* Percentage Buttons */}
-                  <PercentageMaxButtons
-                    userBalance={poolBalance || undefined}
-                    isNativeToken={false} // Pool tokens are never native tokens
-                    gasCostFormatted={prepareSendQuote?.gasCostFormatted}
-                    chainId={selectedPool.chainId}
-                    onAmountSelect={handleAmountSelect}
-                    className="opacity-100"
-                  />
-                </div>
-              )}
-            </div>
+            )}
           </div>
-        )}
-      </div>
+        </div>
+      )}
 
       {prepareSendQuote?.noSufficientBalance ? (
         <div className="px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
@@ -864,7 +845,7 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
 
       {/* Quote Details */}
       {prepareSendQuote && (
-        <div className="space-y-2">
+        <div className="mb-4">
           <QuoteDetails quote={prepareSendQuote} showContent={true} />
         </div>
       )}

package/src/widget/components/PriceImpactWarning.tsx

@@ -1,6 +1,6 @@
 import type React from "react"
 import type { PrepareSendQuote } from "../../prepareSend.js"
-import { Tooltip } from "@0xsequence/design-system"
+import { Tooltip } from "./Tooltip.js"
 
 interface PriceImpactWarningProps {
   quote?: PrepareSendQuote | null

package/src/widget/components/QuoteDetails.tsx

@@ -1,5 +1,6 @@
 import { TokenImage } from "./TokenImage.js"
-import { InfoIcon, Tooltip } from "@0xsequence/design-system"
+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 +8,7 @@ import { useState, useEffect, useRef } from "react"
 import { truncateAddress } from "../../utils.js"
 import { PriceImpactWarning } from "./PriceImpactWarning.js"
 import { usePriceImpactWarning } from "../hooks/usePriceImpactWarning.js"
+import { FeeBreakdown } from "./FeeBreakdown.js"
 
 interface QuoteDetailsProps {
   quote?: PrepareSendQuote | null
@@ -14,6 +16,7 @@ interface QuoteDetailsProps {
   children?: React.ReactNode
   onExpand?: (isExpanded: boolean) => void
   swapMode?: boolean
+  compact?: boolean
 }
 
 // Helper function to format completion time
@@ -44,6 +47,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
   children,
   onExpand,
   swapMode,
+  compact = false,
 }) => {
   const [showCalldata, setShowCalldata] = useState(false)
   const [showOriginRate, setShowOriginRate] = useState(true)
@@ -88,7 +92,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 +165,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 +199,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"
@@ -665,7 +667,22 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                 )
               })()}
 
-            {quote?.fees?.totalFeeAmountUsd != null && (
+            {/* Total Fees with optional breakdown */}
+            {quote?.trailsFeeBreakdown ? (
+              <FeeBreakdown feeBreakdown={quote.trailsFeeBreakdown}>
+                <div className="flex justify-between items-center w-full">
+                  <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1 w-full">
+                    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>
+              </FeeBreakdown>
+            ) : 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:
@@ -677,7 +694,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                   {quote.fees.totalFeeAmountUsdDisplay}
                 </span>
               </div>
-            )}
+            ) : null}
 
             {quote?.quoteProvider?.name && (
               <div className="flex justify-between items-center">