@ensofinance/checkout-widget 0.0.12 → 0.0.14

package/src/util/enso-hooks.tsx

@@ -1,13 +1,77 @@
-import { useAccount, useWalletClient } from "wagmi";
+import { useAccount, useWalletClient, useReadContract } from "wagmi";
 import { useCapabilities, useSendCalls } from "wagmi/experimental";
-import { Address } from "viem";
+import { Address, parseAbiItem } from "viem";
 import { useCallback, useMemo } from "react";
-import { useEnsoToken, useEnsoPrice, useEnsoData } from "@/enso-api/api";
+import {
+    useEnsoToken,
+    useEnsoPrice,
+    useTokenizedRouteData,
+    useSmartAccountBalance,
+    useIsNontokenized,
+    useNontokenizedRouteData,
+} from "@/enso-api/api";
 import { getWalletDisplayName, getWalletIcon } from "@/util/wallet";
 import { formatUSD, normalizeValue } from "@/util";
 import { useAppStore } from "@/store";
 import { VITALIK_ADDRESS } from "./constants";
 
+export function getERC4337CloneFactory(chainId: ChainIds): AddressArg {
+    return "0x1a59347d28f64091079fa04a2cbd03da63dff154";
+}
+
+const GET_SMART_ADDRESS = parseAbiItem(
+    "function getAddress(address) external view returns (address)",
+);
+
+export const useSmartAccountAddress = (
+    ownerAddress?: Address,
+    chainId?: number,
+) => {
+    const factoryAddress = getERC4337CloneFactory(chainId);
+
+    const {
+        data: smartAccountAddress,
+        isLoading,
+        error,
+    } = useReadContract({
+        address: factoryAddress as Address,
+        abi: [GET_SMART_ADDRESS],
+        functionName: "getAddress",
+        args: ownerAddress ? [ownerAddress] : undefined,
+        chainId,
+        query: {
+            enabled: !!(factoryAddress && ownerAddress && chainId),
+        },
+    });
+
+    return {
+        smartAccountAddress: smartAccountAddress as Address | undefined,
+        isLoading,
+    };
+};
+
+export const useSmartAccountBalances = (chainId: number = 1) => {
+    const { address } = useAccount();
+
+    // Get smart account address for the given chain
+    const { smartAccountAddress, isLoading: isLoadingSmartAccount } =
+        useSmartAccountAddress(address, chainId);
+
+    // Get balances from smart account
+    const {
+        holdingsList,
+        total,
+        isLoading: isLoadingBalances,
+    } = useSmartAccountBalance(smartAccountAddress);
+
+    return {
+        smartAccountAddress,
+        holdingsList,
+        total,
+        isLoading: isLoadingSmartAccount || isLoadingBalances,
+    };
+};
+
 export const useAppDetails = () => {
     const { address = VITALIK_ADDRESS } = useAccount();
     const amountIn = useAppStore((state) => state.amountIn);
@@ -16,7 +80,9 @@ export const useAppDetails = () => {
     const slippage = useAppStore((state) => state.slippage);
     const chainIdIn = useAppStore((state) => state.chainIdIn);
     const chainIdOut = useAppStore((state) => state.chainIdOut);
-    const isCheckout = useAppStore((state) => state.isCheckout);
+    const selectedIntegration = useAppStore(
+        (state) => state.selectedIntegration,
+    );
 
     const {
         data: [tokenInData],
@@ -27,6 +93,42 @@ export const useAppDetails = () => {
     const { data: tokenInPrice } = useEnsoPrice(chainIdIn, tokenIn);
     const { data: tokenOutPrice } = useEnsoPrice(chainIdOut, tokenOut);
 
+    const { isNontokenized, nontokenizedData } = useIsNontokenized(
+        tokenOut,
+        chainIdOut,
+    );
+
+    // Use underlying tokens if target is nontokenized, otherwise use tokenOutData
+    const effectiveTokenOutData = useMemo(() => {
+        if (isNontokenized && nontokenizedData?.underlyingTokens) {
+            // Map underlying tokens to Token format with logoURI
+            const underlyingTokens = nontokenizedData.underlyingTokens.map(
+                (token) => ({
+                    ...token,
+                    logoURI: token.logosUri?.[0],
+                }),
+            );
+
+            // Return first underlying token as primary, with all underlyingTokens available
+            return {
+                ...underlyingTokens[0],
+                underlyingTokens,
+                protocol: nontokenizedData.protocol,
+                name:
+                    nontokenizedData.protocol + " " + underlyingTokens[0].name,
+                isNontokenized: true,
+            };
+        }
+
+        return tokenOutData;
+    }, [isNontokenized, nontokenizedData, tokenOutData]);
+
+    const nontokenizedPrice = useEnsoPrice(
+        chainIdOut,
+        effectiveTokenOutData?.address,
+    );
+    const effectivePrice = isNontokenized ? nontokenizedPrice : tokenOutPrice;
+
     return {
         chainIdIn,
         chainIdOut,
@@ -39,7 +141,10 @@ export const useAppDetails = () => {
         tokenOutPrice,
         tokenIn,
         tokenOut,
-        isCheckout,
+        selectedIntegration,
+        effectiveTokenOutData,
+        effectivePrice,
+        isNontokenized,
     };
 };
 
@@ -59,7 +164,7 @@ export const useSendTxns = ({
     // const useFallback = !atomicOkay; // one-line policy; tweak to taste
     const wallet = useWalletClient();
 
-    console.log(caps, atomicOkay);
+    console.log(caps, atomicOkay, wallet.data);
 
     const sendTxns = useCallback(
         async (
@@ -147,16 +252,12 @@ export const useRouteData = () => {
         tokenInPrice,
         tokenIn,
         tokenOut,
-        isCheckout,
+        selectedIntegration,
+        isNontokenized,
     } = useAppDetails();
 
-    const {
-        data: routeData,
-        isLoading,
-        error,
-        isFetched,
-    } = useEnsoData({
-        routingStrategy: isCheckout ? "checkout" : "router",
+    const standardRoute = useTokenizedRouteData({
+        routingStrategy: selectedIntegration?.type ? "checkout" : "router",
         fromAddress: address,
         receiver: address,
         spender: address,
@@ -166,8 +267,30 @@ export const useRouteData = () => {
         slippage,
         chainId: chainIdIn,
         outChainId: chainIdOut,
+        enabled: !isNontokenized,
     });
 
+    const nontokenizedRoute = useNontokenizedRouteData({
+        routingStrategy: selectedIntegration?.type ? "checkout" : "router",
+        fromAddress: address,
+        receiver: address,
+        spender: address,
+        amountIn,
+        tokenIn,
+        positionOut: tokenOut,
+        slippage,
+        chainId: chainIdIn,
+        outChainId: chainIdOut,
+        enabled: isNontokenized,
+    });
+
+    const {
+        data: routeData,
+        isLoading,
+        error,
+        isFetched,
+    } = isNontokenized ? nontokenizedRoute : standardRoute;
+
     const usdAmountIn = useMemo(
         () =>
             formatUSD(

package/src/util/wallet.tsx

@@ -1,25 +1,11 @@
-import {
-    ReactElement,
-    ReactNode,
-    useCallback,
-    useEffect,
-    useState,
-} from "react";
-import {
-    useAccount,
-    useBalance,
-    useReadContract,
-    useSendTransaction,
-    UseSimulateContractParameters,
-} from "wagmi";
+import { ReactElement, useCallback, useEffect, useState } from "react";
+import { useAccount, useBalance, useReadContract } from "wagmi";
 import { Address, isAddress, erc20Abi } from "viem";
 import { WalletIcon } from "lucide-react";
 import { useQueryClient } from "@tanstack/react-query";
-import { RouteData } from "@ensofinance/sdk";
 import { usePriorityChainId } from "./common";
 import { ETH_ADDRESS, SupportedChainId } from "@/util/constants";
 import { compareCaseInsensitive } from "@/util/index";
-import { toaster } from "@/components/ui/toaster";
 
 import metamaskIcon from "@/assets/metamask.png";
 import rabbyIcon from "@/assets/rabby.png";
@@ -139,40 +125,6 @@ export const useAllowance = (token: Address, spender: Address) => {
     };
 };
 
-export const useExtendedSendTransaction = ({
-    title,
-    args,
-    onSuccess,
-    crosschain,
-}: {
-    title: string;
-    args: UseSimulateContractParameters;
-    onSuccess?: (hash: string) => void;
-    crosschain?: boolean;
-}) => {
-    const sendTransaction = useSendTransaction();
-
-    const send = useCallback(() => {
-        sendTransaction.sendTransaction(args, {
-            onError: (error) => {
-                toaster.create({
-                    title: "Error",
-                    // @ts-ignore
-                    description: error?.cause?.shortMessage || error.message,
-                    type: "error",
-                });
-                console.error(error);
-            },
-            onSuccess,
-        });
-    }, [sendTransaction, args, onSuccess]);
-
-    return {
-        ...sendTransaction,
-        send,
-    };
-};
-
 export const useIsApproveNeeded = (
     tokenIn: Address,
     target: Address = "0xF75584eF6673aD213a685a1B58Cc0330B8eA22Cf",
@@ -193,25 +145,6 @@ export const useIsApproveNeeded = (
     };
 };
 
-export const useSendEnsoTransaction = ({
-    args,
-    title,
-    crosschain,
-    onSuccess,
-}: {
-    args: RouteData["tx"];
-    title: string;
-    crosschain?: boolean;
-    onSuccess?: (hash: string) => void;
-}) => {
-    return useExtendedSendTransaction({
-        title,
-        args,
-        crosschain,
-        onSuccess,
-    });
-};
-
 /**
  * Get the appropriate wallet icon based on the connector name
  * @param connectorName - The name of the wallet connector

package/src/components/steps/WalletAmountStep.tsx

@@ -1,267 +0,0 @@
-import { Box, Icon, Text } from "@chakra-ui/react";
-import { HeaderWrapper, HeaderTitle, BodyWrapper } from "../ui/styled";
-import { ChevronLeft, X, ArrowDownUpIcon } from "lucide-react";
-import { useContext, useState, useEffect, useMemo } from "react";
-import { Address } from "viem";
-import Modal from "../modal";
-import { CheckoutContext } from "../Checkout";
-import { Button, IconButton, Tab, Input } from "../ui";
-import CurrencySwapDisplay from "../CurrencySwapDisplay";
-import { useEnsoPrice, useEnsoToken } from "@/enso-api/api";
-import { useAppStore } from "@/store";
-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 = ({ nextStep }: { nextStep?: string }) => {
-    const { handleClose, setStep } = useContext(CheckoutContext);
-    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 (
-        <>
-            <Modal.Header>
-                <HeaderWrapper>
-                    <IconButton
-                        minWidth={"16px"}
-                        minHeight={"16px"}
-                        maxWidth={"16px"}
-                        onClick={() => setStep("selectToken")}
-                    >
-                        <Icon
-                            as={ChevronLeft}
-                            color="gray"
-                            width={"16px"}
-                            height={"16px"}
-                        />
-                    </IconButton>
-
-                    <Box display="flex" flexDirection="column" gap={"4px"}>
-                        <HeaderTitle>Deposit</HeaderTitle>
-                    </Box>
-
-                    {handleClose && (
-                        <IconButton
-                            onClick={handleClose}
-                            width={"40px"}
-                            marginLeft={"auto"}
-                        >
-                            <Icon
-                                as={X}
-                                color="gray"
-                                width={"16px"}
-                                height={"16px"}
-                            />
-                        </IconButton>
-                    )}
-                </HeaderWrapper>
-            </Modal.Header>
-
-            <Modal.Body>
-                <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={() =>
-                            notEnoughBalance
-                                ? undefined
-                                : setStep(nextStep ?? "quote")
-                        }
-                        disabled={notEnoughBalance}
-                    >
-                        Continue
-                    </Button>
-                </BodyWrapper>
-            </Modal.Body>
-        </>
-    );
-};
-
-export default WalletAmountStep;

package/src/components/steps/WalletTokenStep.tsx

@@ -1,128 +0,0 @@
-import { Box, Icon, Skeleton } from "@chakra-ui/react";
-import {
-    HeaderWrapper,
-    HeaderTitle,
-    HeaderDescription,
-    ListWrapper,
-    BodyWrapper,
-} from "../ui/styled";
-import { ChevronLeft, X } from "lucide-react";
-import { useContext, useEffect } from "react";
-import Modal from "../modal";
-import { CheckoutContext } from "../Checkout";
-import { Button, IconButton } from "../ui";
-import { AssetCard } from "../cards";
-import { useAppStore } from "@/store";
-import { useWalletBalance } from "@/enso-api/api";
-import { formatNumber, formatUSD, normalizeValue } from "@/util";
-
-const SelectTokenStep = () => {
-    const { handleClose, setFlow, setStep } = useContext(CheckoutContext);
-    const setIsCheckout = useAppStore((state) => state.setIsCheckout);
-    const setTokenIn = useAppStore((state) => state.setTokenIn);
-    const tokenIn = useAppStore((state) => state.tokenIn);
-    const setChainIdIn = useAppStore((state) => state.setChainIdIn);
-    const chainIdIn = useAppStore((state) => state.chainIdIn);
-    const { holdingsList, total, isLoading } = useWalletBalance();
-
-    useEffect(() => {
-        setIsCheckout(false);
-    }, []);
-
-    return (
-        <>
-            <Modal.Header>
-                <HeaderWrapper>
-                    <IconButton
-                        minWidth={"16px"}
-                        minHeight={"16px"}
-                        maxWidth={"16px"}
-                        onClick={() => {
-                            setFlow("");
-                            setStep("");
-                        }}
-                    >
-                        <Icon
-                            as={ChevronLeft}
-                            color="gray"
-                            width={"16px"}
-                            height={"16px"}
-                        />
-                    </IconButton>
-                    <Box display="flex" flexDirection="column" gap={"4px"}>
-                        <HeaderTitle>Deposit</HeaderTitle>
-                        <HeaderDescription>
-                            Balance: {formatUSD(total)}
-                        </HeaderDescription>
-                    </Box>
-                    {handleClose && (
-                        <IconButton
-                            onClick={handleClose}
-                            width={"40px"}
-                            marginLeft={"auto"}
-                        >
-                            <Icon
-                                as={X}
-                                color="gray"
-                                width={"16px"}
-                                height={"16px"}
-                            />
-                        </IconButton>
-                    )}
-                </HeaderWrapper>
-            </Modal.Header>
-
-            <Modal.Body>
-                <BodyWrapper>
-                    <Box overflowY={"scroll"} maxH={"400px"}>
-                        <ListWrapper>
-                            {isLoading
-                                ? Array.from({ length: 10 }).map((_, index) => (
-                                      <Skeleton
-                                          key={index}
-                                          height="40px"
-                                          width="300px"
-                                      />
-                                  ))
-                                : 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={
-                                              asset.token === tokenIn &&
-                                              asset.chainId === chainIdIn
-                                          }
-                                          onClick={() => {
-                                              setTokenIn(asset.token);
-                                              setChainIdIn(asset.chainId);
-                                          }}
-                                      />
-                                  ))}
-                        </ListWrapper>
-                    </Box>
-                    <Button
-                        onClick={() => {
-                            setStep("selectAmount");
-                        }}
-                        disabled={!tokenIn}
-                    >
-                        Continue
-                    </Button>
-                </BodyWrapper>
-            </Modal.Body>
-        </>
-    );
-};
-
-export default SelectTokenStep;