@ensofinance/checkout-widget 0.1.8 → 0.1.9

package/src/components/ui/index.tsx

@@ -56,12 +56,10 @@ export const Button = chakra(ChakraButton, {
         width: "100%",
         justifyContent: "center",
         alignItems: "center",
-        borderRadius: "control",
+        borderRadius: "md",
         flexShrink: "initial",
-        transition: "transform 0.12s ease, opacity 0.12s ease",
-        _active: {
-            transform: "scale(0.98)",
-        },
+        // cursor: "pointer",
+        // transition: "all 0.2s ease-in-out",
     },
     variants: {
         visual: {
@@ -76,24 +74,10 @@ 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: {
@@ -146,7 +130,7 @@ export const Tab = chakra("div", {
         justifyContent: "center",
         alignItems: "center",
         gap: "8px",
-        borderRadius: "control",
+        borderRadius: "6px",
         cursor: "pointer",
         color: "fg.muted",
         fontSize: "14px",
@@ -315,13 +299,12 @@ export const Card: React.FC<CardProps> & {
     return (
         <Box
             p={padding}
-            borderRadius="card"
+            borderRadius="md"
             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
@@ -393,7 +376,7 @@ export const Helper: React.FC<HelperProps> = ({ children, type = "info" }) => {
         <Flex
             gap={1}
             p={3}
-            borderRadius="card"
+            borderRadius="md"
             border="1px solid"
             fontSize="sm"
             {...style}

package/src/components/ui/toaster.tsx

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

package/src/types/index.ts

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