0xtrails 0.13.2 → 0.15.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/MeshExchangeSelection.tsx

@@ -1,218 +0,0 @@
-import { useQuery } from "@tanstack/react-query"
-import { ChevronRight } from "lucide-react"
-import type React from "react"
-import { useState } from "react"
-import { useOnrampClient } from "../../onrampClient.js"
-import { logger } from "../../logger.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { useWidgetProps } from "../hooks/useWidgetProps.js"
-import { getActiveMeshEnvironment } from "../utils/onrampConfig.js"
-import { getWidgetOnrampConfig } from "../utils/trailsOnrampConfig.js"
-
-const INITIAL_VISIBLE_EXCHANGES = 3
-
-export interface MeshExchangeSelectionProps {
-  onBack: () => void
-  onSelectExchange: (exchange: {
-    integrationId: string
-    exchangeKey: string
-    exchangeName: string
-  }) => void
-}
-
-function getExchangeBackgroundClassName(exchangeKey: string): string {
-  switch (exchangeKey) {
-    case "coinbase":
-    case "coinbaseRamp":
-    case "sandboxCoinbase":
-      return "bg-white"
-    case "binanceInternational":
-    case "binanceInternationalDirect":
-    case "binanceUs":
-    case "binanceUsDirect":
-    case "sandbox":
-    case "binanceConnect":
-      return "bg-black"
-    case "bitfinex":
-    case "bitfinexDirect":
-      return "bg-[#0e3452]"
-    case "kraken":
-    case "krakenDirect":
-      return "bg-[#5841d7]"
-    case "uphold":
-    case "upholdDirect":
-      return "bg-[#49cc68]"
-    case "paribu":
-    case "paribuOAuth":
-      return "bg-[#9cba3b]"
-    case "robinhood":
-    case "robinhoodDirect":
-    case "robinhoodConnect":
-      return "bg-[#ccff00]"
-    default:
-      return "bg-gray-700"
-  }
-}
-
-export const MeshExchangeSelection: React.FC<MeshExchangeSelectionProps> = ({
-  onBack,
-  onSelectExchange,
-}) => {
-  const { onramp: onrampFactory, apiKey, trailsApiUrl } = useWidgetProps()
-  const onrampClient = useOnrampClient()
-  const meshOnrampConfig = getWidgetOnrampConfig(onrampFactory)
-  const [showAllExchanges, setShowAllExchanges] = useState(false)
-  const [failedLogos, setFailedLogos] = useState<Record<string, true>>({})
-
-  const meshEnvironment = getActiveMeshEnvironment(meshOnrampConfig)
-
-  const {
-    data: exchangeOptions = [],
-    isLoading,
-    error,
-  } = useQuery({
-    queryKey: ["mesh-exchange-options", meshEnvironment, trailsApiUrl, apiKey],
-    queryFn: async () => {
-      const response = await onrampClient.getMeshIntegrations({
-        environment: meshEnvironment,
-      })
-
-      return (response.integrations || []).map((integration) => {
-        return {
-          key: integration.key,
-          integrationId: integration.id,
-          exchangeName: integration.displayName || integration.key,
-          imageUrl: integration.imageUrl || "",
-        }
-      })
-    },
-    enabled: !!apiKey && !!trailsApiUrl,
-    staleTime: 24 * 60 * 60 * 1000,
-    gcTime: 24 * 60 * 60 * 1000,
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-  })
-  const visibleExchangeOptions = showAllExchanges
-    ? exchangeOptions
-    : exchangeOptions.slice(0, INITIAL_VISIBLE_EXCHANGES)
-
-  return (
-    <div className="flex flex-col h-full">
-      <ScreenHeader
-        onBack={onBack}
-        headerContent="Select Exchange"
-        headerContentAlign="left"
-      />
-
-      <div className="flex-1">
-        {isLoading ? (
-          <div className="flex h-full items-center justify-center">
-            <div className="text-center">
-              <div className="mt-4 mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-2 border-solid border-blue-500 border-t-transparent" />
-              <p className="text-sm text-gray-500 dark:text-gray-400">
-                Loading exchanges...
-              </p>
-            </div>
-          </div>
-        ) : error ? (
-          <div className="flex h-full items-center justify-center">
-            <div className="rounded-lg border border-solid border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-300">
-              {error instanceof Error
-                ? error.message
-                : "Failed to load exchanges"}
-            </div>
-          </div>
-        ) : exchangeOptions.length === 0 ? (
-          <div className="flex h-full items-center justify-center">
-            <div className="rounded-lg border border-solid border-gray-200 bg-gray-50 p-4 text-sm text-gray-600 dark:border-gray-700 dark:bg-gray-800/70 dark:text-gray-300">
-              No supported exchanges are currently available.
-            </div>
-          </div>
-        ) : (
-          <div className="max-h-[420px] overflow-y-auto pr-1 pt-4">
-            <div className="space-y-4">
-              {visibleExchangeOptions.map((exchange) => (
-                <button
-                  key={exchange.integrationId}
-                  type="button"
-                  onClick={() => {
-                    logger.console.log(
-                      "[trails-sdk] Selected Mesh exchange in widget:",
-                      exchange,
-                    )
-                    onSelectExchange({
-                      integrationId: exchange.integrationId,
-                      exchangeKey: exchange.key,
-                      exchangeName: exchange.exchangeName,
-                    })
-                  }}
-                  className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 rounded-lg transition-all duration-200 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-900 dark:text-white"
-                >
-                  <div className="flex items-center space-x-3 flex-1">
-                    <div
-                      className={`flex h-12 w-12 items-center justify-center overflow-hidden rounded-lg border border-solid border-gray-200 dark:border-gray-700 ${getExchangeBackgroundClassName(exchange.key)}`}
-                    >
-                      {exchange.imageUrl &&
-                      !failedLogos[exchange.integrationId] ? (
-                        <img
-                          src={exchange.imageUrl}
-                          alt={`${exchange.exchangeName} logo`}
-                          className="h-8 w-8 rounded object-contain"
-                          loading="lazy"
-                          referrerPolicy="no-referrer"
-                          onError={() => {
-                            setFailedLogos((current) => ({
-                              ...current,
-                              [exchange.integrationId]: true,
-                            }))
-                          }}
-                        />
-                      ) : (
-                        <span className="text-sm font-semibold text-white">
-                          {exchange.exchangeName.slice(0, 2).toUpperCase()}
-                        </span>
-                      )}
-                    </div>
-                    <div className="flex-1 text-left">
-                      <h4 className="font-semibold text-gray-900 dark:text-gray-100">
-                        {exchange.exchangeName}
-                      </h4>
-                      <p className="text-sm text-gray-600 dark:text-gray-400">
-                        Connect your account to transfer funds
-                      </p>
-                    </div>
-                  </div>
-                  <ChevronRight className="w-5 h-5 text-gray-400" />
-                </button>
-              ))}
-              {!showAllExchanges &&
-                exchangeOptions.length > INITIAL_VISIBLE_EXCHANGES && (
-                  <button
-                    type="button"
-                    onClick={() => setShowAllExchanges(true)}
-                    className="w-full cursor-pointer rounded-lg border border-solid border-gray-200 px-6 py-3 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
-                  >
-                    Show more
-                  </button>
-                )}
-            </div>
-          </div>
-        )}
-      </div>
-
-      {meshEnvironment === "sandbox" && (
-        <div className="mt-4 border border-solid border-yellow-200 bg-yellow-50 p-3 dark:border-yellow-800 dark:bg-yellow-900/20">
-          <div className="text-center">
-            <p className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
-              Sandbox environment
-            </p>
-            <p className="text-xs text-yellow-600 dark:text-yellow-300">
-              No real funds are used
-            </p>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

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