@ensofinance/checkout-widget 0.0.12 → 0.0.13

package/src/components/steps/WalletAmountStep.tsx

@@ -1,267 +0,0 @@
-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,
-    formatUSD,
-} 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
-            console.log(cleanUsd, priceData, tokenDetails?.decimals);
-            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 = () => {
-        const formattedValue = formatNumber(tokenValue);
-        const safeUsdValue = parseFloat(usdValue) > 0 ? usdValue : 0;
-
-        if (inputMode === "usd") {
-            return {
-                placeholder: "$10.00",
-                displayValue: safeUsdValue ? `$${safeUsdValue}` : "",
-                equivalentValue: tokenValue
-                    ? `${formattedValue} ${tokenDetails?.symbol}`
-                    : "—",
-            };
-        }
-
-        return {
-            placeholder: "0.00",
-            displayValue: formattedValue,
-            equivalentValue: formatUSD(safeUsdValue),
-        };
-    };
-
-    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;

package/src/components/steps/WalletTokenStep.tsx

@@ -1,128 +0,0 @@
-import { Box, Icon, Skeleton } from "@chakra-ui/react";
-import {
-    HeaderWrapper,
-    HeaderTitle,
-    HeaderDescription,
-    ListWrapper,
-    BodyWrapper,
-} from "../ui/styled";
-import { ChevronLeft, X } from "lucide-react";
-import { useContext, useEffect } from "react";
-import Modal from "../modal";
-import { CheckoutContext } from "../Checkout";
-import { Button, IconButton } from "../ui";
-import { AssetCard } from "../cards";
-import { useAppStore } from "@/store";
-import { useWalletBalance } from "@/enso-api/api";
-import { formatNumber, formatUSD, normalizeValue } from "@/util";
-
-const SelectTokenStep = () => {
-    const { handleClose, setFlow, setStep } = useContext(CheckoutContext);
-    const setIsCheckout = useAppStore((state) => state.setIsCheckout);
-    const setTokenIn = useAppStore((state) => state.setTokenIn);
-    const tokenIn = useAppStore((state) => state.tokenIn);
-    const setChainIdIn = useAppStore((state) => state.setChainIdIn);
-    const chainIdIn = useAppStore((state) => state.chainIdIn);
-    const { holdingsList, total, isLoading } = useWalletBalance();
-
-    useEffect(() => {
-        setIsCheckout(false);
-    }, []);
-
-    return (
-        <>
-            <Modal.Header>
-                <HeaderWrapper>
-                    <IconButton
-                        minWidth={"16px"}
-                        minHeight={"16px"}
-                        maxWidth={"16px"}
-                        onClick={() => {
-                            setFlow("");
-                            setStep("");
-                        }}
-                    >
-                        <Icon
-                            as={ChevronLeft}
-                            color="gray"
-                            width={"16px"}
-                            height={"16px"}
-                        />
-                    </IconButton>
-                    <Box display="flex" flexDirection="column" gap={"4px"}>
-                        <HeaderTitle>Deposit</HeaderTitle>
-                        <HeaderDescription>
-                            Balance: {formatUSD(total)}
-                        </HeaderDescription>
-                    </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 overflowY={"scroll"} maxH={"400px"}>
-                        <ListWrapper>
-                            {isLoading
-                                ? Array.from({ length: 10 }).map((_, index) => (
-                                      <Skeleton
-                                          key={index}
-                                          height="40px"
-                                          width="300px"
-                                      />
-                                  ))
-                                : holdingsList?.map((asset) => (
-                                      <AssetCard
-                                          key={`${asset.token}-${asset.chainId}`}
-                                          chainId={asset.chainId}
-                                          icon={asset.logoUri}
-                                          title={asset.name}
-                                          balance={`${formatNumber(
-                                              normalizeValue(
-                                                  asset.amount,
-                                                  asset.decimals,
-                                              ),
-                                          )} ${asset.symbol}`}
-                                          usdBalance={formatUSD(asset.total)}
-                                          tag={""}
-                                          loading={false}
-                                          selected={
-                                              asset.token === tokenIn &&
-                                              asset.chainId === chainIdIn
-                                          }
-                                          onClick={() => {
-                                              setTokenIn(asset.token);
-                                              setChainIdIn(asset.chainId);
-                                          }}
-                                      />
-                                  ))}
-                        </ListWrapper>
-                    </Box>
-                    <Button
-                        onClick={() => {
-                            setStep("selectAmount");
-                        }}
-                        disabled={!tokenIn}
-                    >
-                        Continue
-                    </Button>
-                </BodyWrapper>
-            </Modal.Body>
-        </>
-    );
-};
-
-export default SelectTokenStep;