@ensofinance/checkout-widget 0.1.6 → 0.1.8

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

@@ -0,0 +1,325 @@
+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;

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

@@ -0,0 +1,117 @@
+import { useState } from "react";
+import { Flex, Skeleton } from "@chakra-ui/react";
+import { useAccount, useSignMessage } from "wagmi";
+import { getUserOperationHash } from "viem/account-abstraction";
+
+import { BodyWrapper } from "../../ui/styled";
+import { Button, Input } from "../../ui";
+import QuoteParameters from "../../QuoteParameters";
+import { TransactionDetailRow } from "../../TransactionDetailRow";
+import { useAppDetails, useRouteData } from "@/util/enso-hooks";
+import { ENTRY_POINT_ADDRESS } from "@/util/constants";
+
+const SignUserOpStep = ({
+    setStep,
+    setUserOp,
+    nextStep,
+}: {
+    nextStep: number;
+    setStep: (step: number) => void;
+    setUserOp: (userOp: any) => void;
+}) => {
+    const { chainIdIn } = useAppDetails();
+    const { routeLoading, usdAmountIn, routeData } = useRouteData();
+    const { signMessageAsync } = useSignMessage();
+    const { address } = useAccount();
+    const [isSigning, setIsSigning] = useState(false);
+
+    const handleSignUserOp = async () => {
+        if (!routeData || (routeData as any)?.error) {
+            console.error("No valid router data available");
+            return;
+        }
+
+        try {
+            setIsSigning(true);
+
+            const userOperation = routeData?.userOp;
+            if (!userOperation) {
+                console.error("No userOperation found in routeData");
+                return;
+            }
+
+            console.log("Signing userOperation:", userOperation);
+
+            const userOpHash = getUserOperationHash({
+                // @ts-ignore
+                userOperation,
+                entryPointAddress: ENTRY_POINT_ADDRESS,
+                entryPointVersion: "0.7",
+                chainId: chainIdIn,
+            });
+
+            const signature = await signMessageAsync({
+                account: address as `0x${string}`,
+                message: { raw: userOpHash as `0x${string}` },
+            });
+
+            const signedUserOp = {
+                ...userOperation,
+                signature,
+            };
+
+            console.log("signedUserOp", JSON.stringify(signedUserOp));
+
+            setUserOp(signedUserOp);
+            setStep(nextStep);
+        } catch (error) {
+            console.error("Failed to sign userOperation:", error);
+        } finally {
+            setIsSigning(false);
+        }
+    };
+
+    return (
+        <BodyWrapper>
+            <Flex
+                flexDirection={"column"}
+                gap={"16px"}
+                alignItems={"center"}
+                width={"100%"}
+            >
+                <Skeleton
+                    loading={routeLoading}
+                    width={routeLoading ? "156px" : "auto"}
+                >
+                    <Input
+                        readOnly
+                        marginY={"8px"}
+                        variant={"text"}
+                        placeholder={"$10.00"}
+                        value={usdAmountIn}
+                    />
+                </Skeleton>
+
+                <QuoteParameters />
+            </Flex>
+
+            <TransactionDetailRow />
+
+            <Button
+                disabled={
+                    !!(routeData as any)?.message || routeLoading || isSigning
+                }
+                loading={routeLoading || isSigning}
+                onClick={handleSignUserOp}
+            >
+                {routeLoading
+                    ? "Loading quote"
+                    : isSigning
+                      ? "Signing..."
+                      : "Sign Transaction"}
+            </Button>
+        </BodyWrapper>
+    );
+};
+
+export default SignUserOpStep;