@ensofinance/checkout-widget 0.0.13 → 0.0.14

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

@@ -6,7 +6,7 @@ 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 { useEnsoPrice } from "@/enso-api/api";
 import {
     normalizeValue,
     denormalizeValue,
@@ -14,6 +14,7 @@ import {
     formatUSD,
 } from "@/util";
 import { useTokenBalance } from "@/util/wallet";
+import { useAppDetails } from "@/util/enso-hooks";
 
 type InputMode = "usd" | "token";
 
@@ -29,31 +30,28 @@ const WalletAmountStep = ({ setStep }: { setStep: (step: string) => void }) => {
     // 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);
+        tokenInData,
+        effectiveTokenOutData,
+        tokenIn,
+        chainIdOut,
+        chainIdIn,
+    } = useAppDetails();
+
     const { data: priceData } = useEnsoPrice(chainIdIn, tokenIn);
 
     const tokenValue = useMemo(() => {
-        return normalizeValue(amountIn, tokenDetails?.decimals);
-    }, [amountIn, tokenDetails?.decimals]);
+        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 || !tokenDetails?.decimals) {
+        if (!balanceIn || !priceData || !tokenInData?.decimals) {
             setUsdValue("0.00");
             return;
         }
@@ -66,33 +64,33 @@ const WalletAmountStep = ({ setStep }: { setStep: (step: string) => void }) => {
         setAmountIn(amountToSet);
         setUsdValue(
             (
-                +normalizeValue(amountToSet, tokenDetails?.decimals) * priceData
+                +normalizeValue(amountToSet, tokenInData?.decimals) * priceData
             ).toFixed(2),
         );
     };
 
     useEffect(() => {
-        if (initialLoad && priceData && tokenDetails && +balanceIn > 0) {
+        if (initialLoad && priceData && tokenInData && +balanceIn > 0) {
             setInitialLoad(false);
             handlePercentageSelect(100);
         }
-    }, [balanceIn, initialLoad, priceData, tokenDetails, balanceIn]);
+    }, [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, tokenDetails?.decimals);
+            console.log(cleanUsd, priceData, tokenInData?.decimals);
             setUsdValue(cleanUsd);
             setAmountIn(
                 denormalizeValue(
                     (parseFloat(cleanUsd) / priceData).toString(),
-                    tokenDetails?.decimals,
+                    tokenInData?.decimals,
                 ),
             );
         } else {
-            setAmountIn(denormalizeValue(value, tokenDetails?.decimals));
+            setAmountIn(denormalizeValue(value, tokenInData?.decimals));
             setUsdValue((parseFloat(value) * priceData).toFixed(2));
         }
     };
@@ -112,7 +110,7 @@ const WalletAmountStep = ({ setStep }: { setStep: (step: string) => void }) => {
                 placeholder: "$10.00",
                 displayValue: safeUsdValue ? `$${safeUsdValue}` : "",
                 equivalentValue: tokenValue
-                    ? `${formattedValue} ${tokenDetails?.symbol}`
+                    ? `${formattedValue} ${tokenInData?.symbol}`
                     : "—",
             };
         }
