@ensofinance/checkout-widget 0.0.14 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ensofinance/checkout-widget",
-    "version": "0.0.14",
+    "version": "0.0.16",
     "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

@@ -515,8 +515,7 @@ const ChooseAssetStep = ({
                             "x-session-id": sessionId,
                         },
                         body: JSON.stringify({
-                            authToken:
-                                meshAccessToken.accountTokens[0].accessToken,
+                            authToken: meshAccessToken,
                             brokerType: selectedIntegration?.type,
                         }),
                     },

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

@@ -7,6 +7,7 @@ import {
     useWalletControllerWalletBalances,
     useNonTokenizedControllerTokens,
     useNontokenizedControllerRouteNontokenizedShorcutTransaction,
+    useProtocolsControllerFindAll,
 } from "@/enso-api";
 import { useMemo } from "react";
 import { usePricesControllerGetPrice } from "@/enso-api";
@@ -19,6 +20,7 @@ import {
     RouterControllerRouteShortcutTransactionParams,
     NontokenizedControllerRouteNontokenizedShorcutTransactionParams,
     NonTokenizedModel,
+    ProtocolModel,
 } from "./model";
 
 export const useWalletBalance = () => {
@@ -242,6 +244,46 @@ export const useApproveData = ({
     return { approveData: res.data, approveFetched: res.isFetched };
 };
 
+export const useProtocolsMap = () => {
+    const { data, isLoading } = useProtocolsControllerFindAll(
+        {},
+        {
+            query: {
+                enabled: true,
+                staleTime: 1000 * 60 * 60,
+            },
+        },
+    );
+
+    const protocolsMap = useMemo(() => {
+        if (!data) return new Map<string, ProtocolModel>();
+
+        const map = new Map<string, ProtocolModel>();
+        data.forEach((protocol) => {
+            map.set(protocol.slug.toLowerCase(), protocol);
+        });
+
+        return map;
+    }, [data]);
+
+    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 { protocolData, isLoading };
+};
+
 export const useNontokenizedTokens = () => {
     const config = useConfig();
 

package/src/util/common.tsx

@@ -20,6 +20,9 @@ export type Token = {
     type?: string;
     apy?: number;
     tvl?: number;
+    protocol?: string;
+    protocolName?: string;
+    protocolLogo?: string;
 };
 
 export const compareCaseInsensitive = (a: string, b: string) => {

package/src/util/enso-hooks.tsx

@@ -9,6 +9,7 @@ import {
     useSmartAccountBalance,
     useIsNontokenized,
     useNontokenizedRouteData,
+    useProtocolData,
 } from "@/enso-api/api";
 import { getWalletDisplayName, getWalletIcon } from "@/util/wallet";
 import { formatUSD, normalizeValue } from "@/util";
@@ -98,6 +99,11 @@ export const useAppDetails = () => {
         chainIdOut,
     );
 
+    // Fetch protocol data from Enso API
+    const { protocolData } = useProtocolData(
+        isNontokenized ? nontokenizedData?.protocol : undefined,
+    );
+
     // Use underlying tokens if target is nontokenized, otherwise use tokenOutData
     const effectiveTokenOutData = useMemo(() => {
         if (isNontokenized && nontokenizedData?.underlyingTokens) {
@@ -109,19 +115,21 @@ export const useAppDetails = () => {
                 }),
             );
 
+            const protocolName = protocolData?.name || nontokenizedData.protocol;
+
             // 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,
+                protocolName,
+                protocolLogo: protocolData?.logoUri || undefined,
+                name: protocolName + " " + underlyingTokens[0].name,
             };
         }
 
         return tokenOutData;
-    }, [isNontokenized, nontokenizedData, tokenOutData]);
+    }, [isNontokenized, nontokenizedData, tokenOutData, protocolData]);
 
     const nontokenizedPrice = useEnsoPrice(
         chainIdOut,