0xtrails 0.13.1 → 0.14.0

package/src/widget/components/MeldTransactionStatus.tsx

@@ -1,255 +0,0 @@
-import {
-  AlertTriangle,
-  CheckCircle,
-  Clock,
-  ExternalLink,
-  Loader2,
-  XCircle,
-} from "lucide-react"
-import type React from "react"
-import { getChainName } from "../../chains.js"
-import { formatDuration } from "../../utils/time.js"
-import { useEffect, useState } from "react"
-import {
-  useMeldTransactionStatus,
-  type TransactionStatusInfo,
-} from "../hooks/useMeldTransactionStatus.js"
-import { TokenImage } from "./TokenImage.js"
-
-export interface MeldTransactionStatusProps {
-  sessionId?: string | null
-  transactionId?: string | null
-  externalSessionId?: string | null
-  className?: string
-  onStatusChange?: (status: TransactionStatusInfo) => void
-  onWindowClosed?: () => void
-  showTimeElapsed?: boolean
-  showPopupOpened?: boolean // Show status when popup is opened but no session ID yet
-  isPopupOpen?: boolean // Simple boolean to avoid window object serialization issues
-  onSetWindowRef?: (setWindowRef: (ref: Window | null) => void) => void // Callback to get setWindowRef function
-}
-
-/**
- * Component that displays the current status of a Meld transaction
- * with loading indicators, success/failure states, and time elapsed tracking
- */
-export function MeldTransactionStatus({
-  sessionId,
-  transactionId,
-  externalSessionId,
-  className = "",
-  onStatusChange,
-  onWindowClosed,
-  showTimeElapsed = true,
-  showPopupOpened = false,
-  isPopupOpen = false,
-  onSetWindowRef,
-}: MeldTransactionStatusProps): React.ReactElement | null {
-  const [mounted, setMounted] = useState(false)
-
-  const { state, statusInfo, timeElapsed, isLoading, setWindowRef } =
-    useMeldTransactionStatus({
-      sessionId,
-      transactionId,
-      externalSessionId,
-      enabled: !!sessionId || !!transactionId || !!externalSessionId,
-      trackTimeElapsed: showTimeElapsed,
-      onStatusChange,
-      onWindowClosed,
-      popupOpened: isPopupOpen,
-    })
-
-  // Provide setWindowRef callback to parent
-  useEffect(() => {
-    if (onSetWindowRef) {
-      onSetWindowRef(setWindowRef)
-    }
-  }, [onSetWindowRef, setWindowRef])
-
-  // Handle mounting to avoid hydration issues
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  // Don't render anything if no session/transaction/externalSession ID or not mounted, unless popup is opened
-  if (
-    !mounted ||
-    (!sessionId && !transactionId && !externalSessionId && !showPopupOpened)
-  ) {
-    return null
-  }
-
-  // Show popup opened state when popup is open but no session ID yet
-  if (state === "idle" && showPopupOpened && isPopupOpen) {
-    return (
-      <div
-        className={`flex items-center gap-3 p-4 rounded-lg border transition-all duration-200 bg-blue-50 border-blue-200 text-blue-800 ${className}`}
-      >
-        {/* Status Icon */}
-        <div className="flex-shrink-0">
-          <ExternalLink className="w-4 h-4 text-blue-600" />
-        </div>
-
-        {/* Status Content */}
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2">
-            <span className="text-sm font-medium trails-text-primary">
-              Payment Window Opened
-            </span>
-          </div>
-
-          <p className="text-xs trails-text-secondary mt-1">
-            Complete your payment to continue...
-          </p>
-        </div>
-      </div>
-    )
-  }
-
-  // Don't show anything in idle state (when no popup is shown)
-  if (state === "idle") {
-    return null
-  }
-
-  return (
-    <div
-      className={`flex items-center gap-3 p-4 rounded-lg border transition-all duration-200 ${getStateStyles(
-        state,
-      )} ${className}`}
-    >
-      {/* Status Icon */}
-      <div className="flex-shrink-0">{getStatusIcon(state, isLoading)}</div>
-
-      {/* Status Content */}
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-medium trails-text-primary">
-            {getStatusTitle(state)}
-          </span>
-          {showTimeElapsed && timeElapsed > 0 && state === "polling" && (
-            <div className="flex items-center gap-1 text-xs trails-text-tertiary">
-              <Clock className="w-3 h-3" />
-              <span>{formatDuration(timeElapsed)}</span>
-            </div>
-          )}
-        </div>
-
-        <p className="text-xs trails-text-secondary mt-1">
-          {statusInfo.message}
-        </p>
-
-        {/* Transaction Details for Success */}
-        {state === "success" && statusInfo.transaction && (
-          <div className="mt-2 flex items-center gap-1.5 text-xs trails-text-tertiary">
-            {statusInfo.transaction.destinationAmount &&
-              statusInfo.transaction.destinationCurrencyCode && (
-                <>
-                  <TokenImage
-                    symbol={
-                      statusInfo.transaction.destinationCurrencyCode?.split(
-                        "_",
-                      )[0] || statusInfo.transaction.destinationCurrencyCode
-                    }
-                    chainId={statusInfo.transaction.destinationChainId}
-                    size={14}
-                  />
-                  <span>
-                    {statusInfo.transaction.destinationAmount}{" "}
-                    {statusInfo.transaction.destinationCurrencyCode}
-                    {statusInfo.transaction.destinationChainId && (
-                      <span className="text-gray-500">
-                        {" "}
-                        on{" "}
-                        {getChainName(
-                          statusInfo.transaction.destinationChainId,
-                        )}
-                      </span>
-                    )}
-                    {statusInfo.transaction.serviceProvider && (
-                      <span className="ml-1">
-                        {" "}
-                        via{" "}
-                        {statusInfo.transaction.serviceProvider.toUpperCase()}
-                      </span>
-                    )}
-                  </span>
-                </>
-              )}
-          </div>
-        )}
-
-        {/* Error Details */}
-        {(state === "error" || state === "failed") && (
-          <div className="mt-2 text-xs text-red-600">
-            {statusInfo.error?.message}
-            {statusInfo.transaction?.serviceProvider && (
-              <div className="mt-1">
-                Provider: {statusInfo.transaction.serviceProvider}
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-// Helper function to get status icon
-function getStatusIcon(state: string, isLoading: boolean): React.ReactElement {
-  switch (state) {
-    case "polling":
-      return <Loader2 className="w-4 h-4 animate-spin text-blue-600" />
-    case "success":
-      return <CheckCircle className="w-4 h-4 text-green-600" />
-    case "failed":
-    case "error":
-      return <XCircle className="w-4 h-4 text-red-600" />
-    case "window-closed":
-      return <AlertTriangle className="w-4 h-4 text-orange-600" />
-    default:
-      return isLoading ? (
-        <Loader2 className="w-4 h-4 animate-spin text-gray-400" />
-      ) : (
-        <Clock className="w-4 h-4 text-gray-400" />
-      )
-  }
-}
-
-// Helper function to get status title
-function getStatusTitle(state: string): string {
-  switch (state) {
-    case "opening":
-      return "Payment Window Opened"
-    case "polling":
-      return "Processing Payment"
-    case "success":
-      return "Payment Completed"
-    case "failed":
-      return "Payment Failed"
-    case "error":
-      return "Connection Error"
-    case "window-closed":
-      return "Payment Window Closed"
-    default:
-      return "Payment Status"
-  }
-}
-
-// Helper function to get styling classes for each state
-function getStateStyles(state: string): string {
-  switch (state) {
-    case "success":
-      return "bg-green-50 border-green-200 text-green-800"
-    case "failed":
-    case "error":
-      return "bg-red-50 border-red-200 text-red-800"
-    case "window-closed":
-      return "bg-orange-50 border-orange-200 text-orange-800"
-    case "polling":
-      return "bg-blue-50 border-blue-200 text-blue-800"
-    case "opening":
-      return "bg-yellow-50 border-yellow-200 text-yellow-800"
-    default:
-      return "bg-gray-50 border-gray-200 text-gray-800"
-  }
-}

package/src/widget/components/Modal.tsx

@@ -1,86 +0,0 @@
-import { AnimatePresence, motion } from "motion/react"
-import type React from "react"
-import { useEffect, useRef } from "react"
-
-interface ModalProps {
-  isOpen: boolean
-  onClose: () => void
-  children: React.ReactNode
-}
-
-const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
-  const modalRef = useRef<HTMLDivElement>(null)
-
-  // Handle escape key
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        onClose()
-      }
-    }
-
-    if (isOpen) {
-      document.addEventListener("keydown", handleEscape)
-    }
-
-    return () => {
-      document.removeEventListener("keydown", handleEscape)
-    }
-  }, [isOpen, onClose])
-
-  // Handle click outside
-  const handleClickOutside = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
-      onClose()
-    }
-  }
-
-  return (
-    <AnimatePresence>
-      {isOpen && (
-        <>
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.2 }}
-            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 h-full w-full"
-            onClick={onClose}
-          />
-          <div
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby="modal-title"
-            className="fixed inset-0 flex items-center justify-center z-50 p-0 sm:p-4 h-full w-full text-gray-900 dark:text-white"
-            onClick={handleClickOutside}
-            onKeyDown={(e) => {
-              if (e.key === "Escape") {
-                onClose?.()
-              }
-            }}
-          >
-            <motion.div
-              ref={modalRef}
-              initial={{ opacity: 0, scale: 0.95, y: 10 }}
-              animate={{ opacity: 1, scale: 1, y: 0 }}
-              exit={{ opacity: 0, scale: 0.95, y: 10 }}
-              transition={{
-                type: "spring",
-                stiffness: 400,
-                damping: 25,
-                mass: 0.8,
-              }}
-              className="pointer-events-auto relative"
-              layoutId="modal-content"
-              layout="preserve-aspect"
-            >
-              {children}
-            </motion.div>
-          </div>
-        </>
-      )}
-    </AnimatePresence>
-  )
-}
-
-export default Modal

