0xtrails 0.13.1 → 0.14.0

package/src/widget/components/OnrampDeposit.tsx

@@ -1,122 +0,0 @@
-import { ExternalLink } from "lucide-react"
-import type React from "react"
-import { formatUnits } from "viem"
-import { getExplorerUrlForAddress } from "../../explorer.js"
-import { logger } from "../../logger.js"
-import type { PrepareSendQuote } from "../../prepareSend.js"
-import { ChainImage } from "./ChainImage.js"
-import { DepositTracker } from "./DepositTracker.js"
-import { QuoteDetails } from "./QuoteDetails.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { TokenImage } from "./TokenImage.js"
-
-interface OnrampDepositProps {
-  onBack?: () => void
-  quote?: PrepareSendQuote | null
-  onDepositComplete?: () => void
-}
-
-export const OnrampDeposit: React.FC<OnrampDepositProps> = ({
-  onBack,
-  quote,
-  onDepositComplete,
-}) => {
-  logger.console.log("[]trails-sdk] Rendering OnrampDeposit with quote:", quote)
-
-  return (
-    <div className="space-y-6">
-      <ScreenHeader
-        onBack={onBack}
-        headerContent="Fiat Onramp"
-        headerContentAlign="left"
-      />
-
-      <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
-        {/* Transaction Details Header */}
-        <div className="text-center">
-          <p className="text-sm text-gray-600 dark:text-gray-300">
-            Please Complete your fiat purchase in the popup window.
-          </p>
-        </div>
-
-        {/* Meld Transaction Info */}
-        <div className="space-y-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
-          <div className="flex flex-col items-center gap-3">
-            <div className="text-sm text-gray-600 dark:text-gray-300 text-center">
-              <div className="font-medium mb-1">Waiting for fiat purchase</div>
-            </div>
-          </div>
-
-          {quote?.originAmount && (
-            <div className="flex flex-col items-center justify-center gap-2 pt-2">
-              <div className="text-xs text-gray-500 dark:text-gray-400">
-                Expecting deposit of
-              </div>
-              <div className="flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
-                <TokenImage
-                  imageUrl={quote.originToken.imageUrl}
-                  symbol={quote.originToken.symbol}
-                  chainId={quote.originChain.id}
-                  contractAddress={quote.originToken.contractAddress}
-                  size={24}
-                />
-                <span className="text-base font-bold text-gray-900 dark:text-white">
-                  {formatUnits(
-                    BigInt(quote.originAmount),
-                    quote.originToken.decimals,
-                  )}{" "}
-                  {quote.originToken.symbol}
-                </span>
-              </div>
-              <div className="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
-                <span>on</span>
-                <ChainImage chainId={quote.originChain.id} size={14} />
-                <span className="font-medium">{quote.originChain.name}</span>
-                <span>to</span>
-                <a
-                  href={getExplorerUrlForAddress({
-                    address: quote.originDepositAddress,
-                    chainId: quote.originChain.id,
-                  })}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center gap-1 font-medium hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer"
-                >
-                  <span>
-                    {quote.originDepositAddress.slice(0, 6)}...
-                    {quote.originDepositAddress.slice(-4)}
-                  </span>
-                  <ExternalLink className="w-3 h-3" />
-                </a>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Deposit Tracker - polls every 3 seconds to show deposit status */}
-        {quote && (
-          <div className="space-y-2">
-            <DepositTracker
-              depositAddress={quote.originDepositAddress}
-              requiredAmount={quote.originAmount}
-              tokenAddress={quote.originToken.contractAddress}
-              tokenSymbol={quote.originToken.symbol}
-              tokenDecimals={quote.originToken.decimals}
-              chainId={quote.originChain.id}
-              onDepositComplete={onDepositComplete}
-            />
-          </div>
-        )}
-
-        {/* Quote Details */}
-        {quote && (
-          <div className="space-y-2">
-            <QuoteDetails quote={quote} showContent={true} />
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default OnrampDeposit

package/src/widget/components/OnrampErrorScreen.tsx

@@ -1,163 +0,0 @@
-import { AlertCircle, RefreshCw } from "lucide-react"
-import type React from "react"
-import { useEffect, useState } from "react"
-import { ScreenHeader } from "./ScreenHeader.js"
-
-interface OnrampErrorScreenProps {
-  onTryAgain?: () => void
-  onBack?: () => void
-  onRetry?: () => void // For regenerating widget session
-  intentId?: string | undefined | null
-  title?: string
-  message?: string
-  showAnimation?: boolean
-  transactionStatus?: string
-  transactionError?: string
-}
-
-export const OnrampErrorScreen: React.FC<OnrampErrorScreenProps> = ({
-  onTryAgain,
-  onBack,
-  onRetry,
-  title,
-  message,
-  showAnimation = true,
-  transactionStatus,
-  transactionError,
-}) => {
-  const [showContent, setShowContent] = useState(false)
-
-  useEffect(() => {
-    if (showAnimation) {
-      const timer = setTimeout(() => setShowContent(true), 100)
-      return () => clearTimeout(timer)
-    } else {
-      setShowContent(true)
-    }
-  }, [showAnimation])
-
-  // Generate default title and message based on transaction status
-  const getErrorContent = () => {
-    switch (transactionStatus?.toUpperCase()) {
-      case "DECLINED":
-        return {
-          title: title || "Onramp Payment Declined",
-          message:
-            message ||
-            "Your onramp payment was declined. Please check your payment method and try again.",
-        }
-      case "FAILED":
-        return {
-          title: title || "Onramp Transaction Failed",
-          message:
-            message ||
-            "Your onramp transaction could not be completed. Please try again.",
-        }
-      case "ERROR":
-        return {
-          title: title || "Onramp Transaction Error",
-          message:
-            message ||
-            "An error occurred while processing your onramp transaction. Please try again.",
-        }
-      case "CANCELLED":
-        return {
-          title: title || "Onramp Transaction Cancelled",
-          message:
-            message ||
-            "Your onramp transaction was cancelled. You can try again if needed.",
-        }
-      default:
-        return {
-          title: title || "Onramp Error",
-          message:
-            message ||
-            "There was a problem processing your onramp transaction. Please try again.",
-        }
-    }
-  }
-
-  const { title: errorTitle, message: errorMessage } = getErrorContent()
-
-  return (
-    <div className="space-y-6">
-      <ScreenHeader onBack={onBack} headerContent={errorTitle} />
-
-      <div className="flex flex-col items-center justify-center min-h-[400px] space-y-6 px-4">
-        {/* Error Icon */}
-        <div
-          className={`transition-all duration-700 ease-out ${
-            showContent ? "opacity-100 scale-100" : "opacity-0 scale-75"
-          }`}
-        >
-          <div className="w-20 h-20 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
-            <AlertCircle className="w-10 h-10 text-red-600 dark:text-red-400" />
-          </div>
-        </div>
-
-        {/* Content */}
-        <div
-          className={`text-center space-y-4 transition-all duration-700 ease-out delay-200 ${
-            showContent
-              ? "opacity-100 translate-y-0"
-              : "opacity-0 translate-y-4"
-          }`}
-        >
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
-            {errorTitle}
-          </h2>
-
-          <p className="text-gray-600 dark:text-gray-400 max-w-md leading-relaxed">
-            {errorMessage}
-          </p>
-
-          {transactionStatus && (
-            <div className="text-sm text-gray-500 dark:text-gray-500 mt-2">
-              Status: {transactionStatus}
-            </div>
-          )}
-
-          {transactionError && (
-            <div className="text-xs text-gray-400 dark:text-gray-600 mt-1 max-w-md break-words">
-              {transactionError}
-            </div>
-          )}
-
-          <div className="text-sm text-gray-500 dark:text-gray-500 mt-2">
-            No payment was processed
-          </div>
-        </div>
-
-        {/* Action Buttons */}
-        <div
-          className={`flex flex-col sm:flex-row gap-3 w-full max-w-xs transition-all duration-700 ease-out delay-400 ${
-            showContent
-              ? "opacity-100 translate-y-0"
-              : "opacity-0 translate-y-4"
-          }`}
-        >
-          <button
-            type="button"
-            onClick={onRetry || onTryAgain}
-            className="flex-1 flex items-center justify-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors cursor-pointer"
-          >
-            <RefreshCw className="w-4 h-4" />
-            Try Again
-          </button>
-
-          {onBack && (
-            <button
-              type="button"
-              onClick={onBack}
-              className="flex-1 px-6 py-3 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg transition-colors cursor-pointer"
-            >
-              Cancel
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default OnrampErrorScreen

package/src/widget/components/OnrampHistoryRow.tsx

@@ -1,321 +0,0 @@
-import { Building2, Check, Copy, CreditCard } from "lucide-react"
-import type React from "react"
-import { useState } from "react"
-import { getChainName } from "../../chains.js"
-import { isValidNumber } from "../../utils/validation.js"
-import { logger } from "../../logger.js"
-import type { MeldServiceProvider } from "../../onramp-client/trails-onramp.gen.js"
-import { SECOND_MS, formatRelativeDate } from "../../utils/time.js"
-import { truncateAddress } from "../../utils/address.js"
-import type { MeldTransactionData } from "../hooks/useMeldTransactionHistory.js"
-import { getProviderImage } from "../utils/meldProviderUtils.js"
-import { formatRawStatusLabel } from "../utils/statusLabel.js"
-import { TokenImage } from "./TokenImage.js"
-
-function getStatusColor(status: string): string {
-  switch (status) {
-    case "COMPLETED":
-    case "SETTLED":
-      return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
-    case "DECLINED":
-    case "FAILED":
-    case "ERROR":
-      return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
-    case "CANCELLED":
-      return "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200"
-    case "PENDING":
-      return "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200"
-    case "PROCESSING":
-      return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
-    case "REFUNDED":
-      return "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200"
-    default:
-      return "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200"
-  }
-}
-
-function formatAmount(amount?: string): string {
-  if (!amount) return "-"
-
-  const numAmount = parseFloat(amount)
-  if (!isValidNumber(numAmount)) return amount
-
-  return numAmount.toLocaleString("en-US", {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 6,
-  })
-}
-
-export interface OnrampHistoryRowProps {
-  transaction: MeldTransactionData
-  meldProviders: MeldServiceProvider[]
-  onClick?: (transaction: MeldTransactionData) => void
-  isExpanded?: boolean
-  onToggleExpand?: () => void
-}
-
-export const OnrampHistoryRow: React.FC<OnrampHistoryRowProps> = ({
-  transaction,
-  meldProviders,
-  onClick,
-  isExpanded = false,
-  onToggleExpand,
-}) => {
-  const [copied, setCopied] = useState(false)
-  const providerLogo = getProviderImage(
-    meldProviders,
-    transaction.serviceProvider,
-  )
-  const dateInfo = formatRelativeDate(
-    transaction.createdAt || transaction.updatedAt,
-  )
-
-  const handleCopyId = async (e: React.MouseEvent) => {
-    e.stopPropagation()
-    if (!transaction.id) return
-
-    try {
-      await navigator.clipboard.writeText(transaction.id)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2 * SECOND_MS)
-    } catch (err) {
-      logger.console.error("Failed to copy transaction ID:", err)
-    }
-  }
-
-  const handleClick = () => {
-    if (onClick) {
-      onClick(transaction)
-    } else if (onToggleExpand) {
-      onToggleExpand()
-    }
-  }
-
-  return (
-    <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-2 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
-      {/* Header with metadata */}
-      <div className="flex items-center justify-between mb-2">
-        <div className="flex items-center gap-2 flex-wrap">
-          {/* Onramp indicator */}
-          <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
-            Onramp
-          </span>
-          {dateInfo.relative && (
-            <span
-              className="text-xs text-gray-900 dark:text-gray-100 cursor-help"
-              title={dateInfo.full || undefined}
-            >
-              {dateInfo.relative}
-            </span>
-          )}
-        </div>
-      </div>
-
-      {/* Transaction Summary */}
-      <div className="flex items-center justify-center mb-2">
-        <div className="flex items-center justify-between w-full gap-3">
-          {/* Fiat Amount - Left side */}
-          <div className="flex items-start gap-2 flex-1 max-w-[130px]">
-            <div className="shrink-0 w-7 h-7 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center overflow-hidden">
-              {transaction.paymentMethodLogo ? (
-                <img
-                  src={transaction.paymentMethodLogo}
-                  alt={transaction.paymentMethod}
-                  className="w-5 h-5 object-cover"
-                />
-              ) : (
-                <CreditCard className="w-4 h-4 text-gray-500 dark:text-gray-400" />
-              )}
-            </div>
-            <div className="flex flex-col gap-0.5">
-              <span
-                className="text-xs font-medium text-gray-900 dark:text-gray-100 whitespace-nowrap overflow-hidden text-ellipsis"
-                style={{ maxWidth: "85px" }}
-              >
-                {transaction.sourceCurrencySymbol}
-                {formatAmount(transaction.sourceAmount)}{" "}
-                {transaction.sourceCurrencyCode}
-              </span>
-              <span className="text-xs text-gray-500 dark:text-gray-400">
-                {transaction.paymentMethod || "Card"}
-              </span>
-            </div>
-          </div>
-
-          {/* Arrow */}
-          <div className="flex items-center">
-            <span className="text-xl text-gray-400 dark:text-gray-500">→</span>
-          </div>
-
-          {/* Crypto Amount - Right side */}
-          <div className="flex items-start gap-2 flex-1 max-w-[130px]">
-            <TokenImage
-              symbol={transaction.destinationTokenSymbol}
-              chainId={transaction.destinationTokenChainId}
-              contractAddress={transaction.destinationTokenAddress}
-              size={28}
-            />
-            <div className="flex flex-col gap-0.5">
-              <span
-                className="text-xs font-medium text-gray-900 dark:text-gray-100 whitespace-nowrap overflow-hidden text-ellipsis"
-                style={{ maxWidth: "85px" }}
-              >
-                {formatAmount(transaction.destinationAmount)}{" "}
-                {transaction.destinationTokenSymbol}
-              </span>
-              {transaction.destinationTokenChainId && (
-                <span className="text-xs text-gray-500 dark:text-gray-400">
-                  {getChainName(transaction.destinationTokenChainId)}
-                </span>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Bottom section with status and provider */}
-      <div className="flex items-center justify-between mt-2">
-        <div className="flex items-center gap-2">
-          {/* Status Badge */}
-          <span
-            className={`inline-flex items-center px-2.5 py-0.5 rounded text-xs font-medium ${getStatusColor(
-              transaction.status,
-            )}`}
-          >
-            {formatRawStatusLabel(transaction.status)}
-          </span>
-
-          {/* Provider */}
-          <div className="flex items-center gap-1">
-            <div
-              className="shrink-0 w-4 h-4 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center overflow-hidden"
-              title={`Provider: ${transaction.serviceProvider || "Unknown"}`}
-            >
-              {providerLogo ? (
-                <img
-                  src={providerLogo}
-                  alt={transaction.serviceProvider}
-                  className="w-3 h-3"
-                />
-              ) : (
-                <Building2 className="w-2.5 h-2.5 text-gray-500 dark:text-gray-400" />
-              )}
-            </div>
-            <span className="text-xs text-gray-500 dark:text-gray-400">
-              {transaction.serviceProvider || "Provider"}
-            </span>
-          </div>
-
-          {/* Country Flag */}
-          {transaction.currencyFlag && (
-            <span
-              className="text-xs"
-              title={`Country: ${transaction.countryCode}`}
-            >
-              {transaction.currencyFlag}
-            </span>
-          )}
-        </div>
-
-        {/* Transaction ID or More Details */}
-        {transaction.id && (
-          <button
-            type="button"
-            onClick={handleCopyId}
-            className="font-mono text-xs bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 px-2 py-0.5 rounded flex items-center gap-1 transition-colors"
-            title={`Copy transaction ID: ${transaction.id}`}
-          >
-            <span className="text-gray-600 dark:text-gray-400">
-              {transaction.id.slice(0, 6)}...
-            </span>
-            {copied ? (
-              <Check className="w-3 h-3 text-green-600 dark:text-green-400" />
-            ) : (
-              <Copy className="w-3 h-3 text-gray-500 dark:text-gray-400" />
-            )}
-          </button>
-        )}
-
-        {/* Clickable indicator if there's an onClick handler */}
-        {(onClick || onToggleExpand) && (
-          <button
-            type="button"
-            onClick={handleClick}
-            className="flex items-center justify-center gap-1 py-1 px-2 rounded-md transition-colors cursor-pointer text-xs text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
-            aria-label={isExpanded ? "Show less" : "More details"}
-          >
-            <span>{isExpanded ? "Less" : "Details"}</span>
-            <svg
-              className={`w-3 h-3 transition-transform duration-300 ${
-                isExpanded ? "rotate-180" : ""
-              }`}
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-            >
-              <title>{isExpanded ? "Collapse" : "Expand"}</title>
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M19 9l-7 7-7-7"
-              />
-            </svg>
-          </button>
-        )}
-      </div>
-
-      {/* Expanded details - if needed in the future */}
-      {isExpanded && (
-        <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
-          <div className="space-y-1 text-xs">
-            {transaction.exchangeRate && (
-              <div className="flex justify-between">
-                <span className="text-gray-500 dark:text-gray-400">
-                  Exchange Rate:
-                </span>
-                <span className="text-gray-900 dark:text-gray-100">
-                  {transaction.exchangeRate.toFixed(4)}
-                </span>
-              </div>
-            )}
-            {transaction.totalFee && (
-              <div className="flex justify-between">
-                <span className="text-gray-500 dark:text-gray-400">
-                  Total Fee:
-                </span>
-                <span className="text-gray-900 dark:text-gray-100">
-                  {transaction.sourceCurrencySymbol}
-                  {transaction.totalFee}
-                </span>
-              </div>
-            )}
-            {transaction.walletAddress && (
-              <div className="flex justify-between">
-                <span className="text-gray-500 dark:text-gray-400">
-                  Wallet:
-                </span>
-                <span className="text-gray-900 dark:text-gray-100 font-mono">
-                  {truncateAddress(transaction.walletAddress, 6, 4)}
-                </span>
-              </div>
-            )}
-            {transaction.institutionName && (
-              <div className="flex justify-between">
-                <span className="text-gray-500 dark:text-gray-400">
-                  Institution:
-                </span>
-                <span className="text-gray-900 dark:text-gray-100">
-                  {transaction.institutionName}
-                </span>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default OnrampHistoryRow

package/src/widget/components/OnrampPaymentMethods.tsx

@@ -1,81 +0,0 @@
-import type React from "react"
-import { ChevronRight } from "lucide-react"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { useViewManager } from "../hooks/useViewManager.js"
-import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
-import {
-  type PaymentMethod,
-  useOnRampPaymentMethods,
-} from "../hooks/useOnRampPaymentMethods.js"
-import { useTheme } from "./ThemeProvider.js"
-
-export interface OnrampPaymentMethodsProps {
-  onBack?: () => void
-}
-
-const OnrampPaymentMethods: React.FC<OnrampPaymentMethodsProps> = ({
-  onBack,
-}) => {
-  const { navigate } = useViewManager()
-  const { isDark } = useTheme()
-  const { setSelectedFundMethod, setPaymentMethod } = useSelectedFundMethod()
-
-  const { paymentMethods, isLoading, error } = useOnRampPaymentMethods({
-    enabled: true,
-  })
-
-  return (
-    <div className="flex flex-col h-full">
-      <ScreenHeader
-        onBack={onBack}
-        headerContent="Select payment method"
-        headerContentAlign="left"
-        rightSideContent={<div className="w-9" />}
-      />
-
-      <div className="flex-1">
-        <div className="flex flex-col gap-1">
-          {isLoading ? (
-            <div className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
-              Loading payment methods...
-            </div>
-          ) : error ? (
-            <div className="px-4 py-3 text-sm text-red-500 dark:text-red-400">
-              Failed to load payment methods
-            </div>
-          ) : (
-            paymentMethods.map((method: PaymentMethod) => (
-              <button
-                key={method.paymentMethod}
-                type="button"
-                onClick={() => {
-                  setSelectedFundMethod("onramp-meld")
-                  setPaymentMethod({
-                    id: method.paymentMethod,
-                    name: method.name,
-                  })
-                  navigate("fund-form")
-                }}
-                className="w-full text-left px-4 py-3 flex items-center justify-between cursor-pointer transition-colors trails-hover-bg rounded-xl"
-              >
-                <div className="flex items-center gap-3">
-                  <img
-                    src={
-                      !isDark ? method.logos?.light : method.logos?.dark || ""
-                    }
-                    alt={method.name}
-                    className="w-8 h-8"
-                  />
-                  <span className="text-sm font-medium">{method.name}</span>
-                </div>
-                <ChevronRight className="w-5 h-5 text-gray-400" />
-              </button>
-            ))
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default OnrampPaymentMethods