@ensofinance/checkout-widget 0.0.3 → 0.0.5

package/dist/index.d.ts

@@ -1,20 +1,18 @@
-import { CheckoutConfig } from '../../../../../../src/types';
-import { CheckoutConfig as CheckoutConfig_2 } from '../../../../../../../src/types';
-import { CheckoutModalProps } from '../../../../../../src/types';
-import { CheckoutModalProps as CheckoutModalProps_2 } from '../../../../../../../src/types';
+import { CheckoutConfig } from '../../../../../../../src/types';
+import { CheckoutModalProps } from '../../../../../../../src/types';
 import { ComponentType } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { SystemConfig as WidgetTheme } from '@chakra-ui/react';
 
 export declare const Checkout: ({ config: { apiKey, tokenOut, chainIdOut, theme, enableExchange }, onClose, wrapper, }: {
-    config: CheckoutConfig_2;
+    config: CheckoutConfig;
     wrapper?: ComponentType;
     onClose?: () => void;
 }) => JSX_2.Element;
 
 export { CheckoutConfig }
 
-export declare const CheckoutModal: ({ config, setIsActive, isActive, onClose, }: CheckoutModalProps_2) => JSX_2.Element;
+export declare const CheckoutModal: ({ config, setIsActive, isActive, onClose, }: CheckoutModalProps) => JSX_2.Element;
 
 export { CheckoutModalProps }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ensofinance/checkout-widget",
-    "version": "0.0.3",
+    "version": "0.0.5",
     "type": "module",
     "homepage": "https://www.enso.build/",
     "repository": {
@@ -28,7 +28,6 @@
         "@chakra-ui/react": "^3.19.1",
         "@emotion/cache": "^11.14.0",
         "@emotion/react": "^11.14.0",
-        "@ensofinance/checkout-ui-library": "^0.0.2",
         "@ensofinance/sdk": "^1.0.18",
         "@meshconnect/web-link-sdk": "^3.2.14",
         "@uidotdev/usehooks": "^2.4.1",

package/src/components/Checkout.tsx

@@ -51,11 +51,9 @@ const FLOWS: Record<
     },
 };
 
-export const CheckoutContext = createContext<ICheckoutContext>(
-    {} as ICheckoutContext,
-);
+const CheckoutContext = createContext<ICheckoutContext>({} as ICheckoutContext);
 
