@ensofinance/checkout-widget 0.0.19 → 0.0.20

package/src/util/meld-hooks.tsx

@@ -1,319 +0,0 @@
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useCallback, useState, useEffect } from "react";
-import type {
-    MeldQuote,
-    MeldQuotesResponse,
-    MeldSessionRequest,
-    MeldSessionResponse,
-    MeldTransaction,
-    MeldTransactionStatus,
-} from "@/types";
-
-// BFF URL - proxies requests to MELD API with authentication
-const MELD_BFF_URL = "https://meld-bff.enso-checkout.workers.dev";
-
-// Chain ID to MELD chain code mapping
-export const MELD_CHAIN_CODES: Record<number, string> = {
-    1: "ETH", // Ethereum
-    8453: "BASE", // Base
-    42161: "ARBITRUM_ONE", // Arbitrum
-    137: "POLYGON", // Polygon
-    10: "OPTIMISM", // Optimism
-    43114: "AVAX_CCHAIN", // Avalanche
-    56: "BSC", // BNB Chain
-    146: "SONIC", // Sonic
-};
-
-// Native token symbols by chain
-export const NATIVE_TOKEN_SYMBOLS: Record<number, string> = {
-    1: "ETH",
-    8453: "ETH",
-    42161: "ETH",
-    137: "MATIC",
-    10: "ETH",
-    43114: "AVAX",
-    56: "BNB",
-    146: "S",
-};
-
-// Common tokens across chains
-export const COMMON_TOKENS = ["ETH", "USDC", "USDT", "DAI"];
-
-export const MELD_SUPPORTED_CHAINS = Object.keys(MELD_CHAIN_CODES).map(Number);
-
-/**
- * Check if a chain is supported by MELD
- */
-export function isMeldSupportedChain(chainId: number): boolean {
-    return chainId in MELD_CHAIN_CODES;
-}
-
-/**
- * Get the destination crypto code for MELD
- * Format: SYMBOL_CHAINCODE (e.g., ETH_BASE, USDC_POLYGON)
- */
-export function getMeldCryptoCode(symbol: string, chainId: number): string {
-    const chainCode = MELD_CHAIN_CODES[chainId];
-    if (!chainCode) {
-        throw new Error(`Chain ${chainId} not supported by MELD`);
-    }
-    return `${symbol}_${chainCode}`;
-}
-
-/**
- * Hook to fetch quotes from MELD
- */
-export function useMeldQuotes(params: {
-    sourceCurrency: string;
-    destinationCurrency: string; // Should be in format SYMBOL_CHAINCODE
-    amount: number;
-    countryCode: string;
-    enabled?: boolean;
-}) {
-    const { sourceCurrency, destinationCurrency, amount, countryCode, enabled = true } = params;
-
-    return useQuery({
-        queryKey: ["meld-quotes", sourceCurrency, destinationCurrency, amount, countryCode],
-        queryFn: async (): Promise<MeldQuote[]> => {
-            const searchParams = new URLSearchParams({
-                sourceCurrencyCode: sourceCurrency,
-                destinationCurrencyCode: destinationCurrency,
-                sourceAmount: String(amount),
-                countryCode,
-                paymentMethodType: "CREDIT_DEBIT_CARD",
-            });
-
-            const res = await fetch(`${MELD_BFF_URL}/quotes?${searchParams}`);
-
-            if (!res.ok) {
-                const error = await res.json().catch(() => ({ error: "Failed to fetch quotes" }));
-                throw new Error(error.error || error.message || "Failed to fetch quotes");
-            }
-
-            const data: MeldQuotesResponse = await res.json();
-
-            if (data.error) {
-                throw new Error(data.error);
-            }
-
-            // Sort by best rate (highest destination amount)
-            return (data.quotes || []).sort((a, b) => b.destinationAmount - a.destinationAmount);
-        },
-        enabled: enabled && amount > 0 && !!destinationCurrency && !!countryCode,
-        staleTime: 30000, // 30 seconds
-        refetchInterval: 60000, // Refresh every minute
-    });
-}
-
-/**
- * Hook to create a MELD session
- */
-export function useCreateMeldSession() {
-    const queryClient = useQueryClient();
-
-    return useMutation({
-        mutationFn: async (params: MeldSessionRequest): Promise<MeldSessionResponse> => {
-            const res = await fetch(`${MELD_BFF_URL}/session`, {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify(params),
-            });
-
-            if (!res.ok) {
-                const error = await res.json().catch(() => ({ error: "Failed to create session" }));
-                throw new Error(error.error || error.message || "Failed to create session");
-            }
-
-            return res.json();
-        },
-        onSuccess: (data) => {
-            // Store session for tracking
-            if (data.sessionId) {
-                queryClient.setQueryData(["meld-session", data.sessionId], data);
-            }
-        },
-    });
-}
-
-/**
- * Hook to track a MELD transaction
- */
-export function useMeldTransaction(sessionId: string | null) {
-    return useQuery({
-        queryKey: ["meld-transaction", sessionId],
-        queryFn: async (): Promise<MeldTransaction | null> => {
-            if (!sessionId) return null;
-
-            const res = await fetch(`${MELD_BFF_URL}/transaction/${sessionId}`);
-
-            if (!res.ok) {
-                if (res.status === 404) {
-                    return null; // Transaction not found yet
-                }
-                const error = await res.json().catch(() => ({ error: "Failed to fetch transaction" }));
-                throw new Error(error.error || error.message || "Failed to fetch transaction");
-            }
-
-            return res.json();
-        },
-        enabled: !!sessionId,
-        refetchInterval: (query) => {
-            const data = query.state.data;
-            // Stop polling when transaction is complete or failed
-            if (
-                data?.status === "COMPLETED" ||
-                data?.status === "FAILED" ||
-                data?.status === "REFUNDED" ||
-                data?.status === "CANCELLED"
-            ) {
-                return false;
-            }
-            return 3000; // Poll every 3 seconds
-        },
-        staleTime: 0, // Always refetch
-    });
-}
-
-/**
- * Terminal status check
- */
-export function isTerminalStatus(status: MeldTransactionStatus): boolean {
-    return ["COMPLETED", "FAILED", "REFUNDED", "CANCELLED"].includes(status);
-}
-
-/**
- * Success status check
- */
-export function isSuccessStatus(status: MeldTransactionStatus): boolean {
-    return status === "COMPLETED";
-}
-
-/**
- * Hook for detecting user's country code
- */
-export function useCountryCode() {
-    const [countryCode, setCountryCode] = useState<string>("US");
-    const [isLoading, setIsLoading] = useState(true);
-
-    useEffect(() => {
-        // Try to detect country from timezone
-        const detectCountry = async () => {
-            try {
-                // Simple timezone-based detection (can be enhanced)
-                const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-
-                // Basic mapping of common timezones
-                const tzToCountry: Record<string, string> = {
-                    "America/New_York": "US",
-                    "America/Los_Angeles": "US",
-                    "America/Chicago": "US",
-                    "Europe/London": "GB",
-                    "Europe/Paris": "FR",
-                    "Europe/Berlin": "DE",
-                    "Asia/Tokyo": "JP",
-                    "Asia/Singapore": "SG",
-                    "Australia/Sydney": "AU",
-                };
-
-                const detected = tzToCountry[timezone];
-                if (detected) {
-                    setCountryCode(detected);
-                }
-            } catch {
-                // Keep default
-            } finally {
-                setIsLoading(false);
-            }
-        };
-
-        detectCountry();
-    }, []);
-
-    return { countryCode, setCountryCode, isLoading };
-}
-
-/**
- * Hook to manage the full MELD card buy flow state
- */
-export function useMeldCardBuyFlow() {
-    const [sessionId, setSessionId] = useState<string | null>(null);
-    const [widgetUrl, setWidgetUrl] = useState<string | null>(null);
-    const [widgetOpen, setWidgetOpen] = useState(false);
-
-    const createSession = useCreateMeldSession();
-    const { data: transaction, isLoading: isTrackingLoading } = useMeldTransaction(sessionId);
-
-    const startSession = useCallback(
-        async (params: MeldSessionRequest) => {
-            const result = await createSession.mutateAsync(params);
-            setSessionId(result.sessionId);
-            setWidgetUrl(result.widgetUrl);
-            return result;
-        },
-        [createSession]
-    );
-
-    const openWidget = useCallback(() => {
-        if (widgetUrl) {
-            setWidgetOpen(true);
-            // Open in new window/tab
-            window.open(widgetUrl, "_blank", "width=500,height=700");
-        }
-    }, [widgetUrl]);
-
-    const reset = useCallback(() => {
-        setSessionId(null);
-        setWidgetUrl(null);
-        setWidgetOpen(false);
-    }, []);
-
-    return {
-        // Session management
-        sessionId,
-        widgetUrl,
-        widgetOpen,
-        startSession,
-        openWidget,
-        reset,
-
-        // Session creation state
-        isCreatingSession: createSession.isPending,
-        sessionError: createSession.error,
-
-        // Transaction tracking
-        transaction,
-        isTrackingLoading,
-        isComplete: transaction ? isSuccessStatus(transaction.status) : false,
-        isFailed: transaction
-            ? ["FAILED", "REFUNDED", "CANCELLED"].includes(transaction.status)
-            : false,
-    };
-}
-
-/**
- * Format MELD provider name for display
- */
-export function formatProviderName(provider: string): string {
-    const names: Record<string, string> = {
-        TRANSAK: "Transak",
-        MOONPAY: "MoonPay",
-        BANXA: "Banxa",
-        RAMP: "Ramp",
-        SARDINE: "Sardine",
-        STRIPE: "Stripe",
-    };
-    return names[provider] || provider;
-}
-
-/**
- * Get provider icon URL
- */
-export function getProviderIcon(provider: string): string {
-    const icons: Record<string, string> = {
-        TRANSAK: "https://assets.transak.com/images/website/transak-logo.svg",
-        MOONPAY: "https://www.moonpay.com/assets/logo-full-white.svg",
-        BANXA: "https://banxa.com/wp-content/uploads/2022/07/banxa-logo.svg",
-        RAMP: "https://ramp.network/assets/images/Logo.svg",
-    };
-    return icons[provider] || "";
-}