@ensofinance/checkout-widget 0.1.6 → 0.1.8

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

@@ -0,0 +1,352 @@
+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, Input } from "../../ui";
+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 (
+            <BodyWrapper>
+                {quotesLoading ? (
+                    <Flex direction="column" gap={3}>
+                        <Skeleton height="56px" borderRadius="card" />
+                        <Skeleton height="56px" borderRadius="card" />
+                        <Skeleton height="56px" borderRadius="card" />
+                    </Flex>
+                ) : quotes && quotes.length > 0 ? (
+                    <Flex direction="column" gap={2}>
+                        {quotes.map((quote, idx) => {
+                            const selected =
+                                selectedQuote?.serviceProvider ===
+                                quote.serviceProvider;
+                            return (
+                                <Flex
+                                    key={`${quote.serviceProvider}-${idx}`}
+                                    p={3}
+                                    h="56px"
+                                    borderRadius="card"
+                                    border="1px solid"
+                                    borderColor={
+                                        selected ? "primary" : "border"
+                                    }
+                                    bg={selected ? "bg.subtle" : "transparent"}
+                                    cursor="pointer"
+                                    onClick={() => {
+                                        setSelectedQuote(quote);
+                                        setShowProviderSelect(false);
+                                    }}
+                                    align="center"
+                                    gap={3}
+                                >
+                                    {/* Provider Icon */}
+                                    <Center
+                                        boxSize="40px"
+                                        borderRadius="card"
+                                        bg="bg.subtle"
+                                        overflow="hidden"
+                                        flexShrink={0}
+                                    >
+                                        <Image
+                                            src={getProviderIcon(
+                                                quote.serviceProvider,
+                                            )}
+                                            alt={quote.serviceProvider}
+                                            boxSize="40px"
+                                            objectFit="contain"
+                                            onError={(e) => {
+                                                (
+                                                    e.target as HTMLImageElement
+                                                ).style.display = "none";
+                                            }}
+                                        />
+                                    </Center>
+                                    {/* Provider Info */}
+                                    <Flex direction="column" flex={1}>
+                                        <Flex align="center" gap={2}>
+                                            <Text
+                                                fontSize="sm"
+                                                fontWeight="semibold"
+                                                color="fg"
+                                            >
+                                                {formatProviderName(
+                                                    quote.serviceProvider,
+                                                )}
+                                            </Text>
+                                            {idx === 0 && (
+                                                <Text
+                                                    fontSize="xs"
+                                                    color="success"
+                                                    fontWeight="medium"
+                                                >
+                                                    Best price
+                                                </Text>
+                                            )}
+                                            {quote.lowKyc && (
+                                                <Text
+                                                    fontSize="xs"
+                                                    color="primary.muted"
+                                                    fontWeight="medium"
+                                                >
+                                                    Low KYC
+                                                </Text>
+                                            )}
+                                        </Flex>
+                                        <Text fontSize="xs" color="fg.subtle">
+                                            {quote.destinationAmount.toFixed(4)}{" "}
+                                            {destinationSymbol} • Fee:{" "}
+                                            {fiatPrefix}
+                                            {quote.totalFee.toFixed(2)}
+                                        </Text>
+                                    </Flex>
+                                    {/* Selected Check */}
+                                    <Icon
+                                        as={Check}
+                                        color={selected ? "primary" : "transparent"}
+                                        boxSize={5}
+                                        flexShrink={0}
+                                    />
+                                </Flex>
+                            );
+                        })}
+                    </Flex>
+                ) : (
+                    <Text color="fg.muted" textAlign="center" py={4}>
+                        No providers available
+                    </Text>
+                )}
+            </BodyWrapper>
+        );
+    }
+
+    // Main View
+    return (
+        <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"
+                />
+                {/* Crypto equivalent */}
+                <Text fontSize="md" color="fg.muted" mt={2}>
+                    {quotesLoading ? (
+                        <Skeleton height="16px" width="120px" />
+                    ) : selectedQuote ? (
+                        `Estimated amount: ${selectedQuote.destinationAmount?.toString()} ${destinationSymbol}`
+                    ) : (
+                        "Enter amount to see quote"
+                    )}
+                </Text>
+            </Box>
+
+            {/* Error */}
+            {!!quotesError && (
+                <Text color="error" fontSize="sm" textAlign="center">
+                    {quotesError}
+                </Text>
+            )}
+
+            {/* Provider Row */}
+            {isInitialLoading ? (
+                <Flex
+                    p={3}
+                    borderRadius="card"
+                    border="1px solid"
+                    borderColor="border"
+                    align="center"
+                    justify="center"
+                    gap={2}
+                >
+                    <Spinner size="sm" color="fg.muted" />
+                    <Text fontSize="sm" color="fg.muted">
+                        Finding best rates...
+                    </Text>
+                </Flex>
+            ) : (
+                <Flex
+                    p={3}
+                    borderRadius="card"
+                    border="1px solid"
+                    borderColor="border"
+                    cursor="pointer"
+                    onClick={() => setShowProviderSelect(true)}
+                    align="center"
+                    justify="space-between"
+                    gap={2}
+                >
+                    <Text fontSize="sm" color="fg.muted">
+                        Provider
+                    </Text>
+
+                    <Flex align="center" gap={2}>
+                        {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>
+                                <Flex direction="column" align="end">
+                                    <Text
+                                        fontSize="sm"
+                                        fontWeight="semibold"
+                                        color="fg"
+                                    >
+                                        {formatProviderName(
+                                            selectedQuote.serviceProvider,
+                                        )}
+                                    </Text>
+                                    {isBestRate && (
+                                        <Text
+                                            fontSize="xs"
+                                            color="green.600"
+                                            fontWeight="medium"
+                                        >
+                                            Best price
+                                        </Text>
+                                    )}
+                                    {selectedQuote.lowKyc && (
+                                        <Text
+                                            fontSize="xs"
+                                            color="blue.600"
+                                            fontWeight="medium"
+                                        >
+                                            Low KYC
+                                        </Text>
+                                    )}
+                                </Flex>
+                            </>
+                        ) : (
+                            <Text fontSize="sm" color="fg.subtle">
+                                Select provider
+                            </Text>
+                        )}
+                        <Icon as={ChevronRight} color="fg.muted" boxSize={5} />
+                    </Flex>
+                </Flex>
+            )}
+
+            {/* Continue Button */}
+            <Button
+                onClick={onContinue}
+                disabled={!selectedQuote || parseFloat(fiatAmount) < 10}
+                width="100%"
+            >
+                Continue
+            </Button>
+        </BodyWrapper>
+    );
+};
+
+export default ChooseAmountStep;

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

@@ -0,0 +1,193 @@
+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, useMeldTransaction } 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();
+
+    // Track payment status via MELD for informational UI only.
+    const { data: transaction } = useMeldTransaction(sessionId);
+    const txStatus = transaction?.status;
+
+    // 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;