@ensofinance/checkout-widget 0.0.15 → 0.0.17

package/orval.config.ts

@@ -2,6 +2,7 @@ export default {
     enso: {
         output: {
             baseUrl: "https://api.enso.finance",
+            // baseUrl: "http://localhost:3000",
             mode: "single",
             prettier: true,
             target: "src/enso-api/index.ts",
@@ -24,17 +25,21 @@ export default {
                 transformer: (spec: any) => {
                     // Fix all malformed array schemas that have items: { type: 'array' } without proper definition
                     const fixArraySchema = (obj: any) => {
-                        if (!obj || typeof obj !== 'object') return;
+                        if (!obj || typeof obj !== "object") return;
 
                         // Fix array items that are themselves arrays without proper items definition
-                        if (obj.type === 'array' && obj.items?.type === 'array' && !obj.items.items) {
+                        if (
+                            obj.type === "array" &&
+                            obj.items?.type === "array" &&
+                            !obj.items.items
+                        ) {
                             obj.items = {
                                 anyOf: [
-                                    { type: 'string' },
-                                    { type: 'number' },
-                                    { type: 'boolean' },
-                                    { type: 'object' },
-                                ]
+                                    { type: "string" },
+                                    { type: "number" },
+                                    { type: "boolean" },
+                                    { type: "object" },
+                                ],
                             };
                         }
 
@@ -52,8 +57,8 @@ export default {
                     }
 
                     return spec;
-                }
-            }
+                },
+            },
         },
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ensofinance/checkout-widget",
-    "version": "0.0.15",
+    "version": "0.0.17",
     "type": "module",
     "homepage": "https://www.enso.build/",
     "repository": {

package/src/components/CurrencySwapDisplay.tsx

@@ -112,17 +112,91 @@ const SwapItem = ({
     );
 };
 
+// Component for displaying deposit into protocol (non-tokenized positions)
+const DepositItem = ({
+    token,
+    chainId,
+    size = 32,
+}: {
+    token: Token;
+    chainId?: SupportedChainId;
+    size?: number;
+}) => {
+    const protocolName = token?.protocolName || token?.protocol;
+    const protocolLogo = token?.protocolLogo;
+
+    return (
+        <Flex align="center" gap={2}>
+            <Box position="relative" minW={`${size}px`} minH={`${size}px`}>
+                <Box
+                    borderRadius="50%"
+                    overflow="hidden"
+                    width={`${size}px`}
+                    height={`${size}px`}
+                >
+                    <img
+                        src={protocolLogo || MOCK_IMAGE_URL}
+                        title={protocolName}
+                        alt={protocolName}
+                        width={`${size}px`}
+                        height={`${size}px`}
+                        onError={(e) => {
+                            e.currentTarget.src = MOCK_IMAGE_URL;
+                        }}
+                    />
+                </Box>
+                {chainId && (
+                    <Box
+                        position="absolute"
+                        bottom="0"
+                        right="-2px"
+                        width={`${size / 2}px`}
+                        height={`${size / 2}px`}
+                        borderRadius="50%"
+                        overflow="hidden"
+                        border="1px solid white"
+                        zIndex="1"
+                    >
+                        <img
+                            src={`https://icons-ckg.pages.dev/stargate-light/networks/${STARGATE_CHAIN_NAMES[chainId]}.svg`}
+                            alt={`Chain ${chainId}`}
+                            width="100%"
+                            height="100%"
+                        />
+                    </Box>
+                )}
+            </Box>
+            <Box>
+                <Text fontWeight="medium" fontSize="xs" color="fg.muted">
+                    Deposit{" "}
+                    <Text as="span" fontSize="xs" color="fg">
+                        {token?.symbol}
+                    </Text>
+                </Text>
+                <Text fontWeight="medium" fontSize="xs" color="fg.muted">
+                    into{" "}
+                    <Text as="span" fontSize="xs" color="fg">
+                        {protocolName}
+                    </Text>
+                </Text>
+            </Box>
+        </Flex>
+    );
+};
+
 const CurrencySwapDisplay = ({
     tokenIn,
     tokenOut,
     chainIdIn,
     chainIdOut,
+    isNontokenized = false,
     size = 24,
 }: {
     tokenIn: Token;
     tokenOut: Token;
     chainIdIn: number;
     chainIdOut: number;
+    isNontokenized?: boolean;
     size?: number;
 }) => {
     return (
@@ -139,13 +213,17 @@ const CurrencySwapDisplay = ({
                 width={"16px"}
                 height={"16px"}
             />
-            <SwapItem
-                token={tokenOut}
-                chainId={chainIdOut}
-                title={"You receive"}
-                subTitle={tokenOut?.symbol}
-                size={size}
-            />
+            {isNontokenized && tokenOut?.protocol ? (
+                <DepositItem token={tokenOut} chainId={chainIdOut} size={size} />
+            ) : (
+                <SwapItem
+                    token={tokenOut}
+                    chainId={chainIdOut}
+                    title={"You receive"}
+                    subTitle={tokenOut?.symbol}
+                    size={size}
+                />
+            )}
         </SwapWrapper>
     );
 };

package/src/components/QuoteParameters.tsx

@@ -105,6 +105,7 @@ const QuoteParameters = () => {
         amountIn,
         chainIdIn,
         selectedIntegration,
+        isNontokenized,
     } = useAppDetails();
     const { routeLoading, routeData, routeFetched, routerError } =
         useRouteData();
@@ -316,7 +317,11 @@ const QuoteParameters = () => {
                             </Table.Cell>
                         </Table.Row>
                         <Table.Row>
-                            <Table.Cell>You receive</Table.Cell>
+                            <Table.Cell>
+                                {isNontokenized && effectiveTokenOutData?.protocol
+                                    ? `Deposit into ${effectiveTokenOutData.protocolName || effectiveTokenOutData.protocol}`
+                                    : "You receive"}
+                            </Table.Cell>
                             <Table.Cell
                                 display="flex"
                                 textAlign="end"
@@ -341,11 +346,58 @@ const QuoteParameters = () => {
                                             )}{" "}
                                             {effectiveTokenOutData?.symbol}
                                         </Text>
-                                        <TokenIcon
-                                            token={effectiveTokenOutData}
-                                            chainId={chainIdOut}
-                                            size={24}
-                                        />
+                                        {isNontokenized && effectiveTokenOutData?.protocol ? (
+                                            <Box
+                                                position="relative"
+                                                minW="24px"
+                                                minH="24px"
+                                            >
+                                                <Box
+                                                    borderRadius="50%"
+                                                    overflow="hidden"
+                                                    width="24px"
+                                                    height="24px"
+                                                >
+                                                    <img
+                                                        src={effectiveTokenOutData.protocolLogo || MOCK_IMAGE_URL}
+                                                        title={effectiveTokenOutData.protocol}
+                                                        alt={effectiveTokenOutData.protocol}
+                                                        width="24px"
+                                                        height="24px"
+                                                        onError={(e) => {
+                                                            e.currentTarget.src = MOCK_IMAGE_URL;
+                                                        }}
+                                                    />
+                                                </Box>
+                                                {chainIdOut && (
+                                                    <Box
+                                                        position="absolute"
+                                                        bottom="0"
+                                                        right="-2px"
+                                                        width="12px"
+                                                        height="12px"
+                                                        borderRadius="50%"
+                                                        overflow="hidden"
+                                                        border="1px solid"
+                                                        borderColor="bg"
+                                                        zIndex="1"
+                                                    >
+                                                        <img
+                                                            src={`https://icons-ckg.pages.dev/stargate-light/networks/${STARGATE_CHAIN_NAMES[chainIdOut]}.svg`}
+                                                            alt={`Chain ${chainIdOut}`}
+                                                            width="100%"
+                                                            height="100%"
+                                                        />
+                                                    </Box>
+                                                )}
+                                            </Box>
+                                        ) : (
+                                            <TokenIcon
+                                                token={effectiveTokenOutData}
+                                                chainId={chainIdOut}
+                                                size={24}
+                                            />
+                                        )}
                                     </Box>
                                 </Skeleton>
                             </Table.Cell>

package/src/components/steps/ExchangeFlow.tsx

@@ -191,7 +191,6 @@ const useHandleMeshAccessPayload = () => {
         (accessTokenPayload: AccessTokenPayload, sessionId: string) => {
             setMeshAccessToken(accessTokenPayload); // Persist access token and session id for future reloads
 
-            debugger;
             sessionStorage.setItem(
                 `${deviceKey}:${selectedIntegration?.type}`,
                 JSON.stringify({
@@ -349,7 +348,6 @@ const CheckSessionKeyStep = ({
             `${deviceKey}:${selectedIntegration.type}`,
         );
         // On load: check for persisted connection and hydrate state
-        debugger;
         if (saved) {
             try {
                 const parsed = JSON.parse(saved);

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

@@ -39,6 +39,7 @@ const WalletAmountStep = ({ setStep }: { setStep: (step: string) => void }) => {
         tokenIn,
         chainIdOut,
         chainIdIn,
+        isNontokenized,
     } = useAppDetails();
 
     const { data: priceData } = useEnsoPrice(chainIdIn, tokenIn);
@@ -199,6 +200,7 @@ const WalletAmountStep = ({ setStep }: { setStep: (step: string) => void }) => {
                 tokenIn={tokenInData}
                 chainIdIn={chainIdIn}
                 chainIdOut={chainIdOut}
+                isNontokenized={isNontokenized}
             />
 
             <Button

package/src/enso-api/api.ts

@@ -1,12 +1,12 @@
 import { useAccount, useConfig } from "wagmi";
 import {
-    useRouterControllerPostRouteShortcutTransaction,
     useRouterControllerRouteShortcutTransaction,
     useTokensControllerTokens,
     useWalletControllerCreateApproveTransaction,
     useWalletControllerWalletBalances,
     useNonTokenizedControllerTokens,
     useNontokenizedControllerRouteNontokenizedShorcutTransaction,
+    useProtocolsControllerFindAll,
 } from "@/enso-api";
 import { useMemo } from "react";
 import { usePricesControllerGetPrice } from "@/enso-api";
@@ -14,11 +14,10 @@ import { Token } from "@/util/common";
 import { useAppStore } from "@/store";
 import { Address } from "viem";
 import { formatNumber, normalizeValue } from "@/util";
-import { VITALIK_ADDRESS } from "@/util/constants";
 import {
     RouterControllerRouteShortcutTransactionParams,
     NontokenizedControllerRouteNontokenizedShorcutTransactionParams,
-    NonTokenizedModel,
+    ProtocolModel,
 } from "./model";
 
 export const useWalletBalance = () => {
@@ -242,54 +241,74 @@ 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(
+export const useProtocolsMap = () => {
+    const { data, isLoading } = useProtocolsControllerFindAll(
         {},
         {
             query: {
                 enabled: true,
+                staleTime: 1000 * 60 * 60,
             },
         },
     );
 
-    const nontokenizedMap = useMemo(() => {
-        if (!data?.data) return new Map<string, NonTokenizedModel>();
+    const protocolsMap = useMemo(() => {
+        if (!data) return new Map<string, ProtocolModel>();
 
-        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);
-            }
+        const map = new Map<string, ProtocolModel>();
+        data.forEach((protocol) => {
+            map.set(protocol.slug.toLowerCase(), protocol);
         });
 
         return map;
-    }, [data, supportedChainIds]);
+    }, [data]);
 
-    console.log(nontokenizedMap);
+    return { protocolsMap, isLoading };
+};
+
+export const useProtocolData = (protocolSlug?: string) => {
+    const { protocolsMap, isLoading } = useProtocolsMap();
+
+    const protocolData = useMemo(() => {
+        if (!protocolSlug) return null;
+        const protocol = protocolsMap.get(protocolSlug.toLowerCase());
+        return {
+            logoUri: protocol?.logosUri?.[0] || null,
+            name: protocol?.name || protocolSlug,
+        };
+    }, [protocolSlug, protocolsMap]);
 
-    return { nontokenizedMap, isLoading };
+    return { protocolData, isLoading };
 };
 
 export const useIsNontokenized = (tokenAddress?: string, chainId?: number) => {
-    const { nontokenizedMap, isLoading } = useNontokenizedTokens();
-
-    const nontokenizedData = useMemo(() => {
-        if (!tokenAddress || !chainId) return null;
+    const { data, isLoading } = useNonTokenizedControllerTokens(
+        {
+            positionId: tokenAddress ? [tokenAddress] : undefined,
+            chainId,
+        },
+        {
+            query: {
+                enabled: !!tokenAddress && !!chainId,
+            },
+        },
+    );
+    const { data: addressData } = useNonTokenizedControllerTokens(
+        {
+            address: tokenAddress ? [tokenAddress] : undefined,
+            chainId,
+        },
+        {
+            query: {
+                enabled: !!tokenAddress && !!chainId,
+            },
+        },
+    );
 
-        const key = `${chainId}-${tokenAddress.toLowerCase()}`;
-        return nontokenizedMap.get(key) || null;
-    }, [tokenAddress, chainId, nontokenizedMap]);
+    const nontokenizedData = data?.data?.[0] || addressData?.data?.[0] || null;
 
     return {
-        isNontokenized: !!nontokenizedData,
+        isNontokenized: Boolean(nontokenizedData),
         nontokenizedData,
         isLoading,
     };