@@ -178,6 +176,7 @@ const WalletAmountStep = ({ setStep }: { setStep: (step: string) => void }) => {
                         </Text>
                     </Box>
                 </Box>
+
                 <Box
                     display={"flex"}
                     gap={"4px"}
@@ -196,8 +195,8 @@ const WalletAmountStep = ({ setStep }: { setStep: (step: string) => void }) => {
             </Box>
 
             <CurrencySwapDisplay
-                tokenOut={tokenOutDetails}
-                tokenIn={tokenDetails}
+                tokenOut={effectiveTokenOutData}
+                tokenIn={tokenInData}
                 chainIdIn={chainIdIn}
                 chainIdOut={chainIdOut}
             />

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

@@ -8,15 +8,17 @@ import { useWalletBalance } from "@/enso-api/api";
 import { formatNumber, formatUSD, normalizeValue } from "@/util";
 
 const WalletAssetStep = ({ setStep }: { setStep: (step: string) => void }) => {
-    const setIsCheckout = useAppStore((state) => state.setActiveExchange);
+    const setSelectedIntegration = useAppStore(
+        (state) => state.setSelectedIntegration,
+    );
     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();
+    const { holdingsList, isLoading } = useWalletBalance();
 
     useEffect(() => {
-        setIsCheckout(false);
+        setSelectedIntegration(null);
     }, []);
 
     return (

package/src/components/ui/index.tsx

@@ -108,9 +108,6 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
                 variant="ghost"
                 bg="transparent"
                 border="none"
-                _hover={{
-                    bg: "bg.subtle",
-                }}
                 _active={{
                     bg: "bg.emphasized",
                 }}

package/src/enso-api/api.ts

@@ -5,6 +5,8 @@ import {
     useTokensControllerTokens,
     useWalletControllerCreateApproveTransaction,
     useWalletControllerWalletBalances,
+    useNonTokenizedControllerTokens,
+    useNontokenizedControllerRouteNontokenizedShorcutTransaction,
 } from "@/enso-api";
 import { useMemo } from "react";
 import { usePricesControllerGetPrice } from "@/enso-api";
@@ -13,7 +15,11 @@ import { useAppStore } from "@/store";
 import { Address } from "viem";
 import { formatNumber, normalizeValue } from "@/util";
 import { VITALIK_ADDRESS } from "@/util/constants";
-import { RouterControllerRouteShortcutTransactionParams } from "./model";
+import {
+    RouterControllerRouteShortcutTransactionParams,
+    NontokenizedControllerRouteNontokenizedShorcutTransactionParams,
+    NonTokenizedModel,
+} from "./model";
 
 export const useWalletBalance = () => {
     const { address } = useAccount();
@@ -140,7 +146,7 @@ export const useEnsoPrice = (chainId: number, token: string) => {
     return { data: data?.price, isLoading };
 };
 
-export const useEnsoData = ({
+export const useTokenizedRouteData = ({
     chainId,
     outChainId,
     fromAddress,
@@ -152,6 +158,7 @@ export const useEnsoData = ({
     slippage,
     referralCode,
     routingStrategy = "router",
+    enabled = true,
 }: {
     chainId: number;
     outChainId: number;
@@ -164,6 +171,7 @@ export const useEnsoData = ({
     slippage: number;
     referralCode?: string;
     routingStrategy?: "router" | "checkout";
+    enabled?: boolean;
 }) => {
     const routerParams: RouterControllerRouteShortcutTransactionParams = {
         referralCode,
@@ -202,7 +210,10 @@ export const useEnsoData = ({
             query: {
                 retry: 2,
                 enabled:
-                    !!routerParams.amountIn && !!tokenFromData && !!tokenToData,
+                    !!routerParams.amountIn &&
+                    !!tokenFromData &&
+                    !!tokenToData &&
+                    enabled,
             },
         },
     );
@@ -230,3 +241,133 @@ export const useApproveData = ({
 
     return { approveData: res.data, approveFetched: res.isFetched };
 };
+
+export const useNontokenizedTokens = () => {
+    const config = useConfig();
+
+    const supportedChainIds = useMemo(
+        () => config.chains.map((chain) => chain.id),
+        [config.chains],
+    );
+
+    const { data, isLoading } = useNonTokenizedControllerTokens(
+        {},
+        {
+            query: {
+                enabled: true,
+            },
+        },
+    );
+
+    const nontokenizedMap = useMemo(() => {
+        if (!data?.data) return new Map<string, NonTokenizedModel>();
+
+        const map = new Map<string, NonTokenizedModel>();
+        data.data.forEach((token) => {
+            if (supportedChainIds.includes(token.chainId)) {
+                const key = `${token.chainId}-${token.address.toLowerCase()}`;
+                map.set(key, token);
+            }
+        });
+
+        return map;
+    }, [data, supportedChainIds]);
+
+    console.log(nontokenizedMap);
+
+    return { nontokenizedMap, isLoading };
+};
+
+export const useIsNontokenized = (tokenAddress?: string, chainId?: number) => {
+    const { nontokenizedMap, isLoading } = useNontokenizedTokens();
+
+    const nontokenizedData = useMemo(() => {
+        if (!tokenAddress || !chainId) return null;
+
+        const key = `${chainId}-${tokenAddress.toLowerCase()}`;
+        return nontokenizedMap.get(key) || null;
+    }, [tokenAddress, chainId, nontokenizedMap]);
+
+    return {
+        isNontokenized: !!nontokenizedData,
+        nontokenizedData,
+        isLoading,
+    };
+};
+
+export const useNontokenizedRouteData = ({
+    chainId,
+    fromAddress,
+    receiver,
+    spender,
+    amountIn,
+    tokenIn,
+    positionOut,
+    slippage,
+    referralCode,
+    outChainId,
+    routingStrategy = "router",
+    enabled = true,
+}: {
+    chainId: number;
+    fromAddress: string;
+    receiver: string;
+    spender: string;
+    amountIn: string;
+    tokenIn: string;
+    positionOut: string;
+    slippage: number;
+    referralCode?: string;
+    outChainId;
+    routingStrategy?: "router" | "checkout";
+    enabled?: boolean;
+}) => {
+    const routerParams: NontokenizedControllerRouteNontokenizedShorcutTransactionParams =
+        {
+            referralCode,
+            amountIn: [amountIn],
+            tokenIn: [tokenIn],
+            positionOut,
+            slippage: slippage.toString(),
+            fromAddress,
+            receiver,
+            spender,
+            // @ts-ignore
+            routingStrategy,
+            chainId,
+        };
+
+    let isCrosschain = outChainId !== chainId;
+
+    if (isCrosschain) {
+        // @ts-ignore
+        routerParams.destinationChainId = outChainId;
+    }
+
+    const {
+        data: [tokenFromData],
+    } = useEnsoToken(tokenIn, chainId);
+
+    const swapTitle = `Purchase ${formatNumber(
+        normalizeValue(amountIn, tokenFromData?.decimals),
+    )} ${tokenFromData?.symbol} of nontokenized position`;
+
+    const routerData =
+        useNontokenizedControllerRouteNontokenizedShorcutTransaction(
+            routerParams,
+            {
+                query: {
+                    retry: 2,
+                    enabled:
+                        !!routerParams.amountIn && !!tokenFromData && enabled,
+                },
+            },
+        );
+
+    const data = {
+        ...routerData.data,
+        amountOut: routerData?.data?.amountDeposited,
+    };
+
+    return { ...routerData, data, title: swapTitle };
+};

package/src/enso-api/custom-instance.ts

@@ -18,6 +18,7 @@ export const useCustomClient = <T>(): CustomClient<T> => {
     const token = useAppStore((state) => state.ensoApiToken);
 
     return async ({ url, method, params, data }) => {
+        // const response = await fetch(url.replace("https://api.enso.finance", "http://localhost:3000") + "?" + new URLSearchParams(params), {
         const response = await fetch(url + "?" + new URLSearchParams(params), {
             method,
             headers: { ...data?.headers, Authorization: `Bearer ${token}` },