0xtrails 0.13.1 → 0.14.0

package/src/widget/components/MeldHistory.tsx

@@ -1,433 +0,0 @@
-import { Building2, Check, Copy, CreditCard, RefreshCw } from "lucide-react"
-import type React from "react"
-import { useState } from "react"
-import { useAccount } from "wagmi"
-import { isValidNumber } from "../../utils/validation.js"
-import { getChainName } from "../../chains.js"
-import { logger } from "../../logger.js"
-import { useMeldServiceProviders } from "../../query/meld.hooks.js"
-import type { MeldServiceProvider } from "../../onramp-client/trails-onramp.gen.js"
-import { SECOND_MS, formatRelativeDate } from "../../utils/time.js"
-import {
-  useMeldTransactionHistory,
-  type MeldTransactionData,
-  type MeldTransactionStatus,
-} from "../hooks/useMeldTransactionHistory.js"
-import { getProviderImage } from "../utils/meldProviderUtils.js"
-import { formatRawStatusLabel } from "../utils/statusLabel.js"
-import { ErrorDisplay } from "./ErrorDisplay.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { TokenImage } from "./TokenImage.js"
-
-export interface MeldHistoryProps {
-  limit?: number
-  autoRefetch?: boolean
-  refetchInterval?: number
-  onTransactionClick?: (transaction: MeldTransactionData) => void
-  onBack?: () => void
-  className?: string
-}
-
-function getStatusColor(status: MeldTransactionStatus): string {
-  switch (status) {
-    case "COMPLETED":
-    case "SETTLED":
-      return "text-green-600 bg-green-50"
-    case "DECLINED":
-      return "text-red-600 bg-red-50"
-    case "FAILED":
-      return "text-red-600 bg-red-50"
-    case "ERROR":
-      return "text-red-600 bg-red-50"
-    case "CANCELLED":
-      return "text-orange-600 bg-orange-50"
-    case "PENDING":
-      return "text-yellow-600 bg-yellow-50"
-    case "PROCESSING":
-      return "text-blue-600 bg-blue-50"
-    case "REFUNDED":
-      return "text-purple-600 bg-purple-50"
-    default:
-      return "text-gray-600 bg-gray-50"
-  }
-}
-
-function formatAmount(amount?: string): string {
-  if (!amount) return "-"
-
-  const numAmount = parseFloat(amount)
-  if (!isValidNumber(numAmount)) return amount
-
-  // Format with appropriate decimal places
-  // Use 'en-US' to ensure consistent decimal formatting (period as decimal separator)
-  return numAmount.toLocaleString("en-US", {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 6,
-  })
-}
-
-function formatDate(dateString?: string): string {
-  if (!dateString) return "-"
-
-  const dateInfo = formatRelativeDate(dateString)
-  return dateInfo.relative || dateString
-}
-
-const TransactionItem: React.FC<{
-  transaction: MeldTransactionData
-  meldProviders: MeldServiceProvider[]
-  onClick?: (transaction: MeldTransactionData) => void
-}> = ({ transaction, meldProviders, onClick }) => {
-  const [copied, setCopied] = useState(false)
-  const providerLogo = getProviderImage(
-    meldProviders,
-    transaction.serviceProvider,
-  )
-
-  // Only make clickable if onClick is provided
-  const isClickable = !!onClick
-
-  const handleClick = () => {
-    if (onClick) {
-      onClick(transaction)
-    }
-  }
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault()
-      handleClick()
-    }
-  }
-
-  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)
-    }
-  }
-
-  return (
-    <div
-      className={`p-3 trails-border-radius-container border trails-border-primary transition-all duration-200 ${
-        isClickable ? "cursor-pointer hover:bg-gray-50" : ""
-      }`}
-      {...(isClickable && {
-        onClick: handleClick,
-        onKeyDown: handleKeyDown,
-        role: "button",
-        tabIndex: 0,
-      })}
-    >
-      {/* Top Row - Provider, Status, Date */}
-      <div className="flex items-center justify-between mb-2">
-        <div className="flex items-center gap-2">
-          {/* Provider Logo */}
-          <div
-            className="flex-shrink-0 w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden"
-            title={`Provider: ${transaction.serviceProvider || "Unknown"}`}
-          >
-            {providerLogo ? (
-              <img
-                src={providerLogo}
-                alt={transaction.serviceProvider}
-                className="w-4 h-4"
-              />
-            ) : (
-              <Building2 className="w-3 h-3 text-gray-500" />
-            )}
-          </div>
-
-          {/* Provider Name */}
-          <span
-            className="text-sm font-medium trails-text-primary"
-            title={transaction.serviceProvider || "Unknown Provider"}
-          >
-            {(transaction.serviceProvider || "UNKNOWN").toUpperCase()}
-          </span>
-
-          {/* Country Flag */}
-          {transaction.currencyFlag && (
-            <span
-              className="text-sm"
-              title={`Country: ${transaction.countryCode}`}
-            >
-              {transaction.currencyFlag}
-            </span>
-          )}
-        </div>
-
-        {/* Status and Date */}
-        <div className="flex items-center gap-2">
-          <span
-            className={`px-2 py-0.5 rounded text-xs font-medium ${getStatusColor(transaction.status)}`}
-            title={`Status: ${formatRawStatusLabel(transaction.status)}`}
-          >
-            {formatRawStatusLabel(transaction.status)}
-          </span>
-          <span className="text-xs trails-text-tertiary">
-            {formatDate(transaction.createdAt || transaction.updatedAt)}
-          </span>
-        </div>
-      </div>
-
-      {/* Main Transaction Info - Compact */}
-      <div className="flex items-center justify-between mb-2">
-        {/* Bought Info */}
-        <div className="flex items-center gap-2">
-          <span className="text-xs trails-text-tertiary font-medium">
-            Bought
-          </span>
-          <div className="flex items-center gap-1.5">
-            <TokenImage
-              symbol={transaction.destinationTokenSymbol}
-              chainId={transaction.destinationTokenChainId}
-              contractAddress={transaction.destinationTokenAddress}
-              size={16}
-            />
-            <span className="text-sm font-semibold trails-text-primary">
-              {formatAmount(transaction.destinationAmount)}{" "}
-              {transaction.destinationTokenSymbol}
-            </span>
-          </div>
-        </div>
-
-        {/* Paid Info */}
-        <div className="flex items-center gap-2">
-          <span className="text-xs trails-text-tertiary font-medium">Paid</span>
-          <span className="text-sm font-medium trails-text-secondary">
-            {transaction.sourceCurrencySymbol}
-            {formatAmount(transaction.sourceAmount)}{" "}
-            {transaction.sourceCurrencyCode}
-          </span>
-        </div>
-      </div>
-
-      {/* Chain and Payment Method Row */}
-      {transaction.destinationTokenChainId && (
-        <div className="text-xs trails-text-tertiary mb-1">
-          on {getChainName(transaction.destinationTokenChainId)}
-        </div>
-      )}
-
-      {/* Bottom Row - Payment Method and Transaction ID */}
-      <div className="flex items-center justify-between text-xs">
-        <div className="flex items-center gap-3">
-          {transaction.paymentMethod && (
-            <div
-              className="flex items-center gap-1.5 trails-text-tertiary"
-              title={`Payment Method: ${transaction.paymentMethod}`}
-            >
-              {transaction.paymentMethodLogo ? (
-                <div className="w-4 h-4 rounded flex items-center justify-center bg-white">
-                  <img
-                    src={transaction.paymentMethodLogo}
-                    alt={`${transaction.paymentMethod} logo`}
-                    className="max-w-full max-h-full object-cover"
-                  />
-                </div>
-              ) : (
-                <CreditCard className="w-3 h-3" />
-              )}
-              <span>{transaction.paymentMethod}</span>
-            </div>
-          )}
-
-          {transaction.totalFee && (
-            <span className="trails-text-tertiary" title="Total Fee">
-              Fee: {transaction.sourceCurrencySymbol}
-              {transaction.totalFee}
-            </span>
-          )}
-
-          {transaction.exchangeRate && (
-            <span
-              className="trails-text-tertiary"
-              title={`Exchange Rate: ${transaction.exchangeRate.toFixed(4)}`}
-            >
-              Rate: {transaction.exchangeRate.toFixed(4)}
-            </span>
-          )}
-        </div>
-
-        {/* Transaction ID */}
-        {transaction.id && (
-          <button
-            type="button"
-            onClick={handleCopyId}
-            className="font-mono text-xs bg-gray-100 hover:bg-gray-200 px-1.5 py-0.5 rounded flex items-center gap-1 transition-colors"
-            title={`Copy transaction ID: ${transaction.id}`}
-          >
-            <span>{transaction.id.slice(0, 6)}</span>
-            {copied ? (
-              <Check className="w-2.5 h-2.5 text-green-600" />
-            ) : (
-              <Copy className="w-2.5 h-2.5 text-gray-500" />
-            )}
-          </button>
-        )}
-      </div>
-
-      {/* Institution/Low KYC indicator - Compact */}
-      {(transaction.institutionName || transaction.lowKyc) && (
-        <div className="flex items-center gap-2 mt-2 pt-1 border-t border-gray-100">
-          {transaction.institutionName && (
-            <span
-              className="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded"
-              title={`Institution: ${transaction.institutionName}`}
-            >
-              {transaction.institutionName}
-            </span>
-          )}
-          {transaction.lowKyc && (
-            <span
-              className="text-xs bg-green-50 text-green-700 px-1.5 py-0.5 rounded"
-              title="Low KYC verification"
-            >
-              Low KYC
-            </span>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-const LoadingSkeleton: React.FC = () => {
-  return (
-    <div className="animate-pulse">
-      {[1, 2, 3].map((i) => (
-        <div
-          key={i}
-          className="p-4 trails-border-radius-container border trails-border-primary mb-2"
-        >
-          <div className="flex justify-between items-center">
-            <div className="flex flex-col gap-2">
-              <div className="h-4 bg-gray-200 rounded w-24"></div>
-              <div className="h-3 bg-gray-200 rounded w-16"></div>
-              <div className="h-3 bg-gray-200 rounded w-20"></div>
-            </div>
-            <div className="h-6 bg-gray-200 rounded w-16"></div>
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-export const MeldHistory: React.FC<MeldHistoryProps> = ({
-  limit = 20,
-  autoRefetch = false,
-  refetchInterval = 10 * SECOND_MS,
-  onTransactionClick,
-  onBack,
-  className,
-}) => {
-  const { address } = useAccount()
-  const { transactions, loading, error, refetch } = useMeldTransactionHistory({
-    enabled: !!address,
-    limit,
-    autoRefetch,
-    refetchInterval,
-  })
-
-  // Fetch Meld providers once and cache for 24 hours (already built into useMeldProviders)
-  const { data: meldProviders = [] } = useMeldServiceProviders()
-
-  if (!address) {
-    return (
-      <div className="flex flex-col h-full trails-bg-primary">
-        <ScreenHeader headerContent="Onramp History" onBack={onBack} />
-        <div className="flex-1 flex items-center justify-center p-8">
-          <div className="text-center">
-            <p className="trails-text-secondary text-sm">
-              Connect your wallet to view transaction history
-            </p>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  if (error) {
-    return (
-      <div className="flex flex-col h-full trails-bg-primary">
-        <ScreenHeader headerContent="Onramp History" onBack={onBack} />
-        <div className="flex-1 p-4">
-          <ErrorDisplay error={error} />
-          <button
-            type="button"
-            onClick={() => refetch()}
-            className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
-          >
-            Retry
-          </button>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div
-      className={`flex flex-col h-full trails-bg-primary ${className || ""}`}
-    >
-      <ScreenHeader
-        headerContent="Onramp History"
-        onBack={onBack}
-        rightSideContent={
-          loading ? (
-            <div className="flex items-center gap-1">
-              <RefreshCw className="h-4 w-4 animate-spin trails-text-secondary" />
-              <span className="text-xs trails-text-secondary">Updating...</span>
-            </div>
-          ) : !autoRefetch ? (
-            <button
-              type="button"
-              onClick={() => refetch()}
-              className="p-1 rounded hover:bg-gray-100 transition-colors"
-              disabled={loading}
-            >
-              <RefreshCw className="h-4 w-4 trails-text-secondary" />
-            </button>
-          ) : null
-        }
-      />
-
-      <div className="flex-1 overflow-y-auto p-4">
-        {loading && transactions.length === 0 ? (
-          <LoadingSkeleton />
-        ) : transactions.length === 0 ? (
-          <div className="flex items-center justify-center h-full">
-            <div className="text-center">
-              <p className="trails-text-secondary text-sm mb-2">
-                No transactions found
-              </p>
-              <p className="trails-text-tertiary text-xs">
-                Your Meld transaction history will appear here
-              </p>
-            </div>
-          </div>
-        ) : (
-          <div className="space-y-2 max-h-[500px] overflow-y-auto trails-scrollbar">
-            {transactions.map((transaction) => (
-              <TransactionItem
-                key={transaction.id || Math.random()}
-                transaction={transaction}
-                meldProviders={meldProviders}
-                onClick={onTransactionClick}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default MeldHistory