0xtrails 0.9.2 → 0.9.4

package/src/widget/components/SlippageToleranceSettings.tsx

@@ -54,19 +54,28 @@ export const SlippageToleranceSettings: React.FC<
 > = ({ className = "" }) => {
   const [displayValue, setDisplayValue] = useState("")
   const [showTooltip, setShowTooltip] = useState(false)
+  const [mode, setMode] = useState<"auto" | "custom">("auto")
 
   // Initialize display value from local storage or config
   useEffect(() => {
     try {
       const stored = localStorage.getItem(SLIPPAGE_STORAGE_KEY)
       if (stored) {
-        setDisplayValue(decimalToPercentage(stored))
+        if (stored === SLIPPAGE_AUTO) {
+          setMode("auto")
+          setDisplayValue(SLIPPAGE_AUTO)
+        } else {
+          setMode("custom")
+          setDisplayValue(decimalToPercentage(stored))
+        }
       } else {
         // Default to AUTO mode
+        setMode("auto")
         setDisplayValue(SLIPPAGE_AUTO)
       }
     } catch (_error) {
       // Fallback to AUTO if localStorage fails
+      setMode("auto")
       setDisplayValue(SLIPPAGE_AUTO)
     }
   }, [])
@@ -134,6 +143,7 @@ export const SlippageToleranceSettings: React.FC<
   }
 
   const handleAutoClick = () => {
+    setMode("auto")
     setDisplayValue(SLIPPAGE_AUTO)
     try {
       localStorage.setItem(SLIPPAGE_STORAGE_KEY, SLIPPAGE_AUTO)
@@ -142,7 +152,26 @@ export const SlippageToleranceSettings: React.FC<
     }
   }
 
