@ensofinance/checkout-widget 0.0.13 → 0.0.15

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.13",
+    "version": "0.0.15",
     "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

@@ -9,7 +9,7 @@ import { type CheckoutConfig, type SupportedExchanges } from "@/types";
 type ICheckoutContext = {
     handleClose: () => void;
 
-    enableExchanges?: SupportedExchanges[];
+    enableExchange?: SupportedExchanges[];
 };
 
 const CheckoutContext = createContext<ICheckoutContext>({} as ICheckoutContext);
@@ -64,7 +64,7 @@ const Checkout = ({
         <CheckoutContext.Provider
             value={{
                 handleClose,
-                enableExchanges: enableExchange,
+                enableExchange,
             }}
         >
             <ChakraProvider themeConfig={theme}>

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

@@ -24,11 +24,8 @@ import {
     STARGATE_CHAIN_NAMES,
     SupportedChainId,
 } from "@/util/constants";
-import { useAppStore } from "@/store";
-// @ts-ignore
-import BinanceBadge from "../assets/BinanceBadge.svg";
 import { useMemo } from "react";
-import { ExchangeNames, ExchangeType } from "@/components/steps/ExchangeFlow";
+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";
@@ -101,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 { activeExchange } = useAppStore();
     const showRouteLoading = routeLoading || (!routeFetched && !routerError);
 
     const routeErrorMessage: string | null =
@@ -126,16 +128,23 @@ const QuoteParameters = () => {
     });
 
     const sourceInfo = useMemo(() => {
-        if (activeExchange === ExchangeType.binance)
+        if (selectedIntegration?.type) {
+            const icon = EXCHANGE_ICON_BY_TYPE[selectedIntegration.type];
+            const name = selectedIntegration.name || selectedIntegration.type;
             return (
                 <>
-                    <Image src={BinanceBadge} width={"16px"} height={"16px"} />
-                    <Text>Binance</Text>
+                    {icon && (
+                        <Image
+                            src={icon}
+                            width={"16px"}
+                            height={"16px"}
+                            borderRadius={"full"}
+                        />
+                    )}
+                    <Text>{name}</Text>
                 </>
             );
-
-        if (activeExchange === ExchangeType.delayed)
-            return <Text>{ExchangeNames[ExchangeType.delayed]}</Text>;
+        }
 
         return (
             <>
@@ -164,7 +173,13 @@ const QuoteParameters = () => {
                 )}
             </>
         );
-    }, [activeExchange]);
+    }, [
+        selectedIntegration,
+        walletIcon,
+        walletDisplayName,
+        address,
+        inWalletUrl,
+    ]);
 
     return (
         <>
@@ -247,7 +262,7 @@ const QuoteParameters = () => {
                                 width={showRouteLoading ? "80px" : "auto"}
                             >
                                 <Text>
-                                    {activeExchange === "binance"
+                                    {selectedIntegration?.type
                                         ? `~2min`
                                         : chainIdIn !== chainIdOut
                                           ? `~1 min`
@@ -321,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`}