@ensofinance/checkout-widget 0.0.12 → 0.0.14

package/src/components/steps/{InitialStep.tsx → FlowSelector.tsx}

@@ -1,6 +1,6 @@
 import { Box, Icon, Skeleton } from "@chakra-ui/react";
 import { X } from "lucide-react";
-import { useContext, useMemo } from "react";
+import { useContext, useMemo, useState } from "react";
 import { useAccount } from "wagmi";
 import { IconButton } from "../ui";
 import {
@@ -16,18 +16,33 @@ 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 BinanceIcon from "../../assets/BinanceBadge.svg";
+import { useWalletIcon, useSmartAccountBalances } from "@/util/enso-hooks";
+import ExchangeFlow, {
+    WithdrawalStep,
+    EXCHANGE_ICON_BY_TYPE,
+    ExchangeToIntegrationType,
+} from "@/components/steps/ExchangeFlow";
+import WalletFlow from "@/components/steps/WalletFlow/WalletFlow";
 
-const InitialStep = () => {
-    const { handleClose, setStep, setFlow, enableExchanges } =
-        useContext(CheckoutContext);
+const FLOWS = {
+    exchangeFlow: ExchangeFlow,
+    walletFlow: WalletFlow,
+};
+
+const FlowSelector = () => {
+    const { handleClose, enableExchange } = useContext(CheckoutContext);
+    const [flow, setFlow] = useState("");
+    const [initialStep, setInitialStep] = useState<string | number>("");
 
     const { total, isLoading } = useWalletBalance();
     const { address } = useAccount();
 
     const { walletIcon, walletDisplayName } = useWalletIcon();
 
+    // Get smart account balances
+    const { total: smartAccountTotal, isLoading: isLoadingSmartAccount } =
+        useSmartAccountBalances(1);
+
     const formattedBalance = useMemo(() => {
         if (isLoading)
             return (
@@ -52,7 +67,7 @@ const InitialStep = () => {
             delay: string;
             icons: string[];
             flow: string;
-            firstStep: string;
+            firstStep: string | number;
             disabled?: boolean;
         }[] = [
             // {
@@ -77,18 +92,51 @@ const InitialStep = () => {
             // },
         ];
 
-        if (enableExchanges?.includes?.("binance"))
+        // Add Smart Balance option if balance > $20
+        if (!isLoadingSmartAccount && smartAccountTotal > 20) {
+            options.push({
+                id: "smart-balance",
+                title: "Smart Account Balance",
+                limit: formatUSD(smartAccountTotal),
+                delay: "2 min",
+                icons: [],
+                flow: "exchangeFlow",
+                firstStep: WithdrawalStep.ChooseBalanceAsset,
+            });
+        }
+        console.log(
+            enableExchange,
+            enableExchange.map(
+                (integration) => EXCHANGE_ICON_BY_TYPE[integration],
+            ),
+        );
+
+        if (Array.isArray(enableExchange) && enableExchange.length > 0)
             options.unshift({
-                id: "1",
+                id: "exchange",
                 title: "Connect Exchange",
                 limit: "No Limit",
                 delay: "2 min",
-                icons: [BinanceIcon],
+                icons: enableExchange
+                    .map(
+                        (integration) =>
+                            EXCHANGE_ICON_BY_TYPE[
+                                ExchangeToIntegrationType[integration]
+                            ],
+                    )
+                    .filter(Boolean),
                 flow: "exchangeFlow",
-                firstStep: "connectExchange",
+                // Start at ChooseExchange to allow picking among multiple integrations
+                firstStep: WithdrawalStep.ChooseExchange,
             });
         return options;
-    }, [address, enableExchanges]);
+    }, [address, enableExchange, smartAccountTotal, isLoadingSmartAccount]);
+
+    const FlowComponent = flow && FLOWS[flow];
+
+    if (FlowComponent) {
+        return <FlowComponent setFlow={setFlow} initialStep={initialStep} />;
+    }
 
     return (
         <>
@@ -124,8 +172,7 @@ const InitialStep = () => {
                                     status={WalletStatus.CONNECTED}
                                     badge={walletDisplayName}
                                     onClick={() => {
-                                        setFlow("mainFlow");
-                                        setStep("selectToken");
+                                        setFlow("walletFlow");
                                     }}
                                 />
                             }
@@ -135,24 +182,20 @@ const InitialStep = () => {
                         <>
                             <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;
-                                })}
+                                {OPTIONS.map((option) => (
+                                    <OptionCard
+                                        key={option.id}
+                                        title={option.title}
+                                        limit={option.limit}
+                                        delay={option.delay}
+                                        icons={option.icons}
+                                        onClick={() => {
+                                            if (option.disabled) return;
+                                            setFlow(option.flow);
+                                            setInitialStep(option.firstStep);
+                                        }}
+                                    />
+                                ))}
                             </ListWrapper>
                         </>
                     )}
@@ -162,4 +205,4 @@ const InitialStep = () => {
     );
 };
 
-export default InitialStep;
+export default FlowSelector;

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

@@ -0,0 +1,214 @@
+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 { Address } from "viem";
+import { useAppStore } from "@/store";
+import { Button, IconButton, Tab, Input } from "@/components/ui";
+import CurrencySwapDisplay from "@/components/CurrencySwapDisplay";
+import { useEnsoPrice } from "@/enso-api/api";
+import {
+    normalizeValue,
+    denormalizeValue,
+    formatNumber,
+    formatUSD,
+} from "@/util";
+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 setAmountIn = useAppStore((state) => state.setAmountIn);
+    const amountIn = useAppStore((state) => state.amountIn);
+    const [initialLoad, setInitialLoad] = useState(true);
+    const {
+        tokenInData,
+        effectiveTokenOutData,
+        tokenIn,
+        chainIdOut,
+        chainIdIn,
+    } = useAppDetails();
+
+    const { data: priceData } = useEnsoPrice(chainIdIn, tokenIn);
+
+    const tokenValue = useMemo(() => {
+        return normalizeValue(amountIn, tokenInData?.decimals);
+    }, [amountIn, tokenInData?.decimals]);
+
+    const balanceIn = useTokenBalance(tokenIn as Address, chainIdIn);
+
+    // Handle percentage selection
+    const handlePercentageSelect = (percent: number) => {
+        if (!balanceIn || !priceData || !tokenInData?.decimals) {
+            setUsdValue("0.00");
+            return;
+        }
+
+        const amountToSet = (
+            (BigInt(balanceIn) * BigInt(percent)) /
+            BigInt(100)
+        ).toString();
+
+        setAmountIn(amountToSet);
+        setUsdValue(
+            (
+                +normalizeValue(amountToSet, tokenInData?.decimals) * priceData
+            ).toFixed(2),
+        );
+    };
+
+    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));
+        }
+    };
+
+    // 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} ${tokenInData?.symbol}`
+                    : "—",
+            };
+        }
+
+        return {
+            placeholder: "0.00",
+            displayValue: formattedValue,
+            equivalentValue: formatUSD(safeUsdValue),
+        };
+    };
+
+    const { placeholder, displayValue, equivalentValue } = getInputDisplay();
+    const notEnoughBalance = +balanceIn < +amountIn;
+
+    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>
+
+            <CurrencySwapDisplay
+                tokenOut={effectiveTokenOutData}
+                tokenIn={tokenInData}
+                chainIdIn={chainIdIn}
+                chainIdOut={chainIdOut}
+            />
+
+            <Button
+                onClick={() => setStep("quote")}
+                disabled={notEnoughBalance}
+            >
+                Continue
+            </Button>
+        </BodyWrapper>
+    );
+};
+
+export default WalletAmountStep;