0xtrails 0.13.2 → 0.14.0

package/src/meld/components/MeldFundMethods.tsx

@@ -1,265 +0,0 @@
-import { Search } from "lucide-react"
-import type React from "react"
-import { useMemo, useState } from "react"
-import { logger } from "../../logger.js"
-import type { TrailsOnramp } from "../../onrampClient.js"
-import { useQuery } from "@tanstack/react-query"
-import { meldQueries } from "../../query/meld.queries.js"
-import { SimpleHeader } from "./SimpleHeader.js"
-
-export type MeldPaymentMethod =
-  | "CREDIT_DEBIT_CARD"
-  | "EXCHANGE"
-  | "BANK_TRANSFER"
-  | "APPLE_PAY"
-  | "GOOGLE_PAY"
-  | string // Allow any string for API-provided methods
-
-export interface MeldFundMethodsProps {
-  onBack?: () => void
-  onSelectPaymentMethod?: (paymentMethod: MeldPaymentMethod) => void
-  selectedPaymentMethod?: MeldPaymentMethod | null
-  hideHeader?: boolean // Hide header when used in unified view
-  trailsClient?: TrailsOnramp | null
-  fiatCurrency?: string // Default to USD if not provided
-  onNavigateToFund?: () => void // Navigate to fund screen when credit/debit card is selected
-}
-
-export const MeldFundMethods: React.FC<MeldFundMethodsProps> = ({
-  onBack,
-  onSelectPaymentMethod,
-  selectedPaymentMethod,
-  hideHeader = false,
-  trailsClient,
-  fiatCurrency = "USD",
-  onNavigateToFund,
-}) => {
-  const {
-    data: paymentMethods = [],
-    isLoading,
-    error,
-  } = useQuery(
-    meldQueries.paymentMethodList(trailsClient || null, fiatCurrency),
-  )
-  const [searchTerm, setSearchTerm] = useState("")
-  const [failedImages, setFailedImages] = useState<Set<string>>(new Set())
-
-  // Filter payment methods based on search term
-  const filteredPaymentMethods = useMemo(() => {
-    if (!searchTerm.trim()) {
-      return paymentMethods
-    }
-
-    const lowerSearchTerm = searchTerm.toLowerCase().trim()
-    return paymentMethods.filter(
-      (method) =>
-        method.name.toLowerCase().includes(lowerSearchTerm) ||
-        method.paymentType.toLowerCase().includes(lowerSearchTerm) ||
-        method.paymentMethod.toLowerCase().includes(lowerSearchTerm),
-    )
-  }, [paymentMethods, searchTerm])
-
-  const handlePaymentMethodSelect = (paymentMethod: MeldPaymentMethod) => {
-    logger.console.log(
-      `[onramp] Selected Meld payment method: ${paymentMethod}`,
-    )
-
-    if (onSelectPaymentMethod) {
-      onSelectPaymentMethod(paymentMethod)
-    }
-
-    // If CREDIT_DEBIT_CARD is selected, navigate directly to the fund screen
-    if (paymentMethod === "CREDIT_DEBIT_CARD" && onNavigateToFund) {
-      onNavigateToFund()
-    }
-  }
-
-  const handleImageError = (paymentMethod: string) => {
-    setFailedImages((prev) => new Set(prev).add(paymentMethod))
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      {!hideHeader && (
-        <SimpleHeader onBack={onBack} title="Select Payment Method" />
-      )}
-
-      <div className="flex-1 overflow-y-auto">
-        {isLoading && (
-          <div className="flex items-center justify-center py-8">
-            <div className="text-center">
-              <div className="w-8 h-8 border-solid border-2 border-polygon-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
-              <p className="text-gray-600 dark:text-gray-400">
-                Loading payment methods...
-              </p>
-            </div>
-          </div>
-        )}
-
-        {error && (
-          <div className="flex items-center justify-center py-8">
-            <div className="text-center p-4 border border-solid border-red-200 dark:border-red-700 rounded-lg bg-red-50 dark:bg-red-900/20">
-              <p className="text-red-600 dark:text-red-400">
-                Error loading payment methods: {error.message}
-              </p>
-            </div>
-          </div>
-        )}
-
-        {!isLoading && !error && paymentMethods.length === 0 && (
-          <div className="flex items-center justify-center py-8">
-            <div className="text-gray-600 dark:text-gray-400">
-              No payment methods available
-            </div>
-          </div>
-        )}
-
-        {!isLoading && !error && paymentMethods.length > 0 && (
-          <>
-            {/* Search Input Field */}
-            <div className="p-4 border-b border-gray-200 dark:border-gray-700">
-              <div className="relative">
-                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                  <Search className="h-5 w-5 text-gray-500 dark:text-gray-500" />
-                </div>
-                <input
-                  type="text"
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  placeholder="Search payment methods..."
-                  className="block w-full pl-10 pr-4 py-2 border border-solid border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-polygon-500 focus:border-polygon-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
-                />
-              </div>
-            </div>
-
-            {/* Payment Methods List */}
-            <div className="space-y-4 p-4 max-h-[400px] overflow-y-auto">
-              {filteredPaymentMethods.length === 0 && searchTerm.trim() ? (
-                <div className="flex items-center justify-center py-8">
-                  <div className="text-gray-600 dark:text-gray-400">
-                    No payment methods found matching "{searchTerm}"
-                  </div>
-                </div>
-              ) : (
-                filteredPaymentMethods.map(
-                  (method: {
-                    paymentMethod: string
-                    name: string
-                    paymentType: string
-                    logos?: { dark?: string; light?: string }
-                  }) => {
-                    const isSelected =
-                      selectedPaymentMethod === method.paymentMethod
-
-                    return (
-                      <button
-                        key={method.paymentMethod}
-                        type="button"
-                        onClick={() =>
-                          handlePaymentMethodSelect(method.paymentMethod)
-                        }
-                        className={`w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 rounded-lg transition-all duration-200 ${
-                          isSelected
-                            ? "bg-polygon-50 dark:bg-polygon-900/20 border-2 border-polygon-500 dark:border-polygon-400"
-                            : "bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border-2 border-transparent"
-                        } text-gray-900 dark:text-white`}
-                      >
-                        <div className="flex items-center space-x-3 flex-1">
-                          {(method.logos?.light || method.logos?.dark) &&
-                          !failedImages.has(method.paymentMethod) ? (
-                            <div className="w-12 h-12 rounded-lg flex items-center justify-center bg-white dark:bg-gray-700 p-2">
-                              <img
-                                src={
-                                  method.logos?.light ||
-                                  method.logos?.dark ||
-                                  ""
-                                }
-                                alt={`${method.name} logo`}
-                                className="max-w-full max-h-full object-contain"
-                                onError={() =>
-                                  handleImageError(method.paymentMethod)
-                                }
-                              />
-                            </div>
-                          ) : (
-                            <div
-                              className={`w-12 h-12 rounded-lg flex items-center justify-center ${
-                                isSelected
-                                  ? "bg-polygon-500 dark:bg-polygon-400"
-                                  : "bg-gray-200 dark:bg-gray-700"
-                              }`}
-                            >
-                              <svg
-                                className="w-6 h-6 text-white"
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
-                                aria-label="Payment method icon"
-                              >
-                                <title>Payment method icon</title>
-                                <path
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                  strokeWidth={2}
-                                  d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
-                                />
-                              </svg>
-                            </div>
-                          )}
-                          <div className="flex-1 text-left">
-                            <h4 className="font-semibold text-gray-900 dark:text-gray-100">
-                              {method.name}
-                            </h4>
-                            <p className="text-sm text-gray-600 dark:text-gray-400">
-                              {method.paymentType}
-                            </p>
-                          </div>
-                        </div>
-                        {isSelected && (
-                          <div className="text-polygon-500 dark:text-polygon-400">
-                            <svg
-                              className="w-5 h-5"
-                              fill="currentColor"
-                              viewBox="0 0 20 20"
-                              aria-label="Selected"
-                            >
-                              <title>Selected</title>
-                              <path
-                                fillRule="evenodd"
-                                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                                clipRule="evenodd"
-                              />
-                            </svg>
-                          </div>
-                        )}
-                        {!isSelected && (
-                          <div className="text-gray-400">
-                            <svg
-                              className="w-5 h-5"
-                              fill="none"
-                              stroke="currentColor"
-                              viewBox="0 0 24 24"
-                              aria-label="Chevron right"
-                            >
-                              <title>Chevron right</title>
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M9 5l7 7-7 7"
-                              />
-                            </svg>
-                          </div>
-                        )}
-                      </button>
-                    )
-                  },
-                )
-              )}
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  )
-}

package/src/meld/components/MeldProvidersList.tsx

@@ -1,187 +0,0 @@
-import { Building2, DollarSign, Star, TrendingDown } from "lucide-react"
-import type React from "react"
-import type { MeldQuote } from "../utils/meld.js"
-import { SimpleHeader } from "./SimpleHeader.js"
-
-export interface MeldProvidersListProps {
-  onBack?: () => void
-  onSelectProvider?: (provider: MeldQuote) => void
-  selectedProvider?: MeldQuote | null
-  providers: MeldQuote[]
-  isLoading?: boolean
-}
-
-const getProviderColor = (provider: string): string => {
-  const colors: Record<string, string> = {
-    BANXA:
-      "bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400",
-    TRANSAK:
-      "bg-polygon-100 dark:bg-polygon-900/30 text-polygon-600 dark:text-polygon-400",
-    MOONPAY:
-      "bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400",
-  }
-  return (
-    colors[provider] ||
-    "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
-  )
-}
-
-export const MeldProvidersList: React.FC<MeldProvidersListProps> = ({
-  onBack,
-  onSelectProvider,
-  selectedProvider,
-  providers,
-  isLoading = false,
-}) => {
-  const handleProviderSelect = (provider: MeldQuote) => {
-    if (onSelectProvider) {
-      onSelectProvider(provider)
-    }
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      <SimpleHeader onBack={onBack} title="Select Provider" />
-
-      <div className="flex-1 overflow-y-auto p-4 max-h-[400px]">
-        {isLoading ? (
-          <div className="flex items-center justify-center py-8 space-x-3">
-            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-polygon-500"></div>
-            <div className="text-gray-600 dark:text-gray-400">
-              Finding best providers...
-            </div>
-          </div>
-        ) : providers.length === 0 ? (
-          <div className="flex items-center justify-center py-8">
-            <div className="text-gray-600 dark:text-gray-400">
-              No providers available. Please select country and token first.
-            </div>
-          </div>
-        ) : (
-          <div className="space-y-3">
-            {providers.map((provider, index) => {
-              const isSelected =
-                selectedProvider?.serviceProvider === provider.serviceProvider
-              const isBestRate = index === 0 // First quote has highest customerScore
-
-              return (
-                <button
-                  key={provider.serviceProvider}
-                  type="button"
-                  onClick={() => handleProviderSelect(provider)}
-                  className={`w-full p-4 rounded-lg transition-all duration-200 cursor-pointer ${
-                    isSelected
-                      ? "bg-polygon-50 dark:bg-polygon-900/20 border-2 border-polygon-500 dark:border-polygon-400"
-                      : "bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border-2 border-transparent"
-                  }`}
-                >
-                  {/* Provider Header */}
-                  <div className="flex items-center justify-between mb-3">
-                    <div className="flex items-center gap-3">
-                      <div
-                        className={`w-10 h-10 rounded-lg flex items-center justify-center ${getProviderColor(provider.serviceProvider)}`}
-                      >
-                        <Building2 className="w-5 h-5" />
-                      </div>
-                      <div className="text-left">
-                        <h4 className="font-bold text-gray-900 dark:text-gray-100">
-                          {provider.serviceProvider}
-                        </h4>
-                        {isBestRate && (
-                          <div className="flex items-center gap-1 text-xs text-green-600 dark:text-green-400">
-                            <Star className="w-3 h-3 fill-current" />
-                            <span>Best Rate</span>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                    {isSelected && (
-                      <div className="text-polygon-500 dark:text-polygon-400">
-                        <svg
-                          className="w-6 h-6"
-                          fill="currentColor"
-                          viewBox="0 0 20 20"
-                          aria-label="Selected"
-                        >
-                          <title>Selected</title>
-                          <path
-                            fillRule="evenodd"
-                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                            clipRule="evenodd"
-                          />
-                        </svg>
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Provider Details */}
-                  <div className="grid grid-cols-2 gap-3 text-sm">
-                    <div className="flex items-center gap-2">
-                      <DollarSign className="w-4 h-4 text-gray-500" />
-                      <div className="text-left">
-                        <div className="text-xs text-gray-500 dark:text-gray-400">
-                          You Get
-                        </div>
-                        <div className="font-semibold text-gray-900 dark:text-gray-100">
-                          {provider.destinationAmount.toFixed(6)}
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="flex items-center gap-2">
-                      <TrendingDown className="w-4 h-4 text-gray-500" />
-                      <div className="text-left">
-                        <div className="text-xs text-gray-500 dark:text-gray-400">
-                          Total Fee
-                        </div>
-                        <div className="font-semibold text-gray-900 dark:text-gray-100">
-                          ${provider.totalFee.toFixed(2)}
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="flex items-center gap-2">
-                      <Star className="w-4 h-4 text-gray-500" />
-                      <div className="text-left">
-                        <div className="text-xs text-gray-500 dark:text-gray-400">
-                          Score
-                        </div>
-                        <div className="font-semibold text-gray-900 dark:text-gray-100">
-                          {provider.customerScore}
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="flex items-center gap-2">
-                      <DollarSign className="w-4 h-4 text-gray-500" />
-                      <div className="text-left">
-                        <div className="text-xs text-gray-500 dark:text-gray-400">
-                          Rate
-                        </div>
-                        <div className="font-semibold text-gray-900 dark:text-gray-100">
-                          {provider.exchangeRate.toFixed(2)}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Fee Breakdown */}
-                  <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
-                    <div className="flex justify-between text-xs text-gray-600 dark:text-gray-400">
-                      <span>
-                        Transaction Fee: ${provider.transactionFee.toFixed(2)}
-                      </span>
-                      <span>
-                        Network Fee: ${provider.networkFee.toFixed(2)}
-                      </span>
-                    </div>
-                  </div>
-                </button>
-              )
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}