@ensofinance/checkout-widget 0.0.17 → 0.0.19

package/src/util/meld-hooks.tsx

@@ -0,0 +1,319 @@
+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] || "";
+}

package/src/util/tx-tracker.tsx

@@ -52,7 +52,7 @@ export const useTrackTx = () => {
     return { track };
 };
 
-enum LayerZeroStatus {
+export enum LayerZeroStatus {
     Pending = "PENDING",
     Success = "SUCCEEDED",
     Failed = "FAILED",
@@ -61,6 +61,167 @@ enum LayerZeroStatus {
     Delivered = "DELIVERED",
 }
 
+// Types for Enso bridge check API response
+export interface BridgeCheckResponse {
+    sourceChainId: number;
+    sourceTxHash: string;
+    status: "pending" | "success" | "failed";
+    layerZeroMessage?: {
+        srcEid: number;
+        dstEid: number;
+        srcChainId: number;
+        dstChainId: number;
+        status: LayerZeroStatus;
+        srcTxHash: string;
+        dstTxHash: string;
+        srcBlockNumber: string;
+        dstBlockNumber: number;
+        sender: string;
+        receiver: string;
+    };
+    destinationChainId?: number;
+    destinationTxHash?: string;
+    ensoSourceEvent?: {
+        accountId: string;
+        requestId: string;
+        blockNumber: number;
+        transactionHash: string;
+        chainId: number;
+        success: boolean;
+    };
+    ensoDestinationEvent?: {
+        blockNumber: number;
+        transactionHash: string;
+        chainId: number;
+        success: boolean;
+        error?: string;
+        refundDetails?: {
+            token: string;
+            amount: string;
+            recipient: string;
+            isNative: boolean;
+        };
+    };
+}
+
+// Hook for bridge status using Enso API (includes destination execution verification)
+export const useBridgeStatus = (
+    hash?: `0x${string}`,
+    chainId?: number,
+    enabled = true,
+) => {
+    const { data, isLoading } = useQuery({
+        queryKey: ["bridgeStatus", hash || "none", chainId],
+        queryFn: async (): Promise<BridgeCheckResponse | null> => {
+            if (!hash || !chainId) return null;
+            const res = await fetch(
+                `https://api.enso.finance/api/v1/layerzero/bridge/check?chainId=${chainId}&txHash=${hash}`,
+            );
+            if (!res.ok) return null;
+            return res.json();
+        },
+        refetchInterval: 3000,
+        enabled: enabled && !!hash && !!chainId,
+    });
+
+    const lzStatus = data?.layerZeroMessage?.status;
+    const overallStatus = data?.status;
+    const destinationSuccess = data?.ensoDestinationEvent?.success;
+    const refundDetails = data?.ensoDestinationEvent?.refundDetails;
+
+    let step = 0;
+    let message = "Waiting for bridge transaction...";
+
+    if (!data) {
+        step = 0;
+        message = "Waiting for bridge transaction...";
+    } else if (lzStatus === LayerZeroStatus.Inflight) {
+        step = 1;
+        message = "Funds in transit to destination...";
+    } else if (lzStatus === LayerZeroStatus.Confirming) {
+        step = 2;
+        message = "Confirming on destination chain...";
+    } else if (lzStatus === LayerZeroStatus.Delivered) {
+        if (overallStatus === "success" || destinationSuccess === true) {
+            step = 4;
+            message = "Bridge completed successfully!";
+        } else if (overallStatus === "failed" || destinationSuccess === false) {
+            step = 4;
+            message = refundDetails
+                ? "Destination execution failed. Funds refunded."
+                : "Destination execution failed.";
+        } else {
+            step = 3;
+            message = "Verifying destination execution...";
+        }
+    } else if (lzStatus === LayerZeroStatus.Failed) {
+        step = 4;
+        message = "Bridge transaction failed.";
+    }
+
+    return {
+        data,
+        isLoading,
+        lzStatus,
+        overallStatus,
+        destinationSuccess,
+        refundDetails,
+        step,
+        message,
+        isComplete: overallStatus === "success",
+        isFailed: overallStatus === "failed" || lzStatus === LayerZeroStatus.Failed,
+        destinationTxHash: data?.destinationTxHash,
+    };
+};
+
+// Legacy hook for LayerZero status polling (kept for backward compatibility)
+export const useLayerZeroStatus = (hash?: `0x${string}`, enabled = true) => {
+    const { data, isLoading } = useQuery({
+        queryKey: ["layerZeroStatus", hash || "none"],
+        queryFn: async () => {
+            if (!hash) return null;
+            return fetch(
+                `https://scan.layerzero-api.com/v1/messages/tx/${hash}`,
+            )
+                .then((res) => res.json())
+                .then((res) => res.data?.[0] ?? null);
+        },
+        refetchInterval: 2000,
+        enabled: enabled && !!hash,
+    });
+
+    const statusName = data?.status?.name as LayerZeroStatus | undefined;
+    const sourceStatus = data?.source?.status as LayerZeroStatus | undefined;
+
+    let step = 0;
+    let message = "Waiting for bridge transaction...";
+
+    if (sourceStatus && sourceStatus !== LayerZeroStatus.Success) {
+        step = 1;
+        message = "Waiting for funds to be sent on destination";
+    } else if (statusName === LayerZeroStatus.Inflight) {
+        step = 2;
+        message = "Waiting for funds to be delivered on destination";
+    } else if (statusName === LayerZeroStatus.Confirming) {
+        step = 3;
+        message = "Waiting for destination execution";
+    } else if (statusName === LayerZeroStatus.Delivered) {
+        step = 4;
+        message = "Bridging is complete";
+    }
+
+    return {
+        data,
+        isLoading,
+        status: statusName,
+        sourceStatus,
+        step,
+        message,
+        isComplete: statusName === LayerZeroStatus.Delivered,
+        isFailed: statusName === LayerZeroStatus.Failed,
+    };
+}
+
 const useLayerZeroUrl = (hash?: `0x${string}`, reset?: () => void) => {
     // const [loadingToastId, setLoadingToastId] = useState<string>();
     const updateTx = useTrackingStore((state) => state.updateTx);