+  const handleCustomClick = () => {
+    setMode("custom")
+    // Set a default custom value if currently in auto mode
+    if (displayValue === SLIPPAGE_AUTO) {
+      const defaultCustom = "1"
+      setDisplayValue(defaultCustom)
+      const decimalValue = percentageToDecimal(defaultCustom)
+      try {
+        localStorage.setItem(SLIPPAGE_STORAGE_KEY, decimalValue)
+      } catch (error) {
+        console.warn(
+          "Failed to save slippage tolerance to localStorage:",
+          error,
+        )
+      }
+    }
+  }
+
   const handlePresetClick = (percentage: number) => {
+    setMode("custom")
     const percentageStr = percentage.toString()
     setDisplayValue(percentageStr)
     const decimalValue = percentageToDecimal(percentageStr)
@@ -156,9 +185,7 @@ export const SlippageToleranceSettings: React.FC<
   return (
     <div className={`space-y-3 ${className}`}>
       <div className="flex items-center space-x-2">
-        <div className="text-sm font-medium trails-text-primary">
-          Slippage Tolerance
-        </div>
+        <div className="text-sm font-medium trails-text-primary">Slippage</div>
         <div className="relative">
           <button
             type="button"
@@ -179,56 +206,71 @@ export const SlippageToleranceSettings: React.FC<
         </div>
       </div>
 
-      {/* Preset buttons */}
-      <div className="flex items-center space-x-2">
+      {/* Mode toggle buttons */}
+      <div className="flex items-center gap-2">
         <button
           type="button"
           onClick={handleAutoClick}
-          className={`px-2 py-1 text-xs font-medium trails-border-radius-container border border-solid transition-colors cursor-pointer ${
-            displayValue === SLIPPAGE_AUTO
-              ? "bg-blue-500 text-white border-blue-500"
-              : "border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg hover:border-gray-400 dark:hover:border-gray-500"
+          className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
+            mode === "auto"
+              ? "bg-[#DBEAFE] text-[#2563EB]"
+              : "bg-transparent text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer"
           }`}
         >
           Auto
         </button>
-        {[0.5, 1, 3, 5].map((preset) => (
-          <button
-            key={preset}
-            type="button"
-            onClick={() => handlePresetClick(preset)}
-            className={`px-2 py-1 text-xs font-medium trails-border-radius-container border border-solid transition-colors cursor-pointer ${
-              parseFloat(displayValue) === preset
-                ? "bg-blue-500 text-white border-blue-500"
-                : "border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg hover:border-gray-400 dark:hover:border-gray-500"
-            }`}
-          >
-            {preset}%
-          </button>
-        ))}
+        <button
+          type="button"
+          onClick={handleCustomClick}
+          className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
+            mode === "custom"
+              ? "bg-[#DBEAFE] text-[#2563EB]"
+              : "bg-transparent text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer"
+          }`}
+        >
+          Custom
+        </button>
       </div>
 
-      {/* Custom input */}
-      <div className="flex items-center space-x-2">
-        <div className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
-          Custom:
-        </div>
-        <div className="relative w-16">
-          <input
-            type="text"
-            value={displayValue}
-            onChange={handleInputChange}
-            onBlur={handleInputBlur}
-            onKeyDown={handleKeyDown}
-            placeholder="5"
-            className="w-full px-2 py-1.5 text-sm border border-solid border-gray-200 dark:border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 trails-input pr-6"
-            style={{ borderRadius: "10px" }}
-          />
-          <div className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-            <span className="text-xs text-gray-500 dark:text-gray-400">%</span>
+      {/* Custom input and preset buttons - only show when custom mode is selected */}
+      {mode === "custom" && (
+        <>
+          {/* Custom input with preset buttons */}
+          <div className="flex items-center gap-2">
+            <div className="relative w-16">
+              <input
+                type="text"
+                value={displayValue !== SLIPPAGE_AUTO ? displayValue : ""}
+                onChange={handleInputChange}
+                onBlur={handleInputBlur}
+                onKeyDown={handleKeyDown}
+                placeholder="5"
+                className="w-full px-3 py-1.5 text-xs border border-solid border-gray-200 dark:border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 trails-input pr-6 rounded-full"
+              />
+              <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+                <span className="text-xs text-gray-500 dark:text-gray-400">
+                  %
+                </span>
+              </div>
+            </div>
+            {/* Preset percentage buttons */}
+            {[0.5, 1, 3, 5].map((preset) => (
+              <button
+                key={preset}
+                type="button"
+                onClick={() => handlePresetClick(preset)}
+                className={`px-2 py-1 text-xs font-medium rounded-full border transition-colors cursor-pointer ${
+                  parseFloat(displayValue) === preset
+                    ? "bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-gray-400 dark:border-gray-500"
+                    : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700"
+                }`}
+              >
+                {preset}%
+              </button>
+            ))}
           </div>
-        </div>
-      </div>
+        </>
+      )}
     </div>
   )
 }

package/src/widget/components/TransactionDetails.tsx

@@ -1,12 +1,11 @@
 import type React from "react"
-import { useState } from "react"
 import type { IntentTransaction } from "../../transactions.js"
 import { TokenImage } from "./TokenImage.js"
 import { ChainImage } from "./ChainImage.js"
 import { getExplorerUrlForAddress, getExplorerUrl } from "../../explorer.js"
 import { truncateAddress } from "../../utils.js"
 import { formatRawAmount } from "../../tokenBalances.js"
-import { logger } from "../../logger.js"
+import { useTrails } from "../providers/TrailsProvider.js"
 
 interface TransactionDetailsProps {
   transaction: IntentTransaction
@@ -17,43 +16,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
   transaction,
   className = "",
 }) => {
-  const [copiedIntentId, setCopiedIntentId] = useState<string | null>(null)
-
-  const handleCopyIntentId = async (intentId: string, e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    try {
-      await navigator.clipboard.writeText(intentId)
-      setCopiedIntentId(intentId)
-      setTimeout(() => setCopiedIntentId(null), 2000) // Clear after 2 seconds
-      logger.console.log(
-        "[trails-sdk] Successfully copied intent ID:",
-        intentId,
-      )
-    } catch (error) {
-      logger.console.error("[trails-sdk] Failed to copy intent ID:", error)
-      // Fallback for older browsers or when clipboard API is not available
-      try {
-        const textArea = document.createElement("textarea")
-        textArea.value = intentId
-        document.body.appendChild(textArea)
-        textArea.select()
-        document.execCommand("copy")
-        document.body.removeChild(textArea)
-        setCopiedIntentId(intentId)
-        setTimeout(() => setCopiedIntentId(null), 2000)
-        logger.console.log(
-          "[trails-sdk] Successfully copied intent ID using fallback:",
-          intentId,
-        )
-      } catch (fallbackError) {
-        logger.console.error(
-          "[trails-sdk] Fallback copy also failed:",
-          fallbackError,
-        )
-      }
-    }
-  }
+  const { trailsAppUrl } = useTrails()
 
   return (
     <div className={`space-y-2 text-sm ${className}`}>
@@ -63,71 +26,28 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
           <span className="text-xs text-gray-600 dark:text-gray-400">
             Intent ID:
           </span>
-          <div className="flex items-center gap-1">
-            <a
-              href={`https://app.trails.build/explorer/receipt/${transaction.intentId}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-xs font-mono text-gray-900 dark:text-gray-100 hover:underline"
-              title="View on Trails Explorer"
-            >
-              {truncateAddress(transaction.intentId)}
-            </a>
-            <button
-              type="button"
-              onClick={(e) => {
-                if (transaction.intentId) {
-                  handleCopyIntentId(transaction.intentId, e)
-                }
-              }}
-              onMouseDown={(e) => e.stopPropagation()}
-              onMouseUp={(e) => e.stopPropagation()}
-              className={`p-0.5 rounded transition-all duration-200 cursor-pointer z-10 relative ${
-                copiedIntentId === transaction.intentId
-                  ? "bg-green-100 dark:bg-green-900/30"
-                  : "hover:bg-gray-200 dark:hover:bg-gray-600"
-              }`}
-              title={
-                copiedIntentId === transaction.intentId
-                  ? "Copied!"
-                  : "Copy full intent ID"
-              }
+          <a
+            href={`${trailsAppUrl}/intent/${transaction.intentId}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs font-mono text-gray-900 dark:text-gray-100 hover:underline flex items-center gap-1"
+            title="View on Trails"
+          >
+            {truncateAddress(transaction.intentId)}
+            <svg
+              className="w-3 h-3"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
             >
-              {copiedIntentId === transaction.intentId ? (
-                <svg
-                  className="w-3 h-3 text-green-600 dark:text-green-400"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  aria-label="Copied"
-                >
-                  <title>Copied</title>
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M5 13l4 4L19 7"
-                  />
-                </svg>
-              ) : (
-                <svg
-                  className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  aria-label="Copy"
-                >
-                  <title>Copy</title>
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-                  />
-                </svg>
-              )}
-            </button>
-          </div>
+              <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>
       )}
 
@@ -144,7 +64,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
             })}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-xs hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
+            className="text-xs font-mono hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
           >
             <ChainImage chainId={transaction.originChainId} size={16} />
             {truncateAddress(transaction.depositTransactionHash)}
@@ -165,6 +85,73 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
         </div>
       )}
 
+      {/* Origin Token - Moved before Origin Intent */}
+      {transaction.originToken && (
+        <div className="flex justify-between items-start">
+          <span className="text-xs text-gray-600 dark:text-gray-400">
+            Origin Token:
+          </span>
+          <div className="text-right">
+            {transaction.originTokenAddress &&
+            transaction.originTokenAddress !==
+              "0x0000000000000000000000000000000000000000" ? (
+              <a
+                href={getExplorerUrlForAddress({
+                  address: transaction.originTokenAddress,
+                  chainId: transaction.originToken.chainId,
+                })}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-1 justify-end hover:underline text-xs font-mono text-gray-900 dark:text-gray-100"
+              >
+                <TokenImage
+                  symbol={transaction.originToken.symbol}
+                  imageUrl={transaction.originToken.imageUrl}
+                  chainId={transaction.originToken.chainId}
+                  size={16}
+                />
+                <span className="font-mono">
+                  {formatRawAmount(
+                    transaction.originTokenAmount || "0",
+                    transaction.originToken.decimals,
+                  )}{" "}
+                  {transaction.originToken.symbol}
+                </span>
+                <svg
+                  className="w-3 h-3"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <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 className="flex items-center gap-1 justify-end text-xs font-mono text-gray-900 dark:text-gray-100">
+                <TokenImage
+                  symbol={transaction.originToken.symbol}
+                  imageUrl={transaction.originToken.imageUrl}
+                  chainId={transaction.originToken.chainId}
+                  size={16}
+                />
+                <span className="font-mono">
+                  {formatRawAmount(
+                    transaction.originTokenAmount || "0",
+                    transaction.originToken.decimals,
+                  )}{" "}
+                  {transaction.originToken.symbol}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
       {/* Origin Intent Deposit Tx Hash */}
       {transaction.originIntentDepositTxHash &&
         transaction.originIntentDepositTxExplorerUrl &&
@@ -177,7 +164,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
               href={transaction.originIntentDepositTxExplorerUrl}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-xs hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
+              className="text-xs font-mono hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
             >
               <ChainImage chainId={transaction.originChainId} size={16} />
               {truncateAddress(transaction.originIntentDepositTxHash)}
@@ -210,7 +197,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
               href={transaction.destinationIntentDepositTxExplorerUrl}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-xs hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
+              className="text-xs font-mono hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
             >
               <ChainImage chainId={transaction.destinationChainId} size={16} />
               {truncateAddress(transaction.destinationIntentDepositTxHash)}
@@ -231,7 +218,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
           </div>
         )}
 
-      {/* Origin Intent */}
+      {/* Origin Intent - Moved after Origin Token */}
       {transaction.originIntentAddress && (
         <div className="flex justify-between items-center">
           <span className="text-xs text-gray-600 dark:text-gray-400">
@@ -247,7 +234,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
             })}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-xs hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
+            className="text-xs font-mono hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
           >
             {transaction.originChainId && (
               <ChainImage chainId={transaction.originChainId} size={16} />
@@ -270,73 +257,6 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
         </div>
       )}
 
-      {/* Origin Token */}
-      {transaction.originToken && (
-        <div className="flex justify-between items-start">
-          <span className="text-xs text-gray-600 dark:text-gray-400">
-            Origin Token:
-          </span>
-          <div className="text-right">
-            {transaction.originTokenAddress &&
-            transaction.originTokenAddress !==
-              "0x0000000000000000000000000000000000000000" ? (
-              <a
-                href={getExplorerUrlForAddress({
-                  address: transaction.originTokenAddress,
-                  chainId: transaction.originToken.chainId,
-                })}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-1 justify-end hover:underline text-xs text-gray-900 dark:text-gray-100"
-              >
-                <TokenImage
-                  symbol={transaction.originToken.symbol}
-                  imageUrl={transaction.originToken.imageUrl}
-                  chainId={transaction.originToken.chainId}
-                  size={16}
-                />
-                <span>
-                  {formatRawAmount(
-                    transaction.originTokenAmount || "0",
-                    transaction.originToken.decimals,
-                  )}{" "}
-                  {transaction.originToken.symbol}
-                </span>
-                <svg
-                  className="w-3 h-3"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <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 className="flex items-center gap-1 justify-end text-xs text-gray-900 dark:text-gray-100">
-                <TokenImage
-                  symbol={transaction.originToken.symbol}
-                  imageUrl={transaction.originToken.imageUrl}
-                  chainId={transaction.originToken.chainId}
-                  size={16}
-                />
-                <span>
-                  {formatRawAmount(
-                    transaction.originTokenAmount || "0",
-                    transaction.originToken.decimals,
-                  )}{" "}
-                  {transaction.originToken.symbol}
-                </span>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
       {/* Origin Intent Action Tx Hash */}
       {transaction.originIntentTxHash &&
         transaction.originIntentTxExplorerUrl &&
@@ -349,7 +269,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
               href={transaction.originIntentTxExplorerUrl}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-xs hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
+              className="text-xs font-mono hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
             >
               <ChainImage chainId={transaction.originChainId} size={16} />
               {truncateAddress(transaction.originIntentTxHash)}
@@ -370,42 +290,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
           </div>
         )}
 
-      {/* Destination Intent */}
-      {transaction.destinationIntentAddress &&
-        transaction.destinationChainId && (
-          <div className="flex justify-between items-center">
-            <span className="text-xs text-gray-600 dark:text-gray-400">
-              Destination Intent:
-            </span>
-            <a
-              href={getExplorerUrlForAddress({
-                address: transaction.destinationIntentAddress,
-                chainId: transaction.destinationChainId,
-              })}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-xs hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
-            >
-              <ChainImage chainId={transaction.destinationChainId} size={16} />
-              {truncateAddress(transaction.destinationIntentAddress)}
-              <svg
-                className="w-3 h-3"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <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 Token */}
+      {/* Destination Token - Moved before Destination Intent */}
       {transaction.destinationToken && (
         <div className="flex justify-between items-start">
           <span className="text-xs text-gray-600 dark:text-gray-400">
@@ -422,7 +307,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                 })}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex items-center gap-1 justify-end hover:underline text-xs text-gray-900 dark:text-gray-100"
+                className="flex items-center gap-1 justify-end hover:underline text-xs font-mono text-gray-900 dark:text-gray-100"
               >
                 <TokenImage
                   symbol={transaction.destinationToken.symbol}
@@ -430,7 +315,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                   chainId={transaction.destinationToken.chainId}
                   size={16}
                 />
-                <span>
+                <span className="font-mono">
                   {formatRawAmount(
                     transaction.destinationTokenAmount || "0",
                     transaction.destinationToken.decimals,
@@ -452,14 +337,14 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                 </svg>
               </a>
             ) : (
-              <div className="flex items-center gap-1 justify-end text-xs text-gray-900 dark:text-gray-100">
+              <div className="flex items-center gap-1 justify-end text-xs font-mono text-gray-900 dark:text-gray-100">
                 <TokenImage
                   symbol={transaction.destinationToken.symbol}
                   imageUrl={transaction.destinationToken.imageUrl}
                   chainId={transaction.destinationToken.chainId}
                   size={16}
                 />
-                <span>
+                <span className="font-mono">
                   {formatRawAmount(
                     transaction.destinationTokenAmount || "0",
                     transaction.destinationToken.decimals,
@@ -472,6 +357,41 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
         </div>
       )}
 
+      {/* Destination Intent - Moved after Destination Token */}
+      {transaction.destinationIntentAddress &&
+        transaction.destinationChainId && (
+          <div className="flex justify-between items-center">
+            <span className="text-xs text-gray-600 dark:text-gray-400">
+              Destination Intent:
+            </span>
+            <a
+              href={getExplorerUrlForAddress({
+                address: transaction.destinationIntentAddress,
+                chainId: transaction.destinationChainId,
+              })}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs font-mono hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
+            >
+              <ChainImage chainId={transaction.destinationChainId} size={16} />
+              {truncateAddress(transaction.destinationIntentAddress)}
+              <svg
+                className="w-3 h-3"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <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 To Address */}
       {transaction.destinationToAddress &&
         transaction.destinationToAddress !==
@@ -487,7 +407,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
               })}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-xs hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
+              className="text-xs font-mono hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
             >
               {transaction.destinationChainId && (
                 <ChainImage
@@ -525,7 +445,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
               href={transaction.destinationIntentTxExplorerUrl}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-xs hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
+              className="text-xs font-mono hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
             >
               <ChainImage chainId={transaction.destinationChainId} size={16} />
               {truncateAddress(transaction.destinationIntentTxHash)}