@ensofinance/checkout-widget 0.1.9 → 1.0.1

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

@@ -0,0 +1,343 @@
+import {
+    Center,
+    Spinner,
+    Box,
+    Icon,
+    Text,
+    Flex,
+    Skeleton,
+    Image,
+} from "@chakra-ui/react";
+import { ChevronRight, Check } from "lucide-react";
+import { useState } from "react";
+import { BodyWrapper } from "../../ui/styled";
+import { Button, Card, Input, Tag } from "../../ui";
+import { AnimatedStep } from "../../ui/transitions";
+import { formatProviderName, getProviderIcon } from "@/util/meld-hooks";
+import type { MeldQuote } from "@/types";
+
+interface ChooseAmountStepProps {
+    fiatCurrency: "USD" | "EUR";
+    setFiatCurrency: (currency: "USD" | "EUR") => void;
+    fiatAmount: string;
+    setFiatAmount: (amount: string) => void;
+    quotes: MeldQuote[] | undefined;
+    quotesLoading: boolean;
+    quotesError: string | null;
+    selectedQuote: MeldQuote | null;
+    setSelectedQuote: (quote: MeldQuote | null) => void;
+    destinationSymbol: string;
+    onContinue: () => void;
+}
+
+const ChooseAmountStep = ({
+    fiatCurrency,
+    setFiatCurrency,
+    fiatAmount,
+    setFiatAmount,
+    quotes,
+    quotesLoading,
+    quotesError,
+    selectedQuote,
+    setSelectedQuote,
+    destinationSymbol,
+    onContinue,
+}: ChooseAmountStepProps) => {
+    const [showProviderSelect, setShowProviderSelect] = useState(false);
+    const fiatPrefix = fiatCurrency === "EUR" ? "€" : "$";
+
+    const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const raw = e.target.value.replace(/[^0-9.]/g, "");
+        // Prevent multiple decimals
+        const parts = raw.split(".");
+        const sanitized =
+            parts.length > 2 ? parts[0] + "." + parts.slice(1).join("") : raw;
+        setFiatAmount(sanitized);
+    };
+
+    const displayValue = fiatAmount ? `${fiatPrefix}${fiatAmount}` : "";
+
+    // Check if selected quote is the best (first in list)
+    const isBestRate =
+        selectedQuote &&
+        quotes &&
+        quotes.length > 0 &&
+        quotes[0].serviceProvider === selectedQuote.serviceProvider;
+
+    // Initial loading: no quote yet and quotes are being fetched
+    const isInitialLoading =
+        quotesLoading && !selectedQuote && parseFloat(fiatAmount) > 0;
+
+    // Provider Selection View
+    if (showProviderSelect) {
+        return (
+            <AnimatedStep key="provider-select">
+            <BodyWrapper>
+                {quotesLoading ? (
+                    <Flex direction="column" gap={2}>
+                        <Skeleton height="48px" borderRadius="card" />
+                        <Skeleton height="48px" borderRadius="card" />
+                        <Skeleton height="48px" borderRadius="card" />
+                    </Flex>
+                ) : quotes && quotes.length > 0 ? (
+                    <Flex direction="column" gap={2}>
+                        {quotes.map((quote, idx) => {
+                            const isSelected =
+                                selectedQuote?.serviceProvider ===
+                                quote.serviceProvider;
+                            return (
+                                <Card
+                                    key={`${quote.serviceProvider}-${idx}`}
+                                    onClick={() => {
+                                        setSelectedQuote(quote);
+                                        setShowProviderSelect(false);
+                                    }}
+                                    selected={isSelected}
+                                >
+                                    <Box
+                                        display="flex"
+                                        alignItems="center"
+                                        gap="1"
+                                        minWidth="320px"
+                                    >
+                                        <Box
+                                            display="flex"
+                                            alignItems="center"
+                                            gap="1"
+                                            marginRight="auto"
+                                        >
+                                            <Center
+                                                boxSize="32px"
+                                                borderRadius="card"
+                                                bg="bg.subtle"
+                                                overflow="hidden"
+                                                flexShrink={0}
+                                            >
+                                                <Image
+                                                    src={getProviderIcon(
+                                                        quote.serviceProvider,
+                                                    )}
+                                                    alt={quote.serviceProvider}
+                                                    boxSize="32px"
+                                                    objectFit="contain"
+                                                    onError={(e) => {
+                                                        (
+                                                            e.target as HTMLImageElement
+                                                        ).style.display =
+                                                            "none";
+                                                    }}
+                                                />
+                                            </Center>
+                                            <Box>
+                                                <Card.Title>
+                                                    {formatProviderName(
+                                                        quote.serviceProvider,
+                                                    )}
+                                                </Card.Title>
+                                                <Card.Description>
+                                                    {quote.destinationAmount.toFixed(
+                                                        4,
+                                                    )}{" "}
+                                                    {destinationSymbol} • Fee:{" "}
+                                                    {fiatPrefix}
+                                                    {quote.totalFee.toFixed(2)}
+                                                </Card.Description>
+                                            </Box>
+                                        </Box>
+                                        {idx === 0 && <Tag>Best price</Tag>}
+                                        {quote.lowKyc && <Tag>Low KYC</Tag>}
+                                        <Icon
+                                            as={Check}
+                                            color={
+                                                isSelected
+                                                    ? "primary"
+                                                    : "transparent"
+                                            }
+                                            boxSize={5}
+                                            flexShrink={0}
+                                        />
+                                    </Box>
+                                </Card>
+                            );
+                        })}
+                    </Flex>
+                ) : (
+                    <Text color="fg.muted" textAlign="center" py={4}>
+                        No providers available
+                    </Text>
+                )}
+            </BodyWrapper>
+            </AnimatedStep>
+        );
+    }
+
+    // Main View
+    return (
+        <AnimatedStep key="main-view">
+        <BodyWrapper>
+            {/* Currency Toggle */}
+            <Flex gap={2} width="100%">
+                <Button
+                    visual={fiatCurrency === "USD" ? "solid" : "lightGray"}
+                    onClick={() => setFiatCurrency("USD")}
+                    flex={1}
+                    size="sm"
+                >
+                    USD
+                </Button>
+                <Button
+                    visual={fiatCurrency === "EUR" ? "solid" : "lightGray"}
+                    onClick={() => setFiatCurrency("EUR")}
+                    flex={1}
+                    size="sm"
+                >
+                    EUR
+                </Button>
+            </Flex>
+
+            {/* Amount Input - styled like AmountInput */}
+            <Box
+                display="flex"
+                flexDirection="column"
+                alignItems="center"
+                padding="25.5px"
+            >
+                <Input
+                    variant="text"
+                    inputMode="decimal"
+                    placeholder={`${fiatPrefix}100`}
+                    value={displayValue}
+                    onChange={handleAmountChange}
+                    marginY="8px"
+                    w={"full"}
+                />
+                {/* Crypto equivalent */}
+                <Flex
+                    fontSize="md"
+                    color="fg.muted"
+                    mt={2}
+                    gap={1}
+                    justifyContent="space-between"
+                    w={"full"}
+                >
+                    {quotesLoading ? (
+                        <Skeleton height="16px" width="120px" />
+                    ) : selectedQuote ? (
+                        <>
+                            <Text fontSize="sm">Estimated amount:</Text>
+                            <Text fontSize="sm"  fontWeight="semibold">
+                                {selectedQuote.destinationAmount?.toString()}{" "}
+                                {destinationSymbol}
+                            </Text>
+                        </>
+                    ) : (
+                        <Text>Enter amount to see quote</Text>
+                    )}
+                </Flex>
+            </Box>
+
+            {/* Error */}
+            {!!quotesError && (
+                <Text color="error" fontSize="sm" textAlign="center">
+                    {quotesError}
+                </Text>
+            )}
+
+            {/* Provider Row */}
+            {isInitialLoading ? (
+                <Card>
+                    <Box
+                        display="flex"
+                        alignItems="center"
+                        justifyContent="center"
+                        gap="1"
+                        minWidth="320px"
+                    >
+                        <Spinner size="sm" color="fg.muted" />
+                        <Text fontSize="sm" color="fg.muted">
+                            Finding best rates...
+                        </Text>
+                    </Box>
+                </Card>
+            ) : (
+                <Card onClick={() => setShowProviderSelect(true)}>
+                    <Box
+                        display="flex"
+                        alignItems="center"
+                        gap="1"
+                        minWidth="320px"
+                    >
+                        <Box
+                            display="flex"
+                            alignItems="center"
+                            gap="1"
+                            marginRight="auto"
+                        >
+                            {quotesLoading ? (
+                                <Skeleton height="20px" width="100px" />
+                            ) : selectedQuote ? (
+                                <>
+                                    <Center
+                                        boxSize="32px"
+                                        borderRadius="card"
+                                        bg="bg.subtle"
+                                        overflow="hidden"
+                                        flexShrink={0}
+                                    >
+                                        <Image
+                                            src={getProviderIcon(
+                                                selectedQuote.serviceProvider,
+                                            )}
+                                            alt={selectedQuote.serviceProvider}
+                                            boxSize="32px"
+                                            objectFit="contain"
+                                            onError={(e) => {
+                                                (
+                                                    e.target as HTMLImageElement
+                                                ).style.display = "none";
+                                            }}
+                                        />
+                                    </Center>
+                                    <Box>
+                                        <Card.Title>
+                                            {formatProviderName(
+                                                selectedQuote.serviceProvider,
+                                            )}
+                                        </Card.Title>
+                                        <Card.Description>
+                                            {isBestRate && "Best price"}
+                                            {isBestRate &&
+                                                selectedQuote.lowKyc &&
+                                                " • "}
+                                            {selectedQuote.lowKyc && "Low KYC"}
+                                        </Card.Description>
+                                    </Box>
+                                </>
+                            ) : (
+                                <Card.Title>Select provider</Card.Title>
+                            )}
+                        </Box>
+                        <Icon
+                            as={ChevronRight}
+                            color="fg.muted"
+                            width="16px"
+                            height="16px"
+                        />
+                    </Box>
+                </Card>
+            )}
+
+            {/* Continue Button */}
+            <Button
+                onClick={onContinue}
+                disabled={!selectedQuote || parseFloat(fiatAmount) < 10}
+                width="100%"
+            >
+                Continue
+            </Button>
+        </BodyWrapper>
+        </AnimatedStep>
+    );
+};
+
+export default ChooseAmountStep;

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

