@ensofinance/checkout-widget 0.0.1

package/src/components/steps/InitialStep.tsx

@@ -0,0 +1,169 @@
+import { Box, Icon, Skeleton } from "@chakra-ui/react";
+import { X } from "lucide-react";
+import { useContext, useMemo } from "react";
+import { useAccount } from "wagmi";
+import { IconButton, Tooltip } from "../ui";
+import {
+    HeaderWrapperSpaceBetween as InitialStepHeaderWrapper,
+    HeaderTitle,
+    ListWrapper,
+    BodyWrapper,
+    Divider,
+} from "../ui/styled";
+import { useWalletBalance } from "@/enso-api/api";
+import { formatUSD, shortenAddress } from "@/util";
+import Modal from "../modal";
+import { CheckoutContext } from "../Checkout";
+import { WalletCard, OptionCard } from "../cards";
+import { WalletStatus } from "../cards/WalletCard";
+import { useWalletIcon } from "@/util/enso-hooks";
+import RabbyIcon from "../../assets/rabby.png";
+import MetamaskIcon from "../../assets/metamask.png";
+import MastercardIcon from "../../assets/mastercard.png";
+import VisaIcon from "../../assets/visa.png";
+import BinanceIcon from "../../assets/BinanceBadge.svg";
+
+const InitialStep = () => {
+    const { handleClose, setStep, setFlow, enableExchanges } =
+        useContext(CheckoutContext);
+
+    const { total, isLoading } = useWalletBalance();
+    const { address, isConnected } = useAccount();
+
+    const { walletIcon, walletDisplayName } = useWalletIcon();
+
+    const formattedBalance = useMemo(() => {
+        if (isLoading)
+            return (
+                <Skeleton display="inline-block" height="10px" width="60px" />
+            );
+        if (typeof total === "number") {
+            return formatUSD(total);
+        }
+        return total || "$0.00";
+    }, [total, isLoading]);
+
+    const truncatedAddress = useMemo(() => {
+        if (!address) return "";
+        return shortenAddress(address);
+    }, [address]);
+
+    const OPTIONS = useMemo(() => {
+        const options: {
+            id: string;
+            title: string;
+            limit: string;
+            delay: string;
+            icons: string[];
+            flow: string;
+            firstStep: string;
+            disabled?: boolean;
+        }[] = [
+            // {
+            //     id: "1",
+            //     title: "Crypto Transfer",
+            //     limit: address ? "No Limit" : "Connect wallet to proceed",
+            //     delay: address ? "Instant - 2 min" : "",
+            //     icons: [RabbyIcon, MetamaskIcon],
+            //     flow: "mainFlow",
+            //     firstStep: "selectToken",
+            //     disabled: !address,
+            // },
+            // {
+            //     id: "3",
+            //     title: "Deposit with card",
+            //     limit: "$10,000 limit",
+            //     delay: "5 min",
+            //     icons: [MastercardIcon, VisaIcon],
+            //     flow: "",
+            //     firstStep: "",
+            //     disabled: true,
+            // },
+        ];
+
+        if (enableExchanges?.includes?.("binance"))
+            options.unshift({
+                id: "1",
+                title: "Connect Exchange",
+                limit: "No Limit",
+                delay: "2 min",
+                icons: [BinanceIcon],
+                flow: "exchangeFlow",
+                firstStep: "connectExchange",
+            });
+        return options;
+    }, [address, enableExchanges]);
+
+    return (
+        <>
+            <Modal.Header>
+                <InitialStepHeaderWrapper>
+                    <Box display="flex" flexDirection="column" gap={"4px"}>
+                        <HeaderTitle>Deposit</HeaderTitle>
+                    </Box>
+
+                    {handleClose && (
+                        <IconButton onClick={handleClose} width={"40px"}>
+                            <Icon
+                                as={X}
+                                color="fg.muted"
+                                width={"16px"}
+                                height={"16px"}
+                            />
+                        </IconButton>
+                    )}
+                </InitialStepHeaderWrapper>
+            </Modal.Header>
+            <Modal.Body>
+                <BodyWrapper>
+                    {address && (
+                        <ListWrapper>
+                            {
+                                <WalletCard
+                                    key={address}
+                                    icon={walletIcon}
+                                    walletHash={truncatedAddress}
+                                    balance={formattedBalance as string}
+                                    delay="Instant"
+                                    status={WalletStatus.CONNECTED}
+                                    badge={walletDisplayName}
+                                    onClick={() => {
+                                        setFlow("mainFlow");
+                                        setStep("selectToken");
+                                    }}
+                                />
+                            }
+                        </ListWrapper>
+                    )}
+                    {OPTIONS.length > 0 && (
+                        <>
+                            <Divider />
+                            <ListWrapper>
+                                {OPTIONS.map((option) => {
+                                    const optionCard = (
+                                        <OptionCard
+                                            key={option.id}
+                                            title={option.title}
+                                            limit={option.limit}
+                                            delay={option.delay}
+                                            icons={option.icons}
+                                            onClick={() => {
+                                                if (option.disabled) return;
+                                                setFlow(option.flow);
+                                                setStep(option.firstStep);
+                                            }}
+                                        />
+                                    );
+
+                                    return optionCard;
+                                })}
+                            </ListWrapper>
+                        </>
+                    )}
+                </BodyWrapper>
+            </Modal.Body>
+        </>
+    );
+};
+
+export default InitialStep;

