@ensofinance/checkout-widget 0.0.19 → 0.0.20

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { ComponentType } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { SystemConfig as WidgetTheme } from '@chakra-ui/react';
 
-export declare const Checkout: ({ config: { apiKey, tokenOut, chainIdOut, theme, enableExchange, cexBridgeChainMapping, recipient }, onClose, wrapper, }: {
+export declare const Checkout: ({ config: { apiKey, tokenOut, chainIdOut, theme, enableExchange, cexBridgeChainMapping, recipient, enforceFlow, }, onClose, wrapper, }: {
     config: CheckoutConfig;
     wrapper?: ComponentType;
     onClose?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ensofinance/checkout-widget",
-    "version": "0.0.19",
+    "version": "0.0.20",
     "type": "module",
     "homepage": "https://www.enso.build/",
     "repository": {

package/src/components/Checkout.tsx

@@ -4,18 +4,33 @@ import FlowSelector from "./steps/FlowSelector";
 import { useAppStore } from "@/store";
 import { TxTracker } from "@/util/tx-tracker";
 import ChakraProvider from "./ChakraProvider";
-import { type CheckoutConfig, type SupportedExchanges } from "@/types";
+import {
+    type CheckoutConfig,
+    type SupportedExchanges,
+    type EnforceFlow,
+} from "@/types";
+import posthog from "posthog-js";
 
 type ICheckoutContext = {
     handleClose: () => void;
     enableExchange?: SupportedExchanges[];
     cexBridgeChainMapping?: Record<number, number>;
+    enforceFlow?: EnforceFlow;
 };
 
 const CheckoutContext = createContext<ICheckoutContext>({} as ICheckoutContext);
 
 const Checkout = ({
-    config: { apiKey, tokenOut, chainIdOut, theme, enableExchange, cexBridgeChainMapping, recipient },
+    config: {
+        apiKey,
+        tokenOut,
+        chainIdOut,
+        theme,
+        enableExchange,
+        cexBridgeChainMapping,
+        recipient,
+        enforceFlow,
+    },
     onClose,
     wrapper,
 }: {
@@ -47,6 +62,10 @@ const Checkout = ({
     }, [tokenOut, chainIdOut, recipient]);
 
     useEffect(() => {
+        posthog.init("phc_capPDVae4W7y6QIqVTugTtx5geVthX4YVswtXa6DrjM", {
+            api_host: "https://eu.i.posthog.com",
+            person_profiles: "always", // or 'always' to create profiles for anonymous users as well
+        });
         if (!apiKey) alert("Please provide an API key");
         setEnsoApiToken(apiKey);
     }, [apiKey]);
@@ -68,6 +87,7 @@ const Checkout = ({
                 handleClose,
                 enableExchange,
                 cexBridgeChainMapping,
+                enforceFlow,
             }}
         >
             <ChakraProvider themeConfig={theme}>

package/src/components/steps/ExchangeFlow.tsx

@@ -294,9 +294,9 @@ const ChooseExchangeStep = ({
 
     return (
         <BodyWrapper>
-            <Box mb={4} width="100%" textAlign="left">
-                <HeaderTitle>Choose Exchange</HeaderTitle>
-            </Box>
+            {/*<Box mb={4} width="100%" textAlign="left">*/}
+            {/*    <HeaderTitle>Choose Exchange</HeaderTitle>*/}
+            {/*</Box>*/}
 
             {integrations?.length > 0 ? (
                 <ListWrapper>
@@ -478,7 +478,6 @@ const DEVICE_ID_KEY = "meshDeviceId";
 const useDeviceId = () => {
     return useMemo(() => {
         let deviceId = localStorage.getItem(DEVICE_ID_KEY);
-        console.log(deviceId);
 
         if (!deviceId) {
             deviceId = `device_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
@@ -1967,7 +1966,7 @@ const ExchangeFlow = ({
     setFlow: (string) => void;
     initialStep?: WithdrawalStep;
 }) => {
-    const { handleClose } = useContext(CheckoutContext);
+    const { handleClose, enforceFlow } = useContext(CheckoutContext);
     const [currentStep, setCurrentStep] = useState(initialStep);
     const [selectedToken, setSelectedToken] = useState<MatchedToken | null>(
         null,
@@ -2047,30 +2046,38 @@ const ExchangeFlow = ({
         <>
             <Modal.Header>
                 <HeaderWrapper>
-                    <IconButton
-                        minWidth={"16px"}
-                        minHeight={"16px"}
-                        maxWidth={"16px"}
-                        onClick={() => {
-                            const index =
-                                (selectedIntegration?.type === "delayed"
-                                    ? balanceSteps
-                                    : withdrawalSteps
-                                ).findIndex((step) => step === currentStep) - 1;
-                            if (index > 0) {
-                                setCurrentStep(withdrawalSteps[index]);
-                            } else {
-                                setFlow("");
-                            }
-                        }}
-                    >
-                        <Icon
-                            as={ChevronLeft}
-                            color="gray"
-                            width={"16px"}
-                            height={"16px"}
-                        />
-                    </IconButton>
+                    {!(
+                        enforceFlow &&
+                        (currentStep === WithdrawalStep.ChooseExchange ||
+                            currentStep === WithdrawalStep.ChooseBalanceAsset)
+                    ) && (
+                        <IconButton
+                            minWidth={"16px"}
+                            minHeight={"16px"}
+                            maxWidth={"16px"}
+                            onClick={() => {
+                                const index =
+                                    (selectedIntegration?.type === "delayed"
+                                        ? balanceSteps
+                                        : withdrawalSteps
+                                    ).findIndex(
+                                        (step) => step === currentStep,
+                                    ) - 1;
+                                if (index >= 0) {
+                                    setCurrentStep(withdrawalSteps[index]);
+                                } else {
+                                    setFlow("");
+                                }
+                            }}
+                        >
+                            <Icon
+                                as={ChevronLeft}
+                                color="gray"
+                                width={"16px"}
+                                height={"16px"}
+                            />
+                        </IconButton>
+                    )}
 
                     <Box
                         display="flex"

package/src/components/steps/FlowSelector.tsx

@@ -1,6 +1,6 @@
-import { Box, Icon, Skeleton } from "@chakra-ui/react";
-import { X } from "lucide-react";
-import { useContext, useMemo, useState } from "react";
+import { Box, Icon, Skeleton, Text } from "@chakra-ui/react";
+import { X, AlertCircle } from "lucide-react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { useAccount } from "wagmi";
 import { IconButton } from "../ui";
 import {
@@ -22,17 +22,21 @@ import ExchangeFlow, {
     EXCHANGE_ICON_BY_TYPE,
     ExchangeToIntegrationType,
 } from "@/components/steps/ExchangeFlow";
-import WalletFlow from "@/components/steps/WalletFlow/WalletFlow";
+import WalletFlow, {
+    WalletFlowStep,
+} from "@/components/steps/WalletFlow/WalletFlow";
 
 const FLOWS = {
-    exchangeFlow: ExchangeFlow,
-    walletFlow: WalletFlow,
+    exchange: ExchangeFlow,
+    wallet: WalletFlow,
 };
 
 const FlowSelector = () => {
-    const { handleClose, enableExchange } = useContext(CheckoutContext);
+    const { handleClose, enableExchange, enforceFlow } =
+        useContext(CheckoutContext);
     const [flow, setFlow] = useState("");
     const [initialStep, setInitialStep] = useState<string | number>("");
+    const [enforceError, setEnforceError] = useState<string | null>(null);
 
     const { total, isLoading } = useWalletBalance();
     const { address } = useAccount();
@@ -43,6 +47,28 @@ const FlowSelector = () => {
     const { total: smartAccountTotal, isLoading: isLoadingSmartAccount } =
         useSmartAccountBalances(1);
 
+    // Handle enforceFlow on mount
+    useEffect(() => {
+        if (!enforceFlow) return;
+
+        if (enforceFlow === "exchange") {
+            if (!Array.isArray(enableExchange) || enableExchange.length === 0) {
+                setEnforceError(
+                    "No exchanges configured. Please enable at least one exchange in the widget configuration.",
+                );
+                return;
+            }
+            setFlow("exchange");
+            setInitialStep(WithdrawalStep.ChooseExchange);
+        } else if (enforceFlow === "wallet") {
+            if (address) {
+                setFlow("wallet");
+                setInitialStep(WalletFlowStep.SelectToken);
+            }
+            // If no address, we'll show the wallet connection prompt in the UI
+        }
+    }, [enforceFlow, enableExchange, address]);
+
     const formattedBalance = useMemo(() => {
         if (isLoading)
             return (
@@ -100,16 +126,10 @@ const FlowSelector = () => {
                 limit: formatUSD(smartAccountTotal),
                 delay: "2 min",
                 icons: [],
-                flow: "exchangeFlow",
+                flow: "exchange",
                 firstStep: WithdrawalStep.ChooseBalanceAsset,
             });
         }
-        console.log(
-            enableExchange,
-            enableExchange.map(
-                (integration) => EXCHANGE_ICON_BY_TYPE[integration],
-            ),
-        );
 
         if (Array.isArray(enableExchange) && enableExchange.length > 0)
             options.unshift({
@@ -125,7 +145,7 @@ const FlowSelector = () => {
                             ],
                     )
                     .filter(Boolean),
-                flow: "exchangeFlow",
+                flow: "exchange",
                 // Start at ChooseExchange to allow picking among multiple integrations
                 firstStep: WithdrawalStep.ChooseExchange,
             });
@@ -138,6 +158,89 @@ const FlowSelector = () => {
         return <FlowComponent setFlow={setFlow} initialStep={initialStep} />;
     }
 
+    // Error state for enforced exchange mode with no exchanges configured
+    if (enforceError) {
+        return (
+            <>
+                <Modal.Header>
+                    <InitialStepHeaderWrapper>
+                        <Box display="flex" flexDirection="column" gap={"4px"}>
+                            <HeaderTitle>Configuration Error</HeaderTitle>
+                        </Box>
+                        {handleClose && (
+                            <IconButton onClick={handleClose} width={"40px"}>
+                                <Icon
+                                    as={X}
+                                    color="fg.muted"
+                                    width={"16px"}
+                                    height={"16px"}
+                                />
+                            </IconButton>
+                        )}
+                    </InitialStepHeaderWrapper>
+                </Modal.Header>
+                <Modal.Body>
+                    <BodyWrapper>
+                        <Box
+                            display="flex"
+                            flexDirection="column"
+                            alignItems="center"
+                            gap="4"
+                            p="6"
+                            textAlign="center"
+                        >
+                            <Icon
+                                as={AlertCircle}
+                                color="red.500"
+                                width="48px"
+                                height="48px"
+                            />
+                            <Text color="fg.muted">{enforceError}</Text>
+                        </Box>
+                    </BodyWrapper>
+                </Modal.Body>
+            </>
+        );
+    }
+
+    // Wallet connection prompt for enforced wallet mode without wallet connected
+    if (enforceFlow === "wallet" && !address) {
+        return (
+            <>
+                <Modal.Header>
+                    <InitialStepHeaderWrapper>
+                        <Box display="flex" flexDirection="column" gap={"4px"}>
+                            <HeaderTitle>Connect Wallet</HeaderTitle>
+                        </Box>
+                        {handleClose && (
+                            <IconButton onClick={handleClose} width={"40px"}>
+                                <Icon
+                                    as={X}
+                                    color="fg.muted"
+                                    width={"16px"}
+                                    height={"16px"}
+                                />
+                            </IconButton>
+                        )}
+                    </InitialStepHeaderWrapper>
+                </Modal.Header>
+                <Modal.Body>
+                    <BodyWrapper>
+                        <ListWrapper>
+                            <WalletCard
+                                icon={walletIcon}
+                                walletHash="Not Connected"
+                                balance="Connect your wallet to continue"
+                                delay=""
+                                status={WalletStatus.NONE}
+                            />
+                        </ListWrapper>
+                    </BodyWrapper>
+                </Modal.Body>
+            </>
+        );
+    }
+
     return (
         <>
             <Modal.Header>
@@ -172,7 +275,7 @@ const FlowSelector = () => {
                                     status={WalletStatus.CONNECTED}
                                     badge={walletDisplayName}
                                     onClick={() => {
-                                        setFlow("walletFlow");
+                                        setFlow("wallet");
                                     }}
                                 />
                             }

package/src/components/steps/WalletFlow/WalletFlow.tsx

@@ -32,7 +32,7 @@ const WalletFlow = ({
     setFlow?: (step: string) => void;
 }) => {
     const [currentStep, setCurrentStep] = useState<WalletFlowStep>(initialStep);
-    const { handleClose } = useContext(CheckoutContext);
+    const { handleClose, enforceFlow } = useContext(CheckoutContext);
 
     const handleSetStep = (step: WalletFlowStep | string) => {
         setCurrentStep(step as WalletFlowStep);
@@ -62,23 +62,31 @@ const WalletFlow = ({
         }
     })();
 
+    const enforcedInitialStep =
+        enforceFlow && currentStep === WalletFlowStep.SelectToken;
+
     return (
         <>
             <Modal.Header>
                 <HeaderWrapper>
-                    <IconButton
-                        minWidth={"16px"}
-                        minHeight={"16px"}
-                        maxWidth={"16px"}
-                        onClick={handleBackClick}
-                    >
-                        <Icon
-                            as={ChevronLeft}
-                            color="gray"
-                            width={"16px"}
-                            height={"16px"}
-                        />
-                    </IconButton>
+                    {!(
+                        enforceFlow &&
+                        currentStep === WalletFlowStep.SelectToken
+                    ) && (
+                        <IconButton
+                            minWidth={"16px"}
+                            minHeight={"16px"}
+                            maxWidth={"16px"}
+                            onClick={handleBackClick}
+                        >
+                            <Icon
+                                as={ChevronLeft}
+                                color="gray"
+                                width={"16px"}
+                                height={"16px"}
+                            />
+                        </IconButton>
+                    )}
 
                     <Box
                         display="flex"

package/src/types/index.ts

@@ -8,6 +8,8 @@ enum SupportedExchanges {
     Bybit = "bybit",
 }
 
+export type EnforceFlow = "exchange" | "wallet";
+
 export type CheckoutConfig = {
     tokenOut: string;
     chainIdOut: number;
@@ -18,6 +20,8 @@ export type CheckoutConfig = {
     cexBridgeChainMapping?: Record<number, number>;
     /** Override recipient address (defaults to connected wallet's smart account) */
     recipient?: string;
+    /** Force the widget to open in a specific flow, bypassing the selector */
+    enforceFlow?: EnforceFlow;
 };
 
 export type CheckoutModalProps = {