@ensofinance/checkout-widget 0.0.19 → 0.1.1

package/src/components/steps/CardBuyFlow.tsx

@@ -1,778 +0,0 @@
-import {
-    Center,
-    Spinner,
-    Box,
-    Icon,
-    Text,
-    Flex,
-    Skeleton,
-    Image,
-} from "@chakra-ui/react";
-import { ChevronLeft, X, CreditCard, ExternalLink, CheckCircle, XCircle } from "lucide-react";
-import { useContext, useEffect, useMemo, useState, useCallback } from "react";
-import { useAccount, useSignMessage } from "wagmi";
-import { getUserOperationHash } from "viem/account-abstraction";
-import {
-    BodyWrapper,
-    HeaderDescription,
-    HeaderTitle,
-    HeaderWrapper,
-    ListWrapper,
-} from "../ui/styled";
-import { IconButton, Button, Input } from "../ui";
-import { CheckoutContext } from "../Checkout";
-import Modal from "../modal";
-import { useAppStore } from "@/store";
-import {
-    formatUSD,
-    normalizeValue,
-    denormalizeValue,
-} from "@/util";
-import {
-    useAppDetails,
-    useRouteData,
-    useSmartAccountAddress,
-} from "@/util/enso-hooks";
-import {
-    useMeldQuotes,
-    useMeldCardBuyFlow,
-    useCountryCode,
-    getMeldCryptoCode,
-    isMeldSupportedChain,
-    NATIVE_TOKEN_SYMBOLS,
-    formatProviderName,
-} from "@/util/meld-hooks";
-import { TransactionDetailRow } from "../TransactionDetailRow";
-import { CircleTimer } from "../CircleTimer";
-import type { MeldQuote } from "@/types";
-import { ETH_ADDRESS } from "@/util/constants";
-
-const ENTRY_POINT_ADDRESS: `0x${string}` =
-    "0x0000000071727de22e5e9d8baf0edac6f37da032";
-
-// Card buy flow steps
-export enum CardBuyStep {
-    ChooseAmount = 0,
-    SignUserOp = 1,
-    OpenWidget = 2,
-    TrackPurchase = 3,
-    TrackUserOp = 4,
-}
-
-const CARD_ICONS = [
-    "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Mastercard-logo.svg/200px-Mastercard-logo.svg.png",
-    "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Visa_Inc._logo.svg/200px-Visa_Inc._logo.svg.png",
-];
-
-interface CardBuyFlowProps {
-    setFlow: (flow: string) => void;
-    initialStep?: CardBuyStep;
-}
-
-const CardBuyFlow = ({ setFlow, initialStep }: CardBuyFlowProps) => {
-    const { handleClose } = useContext(CheckoutContext);
-    const { address } = useAccount();
-    const { signMessageAsync } = useSignMessage();
-
-    // Store
-    const chainIdOut = useAppStore((s) => s.chainIdOut);
-    const tokenOut = useAppStore((s) => s.tokenOut);
-    const setAmountIn = useAppStore((s) => s.setAmountIn);
-    const setTokenIn = useAppStore((s) => s.setTokenIn);
-    const setChainIdIn = useAppStore((s) => s.setChainIdIn);
-    const recipient = useAppStore((s) => s.recipient);
-
-    // Local state
-    const [currentStep, setCurrentStep] = useState<CardBuyStep>(
-        initialStep ?? CardBuyStep.ChooseAmount
-    );
-    const [fiatAmount, setFiatAmount] = useState<string>("100");
-    const [selectedQuote, setSelectedQuote] = useState<MeldQuote | null>(null);
-    const [signedUserOp, setSignedUserOp] = useState<any>(null);
-    const [error, setError] = useState<string | null>(null);
-
-    // Smart account address - use recipient override if provided
-    const { smartAccountAddress: derivedSmartAccountAddress } = useSmartAccountAddress(address, chainIdOut);
-    const smartAccountAddress = recipient || derivedSmartAccountAddress;
-
-    // Country code detection
-    const { countryCode } = useCountryCode();
-
-    // Get destination crypto code
-    const destinationSymbol = useMemo(() => {
-        // If tokenOut is native token address, use chain's native symbol
-        if (tokenOut?.toLowerCase() === ETH_ADDRESS.toLowerCase()) {
-            return NATIVE_TOKEN_SYMBOLS[chainIdOut!] || "ETH";
-        }
-        // Otherwise we'd need to look up the token symbol
-        // For now, default to the chain's native token
-        return NATIVE_TOKEN_SYMBOLS[chainIdOut!] || "ETH";
-    }, [tokenOut, chainIdOut]);
-
-    const destinationCryptoCode = useMemo(() => {
-        if (!chainIdOut || !isMeldSupportedChain(chainIdOut)) return null;
-        try {
-            return getMeldCryptoCode(destinationSymbol, chainIdOut);
-        } catch {
-            return null;
-        }
-    }, [destinationSymbol, chainIdOut]);
-
-    // Fetch quotes
-    const {
-        data: quotes,
-        isLoading: quotesLoading,
-        error: quotesError,
-    } = useMeldQuotes({
-        sourceCurrency: "USD",
-        destinationCurrency: destinationCryptoCode || "",
-        amount: parseFloat(fiatAmount) || 0,
-        countryCode,
-        enabled: !!destinationCryptoCode && parseFloat(fiatAmount) > 0,
-    });
-
-    // Select best quote automatically
-    useEffect(() => {
-        if (quotes && quotes.length > 0 && !selectedQuote) {
-            setSelectedQuote(quotes[0]);
-        }
-    }, [quotes, selectedQuote]);
-
-    // MELD flow state
-    const meldFlow = useMeldCardBuyFlow();
-
-    // Route data for userOp
-    const { tokenOutData, effectiveTokenOutData } = useAppDetails();
-    const { routeData, routeLoading, routeFetched } = useRouteData();
-
-    // Set up store for routing when quote is selected
-    useEffect(() => {
-        if (selectedQuote && chainIdOut) {
-            // Set the input token to the destination crypto
-            setTokenIn(ETH_ADDRESS); // Native token
-            setChainIdIn(chainIdOut);
-            // Convert crypto amount to wei
-            const decimals = 18; // Native tokens have 18 decimals
-            const amountWei = denormalizeValue(
-                selectedQuote.destinationAmount.toString(),
-                decimals
-            );
-            setAmountIn(amountWei);
-        }
-    }, [selectedQuote, chainIdOut, setTokenIn, setChainIdIn, setAmountIn]);
-
-    // Navigation
-    const goBack = useCallback(() => {
-        if (currentStep === CardBuyStep.ChooseAmount) {
-            setFlow("");
-        } else {
-            setCurrentStep((prev) => prev - 1);
-        }
-    }, [currentStep, setFlow]);
-
-    const goNext = useCallback(() => {
-        setCurrentStep((prev) => prev + 1);
-    }, []);
-
-    // Sign userOp
-    const handleSignUserOp = useCallback(async () => {
-        if (!routeData?.userOp || !chainIdOut) return;
-
-        try {
-            const userOpHash = getUserOperationHash({
-                chainId: chainIdOut,
-                entryPointAddress: ENTRY_POINT_ADDRESS,
-                entryPointVersion: "0.7",
-                userOperation: routeData.userOp,
-            });
-
-            const signature = await signMessageAsync({
-                message: { raw: userOpHash },
-            });
-
-            const signedOp = {
-                ...routeData.userOp,
-                signature,
-            };
-
-            setSignedUserOp(signedOp);
-            goNext();
-        } catch (err: any) {
-            setError(err.message || "Failed to sign transaction");
-        }
-    }, [routeData, chainIdOut, signMessageAsync, goNext]);
-
-    // Start MELD session
-    const handleStartSession = useCallback(async () => {
-        if (!selectedQuote || !smartAccountAddress || !destinationCryptoCode) return;
-
-        try {
-            await meldFlow.startSession({
-                countryCode,
-                sourceCurrencyCode: "USD",
-                destinationCurrencyCode: destinationCryptoCode,
-                sourceAmount: selectedQuote.sourceAmount,
-                walletAddress: smartAccountAddress,
-                serviceProvider: selectedQuote.serviceProvider,
-                paymentMethodType: "CREDIT_DEBIT_CARD",
-                externalSessionId: `enso-${Date.now()}`,
-            });
-            goNext();
-        } catch (err: any) {
-            setError(err.message || "Failed to create session");
-        }
-    }, [selectedQuote, smartAccountAddress, destinationCryptoCode, countryCode, meldFlow, goNext]);
-
-    // Open widget
-    const handleOpenWidget = useCallback(() => {
-        meldFlow.openWidget();
-        goNext();
-    }, [meldFlow, goNext]);
-
-    // Check if chain is supported
-    if (!chainIdOut || !isMeldSupportedChain(chainIdOut)) {
-        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
-                        fiatAmount={fiatAmount}
-                        setFiatAmount={setFiatAmount}
-                        quotes={quotes}
-                        quotesLoading={quotesLoading}
-                        selectedQuote={selectedQuote}
-                        setSelectedQuote={setSelectedQuote}
-                        destinationSymbol={destinationSymbol}
-                        onContinue={goNext}
-                    />
-                );
-
-            case CardBuyStep.SignUserOp:
-                return (
-                    <SignUserOpStep
-                        selectedQuote={selectedQuote!}
-                        destinationSymbol={destinationSymbol}
-                        routeLoading={routeLoading}
-                        routeFetched={routeFetched}
-                        effectiveTokenOutData={effectiveTokenOutData}
-                        onSign={handleSignUserOp}
-                        error={error}
-                    />
-                );
-
-            case CardBuyStep.OpenWidget:
-                return (
-                    <OpenWidgetStep
-                        selectedQuote={selectedQuote!}
-                        isCreatingSession={meldFlow.isCreatingSession}
-                        widgetUrl={meldFlow.widgetUrl}
-                        onCreateSession={handleStartSession}
-                        onOpenWidget={handleOpenWidget}
-                        error={error || meldFlow.sessionError?.message}
-                    />
-                );
-
-            case CardBuyStep.TrackPurchase:
-                return (
-                    <TrackPurchaseStep
-                        transaction={meldFlow.transaction}
-                        isComplete={meldFlow.isComplete}
-                        isFailed={meldFlow.isFailed}
-                        onComplete={() => setCurrentStep(CardBuyStep.TrackUserOp)}
-                    />
-                );
-
-            case CardBuyStep.TrackUserOp:
-                return (
-                    <TrackUserOpStep
-                        signedUserOp={signedUserOp}
-                        chainIdOut={chainIdOut!}
-                        onClose={handleClose}
-                    />
-                );
-
-            default:
-                return null;
-        }
-    };
-
-    const stepTitles: Record<CardBuyStep, string> = {
-        [CardBuyStep.ChooseAmount]: "Buy with Card",
-        [CardBuyStep.SignUserOp]: "Approve Transaction",
-        [CardBuyStep.OpenWidget]: "Complete Purchase",
-        [CardBuyStep.TrackPurchase]: "Processing Purchase",
-        [CardBuyStep.TrackUserOp]: "Executing Transaction",
-    };
-
-    return (
-        <>
-            <Modal.Header>
-                <HeaderWrapper>
-                    <IconButton onClick={goBack} width="40px">
-                        <Icon as={ChevronLeft} color="fg.muted" width="16px" height="16px" />
-                    </IconButton>
-                    <Box>
-                        <HeaderTitle>{stepTitles[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>{renderStepContent()}</Modal.Body>
-        </>
-    );
-};
-
-// Step Components
-
-interface ChooseAmountStepProps {
-    fiatAmount: string;
-    setFiatAmount: (amount: string) => void;
-    quotes: MeldQuote[] | undefined;
-    quotesLoading: boolean;
-    selectedQuote: MeldQuote | null;
-    setSelectedQuote: (quote: MeldQuote) => void;
-    destinationSymbol: string;
-    onContinue: () => void;
-}
-
-const ChooseAmountStep = ({
-    fiatAmount,
-    setFiatAmount,
-    quotes,
-    quotesLoading,
-    selectedQuote,
-    destinationSymbol,
-    onContinue,
-}: ChooseAmountStepProps) => {
-    const quickAmounts = [50, 100, 250, 500];
-
-    return (
-        <BodyWrapper>
-            <Flex direction="column" gap={4}>
-                {/* Amount Input */}
-                <Box>
-                    <Text fontSize="sm" color="fg.muted" mb={2}>
-                        Amount (USD)
-                    </Text>
-                    <Input
-                        type="number"
-                        value={fiatAmount}
-                        onChange={(e) => setFiatAmount(e.target.value)}
-                        placeholder="Enter amount"
-                        min={10}
-                    />
-                </Box>
-
-                {/* Quick Amount Buttons */}
-                <Flex gap={2} flexWrap="wrap">
-                    {quickAmounts.map((amount) => (
-                        <Button
-                            key={amount}
-                            variant={fiatAmount === String(amount) ? "solid" : "outline"}
-                            size="sm"
-                            onClick={() => setFiatAmount(String(amount))}
-                        >
-                            ${amount}
-                        </Button>
-                    ))}
-                </Flex>
-
-                {/* Quote Display */}
-                <Box
-                    bg="bg.subtle"
-                    p={4}
-                    borderRadius="lg"
-                    border="1px solid"
-                    borderColor="border"
-                >
-                    {quotesLoading ? (
-                        <Flex direction="column" gap={2}>
-                            <Skeleton height="20px" width="60%" />
-                            <Skeleton height="16px" width="40%" />
-                        </Flex>
-                    ) : selectedQuote ? (
-                        <Flex direction="column" gap={2}>
-                            <Flex justify="space-between" align="center">
-                                <Text fontSize="sm" color="fg.muted">
-                                    You'll receive approximately:
-                                </Text>
-                            </Flex>
-                            <Text fontSize="xl" fontWeight="bold" color="fg">
-                                ~{selectedQuote.destinationAmount.toFixed(6)} {destinationSymbol}
-                            </Text>
-                            <Flex justify="space-between" fontSize="xs" color="fg.subtle">
-                                <Text>
-                                    Rate: 1 {destinationSymbol} = ${(1 / selectedQuote.exchangeRate).toFixed(2)}
-                                </Text>
-                                <Text>
-                                    Fee: ${selectedQuote.totalFee.toFixed(2)}
-                                </Text>
-                            </Flex>
-                            <Flex align="center" gap={1} fontSize="xs" color="fg.subtle">
-                                <Text>via</Text>
-                                <Text fontWeight="medium">
-                                    {formatProviderName(selectedQuote.serviceProvider)}
-                                </Text>
-                            </Flex>
-                        </Flex>
-                    ) : (
-                        <Text fontSize="sm" color="fg.muted" textAlign="center">
-                            Enter an amount to see quote
-                        </Text>
-                    )}
-                </Box>
-
-                {/* Card Icons */}
-                <Flex justify="center" gap={2} opacity={0.6}>
-                    {CARD_ICONS.map((icon, i) => (
-                        <Image key={i} src={icon} alt="Card" height="24px" />
-                    ))}
-                </Flex>
-
-                {/* Continue Button */}
-                <Button
-                    onClick={onContinue}
-                    disabled={!selectedQuote || parseFloat(fiatAmount) < 10}
-                    width="100%"
-                >
-                    Continue
-                </Button>
-
-                <Text fontSize="xs" color="fg.subtle" textAlign="center">
-                    You'll complete payment securely through our partner
-                </Text>
-            </Flex>
-        </BodyWrapper>
-    );
-};
-
-interface SignUserOpStepProps {
-    selectedQuote: MeldQuote;
-    destinationSymbol: string;
-    routeLoading: boolean;
-    routeFetched: boolean;
-    effectiveTokenOutData: any;
-    onSign: () => void;
-    error: string | null;
-}
-
-const SignUserOpStep = ({
-    selectedQuote,
-    destinationSymbol,
-    routeLoading,
-    routeFetched,
-    effectiveTokenOutData,
-    onSign,
-    error,
-}: SignUserOpStepProps) => {
-    return (
-        <BodyWrapper>
-            <Flex direction="column" gap={4}>
-                <Text fontSize="sm" color="fg.muted" textAlign="center">
-                    Sign to authorize the swap that will execute after your purchase completes
-                </Text>
-
-                <Box
-                    bg="bg.subtle"
-                    p={4}
-                    borderRadius="lg"
-                    border="1px solid"
-                    borderColor="border"
-                >
-                    <Flex direction="column" gap={3}>
-                        <TransactionDetailRow
-                            label="From"
-                            value={`~${selectedQuote.destinationAmount.toFixed(6)} ${destinationSymbol}`}
-                        />
-                        <TransactionDetailRow
-                            label="To"
-                            value={
-                                effectiveTokenOutData
-                                    ? `${effectiveTokenOutData.symbol}`
-                                    : "Loading..."
-                            }
-                        />
-                    </Flex>
-                </Box>
-
-                {error && (
-                    <Text color="error" fontSize="sm" textAlign="center">
-                        {error}
-                    </Text>
-                )}
-
-                <Button
-                    onClick={onSign}
-                    disabled={routeLoading || !routeFetched}
-                    width="100%"
-                >
-                    {routeLoading ? (
-                        <Flex align="center" gap={2}>
-                            <Spinner size="sm" />
-                            <Text>Preparing transaction...</Text>
-                        </Flex>
-                    ) : (
-                        "Sign in Wallet"
-                    )}
-                </Button>
-            </Flex>
-        </BodyWrapper>
-    );
-};
-
-interface OpenWidgetStepProps {
-    selectedQuote: MeldQuote;
-    isCreatingSession: boolean;
-    widgetUrl: string | null;
-    onCreateSession: () => void;
-    onOpenWidget: () => void;
-    error?: string | null;
-}
-
-const OpenWidgetStep = ({
-    selectedQuote,
-    isCreatingSession,
-    widgetUrl,
-    onCreateSession,
-    onOpenWidget,
-    error,
-}: OpenWidgetStepProps) => {
-    // Auto-create session on mount
-    useEffect(() => {
-        if (!widgetUrl && !isCreatingSession) {
-            onCreateSession();
-        }
-    }, [widgetUrl, isCreatingSession, onCreateSession]);
-
-    return (
-        <BodyWrapper>
-            <Flex direction="column" gap={4} align="center">
-                {isCreatingSession ? (
-                    <>
-                        <Spinner size="lg" color="primary" />
-                        <Text color="fg.muted">Preparing checkout...</Text>
-                    </>
-                ) : widgetUrl ? (
-                    <>
-                        <Icon as={CreditCard} boxSize={12} color="primary" />
-                        <Text textAlign="center" color="fg">
-                            Complete your purchase of{" "}
-                            <Text as="span" fontWeight="bold">
-                                ${selectedQuote.sourceAmount}
-                            </Text>{" "}
-                            via {formatProviderName(selectedQuote.serviceProvider)}
-                        </Text>
-
-                        <Button onClick={onOpenWidget} width="100%">
-                            <Flex align="center" gap={2}>
-                                <Text>Open Payment</Text>
-                                <Icon as={ExternalLink} boxSize={4} />
-                            </Flex>
-                        </Button>
-
-                        <Text fontSize="xs" color="fg.subtle" textAlign="center">
-                            A new window will open for secure payment
-                        </Text>
-                    </>
-                ) : error ? (
-                    <>
-                        <Icon as={XCircle} boxSize={12} color="error" />
-                        <Text color="error" textAlign="center">
-                            {error}
-                        </Text>
-                        <Button onClick={onCreateSession} variant="outline">
-                            Try Again
-                        </Button>
-                    </>
-                ) : null}
-            </Flex>
-        </BodyWrapper>
-    );
-};
-
-interface TrackPurchaseStepProps {
-    transaction: any;
-    isComplete: boolean;
-    isFailed: boolean;
-    onComplete: () => void;
-}
-
-const TrackPurchaseStep = ({
-    transaction,
-    isComplete,
-    isFailed,
-    onComplete,
-}: TrackPurchaseStepProps) => {
-    // Auto-advance when complete
-    useEffect(() => {
-        if (isComplete) {
-            const timer = setTimeout(onComplete, 1500);
-            return () => clearTimeout(timer);
-        }
-    }, [isComplete, onComplete]);
-
-    const statusMessages: Record<string, string> = {
-        PENDING: "Waiting for payment...",
-        AWAITING_PAYMENT: "Waiting for payment...",
-        PAYMENT_RECEIVED: "Payment received, processing...",
-        PROCESSING: "Processing your purchase...",
-        COMPLETED: "Purchase complete!",
-        FAILED: "Purchase failed",
-        REFUNDED: "Purchase refunded",
-        CANCELLED: "Purchase cancelled",
-    };
-
-    return (
-        <BodyWrapper>
-            <Flex direction="column" gap={4} align="center" py={4}>
-                {isComplete ? (
-                    <Icon as={CheckCircle} boxSize={16} color="success" />
-                ) : isFailed ? (
-                    <Icon as={XCircle} boxSize={16} color="error" />
-                ) : (
-                    <CircleTimer duration={300} />
-                )}
-
-                <Text fontSize="lg" fontWeight="medium" color="fg">
-                    {transaction
-                        ? statusMessages[transaction.status] || transaction.status
-                        : "Waiting for transaction..."}
-                </Text>
-
-                {transaction && (
-                    <Box
-                        bg="bg.subtle"
-                        p={4}
-                        borderRadius="lg"
-                        width="100%"
-                        border="1px solid"
-                        borderColor="border"
-                    >
-                        <Flex direction="column" gap={2} fontSize="sm">
-                            <Flex justify="space-between">
-                                <Text color="fg.muted">Amount</Text>
-                                <Text color="fg">
-                                    ${transaction.sourceAmount} → {transaction.destinationAmount}{" "}
-                                    {transaction.destinationCurrencyCode?.split("_")[0]}
-                                </Text>
-                            </Flex>
-                            <Flex justify="space-between">
-                                <Text color="fg.muted">Provider</Text>
-                                <Text color="fg">
-                                    {formatProviderName(transaction.serviceProvider)}
-                                </Text>
-                            </Flex>
-                            {transaction.transactionHash && (
-                                <Flex justify="space-between">
-                                    <Text color="fg.muted">Tx Hash</Text>
-                                    <Text color="fg" fontFamily="mono" fontSize="xs">
-                                        {transaction.transactionHash.slice(0, 10)}...
-                                    </Text>
-                                </Flex>
-                            )}
-                        </Flex>
-                    </Box>
-                )}
-
-                {!isComplete && !isFailed && (
-                    <Text fontSize="xs" color="fg.subtle" textAlign="center">
-                        This usually takes 1-5 minutes. You can close this window.
-                    </Text>
-                )}
-            </Flex>
-        </BodyWrapper>
-    );
-};
-
-interface TrackUserOpStepProps {
-    signedUserOp: any;
-    chainIdOut: number;
-    onClose?: () => void;
-}
-
-const TrackUserOpStep = ({
-    signedUserOp,
-    chainIdOut,
-    onClose,
-}: TrackUserOpStepProps) => {
-    const [status, setStatus] = useState<"pending" | "executing" | "success" | "failed">("pending");
-
-    // TODO: Implement actual userOp submission and tracking
-    // This would be similar to the ExchangeFlow TrackUserOpStep
-
-    return (
-        <BodyWrapper>
-            <Flex direction="column" gap={4} align="center" py={4}>
-                {status === "success" ? (
-                    <>
-                        <Icon as={CheckCircle} boxSize={16} color="success" />
-                        <Text fontSize="lg" fontWeight="medium" color="fg">
-                            Transaction Complete!
-                        </Text>
-                    </>
-                ) : status === "failed" ? (
-                    <>
-                        <Icon as={XCircle} boxSize={16} color="error" />
-                        <Text fontSize="lg" fontWeight="medium" color="fg">
-                            Transaction Failed
-                        </Text>
-                    </>
-                ) : (
-                    <>
-                        <Spinner size="xl" color="primary" />
-                        <Text fontSize="lg" fontWeight="medium" color="fg">
-                            Executing your swap...
-                        </Text>
-                        <Text fontSize="sm" color="fg.muted" textAlign="center">
-                            Your funds have arrived. Now executing the final swap.
-                        </Text>
-                    </>
-                )}
-
-                {(status === "success" || status === "failed") && onClose && (
-                    <Button onClick={onClose} width="100%" mt={4}>
-                        Close
-                    </Button>
-                )}
-            </Flex>
-        </BodyWrapper>
-    );
-};
-
-export default CardBuyFlow;