@ensofinance/checkout-widget 0.0.12 → 0.0.13

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,31 @@ 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 { useWalletIcon, useSmartAccountBalances } from "@/util/enso-hooks";
+import ExchangeFlow, { WithdrawalStep } from "@/components/steps/ExchangeFlow";
+import WalletFlow from "@/components/steps/WalletFlow/WalletFlow";
+
 import BinanceIcon from "../../assets/BinanceBadge.svg";
 
-const InitialStep = () => {
-    const { handleClose, setStep, setFlow, enableExchanges } =
-        useContext(CheckoutContext);
+const FLOWS = {
+    exchangeFlow: ExchangeFlow,
+    walletFlow: WalletFlow,
+};
+
+const FlowSelector = () => {
+    const { handleClose, enableExchanges } = 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 +65,7 @@ const InitialStep = () => {
             delay: string;
             icons: string[];
             flow: string;
-            firstStep: string;
+            firstStep: string | number;
             disabled?: boolean;
         }[] = [
             // {
@@ -77,18 +90,37 @@ const InitialStep = () => {
             // },
         ];
 
+        // 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,
+            });
+        }
+
         if (enableExchanges?.includes?.("binance"))
             options.unshift({
-                id: "1",
+                id: "binance-exchange",
                 title: "Connect Exchange",
                 limit: "No Limit",
                 delay: "2 min",
                 icons: [BinanceIcon],
                 flow: "exchangeFlow",
-                firstStep: "connectExchange",
+                firstStep: WithdrawalStep.CheckSessionKey,
             });
         return options;
-    }, [address, enableExchanges]);
+    }, [address, enableExchanges, smartAccountTotal, isLoadingSmartAccount]);
+
+    const FlowComponent = flow && FLOWS[flow];
+
+    if (FlowComponent) {
+        return <FlowComponent setFlow={setFlow} initialStep={initialStep} />;
+    }
 
     return (
         <>
@@ -124,8 +156,7 @@ const InitialStep = () => {
                                     status={WalletStatus.CONNECTED}
                                     badge={walletDisplayName}
                                     onClick={() => {
-                                        setFlow("mainFlow");
-                                        setStep("selectToken");
+                                        setFlow("walletFlow");
                                     }}
                                 />
                             }
@@ -135,24 +166,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 +189,4 @@ const InitialStep = () => {
     );
 };
 
-export default InitialStep;
+export default FlowSelector;

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

@@ -0,0 +1,215 @@
+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, useEnsoToken } from "@/enso-api/api";
+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 = ({ setStep }: { setStep: (step: string) => void }) => {
+    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 (
+        <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={() => setStep("quote")}
+                disabled={notEnoughBalance}
+            >
+                Continue
+            </Button>
+        </BodyWrapper>
+    );
+};
+
+export default WalletAmountStep;

package/src/components/steps/{WalletConfirmStep.tsx → WalletFlow/WalletConfirmStep.tsx}

@@ -1,25 +1,23 @@
-import { Box, Icon, Table, Text, Image } from "@chakra-ui/react";
-import { HeaderWrapper, HeaderTitle, BodyWrapper } from "../ui/styled";
-import { ChevronLeft, X } from "lucide-react";
-import { useContext, useEffect, useState, useMemo, useCallback } from "react";
+import { Box, Table, Text, Image } from "@chakra-ui/react";
+import { useEffect, useState, useMemo, useCallback } from "react";
 import { useAccount } from "wagmi";
 import { Address } from "viem";
-import Modal from "../modal";
-import { CheckoutContext } from "../Checkout";
-import { Button, IconButton } from "../ui";
-import { CircleTimer } from "../CircleTimer";
-import { TransactionDetailRow } from "../TransactionDetailRow";
-import DepositProcessing from "../DepositProcessing";
+import { BodyWrapper } from "@/components/ui/styled";
+import { Button } from "@/components/ui";
+import { CircleTimer } from "@/components/CircleTimer";
+import { TransactionDetailRow } from "@/components/TransactionDetailRow";
+import DepositProcessing from "@/components/DepositProcessing";
 import { useSendTxns, useRouteData, useAppDetails } from "@/util/enso-hooks";
-import { getChainIcon } from "@/util";
+import { compareCaseInsensitive, getChainIcon } from "@/util";
 import { getChainEtherscanUrl } from "@/util/common";
 import { useTrackTx, useTxByHash } from "@/util/tx-tracker";
