@ensofinance/checkout-widget 0.1.9 → 1.0.1

package/src/components/TransactionDetailRow.tsx

@@ -12,7 +12,7 @@ export const DetailRowContainer = chakra("div", {
         alignItems: "center",
         h: "36px",
         p: "8px 12px",
-        borderRadius: "8px",
+        borderRadius: "card",
         bg: "bg",
         w: "100%",
     },
@@ -57,7 +57,7 @@ export const TransactionDetailRow = () => {
             <Box
                 width="100%"
                 bg="bg.subtle"
-                borderRadius="md"
+                borderRadius="card"
                 padding="12px"
                 transition="all 0.2s"
             >

package/src/components/cards/ExchangeCard.tsx

@@ -32,7 +32,7 @@ const ExchangeCard: FC<IProps> = ({
     ),
     low: <Tag>Low Balance</Tag>,
     connected: (
-      <Icon as={CheckIcon} color="green" width={"16px"} height={"16px"} />
+      <Icon as={CheckIcon} color="success" width={"16px"} height={"16px"} />
     ),
     none: null,
   };

package/src/components/cards/OptionCard.tsx

@@ -39,6 +39,7 @@ const OptionCard = ({
                         <Image
                             w={"32px"}
                             h={"32px"}
+                            objectFit={"contain"}
                             borderRadius={"full"}
                             position={"relative"}
                             zIndex={index}
@@ -49,7 +50,7 @@ const OptionCard = ({
                 </Box>
                 <Icon
                     as={ChevronRight}
-                    color="gray"
+                    color="fg.muted"
                     width={"16px"}
                     height={"16px"}
                 />

package/src/components/cards/WalletCard.tsx

@@ -85,7 +85,7 @@ const WalletCard = ({
                     {status === WalletStatus.CONNECTED && (
                         <Icon
                             as={CheckIcon}
-                            color="green"
+                            color="success"
                             width={"16px"}
                             height={"16px"}
                         />

package/src/components/modal.tsx

@@ -35,11 +35,11 @@ export const ModalWrapper = chakra("div", {
         maxWidth: "374px",
         justifyContent: "center",
         alignItems: "center",
-        borderRadius: "lg",
+        borderRadius: "card",
         border: "1px solid",
-        borderColor: "gray.300",
+        borderColor: "border",
         padding: "16px",
-        backgroundColor: "white",
+        backgroundColor: "bg",
     },
 });
 

package/src/components/steps/CardBuyFlow/CardBuyFlow.tsx

@@ -0,0 +1,420 @@
+import { Center, Box, Icon, Text } from "@chakra-ui/react";
+import { ChevronLeft, X, XCircle } from "lucide-react";
+import {
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+    useCallback,
+} from "react";
+import { useAccount } from "wagmi";
+import { BodyWrapper, HeaderTitle, HeaderWrapper } from "../../ui/styled";
+import { IconButton } from "../../ui";
+import { CheckoutContext } from "../../Checkout";
+import Modal from "../../modal";
+import { useAppStore } from "@/store";
+import { denormalizeValue } from "@/util";
+import { getUsdcAddress } from "@/util/constants";
+import { useSmartAccountAddress } from "@/util/enso-hooks";
+import {
+    useMeldQuotes,
+    useMeldCardBuyFlow,
+    useCountryCode,
+    getMeldDestinationCurrencyCode,
+    isMeldCardBuySupportedChain,
+    useMeldSupportedCrypto,
+    useIncomingUsdcTransferDetector,
+} from "@/util/meld-hooks";
+import type { MeldQuote } from "@/types";
+
+import ChooseAmountStep from "./ChooseAmountStep";
+import OpenWidgetStep from "./OpenWidgetStep";
+import { AnimatedStep } from "../../ui/transitions";
+
+interface CardBuyFlowProps {
+    setFlow: (flow: string) => void;
+    initialStep?: CardBuyStep;
+    onCardBuyDepositDetected: () => void;
+}
+
+// Card buy flow steps
+export enum CardBuyStep {
+    ChooseAmount = 0,
+    OpenWidget = 1,
+}
+
+export const STEP_TITLES: Record<CardBuyStep, string> = {
+    [CardBuyStep.ChooseAmount]: "Buy with Card",
+    [CardBuyStep.OpenWidget]: "Complete Purchase",
+};
+
+const cardPreviousStep: Partial<Record<CardBuyStep, CardBuyStep>> = {
+    [CardBuyStep.OpenWidget]: CardBuyStep.ChooseAmount,
+};
+
+const CardBuyFlow = ({
+    setFlow,
+    initialStep = CardBuyStep.ChooseAmount,
+    onCardBuyDepositDetected,
+}: CardBuyFlowProps) => {
+    const { handleClose } = useContext(CheckoutContext);
+    const { address } = useAccount();
+
+    // Store
+    const chainIdOut = useAppStore((s) => s.chainIdOut);
+    const setAmountIn = useAppStore((s) => s.setAmountIn);
+    const setTokenIn = useAppStore((s) => s.setTokenIn);
+    const setChainIdIn = useAppStore((s) => s.setChainIdIn);
+    const setSelectedIntegration = useAppStore((s) => s.setSelectedIntegration);
+    const handoffTriggeredRef = useRef(false);
+
+    // Set integration on mount so useRouteData picks "checkout" strategy,
+    // and clean up on unmount (same pattern as ExchangeFlow).
+    useEffect(() => {
+        setSelectedIntegration({ id: "meld", type: "meld", name: "Card Buy" });
+        return () => setSelectedIntegration(null);
+    }, [setSelectedIntegration]);
+
+    // Local state
+    const [currentStep, setCurrentStep] = useState<CardBuyStep>(initialStep);
+    const [fiatCurrency, setFiatCurrency] = useState<"USD" | "EUR">("USD");
+    const [fiatAmount, setFiatAmount] = useState<string>("100");
+    const [debouncedFiatAmount, setDebouncedFiatAmount] =
+        useState<string>(fiatAmount);
+    const [selectedQuote, setSelectedQuote] = useState<MeldQuote | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    // Debounce fiat amount for quote requests
+    useEffect(() => {
+        const timer = setTimeout(() => setDebouncedFiatAmount(fiatAmount), 500);
+        return () => clearTimeout(timer);
+    }, [fiatAmount]);
+
+    // Smart account address - use recipient override if provided
+    const { smartAccountAddress } = useSmartAccountAddress(chainIdOut);
+
+    // Country code detection
+    const { countryCode, isLoading: countryCodeLoading } = useCountryCode();
+    const { data: supportedCryptos = [], isLoading: supportedCryptosLoading } =
+        useMeldSupportedCrypto({
+            countryCode,
+            enabled: !!chainIdOut,
+        });
+
+    const destinationSymbol = "USDC";
+
+    const destinationCryptoCode = useMemo(() => {
+        if (!chainIdOut) return null;
+        return getMeldDestinationCurrencyCode({
+            symbol: destinationSymbol,
+            chainId: chainIdOut,
+            supportedCryptos,
+        });
+    }, [destinationSymbol, chainIdOut, supportedCryptos]);
+
+    const isCardBuySupported =
+        !!chainIdOut &&
+        isMeldCardBuySupportedChain(chainIdOut, supportedCryptos);
+
+    // Fetch quotes (uses debounced amount to avoid excessive requests)
+    const {
+        data: quotes,
+        isLoading: quotesLoading,
+        error: quotesError,
+    } = useMeldQuotes({
+        sourceCurrency: fiatCurrency,
+        destinationCurrency: destinationCryptoCode || "",
+        amount: parseFloat(debouncedFiatAmount) || 0,
+        countryCode: countryCode || "",
+        walletAddress: smartAccountAddress || "",
+        enabled:
+            !!countryCode &&
+            !!destinationCryptoCode &&
+            parseFloat(debouncedFiatAmount) > 0 &&
+            !!smartAccountAddress,
+    });
+
+    // Select best quote automatically
+    useEffect(() => {
+        if (!quotes || quotes.length === 0) {
+            if (selectedQuote) setSelectedQuote(null);
+            return;
+        }
+
+        // Default to best quote
+        if (!selectedQuote) {
+            setSelectedQuote(quotes[0]);
+            return;
+        }
+
+        // Keep the same provider selected if still available, but refresh the
+        // quote object (rates/fees can update on refetch).
+        const matching = quotes.find(
+            (q) => q.serviceProvider === selectedQuote.serviceProvider,
+        );
+        if (!matching) {
+            setSelectedQuote(quotes[0]);
+            return;
+        }
+
+        const didChange =
+            matching.destinationAmount !== selectedQuote.destinationAmount ||
+            matching.totalFee !== selectedQuote.totalFee ||
+            matching.exchangeRate !== selectedQuote.exchangeRate;
+        if (didChange) setSelectedQuote(matching);
+    }, [quotes, selectedQuote]);
+
+    // MELD flow state
+    const meldFlow = useMeldCardBuyFlow();
+
+    const shouldTrackIncomingTransfer =
+        currentStep === CardBuyStep.OpenWidget &&
+        !!chainIdOut &&
+        !!smartAccountAddress;
+    const {
+        detectedAmount,
+        isDetected,
+        reset: resetIncomingDetector,
+    } = useIncomingUsdcTransferDetector({
+        chainId: chainIdOut,
+        walletAddress: smartAccountAddress,
+        enabled: shouldTrackIncomingTransfer,
+        thresholdUsdc: "0.01",
+    });
+
+    const resetToChooseAmount = useCallback(
+        (clearQuote = false) => {
+            meldFlow.reset();
+            resetIncomingDetector();
+            handoffTriggeredRef.current = false;
+            setError(null);
+            if (clearQuote) {
+                setSelectedQuote(null);
+            }
+            setCurrentStep(CardBuyStep.ChooseAmount);
+        },
+        [meldFlow, resetIncomingDetector],
+    );
+
+    // Navigation
+    const goBack = useCallback(() => {
+        if (currentStep === CardBuyStep.ChooseAmount) {
+            setFlow("");
+            return;
+        }
+        const previousStep = cardPreviousStep[currentStep];
+        if (previousStep !== undefined) {
+            resetToChooseAmount(false);
+            return;
+        }
+        setFlow("");
+    }, [currentStep, setFlow, resetToChooseAmount]);
+
+    const goToOpenWidget = useCallback(() => {
+        if (!selectedQuote) return;
+        setError(null);
+        handoffTriggeredRef.current = false;
+        resetIncomingDetector();
+        setCurrentStep(CardBuyStep.OpenWidget);
+    }, [selectedQuote, resetIncomingDetector]);
+
+    // Start MELD session
+    const handleStartSession = useCallback(async () => {
+        if (
+            !selectedQuote ||
+            !smartAccountAddress ||
+            !destinationCryptoCode ||
+            !countryCode
+        )
+            return;
+
+        try {
+            await meldFlow.startSession({
+                countryCode: countryCode,
+                sourceCurrencyCode: fiatCurrency,
+                destinationCurrencyCode: destinationCryptoCode,
+                sourceAmount: selectedQuote.sourceAmount,
+                walletAddress: smartAccountAddress,
+                serviceProvider: selectedQuote.serviceProvider,
+                paymentMethodType: "CREDIT_DEBIT_CARD",
+                externalCustomerId: address,
+                externalSessionId: `enso-${Date.now()}`,
+            });
+        } catch (err: any) {
+            console.error(err);
+            setError(err.message || "Failed to create session");
+        }
+    }, [
+        selectedQuote,
+        smartAccountAddress,
+        destinationCryptoCode,
+        countryCode,
+        fiatCurrency,
+        address,
+        meldFlow,
+    ]);
+
+    const handleOpenWidget = useCallback(() => {
+        meldFlow.openWidget();
+    }, [meldFlow]);
+
+    // Funds arrival is the source of truth for handing off into Smart Account flow.
+    useEffect(() => {
+        if (currentStep !== CardBuyStep.OpenWidget) return;
+        if (!isDetected || !detectedAmount || !chainIdOut) return;
+        if (handoffTriggeredRef.current) return;
+
+        try {
+            handoffTriggeredRef.current = true;
+            setError(null);
+            resetIncomingDetector();
+
+            // Store the detected amount and token before switching flow
+            setAmountIn(denormalizeValue(detectedAmount, 6));
+            setTokenIn(getUsdcAddress(chainIdOut));
+            setChainIdIn(chainIdOut);
+
+            onCardBuyDepositDetected();
+        } catch (err: any) {
+            handoffTriggeredRef.current = false;
+            setError(
+                err.message || "Failed to redirect to Smart Account quote",
+            );
+        }
+    }, [
+        currentStep,
+        isDetected,
+        detectedAmount,
+        chainIdOut,
+        setAmountIn,
+        setTokenIn,
+        setChainIdIn,
+        onCardBuyDepositDetected,
+        resetIncomingDetector,
+    ]);
+
+    // Check if chain is supported
+    if (!chainIdOut || (!supportedCryptosLoading && !isCardBuySupported)) {
+        return (
+            <>
+                <Modal.Header>
+                    <HeaderWrapper>
+                        <IconButton onClick={() => setFlow("")} width="40px">
+                            <Icon
+                                as={ChevronLeft}
+                                color="fg.muted"
+                                width="16px"
+                                height="16px"
+                            />
+                        </IconButton>
+                        <Box>
+                            <HeaderTitle>Buy with Card</HeaderTitle>
+                        </Box>
+                        {handleClose && (
+                            <IconButton onClick={handleClose} width="40px">
+                                <Icon
+                                    as={X}
+                                    color="fg.muted"
+                                    width="16px"
+                                    height="16px"
+                                />
+                            </IconButton>
+                        )}
+                    </HeaderWrapper>
+                </Modal.Header>
+                <Modal.Body>
+                    <BodyWrapper>
+                        <Center py={8} flexDirection="column" gap={4}>
+                            <Icon as={XCircle} color="error" boxSize={12} />
+                            <Text color="fg.muted" textAlign="center">
+                                Card purchases are not supported for this chain.
+                            </Text>
+                        </Center>
+                    </BodyWrapper>
+                </Modal.Body>
+            </>
+        );
+    }
+
+    // Render step content
+    const renderStepContent = () => {
+        switch (currentStep) {
+            case CardBuyStep.ChooseAmount:
+                return (
+                    <ChooseAmountStep
+                        fiatCurrency={fiatCurrency}
+                        setFiatCurrency={setFiatCurrency}
+                        fiatAmount={fiatAmount}
+                        setFiatAmount={setFiatAmount}
+                        quotes={quotes}
+                        quotesLoading={quotesLoading || countryCodeLoading}
+                        quotesError={
+                            quotesError
+                                ? quotesError.message || String(quotesError)
+                                : null
+                        }
+                        selectedQuote={selectedQuote}
+                        setSelectedQuote={setSelectedQuote}
+                        destinationSymbol={destinationSymbol}
+                        onContinue={goToOpenWidget}
+                    />
+                );
+
+            case CardBuyStep.OpenWidget:
+                return (
+                    <OpenWidgetStep
+                        selectedQuote={selectedQuote!}
+                        isCreatingSession={meldFlow.isCreatingSession}
+                        widgetUrl={meldFlow.widgetUrl}
+                        sessionId={meldFlow.sessionId}
+                        onCreateSession={handleStartSession}
+                        onOpenWidget={handleOpenWidget}
+                        isTransferDetected={isDetected}
+                        detectedAmount={detectedAmount}
+                        error={error || meldFlow.sessionError?.message}
+                    />
+                );
+
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <>
+            <Modal.Header>
+                <HeaderWrapper>
+                    <IconButton onClick={goBack} width="40px">
+                        <Icon
+                            as={ChevronLeft}
+                            color="fg.muted"
+                            width="16px"
+                            height="16px"
+                        />
+                    </IconButton>
+                    <Box>
+                        <HeaderTitle>{STEP_TITLES[currentStep]}</HeaderTitle>
+                    </Box>
+                    {handleClose && (
+                        <IconButton onClick={handleClose} width="40px">
+                            <Icon
+                                as={X}
+                                color="fg.muted"
+                                width="16px"
+                                height="16px"
+                            />
+                        </IconButton>
+                    )}
+                </HeaderWrapper>
+            </Modal.Header>
+            <Modal.Body>
+                <AnimatedStep key={currentStep}>
+                    {renderStepContent()}
+                </AnimatedStep>
+            </Modal.Body>
+        </>
+    );
+};
+
+export default CardBuyFlow;