@ensofinance/checkout-widget 0.0.12 → 0.0.14

package/dist/index.d.ts

@@ -16,6 +16,13 @@ export declare const CheckoutModal: ({ config, setIsActive, isActive, onClose, }
 
 export { CheckoutModalProps }
 
+export declare enum SupportedExchanges {
+    Binance = "binance",
+    Kraken = "kraken",
+    Coinbase = "coinbase",
+    Bybit = "bybit"
+}
+
 export { WidgetTheme }
 
 export { }

package/orval.config.ts

@@ -8,11 +8,9 @@ export default {
             schemas: "src/enso-api/model",
             client: "react-query",
             override: {
-                query: {
-                    options: {
-                        refetchInterval: 30_000,
-                        retry: 2,
-                    },
+                queryOptions: {
+                    refetchInterval: 30_000,
+                    retry: 2,
                 },
                 mutator: {
                     path: "./src/enso-api/custom-instance.ts",
@@ -20,6 +18,42 @@ export default {
                 },
             },
         },
-        input: "https://api.enso.finance/api-yaml",
+        input: {
+            target: "https://api.enso.finance/api-yaml",
+            override: {
+                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;
+
+                        // Fix array items that are themselves arrays without proper items definition
+                        if (obj.type === 'array' && obj.items?.type === 'array' && !obj.items.items) {
+                            obj.items = {
+                                anyOf: [
+                                    { type: 'string' },
+                                    { type: 'number' },
+                                    { type: 'boolean' },
+                                    { type: 'object' },
+                                ]
+                            };
+                        }
+
+                        // Recursively fix nested objects
+                        for (const key in obj) {
+                            if (obj.hasOwnProperty(key)) {
+                                fixArraySchema(obj[key]);
+                            }
+                        }
+                    };
+
+                    // Apply fix to all schemas
+                    if (spec.components?.schemas) {
+                        fixArraySchema(spec.components.schemas);
+                    }
+
+                    return spec;
+                }
+            }
+        },
     },
 };

package/package.json

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

package/src/components/BridgeFee.tsx

@@ -13,7 +13,7 @@ import { Fuel } from "lucide-react";
 import { Tooltip } from "./ui/tooltip";
 
 const BridgingFee = () => {
-    const { routerData } = useRouteData();
+    const { routeData } = useRouteData();
     const { tokenIn, chainIdIn, amountIn } = useAppDetails();
     const { data: nativeTokenPriceData } = useEnsoPrice(chainIdIn, ETH_ADDRESS);
     const {
@@ -21,14 +21,14 @@ const BridgingFee = () => {
     } = useEnsoToken(ETH_ADDRESS, chainIdIn);
 
     const gasValue = useMemo(() => {
-        let txCost = +(routerData?.tx?.value ?? 0);
+        let txCost = +(routeData?.tx?.value ?? 0);
 
         if (compareCaseInsensitive(tokenIn, ETH_ADDRESS)) {
             txCost -= +amountIn;
         }
 
         return normalizeValue(Math.max(0, txCost).toString(), 18);
-    }, [routerData?.tx?.value, tokenIn, amountIn]);
+    }, [routeData?.tx?.value, tokenIn, amountIn]);
 
     const gasCostUSD = +gasValue * +(nativeTokenPriceData ?? 0);
 

package/src/components/Checkout.tsx

@@ -1,54 +1,15 @@
-import {
-    createContext,
-    ReactElement,
-    useEffect,
-    useMemo,
-    useState,
-    ComponentType,
-} from "react";
+import { createContext, useEffect, useMemo, ComponentType } from "react";
 import { Box } from "@chakra-ui/react";
