@ensofinance/checkout-widget 0.1.6 → 0.1.8

package/src/components/steps/FlowSelector.tsx

@@ -1,6 +1,6 @@
 import { Box, Icon, Skeleton, Text } from "@chakra-ui/react";
 import { X, AlertCircle } from "lucide-react";
-import { useContext, useEffect, useMemo, useState } from "react";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { useAccount } from "wagmi";
 import { IconButton } from "../ui";
 import {
@@ -17,29 +17,58 @@ import { CheckoutContext } from "../Checkout";
 import { WalletCard, OptionCard } from "../cards";
 import { WalletStatus } from "../cards/WalletCard";
 import { useWalletIcon, useSmartAccountBalances } from "@/util/enso-hooks";
-import ExchangeFlow, {
-    WithdrawalStep,
-    EXCHANGE_ICON_BY_TYPE,
-    ExchangeToIntegrationType,
-} from "@/components/steps/ExchangeFlow";
+import ExchangeFlow from "@/components/steps/ExchangeFlow";
+import CardBuyFlow, { CardBuyStep } from "@/components/steps/CardBuyFlow/CardBuyFlow";
+import SmartAccountFlow from "@/components/steps/SmartAccountFlow";
 import WalletFlow, {
     WalletFlowStep,
 } from "@/components/steps/WalletFlow/WalletFlow";
+import {
+    isMeldCardBuySupportedChain,
+    useCountryCode,
+    useMeldSupportedCrypto,
+} from "@/util/meld-hooks";
+import { useAppStore } from "@/store";
+import mastercardIcon from "@/assets/mastercard.png";
+import visaIcon from "@/assets/visa.png";
+import {
+    ExchangeToIntegrationType,
+    EXCHANGE_ICON_BY_TYPE,
+} from "./shared/exchangeIntegration";
+// Card brand icons
+const CARD_ICONS = [mastercardIcon, visaIcon];
+
+type FlowLaunchState = {
+    flow: string;
+    presetAmount?: boolean;
+} | null;
 
-const FLOWS = {
-    exchange: ExchangeFlow,
-    wallet: WalletFlow,
+type FlowOption = {
+    id: string;
+    title: string;
+    limit: string;
+    delay: string;
+    icons: string[];
+    disabled?: boolean;
+} & {
+    flow: string;
+    firstStep?: number;
 };
 
 const FlowSelector = () => {
-    const { handleClose, enableExchange, enforceFlow } =
+    const { handleClose, enableExchange, enableCardBuy, enforceFlow } =
         useContext(CheckoutContext);
-    const [flow, setFlow] = useState("");
-    const [initialStep, setInitialStep] = useState<string | number>("");
+    const [flowLaunch, setFlowLaunch] = useState<FlowLaunchState>(null);
     const [enforceError, setEnforceError] = useState<string | null>(null);
 
     const { total, isLoading } = useWalletBalance();
     const { address } = useAccount();
+    const chainIdOut = useAppStore((s) => s.chainIdOut);
+    const { countryCode } = useCountryCode();
+    const { data: supportedCryptos = [] } = useMeldSupportedCrypto({
+        countryCode,
+        enabled: !!enableCardBuy && !!chainIdOut,
+    });
 
     const { walletIcon, walletDisplayName } = useWalletIcon();
 
@@ -47,6 +76,25 @@ const FlowSelector = () => {
     const { total: smartAccountTotal, isLoading: isLoadingSmartAccount } =
         useSmartAccountBalances(1);
 
+    // Check if card buy is available for this chain
+    const isCardBuyAvailable =
+        enableCardBuy &&
+        chainIdOut &&
+        isMeldCardBuySupportedChain(chainIdOut, supportedCryptos);
+
+    const handleSetFlow = useCallback((nextFlow: string) => {
+        if (!nextFlow) {
+            setFlowLaunch(null);
+            return;
+        }
+
+        setFlowLaunch({ flow: nextFlow });
+    }, []);
+
+    const handleCardBuyDepositDetected = useCallback(() => {
+        setFlowLaunch({ flow: "smart-account", presetAmount: true });
+    }, []);
+
     // Handle enforceFlow on mount
     useEffect(() => {
         if (!enforceFlow) return;
@@ -58,14 +106,15 @@ const FlowSelector = () => {
                 );
                 return;
             }
-            setFlow("exchange");
-            setInitialStep(WithdrawalStep.ChooseExchange);
+            setFlowLaunch({
+                flow: "exchange",
+            });
         } else if (enforceFlow === "wallet") {
             if (address) {
-                setFlow("wallet");
-                setInitialStep(WalletFlowStep.SelectToken);
+                setFlowLaunch({
+                    flow: "wallet",
+                });
             }
-            // If no address, we'll show the wallet connection prompt in the UI
         }
     }, [enforceFlow, enableExchange, address]);
 
@@ -86,37 +135,7 @@ const FlowSelector = () => {
     }, [address]);
 
     const OPTIONS = useMemo(() => {
-        const options: {
-            id: string;
-            title: string;
-            limit: string;
-            delay: string;
-            icons: string[];
-            flow: string;
-            firstStep: string | number;
-            disabled?: boolean;
-        }[] = [
-            // {
-            //     id: "1",
-            //     title: "Crypto Transfer",
-            //     limit: address ? "No Limit" : "Connect wallet to proceed",
-            //     delay: address ? "Instant - 2 min" : "",
-            //     icons: [RabbyIcon, MetamaskIcon],
-            //     flow: "mainFlow",
-            //     firstStep: "selectToken",
-            //     disabled: !address,
-            // },
-            // {
-            //     id: "3",
-            //     title: "Deposit with card",
-            //     limit: "$10,000 limit",
-            //     delay: "5 min",
-            //     icons: [MastercardIcon, VisaIcon],
-            //     flow: "",
-            //     firstStep: "",
-            //     disabled: true,
-            // },
-        ];
+        const options: FlowOption[] = [];
 
         // Add Smart Balance option if balance > $20
         if (!isLoadingSmartAccount && smartAccountTotal > 20) {
@@ -126,12 +145,12 @@ const FlowSelector = () => {
                 limit: formatUSD(smartAccountTotal),
                 delay: "2 min",
                 icons: [],
-                flow: "exchange",
-                firstStep: WithdrawalStep.ChooseBalanceAsset,
+                flow: "smart-account",
             });
         }
 
-        if (Array.isArray(enableExchange) && enableExchange.length > 0)
+        // Add CEX exchange option
+        if (Array.isArray(enableExchange) && enableExchange.length > 0) {
             options.unshift({
                 id: "exchange",
                 title: "Connect Exchange",
@@ -146,16 +165,51 @@ const FlowSelector = () => {
                     )
                     .filter(Boolean),
                 flow: "exchange",
-                // Start at ChooseExchange to allow picking among multiple integrations
-                firstStep: WithdrawalStep.ChooseExchange,
             });
+        }
+
+        // Add card buy option (MELD)
+        if (isCardBuyAvailable) {
+            options.push({
+                id: "card-buy",
+                title: "Buy with Card",
+                limit: "$10,000 limit",
+                delay: "1-5 min",
+                icons: CARD_ICONS,
+                flow: "card-buy",
+            });
+        }
+
         return options;
-    }, [address, enableExchange, smartAccountTotal, isLoadingSmartAccount]);
+    }, [
+        enableExchange,
+        isCardBuyAvailable,
+        isLoadingSmartAccount,
+        smartAccountTotal,
+    ]);
 