package/src/widget/components/OFTProgressBar.tsx

@@ -1,89 +0,0 @@
-import type React from "react"
-import { useEffect, useState } from "react"
-import { formatDuration } from "../../utils/time.js"
-
-interface OFTProgressBarProps {
-  /** Timestamp when the deposit was confirmed */
-  depositConfirmedAt: number
-  /** Estimated total duration in seconds */
-  estimatedDurationSeconds: number
-  /** Whether to show with animation */
-  showContent?: boolean
-}
-
-/**
- * Progress bar component for OFT (LayerZero) transfers.
- * Shows a 20-minute countdown after the deposit is confirmed.
- */
-export const OFTProgressBar: React.FC<OFTProgressBarProps> = ({
-  depositConfirmedAt,
-  estimatedDurationSeconds,
-  showContent = true,
-}) => {
-  const hasValidDuration =
-    Number.isFinite(estimatedDurationSeconds) && estimatedDurationSeconds > 0
-  const clampedDurationSeconds = hasValidDuration ? estimatedDurationSeconds : 0
-  const progressDurationMs = clampedDurationSeconds * 1000
-
-  const [progress, setProgress] = useState(0)
-  const [remainingMinutes, setRemainingMinutes] = useState(
-    Math.ceil(clampedDurationSeconds / 60),
-  )
-
-  useEffect(() => {
-    if (!hasValidDuration) {
-      setProgress(0)
-      setRemainingMinutes(0)
-      return
-    }
-
-    const updateProgress = () => {
-      const elapsed = Date.now() - depositConfirmedAt
-      const newProgress = Math.min((elapsed / progressDurationMs) * 100, 100)
-      const remaining = Math.max(
-        0,
-        Math.ceil((progressDurationMs - elapsed) / 60000),
-      )
-      setProgress(newProgress)
-      setRemainingMinutes(remaining)
-    }
-
-    updateProgress()
-
-    const interval = setInterval(updateProgress, 1000)
-    return () => clearInterval(interval)
-  }, [depositConfirmedAt, hasValidDuration, progressDurationMs])
-
-  if (!hasValidDuration) {
-    return null
-  }
-
-  return (
-    <div
-      className={`w-full max-w-sm transition-all duration-500 ease-out mt-4 ${
-        showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
-      }`}
-    >
-      <div className="flex justify-between text-sm text-gray-600 dark:text-gray-400 mb-2">
-        <span>Bridging via LayerZero</span>
-        <span>
-          {remainingMinutes > 0
-            ? `${remainingMinutes} min remaining`
-            : "completing soon"}
-        </span>
-      </div>
-      <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
-        <div
-          className="h-full bg-blue-500 dark:bg-blue-400 transition-all duration-1000"
-          style={{ width: `${progress}%` }}
-        />
-      </div>
-      <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center">
-        LayerZero OFT transfers typically complete in about{" "}
-        {formatDuration(clampedDurationSeconds)}
-      </p>
-    </div>
-  )
-}
-
-export default OFTProgressBar

