@ensofinance/checkout-widget 0.0.1

package/src/components/Checkout.tsx

@@ -0,0 +1,127 @@
+import {
+    createContext,
+    ReactElement,
+    useEffect,
+    useMemo,
+    useState,
+    ComponentType,
+} from "react";
+import { Box } from "@chakra-ui/react";
+import InitialStep from "./steps/InitialStep";
+import SelectTokenStep from "./steps/WalletTokenStep";
+import SelectAmountStep from "./steps/WalletAmountStep";
+import QuoteStep from "./steps/QuoteStep";
+import WalletConfirmStep from "./steps/WalletConfirmStep";
+import ExchangeFlow from "./steps/ExchangeFlow";
+import { useAppStore } from "@/store";
+import { TxTracker } from "@/util/tx-tracker";
+import ChakraProvider from "./ChakraProvider";
+import { CheckoutConfig, SupportedExchanges } from "@/types";
+
+type ICheckoutContext = {
+    step: string;
+    setStep: (step: string) => void;
+
+    flow: string;
+    setFlow: (flow: string) => void;
+
+    handleClose: () => void;
+
+    enableExchanges?: SupportedExchanges[];
+};
+
+const FLOWS: Record<
+    string,
+    {
+        steps: Record<string, ReactElement>;
+    }
+> = {
+    mainFlow: {
+        steps: {
+            selectToken: <SelectTokenStep />,
+            selectAmount: <SelectAmountStep />,
+            quote: <QuoteStep />,
+            confirmTransfer: <WalletConfirmStep />,
+        },
+    },
+    exchangeFlow: {
+        steps: {
+            connectExchange: <ExchangeFlow />,
+        },
+    },
+};
+
+export const CheckoutContext = createContext<ICheckoutContext>(
+    {} as ICheckoutContext,
+);
+
+export const Checkout = ({
+    config: { apiKey, tokenOut, chainIdOut, theme, enableExchange },
+    onClose,
+    wrapper,
+}: {
+    config: CheckoutConfig;
+    wrapper?: ComponentType;
+    onClose?: () => void;
+}) => {
+    const [step, setStep] = useState("");
+    const [flow, setFlow] = useState("");
+
+    const setEnsoApiToken = useAppStore((state) => state.setEnsoApiToken);
+    const setTokenOut = useAppStore((state) => state.setTokenOut);
+    const setChainIdOut = useAppStore((state) => state.setChainIdOut);
+
+    const handleClose = useMemo(
+        () =>
+            onClose
+                ? () => {
+                      if (onClose) {
+                          onClose();
+                      }
+                      setStep("");
+                      setFlow("");
+                  }
+                : undefined,
+        [onClose],
+    );
+
+    useEffect(() => {
+        setTokenOut(tokenOut);
+        setChainIdOut(chainIdOut);
+    }, [tokenOut, chainIdOut]);
+
+    useEffect(() => {
+        setEnsoApiToken(apiKey);
+    }, [apiKey]);
+
+    const WrapperComponent = useMemo(
+        () =>
+            wrapper ??
+            (({ children, ...args }) => (
+                <Box p={4} w="374px" {...args}>
+                    {children}
+                </Box>
+            )),
+        [wrapper],
+    );
+
+    return (
+        <CheckoutContext.Provider
+            value={{
+                step,
+                setStep,
+                flow,
+                setFlow,
+                handleClose,
+                enableExchanges: enableExchange,
+            }}
+        >
+            <ChakraProvider themeConfig={theme}>
+                <WrapperComponent>
+                    <TxTracker />
+                    {!flow && !step ? <InitialStep /> : FLOWS[flow].steps[step]}
+                </WrapperComponent>
+            </ChakraProvider>
+        </CheckoutContext.Provider>
+    );
+};

package/src/components/CheckoutModal.tsx