@@ -0,0 +1,189 @@
+import { Spinner, Text, Flex, Image, Box, Center } from "@chakra-ui/react";
+import { useEffect, useRef, useState } from "react";
+import { BodyWrapper } from "../../ui/styled";
+import { Button } from "../../ui";
+import { formatProviderName } from "@/util/meld-hooks";
+import { CircleTimer } from "@/components/CircleTimer";
+import type { MeldQuote, MeldTransactionStatus } from "@/types";
+import FailIcon from "@/assets/fail.svg";
+import { useSmartAccountAddress } from "@/util/enso-hooks";
+
+interface OpenWidgetStepProps {
+    selectedQuote: MeldQuote;
+    isCreatingSession: boolean;
+    widgetUrl: string | null;
+    sessionId: string | null;
+    onCreateSession: () => void;
+    onOpenWidget: () => void;
+    isTransferDetected: boolean;
+    detectedAmount: string | null;
+    error?: string | null;
+}
+// Use after implementing Meld webhooks if needed
+function getStatusMessage(status: MeldTransactionStatus | undefined): string {
+    switch (status) {
+        case "PENDING_CREATED":
+        case "PENDING":
+            return "Waiting for payment...";
+        case "PROCESSING":
+            return "Processing payment...";
+        case "AUTHORIZED":
+            return "Payment authorized...";
+        case "TWO_FA_REQUIRED":
+            return "Two-factor authentication required...";
+        case "TWO_FA_PROVIDED":
+            return "Verifying authentication...";
+        case "SETTLING":
+            return "Payment confirmed, crypto being sent...";
+        case "SETTLED":
+            return "Payment complete!";
+        case "DECLINED":
+            return "Payment was declined.";
+        case "CANCELLED":
+            return "Payment was cancelled.";
+        case "FAILED":
+        case "ERROR":
+            return "Payment failed.";
+        case "REFUNDED":
+            return "Payment was refunded.";
+        case "VOIDED":
+            return "Payment was voided.";
+        case "AUTHORIZATION_EXPIRED":
+            return "Authorization expired.";
+        default:
+            return "Waiting for payment...";
+    }
+}
+
+const OpenWidgetStep = ({
+    selectedQuote,
+    isCreatingSession,
+    widgetUrl,
+    sessionId,
+    onCreateSession,
+    onOpenWidget,
+    isTransferDetected,
+    detectedAmount,
+    error,
+}: OpenWidgetStepProps) => {
+    const openedWidgetUrlRef = useRef<string | null>(null);
+    const [isTimerFinished, setIsTimerFinished] = useState(false);
+    const { smartAccountAddress } = useSmartAccountAddress();
+
+    // Auto-create session on mount
+    useEffect(() => {
+        if (!widgetUrl && !isCreatingSession && !error) {
+            onCreateSession();
+        }
+    }, [widgetUrl, isCreatingSession, error, onCreateSession]);
+
+    // Auto-open each newly created widget URL once.
+    useEffect(() => {
+        if (!widgetUrl) return;
+        if (openedWidgetUrlRef.current === widgetUrl) return;
+        openedWidgetUrlRef.current = widgetUrl;
+        onOpenWidget();
+    }, [widgetUrl, onOpenWidget]);
+
+    useEffect(() => {
+        if (!sessionId) {
+            setIsTimerFinished(false);
+        }
+    }, [sessionId]);
+
+    const fiatPrefix = selectedQuote.sourceCurrencyCode === "EUR" ? "€" : "$";
+
+    // Creating session
+    if (isCreatingSession && !widgetUrl) {
+        return (
+            <BodyWrapper>
+                <Center>
+                    <Spinner size="lg" color="primary" />
+                </Center>
+            </BodyWrapper>
+        );
+    }
+
+    // Error before session created
+    if (error && !widgetUrl) {
+        return (
+            <BodyWrapper>
+                <Flex direction="column" gap={4} align="center">
+                    <Box
+                        display="flex"
+                        flexDirection="column"
+                        alignItems="center"
+                    >
+                        <Image
+                            src={FailIcon}
+                            boxShadow="0px 0px 20px var(--chakra-colors-error)"
+                            borderRadius="90%"
+                            width="58px"
+                            height="58px"
+                        />
+                    </Box>
+                    <Text color="error" textAlign="center">
+                        {error}
+                    </Text>
+                </Flex>
+            </BodyWrapper>
+        );
+    }
+
+    return (
+        <BodyWrapper>
+            <Flex direction="column" gap={4} align="center">
+                <CircleTimer
+                    start={!!sessionId}
+                    duration={300}
+                    onFinish={() => setIsTimerFinished(true)}
+                />
+                <Text textAlign="center" color="fg" fontWeight="semibold">
+                    Complete your purchase of{" "}
+                    <Text as="span" fontWeight="bold">
+                        {fiatPrefix}
+                        {selectedQuote.sourceAmount}
+                    </Text>{" "}
+                    via {formatProviderName(selectedQuote.serviceProvider)}
+                </Text>
+                {/*<Text fontSize="sm" color="fg.muted" textAlign="center">*/}
+                {/*    {getStatusMessage(txStatus)}*/}
+                {/*</Text>*/}
+                <Text fontSize="sm" color="fg.muted" textAlign="center" mb={-2}>
+                    Tracking incoming USDC transfer to your smart account:{" "}
+                </Text>{" "}
+                <Text fontSize="sm" fontWeight={500}>
+                    {smartAccountAddress}
+                </Text>
+                {isTransferDetected && detectedAmount && (
+                    <Text fontSize="sm" color="success" textAlign="center">
+                        Detected {detectedAmount} USDC. Redirecting to Smart
+                        Account quote...
+                    </Text>
+                )}
+                {isTimerFinished && !isTransferDetected && (
+                    <Text fontSize="sm" color="fg.muted" textAlign="center">
+                        Believe transfer was not detected? Withdrawn funds can
+                        be used for transacting any time later using Smart
+                        Wallet as source.
+                    </Text>
+                )}
+                {error && widgetUrl && (
+                    <Text color="error" textAlign="center" fontSize="sm">
+                        {error}
+                    </Text>
+                )}
+                <Flex direction="column" gap={2} width="100%">
+                    <Button
+                        onClick={onOpenWidget}
+                        disabled={!widgetUrl || isCreatingSession}
+                    >
+                        {widgetUrl ? "Open Provider" : "Preparing Provider..."}
+                    </Button>
+                </Flex>
+            </Flex>
+        </BodyWrapper>
+    );
+};
+
+export default OpenWidgetStep;