@ensofinance/checkout-widget 0.1.2 → 0.1.4

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-import { CheckoutConfig } from '../../../../../../../src/types';
-import { CheckoutModalProps } from '../../../../../../../src/types';
 import { ComponentType } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { SystemConfig as WidgetTheme } from '@chakra-ui/react';
@@ -10,14 +8,33 @@ export declare const Checkout: ({ config: { apiKey, tokenOut, chainIdOut, theme,
     onClose?: () => void;
 }) => JSX_2.Element;
 
-export { CheckoutConfig }
+export declare type CheckoutConfig = {
+    tokenOut: string;
+    chainIdOut: number;
+    apiKey: string;
+    theme?: WidgetTheme;
+    enableExchange?: SupportedExchanges[];
+    /** Override the default CEX bridge chain mapping (maps target chains to intermediate chains for withdrawal + bridge) */
+    cexBridgeChainMapping?: Record<number, number>;
+    /** Override recipient address (defaults to connected wallet's smart account) */
+    recipient?: string;
+    /** Force the widget to open in a specific flow, bypassing the selector */
+    enforceFlow?: EnforceFlow;
+};
 
 export declare const CheckoutModal: ({ config, setIsActive, isActive, onClose, }: CheckoutModalProps) => JSX_2.Element;
 
-export { CheckoutModalProps }
+export declare type CheckoutModalProps = {
+    config: CheckoutConfig;
+    isActive: boolean;
+    setIsActive: (active: boolean) => void;
+    onClose?: () => void;
+};
 
 export declare const DEFAULT_CEX_BRIDGE_CHAIN_MAPPING: Record<number, number>;
 
+declare type EnforceFlow = "exchange" | "wallet";
+
 export declare enum SupportedExchanges {
     Binance = "binance",
     Kraken = "kraken",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ensofinance/checkout-widget",
-    "version": "0.1.2",
+    "version": "0.1.4",
     "type": "module",
     "homepage": "https://www.enso.build/",
     "repository": {

package/src/components/AmountInput.tsx

@@ -0,0 +1,233 @@
+import { Box, Icon, Text } from "@chakra-ui/react";
+import { ArrowDownUpIcon } from "lucide-react";
+import { Input, IconButton, Tab } from "@/components/ui";
+import { formatNumber, formatUSD } from "@/util";
+import { precisionizeNumber, sanitizeDecimalInput } from "@/util/common";
+
+export type InputMode = "usd" | "token";
+
+export type AmountInputValue = {
+    tokenAmount: string;
+    usdAmount: string;
+    mode: InputMode;
+};
+
+type PercentOption = {
+    label: string;
+    value: number;
+};
+
+type AmountInputProps = {
+    value: AmountInputValue;
+    onChange: (value: AmountInputValue) => void;
+    tokenSymbol?: string;
+    tokenPriceUsd?: number;
+    tokenBalance?: number;
+    roundingPrecision?: number;
+    usdPrecision?: number;
+    percentOptions?: PercentOption[];
+    onPercentSelect?: (
+        percent: number,
+    ) => { tokenAmount: string; usdAmount: string } | null | undefined;
+    showPercentTabs?: boolean;
+};
+
+const defaultPercentOptions: PercentOption[] = [
+    { label: "25%", value: 25 },
+    { label: "50%", value: 50 },
+    { label: "75%", value: 75 },
+    { label: "Max", value: 100 },
+];
+
+export const AmountInput = ({
+    value,
+    onChange,
+    tokenSymbol,
+    tokenPriceUsd,
+    tokenBalance,
+    roundingPrecision = 6,
+    usdPrecision = 2,
+    percentOptions = defaultPercentOptions,
+    onPercentSelect,
+    showPercentTabs = true,
+}: AmountInputProps) => {
+    const updateValue = (next: Partial<AmountInputValue>) => {
+        onChange({ ...value, ...next });
+    };
+
+    const handleInputChange = (rawValue: string) => {
+        if (value.mode === "usd") {
+            const cleanUsd = sanitizeDecimalInput(
+                rawValue.replace("$", ""),
+                usdPrecision,
+            );
+
+            if (!cleanUsd || cleanUsd === ".") {
+                updateValue({ usdAmount: cleanUsd, tokenAmount: "" });
+                return;
+            }
+
+            if (!tokenPriceUsd || tokenPriceUsd <= 0) {
+                updateValue({ usdAmount: cleanUsd, tokenAmount: "" });
+                return;
+            }
+
+            const tokenAmountFromUsd = precisionizeNumber(
+                parseFloat(cleanUsd) / tokenPriceUsd,
+                roundingPrecision,
+            );
+            updateValue({
+                usdAmount: cleanUsd,
+                tokenAmount: tokenAmountFromUsd,
+            });
+            return;
+        }
+
+        const cleanTokenAmount = sanitizeDecimalInput(
+            rawValue,
+            roundingPrecision,
+        );
+
+        if (!cleanTokenAmount || cleanTokenAmount === ".") {
+            updateValue({ tokenAmount: cleanTokenAmount, usdAmount: "" });
+            return;
+        }
+
+        if (!tokenPriceUsd || tokenPriceUsd <= 0) {
+            updateValue({ tokenAmount: cleanTokenAmount });
+            return;
+        }
+
+        updateValue({
+            tokenAmount: cleanTokenAmount,
+            usdAmount: (
+                parseFloat(cleanTokenAmount) * tokenPriceUsd
+            ).toFixed(usdPrecision),
+        });
+    };
+
+    const handleToggleMode = () => {
+        updateValue({
+            mode: value.mode === "usd" ? "token" : "usd",
+        });
+    };
+
+    const handlePercentSelect = (percent: number) => {
+        if (onPercentSelect) {
+            const nextValues = onPercentSelect(percent);
+            if (!nextValues) return;
+
+            updateValue(nextValues);
+            return;
+        }
+
+        if (!tokenBalance || !tokenPriceUsd || tokenPriceUsd <= 0) return;
+
+        const tokenAmount = precisionizeNumber(
+            (tokenBalance * percent) / 100,
+            roundingPrecision,
+        );
+
+        updateValue({
+            tokenAmount,
+            usdAmount: (
+                parseFloat(tokenAmount || "0") * tokenPriceUsd
+            ).toFixed(usdPrecision),
+        });
+    };
+
+    const placeholder = value.mode === "usd" ? "$10.00" : "0.00";
+    const displayValue =
+        value.mode === "usd"
+            ? value.usdAmount
+                ? `$${value.usdAmount}`
+                : ""
+            : value.tokenAmount;
+
+    const hasTokenValue = !!value.tokenAmount && value.tokenAmount !== ".";
+    const hasUsdValue = !!value.usdAmount && value.usdAmount !== ".";
+
+    const formattedTokenValue = hasTokenValue
+        ? formatNumber(value.tokenAmount)
+        : "";
+    const tokenSuffix = tokenSymbol ? ` ${tokenSymbol}` : "";
+    const equivalentValue =
+        value.mode === "usd"
+            ? hasTokenValue
+                ? `${formattedTokenValue}${tokenSuffix}`
+                : "—"
+            : hasUsdValue
+              ? formatUSD(value.usdAmount)
+              : "—";
+
+    return (
+        <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={(event) => handleInputChange(event.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>
+
+            {showPercentTabs && percentOptions.length > 0 && (
+                <Box
+                    display={"flex"}
+                    gap={"4px"}
+                    justifyContent={"center"}
+                    paddingBottom={"35px"}
+                >
+                    {percentOptions.map((option) => (
+                        <Tab
+                            key={option.label}
+                            onClick={() => handlePercentSelect(option.value)}
+                        >
+                            {option.label}
+                        </Tab>
+                    ))}
+                </Box>
+            )}
+        </Box>
+    );
+};

package/src/components/Checkout.tsx

@@ -8,7 +8,7 @@ import {
     type CheckoutConfig,
     type SupportedExchanges,
     type EnforceFlow,
-} from "@/types";
+} from "../types";
 import posthog from "posthog-js";
 
 type ICheckoutContext = {

package/src/components/CheckoutModal.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import { Checkout } from "./Checkout";
 import Modal from "./modal";
-import { type CheckoutModalProps } from "@/types";
+import { type CheckoutModalProps } from "../types";
 
 export const CheckoutModal = ({
     config,

package/src/components/steps/ExchangeFlow.tsx

@@ -9,7 +9,7 @@ import {
     Image,
     Table,
 } from "@chakra-ui/react";
-import { ChevronLeft, X, ArrowDownUpIcon, TriangleAlert } from "lucide-react";
+import { ChevronLeft, X, TriangleAlert } from "lucide-react";
 import { useContext, useEffect, useMemo, useState, useCallback } from "react";
 import { useAccount, useSignMessage } from "wagmi";
 import { getUserOperationHash } from "viem/account-abstraction";
@@ -20,7 +20,8 @@ import {
     HeaderWrapper,
     ListWrapper,
 } from "../ui/styled";
-import { IconButton, Button, Tab, Input } from "../ui";
+import { IconButton, Button, Input } from "../ui";
+import { AmountInput, AmountInputValue } from "../AmountInput";
 import { CheckoutContext } from "../Checkout";
 import Modal from "../modal";
 import {
@@ -55,7 +56,7 @@ import { ConfirmExchangeStep } from "../ExchangeConfirmSecurity";
 
 import SuccessIcon from "@/assets/success.svg";
 import FailIcon from "@/assets/fail.svg";
-import { SupportedExchanges } from "@/types";
+import { SupportedExchanges } from "../../types";
 import { useLayerZeroStatus } from "@/util/tx-tracker";
 import { STARGATE_CHAIN_NAMES, CHAINS_ETHERSCAN } from "@/util/constants";
 
@@ -797,13 +798,17 @@ const ChooseAmountStep = ({
     setStep: (step: WithdrawalStep) => void;
     selectedToken: MatchedToken | null;
 }) => {
-    const [amount, setAmount] = useState<string>("");
-    const [inputMode, setInputMode] = useState<"usd" | "token">("usd");
-    const [usdValue, setUsdValue] = useState<string>("");
+    const [amountInput, setAmountInput] = useState<AmountInputValue>({
+        tokenAmount: "",
+        usdAmount: "",
+        mode: "usd",
+    });
     const setAmountIn = useAppStore((s) => s.setAmountIn);
     const { tokenInData, selectedIntegration } = useAppDetails();
     const isStable = selectedToken?.symbol.toLowerCase().includes("USD");
     const roundingPrecision = isStable ? 2 : 6;
+    const amount = amountInput.tokenAmount;
+    const usdValue = amountInput.usdAmount;
 
     // Only apply CEX withdrawal limits if using a CEX holding (not smart account)
     const isWithdrawal = !isDelayedBalanceUsed(selectedIntegration.type);
@@ -816,8 +821,13 @@ const ChooseAmountStep = ({
             : selectedToken.marketValue.toFixed(2)
         : 0;
 
+    const tokenPriceUsd = useMemo(() => {
+        if (!selectedToken || !selectedToken.balance) return undefined;
+        return selectedToken.marketValue / selectedToken.balance;
+    }, [selectedToken]);
+
     // Handle percentage selection with limits (only for CEX withdrawals)
-    const handlePercentageSelect = useCallback(
+    const getPercentAmounts = useCallback(
         (percent: number) => {
             if (!selectedToken) return;
 
@@ -851,8 +861,13 @@ const ChooseAmountStep = ({
                 finalTokenAmount = (selectedToken.balance * percent) / 100;
             }
 
-            setAmount(precisionizeNumber(finalTokenAmount, roundingPrecision));
-            setUsdValue(finalUsdAmount.toFixed(2));
+            return {
+                tokenAmount: precisionizeNumber(
+                    finalTokenAmount,
+                    roundingPrecision,
+                ),
+                usdAmount: finalUsdAmount.toFixed(2),
+            };
         },
         [selectedToken, isWithdrawal, maxUsdAmount, roundingPrecision],
     );
@@ -860,85 +875,43 @@ const ChooseAmountStep = ({
     // Set max value on load
     useEffect(() => {
         if (selectedToken) {
-            handlePercentageSelect(100);
+            const percentAmounts = getPercentAmounts(100);
+            if (!percentAmounts) return;
+
+            setAmountInput((prev) => ({
+                ...prev,
+                ...percentAmounts,
+            }));
         }
-    }, [selectedToken, handlePercentageSelect]);
+    }, [selectedToken, getPercentAmounts]);
 
     useEffect(() => {
-        if (tokenInData?.decimals)
-            setAmountIn(
-                Number(
-                    denormalizeValue(amount || "0", tokenInData?.decimals),
-                ).toFixed(),
-            );
-    }, [amount, tokenInData?.decimals]);
+        if (!tokenInData?.decimals) return;
 
-    // Handle input change based on current mode
-    const handleInputChange = (value: string) => {
-        if (!selectedToken) return;
+        const normalizedAmount = amount.endsWith(".")
+            ? amount.slice(0, -1)
+            : amount;
 
-        if (inputMode === "usd") {
-            const cleanUsd = value.replace("$", "");
-            setUsdValue(cleanUsd);
-            if (!cleanUsd) {
-                setAmount("");
-                return;
-            }
-            // Calculate token amount from USD value
-            const tokenPrice =
-                selectedToken.marketValue / selectedToken.balance;
-            const tokenAmount = parseFloat(cleanUsd) / tokenPrice;
-            setAmount(
-                isNaN(tokenAmount)
-                    ? ""
-                    : precisionizeNumber(tokenAmount, roundingPrecision),
-            );
-        } else {
-            if (!value) {
-                setAmount("");
-                setUsdValue("");
-                return;
-            }
-            setAmount(precisionizeNumber(value, roundingPrecision));
-            // Calculate USD value from token amount
-            const tokenPrice =
-                selectedToken.marketValue / selectedToken.balance;
-            const usdAmount = parseFloat(value) * tokenPrice;
-            setUsdValue(isNaN(usdAmount) ? "" : usdAmount.toFixed(2));
+        if (!normalizedAmount || normalizedAmount === ".") {
+            setAmountIn("0");
+            return;
         }
-    };
 
-    // 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: amount
-                    ? `${formatNumber(parseFloat(amount))} ${selectedToken?.symbol}`
-                    : "—",
-            };
-        } else {
-            return {
-                placeholder: "0.00",
-                displayValue: amount,
-                equivalentValue: usdValue ? `$${usdValue}` : "—",
-            };
+        try {
+            setAmountIn(denormalizeValue(normalizedAmount, tokenInData.decimals));
+        } catch (error) {
+            setAmountIn("0");
         }
-    };
+    }, [amount, tokenInData?.decimals, setAmountIn]);
 
-    const { placeholder, displayValue, equivalentValue } = getInputDisplay();
+    const hasAmount = !!amount && amount !== ".";
+    const hasUsdValue = !!usdValue && usdValue !== ".";
     const notEnoughBalance = selectedToken
-        ? parseFloat(amount) > selectedToken.balance
+        ? hasAmount && parseFloat(amount) > selectedToken.balance
         : true;
 
     // Limits validation logic - only for CEX withdrawals
-    const currentUsdValue = parseFloat(usdValue);
+    const currentUsdValue = hasUsdValue ? parseFloat(usdValue) : 0;
     const minValueForToken =
         isWithdrawal && selectedToken
             ? EXCHANGE_MIN_LIMIT[
@@ -949,17 +922,19 @@ const ChooseAmountStep = ({
     const isBelowMinAmount =
         isWithdrawal &&
         selectedToken &&
+        hasAmount &&
         currentUsdValue > 0 &&
         minValueForToken &&
         +amount < minValueForToken;
     const isAboveMaxAmount =
         isWithdrawal &&
         selectedToken &&
+        hasAmount &&
         currentUsdValue > 0 &&
         currentUsdValue > +maxUsdAmount;
 
     const isAmountInvalid =
-        isBelowMinAmount || isAboveMaxAmount || notEnoughBalance;
+        !hasAmount || isBelowMinAmount || isAboveMaxAmount || notEnoughBalance;
 
     if (!selectedToken) {
         return (
@@ -988,70 +963,14 @@ const ChooseAmountStep = ({
                 gap={"8px"}
                 width="100%"
             >
-                <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"}
-                >
-                    {[25, 50, 75, 100].map((percent) => (
-                        <Tab
-                            key={percent}
-                            onClick={() => handlePercentageSelect(percent)}
-                        >
-                            {percent === 100 ? "Max" : `${percent}%`}
-                        </Tab>
-                    ))}
-                </Box>
+                <AmountInput
+                    value={amountInput}
+                    onChange={setAmountInput}
+                    tokenSymbol={selectedToken.symbol}
+                    tokenPriceUsd={tokenPriceUsd}
+                    roundingPrecision={roundingPrecision}
+                    onPercentSelect={getPercentAmounts}
+                />
             </Box>
 
             {
@@ -1062,10 +981,10 @@ const ChooseAmountStep = ({
                     h={3}
                     m={-1}
                     visibility={
-                        isAmountInvalid || !amount ? "visible" : "hidden"
+                        isAmountInvalid ? "visible" : "hidden"
                     }
                 >
-                    {!amount
+                    {!hasAmount
                         ? "Please enter an amount"
                         : isBelowMinAmount
                           ? `Minimum amount is ${formatNumber(minValueForToken)} ${selectedToken.symbol}`
@@ -1079,11 +998,11 @@ const ChooseAmountStep = ({
 
             <Button
                 onClick={() =>
-                    isAmountInvalid || !amount
+                    isAmountInvalid
                         ? undefined
                         : setStep(WithdrawalStep.SignUserOp)
                 }
-                disabled={isAmountInvalid || !amount}
+                disabled={isAmountInvalid}
             >
                 Continue
             </Button>