0xtrails 0.13.2 → 0.15.0

package/src/widget/components/TransferPendingVertical.tsx

@@ -1,591 +0,0 @@
-import { ChevronRight, ExternalLink } from "lucide-react"
-import type React from "react"
-import { useEffect, useState } from "react"
-import { mainnet } from "viem/chains"
-import { TRAILS_SUPPORT_URL } from "../../constants.js"
-import type { PrepareSendQuote } from "../../prepareSend.js"
-import type { TransactionState } from "../../transactions.js"
-import { formatDuration, MINUTE_MS } from "../../utils/time.js"
-import { hasMetaTxError } from "../../utils/passthrough.js"
-import { useViewManager } from "../hooks/useViewManager.js"
-import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
-import {
-  hasAnyFailedOrAbortedTransactions,
-  hasFailedOrAbortedTransaction,
-} from "../utils/transactionFailure.js"
-import { OFTProgressBar } from "./OFTProgressBar.js"
-import { OriginTransferInformation } from "./OriginTransferInformation.js"
-import { QuoteDetails } from "./QuoteDetails.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { SwapDisplay } from "./SwapDisplay.js"
-
-// OFT (LayerZero) route detection - these routes take longer (5-20 minutes typically)
-const OFT_PROVIDER_ID = "LZ_OFT"
-const isOFTRoute = (routeProviders?: { id: string }[]): boolean => {
-  if (!routeProviders?.length) return false
-  return routeProviders.some((p) => p.id === OFT_PROVIDER_ID)
-}
-
-// Timeout constants
-const OFT_TIMEOUT_MS = 60 * MINUTE_MS // 1 hour for OFT routes
-const DEFAULT_TIMEOUT_MS = MINUTE_MS // 1 minute for normal routes
-const MAINNET_TIMEOUT_MS = 2 * MINUTE_MS // 2 minutes for Ethereum mainnet routes
-const MESH_ONRAMP_TIMEOUT_MS = 3 * MINUTE_MS // 3 minutes for Mesh onramp
-
-// Checkmark icon for completed steps
-const CheckmarkIcon = () => (
-  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-    <title>Completed</title>
-    <path
-      d="M2.5 6L5 8.5L9.5 4"
-      stroke="white"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="animate-draw"
-    />
-  </svg>
-)
-
-// X icon for failed steps
-const XIcon = () => (
-  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-    <title>Failed</title>
-    <path
-      d="M3 3L9 9M9 3L3 9"
-      stroke="white"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="animate-draw"
-    />
-  </svg>
-)
-
-const AlertIcon = () => (
-  <svg
-    className="w-4 h-4 text-white"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-  >
-    <title>An internal meta tx 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>
-)
-
-// Spinner icon for active steps
-const SpinnerIcon = () => (
-  <svg
-    width="12"
-    height="12"
-    viewBox="0 0 12 12"
-    fill="none"
-    className="animate-spin"
-  >
-    <title>Processing</title>
-    <circle
-      cx="6"
-      cy="6"
-      r="4"
-      stroke="white"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeDasharray="6 6"
-      strokeDashoffset="0"
-    />
-  </svg>
-)
-
-interface TransferPendingProps {
-  onElapsedTime: (totalCompletionSeconds?: number) => void
-  transactionStates: TransactionState[]
-  quote?: PrepareSendQuote | null
-  timestamp?: number
-  onContinue?: () => void
-  onRampQuote?: OnrampQuote | null
-  fundMethod?: string | null
-}
-
-export const TransferPending: React.FC<TransferPendingProps> = ({
-  onElapsedTime,
-  transactionStates,
-  quote,
-  onRampQuote,
-  timestamp,
-  onContinue,
-  fundMethod,
-}) => {
-  const { mode } = useViewManager()
-  const [showContent, setShowContent] = useState(false)
-  const [showDots, setShowDots] = useState(false)
-  const [showLine, setShowLine] = useState(false)
-  const [showTimeoutWarning, setShowTimeoutWarning] = useState(false)
-  const [activePendingTimer, setActivePendingTimer] = useState(0)
-  const [depositConfirmedAt, setDepositConfirmedAt] = useState<number | null>(
-    null,
-  )
-  const isOFT = isOFTRoute(quote?.routeProviders)
-  const isMainnetOrigin = quote?.originChain?.id === mainnet.id
-
-  const showContinueButton =
-    hasAnyFailedOrAbortedTransactions(transactionStates) && onContinue
-
-  // Timeout warning: OFT routes can take significantly longer than standard routes.
-  useEffect(() => {
-    const timeoutMs =
-      fundMethod === "onramp-mesh"
-        ? MESH_ONRAMP_TIMEOUT_MS
-        : isOFT
-          ? OFT_TIMEOUT_MS
-          : isMainnetOrigin
-            ? MAINNET_TIMEOUT_MS
-            : DEFAULT_TIMEOUT_MS
-
-    const timeoutTimer = setTimeout(() => {
-      setShowTimeoutWarning(true)
-    }, timeoutMs)
-
-    return () => clearTimeout(timeoutTimer)
-  }, [fundMethod, isMainnetOrigin, isOFT])
-  useEffect(() => {
-    const depositConfirmed = transactionStates?.[0]?.state === "confirmed"
-
-    if (isOFT && depositConfirmed && !depositConfirmedAt) {
-      setDepositConfirmedAt(Date.now())
-    }
-  }, [transactionStates, isOFT, depositConfirmedAt])
-
-  useEffect(() => {
-    // Animate content in
-    const contentTimer = setTimeout(() => {
-      setShowContent(true)
-    }, 200)
-
-    return () => clearTimeout(contentTimer)
-  }, [])
-
-  useEffect(() => {
-    // Show dots first, then animate them in
-    const dotsTimer = setTimeout(() => {
-      setShowDots(true)
-    }, 400)
-
-    // Show line after dots are visible
-    const lineTimer = setTimeout(() => {
-      setShowLine(true)
-    }, 800)
-
-    return () => {
-      clearTimeout(dotsTimer)
-      clearTimeout(lineTimer)
-    }
-  }, [])
-
-  const [activePendingIndex, setActivePendingIndex] = useState(-1)
-
-  useEffect(() => {
-    const newActiveIndex = transactionStates.findIndex(
-      (tx) => tx.state === "pending",
-    )
-
-    if (newActiveIndex !== activePendingIndex) {
-      setActivePendingIndex(newActiveIndex)
-      setActivePendingTimer(0)
-    }
-  }, [transactionStates, activePendingIndex])
-
-  // Add CSS animation for draw effect
-  useEffect(() => {
-    const style = document.createElement("style")
-    style.textContent = `
-      @keyframes draw {
-        from {
-          stroke-dasharray: 0 100;
-        }
-        to {
-          stroke-dasharray: 100 0;
-        }
-      }
-
-      .animate-draw {
-        animation: draw 0.6s ease-out forwards;
-      }
-
-      @keyframes slideInFromTop {
-        from {
-          transform: translateY(-20px);
-        }
-        to {
-          transform: translateY(0);
-        }
-      }
-
-      @keyframes lineGrow {
-        from {
-          height: 0;
-        }
-        to {
-          height: 100%;
-        }
-      }
-
-      .animate-slide-in {
-        animation: slideInFromTop 0.3s ease-out forwards;
-      }
-
-      .animate-line-grow {
-        animation: lineGrow 0.6s ease-out forwards;
-      }
-    `
-    document.head.appendChild(style)
-
-    return () => {
-      document.head.removeChild(style)
-    }
-  }, [])
-
-  // Live timer state for 'Sent just now'
-  const [elapsedSeconds, setElapsedSeconds] = useState(0)
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setElapsedSeconds((prev) => prev + 1)
-    }, 1000)
-    return () => clearInterval(interval)
-  }, [])
-
-  // Timer for active pending transaction
-  useEffect(() => {
-    if (activePendingIndex >= 0) {
-      const interval = setInterval(() => {
-        setActivePendingTimer((prev) => prev + 1)
-      }, 1000)
-      return () => clearInterval(interval)
-    }
-  }, [activePendingIndex])
-
-  useEffect(() => {
-    onElapsedTime(elapsedSeconds)
-  }, [onElapsedTime, elapsedSeconds])
-
-  // Compute effective states: a tx is only confirmed if all previous are confirmed, else pending
-  const effectiveStates: TransactionState[] = []
-  let foundUnconfirmed = false
-  for (const tx of transactionStates) {
-    if (foundUnconfirmed || tx.state !== "confirmed") {
-      foundUnconfirmed = true
-      effectiveStates.push({
-        ...tx,
-        state: tx.state === "confirmed" ? "pending" : tx.state,
-      })
-    } else {
-      effectiveStates.push(tx)
-    }
-  }
-
-  const renderStep = (tx: TransactionState, index: number) => {
-    const isActivePending = index === activePendingIndex
-    const isCompleted = tx.state === "confirmed"
-    const isFailed = hasFailedOrAbortedTransaction(tx)
-
-    // Check if this transaction has meta tx errors
-    const txHasMetaError = hasMetaTxError(tx)
-
-    // Check if any previous transaction has failed (to disable spinners after failure)
-    const hasPreviousFailure = transactionStates
-      .slice(0, index)
-      .some((prevTx) => hasFailedOrAbortedTransaction(prevTx))
-
-    // Determine step state
-    let stepState: "completed" | "active" | "pending" | "failed"
-    if (isFailed) {
-      stepState = "failed"
-    } else if (isCompleted) {
-      stepState = "completed"
-    } else if (isActivePending && !hasPreviousFailure) {
-      stepState = "active"
-    } else {
-      stepState = "pending"
-    }
-
-    // Circle styles based on state
-    const getCircleStyles = () => {
-      const baseStyles =
-        "w-5 h-5 rounded-full flex items-center justify-center transition-all duration-500 ease-out"
-
-      switch (stepState) {
-        case "completed":
-          if (txHasMetaError) {
-            return `${baseStyles} bg-orange-500 scale-100`
-          }
-          return `${baseStyles} bg-green-600 dark:bg-green-500 scale-100`
-        case "active":
-          return `${baseStyles} bg-blue-600 dark:bg-blue-500 scale-110`
-        case "failed":
-          return `${baseStyles} bg-red-600 dark:bg-red-500 scale-100`
-        case "pending":
-          return `${baseStyles} bg-gray-300 dark:bg-gray-600 scale-100`
-      }
-    }
-
-    // Text styles based on state
-    const getTextStyles = () => {
-      const baseStyles =
-        "text-sm font-medium transition-all duration-500 ease-out"
-
-      // Use regular colors instead of state-based colors
-      return `${baseStyles} text-gray-900 dark:text-white`
-    }
-
-    const content = (
-      <div className="flex items-start space-x-4">
-        {/* Circle with state indicator */}
-        <div className="flex-shrink-0">
-          <div className={getCircleStyles()}>
-            {stepState === "completed" && !txHasMetaError && <CheckmarkIcon />}
-            {stepState === "completed" && txHasMetaError && <AlertIcon />}
-            {stepState === "failed" && <XIcon />}
-            {stepState === "active" && <SpinnerIcon />}
-          </div>
-        </div>
-
-        {/* Step content */}
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center space-x-2">
-            <span className={getTextStyles()}>{tx.label}</span>
-            {stepState === "completed" ? (
-              <ExternalLink className="w-4 h-4 text-gray-400 transition-opacity duration-300" />
-            ) : stepState === "active" ? (
-              <span
-                className="text-xs text-gray-500 dark:text-gray-400 font-mono animate-pulse mt-1"
-                title="Elapsed time"
-              >
-                {formatDuration(activePendingTimer)}
-              </span>
-            ) : (
-              <div className="w-4 h-4" />
-            )}
-          </div>
-        </div>
-      </div>
-    )
-
-    if (stepState === "completed" || stepState === "failed") {
-      return (
-        <a
-          href={tx.explorerUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="block hover:opacity-80 transition-all duration-300 ease-out"
-        >
-          {content}
-        </a>
-      )
-    }
-
-    return <div className="block">{content}</div>
-  }
-
-  return (
-    <div className="space-y-2 flex flex-col items-center justify-center py-8">
-      <div
-        className={`w-full max-w-sm transition-all duration-500 ease-out ${
-          showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
-        }`}
-      >
-        <ScreenHeader
-          headerContent={
-            mode === "swap" ? "Swap in progress" : "Transaction Status"
-          }
-          headerContentAlign="center"
-        />
-      </div>
-
-      {/* Transfer Information Display */}
-      {quote && (
-        <div
-          className={`w-full max-w-sm transition-all duration-500 ease-out delay-100 ${
-            showContent
-              ? "opacity-100 translate-y-0"
-              : "opacity-0 translate-y-4"
-          }`}
-        >
-          {mode === "swap" ? (
-            <SwapDisplay quote={quote} elapsedSeconds={elapsedSeconds} />
-          ) : (
-            <OriginTransferInformation
-              quote={quote}
-              elapsedSeconds={elapsedSeconds}
-              timestamp={timestamp}
-            />
-          )}
-        </div>
-      )}
-
-      {/* Vertical Stepper */}
-      <div className="mb-2 w-full mx-auto" style={{ width: "auto" }}>
-        <div className="relative">
-          {/* Vertical line connecting all steps */}
-          <div
-            className={`absolute left-2.5 top-5 bottom-5 w-0.5 transition-all duration-500 ease-out bg-gray-300 dark:bg-gray-700 ${showLine ? "animate-line-grow" : "h-0"}`}
-          />
-
-          {/* Progress line for completed steps (excluding those with meta tx errors) */}
-          {activePendingIndex > 0 && showLine && (
-            <div
-              className="absolute left-2.5 top-5 w-0.5 bg-green-500 transition-all duration-1000 ease-out"
-              style={{
-                height: `${(() => {
-                  // Find the last step that was completed without meta tx errors
-                  let lastGoodStepIndex = -1
-                  for (let i = 0; i < transactionStates.length; i++) {
-                    const tx = transactionStates[i]
-                    if (
-                      tx &&
-                      tx.state === "confirmed" &&
-                      !hasFailedOrAbortedTransaction(tx)
-                    ) {
-                      lastGoodStepIndex = i
-                    } else if (hasFailedOrAbortedTransaction(tx)) {
-                      // Stop at first failure
-                      break
-                    }
-                  }
-                  return lastGoodStepIndex >= 0
-                    ? (lastGoodStepIndex / (transactionStates.length - 1)) * 80
-                    : 0
-                })()}%`,
-                maxHeight: "calc(100% - 20px)",
-              }}
-            />
-          )}
-
-          {/* Steps */}
-          <div className="space-y-6 mt-4">
-            {effectiveStates.map((tx, index) => (
-              <div
-                key={`${tx.transactionHash}-${index}`}
-                className="relative transition-all duration-300 ease-out"
-                style={{
-                  transitionDelay: showDots ? `${index * 100}ms` : "0ms",
-                  transform: showDots ? "translateY(0)" : "translateY(-20px)",
-                  visibility: showDots ? "visible" : "hidden",
-                }}
-              >
-                {renderStep(tx, index)}
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* OFT Progress Bar - uses quote-provided estimate when available */}
-      {isOFT &&
-        depositConfirmedAt &&
-        quote?.completionEstimateSeconds != null && (
-          <OFTProgressBar
-            depositConfirmedAt={depositConfirmedAt}
-            estimatedDurationSeconds={quote.completionEstimateSeconds}
-            showContent={showContent}
-          />
-        )}
-
-      {/* Continue Button - Show only when there are failures */}
-      {showContinueButton && (
-        <div
-          className={`w-full max-w-sm transition-all duration-500 ease-out delay-150 mt-4 flex justify-center ${
-            showContent
-              ? "opacity-100 translate-y-0"
-              : "opacity-0 translate-y-4"
-          }`}
-        >
-          <button
-            type="button"
-            onClick={onContinue}
-            className="inline-flex items-center gap-1 px-4 py-2 trails-border-radius-button font-medium transition-colors cursor-pointer bg-blue-500 hover:bg-blue-600 text-white dark:bg-blue-600 dark:hover:bg-blue-700"
-          >
-            Continue
-            <ChevronRight className="w-4 h-4" />
-          </button>
-        </div>
-      )}
-
-      {/* Details Section */}
-      {quote && (
-        <div
-          className={`w-full max-w-sm transition-all duration-500 ease-out delay-200 ${
-            showContent
-              ? "opacity-100 translate-y-0"
-              : "opacity-0 translate-y-4"
-          }`}
-        >
-          <div className="mt-4">
-            <QuoteDetails
-              quote={quote}
-              onRampQuote={onRampQuote}
-              showContent={true}
-              compact={true}
-              liveTransactionStates={transactionStates}
-              hasMetaTxError={hasMetaTxError}
-            />
-          </div>
-        </div>
-      )}
-
-      {/* Timeout Warning */}
-      {showTimeoutWarning && !showContinueButton && (
-        <div
-          className={`w-full max-w-sm transition-all duration-500 ease-out delay-250 ${
-            showContent
-              ? "opacity-100 translate-y-0"
-              : "opacity-0 translate-y-4"
-          }`}
-        >
-          <div className="p-4 trails-border-radius-container text-sm bg-yellow-50 border border-solid border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-700/50">
-            <div className="flex items-start space-x-3">
-              <svg
-                className="w-5 h-5 mt-0.5 flex-shrink-0 text-yellow-600 dark:text-yellow-400"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <title>Warning</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>
-                <p className="font-medium text-yellow-800 dark:text-yellow-300">
-                  Transaction taking longer than expected
-                </p>
-                <p className="mt-1 text-xs text-yellow-700 dark:text-yellow-400">
-                  This transaction is taking longer than expected.{" "}
-                  <a
-                    href={TRAILS_SUPPORT_URL}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline"
-                  >
-                    Visit support
-                  </a>{" "}
-                  for help if the issue persists.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default TransferPending

package/src/widget/components/TruncatedAddress.tsx

@@ -1,68 +0,0 @@
-import type React from "react"
-import { useState } from "react"
-import { getExplorerUrlForAddress } from "../../explorer.js"
-import { truncateAddress } from "../../utils/address.js"
-
-interface TruncatedAddressProps {
-  address: string
-  chainId: number
-  className?: string
-  expandOnHover?: boolean
-  sliceStart?: number
-  sliceEnd?: number
-}
-
-export const TruncatedAddress: React.FC<TruncatedAddressProps> = ({
-  address,
-  chainId,
-  className = "",
-  expandOnHover = false,
-  sliceStart = 6,
-  sliceEnd = 4,
-}) => {
-  const [isHovered, setIsHovered] = useState(false)
-
-  const truncatedAddress = truncateAddress(address, sliceStart, sliceEnd)
-  const explorerUrl = getExplorerUrlForAddress({ address, chainId })
-
-  if (!expandOnHover) {
-    return (
-      <a
-        href={explorerUrl}
-        target="_blank"
-        rel="noopener noreferrer"
-        className={`font-mono cursor-pointer hover:underline ${className}`}
-      >
-        {truncatedAddress}
-      </a>
-    )
-  }
-
-  return (
-    <a
-      href={explorerUrl}
-      target="_blank"
-      rel="noopener noreferrer"
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      className={`font-mono transition-all duration-300 cursor-pointer hover:underline relative inline-block ${className}`}
-    >
-      <span
-        className={`transition-all duration-300 ${
-          isHovered ? "opacity-0" : "opacity-100"
-        }`}
-      >
-        {truncatedAddress}
-      </span>
-      <span
-        className={`absolute left-0 top-0 transition-all duration-300 underline ${
-          isHovered ? "opacity-100" : "opacity-0"
-        }`}
-      >
-        {address}
-      </span>
-    </a>
-  )
-}
-
-export default TruncatedAddress