package/src/widget/components/OnRampProviderSelector.tsx

@@ -1,263 +0,0 @@
-import { ChevronDown } from "lucide-react"
-import type React from "react"
-import { useEffect, useRef, useState } from "react"
-import { formatUnits } from "viem"
-import { isValidNumber } from "../../utils/validation.js"
-import type { MeldQuote } from "../../meld/utils/meld.js"
-import type { PrepareSendQuote } from "../../prepareSend.js"
-
-interface OnRampProviderSelectorProps {
-  providers: MeldQuote[]
-  selectedProvider: MeldQuote | null
-  setSelectedProvider: (provider: MeldQuote) => void
-  trailsQuote: PrepareSendQuote | null
-  isRefetching?: boolean // When true, hide the component
-}
-
-export const OnRampProviderSelector: React.FC<OnRampProviderSelectorProps> = ({
-  providers,
-  selectedProvider,
-  trailsQuote,
-  setSelectedProvider,
-  isRefetching,
-}) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const accordionRef = useRef<HTMLDivElement>(null)
-  const contentRef = useRef<HTMLDivElement>(null)
-
-  // The recommended provider is always the first in the list — no state needed
-  const recommendedProvider = providers?.[0] ?? null
-
-  // Auto-select first provider when none is selected
-  useEffect(() => {
-    if (providers && providers.length > 0 && !selectedProvider) {
-      setSelectedProvider(providers[0]!)
-    }
-  }, [providers, selectedProvider, setSelectedProvider])
-
-  if (isRefetching) {
-    return null
-  }
-
-  if (!providers || providers.length === 0) {
-    return null
-  }
-
-  const handleProviderSelect = (provider: MeldQuote) => {
-    setSelectedProvider(provider)
-    setIsOpen(false)
-  }
-
-  const displayProvider = selectedProvider || providers[0]
-
-  const getTokensPerUsd = (): number => {
-    if (
-      !selectedProvider?.destinationAmount ||
-      !trailsQuote?.destinationAmount ||
-      !trailsQuote?.destinationToken?.decimals
-    ) {
-      return 0
-    }
-
-    // Destination token for the onramp provider is always USDC, this will be converted into the user's destination token
-    // (FIAT --> USDC on Base --> user's destination token)
-    const selectedProviderUsd = Number(selectedProvider.destinationAmount)
-    const destinationTokenAmount = Number(
-      formatUnits(
-        BigInt(trailsQuote.destinationAmount),
-        trailsQuote.destinationToken.decimals,
-      ),
-    )
-
-    if (selectedProviderUsd === 0) {
-      return 0
-    }
-
-    return destinationTokenAmount / selectedProviderUsd
-  }
-
-  // Estimate the destination token amount for non-selected providers because we do not have a trails quote
-  const getEstimatedDestinationTokenAmount = (provider: MeldQuote): string => {
-    if (!trailsQuote?.destinationToken?.symbol) {
-      return "0"
-    }
-
-    const tokensPerUsd = getTokensPerUsd()
-    if (tokensPerUsd === 0) {
-      return "0"
-    }
-
-    const providerUsd = Number(provider.destinationAmount)
-    const estimatedTokens = providerUsd * tokensPerUsd
-
-    return `${estimatedTokens.toFixed(6)} ${trailsQuote.destinationToken.symbol}`
-  }
-
-  const getEstimatedDestinationTokenAmountUsd = (
-    provider: MeldQuote,
-  ): string => {
-    const providerUsd = Number(provider.destinationAmount)
-    return `$${providerUsd.toFixed(2)}`
-  }
-
-  const getSelectedProviderDestinationTokenAmountUsd = (): string => {
-    // For USDC (and other USD stablecoins), use the token amount as USD directly
-    const tokenSymbol = trailsQuote?.destinationToken?.symbol?.toUpperCase()
-    const isUsdStablecoin = tokenSymbol === "USDC"
-
-    if (isUsdStablecoin && trailsQuote?.destinationAmountFormatted) {
-      const amount = parseFloat(trailsQuote.destinationAmountFormatted)
-      if (isValidNumber(amount)) {
-        return `$${amount.toFixed(2)}`
-      }
-    }
-
-    // If we have a USD display value, use it as fallback
-    if (trailsQuote?.destinationAmountUsdDisplay) {
-      return trailsQuote.destinationAmountUsdDisplay
-    }
-
-    return `$0`
-  }
-
-  const getSelectedProviderDestinationTokenAmount = (): string => {
-    if (
-      !trailsQuote?.destinationAmountFormatted ||
-      !trailsQuote?.destinationToken?.symbol
-    ) {
-      return "0"
-    }
-    return `${trailsQuote.destinationAmountDisplay} ${trailsQuote.destinationToken.symbol}`
-  }
-
-  if (providers.length === 1 && displayProvider) {
-    return (
-      <div className="space-y-1" ref={accordionRef}>
-        <div className="p-2">
-          <div className="flex justify-between items-center mb-2">
-            <div className="text-xs font-medium trails-text-primary">
-              Onramp Provider
-            </div>
-          </div>
-          <div className="mt-2 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <div className="flex flex-col">
-                  <div className="text-sm font-medium text-gray-900 dark:text-white">
-                    {displayProvider.serviceProvider}
-                  </div>
-                  {displayProvider === recommendedProvider && (
-                    <span className="ml-2 text-xs text-green-600 dark:text-green-400">
-                      (Recommended)
-                    </span>
-                  )}
-                </div>
-              </div>
-              <div className="text-right">
-                <div className="text-sm font-medium text-gray-900 dark:text-white">
-                  {getSelectedProviderDestinationTokenAmount()}
-                </div>
-                <div className="text-xs text-gray-500 dark:text-gray-400">
-                  {getSelectedProviderDestinationTokenAmountUsd()}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div ref={accordionRef}>
-      <div className="p-2">
-        <button
-          className="w-full flex justify-between items-center mb-2 cursor-pointer"
-          type="button"
-          onClick={() => setIsOpen(!isOpen)}
-        >
-          <div className="text-sm font-semibold text-gray-900 dark:text-white">
-            Onramp Provider
-          </div>
-          <div className="flex items-center gap-2">
-            {displayProvider && (
-              <div className="text-sm font-medium text-gray-600 dark:text-gray-400">
-                {displayProvider.serviceProvider}
-              </div>
-            )}
-            <ChevronDown
-              className={`w-3 h-3 transition-transform duration-300 ease-out text-gray-600 dark:text-gray-400 ${
-                isOpen ? "rotate-180" : ""
-              }`}
-            />
-          </div>
-        </button>
-
-        <div
-          ref={contentRef}
-          className={`overflow-auto transition-all duration-300 ease-out ${
-            isOpen ? "max-h-[250px] opacity-100" : "max-h-0 opacity-0"
-          }`}
-        >
-          <div className="mt-2 space-y-1">
-            {providers.map((provider, index) => {
-              const isSelected =
-                selectedProvider?.serviceProvider === provider.serviceProvider
-
-              return (
-                <button
-                  key={`${provider.serviceProvider}-${index}`}
-                  type="button"
-                  onClick={() => handleProviderSelect(provider)}
-                  className={`w-full p-3 rounded-lg border transition-all cursor-pointer ${
-                    isSelected
-                      ? "bg-blue-50 dark:bg-blue-900/20 border-blue-300 dark:border-blue-700"
-                      : "bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-750"
-                  }`}
-                >
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      <div className="text-left">
-                        <div className="text-sm font-medium text-gray-900 dark:text-white">
-                          {provider.serviceProvider}
-                        </div>
-                        {providers[0]?.serviceProvider ===
-                          provider.serviceProvider && (
-                          <span className="text-xs text-green-600 dark:text-green-400">
-                            (Recommended)
-                          </span>
-                        )}
-                      </div>
-                    </div>
-
-                    {isSelected ? (
-                      <div className="text-right">
-                        <div className="text-sm font-medium text-gray-900 dark:text-white">
-                          {getSelectedProviderDestinationTokenAmount()}
-                        </div>
-                        <div className="text-xs text-gray-500 dark:text-gray-400">
-                          {getSelectedProviderDestinationTokenAmountUsd()}
-                        </div>
-                      </div>
-                    ) : (
-                      <div className="text-right">
-                        <div className="text-sm font-medium text-gray-900 dark:text-white">
-                          {getEstimatedDestinationTokenAmount(provider)}
-                        </div>
-                        <div className="text-xs text-gray-500 dark:text-gray-400">
-                          {getEstimatedDestinationTokenAmountUsd(provider)}
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </button>
-              )
-            })}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default OnRampProviderSelector