@ensofinance/checkout-widget 0.1.2 → 0.1.3

package/src/components/steps/WalletFlow/WalletAmountStep.tsx

@@ -1,34 +1,21 @@
-import { Box, Icon, Text } from "@chakra-ui/react";
 import { BodyWrapper } from "@/components/ui/styled";
-import { ArrowDownUpIcon } from "lucide-react";
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Address } from "viem";
 import { useAppStore } from "@/store";
-import { Button, IconButton, Tab, Input } from "@/components/ui";
+import { Button } from "@/components/ui";
+import { AmountInput, AmountInputValue } from "@/components/AmountInput";
 import CurrencySwapDisplay from "@/components/CurrencySwapDisplay";
 import { useEnsoPrice } from "@/enso-api/api";
-import {
-    normalizeValue,
-    denormalizeValue,
-    formatNumber,
-    formatUSD,
-} from "@/util";
+import { normalizeValue, denormalizeValue } from "@/util";
+import { precisionizeNumber } from "@/util/common";
 import { useTokenBalance } from "@/util/wallet";
 import { useAppDetails } from "@/util/enso-hooks";
-
-type InputMode = "usd" | "token";
-
-const percentageOptions = [
-    { label: "25%", value: 25 },
-    { label: "50%", value: 50 },
-    { label: "75%", value: 75 },
-    { label: "Max", value: 100 },
-];
-
 const WalletAmountStep = ({ setStep }: { setStep: (step: string) => void }) => {
-    const [usdValue, setUsdValue] = useState<string>("10.10");
-    // const [tokenAmount, setTokenAmount] = useState<string>("");
-    const [inputMode, setInputMode] = useState<InputMode>("usd");
+    const [amountInput, setAmountInput] = useState<AmountInputValue>({
+        tokenAmount: "",
+        usdAmount: "10.10",
+        mode: "usd",
+    });
 
     const setAmountIn = useAppStore((state) => state.setAmountIn);
     const amountIn = useAppStore((state) => state.amountIn);
@@ -43,157 +30,90 @@ const WalletAmountStep = ({ setStep }: { setStep: (step: string) => void }) => {
     } = useAppDetails();
 
     const { data: priceData } = useEnsoPrice(chainIdIn, tokenIn);
+    const tokenInputPrecision = tokenInData?.decimals
+        ? Math.min(tokenInData.decimals, 6)
+        : 6;
 
-    const tokenValue = useMemo(() => {
-        return normalizeValue(amountIn, tokenInData?.decimals);
-    }, [amountIn, tokenInData?.decimals]);
+    const tokenAmount = amountInput.tokenAmount;
 
     const balanceIn = useTokenBalance(tokenIn as Address, chainIdIn);
 
-    // Handle percentage selection
-    const handlePercentageSelect = (percent: number) => {
-        if (!balanceIn || !priceData || !tokenInData?.decimals) {
-            setUsdValue("0.00");
-            return;
-        }
+    const getPercentAmounts = useCallback(
+        (percent: number) => {
+            if (!balanceIn || !priceData || !tokenInData?.decimals) {
+                return null;
+            }
 
-        const amountToSet = (
-            (BigInt(balanceIn) * BigInt(percent)) /
-            BigInt(100)
-        ).toString();
+            const amountToSet = (
+                (BigInt(balanceIn) * BigInt(percent)) /
+                BigInt(100)
+            ).toString();
 
-        setAmountIn(amountToSet);
-        setUsdValue(
-            (
-                +normalizeValue(amountToSet, tokenInData?.decimals) * priceData
-            ).toFixed(2),
-        );
-    };
+            const normalizedTokenAmount = normalizeValue(
+                amountToSet,
+                tokenInData.decimals,
+            );
+            const roundedTokenAmount = precisionizeNumber(
+                normalizedTokenAmount,
+                tokenInputPrecision,
+            );
+
+            return {
+                tokenAmount: roundedTokenAmount,
+                usdAmount: (
+                    +parseFloat(roundedTokenAmount || "0") * priceData
+                ).toFixed(2),
+            };
+        },
+        [balanceIn, priceData, tokenInData?.decimals, tokenInputPrecision],
+    );
 
     useEffect(() => {
         if (initialLoad && priceData && tokenInData && +balanceIn > 0) {
             setInitialLoad(false);
-            handlePercentageSelect(100);
-        }
-    }, [balanceIn, initialLoad, priceData, tokenInData, 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, tokenInData?.decimals);
-            setUsdValue(cleanUsd);
-            setAmountIn(
-                denormalizeValue(
-                    (parseFloat(cleanUsd) / priceData).toString(),
-                    tokenInData?.decimals,
-                ),
-            );
-        } else {
-            setAmountIn(denormalizeValue(value, tokenInData?.decimals));
-            setUsdValue((parseFloat(value) * priceData).toFixed(2));
+            const percentAmounts = getPercentAmounts(100);
+            if (!percentAmounts) return;
+
+            setAmountInput((prev) => ({
+                ...prev,
+                ...percentAmounts,
+            }));
         }
-    };
+    }, [balanceIn, initialLoad, priceData, tokenInData, getPercentAmounts]);
 
