@ensofinance/checkout-widget 0.0.18 → 0.0.19

package/src/store.ts

@@ -30,6 +30,10 @@ type Store = {
     slippage?: number;
     setSlippage: (slippage: number) => void;
 
+    // Override recipient address (different from connected wallet)
+    recipient?: string;
+    setRecipient: (recipient: string | undefined) => void;
+
     // Mesh integration
     meshAccessToken: AccessTokenPayload | null;
     setMeshAccessToken: (meshAccessToken: AccessTokenPayload) => void;
@@ -63,6 +67,10 @@ export const useAppStore = create<Store>((set) => ({
     slippage: DEFAULT_SLIPPAGE,
     setSlippage: (slippage: number) => set({ slippage }),
 
+    // Override recipient address
+    recipient: undefined,
+    setRecipient: (recipient: string | undefined) => set({ recipient }),
+
     // Mesh integration
     meshAccessToken: null,
     setMeshAccessToken: (meshAccessToken: AccessTokenPayload) =>

package/src/types/index.ts

@@ -16,6 +16,8 @@ export type CheckoutConfig = {
     enableExchange?: SupportedExchanges[];
     /** Override the default CEX bridge chain mapping (maps target chains to intermediate chains for withdrawal + bridge) */
     cexBridgeChainMapping?: Record<number, number>;
+    /** Override recipient address (defaults to connected wallet's smart account) */
+    recipient?: string;
 };
 
 export type CheckoutModalProps = {

package/src/util/constants.tsx

@@ -18,7 +18,7 @@ export const EXCHANGE_MIN_LIMIT = {
     [MESH_SYMBOLS.USDT]: 20,
     [MESH_SYMBOLS.WBTC]: 0.00000001,
 };
-export const EXCHANGE_MAX_LIMIT_GAP_USD = 5
+export const EXCHANGE_MAX_LIMIT_GAP_USD = 5;
 
 export const ETH_TOKEN: Token = {
     address: ETH_ADDRESS,
@@ -197,14 +197,6 @@ export const DEFAULT_CEX_BRIDGE_CHAIN_MAPPING: Record<number, number> = {
     [SupportedChainId.HYPERLIQUID]: SupportedChainId.ARBITRUM_ONE, // 999 → 42161
 };
 
-/** @deprecated Use the context-aware version with custom mapping parameter */
-export const CEX_BRIDGE_CHAIN_MAPPING = DEFAULT_CEX_BRIDGE_CHAIN_MAPPING;
-
-export const isCexBridgeRequired = (
-    chainId: number,
-    mapping: Record<number, number> = DEFAULT_CEX_BRIDGE_CHAIN_MAPPING,
-): boolean => chainId in mapping;
-
 export const getCexIntermediateChain = (
     chainId: number,
     mapping: Record<number, number> = DEFAULT_CEX_BRIDGE_CHAIN_MAPPING,

package/src/util/enso-hooks.tsx

@@ -14,9 +14,9 @@ import {
 import { getWalletDisplayName, getWalletIcon } from "@/util/wallet";
 import { formatUSD, normalizeValue } from "@/util";
 import { useAppStore } from "@/store";
-import { VITALIK_ADDRESS } from "./constants";
+import { SupportedChainId, VITALIK_ADDRESS } from "./constants";
 
-export function getERC4337CloneFactory(chainId: ChainIds): AddressArg {
+export function getERC4337CloneFactory(chainId: SupportedChainId): Address {
     return "0x1a59347d28f64091079fa04a2cbd03da63dff154";
 }
 
@@ -84,6 +84,7 @@ export const useAppDetails = () => {
     const selectedIntegration = useAppStore(
         (state) => state.selectedIntegration,
     );
+    const recipient = useAppStore((state) => state.recipient);
 
     const {
         data: [tokenInData],
@@ -115,7 +116,8 @@ export const useAppDetails = () => {
                 }),
             );
 
-            const protocolName = protocolData?.name || nontokenizedData.protocol;
+            const protocolName =
+                protocolData?.name || nontokenizedData.protocol;
 
             // Return first underlying token as primary, with all underlyingTokens available
             return {
@@ -153,6 +155,7 @@ export const useAppDetails = () => {
         effectiveTokenOutData,
         effectivePrice,
         isNontokenized,
+        recipient,
     };
 };
 
@@ -262,12 +265,16 @@ export const useRouteData = () => {
         tokenOut,
         selectedIntegration,
         isNontokenized,
+        recipient,
     } = useAppDetails();
 
+    // Use recipient override if provided, otherwise use connected wallet address
+    const receiver = recipient || address;
+
     const standardRoute = useTokenizedRouteData({
         routingStrategy: selectedIntegration?.type ? "checkout" : "router",
         fromAddress: address,
-        receiver: address,
+        receiver,
         spender: address,
         amountIn,
         tokenIn,
@@ -281,7 +288,7 @@ export const useRouteData = () => {
     const nontokenizedRoute = useNontokenizedRouteData({
         routingStrategy: selectedIntegration?.type ? "checkout" : "router",
         fromAddress: address,
-        receiver: address,
+        receiver,
         spender: address,
         amountIn,
         tokenIn,

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] || "";
+}