-    const FlowComponent = flow && FLOWS[flow];
+    switch (flowLaunch?.flow) {
+        case "exchange":
+            return <ExchangeFlow setFlow={handleSetFlow} />;
+
+        case "smart-account":
+            return (
+                <SmartAccountFlow
+                    setFlow={handleSetFlow}
+                    presetAmount={flowLaunch.presetAmount}
+                />
+            );
+
+        case "card-buy":
+            return (
+                <CardBuyFlow
+                    setFlow={handleSetFlow}
+                    onCardBuyDepositDetected={handleCardBuyDepositDetected}
+                />
+            );
 
-    if (FlowComponent) {
-        return <FlowComponent setFlow={setFlow} initialStep={initialStep} />;
+        case "wallet":
+            return <WalletFlow setFlow={handleSetFlow} />;
     }
 
     // Error state for enforced exchange mode with no exchanges configured
@@ -275,7 +329,9 @@ const FlowSelector = () => {
                                     status={WalletStatus.CONNECTED}
                                     badge={walletDisplayName}
                                     onClick={() => {
-                                        setFlow("wallet");
+                                        setFlowLaunch({
+                                            flow: "wallet",
+                                        });
                                     }}
                                 />
                             }
@@ -294,8 +350,9 @@ const FlowSelector = () => {
                                         icons={option.icons}
                                         onClick={() => {
                                             if (option.disabled) return;
-                                            setFlow(option.flow);
-                                            setInitialStep(option.firstStep);
+                                            setFlowLaunch({
+                                                flow: option.flow,
+                                            });
                                         }}
                                     />
                                 ))}

