@ensofinance/checkout-widget 0.1.6 → 0.1.8

package/src/util/meld-hooks.tsx

@@ -0,0 +1,533 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useState, useEffect, useMemo } from "react";
+import { useReadContract } from "wagmi";
+import { erc20Abi, formatUnits, isAddress, parseUnits } from "viem";
+import type {
+    MeldQuote,
+    MeldQuotesResponse,
+    MeldSessionRequest,
+    MeldSessionResponse,
+    MeldSupportedCrypto,
+    MeldSupportedCryptoResponse,
+    MeldTransaction,
+    MeldTransactionStatus,
+} from "@/types";
+import { CHECKOUT_BFF_URL, USDC_ADDRESS_BY_CHAIN_ID } from "@/util/constants";
+import transakIcon from "@/assets/providers/transak.svg";
+import moonpayIcon from "@/assets/providers/moonpay.svg";
+import banxaIcon from "@/assets/providers/banxa.svg";
+import mercuryoIcon from "@/assets/providers/mercuryo.svg";
+import kryptonimIcon from "@/assets/providers/kryptonim.svg";
+import alchemypayIcon from "@/assets/providers/alchemypay.svg";
+import unlimitIcon from "@/assets/providers/unlimit.svg";
+import topperIcon from "@/assets/providers/topper.svg";
+import stripeIcon from "@/assets/providers/stripe.svg";
+import binanceconnectIcon from "@/assets/providers/binanceconnect.svg";
+
+const MELD_BFF_URL = `${CHECKOUT_BFF_URL}/meld`;
+const USDC_DECIMALS = 6;
+
+function getMeldQuoteScore(quote: MeldQuote): number {
+    if (typeof quote.rampIntelligence?.rampScore === "number") {
+        return quote.rampIntelligence.rampScore;
+    }
+    if (typeof quote.customerScore === "number") {
+        return quote.customerScore;
+    }
+    return 0;
+}
+
+/**
+ * Fetch MELD-supported destination currencies for a given country.
+ */
+export function useMeldSupportedCrypto(params?: {
+    countryCode?: string | null;
+    enabled?: boolean;
+}) {
+    const { countryCode, enabled = true } = params ?? {};
+
+    return useQuery({
+        queryKey: ["meld-supported-crypto", countryCode],
+        queryFn: async (): Promise<MeldSupportedCrypto[]> => {
+            const searchParams = new URLSearchParams({
+                countryCode,
+            });
+
+            const res = await fetch(
+                `${MELD_BFF_URL}/supported-crypto?${searchParams.toString()}`,
+            );
+
+            if (!res.ok) {
+                const error = await res.json().catch(() => ({
+                    error: "Failed to fetch supported crypto",
+                }));
+                throw new Error(
+                    error.error ||
+                        error.message ||
+                        "Failed to fetch supported crypto",
+                );
+            }
+
+            const data:
+                | MeldSupportedCryptoResponse
+                | { currencies?: MeldSupportedCrypto[] }
+                | MeldSupportedCrypto[] = await res.json();
+
+            const rawCurrencies = Array.isArray(data)
+                ? data
+                : Array.isArray(data.currencies)
+                  ? data.currencies
+                  : [];
+
+            return rawCurrencies.filter((currency) => !!currency.currencyCode);
+        },
+        enabled,
+        staleTime: 5 * 60 * 1000,
+    });
+}
+
+/**
+ * Resolve MELD destination currency code for symbol+chain from supported metadata.
+ */
+export function getMeldDestinationCurrencyCode(params: {
+    symbol: string;
+    chainId: number;
+    supportedCryptos: MeldSupportedCrypto[];
+}): string | null {
+    const { symbol, chainId, supportedCryptos } = params;
+
+    const symbolUpper = symbol.toUpperCase();
+    const targetContract = USDC_ADDRESS_BY_CHAIN_ID[chainId]?.toLowerCase();
+    if (!targetContract) return null;
+
+    const symbolMatches = supportedCryptos.filter((currency) =>
+        currency.currencyCode.toUpperCase().startsWith(`${symbolUpper}_`),
+    );
+    if (symbolMatches.length === 0) return null;
+
+    const byContract = symbolMatches.find(
+        (currency) =>
+            currency.contractAddress?.toLowerCase() === targetContract,
+    );
+    if (byContract) {
+        return byContract.currencyCode;
+    }
+
+    const byChainId = symbolMatches.find(
+        (currency) => currency.chainId === chainId,
+    );
+    if (byChainId) {
+        return byChainId.currencyCode;
+    }
+
+    return symbolMatches.length === 1 ? symbolMatches[0].currencyCode : null;
+}
+
+/**
+ * Card-buy (fixed USDC) support check.
+ */
+export function isMeldCardBuySupportedChain(
+    chainId: number,
+    supportedCryptos: MeldSupportedCrypto[],
+): boolean {
+    return (
+        !!USDC_ADDRESS_BY_CHAIN_ID[chainId] &&
+        !!getMeldDestinationCurrencyCode({
+            symbol: "USDC",
+            chainId,
+            supportedCryptos,
+        })
+    );
+}
+
+/**
+ * Hook to fetch quotes from MELD
+ */
+export function useMeldQuotes(params: {
+    sourceCurrency: string;
+    destinationCurrency: string; // Should be in format SYMBOL_CHAINCODE
+    amount: number;
+    countryCode: string;
+    walletAddress: string;
+    enabled?: boolean;
+}) {
+    const {
+        sourceCurrency,
+        destinationCurrency,
+        amount,
+        countryCode,
+        walletAddress,
+        enabled = true,
+    } = params;
+
+    return useQuery({
+        queryKey: [
+            "meld-quotes",
+            sourceCurrency,
+            destinationCurrency,
+            amount,
+            countryCode,
+            walletAddress,
+        ],
+        queryFn: async (): Promise<MeldQuote[]> => {
+            const searchParams = new URLSearchParams({
+                sourceCurrencyCode: sourceCurrency,
+                destinationCurrencyCode: destinationCurrency,
+                sourceAmount: String(amount),
+                countryCode,
+                walletAddress,
+                paymentMethodType: "CREDIT_DEBIT_CARD",
+            });
+
+            const res = await fetch(
+                `${MELD_BFF_URL}/quotes?${searchParams.toString()}`,
+            );
+
+            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);
+            }
+
+            // Prefer modern MELD ramp score, fallback to legacy customerScore.
+            return (data.quotes || []).sort((a, b) => {
+                const scoreA = getMeldQuoteScore(a);
+                const scoreB = getMeldQuoteScore(b);
+                if (scoreB !== scoreA) return scoreB - scoreA;
+                return b.destinationAmount - a.destinationAmount;
+            });
+        },
+        enabled:
+            enabled &&
+            amount > 0 &&
+            !!destinationCurrency &&
+            !!countryCode &&
+            !!walletAddress,
+        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,
+                );
+            }
+        },
+    });
+}
+
+const TERMINAL_MELD_STATUSES = new Set<MeldTransactionStatus>([
+    "SETTLED",
+    "REFUNDED",
+    "DECLINED",
+    "CANCELLED",
+    "FAILED",
+    "ERROR",
+    "VOIDED",
+    "AUTHORIZATION_EXPIRED",
+]);
+
+/**
+ * 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;
+            if (data?.status && TERMINAL_MELD_STATUSES.has(data.status)) {
+                return false;
+            }
+            return 3000; // Poll every 3 seconds
+        },
+        staleTime: 0, // Always refetch
+    });
+}
+
+/**
+ * Terminal status check
+ */
+export function isTerminalStatus(status: MeldTransactionStatus): boolean {
+    return TERMINAL_MELD_STATUSES.has(status);
+}
+
+/**
+ * Success status check
+ */
+export function isSuccessStatus(status: MeldTransactionStatus): boolean {
+    return status === "SETTLED";
+}
+
+/**
+ * Check if MELD payment has been initiated (settling or settled)
+ */
+export function isMeldPaymentInitiated(status: MeldTransactionStatus): boolean {
+    return status === "SETTLING" || status === "SETTLED";
+}
+
+/**
+ * Hook for detecting user's country code via BFF /geo endpoint.
+ */
+export function useCountryCode() {
+    const { data, isLoading } = useQuery({
+        queryKey: ["geo-country"],
+        queryFn: async (): Promise<string | null> => {
+            try {
+                const res = await fetch(`${CHECKOUT_BFF_URL}/geo`, {
+                    signal: AbortSignal.timeout(3000),
+                });
+                if (!res.ok) throw new Error("Failed to fetch country code");
+                const geo = (await res.json()) as { country?: string };
+                return geo.country || "PL";
+            } catch {
+                return "US";
+            }
+        },
+        retry: 0,
+        staleTime: 5 * 60 * 1000,
+    });
+
+    return {
+        countryCode: data ?? null,
+        isLoading,
+    };
+}
+
+export function useIncomingUsdcTransferDetector(params: {
+    chainId?: number;
+    walletAddress?: string;
+    enabled?: boolean;
+    thresholdUsdc?: string;
+}) {
+    const {
+        chainId,
+        walletAddress,
+        enabled = true,
+        thresholdUsdc = "0.01",
+    } = params;
+
+    const usdcAddress = chainId ? USDC_ADDRESS_BY_CHAIN_ID[chainId] : undefined;
+    const shouldTrack =
+        !!enabled &&
+        !!chainId &&
+        !!usdcAddress &&
+        !!walletAddress &&
+        isAddress(walletAddress);
+    const threshold = useMemo(
+        () => parseUnits(thresholdUsdc, USDC_DECIMALS),
+        [thresholdUsdc],
+    );
+    const [baselineBalance, setBaselineBalance] = useState<bigint | null>(null);
+    const [detectedAmount, setDetectedAmount] = useState<string | null>(null);
+
+    const { data, refetch, isFetching, isLoading } = useReadContract({
+        chainId,
+        address: usdcAddress as `0x${string}` | undefined,
+        abi: erc20Abi,
+        functionName: "balanceOf",
+        args: walletAddress ? [walletAddress as `0x${string}`] : undefined,
+        query: {
+            enabled: shouldTrack,
+            refetchInterval: shouldTrack ? 4000 : false,
+            staleTime: 0,
+        },
+    });
+
+    useEffect(() => {
+        if (!shouldTrack) {
+            setBaselineBalance(null);
+            setDetectedAmount(null);
+        }
+    }, [shouldTrack]);
+
+    useEffect(() => {
+        if (!shouldTrack || typeof data !== "bigint" || detectedAmount) return;
+
+        if (baselineBalance === null) {
+            setBaselineBalance(data);
+            return;
+        }
+
+        if (data <= baselineBalance) return;
+
+        const delta = data - baselineBalance;
+        if (delta >= threshold) {
+            setDetectedAmount(formatUnits(delta, USDC_DECIMALS));
+        }
+    }, [
+        shouldTrack,
+        data,
+        baselineBalance,
+        detectedAmount,
+        threshold,
+        isFetching,
+    ]);
+
+    console.log(data, baselineBalance, detectedAmount);
+
+    const reset = useCallback(() => {
+        setBaselineBalance(null);
+        setDetectedAmount(null);
+    }, []);
+
+    return {
+        detectedAmount,
+        isDetected: detectedAmount !== null,
+        isTracking: shouldTrack,
+        isRefreshing: isFetching || isLoading,
+        currentBalance: typeof data === "bigint" ? data : null,
+        baselineBalance,
+        reset,
+    };
+}
+
+/**
+ * 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 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,
+    };
+}
+
+/**
+ * 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",
+        MERCURYO: "Mercuryo",
+        ALCHEMY_PAY: "Alchemy Pay",
+        KRYPTONIM: "Kryptonim",
+        UNLIMIT: "Unlimit",
+        TOPPER: "Topper",
+        BINANCE_CONNECT: "Binance Connect",
+    };
+    return names[provider] || provider;
+}
+
+/**
+ * Get provider icon URL
+ */
+export function getProviderIcon(provider: string): string {
+    const icons: Record<string, string> = {
+        TRANSAK: transakIcon,
+        MOONPAY: moonpayIcon,
+        BANXA: banxaIcon,
+        MERCURYO: mercuryoIcon,
+        KRYPTONIM: kryptonimIcon,
+        ALCHEMY_PAY: alchemypayIcon,
+        UNLIMIT: unlimitIcon,
+        TOPPER: topperIcon,
+        STRIPE: stripeIcon,
+        BINANCE_CONNECT: binanceconnectIcon,
+    };
+    return icons[provider] || "";
+}