@ensofinance/checkout-widget 0.1.8 → 0.1.9

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

@@ -1,412 +0,0 @@
-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 [selectedQuote, setSelectedQuote] = useState<MeldQuote | null>(null);
-    const [error, setError] = useState<string | null>(null);
-
-    // 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
-    const {
-        data: quotes,
-        isLoading: quotesLoading,
-        error: quotesError,
-    } = useMeldQuotes({
-        sourceCurrency: fiatCurrency,
-        destinationCurrency: destinationCryptoCode || "",
-        amount: parseFloat(fiatAmount) || 0,
-        countryCode: countryCode || "",
-        walletAddress: smartAccountAddress || "",
-        enabled:
-            !!countryCode &&
-            !!destinationCryptoCode &&
-            parseFloat(fiatAmount) > 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;