package/src/components/steps/QuoteStep.tsx

@@ -0,0 +1,121 @@
+import { useContext } from "react";
+import { Box, Icon, Skeleton, Flex } from "@chakra-ui/react";
+import { ChevronLeft, X } from "lucide-react";
+import { useChainId, useSwitchChain } from "wagmi";
+import Modal from "../modal";
+import { CheckoutContext } from "../Checkout";
+import { Button, IconButton, Input } from "../ui";
+import { HeaderWrapper, HeaderTitle, BodyWrapper } from "../ui/styled";
+import { TransactionDetailRow } from "../TransactionDetailRow";
+import { useAppDetails, useRouteData } from "@/util/enso-hooks";
+import { getChainName } from "@/util/common";
+import QuoteParameters from "../QuoteParameters";
+
+const QuoteStep = () => {
+    const { handleClose, setStep } = useContext(CheckoutContext);
+
+    const { chainIdIn } = useAppDetails();
+
+    const { routeLoading, usdAmountIn, routeData } = useRouteData();
+    const walletChainId = useChainId();
+    const { switchChain } = useSwitchChain();
+
+    const wrongChain = walletChainId !== chainIdIn;
+
+    return (
+        <>
+            <Modal.Header>
+                <HeaderWrapper>
+                    <IconButton
+                        minWidth={"16px"}
+                        minHeight={"16px"}
+                        maxWidth={"16px"}
+                        onClick={() => {
+                            setStep("selectAmount");
+                        }}
+                    >
+                        <Icon
+                            as={ChevronLeft}
+                            color="gray"
+                            width={"16px"}
+                            height={"16px"}
+                        />
+                    </IconButton>
+
+                    <Box display="flex" flexDirection="column" gap={"4px"}>
+                        <HeaderTitle>Deposit</HeaderTitle>
+                    </Box>
+
+                    {handleClose && (
+                        <IconButton
+                            onClick={handleClose}
+                            width={"40px"}
+                            marginLeft={"auto"}
+                        >
+                            <Icon
+                                as={X}
+                                color="gray"
+                                width={"16px"}
+                                height={"16px"}
+                            />
+                        </IconButton>
+                    )}
+                </HeaderWrapper>
+            </Modal.Header>
+
+            <Modal.Body>
+                <BodyWrapper>
+                    <Flex
+                        flexDirection={"column"}
+                        gap={"16px"}
+                        alignItems={"center"}
+                        width={"100%"}
+                    >
+                        <Skeleton
+                            loading={routeLoading}
+                            width={routeLoading ? "156px" : "auto"}
+                        >
+                            <Input
+                                readOnly
+                                marginY={"8px"}
+                                variant={"text"}
+                                placeholder={"$10.00"}
+                                value={usdAmountIn}
+                            />
+                        </Skeleton>
+
+                        <QuoteParameters />
+                    </Flex>
+
+                    <TransactionDetailRow />
+
+                    {wrongChain ? (
+                        <Button
+                            onClick={() => {
+                                switchChain({ chainId: chainIdIn });
+                            }}
+                        >
+                            Switch to {getChainName(chainIdIn)}
+                        </Button>
+                    ) : (
+                        <Button
+                            disabled={!!(routeData as any)?.error}
+                            visual={routeLoading ? "lightGray" : "solid"}
+                            onClick={
+                                !routeLoading
+                                    ? () => {
+                                          setStep("confirmTransfer");
+                                      }
+                                    : () => {}
+                            }
+                        >
+                            {routeLoading ? "Loading quote" : "Continue"}
+                        </Button>
+                    )}
+                </BodyWrapper>
+            </Modal.Body>
+        </>
+    );
+};
+
+export default QuoteStep;

