@ensofinance/checkout-widget 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ensofinance/checkout-widget",
-    "version": "0.0.4",
+    "version": "0.0.6",
     "type": "module",
     "homepage": "https://www.enso.build/",
     "repository": {
@@ -22,7 +22,8 @@
         "publish": "npm publish --access public",
         "dev": "vite build --watch --mode=dev --minify=false --sourcemap=false --emptyOutDir=false",
         "build": "vite build",
-        "preview": "vite preview"
+        "preview": "vite preview",
+        "build:pump:publish": "npm run build && npm run bump && npm run publish"
     },
     "dependencies": {
         "@chakra-ui/react": "^3.19.1",

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/steps/WalletAmountStep.tsx

@@ -9,7 +9,12 @@ import { Button, IconButton, Tab, Input } from "../ui";
 import CurrencySwapDisplay from "../CurrencySwapDisplay";
 import { useEnsoPrice, useEnsoToken } from "@/enso-api/api";
 import { useAppStore } from "@/store";
-import { normalizeValue, denormalizeValue, formatNumber } from "@/util";
+import {
+    normalizeValue,
+    denormalizeValue,
+    formatNumber,
+    formatUSD,
+} from "@/util";
 import { useTokenBalance } from "@/util/wallet";
 
 type InputMode = "usd" | "token";
@@ -81,10 +86,11 @@ const WalletAmountStep = ({ nextStep }: { nextStep?: string }) => {
         if (inputMode === "usd") {
             const cleanUsd = value.replace("$", "");
             // Clean the input from usd sign
+            console.log(cleanUsd, priceData, tokenDetails?.decimals);
             setUsdValue(cleanUsd);
             setAmountIn(
                 denormalizeValue(
-                    (parseFloat(cleanUsd) * priceData).toString(),
+                    (parseFloat(cleanUsd) / priceData).toString(),
                     tokenDetails?.decimals,
                 ),
             );
@@ -101,21 +107,24 @@ const WalletAmountStep = ({ nextStep }: { nextStep?: string }) => {
 
     // Get input placeholder and display value
     const getInputDisplay = () => {
+        const formattedValue = formatNumber(tokenValue);
+        const safeUsdValue = parseFloat(usdValue) > 0 ? usdValue : 0;
+
         if (inputMode === "usd") {
             return {
                 placeholder: "$10.00",
-                displayValue: usdValue ? `$${usdValue}` : "",
+                displayValue: safeUsdValue ? `$${safeUsdValue}` : "",
                 equivalentValue: tokenValue
-                    ? `${formatNumber(tokenValue)} ${tokenDetails?.symbol}`
+                    ? `${formattedValue} ${tokenDetails?.symbol}`
                     : "—",
             };
-        } else {
-            return {
-                placeholder: "0.00",
-                displayValue: tokenValue,
-                equivalentValue: usdValue ? `$${usdValue}` : "—",
-            };
         }
+
+        return {
+            placeholder: "0.00",
+            displayValue: formattedValue,
+            equivalentValue: formatUSD(safeUsdValue),
+        };
     };
 
     const { placeholder, displayValue, equivalentValue } = getInputDisplay();

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,