-import InitialStep from "./steps/InitialStep";
-import SelectTokenStep from "./steps/WalletTokenStep";
-import SelectAmountStep from "./steps/WalletAmountStep";
-import QuoteStep from "./steps/QuoteStep";
-import WalletConfirmStep from "./steps/WalletConfirmStep";
-import ExchangeFlow from "./steps/ExchangeFlow";
+import FlowSelector from "./steps/FlowSelector";
 import { useAppStore } from "@/store";
 import { TxTracker } from "@/util/tx-tracker";
 import ChakraProvider from "./ChakraProvider";
 import { type CheckoutConfig, type SupportedExchanges } from "@/types";
 
 type ICheckoutContext = {
-    step: string;
-    setStep: (step: string) => void;
-
-    flow: string;
-    setFlow: (flow: string) => void;
-
     handleClose: () => void;
 
-    enableExchanges?: SupportedExchanges[];
-};
-
-const FLOWS: Record<
-    string,
-    {
-        steps: Record<string, ReactElement>;
-    }
-> = {
-    mainFlow: {
-        steps: {
-            selectToken: <SelectTokenStep />,
-            selectAmount: <SelectAmountStep />,
-            quote: <QuoteStep />,
-            confirmTransfer: <WalletConfirmStep />,
-        },
-    },
-    exchangeFlow: {
-        steps: {
-            connectExchange: <ExchangeFlow />,
-        },
-    },
+    enableExchange?: SupportedExchanges[];
 };
 
 const CheckoutContext = createContext<ICheckoutContext>({} as ICheckoutContext);