-export const Checkout = ({
+const Checkout = ({
     config: { apiKey, tokenOut, chainIdOut, theme, enableExchange },
     onClose,
     wrapper,
@@ -125,3 +123,5 @@ export const Checkout = ({
         </CheckoutContext.Provider>
     );
 };
+
+export { CheckoutConfig, Checkout, CheckoutContext };

package/src/components/CheckoutModal.tsx

@@ -20,3 +20,5 @@ export const CheckoutModal = ({
 
     return <Checkout wrapper={Modal} config={config} onClose={handleClose} />;
 };
+
+export { CheckoutModalProps };

package/src/components/steps/ExchangeFlow.tsx

@@ -10,7 +10,7 @@ import {
     Table,
 } from "@chakra-ui/react";
 import { ChevronLeft, X, ArrowDownUpIcon } from "lucide-react";
-import { useContext, useEffect, useMemo, useState } from "react";
+import { useContext, useEffect, useMemo, useState, useCallback } from "react";
 import { IconButton, Button, Tab, Input, Tooltip } from "../ui";
 import { useAccount, useSignMessage, useChainId, useSwitchChain } from "wagmi";
 import { getUserOperationHash } from "viem/account-abstraction";
@@ -28,7 +28,10 @@ import { useAppStore } from "@/store";
 import { AssetCard } from "../cards";
 import { formatNumber, formatUSD } from "@/util";
 import { useTokenFromListBySymbols, getChainName } from "@/util/common";
-import { MIN_AMOUNT } from "@/util/constants";
+import {
+    EXCHANGE_MAX_LIMIT_GAP_USD,
+    EXCHANGE_MIN_LIMIT,
+} from "@/util/constants";
 import { useAppDetails, useRouteData } from "@/util/enso-hooks";
 import QuoteParameters from "../QuoteParameters";
 import { TransactionDetailRow } from "../TransactionDetailRow";
@@ -479,13 +482,47 @@ const ChooseAmountStep = ({
     const { setAmountIn } = useAppStore();
     const { tokenInData, tokenIn } = useAppDetails();
 
+    // Handle percentage selection with limits
+    const handlePercentageSelect = useCallback(
+        (percent: number) => {
+            if (!selectedToken) return;
+
+            const minAmountForToken =
+                EXCHANGE_MIN_LIMIT[
+                    selectedToken.symbol as keyof typeof EXCHANGE_MIN_LIMIT
+                ] || 0;
+            const maxUsdAmount =
+                selectedToken.marketValue - EXCHANGE_MAX_LIMIT_GAP_USD;
+
+            // Calculate target USD amount based on percentage
+            const targetUsdAmount = (selectedToken.marketValue * percent) / 100;
+
+            // Apply limits to the target USD amount
+            const limitedUsdAmount = Math.max(
+                minAmountForToken,
+                Math.min(targetUsdAmount, maxUsdAmount),
+            );
+
+            // Convert back to token amount
+            const tokenPrice =
+                selectedToken.marketValue / selectedToken.balance;
+            const limitedTokenAmount = Math.min(
+                limitedUsdAmount / tokenPrice,
+                selectedToken.balance,
+            );
+
+            setAmount(limitedTokenAmount.toString());
+            setUsdValue(limitedUsdAmount.toFixed(2));
+        },
+        [selectedToken],
+    );
+
     // Set max value on load
     useEffect(() => {
         if (selectedToken) {
-            setAmount(selectedToken.balance.toString());
-            setUsdValue(selectedToken.marketValue.toFixed(2));
+            handlePercentageSelect(100);
         }
-    }, [selectedToken]);
+    }, [selectedToken, handlePercentageSelect]);
 
     useEffect(() => {
         console.log("tokenIn", tokenIn);
@@ -495,17 +532,6 @@ const ChooseAmountStep = ({
             );
     }, [amount, tokenInData?.decimals]);
 
-    // Handle percentage selection
-    const handlePercentageSelect = (percent: number) => {
-        if (!selectedToken) return;
-
-        const amountToSet = (selectedToken.balance * percent) / 100;
-        const usdAmountToSet = (selectedToken.marketValue * percent) / 100;
-
-        setAmount(amountToSet.toString());
-        setUsdValue(usdAmountToSet.toFixed(2));
-    };
-
     // Handle input change based on current mode
     const handleInputChange = (value: string) => {
         if (!selectedToken) return;
@@ -560,7 +586,9 @@ const ChooseAmountStep = ({
     // Limits validation logic
     const currentUsdValue = parseFloat(usdValue);
     const minAmountForToken = selectedToken
-        ? MIN_AMOUNT[selectedToken.symbol as keyof typeof MIN_AMOUNT]
+        ? EXCHANGE_MIN_LIMIT[
+              selectedToken.symbol as keyof typeof EXCHANGE_MIN_LIMIT
+          ]
         : 0;
     const maxUsdAmount = selectedToken ? selectedToken.marketValue - 5 : 0;
 
@@ -591,7 +619,7 @@ const ChooseAmountStep = ({
                 <HeaderTitle>Enter Amount</HeaderTitle>
                 <HeaderDescription>
                     Available: {formatNumber(selectedToken.balance)}{" "}
-                    {selectedToken.symbol} ($
+                    {selectedToken.symbol} (
                     {formatUSD(selectedToken.marketValue)})
                 </HeaderDescription>
             </Box>

package/src/components/ui/index.tsx

@@ -1,4 +1,3 @@
-// Theme-aware UI components to replace @ensofinance/checkout-ui-library imports
 import React, { forwardRef, useMemo } from "react";
 import {
     Button as ChakraButton,

package/src/index.ts

@@ -1,6 +1,8 @@
-import { CheckoutModal } from "./components/CheckoutModal";
-import { Checkout } from "./components/Checkout";
-import { type CheckoutModalProps, type CheckoutConfig } from "@/types";
+import {
+    CheckoutModal,
+    type CheckoutModalProps,
+} from "./components/CheckoutModal";
+import { Checkout, type CheckoutConfig } from "./components/Checkout";
 
 // Export two versions for different integration needs
 export {

package/src/util/constants.tsx

@@ -10,12 +10,15 @@ enum MESH_SYMBOLS {
     USDT = "USDT",
     WBTC = "WBTC",
 }
-export const MIN_AMOUNT = {
+
+// Exchanges approximate limits. Improve once Mesh has API
+export const EXCHANGE_MIN_LIMIT = {
     [MESH_SYMBOLS.ETH]: 0.02,
     [MESH_SYMBOLS.USDC]: 20,
     [MESH_SYMBOLS.USDT]: 20,
     [MESH_SYMBOLS.WBTC]: 0.00000001,
 };
+export const EXCHANGE_MAX_LIMIT_GAP_USD = 5
 
 export const ETH_TOKEN: Token = {
     address: ETH_ADDRESS,