-import QuoteParameters from "../QuoteParameters";
+import QuoteParameters from "@/components/QuoteParameters";
 import { useApproveData } from "@/enso-api/api";
 import { useIsApproveNeeded } from "@/util/wallet";
+import { ETH_ADDRESS } from "@/util/constants";
 
-import SuccessIcon from "../../assets/success.svg";
-import FailIcon from "../../assets/fail.svg";
+import SuccessIcon from "@/assets/success.svg";
+import FailIcon from "@/assets/fail.svg";
 
 type TransferStatus = "processing" | "success" | "failed" | "idle";
 
@@ -42,7 +40,13 @@ const useOperationsCalls = () => {
     );
 
     const calls = useMemo(() => {
-        if (!allowanceFetched || !routeFetched || !approveFetched) return [];
+        if (
+            (!compareCaseInsensitive(tokenIn, ETH_ADDRESS) &&
+                !allowanceFetched) ||
+            !routeFetched ||
+            !approveFetched
+        )
+            return [];
 
         if (approveNeeded) {
             return [approveData?.tx, routeData?.tx];
@@ -63,8 +67,11 @@ const useOperationsCalls = () => {
     };
 };
 
-const WalletConfirmStep = () => {
-    const { handleClose, setFlow, setStep } = useContext(CheckoutContext);
+const WalletConfirmStep = ({
+    setStep,
+}: {
+    setStep: (step: string) => void;
+}) => {
     const [status, setStatus] = useState<TransferStatus>("idle");
     const [isTimerFinished, setIsTimerFinished] = useState(false);
     const { address } = useAccount();
@@ -113,6 +120,7 @@ const WalletConfirmStep = () => {
 
     // Initiate the transaction when wallet is ready
     useEffect(() => {
+        console.log(called, ready);
         if (!called && ready) {
             sendTxns(onTxSend, onFail);
             setCalled(true);
@@ -125,7 +133,6 @@ const WalletConfirmStep = () => {
 
     const handleNewDeposit = () => {
         // Reset to initial step or handle new deposit logic
-        setFlow("mainFlow");
         setStep("selectToken");
     };
 
@@ -133,7 +140,6 @@ const WalletConfirmStep = () => {
         // Reset to previous step to retry the transfer
         // setStatus("processing");
         // setIsTimerFinished(false);
-        setFlow("mainFlow");
         setStep("quote");
     };
 
@@ -258,146 +264,91 @@ const WalletConfirmStep = () => {
     };
 
     return (
-        <>
-            <Modal.Header>
-                <HeaderWrapper>
-                    <IconButton
-                        minWidth={"16px"}
-                        minHeight={"16px"}
-                        maxWidth={"16px"}
-                        onClick={() => {
-                            setFlow("mainFlow");
-                            setStep("quote");
-                        }}
-                    >
-                        <Icon
-                            as={ChevronLeft}
-                            color="gray"
-                            width={"16px"}
-                            height={"16px"}
-                        />
-                    </IconButton>
-
-                    <Box display="flex" flexDirection="column" gap={"4px"}>
-                        <HeaderTitle>Top up your wallet</HeaderTitle>
-                    </Box>
-
-                    {handleClose && (
-                        <IconButton
-                            onClick={handleClose}
-                            width={"40px"}
-                            marginLeft={"auto"}
+        <BodyWrapper>
+            <Box
+                display={"flex"}
+                flexDirection={"column"}
+                paddingBottom={"16px"}
+                alignItems={"center"}
+                width={"100%"}
+            >
+                {renderStatusIcon()}
+                {renderProcessingText()}
+            </Box>
+
+            <Table.Root
+                key={"status"}
+                size="sm"
+                variant={"outline"}
+                width={"100%"}
+            >
+                <Table.Body>
+                    <Table.Row>
+                        <Table.Cell>Status</Table.Cell>
+                        <Table.Cell
+                            display="flex"
+                            textAlign="end"
+                            justifyContent="end"
                         >
-                            <Icon
-                                as={X}
-                                color="gray"
-                                width={"16px"}
-                                height={"16px"}
-                            />
-                        </IconButton>
-                    )}
-                </HeaderWrapper>
-            </Modal.Header>
-            <Modal.Body>
-                <BodyWrapper>
-                    <Box
-                        display={"flex"}
-                        flexDirection={"column"}
-                        paddingBottom={"16px"}
-                        alignItems={"center"}
-                        width={"100%"}
-                    >
-                        {renderStatusIcon()}
-                        {renderProcessingText()}
-                    </Box>
-
-                    <Table.Root
-                        key={"status"}
-                        size="sm"
-                        variant={"outline"}
-                        width={"100%"}
-                    >
-                        <Table.Body>
-                            <Table.Row>
-                                <Table.Cell>Status</Table.Cell>
-                                <Table.Cell
-                                    display="flex"
-                                    textAlign="end"
-                                    justifyContent="end"
-                                >
-                                    <Text color={getStatusColor()}>
-                                        {getStatusText()}
-                                    </Text>
-                                </Table.Cell>
-                            </Table.Row>
-                            {["success", "processing"].includes(status) && (
-                                <Table.Row>
-                                    <Table.Cell>Transaction</Table.Cell>
-                                    <Table.Cell
-                                        display="flex"
-                                        textAlign="end"
-                                        justifyContent="end"
-                                    >
-                                        {explorerUrl ? (
-                                            <a
-                                                href={explorerUrl}
-                                                target="_blank"
-                                                rel="noreferrer"
-                                            >
-                                                <Text color="blue.500">
-                                                    View on{" "}
-                                                    {isCrosschain
-                                                        ? "LayerZero"
-                                                        : "Etherscan"}
-                                                </Text>
-                                            </a>
-                                        ) : (
-                                            <Text>-</Text>
-                                        )}
-                                    </Table.Cell>
-                                </Table.Row>
-                            )}
-                        </Table.Body>
-                    </Table.Root>
-
-                    <QuoteParameters />
-
-                    {status === "processing" ? (
-                        <DepositProcessing
-                            currencyIcon={getChainIcon(chainIdOut)}
-                        />
-                    ) : (
-                        <TransactionDetailRow />
-                    )}
-
-                    {status === "success" && (
-                        <Box display="flex" gap={"12px"} width="100%">
-                            <Button visual={"lightGray"} onClick={handleClose}>
-                                Close
-                            </Button>
-                            <Button visual={"solid"} onClick={handleNewDeposit}>
-                                New Deposit
-                            </Button>
-                        </Box>
-                    )}
-
-                    {status === "failed" && (
-                        <Box display="flex" gap={"12px"} width="100%">
-                            <Button
-                                // variant={"surface"}
-                                visual={"lightGray"}
-                                onClick={handleClose}
+                            <Text color={getStatusColor()}>
+                                {getStatusText()}
+                            </Text>
+                        </Table.Cell>
+                    </Table.Row>
+                    {["success", "processing"].includes(status) && (
+                        <Table.Row>
+                            <Table.Cell>Transaction</Table.Cell>
+                            <Table.Cell
+                                display="flex"
+                                textAlign="end"
+                                justifyContent="end"
                             >
-                                Close
-                            </Button>
-                            <Button visual={"solid"} onClick={handleRetry}>
-                                Retry Deposit
-                            </Button>
-                        </Box>
+                                {explorerUrl ? (
+                                    <a
+                                        href={explorerUrl}
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        <Text color="blue.500">
+                                            View on{" "}
+                                            {isCrosschain
+                                                ? "LayerZero"
+                                                : "Etherscan"}
+                                        </Text>
+                                    </a>
+                                ) : (
+                                    <Text>-</Text>
+                                )}
+                            </Table.Cell>
+                        </Table.Row>
                     )}
-                </BodyWrapper>
-            </Modal.Body>
-        </>
+                </Table.Body>
+            </Table.Root>
+
+            <QuoteParameters />
+
+            {status === "processing" ? (
+                <DepositProcessing currencyIcon={getChainIcon(chainIdOut)} />
+            ) : (
+                <TransactionDetailRow />
+            )}
+
+            {status === "success" && (
+                <Button
+                    visual={"solid"}
+                    onClick={handleNewDeposit}
+                    width="100%"
+                >
+                    New Deposit
+                </Button>
+            )}
+
+            {status === "failed" && (
+                <Button visual={"solid"} onClick={handleRetry} width="100%">
+                    Retry Deposit
+                </Button>
+            )}
+        </BodyWrapper>
     );
 };