@ensofinance/checkout-widget 0.1.8 → 0.1.9

package/src/components/steps/SmartAccountFlow.tsx

@@ -1,372 +0,0 @@
-import { Center, Spinner, Box, Icon, Text, Flex } from "@chakra-ui/react";
-import { ChevronLeft, X } from "lucide-react";
-import { useContext, useEffect, useState } from "react";
-import { useReadContract } from "wagmi";
-import { erc20Abi } from "viem";
-
-import {
-    BodyWrapper,
-    HeaderDescription,
-    HeaderTitle,
-    HeaderWrapper,
-    ListWrapper,
-} from "../ui/styled";
-import { IconButton, Button } from "../ui";
-import { CheckoutContext } from "../Checkout";
-import Modal from "../modal";
-import { useAppStore } from "@/store";
-import { AssetCard } from "../cards";
-import { formatNumber, formatUSD, normalizeValue } from "@/util";
-import {
-    useAppDetails,
-    useSmartAccountAddress,
-    useSmartAccountBalances,
-} from "@/util/enso-hooks";
-import ChooseAmountStep from "./shared/ChooseAmountStep";
-import SignUserOpStep from "./shared/SignUserOpStep";
-import TrackUserOpStep from "./shared/TrackUserOpStep";
-import type { MatchedToken } from "./shared/types";
-import { AnimatedStep } from "../ui/transitions";
-
-export enum SmartAccountStep {
-    ChooseAsset = 0,
-    ChooseAmount = 1,
-    SignUserOp = 2,
-    TrackUserOp = 3,
-}
-
-const smartAccountPreviousStep: Partial<
-    Record<SmartAccountStep, SmartAccountStep>
-> = {
-    [SmartAccountStep.ChooseAmount]: SmartAccountStep.ChooseAsset,
-    [SmartAccountStep.SignUserOp]: SmartAccountStep.ChooseAmount,
-};
-
-const ChooseDelayedBalance = ({
-    setStep,
-    onTokenSelect,
-    notice,
-}: {
-    setStep: (step: SmartAccountStep) => void;
-    onTokenSelect: (token: MatchedToken) => void;
-    notice?: string | null;
-}) => {
-    const { chainIdIn, setTokenIn, setChainIdIn } = useAppStore();
-    const [selectedToken, setSelectedToken] = useState<string | null>(null);
-
-    const { holdingsList, total, isLoading } = useSmartAccountBalances(1);
-
-    if (isLoading) {
-        return (
-            <Center>
-                <Spinner m={5} />
-            </Center>
-        );
-    }
-
-    return (
-        <BodyWrapper>
-            {notice ? (
-                <Box mb={3} width="100%" textAlign="left">
-                    <Text fontSize="sm" color="fg.muted">
-                        {notice}
-                    </Text>
-                </Box>
-            ) : null}
-            <Box mb={4} width="100%" textAlign="left">
-                <HeaderDescription>
-                    Smart Account Balance: {formatUSD(total)}
-                </HeaderDescription>
-            </Box>
-            <Box overflowY={"scroll"} maxH={"400px"}>
-                <ListWrapper>
-                    {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={
-                                selectedToken === asset.token &&
-                                chainIdIn === asset.chainId
-                            }
-                            onClick={() => {
-                                setSelectedToken(asset.token);
-                                setTokenIn(asset.token);
-                                setChainIdIn(asset.chainId);
-                                const mockMatchedToken: MatchedToken = {
-                                    symbol: asset.symbol,
-                                    name: asset.name,
-                                    networkId: asset.chainId.toString(),
-                                    chainId: asset.chainId,
-                                    integrationNetworks: [],
-                                    tokenAddress: asset.token,
-                                    balance: Number(
-                                        normalizeValue(
-                                            asset.amount,
-                                            asset.decimals,
-                                        ),
-                                    ),
-                                    marketValue: asset.total,
-                                };
-                                onTokenSelect(mockMatchedToken);
-                            }}
-                        />
-                    ))}
-                </ListWrapper>
-            </Box>
-            {holdingsList?.length === 0 ? (
-                <Box textAlign="center" color="fg.subtle" py={8}>
-                    No tokens found in smart account
-                </Box>
-            ) : null}
-            <Button
-                disabled={!selectedToken}
-                onClick={() => {
-                    setStep(SmartAccountStep.ChooseAmount);
-                }}
-            >
-                Continue
-            </Button>
-        </BodyWrapper>
-    );
-};
-
-const SmartAccountFlow = ({
-    setFlow,
-    presetAmount,
-}: {
-    setFlow: (flow: string) => void;
-    presetAmount?: boolean;
-}) => {
-    const { handleClose, enforceFlow } = useContext(CheckoutContext);
-    const [currentStep, setCurrentStep] = useState<SmartAccountStep>(
-        SmartAccountStep.ChooseAsset,
-    );
-    const [selectedToken, setSelectedToken] = useState<MatchedToken | null>(
-        null,
-    );
-    const [userOp, setUserOp] = useState<any | null>(null);
-    const [launchNotice, setLaunchNotice] = useState<string | null>(null);
-    const [isBootstrapping, setIsBootstrapping] = useState(!!presetAmount);
-
-    const setSelectedIntegration = useAppStore(
-        (state) => state.setSelectedIntegration,
-    );
-
-    const { smartAccountAddress } = useSmartAccountAddress();
-
-    const { tokenInData, tokenInPrice, chainIdIn, tokenIn } = useAppDetails();
-
-    const { data: launchRpcBalance } = useReadContract({
-        chainId: chainIdIn,
-        address: tokenIn as `0x${string}`,
-        abi: erc20Abi,
-        functionName: "balanceOf",
-        args: [smartAccountAddress],
-        query: {
-            enabled: !!presetAmount && !!smartAccountAddress,
-            refetchInterval: isBootstrapping ? 3000 : false,
-            staleTime: 0,
-        },
-    });
-
-    // Set delayed integration while mounted
-    useEffect(() => {
-        setSelectedIntegration({
-            type: "delayed",
-            name: "Smart account",
-            id: "",
-        });
-        return () => setSelectedIntegration(null);
-    }, [setSelectedIntegration]);
-
-    // Card-buy bootstrap: resolve token and jump to sign step
-    useEffect(() => {
-        if (!presetAmount || !isBootstrapping) return;
-        if (!chainIdIn || !tokenIn || !smartAccountAddress) return;
-        if (typeof launchRpcBalance !== "bigint") return;
-        if (!tokenInData) return;
-
-        const decimals = tokenInData.decimals;
-        const symbol = tokenInData.symbol;
-        const name = tokenInData.name;
-
-        const normalizedBalance = Number(
-            normalizeValue(launchRpcBalance, decimals),
-        );
-        if (!Number.isFinite(normalizedBalance)) return;
-
-        const resolvedPrice = Number(tokenInPrice ?? 0);
-        const resolvedMarketValue =
-            resolvedPrice > 0 ? normalizedBalance * resolvedPrice : 0;
-
-        const synthesizedToken: MatchedToken = {
-            symbol,
-            name,
-            networkId: chainIdIn.toString(),
-            chainId: chainIdIn,
-            integrationNetworks: [],
-            tokenAddress: tokenIn,
-            balance: normalizedBalance,
-            marketValue: resolvedMarketValue,
-        };
-
-        setSelectedToken(synthesizedToken);
-        setCurrentStep(SmartAccountStep.SignUserOp);
-        setIsBootstrapping(false);
-    }, [
-        isBootstrapping,
-        presetAmount,
-        chainIdIn,
-        tokenIn,
-        launchRpcBalance,
-        tokenInData,
-        tokenInPrice,
-        smartAccountAddress,
-    ]);
-
-    // Timeout fallback for bootstrap
-    useEffect(() => {
-        if (!presetAmount || !isBootstrapping) return;
-
-        const timer = window.setTimeout(() => {
-            setIsBootstrapping(false);
-            setLaunchNotice(
-                "We could not auto-open the quote yet. Select your Smart Account USDC balance to continue.",
-            );
-            setCurrentStep(SmartAccountStep.ChooseAsset);
-        }, 12000);
-
-        return () => window.clearTimeout(timer);
-    }, [isBootstrapping, presetAmount]);
-
-    const currentStepComponent = (() => {
-        if (presetAmount && isBootstrapping) {
-            return (
-                <BodyWrapper>
-                    <Flex direction="column" gap={3} align="center" py={8}>
-                        <Spinner />
-                        <Text color="fg.muted" fontSize="sm" textAlign="center">
-                            Preparing your Smart Account quote...
-                        </Text>
-                    </Flex>
-                </BodyWrapper>
-            );
-        }
-
-        switch (currentStep) {
-            case SmartAccountStep.ChooseAsset:
-                return (
-                    <ChooseDelayedBalance
-                        setStep={setCurrentStep}
-                        onTokenSelect={setSelectedToken}
-                        notice={launchNotice}
-                    />
-                );
-            case SmartAccountStep.ChooseAmount:
-                return (
-                    <ChooseAmountStep
-                        setStep={setCurrentStep}
-                        nextStep={SmartAccountStep.SignUserOp}
-                        selectedToken={selectedToken}
-                        mode="smart-account"
-                    />
-                );
-            case SmartAccountStep.SignUserOp:
-                return (
-                    <SignUserOpStep
-                        nextStep={SmartAccountStep.TrackUserOp}
-                        setStep={setCurrentStep}
-                        setUserOp={setUserOp}
-                    />
-                );
-            case SmartAccountStep.TrackUserOp:
-                return (
-                    <TrackUserOpStep
-                        userOp={userOp}
-                        onReset={() =>
-                            setCurrentStep(SmartAccountStep.ChooseAsset)
-                        }
-                    />
-                );
-            default:
-                return null;
-        }
-    })();
-
-    return (
-        <>
-            <Modal.Header>
-                <HeaderWrapper>
-                    {!(
-                        enforceFlow &&
-                        currentStep === SmartAccountStep.ChooseAsset
-                    ) && (
-                        <IconButton
-                            minWidth={"16px"}
-                            minHeight={"16px"}
-                            maxWidth={"16px"}
-                            onClick={() => {
-                                const previousStep =
-                                    smartAccountPreviousStep[currentStep];
-                                if (previousStep !== undefined) {
-                                    setCurrentStep(previousStep);
-                                } else {
-                                    setFlow("");
-                                }
-                            }}
-                        >
-                            <Icon
-                                as={ChevronLeft}
-                                color="fg.muted"
-                                width={"16px"}
-                                height={"16px"}
-                            />
-                        </IconButton>
-                    )}
-
-                    <Box
-                        display="flex"
-                        flexDirection="column"
-                        gap={"4px"}
-                        alignItems={"center"}
-                        width="100%"
-                    >
-                        <HeaderTitle>Deposit from Smart account</HeaderTitle>
-                    </Box>
-
-                    {handleClose && (
-                        <IconButton
-                            onClick={handleClose}
-                            minWidth={"16px"}
-                            minHeight={"16px"}
-                            maxWidth={"16px"}
-                            marginLeft={"auto"}
-                        >
-                            <Icon
-                                as={X}
-                                color="fg.muted"
-                                width={"16px"}
-                                height={"16px"}
-                            />
-                        </IconButton>
-                    )}
-                </HeaderWrapper>
-            </Modal.Header>
-            <Modal.Body>
-                <AnimatedStep key={isBootstrapping ? "bootstrap" : currentStep}>
-                    {currentStepComponent}
-                </AnimatedStep>
-            </Modal.Body>
-        </>
-    );
-};
-
-export default SmartAccountFlow;