package/src/components/steps/WalletAmountStep.tsx

@@ -0,0 +1,258 @@
+import { Box, Icon, Text } from "@chakra-ui/react";
+import { HeaderWrapper, HeaderTitle, BodyWrapper } from "../ui/styled";
+import { ChevronLeft, X, ArrowDownUpIcon } from "lucide-react";
+import { useContext, useState, useEffect, useMemo } from "react";
+import { Address } from "viem";
+import Modal from "../modal";
+import { CheckoutContext } from "../Checkout";
+import { Button, IconButton, Tab, Input } from "../ui";
+import CurrencySwapDisplay from "../CurrencySwapDisplay";
+import { useEnsoPrice, useEnsoToken } from "@/enso-api/api";
+import { useAppStore } from "@/store";
+import { normalizeValue, denormalizeValue, formatNumber } from "@/util";
+import { useTokenBalance } from "@/util/wallet";
+
+type InputMode = "usd" | "token";
+
+const percentageOptions = [
+    { label: "25%", value: 25 },
+    { label: "50%", value: 50 },
+    { label: "75%", value: 75 },
+    { label: "Max", value: 100 },
+];
+
+const WalletAmountStep = ({ nextStep }: { nextStep?: string }) => {
+    const { handleClose, setStep } = useContext(CheckoutContext);
+    const [usdValue, setUsdValue] = useState<string>("10.10");
+    // const [tokenAmount, setTokenAmount] = useState<string>("");
+    const [inputMode, setInputMode] = useState<InputMode>("usd");
+
+    const tokenIn = useAppStore((state) => state.tokenIn);
+    const tokenOut = useAppStore((state) => state.tokenOut);
+    const chainIdOut = useAppStore((state) => state.chainIdOut);
+    const chainIdIn = useAppStore((state) => state.chainIdIn);
+    const setAmountIn = useAppStore((state) => state.setAmountIn);
+    const amountIn = useAppStore((state) => state.amountIn);
+    const [initialLoad, setInitialLoad] = useState(true);
+
+    const {
+        data: [tokenDetails],
+    } = useEnsoToken(tokenIn, chainIdIn);
+    const {
+        data: [tokenOutDetails],
+    } = useEnsoToken(tokenOut, chainIdOut);
+    const { data: priceData } = useEnsoPrice(chainIdIn, tokenIn);
+
+    const tokenValue = useMemo(() => {
+        return normalizeValue(amountIn, tokenDetails?.decimals);
+    }, [amountIn, tokenDetails?.decimals]);
+
+    const balanceIn = useTokenBalance(tokenIn as Address, chainIdIn);
+
+    // Handle percentage selection
+    const handlePercentageSelect = (percent: number) => {
+        if (!balanceIn || !priceData || !tokenDetails?.decimals) {
+            setUsdValue("0.00");
+            return;
+        }
+
+        const amountToSet = (
+            (BigInt(balanceIn) * BigInt(percent)) /
+            BigInt(100)
+        ).toString();
+
+        setAmountIn(amountToSet);
+        setUsdValue(
+            (
+                +normalizeValue(amountToSet, tokenDetails?.decimals) * priceData
+            ).toFixed(2),
+        );
+    };
+
+    useEffect(() => {
+        if (initialLoad && priceData && tokenDetails && +balanceIn > 0) {
+            setInitialLoad(false);
+            handlePercentageSelect(100);
+        }
+    }, [balanceIn, initialLoad, priceData, tokenDetails, balanceIn]);
+
+    // Handle input change based on current mode
+    const handleInputChange = (value: string) => {
+        if (inputMode === "usd") {
+            const cleanUsd = value.replace("$", "");
+            // Clean the input from usd sign
+            setUsdValue(cleanUsd);
+            setAmountIn(
+                denormalizeValue(
+                    (parseFloat(cleanUsd) * priceData).toString(),
+                    tokenDetails?.decimals,
+                ),
+            );
+        } else {
+            setAmountIn(denormalizeValue(value, tokenDetails?.decimals));
+            setUsdValue((parseFloat(value) * priceData).toFixed(2));
+        }
+    };
+
+    // Toggle between USD and token input modes
+    const handleToggleMode = () => {
+        setInputMode(inputMode === "usd" ? "token" : "usd");
+    };
+
+    // Get input placeholder and display value
+    const getInputDisplay = () => {
+        if (inputMode === "usd") {
+            return {
+                placeholder: "$10.00",
+                displayValue: usdValue ? `$${usdValue}` : "",
+                equivalentValue: tokenValue
+                    ? `${formatNumber(tokenValue)} ${tokenDetails?.symbol}`
+                    : "—",
+            };
+        } else {
+            return {
+                placeholder: "0.00",
+                displayValue: tokenValue,
+                equivalentValue: usdValue ? `$${usdValue}` : "—",
+            };
+        }
+    };
+
+    const { placeholder, displayValue, equivalentValue } = getInputDisplay();
+    const notEnoughBalance = +balanceIn < +amountIn;
+
+    return (
+        <>
+            <Modal.Header>
+                <HeaderWrapper>
+                    <IconButton
+                        minWidth={"16px"}
+                        minHeight={"16px"}
+                        maxWidth={"16px"}
+                        onClick={() => setStep("selectToken")}
+                    >
+                        <Icon
+                            as={ChevronLeft}
+                            color="gray"
+                            width={"16px"}
+                            height={"16px"}
+                        />
+                    </IconButton>
+
+                    <Box display="flex" flexDirection="column" gap={"4px"}>
+                        <HeaderTitle>Deposit</HeaderTitle>
+                    </Box>
+
+                    {handleClose && (
+                        <IconButton
+                            onClick={handleClose}
+                            width={"40px"}
+                            marginLeft={"auto"}
+                        >
+                            <Icon
+                                as={X}
+                                color="gray"
+                                width={"16px"}
+                                height={"16px"}
+                            />
+                        </IconButton>
+                    )}
+                </HeaderWrapper>
+            </Modal.Header>
+
+            <Modal.Body>
+                <BodyWrapper>
+                    <Box display={"flex"} flexDirection={"column"} gap={"8px"}>
+                        <Box
+                            display={"flex"}
+                            flexDirection={"column"}
+                            gap={"8px"}
+                            alignItems={"center"}
+                            padding={"25.5px"}
+                        >
+                            {/* Main Input */}
+                            <Input
+                                inputMode="decimal"
+                                marginY={"8px"}
+                                variant={"text"}
+                                placeholder={placeholder}
+                                value={displayValue}
+                                onChange={(e) =>
+                                    handleInputChange(e.target.value)
+                                }
+                            />
+
+                            {/* Toggle Button and Equivalent Display */}
+                            <Box
+                                display={"flex"}
+                                gap={"3"}
+                                alignItems={"center"}
+                                onClick={handleToggleMode}
+                                _hover={{ background: "bg.subtle" }}
+                                cursor={"pointer"}
+                                borderRadius={"lg"}
+                                px={"3"}
+                            >
+                                <IconButton
+                                    minWidth={"24px"}
+                                    minHeight={"24px"}
+                                    maxWidth={"24px"}
+                                    background={"transparent"}
+                                >
+                                    <Icon
+                                        as={ArrowDownUpIcon}
+                                        color="gray"
+                                        width={"16px"}
+                                        height={"16px"}
+                                    />
+                                </IconButton>
+
+                                {/* Small equivalent value display */}
+                                <Text fontSize="sm" color="fg.muted">
+                                    {equivalentValue}
+                                </Text>
+                            </Box>
+                        </Box>
+                        <Box
+                            display={"flex"}
+                            gap={"4px"}
+                            justifyContent={"center"}
+                            paddingBottom={"35px"}
+                        >
+                            {percentageOptions.map((option) => (
+                                <Tab
+                                    key={option.label}
+                                    onClick={() =>
+                                        handlePercentageSelect(option.value)
+                                    }
+                                >
+                                    {option.label}
+                                </Tab>
+                            ))}
+                        </Box>
+                    </Box>
+
+                    <CurrencySwapDisplay
+                        tokenOut={tokenOutDetails}
+                        tokenIn={tokenDetails}
+                        chainIdIn={chainIdIn}
+                        chainIdOut={chainIdOut}
+                    />
+
+                    <Button
+                        onClick={() =>
+                            notEnoughBalance
+                                ? undefined
+                                : setStep(nextStep ?? "quote")
+                        }
+                        disabled={notEnoughBalance}
+                    >
+                        Continue
+                    </Button>
+                </BodyWrapper>
+            </Modal.Body>
+        </>
+    );
+};
+
+export default WalletAmountStep;