-    // Toggle between USD and token input modes
-    const handleToggleMode = () => {
-        setInputMode(inputMode === "usd" ? "token" : "usd");
-    };
+    useEffect(() => {
+        if (!tokenInData?.decimals) return;
 
-    // Get input placeholder and display value
-    const getInputDisplay = () => {
-        const formattedValue = formatNumber(tokenValue);
-        const safeUsdValue = parseFloat(usdValue) > 0 ? usdValue : 0;
+        const normalizedAmount = tokenAmount.endsWith(".")
+            ? tokenAmount.slice(0, -1)
+            : tokenAmount;
 
-        if (inputMode === "usd") {
-            return {
-                placeholder: "$10.00",
-                displayValue: safeUsdValue ? `$${safeUsdValue}` : "",
-                equivalentValue: tokenValue
-                    ? `${formattedValue} ${tokenInData?.symbol}`
-                    : "—",
-            };
+        if (!normalizedAmount || normalizedAmount === ".") {
+            setAmountIn("0");
+            return;
         }
 
-        return {
-            placeholder: "0.00",
-            displayValue: formattedValue,
-            equivalentValue: formatUSD(safeUsdValue),
-        };
-    };
+        try {
+            setAmountIn(denormalizeValue(normalizedAmount, tokenInData.decimals));
+        } catch (error) {
+            setAmountIn("0");
+        }
+    }, [tokenAmount, tokenInData?.decimals, setAmountIn]);
 
-    const { placeholder, displayValue, equivalentValue } = getInputDisplay();
-    const notEnoughBalance = +balanceIn < +amountIn;
+    const hasTokenAmount = !!tokenAmount && tokenAmount !== ".";
+    const notEnoughBalance = hasTokenAmount ? +balanceIn < +amountIn : false;
+    const isAmountInvalid = !hasTokenAmount || notEnoughBalance;
 
     return (
         <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>
+            <AmountInput
+                value={amountInput}
+                onChange={setAmountInput}
+                tokenSymbol={tokenInData?.symbol}
+                tokenPriceUsd={priceData}
+                roundingPrecision={tokenInputPrecision}
+                onPercentSelect={getPercentAmounts}
+            />
 
             <CurrencySwapDisplay
                 tokenOut={effectiveTokenOutData}
@@ -205,7 +125,7 @@ const WalletAmountStep = ({ setStep }: { setStep: (step: string) => void }) => {
 
             <Button
                 onClick={() => setStep("quote")}
-                disabled={notEnoughBalance}
+                disabled={isAmountInvalid}
             >
                 Continue
             </Button>

package/src/util/common.tsx

@@ -350,3 +350,26 @@ export const getChainEtherscanUrl = ({
 
 export const precisionizeNumber = (value: number | string, precision: number) =>
     Number(parseFloat(value.toString()).toFixed(precision)).toString();
+
+export const sanitizeDecimalInput = (value: string, maxDecimals?: number) => {
+    const cleaned = value.replace(/[^\d.]/g, "");
+    if (!cleaned) return "";
+
+    const hasTrailingDot = cleaned.endsWith(".");
+    const [integerPart, ...rest] = cleaned.split(".");
+    let fractionPart = rest.join("");
+
+    if (maxDecimals !== undefined) {
+        fractionPart = fractionPart.slice(0, maxDecimals);
+    }
+
+    if (hasTrailingDot && fractionPart.length === 0) {
+        return integerPart ? `${integerPart}.` : ".";
+    }
+
+    if (fractionPart.length > 0) {
+        return integerPart ? `${integerPart}.${fractionPart}` : `.${fractionPart}`;
+    }
+
+    return integerPart;
+};