0xtrails 0.13.1 → 0.14.0

package/src/widget/components/Receipt.tsx

@@ -1,673 +0,0 @@
-import { useQuery } from "@tanstack/react-query"
-import type React from "react"
-import type { ReactNode } from "react"
-import { useEffect, useMemo, useState } from "react"
-import { useAccount } from "wagmi"
-import { getChainInfo } from "../../chains.js"
-import { getExplorerUrl } from "../../explorer.js"
-import type { PrepareSendQuote } from "../../prepareSend.js"
-import {
-  type TransactionState,
-  isDisplayableTransactionHash,
-} from "../../transactions.js"
-import { getTxTimeDiff } from "../../transactions.js"
-import { SECOND_MS, formatDuration } from "../../utils/time.js"
-import { hasMetaTxError } from "../../utils/passthrough.js"
-import { useIntentReceiptBalances } from "../hooks/useIntentReceiptBalances.js"
-import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
-import { useTrails } from "../providers/TrailsProvider.js"
-import { hasAnyFailedOrAbortedTransactions } from "../utils/transactionFailure.js"
-import { ChainImage } from "./ChainImage.js"
-import { GreenCheckAnimation } from "./GreenCheckAnimation.js"
-import { QuoteDetails } from "./QuoteDetails.js"
-import ReceiptRecoverableFunds from "./ReceiptRecoverableFunds.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { YellowWarningAnimation } from "./YellowWarningAnimation.js"
-
-interface ReceiptProps {
-  onSendAnother?: () => void
-  onClose: () => void
-  renderInline?: boolean
-  transactionStates?: TransactionState[]
-  totalCompletionSeconds?: number
-  quote?: PrepareSendQuote | null
-  showCloseButton?: boolean
-  actionButtonText?: string
-  onRampQuote?: OnrampQuote | null
-}
-
-// Hook to fetch the time difference in seconds between two transactions on possibly different chains
-function useTxTimeDiff(firstTx?: TransactionState, lastTx?: TransactionState) {
-  const enabled = Boolean(
-    firstTx?.chainId &&
-      lastTx?.chainId &&
-      firstTx &&
-      lastTx &&
-      (firstTx.blockNumber || firstTx.transactionHash) &&
-      (lastTx.blockNumber || lastTx.transactionHash) &&
-      (firstTx.blockNumber !== lastTx.blockNumber ||
-        firstTx.transactionHash !== lastTx.transactionHash),
-  )
-  const { data: completionTimeSeconds = 0 } = useQuery({
-    queryKey: [
-      "completionTimeSeconds",
-      firstTx?.blockNumber,
-      lastTx?.blockNumber,
-      firstTx?.transactionHash,
-      lastTx?.transactionHash,
-      firstTx?.chainId,
-      lastTx?.chainId,
-    ],
-    enabled,
-    queryFn: async () => {
-      return getTxTimeDiff(firstTx, lastTx)
-    },
-    staleTime: Infinity,
-    gcTime: Infinity,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-    retry: false,
-  })
-  return completionTimeSeconds
-}
-
-// Custom hook to compute finalExplorerUrl and completionTimeSeconds
-function useReceipt(transactionStates?: TransactionState[]) {
-  // Find the latest transaction with a hash (regardless of state)
-  // This ensures we can link to explorer even for failed/refunded transactions
-  const latestTxWithHash = (transactionStates || [])
-    .slice()
-    .reverse()
-    .find(
-      (tx) => isDisplayableTransactionHash(tx.transactionHash) && tx.chainId,
-    )
-
-  // Generate explorer URL if we have a hash but no URL
-  const finalExplorerUrl =
-    latestTxWithHash?.explorerUrl ||
-    (isDisplayableTransactionHash(latestTxWithHash?.transactionHash) &&
-    latestTxWithHash?.chainId
-      ? getExplorerUrl({
-          txHash: latestTxWithHash.transactionHash,
-          chainId: latestTxWithHash.chainId,
-        })
-      : null)
-
-  const finalChainId = latestTxWithHash?.chainId
-
-  // Only consider confirmed transactions for completion time
-  const confirmedTxs = (transactionStates || []).filter(
-    (tx) => tx.state === "confirmed",
-  )
-
-  const first = confirmedTxs[0]
-  const last = confirmedTxs[confirmedTxs.length - 1]
-
-  const completionTimeSeconds = useTxTimeDiff(first, last)
-  return { finalExplorerUrl, completionTimeSeconds, finalChainId }
-}
-
-export const Receipt: React.FC<ReceiptProps> = ({
-  onSendAnother,
-  onClose,
-  renderInline = false,
-  transactionStates = [],
-  totalCompletionSeconds,
-  quote,
-  showCloseButton,
-  actionButtonText,
-  onRampQuote,
-}) => {
-  const { address } = useAccount()
-  const { trailsAppUrl } = useTrails()
-  const [showContent, setShowContent] = useState(false)
-  const [showRefundInfo, setShowRefundInfo] = useState(false)
-  const [refundMessage, setRefundMessage] = useState<string | ReactNode | null>(
-    null,
-  )
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setShowContent(true)
-    }, 400)
-
-    return () => clearTimeout(timer)
-  }, [])
-
-  const showMetaTxError = useMemo(() => {
-    return transactionStates.some((tx) => hasMetaTxError(tx))
-  }, [transactionStates])
-
-  const displayTransactionStates = useMemo(() => {
-    const states = [...transactionStates]
-    const refundSource = transactionStates.find(
-      (tx) => tx.refundTransactionHash,
-    )
-    if (!refundSource?.refundTransactionHash) {
-      return states
-    }
-
-    const refundChainId =
-      refundSource.refundTransactionChainId ?? refundSource.chainId
-    const existingIndex = states.findIndex(
-      (tx) => tx.transactionHash === refundSource.refundTransactionHash,
-    )
-    const extractedRefund =
-      existingIndex >= 0 ? states.splice(existingIndex, 1)[0] : undefined
-    const refundState: TransactionState = extractedRefund ?? {
-      transactionHash: refundSource.refundTransactionHash,
-      explorerUrl: getExplorerUrl({
-        txHash: refundSource.refundTransactionHash,
-        chainId: refundChainId,
-      }),
-      chainId: refundChainId,
-      state: refundSource.refunded ? "confirmed" : "pending",
-      label: "Refund",
-      txnMinedAt: refundSource.txnMinedAt,
-    }
-
-    // Keep refund just before the final step to preserve user flow ordering.
-    const insertIndex = Math.max(states.length - 1, 0)
-    states.splice(insertIndex, 0, refundState)
-
-    return states
-  }, [transactionStates])
-
-  const hasRefunded = useMemo(() => {
-    return transactionStates.some((tx) => tx.refunded)
-  }, [transactionStates])
-
-  // Check if any transaction is aborted or failed
-  const hasAborted = useMemo(() => {
-    return transactionStates.some((tx) => tx.state === "aborted")
-  }, [transactionStates])
-
-  const hasFailedOrAborted = useMemo(() => {
-    return hasAnyFailedOrAbortedTransactions(transactionStates)
-  }, [transactionStates])
-
-  const shouldShowRefundInfo = showRefundInfo || hasRefunded
-
-  const buttonText = actionButtonText || "Start new transaction"
-
-  const {
-    finalExplorerUrl,
-    finalChainId,
-    completionTimeSeconds: calculatedCompletionTime,
-  } = useReceipt(transactionStates)
-
-  const refundExplorer = useMemo(() => {
-    if (!shouldShowRefundInfo) return null
-    const refundState = transactionStates.find((tx) => tx.refundTransactionHash)
-    if (!refundState?.refundTransactionHash) return null
-    const chainId = refundState.refundTransactionChainId ?? refundState.chainId
-    return {
-      url: getExplorerUrl({
-        txHash: refundState.refundTransactionHash,
-        chainId,
-      }),
-      chainId,
-    }
-  }, [shouldShowRefundInfo, transactionStates])
-
-  const explorerUrl = refundExplorer?.url ?? finalExplorerUrl ?? undefined
-  const explorerChainId = refundExplorer?.chainId ?? finalChainId
-
-  const intentReceiptUrl = () => {
-    if (!trailsAppUrl || !quote?.intentId) return null
-    return `${trailsAppUrl}/intent/${quote.intentId}`
-  }
-  const trailsIntentUrl = intentReceiptUrl()
-  const [isRecoverableFundsDelayElapsed, setIsRecoverableFundsDelayElapsed] =
-    useState(false)
-
-  useEffect(() => {
-    if (!quote?.intentId) {
-      setIsRecoverableFundsDelayElapsed(false)
-      return
-    }
-
-    setIsRecoverableFundsDelayElapsed(false)
-
-    const timeoutId = setTimeout(() => {
-      setIsRecoverableFundsDelayElapsed(true)
-    }, 2 * SECOND_MS)
-
-    return () => {
-      clearTimeout(timeoutId)
-    }
-  }, [quote?.intentId])
-
-  const {
-    chainGroups: recoverableChainGroups,
-    hasRecoverableFunds,
-    isLoading: isRecoverableFundsLoading,
-    error: recoverableFundsError,
-    refetch: refetchRecoverableFunds,
-  } = useIntentReceiptBalances({
-    intentId: quote?.intentId ?? undefined,
-    ownerAddress: address,
-    enabled: isRecoverableFundsDelayElapsed && !!quote?.intentId,
-  })
-
-  // Use provided totalCompletionSeconds if available, otherwise use calculated time
-  const completionTimeSeconds =
-    totalCompletionSeconds ?? calculatedCompletionTime
-
-  // Detect successful refund events on origin or sweep on destination
-  useEffect(() => {
-    const refundTx = transactionStates?.find((tx) => tx.refunded)
-
-    if (refundTx) {
-      const chainInfo = getChainInfo(refundTx?.chainId)
-      const chainName = chainInfo?.name || "the origin chain"
-      setRefundMessage(
-        <>
-          The transaction call failed, but your funds were successfully refunded
-          on{" "}
-          <span className="inline-flex ml-1 items-center">
-            <span className="mr-1 inline-flex items-center">
-              <ChainImage chainId={refundTx?.chainId} size={16} />
-            </span>
-            <strong>{chainName}</strong>
-          </span>
-          .
-        </>,
-      )
-      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}
-        onRampQuote={onRampQuote}
-        showContent={true}
-        compact={true}
-        liveTransactionStates={displayTransactionStates}
-        hasMetaTxError={hasMetaTxError}
-      />
-    </div>
-  )
-
-  // Only show error state if we truly have no transaction hash at all OR if any transaction is aborted
-  const hasAnyTransactionHash = transactionStates.some((tx) =>
-    isDisplayableTransactionHash(tx.transactionHash),
-  )
-
-  if (
-    (!finalExplorerUrl && !shouldShowRefundInfo && !hasAnyTransactionHash) ||
-    (hasFailedOrAborted && !hasRefunded)
-  ) {
-    return (
-      <div className="flex flex-col justify-center min-h-full space-y-6">
-        <ScreenHeader />
-        <div className="text-center">
-          <div className={`mx-auto flex items-center justify-center mb-4`}>
-            <div className="w-16 h-16 rounded-full flex items-center justify-center bg-red-100 dark:bg-red-900/20">
-              <svg
-                className="w-8 h-8 text-red-500 dark:text-red-400"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <title>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>
-            </div>
-          </div>
-
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
-            Transaction Failed
-          </h2>
-          <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
-            {hasAborted ? (
-              <>
-                The transaction likely timed out and was aborted. Please{" "}
-                <a
-                  href="https://support.trails.build/en/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline"
-                >
-                  contact support
-                </a>{" "}
-                with the intent ID below to request a refund.
-              </>
-            ) : (
-              <>
-                No final transaction hash found. This is likely due to a failed
-                transaction or failed relay. Please{" "}
-                <a
-                  href="https://support.trails.build/en/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline"
-                >
-                  reach out to support
-                </a>
-                .
-              </>
-            )}
-          </p>
-        </div>
-
-        {/* Show Intent ID if available */}
-        {quote?.intentId && (
-          <div className="text-center">
-            <div className="inline-flex flex-col items-center gap-2 p-3 rounded-lg bg-gray-100 dark:bg-gray-800">
-              <span className="text-xs text-gray-600 dark:text-gray-400">
-                Intent ID
-              </span>
-              <code className="text-sm font-mono text-gray-900 dark:text-white break-all">
-                {quote.intentId}
-              </code>
-            </div>
-          </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>
-        )}
-
-        <ReceiptRecoverableFunds
-          hasRecoverableFunds={hasRecoverableFunds}
-          chainGroups={recoverableChainGroups}
-          isLoading={isRecoverableFundsLoading}
-          error={recoverableFundsError?.message || null}
-          trailsIntentUrl={trailsIntentUrl}
-          onRefresh={refetchRecoverableFunds}
-        />
-
-        {/* Quote Details - Show even in failed state */}
-        {quoteDetailsSection}
-
-        {!renderInline && onClose && showCloseButton && (
-          <div className="text-center">
-            <button
-              type="button"
-              onClick={onClose}
-              className="w-full cursor-pointer font-semibold py-3 px-4 trails-border-radius-button transition-colors bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-300 dark:hover:text-white"
-            >
-              Close
-            </button>
-          </div>
-        )}
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex flex-col justify-center min-h-full space-y-6">
-      <ScreenHeader />
-      <div className="text-center mb-2">
-        <div className={`mx-auto flex items-center justify-center`}>
-          {shouldShowRefundInfo || 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">
-            {shouldShowRefundInfo ? "Unable to process." : "Completed"}
-          </h2>
-          {shouldShowRefundInfo && (
-            <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">
-              You were 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"
-              style={{
-                animation: "fadeInUp 0.7s cubic-bezier(0.23, 1, 0.32, 1)",
-                animationFillMode: "both",
-              }}
-            >
-              <div className="inline-block animate-fade-in-up">
-                {shouldShowRefundInfo ? (
-                  <span>Transaction confirmed</span>
-                ) : (
-                  <span>
-                    Completed in{" "}
-                    <strong>{formatDuration(completionTimeSeconds)}</strong>
-                  </span>
-                )}
-              </div>
-              {totalCompletionSeconds &&
-                totalCompletionSeconds < 15 &&
-                !showMetaTxError &&
-                !shouldShowRefundInfo && (
-                  <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); }
-                  100% { opacity: 1; transform: translateY(0); }
-                }
-              `}</style>
-            </div>
-          )}
-
-          {(showMetaTxError || shouldShowRefundInfo) && (
-            <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>
-
-      {(explorerUrl || intentReceiptUrl() || refundExplorer?.url) && (
-        <div
-          className={`text-center transition-all duration-500 ease-out delay-100 ${
-            showContent
-              ? "opacity-100 translate-y-0"
-              : "opacity-0 translate-y-4"
-          }`}
-        >
-          <div className="flex flex-col items-center gap-2">
-            {explorerUrl && (
-              <a
-                href={explorerUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center gap-1 text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors"
-              >
-                {explorerChainId && (
-                  <ChainImage chainId={explorerChainId} size={16} />
-                )}
-                View on Explorer
-                <svg
-                  className="w-4 h-4 ml-1 text-blue-600 dark:text-blue-400"
-                  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>
-            )}
-
-            {intentReceiptUrl && (
-              <a
-                href={intentReceiptUrl() || ""}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center gap-1 text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors"
-              >
-                View Transaction Receipt
-                <svg
-                  className="w-4 h-4 ml-1 text-blue-600 dark:text-blue-400"
-                  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>
-      )}
-
-      {shouldShowRefundInfo && 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-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 trails-border-radius-button transition-colors duration-200 text-white cursor-pointer font-medium"
-            >
-              {buttonText}
-            </button>
-          </div>
-        )}
-
-        <ReceiptRecoverableFunds
-          hasRecoverableFunds={hasRecoverableFunds}
-          chainGroups={recoverableChainGroups}
-          isLoading={isRecoverableFundsLoading}
-          error={recoverableFundsError?.message || null}
-          trailsIntentUrl={trailsIntentUrl}
-          onRefresh={refetchRecoverableFunds}
-        />
-
-        {/* Quote Details */}
-        {quoteDetailsSection}
-
-        {!renderInline && showCloseButton && (
-          <button
-            type="button"
-            onClick={onClose}
-            className="w-full cursor-pointer font-semibold py-3 px-4 trails-border-radius-button transition-colors bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-300 dark:hover:text-white"
-          >
-            Close
-          </button>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default Receipt