0xtrails 0.1.2 → 0.1.4

package/src/widget/components/QuoteDetails.tsx

@@ -390,7 +390,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                 </div>
               )}
 
-            {quote?.originAddress && (
+            {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:
@@ -400,14 +400,14 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                 </span>
                 <a
                   href={getExplorerUrlForAddress({
-                    address: quote.originAddress,
+                    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.originAddress)}
+                  {truncateAddress(quote.originDepositAddress)}
                   <svg
                     className="w-3 h-3"
                     fill="none"
@@ -426,11 +426,49 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
               </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 address that will receive the tokens after any swap and/or bridge">
+                  <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>
@@ -476,28 +514,58 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
               </div>
             )}
 
-            {quote?.priceImpact != null && (
-              <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 text-gray-900 dark:text-white">
-                    {quote.priceImpact}%
-                  </span>
-                </div>
-                {quote.priceImpactUsdDisplay && (
-                  <div className="text-right">
-                    <span className="text-xs text-gray-500 dark:text-gray-400">
-                      ≈ {quote.priceImpactUsdDisplay}
-                    </span>
+            {quote?.priceImpact != null &&
+              (() => {
+                const priceImpactNum = Math.abs(Number(quote.priceImpact))
+                return (
+                  <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 ${
+                          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"
+                        }`}
+                      >
+                        {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>
+                    </div>
+                    {quote.priceImpactUsdDisplay && (
+                      <div className="text-right">
+                        <span className="text-xs text-gray-500 dark:text-gray-400">
+                          ≈ {quote.priceImpactUsdDisplay}
+                        </span>
+                      </div>
+                    )}
                   </div>
-                )}
-              </div>
-            )}
+                )
+              })()}
 
             {quote?.fees?.totalFeeAmountUsd != null && (
               <div className="flex justify-between items-center">

package/src/widget/components/Receipt.tsx

@@ -1,13 +1,16 @@
 import { useQuery } from "@tanstack/react-query"
 import type React from "react"
-import { useEffect, useState } from "react"
+import { useEffect, useState, useCallback, useMemo } from "react"
+import { ChevronRight } from "lucide-react"
 import type { TransactionState } from "../../transactions.js"
 import { GreenCheckAnimation } from "./GreenCheckAnimation.js"
+import { YellowWarningAnimation } from "./YellowWarningAnimation.js"
 import { getTxTimeDiff } from "../../transactions.js"
 import { QuoteDetails } from "./QuoteDetails.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import { truncateAddress } from "../../address.js"
 import { formatElapsed } from "../../utils.js"
+import { ChainImage } from "./ChainImage.js"
 
 interface ReceiptProps {
   onSendAnother: () => void
@@ -55,8 +58,9 @@ function useTxTimeDiff(firstTx?: TransactionState, lastTx?: TransactionState) {
 
 // Custom hook to compute finalExplorerUrl and completionTimeSeconds
 function useReceipt(transactionStates?: TransactionState[]) {
-  const finalExplorerUrl =
-    transactionStates?.[transactionStates.length - 1]?.explorerUrl
+  const lastTx = transactionStates?.[transactionStates.length - 1]
+  const finalExplorerUrl = lastTx?.explorerUrl
+  const finalChainId = lastTx?.chainId
 
   // Only consider confirmed transactions
   const confirmedTxs = (transactionStates || []).filter(
@@ -67,10 +71,11 @@ function useReceipt(transactionStates?: TransactionState[]) {
   const last = confirmedTxs[confirmedTxs.length - 1]
 
   const completionTimeSeconds = useTxTimeDiff(first, last)
-  return { finalExplorerUrl, completionTimeSeconds }
+  return { finalExplorerUrl, completionTimeSeconds, finalChainId }
 }
 
 export const Receipt: React.FC<ReceiptProps> = ({
+  onSendAnother,
   onClose,
   renderInline = false,
   transactionStates = [],
@@ -78,6 +83,8 @@ export const Receipt: React.FC<ReceiptProps> = ({
   quote,
 }) => {
   const [showContent, setShowContent] = useState(false)
+  const [showRefundInfo, setShowRefundInfo] = useState(false)
+  const [refundMessage, setRefundMessage] = useState<string | null>(null)
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -87,13 +94,155 @@ export const Receipt: React.FC<ReceiptProps> = ({
     return () => clearTimeout(timer)
   }, [])
 
-  const { finalExplorerUrl, completionTimeSeconds: calculatedCompletionTime } =
-    useReceipt(transactionStates)
+  // Helper function to check if a specific transaction has meta tx errors
+  const hasMetaTxError = useCallback((tx: TransactionState) => {
+    return tx?.decodedGuestModuleEvents?.some(
+      (event) => event.type === "CallFailed",
+    )
+  }, [])
+
+  const showMetaTxError = useMemo(() => {
+    return transactionStates.some((tx) => hasMetaTxError(tx))
+  }, [transactionStates, hasMetaTxError])
+
+  const {
+    finalExplorerUrl,
+    finalChainId,
+    completionTimeSeconds: calculatedCompletionTime,
+  } = useReceipt(transactionStates)
 
   // Use provided totalCompletionSeconds if available, otherwise use calculated time
   const completionTimeSeconds =
     totalCompletionSeconds ?? calculatedCompletionTime
 
+  // Detect successful refund events on origin or sweep on destination
+  useEffect(() => {
+    if (!transactionStates || transactionStates.length === 0) return
+
+    const originTx = transactionStates[0]
+    const destinationTx = transactionStates[transactionStates.length - 1]
+
+    // Check if this is a same-chain transaction (all transactions on same chain)
+    const isSameChain =
+      transactionStates.length <= 2 &&
+      transactionStates.every((tx) => tx.chainId === originTx?.chainId)
+
+    const originRefund = originTx?.decodedTrailsTokenSweeperEvents?.find(
+      (e) => e.type === "Refund",
+    )
+
+    // Only check destination sweep for cross-chain transactions
+    const destinationSweep = !isSameChain
+      ? destinationTx?.decodedTrailsTokenSweeperEvents?.find(
+          (e) => e.type === "Sweep",
+        )
+      : null
+
+    if (originRefund) {
+      setRefundMessage(
+        "The origin call failed, but your funds were successfully refunded on the origin chain.",
+      )
+      setShowRefundInfo(true)
+      return
+    }
+
+    if (destinationSweep) {
+      setRefundMessage(
+        "The destination call failed, but a refund was successfully handled on the destination chain.",
+      )
+      setShowRefundInfo(true)
+      return
+    }
+
+    setShowRefundInfo(false)
+    setRefundMessage(null)
+  }, [transactionStates])
+
+  // Extract QuoteDetails section to reuse in both success and failure states
+  const quoteDetailsSection = quote && (
+    <div className="mt-2">
+      <QuoteDetails quote={quote} showContent={true}>
+        {transactionStates.length > 0 && (
+          <>
+            <div className="font-medium text-gray-700 dark:text-gray-300">
+              Transactions:
+            </div>
+            <div className="space-y-2">
+              {transactionStates.map((state, i) => (
+                <div
+                  key={`${state.transactionHash}-${i}`}
+                  className="p-2 rounded bg-gray-100 dark:bg-gray-700/50"
+                >
+                  <div className="flex justify-between items-center">
+                    <span className="text-gray-600 dark:text-gray-400">
+                      {state.label}:
+                    </span>
+                    <span
+                      className={`px-2 py-0.5 rounded-full text-xs ${
+                        state.state === "confirmed"
+                          ? "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-400"
+                          : "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-400"
+                      }`}
+                    >
+                      {state.state.charAt(0).toUpperCase() +
+                        state.state.slice(1)}
+                    </span>
+                  </div>
+                  <div className="mt-1 flex justify-between items-center">
+                    <span className="text-gray-600 dark:text-gray-400">
+                      Hash:
+                    </span>
+                    <a
+                      href={state.explorerUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-1 hover:underline text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+                    >
+                      {hasMetaTxError(state) && (
+                        <svg
+                          className="w-4 h-4 text-orange-500"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <title>
+                            An internal meta transaction failure occurred
+                          </title>
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+                          />
+                        </svg>
+                      )}
+                      <ChainImage chainId={state.chainId} size={16} />
+                      <span>{truncateAddress(state.transactionHash)}</span>
+                      <svg
+                        className="w-3 h-3"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <title>External Link</title>
+                        <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>
+              ))}
+            </div>
+          </>
+        )}
+      </QuoteDetails>
+    </div>
+  )
+
   if (!finalExplorerUrl) {
     return (
       <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
@@ -126,6 +275,21 @@ export const Receipt: React.FC<ReceiptProps> = ({
           </p>
         </div>
 
+        {onSendAnother && (
+          <div className="flex justify-center">
+            <button
+              type="button"
+              onClick={onSendAnother}
+              className="inline-flex items-center gap-1 px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 trails-border-radius-button transition-colors duration-200 text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer font-medium"
+            >
+              Try Again
+            </button>
+          </div>
+        )}
+
+        {/* Quote Details - Show even in failed state */}
+        {quoteDetailsSection}
+
         {!renderInline && (
           <div className="text-center">
             <button
@@ -145,15 +309,24 @@ export const Receipt: React.FC<ReceiptProps> = ({
     <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
       <div className="text-center mb-2">
         <div className={`mx-auto flex items-center justify-center`}>
-          <GreenCheckAnimation />
+          {showRefundInfo || showMetaTxError ? (
+            <YellowWarningAnimation />
+          ) : (
+            <GreenCheckAnimation />
+          )}
         </div>
 
         <div
           className={`transition-all duration-500 ease-out ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
         >
           <h2 className="mt-4 text-2xl font-bold text-gray-900 dark:text-white">
-            Transaction Confirmed
+            {showRefundInfo ? "Unable to process." : "Completed"}
           </h2>
+          {showRefundInfo && (
+            <div className="mt-1 text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-1 justify-center animate-fade-in-up">
+              Refunded.
+            </div>
+          )}
           {completionTimeSeconds > 0 && (
             <div
               className="mt-1 text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1 justify-center animate-fade-in-up"
@@ -162,28 +335,37 @@ export const Receipt: React.FC<ReceiptProps> = ({
                 animationFillMode: "both",
               }}
             >
-              <span className="inline-block animate-fade-in-up">
-                Completed in{" "}
-                <strong>{formatElapsed(completionTimeSeconds)}</strong>
-              </span>
-              {totalCompletionSeconds && totalCompletionSeconds < 15 && (
-                <svg
-                  className="w-4 h-4 ml-1 text-yellow-400 inline"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  aria-hidden="true"
-                >
-                  <title>Lightning Fast</title>
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M13 10V3L4 14h7v7l9-11h-7z"
-                    fill="currentColor"
-                  />
-                </svg>
-              )}
+              <div className="inline-block animate-fade-in-up">
+                {showRefundInfo ? (
+                  <span>Transaction confirmed</span>
+                ) : (
+                  <span>
+                    Completed in{" "}
+                    <strong>{formatElapsed(completionTimeSeconds)}</strong>
+                  </span>
+                )}
+              </div>
+              {totalCompletionSeconds &&
+                totalCompletionSeconds < 15 &&
+                !showMetaTxError &&
+                !showRefundInfo && (
+                  <svg
+                    className="w-4 h-4 ml-1 text-yellow-400 inline"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    aria-hidden="true"
+                  >
+                    <title>Lightning Fast</title>
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M13 10V3L4 14h7v7l9-11h-7z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                )}
               <style>{`
                 @keyframes fadeInUp {
                   0% { opacity: 0; transform: translateY(16px); }
@@ -192,6 +374,33 @@ export const Receipt: React.FC<ReceiptProps> = ({
               `}</style>
             </div>
           )}
+
+          {(showMetaTxError || showRefundInfo) && (
+            <div
+              className="mt-2 text-sm text-orange-600 dark:text-orange-400 flex items-center gap-2 justify-center animate-fade-in-up"
+              style={{
+                animation: "fadeInUp 0.7s cubic-bezier(0.23, 1, 0.32, 1)",
+                animationFillMode: "both",
+              }}
+            >
+              <svg
+                className="w-4 h-4 text-orange-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                aria-hidden="true"
+              >
+                <title>Internal Meta Transaction Error</title>
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+                />
+              </svg>
+              <span>Although one or more errors occurred</span>
+            </div>
+          )}
         </div>
       </div>
 
@@ -204,6 +413,7 @@ export const Receipt: React.FC<ReceiptProps> = ({
           rel="noopener noreferrer"
           className="inline-flex items-center gap-1 px-3 py-1.5 rounded-md font-medium transition-colors border border-solid text-sm bg-white border-gray-200 text-black hover:bg-gray-50 hover:text-gray-900 dark:bg-gray-900 dark:border-gray-700 dark:text-blue-300 dark:hover:bg-gray-800 dark:hover:text-blue-200"
         >
+          {finalChainId && <ChainImage chainId={finalChainId} size={16} />}
           View on Explorer
           <svg
             className="w-4 h-4 ml-1 text-black dark:text-blue-300"
@@ -222,9 +432,64 @@ export const Receipt: React.FC<ReceiptProps> = ({
         </a>
       </div>
 
+      {showRefundInfo && refundMessage && (
+        <div
+          className="mt-2 text-sm text-yellow-700 dark:text-yellow-400 flex items-center gap-2 justify-center animate-fade-in-up"
+          style={{
+            animation: "fadeInUp 0.7s cubic-bezier(0.23, 1, 0.32, 1)",
+            animationFillMode: "both",
+          }}
+        >
+          <div className="rounded-xl bg-warning">
+            <div className="flex bg-background-overlay rounded-xl p-4 w-full flex-col gap-3">
+              <div className="flex w-full gap-2 justify-between">
+                <div className="flex flex-col gap-1">
+                  <div className="text-sm font-medium text-gray-900 dark:text-white text-left">
+                    Refund Information
+                  </div>
+                  <div className="text-sm text-gray-700 dark:text-gray-300 text-left">
+                    {refundMessage}
+                  </div>
+                </div>
+                <div className="flex items-center">
+                  <svg
+                    className="w-5 h-5 text-yellow-600 dark:text-yellow-400"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    aria-hidden="true"
+                  >
+                    <title>Information</title>
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       <div
         className={`space-y-3 transition-all duration-500 ease-out delay-200 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
       >
+        {onSendAnother && (
+          <div className="flex justify-center">
+            <button
+              type="button"
+              onClick={onSendAnother}
+              className="inline-flex items-center gap-1 px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 trails-border-radius-button transition-colors duration-200 text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer font-medium"
+            >
+              Send Again
+              <ChevronRight className="w-4 h-4" />
+            </button>
+          </div>
+        )}
+
         {!renderInline && (
           <button
             type="button"
@@ -236,79 +501,7 @@ export const Receipt: React.FC<ReceiptProps> = ({
         )}
 
         {/* Quote Details */}
-        {quote && (
-          <div className="mt-2">
-            <QuoteDetails quote={quote} showContent={true}>
-              {transactionStates.length > 0 && (
-                <>
-                  <div className="font-medium text-gray-700 dark:text-gray-300">
-                    Transactions:
-                  </div>
-                  <div className="space-y-2">
-                    {transactionStates.map((state) => (
-                      <div
-                        key={state.transactionHash}
-                        className="p-2 rounded bg-gray-100 dark:bg-gray-700/50"
-                      >
-                        <div className="flex justify-between items-center">
-                          <span className="text-gray-600 dark:text-gray-400">
-                            {state.label}:
-                          </span>
-                          <span
-                            className={`px-2 py-0.5 rounded-full text-xs ${
-                              state.state === "confirmed"
-                                ? "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-400"
-                                : "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-400"
-                            }`}
-                          >
-                            {state.state}
-                          </span>
-                        </div>
-                        <div className="mt-1 flex justify-between items-center">
-                          <span className="text-gray-600 dark:text-gray-400">
-                            Chain ID:
-                          </span>
-                          <span className="text-gray-900 dark:text-white">
-                            {state.chainId}
-                          </span>
-                        </div>
-                        <div className="mt-1 flex justify-between items-center">
-                          <span className="text-gray-600 dark:text-gray-400">
-                            Hash:
-                          </span>
-                          <a
-                            href={state.explorerUrl}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="flex items-center gap-1 hover:underline text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
-                          >
-                            <span>
-                              {truncateAddress(state.transactionHash)}
-                            </span>
-                            <svg
-                              className="w-3 h-3"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                            >
-                              <title>External Link</title>
-                              <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>
-                    ))}
-                  </div>
-                </>
-              )}
-            </QuoteDetails>
-          </div>
-        )}
+        {quoteDetailsSection}
       </div>
     </div>
   )