package/src/components/steps/SmartAccountFlow.tsx

@@ -0,0 +1,372 @@
+import { Center, Spinner, Box, Icon, Text, Flex } from "@chakra-ui/react";
+import { ChevronLeft, X } from "lucide-react";
+import { useContext, useEffect, useState } from "react";
+import { useReadContract } from "wagmi";
+import { erc20Abi } from "viem";
+
+import {
+    BodyWrapper,
+    HeaderDescription,
+    HeaderTitle,
+    HeaderWrapper,
+    ListWrapper,
+} from "../ui/styled";
+import { IconButton, Button } from "../ui";
+import { CheckoutContext } from "../Checkout";
+import Modal from "../modal";
+import { useAppStore } from "@/store";
+import { AssetCard } from "../cards";
+import { formatNumber, formatUSD, normalizeValue } from "@/util";
+import {
+    useAppDetails,
+    useSmartAccountAddress,
+    useSmartAccountBalances,
+} from "@/util/enso-hooks";
+import ChooseAmountStep from "./shared/ChooseAmountStep";
+import SignUserOpStep from "./shared/SignUserOpStep";
+import TrackUserOpStep from "./shared/TrackUserOpStep";
+import type { MatchedToken } from "./shared/types";
+import { AnimatedStep } from "../ui/transitions";
+
+export enum SmartAccountStep {
+    ChooseAsset = 0,
+    ChooseAmount = 1,
+    SignUserOp = 2,
+    TrackUserOp = 3,
+}
+
+const smartAccountPreviousStep: Partial<
+    Record<SmartAccountStep, SmartAccountStep>
+> = {
+    [SmartAccountStep.ChooseAmount]: SmartAccountStep.ChooseAsset,
+    [SmartAccountStep.SignUserOp]: SmartAccountStep.ChooseAmount,
+};
+
+const ChooseDelayedBalance = ({
+    setStep,
+    onTokenSelect,
+    notice,
+}: {
+    setStep: (step: SmartAccountStep) => void;
+    onTokenSelect: (token: MatchedToken) => void;
+    notice?: string | null;
+}) => {
+    const { chainIdIn, setTokenIn, setChainIdIn } = useAppStore();
+    const [selectedToken, setSelectedToken] = useState<string | null>(null);
+
+    const { holdingsList, total, isLoading } = useSmartAccountBalances(1);
+
+    if (isLoading) {
+        return (
+            <Center>
+                <Spinner m={5} />
+            </Center>
+        );
+    }
+
+    return (
+        <BodyWrapper>
+            {notice ? (
+                <Box mb={3} width="100%" textAlign="left">
+                    <Text fontSize="sm" color="fg.muted">
+                        {notice}
+                    </Text>
+                </Box>
+            ) : null}
+            <Box mb={4} width="100%" textAlign="left">
+                <HeaderDescription>
+                    Smart Account Balance: {formatUSD(total)}
+                </HeaderDescription>
+            </Box>
+            <Box overflowY={"scroll"} maxH={"400px"}>
+                <ListWrapper>
+                    {holdingsList?.map((asset) => (
+                        <AssetCard
+                            key={`${asset.token}-${asset.chainId}`}
+                            chainId={asset.chainId}
+                            icon={asset.logoUri}
+                            title={asset.name}
+                            balance={`${formatNumber(
+                                normalizeValue(asset.amount, asset.decimals),
+                            )} ${asset.symbol}`}
+                            usdBalance={formatUSD(asset.total)}
+                            tag=""
+                            loading={false}
+                            selected={
+                                selectedToken === asset.token &&
+                                chainIdIn === asset.chainId
+                            }
+                            onClick={() => {
+                                setSelectedToken(asset.token);
+                                setTokenIn(asset.token);
+                                setChainIdIn(asset.chainId);
+                                const mockMatchedToken: MatchedToken = {
+                                    symbol: asset.symbol,
+                                    name: asset.name,
+                                    networkId: asset.chainId.toString(),
+                                    chainId: asset.chainId,
+                                    integrationNetworks: [],
+                                    tokenAddress: asset.token,
+                                    balance: Number(
+                                        normalizeValue(
+                                            asset.amount,
+                                            asset.decimals,
+                                        ),
+                                    ),
+                                    marketValue: asset.total,
+                                };
+                                onTokenSelect(mockMatchedToken);
+                            }}
+                        />
+                    ))}
+                </ListWrapper>
+            </Box>
+            {holdingsList?.length === 0 ? (
+                <Box textAlign="center" color="fg.subtle" py={8}>
+                    No tokens found in smart account
+                </Box>
+            ) : null}
+            <Button
+                disabled={!selectedToken}
+                onClick={() => {
+                    setStep(SmartAccountStep.ChooseAmount);
+                }}
+            >
+                Continue
+            </Button>
+        </BodyWrapper>
+    );
+};
+
+const SmartAccountFlow = ({
+    setFlow,
+    presetAmount,
+}: {
+    setFlow: (flow: string) => void;
+    presetAmount?: boolean;
+}) => {
+    const { handleClose, enforceFlow } = useContext(CheckoutContext);
+    const [currentStep, setCurrentStep] = useState<SmartAccountStep>(
+        SmartAccountStep.ChooseAsset,
+    );
+    const [selectedToken, setSelectedToken] = useState<MatchedToken | null>(
+        null,
+    );
+    const [userOp, setUserOp] = useState<any | null>(null);
+    const [launchNotice, setLaunchNotice] = useState<string | null>(null);
+    const [isBootstrapping, setIsBootstrapping] = useState(!!presetAmount);
+
+    const setSelectedIntegration = useAppStore(
+        (state) => state.setSelectedIntegration,
+    );
+
+    const { smartAccountAddress } = useSmartAccountAddress();
+
+    const { tokenInData, tokenInPrice, chainIdIn, tokenIn } = useAppDetails();
+
+    const { data: launchRpcBalance } = useReadContract({
+        chainId: chainIdIn,
+        address: tokenIn as `0x${string}`,
+        abi: erc20Abi,
+        functionName: "balanceOf",
+        args: [smartAccountAddress],
+        query: {
+            enabled: !!presetAmount && !!smartAccountAddress,
+            refetchInterval: isBootstrapping ? 3000 : false,
+            staleTime: 0,
+        },
+    });
+
+    // Set delayed integration while mounted
+    useEffect(() => {
+        setSelectedIntegration({
+            type: "delayed",
+            name: "Smart account",
+            id: "",
+        });
+        return () => setSelectedIntegration(null);
+    }, [setSelectedIntegration]);
+
+    // Card-buy bootstrap: resolve token and jump to sign step
+    useEffect(() => {
+        if (!presetAmount || !isBootstrapping) return;
+        if (!chainIdIn || !tokenIn || !smartAccountAddress) return;
+        if (typeof launchRpcBalance !== "bigint") return;
+        if (!tokenInData) return;
+
+        const decimals = tokenInData.decimals;
+        const symbol = tokenInData.symbol;
+        const name = tokenInData.name;
+
+        const normalizedBalance = Number(
+            normalizeValue(launchRpcBalance, decimals),
+        );
+        if (!Number.isFinite(normalizedBalance)) return;
+
+        const resolvedPrice = Number(tokenInPrice ?? 0);
+        const resolvedMarketValue =
+            resolvedPrice > 0 ? normalizedBalance * resolvedPrice : 0;
+
+        const synthesizedToken: MatchedToken = {
+            symbol,
+            name,
+            networkId: chainIdIn.toString(),
+            chainId: chainIdIn,
+            integrationNetworks: [],
+            tokenAddress: tokenIn,
+            balance: normalizedBalance,
+            marketValue: resolvedMarketValue,
+        };
+
+        setSelectedToken(synthesizedToken);
+        setCurrentStep(SmartAccountStep.SignUserOp);
+        setIsBootstrapping(false);
+    }, [
+        isBootstrapping,
+        presetAmount,
+        chainIdIn,
+        tokenIn,
+        launchRpcBalance,
+        tokenInData,
+        tokenInPrice,
+        smartAccountAddress,
+    ]);
+
+    // Timeout fallback for bootstrap
+    useEffect(() => {
+        if (!presetAmount || !isBootstrapping) return;
+
+        const timer = window.setTimeout(() => {
+            setIsBootstrapping(false);
+            setLaunchNotice(
+                "We could not auto-open the quote yet. Select your Smart Account USDC balance to continue.",
+            );
+            setCurrentStep(SmartAccountStep.ChooseAsset);
+        }, 12000);
+
+        return () => window.clearTimeout(timer);
+    }, [isBootstrapping, presetAmount]);
+
+    const currentStepComponent = (() => {
+        if (presetAmount && isBootstrapping) {
+            return (
+                <BodyWrapper>
+                    <Flex direction="column" gap={3} align="center" py={8}>
+                        <Spinner />
+                        <Text color="fg.muted" fontSize="sm" textAlign="center">
+                            Preparing your Smart Account quote...
+                        </Text>
+                    </Flex>
+                </BodyWrapper>
+            );
+        }
+
+        switch (currentStep) {
+            case SmartAccountStep.ChooseAsset:
+                return (
+                    <ChooseDelayedBalance
+                        setStep={setCurrentStep}
+                        onTokenSelect={setSelectedToken}
+                        notice={launchNotice}
+                    />
+                );
+            case SmartAccountStep.ChooseAmount:
+                return (
+                    <ChooseAmountStep
+                        setStep={setCurrentStep}
+                        nextStep={SmartAccountStep.SignUserOp}
+                        selectedToken={selectedToken}
+                        mode="smart-account"
+                    />
+                );
+            case SmartAccountStep.SignUserOp:
+                return (
+                    <SignUserOpStep
+                        nextStep={SmartAccountStep.TrackUserOp}
+                        setStep={setCurrentStep}
+                        setUserOp={setUserOp}
+                    />
+                );
+            case SmartAccountStep.TrackUserOp:
+                return (
+                    <TrackUserOpStep
+                        userOp={userOp}
+                        onReset={() =>
+                            setCurrentStep(SmartAccountStep.ChooseAsset)
+                        }
+                    />
+                );
+            default:
+                return null;
+        }
+    })();
+
+    return (
+        <>
+            <Modal.Header>
+                <HeaderWrapper>
+                    {!(
+                        enforceFlow &&
+                        currentStep === SmartAccountStep.ChooseAsset
+                    ) && (
+                        <IconButton
+                            minWidth={"16px"}
+                            minHeight={"16px"}
+                            maxWidth={"16px"}
+                            onClick={() => {
+                                const previousStep =
+                                    smartAccountPreviousStep[currentStep];
+                                if (previousStep !== undefined) {
+                                    setCurrentStep(previousStep);
+                                } else {
+                                    setFlow("");
+                                }
+                            }}
+                        >
+                            <Icon
+                                as={ChevronLeft}
+                                color="fg.muted"
+                                width={"16px"}
+                                height={"16px"}
+                            />
+                        </IconButton>
+                    )}
+
+                    <Box
+                        display="flex"
+                        flexDirection="column"
+                        gap={"4px"}
+                        alignItems={"center"}
+                        width="100%"
+                    >
+                        <HeaderTitle>Deposit from Smart account</HeaderTitle>
+                    </Box>
+
+                    {handleClose && (
+                        <IconButton
+                            onClick={handleClose}
+                            minWidth={"16px"}
+                            minHeight={"16px"}
+                            maxWidth={"16px"}
+                            marginLeft={"auto"}
+                        >
+                            <Icon
+                                as={X}
+                                color="fg.muted"
+                                width={"16px"}
+                                height={"16px"}
+                            />
+                        </IconButton>
+                    )}
+                </HeaderWrapper>
+            </Modal.Header>
+            <Modal.Body>
+                <AnimatedStep key={isBootstrapping ? "bootstrap" : currentStep}>
+                    {currentStepComponent}
+                </AnimatedStep>
+            </Modal.Body>
+        </>
+    );
+};
+
+export default SmartAccountFlow;

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

@@ -10,7 +10,7 @@ import { normalizeValue, denormalizeValue } from "@/util";
 import { precisionizeNumber, getPositiveDecimalValue } from "@/util/common";
 import { useTokenBalance } from "@/util/wallet";
 import { useAppDetails } from "@/util/enso-hooks";
-const WalletAmountStep = ({ setStep }: { setStep: (step: string) => void }) => {
+const WalletAmountStep = ({ setStep }: { setStep: (step: number) => void }) => {
     const [amountInput, setAmountInput] = useState<AmountInputValue>({
         tokenAmount: "",
         usdAmount: "10.10",
@@ -124,7 +124,7 @@ const WalletAmountStep = ({ setStep }: { setStep: (step: string) => void }) => {
             />
 
             <Button
-                onClick={() => setStep("quote")}
+                onClick={() => setStep(2)}
                 disabled={isAmountInvalid}
             >
                 Continue