@ensofinance/checkout-widget 0.1.6 → 0.1.8

package/src/components/ui/index.tsx

@@ -56,10 +56,12 @@ export const Button = chakra(ChakraButton, {
         width: "100%",
         justifyContent: "center",
         alignItems: "center",
-        borderRadius: "md",
+        borderRadius: "control",
         flexShrink: "initial",
-        // cursor: "pointer",
-        // transition: "all 0.2s ease-in-out",
+        transition: "transform 0.12s ease, opacity 0.12s ease",
+        _active: {
+            transform: "scale(0.98)",
+        },
     },
     variants: {
         visual: {
@@ -74,10 +76,24 @@ export const Button = chakra(ChakraButton, {
             grayFilled: {
                 bg: "bg.emphasized",
                 color: "customWhite",
+                // Override Chakra's default solid hover.
+                _hover: {
+                    bg: "bg.emphasized",
+                },
+                _active: {
+                    bg: "bg.emphasized",
+                },
             },
             lightGray: {
                 bg: "bg.subtle",
                 color: "fg",
+                // Override Chakra's default solid hover.
+                _hover: {
+                    bg: "bg.emphasized",
+                },
+                _active: {
+                    bg: "bg.emphasized",
+                },
             },
         },
         size: {
@@ -130,7 +146,7 @@ export const Tab = chakra("div", {
         justifyContent: "center",
         alignItems: "center",
         gap: "8px",
-        borderRadius: "6px",
+        borderRadius: "control",
         cursor: "pointer",
         color: "fg.muted",
         fontSize: "14px",
@@ -299,12 +315,13 @@ export const Card: React.FC<CardProps> & {
     return (
         <Box
             p={padding}
-            borderRadius="md"
+            borderRadius="card"
             border="1px solid"
             borderColor={selected ? "primary" : "border"}
             bg="bg"
             cursor={onClick && !disabled ? "pointer" : "default"}
             opacity={disabled ? 0.5 : 1}
+            transition="border-color 0.15s ease, opacity 0.15s ease"
             _hover={
                 selected
                     ? undefined
@@ -376,7 +393,7 @@ export const Helper: React.FC<HelperProps> = ({ children, type = "info" }) => {
         <Flex
             gap={1}
             p={3}
-            borderRadius="md"
+            borderRadius="card"
             border="1px solid"
             fontSize="sm"
             {...style}

package/src/components/ui/toaster.tsx

@@ -9,11 +9,12 @@ import {
   createToaster,
 } from "@chakra-ui/react"
 
-export const toaster = createToaster({
+export const toaster: ReturnType<typeof createToaster> = createToaster({
   placement: "bottom-end",
   pauseOnPageIdle: true,
 })
 
+
 export const Toaster = () => {
   return (
     <Portal>

package/src/components/ui/transitions.tsx

@@ -0,0 +1,16 @@
+import { chakra } from "@chakra-ui/react";
+
+/**
+ * Wraps content with a fade + slide-up entrance animation.
+ * Set a `key` prop on each instance so React re-mounts it when
+ * the step/flow changes, which replays the animation.
+ *
+ * @example
+ * <AnimatedStep key={currentStep}>{stepContent}</AnimatedStep>
+ */
+export const AnimatedStep = chakra("div", {
+    base: {
+        width: "100%",
+        animation: "fadeSlideUp 250ms ease-out both",
+    },
+});

package/src/types/index.ts

@@ -16,10 +16,14 @@ export type CheckoutConfig = {
     apiKey: string;
     theme?: WidgetTheme;
     enableExchange?: SupportedExchanges[];
+    /** Enable card purchases via MELD onramp */
+    enableCardBuy?: boolean;
     /** 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;
+    /** Slippage tolerance in basis points (e.g. 200 = 2%). Defaults to 200 */
+    slippage?: number;
     /** Force the widget to open in a specific flow, bypassing the selector */
     enforceFlow?: EnforceFlow;
 };
@@ -31,5 +35,100 @@ export type CheckoutModalProps = {
     onClose?: () => void;
 };
 
+// MELD Types
+export interface MeldQuote {
+    serviceProvider: string;
+    serviceProviderName: string;
+    transactionType: "BUY" | "SELL";
+    sourceAmount: number;
+    sourceCurrencyCode: string;
+    destinationAmount: number;
+    destinationCurrencyCode: string;
+    exchangeRate: number;
+    paymentMethodType: string;
+    customerScore?: number;
+    rampIntelligence?: {
+        rampScore?: number;
+        [key: string]: unknown;
+    };
+    totalFee: number;
+    networkFee: number;
+    transactionFee: number;
+    lowKyc?: boolean;
+}
+
+export interface MeldQuotesResponse {
+    quotes: MeldQuote[];
+    message?: string;
+    error?: string;
+}
+
+export interface MeldSessionRequest {
+    countryCode: string;
+    sourceCurrencyCode: string;
+    destinationCurrencyCode: string;
+    sourceAmount: number;
+    walletAddress: string;
+    serviceProvider?: string;
+    paymentMethodType?: string;
+    externalCustomerId?: string;
+    externalSessionId?: string;
+}
+
+export interface MeldSessionResponse {
+    widgetUrl: string;
+    sessionId: string;
+    token?: string;
+}
+
+export type MeldTransactionStatus =
+    | "PENDING_CREATED"
+    | "PENDING"
+    | "PROCESSING"
+    | "AUTHORIZED"
+    | "AUTHORIZATION_EXPIRED"
+    | "SETTLING"
+    | "SETTLED"
+    | "REFUNDED"
+    | "DECLINED"
+    | "CANCELLED"
+    | "FAILED"
+    | "ERROR"
+    | "VOIDED"
+    | "TWO_FA_REQUIRED"
+    | "TWO_FA_PROVIDED";
+
+export interface MeldTransaction {
+    transactionId: string;
+    externalCustomerId?: string;
+    externalSessionId?: string;
+    status: MeldTransactionStatus;
+    transactionType: "BUY" | "SELL";
+    sourceAmount: number;
+    sourceCurrencyCode: string;
+    destinationAmount: number;
+    destinationCurrencyCode: string;
+    destinationAddress: string;
+    transactionHash?: string;
+    serviceProvider: string;
+    paymentMethod?: string;
+    createdAt: string;
+    updatedAt: string;
+}
+
+export interface MeldSupportedCrypto {
+    currencyCode: string;
+    name: string;
+    chainCode: string;
+    chainId?: number;
+    contractAddress?: string;
+}
+
+export interface MeldSupportedCryptoResponse {
+    currencies: MeldSupportedCrypto[];
+    message?: string;
+    error?: string;
+}
+
 export type { WidgetTheme };
 export { SupportedExchanges };

package/src/util/constants.tsx

@@ -3,6 +3,30 @@ import { Token } from "@/util/common";
 export const ETH_ADDRESS = "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
 export const VITALIK_ADDRESS = "0xd8da6bf26964af9d7eed9e03e53415d37aa96045";
 export const DEFAULT_SLIPPAGE = 200;
+// Backend-for-frontend used for Mesh + MELD integrations.
+// export const CHECKOUT_BFF_URL = "http://localhost:3001/api";
+export const CHECKOUT_BFF_URL = "https://checkout-api.enso.build/api";
+// export const CHECKOUT_BFF_URL = "https://checkout-api.vercel.app/api";
+
+// Hardcoded USDC contract addresses for supported chains (native USDC where applicable).
+// Used by CardBuyFlow (MELD) as the fixed onramp asset.
+export const USDC_ADDRESS_BY_CHAIN_ID: Record<number, string> = {
+    1: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", // Ethereum
+    8453: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", // Base
+    42161: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831", // Arbitrum One
+    137: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359", // Polygon
+    10: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // Optimism
+    43114: "0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E", // Avalanche C-Chain
+    56: "0x8AC76a51cc950d9822D68b83fE1Ad97B32Cd580d", // BSC
+};
+
+export function getUsdcAddress(chainId: number): string {
+    const addr = USDC_ADDRESS_BY_CHAIN_ID[chainId];
+    if (!addr) {
+        throw new Error(`USDC is not configured for chainId ${chainId}`);
+    }
+    return addr;
+}
 
 enum MESH_SYMBOLS {
     ETH = "ETH",
@@ -225,3 +249,6 @@ export const CHAINS_ETHERSCAN: Record<SupportedChainId, string> = {
     [SupportedChainId.HYPERLIQUID]: "https://www.hyperscan.com/",
     [SupportedChainId.KATANA]: "https://explorer-katana.t.conduit.xyz/",
 };
+
+export const ENTRY_POINT_ADDRESS: `0x${string}` =
+    "0x0000000071727de22e5e9d8baf0edac6f37da032";

package/src/util/enso-hooks.tsx

@@ -1,4 +1,9 @@
-import { useAccount, useWalletClient, useReadContract } from "wagmi";
+import {
+    useAccount,
+    useWalletClient,
+    useReadContract,
+    usePublicClient,
+} from "wagmi";
 import { useCapabilities, useSendCalls } from "wagmi/experimental";
 import { Address, parseAbiItem } from "viem";
 import { useCallback, useMemo } from "react";
@@ -24,11 +29,9 @@ const GET_SMART_ADDRESS = parseAbiItem(
     "function getAddress(address) external view returns (address)",
 );
 
-export const useSmartAccountAddress = (
-    ownerAddress?: Address,
-    chainId?: number,
-) => {
+export const useSmartAccountAddress = (chainId = 1) => {
     const factoryAddress = getERC4337CloneFactory(chainId);
+    const { address } = useAccount();
 
     const {
         data: smartAccountAddress,
@@ -38,10 +41,10 @@ export const useSmartAccountAddress = (
         address: factoryAddress as Address,
         abi: [GET_SMART_ADDRESS],
         functionName: "getAddress",
-        args: ownerAddress ? [ownerAddress] : undefined,
+        args: address ? [address] : undefined,
         chainId,
         query: {
-            enabled: !!(factoryAddress && ownerAddress && chainId),
+            enabled: !!(factoryAddress && address && chainId),
         },
     });
 
@@ -52,11 +55,9 @@ export const useSmartAccountAddress = (
 };
 
 export const useSmartAccountBalances = (chainId: number = 1) => {
-    const { address } = useAccount();
-
     // Get smart account address for the given chain
     const { smartAccountAddress, isLoading: isLoadingSmartAccount } =
-        useSmartAccountAddress(address, chainId);
+        useSmartAccountAddress(chainId);
 
     // Get balances from smart account
     const {
@@ -159,6 +160,12 @@ export const useAppDetails = () => {
     };
 };
 
+export type TxStep =
+    | { type: "approving" }
+    | { type: "executing" }
+    | { type: "confirmed"; hash: string }
+    | { type: "atomic"; bundleId: string };
+
 export const useSendTxns = ({
     address,
     chainId,
@@ -168,83 +175,90 @@ export const useSendTxns = ({
     chainId: number;
     calls: any[];
 }) => {
-    const { sendCalls } = useSendCalls();
-    const { data: caps } = useCapabilities();
-    // const atomicOkay = caps?.[chainId]?.atomic?.status === "ready";
-    const atomicOkay = false;
-    // const useFallback = !atomicOkay; // one-line policy; tweak to taste
-    const wallet = useWalletClient();
+    const { sendCallsAsync } = useSendCalls();
+    const { data: caps, isFetched: capsFetched } = useCapabilities();
+    const atomicStatus = caps?.[chainId]?.atomic?.status;
+    const atomicOkay =
+        caps?.[chainId]?.atomicBatch?.supported === true ||
+        atomicStatus === "ready" ||
+        atomicStatus === "supported"; // metmask
+    console.log(
+        caps,
+        caps?.[chainId]?.atomicBatch?.supported,
+        caps?.[chainId]?.atomic?.status,
+    );
 
-    console.log(caps, atomicOkay, wallet.data);
+    const wallet = useWalletClient();
+    const publicClient = usePublicClient({ chainId });
 
     const sendTxns = useCallback(
-        async (
-            onTxSend: (hash: string) => void,
-            onFail: (error: any) => void,
-        ) => {
+        async ({
+            onStep,
+            onFail,
+        }: {
+            onStep: (step: TxStep) => void;
+            onFail: (error: any) => void;
+        }) => {
             if (!atomicOkay) {
-                // Send transactions sequentially when atomic is not supported
-                console.log(
-                    "Atomic not supported, sending transactions sequentially",
-                );
-
                 try {
-                    for (const call of calls) {
-                        console.log("Sending individual transaction:", call);
+                    for (let i = 0; i < calls.length; i++) {
+                        const call = calls[i];
+                        const isFinal = i === calls.length - 1;
 
-                        const result = await wallet.data?.sendTransaction({
+                        onStep(
+                            isFinal
+                                ? { type: "executing" }
+                                : { type: "approving" },
+                        );
+
+                        const hash = await wallet.data?.sendTransaction({
                             ...call,
                             account: address as Address,
                             chainId,
                         });
 
-                        console.log("Sequential transaction result:", result);
+                        if (!hash) {
+                            throw new Error("Transaction returned no hash");
+                        }
 
-                        // Check if transaction failed and stop execution
-                        if (!result) {
-                            throw new Error(
-                                `Transaction failed for call: ${JSON.stringify(call)}`,
-                            );
+                        if (!isFinal) {
+                            const receipt =
+                                await publicClient!.waitForTransactionReceipt({
+                                    hash,
+                                });
+                            if (receipt.status === "reverted") {
+                                throw new Error("Approve transaction reverted");
+                            }
                         }
 
-                        if (call === calls[calls.length - 1]) {
-                            onTxSend(result);
+                        if (isFinal) {
+                            onStep({ type: "confirmed", hash });
                         }
                     }
-
-                    console.log("All sequential transactions completed");
                 } catch (err) {
-                    console.error("Error in sequential transaction:", err);
                     onFail(err);
-                    throw err;
                 }
                 return;
             }
 
-            // Use atomic transactions when supported
-            wallet.data
-                ?.sendCalls(
-                    // @ts-ignore
-                    {
-                        calls,
-                        account: address as Address,
-                        forceAtomic: true, // request atomic only when possible
-                    },
-                )
-                .then((result) => {
-                    debugger;
-                    console.log(result);
-                })
-                .catch((err) => {
-                    debugger;
-                    console.error(err);
-                    onFail(err);
+            try {
+                const result = await sendCallsAsync({
+                    calls: calls.map((call) => ({
+                        ...call,
+                        chainId,
+                    })),
+                    account: address as Address,
                 });
+                onStep({ type: "atomic", bundleId: result.id });
+            } catch (err) {
+                onFail(err);
+            }
         },
-        [sendCalls, calls, atomicOkay, chainId, wallet.data],
+        [sendCallsAsync, calls, atomicOkay, chainId, wallet.data, publicClient],
     );
 
-    const ready = calls.length > 0 && wallet.data;
+    const ready =
+        calls.length > 0 && !!wallet.data && !!publicClient && capsFetched;
 
     return {
         ready,