@@ -0,0 +1,22 @@
+import { useCallback } from "react";
+import { Checkout } from "./Checkout";
+import Modal from "./modal";
+import { CheckoutModalProps } from "@/types";
+
+export const CheckoutModal = ({
+    config,
+    setIsActive,
+    isActive,
+    onClose,
+}: CheckoutModalProps) => {
+    const handleClose = useCallback(() => {
+        setIsActive(false);
+        onClose?.();
+    }, [setIsActive, onClose]);
+
+    if (!isActive) {
+        return null;
+    }
+
+    return <Checkout wrapper={Modal} config={config} onClose={handleClose} />;
+};

package/src/components/CircleTimer.tsx

@@ -0,0 +1,66 @@
+import { Text, Center, chakra } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+
+export const TimerWrapper = chakra("div", {
+    base: {
+        w: "58px",
+        h: "58px",
+        borderRadius: "full",
+        border: "1px solid",
+        borderColor: "border",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});
+
+interface CircleTimerProps {
+    onFinish?: () => void;
+    start?: boolean;
+    duration?: number;
+}
+
+export const CircleTimer = ({ onFinish, start, duration = 60 }: CircleTimerProps) => {
+    const [secondsLeft, setSecondsLeft] = useState(duration);
+
+    useEffect(() => {
+        setSecondsLeft(duration);
+    }, [duration]);
+
+    useEffect(() => {
+        if (!start) {
+            return;
+        }
+
+        const interval = setInterval(() => {
+            setSecondsLeft((prev) => {
+                if (prev <= 1) {
+                    clearInterval(interval);
+                    onFinish?.();
+                    return 0;
+                }
+                return prev - 1;
+            });
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, [start, onFinish]);
+
+    const formatTime = (secs: number) => {
+        const mins = Math.floor(secs / 60)
+            .toString()
+            .padStart(2, "0");
+        const secsStr = (secs % 60).toString().padStart(2, "0");
+        return `${mins}:${secsStr}`;
+    };
+
+    return (
+        <Center>
+            <TimerWrapper>
+                <Text fontSize="xs" color="fg.muted" fontWeight="medium">
+                    {formatTime(secondsLeft)}
+                </Text>
+            </TimerWrapper>
+        </Center>
+    );
+};

package/src/components/CurrencySwapDisplay.tsx

@@ -0,0 +1,153 @@
+import { Box, chakra, Flex, Text } from "@chakra-ui/react";
+import { ChevronRightIcon } from "lucide-react";
+import { Token } from "@/util/common";
+import {
+    MOCK_IMAGE_URL,
+    SupportedChainId,
+    STARGATE_CHAIN_NAMES,
+} from "@/util/constants";
+
+const GECKO_HOSTNAME = "coingecko";
+
+export const SwapWrapper = chakra("div", {
+    base: {
+        display: "flex",
+        gap: "8px",
+        alignItems: "center",
+        justifyContent: "center",
+        p: "8px 12px",
+        borderRadius: "114px",
+        bg: "bg.subtle",
+        w: "fit-content",
+    },
+});
+
+// uplift default image quality
+const transformGeckoUrl = (originalUrl: string): string =>
+    originalUrl.includes(GECKO_HOSTNAME)
+        ? originalUrl.replace("/thumb/", "/large/")
+        : originalUrl;
+
+export const TokenIcon = ({
+    token,
+    chainId,
+    size = 32,
+}: {
+    token: Token;
+    chainId?: SupportedChainId;
+    size?: number;
+}) => (
+    <Box
+        position="relative"
+        borderRadius={"50%"}
+        minW={`${size}px`}
+        minH={`${size}px`}
+    >
+        <Box
+            borderRadius={"50%"}
+            overflow={"hidden"}
+            width={`${size}px`}
+            height={`${size}px`}
+        >
+            <img
+                src={
+                    token?.logoURI
+                        ? transformGeckoUrl(token?.logoURI)
+                        : MOCK_IMAGE_URL
+                }
+                title={token?.symbol}
+                alt={token?.symbol}
+                width={`${size}px`}
+                height={`${size}px`}
+            />
+        </Box>
+        {chainId && (
+            <Box
+                position="absolute"
+                bottom="0"
+                right={"-2px"}
+                width={`${size / 2}px`}
+                height={`${size / 2}px`}
+                borderRadius="50%"
+                overflow="hidden"
+                border="1px solid white"
+                zIndex="1"
+            >
+                <img
+                    src={`https://icons-ckg.pages.dev/stargate-light/networks/${STARGATE_CHAIN_NAMES[chainId]}.svg`}
+                    alt={`Chain ${chainId}`}
+                    width="100%"
+                    height="100%"
+                />
+            </Box>
+        )}
+    </Box>
+);
+
+const SwapItem = ({
+    token,
+    chainId,
+    size = 32,
+    title,
+    subTitle,
+}: {
+    token: Token;
+    chainId?: SupportedChainId;
+    size?: number;
+    title: string;
+    subTitle: string;
+}) => {
+    return (
+        <Flex align="center" gap={2}>
+            <TokenIcon token={token} chainId={chainId} size={size} />
+            <Box>
+                <Text fontWeight="medium" fontSize="xs" color="fg.muted">
+                    {title}
+                </Text>
+                <Text fontSize="xs" color="fg">
+                    {subTitle}
+                </Text>
+            </Box>
+        </Flex>
+    );
+};
+
+const CurrencySwapDisplay = ({
+    tokenIn,
+    tokenOut,
+    chainIdIn,
+    chainIdOut,
+    size = 24,
+}: {
+    tokenIn: Token;
+    tokenOut: Token;
+    chainIdIn: number;
+    chainIdOut: number;
+    size?: number;
+}) => {
+    return (
+        <SwapWrapper>
+            <SwapItem
+                token={tokenIn}
+                chainId={chainIdIn}
+                title={"You send"}
+                subTitle={tokenIn?.symbol}
+                size={size}
+            />
+            <ChevronRightIcon
+                color={"#707070"}
+                width={"16px"}
+                height={"16px"}
+            />
+            <SwapItem
+                token={tokenOut}
+                chainId={chainIdOut}
+                title={"You receive"}
+                subTitle={tokenOut?.symbol}
+                size={size}
+            />
+        </SwapWrapper>
+    );
+};
+
+export default CurrencySwapDisplay;

package/src/components/DepositProcessing.tsx

@@ -0,0 +1,116 @@
+import { Box, Icon, Text, chakra, Image } from "@chakra-ui/react";
+import { X } from "lucide-react";
+// @ts-ignore
+import DepositIcon from "../assets/depositIcon.svg";
+
+// Styled components for icons
+const MainIcon = chakra(Image, {
+    base: {
+        boxSize: "36px",
+        borderRadius: "full",
+        objectFit: "contain",
+    },
+});
+
+const SubIcon = chakra(Image, {
+    base: {
+        boxSize: "16px",
+        position: "absolute",
+        bottom: "-2px",
+        right: "-2px",
+        borderRadius: "full",
+        border: "1px solid",
+        borderColor: "bg",
+        objectFit: "contain",
+    },
+});
+
+interface DepositProcessingProps {
+    onClose?: () => void;
+    currencyIcon: string;
+}
+
+const DepositProcessing = ({
+    onClose,
+    currencyIcon,
+}: DepositProcessingProps) => {
+    const getCurrentTime = () => {
+        const now = new Date();
+        const month = now.toLocaleString("en-US", { month: "short" });
+        const time = now.toLocaleTimeString("en-US", {
+            hour12: false,
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+        });
+        return `${month} - ${time}`;
+    };
+
+    return (
+        <Box
+            border="1px solid"
+            borderColor="border.subtle"
+            borderRadius="12px"
+            width="100%"
+            bg="bg"
+        >
+            {/* Header with icon and text */}
+            <Box
+                display="flex"
+                alignItems="center"
+                gap="12px"
+                borderBottom="1px solid"
+                borderColor="border.subtle"
+                padding="10px 16px"
+            >
+                <Box position="relative">
+                    <MainIcon src={currencyIcon} alt="Currency icon" />
+                    <SubIcon src={DepositIcon} alt="deposit icon" />
+                </Box>
+
+                <Box flex="1">
+                    <Text
+                        fontSize="lg"
+                        fontWeight="semibold"
+                        color="fg"
+                        marginBottom="4px"
+                    >
+                        Deposit processing
+                    </Text>
+                    <Text fontSize="sm" color="fg.muted" lineHeight="1.4">
+                        Your deposit will be added to your account soon.
+                    </Text>
+                </Box>
+
+                {onClose && (
+                    <Icon
+                        as={X}
+                        width="16px"
+                        height="16px"
+                        color="fg.subtle"
+                        cursor="pointer"
+                        _hover={{ color: "fg.muted" }}
+                        onClick={onClose}
+                    />
+                )}
+            </Box>
+
+            {/* Order started time */}
+            <Box
+                display="flex"
+                justifyContent="space-between"
+                alignItems="center"
+                padding="10px 16px"
+            >
+                <Text fontSize="sm" color="fg.muted">
+                    Order started
+                </Text>
+                <Text fontSize="sm" color="fg" fontWeight="medium">
+                    {getCurrentTime()}
+                </Text>
+            </Box>
+        </Box>
+    );
+};
+
+export default DepositProcessing;

package/src/components/ExchangeConfirmSecurity.tsx

@@ -0,0 +1,110 @@
+import { Box, chakra, Icon, Image } from "@chakra-ui/react";
+import { Handshake, Lock, ShieldCheck } from "lucide-react";
+
+import { Button, Helper } from "./ui";
+import LogoSvg from "../assets/logo.svg";
+import { BodyWrapper } from "./ui/styled";
+
+export const HeaderTitle = chakra("h2", {
+    base: {
+        fontWeight: "600",
+        fontSize: "16px",
+        lineHeight: "100%",
+        letterSpacing: "-0.4px",
+        color: "fg",
+    },
+});
+
+const SecurityFeature = ({
+    icon,
+    title,
+    description,
+}: {
+    icon: any;
+    title: string;
+    description: string;
+}) => (
+    <Box
+        display="flex"
+        flexDirection="row"
+        gap="16px"
+        width="100%"
+        alignItems="flex-start"
+    >
+        <Icon
+            as={icon}
+            color="fg.muted"
+            width="20px"
+            height="20px"
+            marginTop="2px"
+        />
+        <Box display="flex" flexDirection="column" gap="4px" flex="1">
+            <Box fontWeight="600" fontSize="14px" lineHeight="120%" color="fg">
+                {title}
+            </Box>
+            <Box
+                fontWeight="400"
+                fontSize="12px"
+                lineHeight="140%"
+                color="fg.subtle"
+            >
+                {description}
+            </Box>
+        </Box>
+    </Box>
+);
+
+const ConfirmExchangeStep = ({ onConfirm }: { onConfirm: () => void }) => {
+    return (
+        <BodyWrapper>
+            <Box display="flex" justifyContent="center" width="100%">
+                <Box
+                    height="48px"
+                    width="48px"
+                    backgroundColor="gray.200"
+                    borderRadius="90%"
+                />
+            </Box>
+
+            <Box
+                fontWeight="600"
+                fontSize="16px"
+                lineHeight="140%"
+                color="fg"
+                textAlign="center"
+            >
+                Enso Checkout uses a 3rd party to connect your Binance account.
+            </Box>
+
+            <Box display="flex" flexDirection="column" gap="12px" width="100%">
+                <SecurityFeature
+                    icon={Handshake}
+                    title="Your sign-in credentials are never stored"
+                    description="All data is encrypted between enso and Binance"
+                />
+
+                <SecurityFeature
+                    icon={ShieldCheck}
+                    title="2fa always required"
+                    description="Transfers cannot be made without your approval."
+                />
+
+                <SecurityFeature
+                    icon={Lock}
+                    title="Assets never touch 3rd parties"
+                    description="Your funds are transferred directly to your wallet."
+                />
+
+                <Helper>
+                    <Image src={LogoSvg} color={"gray"} w={"24px"}/>
+                    Enso securely encrypts all user data.
+                </Helper>
+            </Box>
+
+            <Button onClick={onConfirm}>Continue to 3rd Party</Button>
+        </BodyWrapper>
+    );
+};
+
+export { ConfirmExchangeStep };
+export default ConfirmExchangeStep;