@@ -62,9 +23,6 @@ const Checkout = ({
     wrapper?: ComponentType;
     onClose?: () => void;
 }) => {
-    const [step, setStep] = useState("");
-    const [flow, setFlow] = useState("");
-
     const setEnsoApiToken = useAppStore((state) => state.setEnsoApiToken);
     const setTokenOut = useAppStore((state) => state.setTokenOut);
     const setChainIdOut = useAppStore((state) => state.setChainIdOut);
@@ -76,8 +34,6 @@ const Checkout = ({
                       if (onClose) {
                           onClose();
                       }
-                      setStep("");
-                      setFlow("");
                   }
                 : undefined,
         [onClose],
@@ -107,18 +63,14 @@ const Checkout = ({
     return (
         <CheckoutContext.Provider
             value={{
-                step,
-                setStep,
-                flow,
-                setFlow,
                 handleClose,
-                enableExchanges: enableExchange,
+                enableExchange,
             }}
         >
             <ChakraProvider themeConfig={theme}>
                 <WrapperComponent>
                     <TxTracker />
-                    {!flow && !step ? <InitialStep /> : FLOWS[flow].steps[step]}
+                    <FlowSelector />
                 </WrapperComponent>
             </ChakraProvider>
         </CheckoutContext.Provider>

package/src/components/ExchangeConfirmSecurity.tsx

@@ -45,11 +45,24 @@ const SecurityFeature = ({
     </Box>
 );
 
-const ConfirmExchangeStep = ({ onConfirm }: { onConfirm: () => void }) => {
+const ConfirmExchangeStep = ({
+    onConfirm,
+    exchangeName = "your exchange",
+    exchangeIcon,
+}: {
+    onConfirm: () => void;
+    exchangeName?: string;
+    exchangeIcon?: string;
+}) => {
     return (
         <BodyWrapper>
             <Box display="flex" justifyContent="center" width="100%">
-                <Image w={"48px"} src={BinanceIcon} />
+                <Image
+                    w={"48px"}
+                    h={"48px"}
+                    borderRadius={"full"}
+                    src={exchangeIcon || BinanceIcon}
+                />
             </Box>
 
             <Box
@@ -59,7 +72,7 @@ const ConfirmExchangeStep = ({ onConfirm }: { onConfirm: () => void }) => {
                 color="fg"
                 textAlign="center"
             >
-                Enso Checkout uses a 3rd party to connect your Binance account.
+                Enso Checkout uses a 3rd party to connect your {exchangeName} account.
             </Box>
 
             <Box display="flex" flexDirection="column" gap="12px" width="100%">

package/src/components/QuoteParameters.tsx

@@ -4,23 +4,28 @@ import {
     Flex,
     Icon,
     Image,
+    Link,
     Skeleton,
-    Text,
     Table,
-    Link,
+    Text,
 } from "@chakra-ui/react";
 import { ExternalLink } from "lucide-react";
 import { useAppDetails, useRouteData, useWalletIcon } from "@/util/enso-hooks";
-import { formatNumber, getChainIcon, normalizeValue } from "@/util";
-import { shortenAddress } from "@/util";
-import { getChainName, Token } from "@/util/common";
+import {
+    formatNumber,
+    getChainIcon,
+    normalizeValue,
+    shortenAddress,
+} from "@/util";
+import { getChainEtherscanUrl, getChainName, Token } from "@/util/common";
 import { Tooltip } from "@/components/ui/tooltip";
-import { getChainEtherscanUrl } from "@/util/common";
-import { MOCK_IMAGE_URL, SupportedChainId } from "@/util/constants";
-import { STARGATE_CHAIN_NAMES } from "@/util/constants";
-import { useAppStore } from "@/store";
-// @ts-ignore
-import BinanceBadge from "../assets/BinanceBadge.svg";
+import {
+    MOCK_IMAGE_URL,
+    STARGATE_CHAIN_NAMES,
+    SupportedChainId,
+} from "@/util/constants";
+import { useMemo } from "react";
+import { EXCHANGE_ICON_BY_TYPE } from "@/components/steps/ExchangeFlow";
 
 export const ERROR_MSG =
     "Swap not found for a required underlying of defi route, please make sure your amount is within an acceptable range";
@@ -93,11 +98,16 @@ const TokenIcon = ({
 const QuoteParameters = () => {
     const { address } = useAccount();
     const { walletIcon, walletDisplayName } = useWalletIcon();
-    const { chainIdOut, tokenOutData, tokenInData, amountIn, chainIdIn } =
-        useAppDetails();
+    const {
+        chainIdOut,
+        effectiveTokenOutData,
+        tokenInData,
+        amountIn,
+        chainIdIn,
+        selectedIntegration,
+    } = useAppDetails();
     const { routeLoading, routeData, routeFetched, routerError } =
         useRouteData();
-    const { isCheckout } = useAppStore();
     const showRouteLoading = routeLoading || (!routeFetched && !routerError);
 
     const routeErrorMessage: string | null =
@@ -117,6 +127,60 @@ const QuoteParameters = () => {
         type: "/address",
     });
 
+    const sourceInfo = useMemo(() => {
+        if (selectedIntegration?.type) {
+            const icon = EXCHANGE_ICON_BY_TYPE[selectedIntegration.type];
+            const name = selectedIntegration.name || selectedIntegration.type;
+            return (
+                <>
+                    {icon && (
+                        <Image
+                            src={icon}
+                            width={"16px"}
+                            height={"16px"}
+                            borderRadius={"full"}
+                        />
+                    )}
+                    <Text>{name}</Text>
+                </>
+            );
+        }
+
+        return (
+            <>
+                {typeof walletIcon === "string" ? (
+                    <Image src={walletIcon} width={"16px"} height={"16px"} />
+                ) : (
+                    walletIcon
+                )}
+                <Tooltip content={walletDisplayName}>
+                    <Text>
+                        {address &&
+                            walletDisplayName +
+                                " " +
+                                shortenAddress(address, true)}
+                    </Text>
+                </Tooltip>
+                {inWalletUrl && (
+                    <Link href={inWalletUrl} target="_blank">
+                        <Icon
+                            as={ExternalLink}
+                            color="fg.muted"
+                            width={"16px"}
+                            height={"16px"}
+                        />
+                    </Link>
+                )}
+            </>
+        );
+    }, [
+        selectedIntegration,
+        walletIcon,
+        walletDisplayName,
+        address,
+        inWalletUrl,
+    ]);
+
     return (
         <>
             <Table.Root
@@ -126,7 +190,7 @@ const QuoteParameters = () => {
                 width={"100%"}
                 borderRadius={"sm"}
             >
-                <Table.Body >
+                <Table.Body>
                     <Table.Row>
                         <Table.Cell>Source</Table.Cell>
                         <Table.Cell
@@ -139,52 +203,7 @@ const QuoteParameters = () => {
                                 gap={"8px"}
                                 alignItems={"center"}
                             >
-                                {isCheckout ? (
-                                    <>
-                                        <Image
-                                            src={BinanceBadge}
-                                            width={"16px"}
-                                            height={"16px"}
-                                        />
-                                        <Text>Binance</Text>
-                                    </>
-                                ) : (
-                                    <>
-                                        {typeof walletIcon === "string" ? (
-                                            <Image
-                                                src={walletIcon}
-                                                width={"16px"}
-                                                height={"16px"}
-                                            />
-                                        ) : (
-                                            walletIcon
-                                        )}
-                                        <Tooltip content={walletDisplayName}>
-                                            <Text>
-                                                {address &&
-                                                    walletDisplayName +
-                                                        " " +
-                                                        shortenAddress(
-                                                            address,
-                                                            true,
-                                                        )}
-                                            </Text>
-                                        </Tooltip>
-                                        {inWalletUrl && (
-                                            <Link
-                                                href={inWalletUrl}
-                                                target="_blank"
-                                            >
-                                                <Icon
-                                                    as={ExternalLink}
-                                                    color="fg.muted"
-                                                    width={"16px"}
-                                                    height={"16px"}
-                                                />
-                                            </Link>
-                                        )}
-                                    </>
-                                )}
+                                {sourceInfo}
                             </Box>
                         </Table.Cell>
                     </Table.Row>
@@ -243,7 +262,7 @@ const QuoteParameters = () => {
                                 width={showRouteLoading ? "80px" : "auto"}
                             >
                                 <Text>
-                                    {isCheckout
+                                    {selectedIntegration?.type
                                         ? `~2min`
                                         : chainIdIn !== chainIdOut
                                           ? `~1 min`
@@ -317,13 +336,13 @@ const QuoteParameters = () => {
                                             {formatNumber(
                                                 normalizeValue(
                                                     routeData?.amountOut,
-                                                    tokenOutData?.decimals,
+                                                    effectiveTokenOutData?.decimals,
                                                 ),
                                             )}{" "}
-                                            {tokenOutData?.symbol}
+                                            {effectiveTokenOutData?.symbol}
                                         </Text>
                                         <TokenIcon
-                                            token={tokenOutData}
+                                            token={effectiveTokenOutData}
                                             chainId={chainIdOut}
                                             size={24}
                                         />

package/src/components/TransactionDetailRow.tsx

@@ -19,13 +19,14 @@ export const DetailRowContainer = chakra("div", {
 });
 
 export const TransactionDetailRow = () => {
-    const { routerData } = useRouteData();
-    const { chainIdIn, chainIdOut, isCheckout } = useAppDetails();
+    const { routeData } = useRouteData();
+    const { chainIdIn, chainIdOut, selectedIntegration } = useAppDetails();
+
     const slippage = useAppStore((state) => state.slippage);
     const [isExpanded, setIsExpanded] = useState(false);
 
-    const formattedPriceImpact = routerData?.priceImpact
-        ? (-routerData?.priceImpact / 100).toFixed(2)
+    const formattedPriceImpact = routeData?.priceImpact
+        ? (-routeData?.priceImpact / 100).toFixed(2)
         : "0.00";
 
     const detailItems = [
@@ -38,7 +39,7 @@ export const TransactionDetailRow = () => {
             label: "Max. slippage",
         },
         {
-            detail: isCheckout
+            detail: selectedIntegration?.type
                 ? `~2min`
                 : chainIdIn !== chainIdOut
                   ? `~1 min`

package/src/components/cards/AssetCard.tsx

@@ -80,13 +80,13 @@ const AssetCard = ({
 }: {
     icon?: ReactElement | string;
     title: string;
-    balance: string | number;
+    balance?: string | number;
     usdBalance: string;
     tag: string;
     loading: boolean;
     selected: boolean;
     onClick: () => void;
-    chainId: number;
+    chainId?: number;
 }) => {
     return (
         <Card

package/src/components/cards/OptionCard.tsx

@@ -38,6 +38,8 @@ const OptionCard = ({
                     {icons.map((icon, index) => (
                         <Image
                             w={"32px"}
+                            h={"32px"}
+                            borderRadius={"full"}
                             position={"relative"}
                             zIndex={index}
                             right={`${0 - (icons.length - 1 - index) * 10}px`}