package/src/components/steps/shared/ChooseAmountStep.tsx

@@ -1,325 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Box } from "@chakra-ui/react";
-
-import { BodyWrapper, HeaderTitle, HeaderDescription } from "../../ui/styled";
-import { Button } from "../../ui";
-import { AmountInput, AmountInputValue } from "../../AmountInput";
-import { useAppStore } from "@/store";
-import {
-    denormalizeValue,
-    compareCaseInsensitive,
-    formatNumber,
-    formatUSD,
-    normalizeValue,
-} from "@/util";
-import {
-    precisionizeNumber,
-    getPositiveDecimalValue,
-} from "@/util/common";
-import {
-    EXCHANGE_MAX_LIMIT_GAP_USD,
-    EXCHANGE_MIN_LIMIT,
-} from "@/util/constants";
-import { useAppDetails } from "@/util/enso-hooks";
-import type { MatchedToken } from "./types";
-
-const ChooseAmountStep = ({
-    setStep,
-    nextStep,
-    selectedToken,
-    prefillAmountToken,
-    mode,
-}: {
-    setStep: (step: number) => void;
-    nextStep: number;
-    selectedToken: MatchedToken | null;
-    prefillAmountToken?: string | null;
-    mode: "cex" | "smart-account";
-}) => {
-    const [amountInput, setAmountInput] = useState<AmountInputValue>({
-        tokenAmount: "",
-        usdAmount: "",
-        mode: "usd",
-    });
-    const initializedTokenKeyRef = useRef<string | null>(null);
-    const setAmountIn = useAppStore((s) => s.setAmountIn);
-    const amountInStore = useAppStore((s) => s.amountIn);
-    const chainIdInStore = useAppStore((s) => s.chainIdIn);
-    const tokenInStore = useAppStore((s) => s.tokenIn);
-    const { tokenInData } = useAppDetails();
-    const isStable = selectedToken?.symbol.toLowerCase().includes("USD");
-    const roundingPrecision = isStable ? 2 : 6;
-    const amount = amountInput.tokenAmount;
-    const usdValue = amountInput.usdAmount;
-
-    const isCex = mode === "cex";
-
-    const maxUsdAmount = selectedToken
-        ? isCex
-            ? (selectedToken.marketValue - EXCHANGE_MAX_LIMIT_GAP_USD).toFixed(2)
-            : selectedToken.marketValue.toFixed(2)
-        : 0;
-
-    const tokenPriceUsd = useMemo(() => {
-        if (!selectedToken || !selectedToken.balance) return undefined;
-        return selectedToken.marketValue / selectedToken.balance;
-    }, [selectedToken]);
-
-    const getPercentAmounts = useCallback(
-        (percent: number) => {
-            if (!selectedToken) return;
-
-            const targetUsdAmount = (selectedToken.marketValue * percent) / 100;
-
-            let finalUsdAmount: number;
-            let finalTokenAmount: number;
-
-            if (isCex) {
-                const minValueForToken =
-                    EXCHANGE_MIN_LIMIT[
-                        selectedToken.symbol as keyof typeof EXCHANGE_MIN_LIMIT
-                    ] || 0;
-
-                finalUsdAmount = Math.max(
-                    minValueForToken,
-                    Math.min(targetUsdAmount, +maxUsdAmount),
-                );
-
-                const tokenPrice =
-                    selectedToken.marketValue / selectedToken.balance;
-                finalTokenAmount = Math.min(
-                    finalUsdAmount / tokenPrice,
-                    selectedToken.balance,
-                );
-            } else {
-                finalUsdAmount = targetUsdAmount;
-                finalTokenAmount = (selectedToken.balance * percent) / 100;
-            }
-
-            return {
-                tokenAmount: precisionizeNumber(
-                    finalTokenAmount,
-                    roundingPrecision,
-                ),
-                usdAmount: finalUsdAmount.toFixed(2),
-            };
-        },
-        [selectedToken, isCex, maxUsdAmount, roundingPrecision],
-    );
-
-    // Set initial value on token change.
-    useEffect(() => {
-        if (!selectedToken) return;
-
-        const tokenKey = [
-            selectedToken.chainId,
-            selectedToken.symbol,
-            selectedToken.tokenAddress ?? "",
-        ].join(":");
-        if (initializedTokenKeyRef.current === tokenKey) return;
-
-        const storeMatchesSelectedToken =
-            !!selectedToken.tokenAddress &&
-            !!chainIdInStore &&
-            chainIdInStore === selectedToken.chainId &&
-            compareCaseInsensitive(tokenInStore, selectedToken.tokenAddress);
-
-        let tokenAmountToUse: string | null = null;
-
-        if (
-            storeMatchesSelectedToken &&
-            tokenInData?.decimals &&
-            amountInStore &&
-            amountInStore !== "0"
-        ) {
-            const normalizedStoreAmount = normalizeValue(
-                amountInStore,
-                tokenInData.decimals,
-            );
-            const normalizedNumber = Number(normalizedStoreAmount);
-            if (Number.isFinite(normalizedNumber) && normalizedNumber > 0) {
-                tokenAmountToUse = precisionizeNumber(
-                    normalizedNumber,
-                    roundingPrecision,
-                );
-            }
-        }
-
-        if (!tokenAmountToUse && prefillAmountToken) {
-            const prefillNumber = Number(prefillAmountToken);
-            if (Number.isFinite(prefillNumber) && prefillNumber > 0) {
-                tokenAmountToUse = precisionizeNumber(
-                    prefillNumber,
-                    roundingPrecision,
-                );
-            }
-        }
-
-        if (tokenAmountToUse) {
-            const usdAmountToUse =
-                tokenPriceUsd && tokenPriceUsd > 0
-                    ? (Number(tokenAmountToUse) * tokenPriceUsd).toFixed(2)
-                    : "";
-
-            setAmountInput((prev) => ({
-                ...prev,
-                tokenAmount: tokenAmountToUse as string,
-                usdAmount: usdAmountToUse,
-            }));
-            initializedTokenKeyRef.current = tokenKey;
-            return;
-        }
-
-        const percentAmounts = getPercentAmounts(100);
-        if (!percentAmounts) return;
-
-        setAmountInput((prev) => ({
-            ...prev,
-            ...percentAmounts,
-        }));
-        initializedTokenKeyRef.current = tokenKey;
-    }, [
-        amountInStore,
-        chainIdInStore,
-        getPercentAmounts,
-        prefillAmountToken,
-        roundingPrecision,
-        selectedToken,
-        tokenInData?.decimals,
-        tokenInStore,
-        tokenPriceUsd,
-    ]);
-
-    useEffect(() => {
-        if (!tokenInData?.decimals) return;
-
-        const normalizedAmount = amount.endsWith(".")
-            ? amount.slice(0, -1)
-            : amount;
-
-        if (!normalizedAmount || normalizedAmount === ".") {
-            setAmountIn("0");
-            return;
-        }
-
-        try {
-            setAmountIn(
-                denormalizeValue(normalizedAmount, tokenInData.decimals),
-            );
-        } catch (error) {
-            setAmountIn("0");
-        }
-    }, [amount, tokenInData?.decimals, setAmountIn]);
-
-    const numericAmount = getPositiveDecimalValue(amount);
-    const hasPositiveAmount = numericAmount !== null;
-    const hasUsdValue = !!usdValue && usdValue !== ".";
-    const notEnoughBalance = selectedToken
-        ? hasPositiveAmount &&
-          numericAmount !== null &&
-          numericAmount > selectedToken.balance
-        : true;
-
-    // Limits validation logic - only for CEX withdrawals
-    const currentUsdValue = hasUsdValue
-        ? (getPositiveDecimalValue(usdValue) ?? 0)
-        : 0;
-    const minValueForToken =
-        isCex && selectedToken
-            ? EXCHANGE_MIN_LIMIT[
-                  selectedToken.symbol as keyof typeof EXCHANGE_MIN_LIMIT
-              ]
-            : 0;
-
-    const isBelowMinAmount =
-        isCex &&
-        selectedToken &&
-        hasPositiveAmount &&
-        currentUsdValue > 0 &&
-        minValueForToken &&
-        numericAmount !== null &&
-        numericAmount < minValueForToken;
-    const isAboveMaxAmount =
-        isCex &&
-        selectedToken &&
-        hasPositiveAmount &&
-        currentUsdValue > 0 &&
-        currentUsdValue > +maxUsdAmount;
-
-    const isAmountInvalid =
-        !hasPositiveAmount ||
-        isBelowMinAmount ||
-        isAboveMaxAmount ||
-        notEnoughBalance;
-
-    if (!selectedToken) {
-        return (
-            <BodyWrapper>
-                <Box textAlign="center" color="fg.subtle" py={8}>
-                    No token selected
-                </Box>
-            </BodyWrapper>
-        );
-    }
-
-    return (
-        <BodyWrapper>
-            <Box mb={4} width="100%" textAlign="left">
-                <HeaderTitle>Enter Amount</HeaderTitle>
-                <HeaderDescription>
-                    Available: {formatNumber(selectedToken.balance)}{" "}
-                    {selectedToken.symbol} (
-                    {formatUSD(selectedToken.marketValue)})
-                </HeaderDescription>
-            </Box>
-
-            <Box
-                display={"flex"}
-                flexDirection={"column"}
-                gap={"8px"}
-                width="100%"
-            >
-                <AmountInput
-                    value={amountInput}
-                    onChange={setAmountInput}
-                    tokenSymbol={selectedToken.symbol}
-                    tokenPriceUsd={tokenPriceUsd}
-                    roundingPrecision={roundingPrecision}
-                    onPercentSelect={getPercentAmounts}
-                />
-            </Box>
-
-            {
-                <Box
-                    textAlign="center"
-                    color="fg.subtle"
-                    fontSize="xs"
-                    h={3}
-                    m={-1}
-                    visibility={isAmountInvalid ? "visible" : "hidden"}
-                >
-                    {!hasPositiveAmount
-                        ? "Please enter an amount"
-                        : isBelowMinAmount
-                          ? `Minimum amount is ${formatNumber(minValueForToken)} ${selectedToken.symbol}`
-                          : isAboveMaxAmount
-                            ? `Maximum amount is ${formatUSD(maxUsdAmount)} (balance - $${EXCHANGE_MAX_LIMIT_GAP_USD})`
-                            : notEnoughBalance
-                              ? "Amount exceeds available balance"
-                              : ""}
-                </Box>
-            }
-
-            <Button
-                onClick={() =>
-                    isAmountInvalid ? undefined : setStep(nextStep)
-                }
-                disabled={isAmountInvalid}
-            >
-                Continue
-            </Button>
-        </BodyWrapper>
-    );
-};
-
-export default ChooseAmountStep;