0xtrails 0.13.2 → 0.14.0

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 "@0xtrails/api/onramp"
-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