@ensofinance/checkout-widget 0.0.6 → 0.0.7

package/package.json

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

package/src/components/steps/ExchangeFlow.tsx

@@ -23,11 +23,24 @@ import {
 } from "../ui/styled";
 import { CheckoutContext } from "../Checkout";
 import Modal from "../modal";
-import { createLink, IntegrationAccessToken } from "@meshconnect/web-link-sdk";
+import {
+    AccessTokenPayload,
+    createLink,
+    IntegrationAccessToken,
+} from "@meshconnect/web-link-sdk";
 import { useAppStore } from "@/store";
 import { AssetCard } from "../cards";
-import { formatNumber, formatUSD } from "@/util";
-import { useTokenFromListBySymbols, getChainName } from "@/util/common";
+import {
+    denormalizeValue,
+    formatNumber,
+    formatUSD,
+    normalizeValue,
+} from "@/util";
+import {
+    useTokenFromListBySymbols,
+    getChainName,
+    precisionizeNumber,
+} from "@/util/common";
 import {
     EXCHANGE_MAX_LIMIT_GAP_USD,
     EXCHANGE_MIN_LIMIT,
@@ -150,10 +163,30 @@ const MESH_NETWORK_IDS: { [chainId: number]: string } = {
     // 11155111: "03b2d786-7092-4a6a-9737-d6013e21819b", // Sepolia (testnet)
 };
 
+const MESH_NETWORKS = Object.keys(MESH_NETWORK_IDS).map(Number);
+
 const getNetworkId = (chainId: number): string => {
     return MESH_NETWORK_IDS[chainId] || MESH_NETWORK_IDS[8453]; // Default to Base
 };
 
+const useHandleMeshAccessPayload = () => {
+    const { setMeshAccessToken } = useAppStore();
+    const deviceKey = useDeviceKey();
+
+    return useCallback((accessTokenPayload: AccessTokenPayload) => {
+        setMeshAccessToken(accessTokenPayload); // Persist access token and session id for future reloads
+
+        sessionStorage.setItem(
+            deviceKey,
+            JSON.stringify({
+                accessToken: accessTokenPayload.accessToken,
+                sessionId: accessTokenPayload.content.sessionId,
+                timestamp: Date.now(),
+            }),
+        );
+    }, []);
+};
+
 const CheckSessionKeyStep = ({
     setStep,
 }: {
@@ -161,12 +194,16 @@ const CheckSessionKeyStep = ({
 }) => {
     const { chainIdOut, setMeshAccessToken, setSessionId } = useAppStore();
     const { address } = useAccount();
-    const storageKey = useStorageKey();
+    const deviceKey = useDeviceKey();
     const [showConfirmation, setShowConfirmation] = useState(false);
 
+    const invalidChainId = chainIdOut && !MESH_NETWORKS.includes(chainIdOut);
+    const handleMeshAccessPayload = useHandleMeshAccessPayload();
+
     useEffect(() => {
+        if (invalidChainId) return;
         // If connection is persisted, skip fetching a new link token
-        const saved = localStorage.getItem(storageKey);
+        const saved = sessionStorage.getItem(deviceKey);
         // On load: check for persisted connection and hydrate state
         if (saved) {
             try {
@@ -185,7 +222,7 @@ const CheckSessionKeyStep = ({
 
         // Show confirmation instead of auto-connecting
         setShowConfirmation(true);
-    }, [chainIdOut, address, storageKey]);
+    }, [deviceKey, invalidChainId]);
 
     const handleConfirmAuth = () => {
         fetch(`${MESH_API_URL}/linktoken`, {
@@ -194,7 +231,7 @@ const CheckSessionKeyStep = ({
                 "Content-Type": "application/json",
             },
             body: JSON.stringify({
-                userId: address,
+                userId: deviceKey,
                 integrationId: BINANCE_INTEGRATION_ID,
                 address,
             }),
@@ -207,31 +244,15 @@ const CheckSessionKeyStep = ({
                     clientId: address,
                     onIntegrationConnected: (payload) => {
                         console.log("onIntegrationConnected", payload);
-                        setMeshAccessToken(payload.accessToken);
                         setStep(WithdrawalStep.GetHoldings);
-                        // Persist access token and session id for future reloads
-                        try {
-                            localStorage.setItem(
-                                storageKey,
-                                JSON.stringify({
-                                    accessToken: payload.accessToken,
-                                    sessionId: response.content.sessionId,
-                                    timestamp: Date.now(),
-                                }),
-                            );
-                            meshLink.closeLink();
-                        } catch (e) {
-                            console.error(
-                                "Failed to persist Mesh connection",
-                                e,
-                            );
-                        }
+                        handleMeshAccessPayload(payload.accessToken); // Persist access token and session id for future reloads
+                        meshLink.closeLink();
                     },
                     onExit: (error) => {
-                        debugger;
+                        console.log("onExit", error);
                     },
                     onTransferFinished: (transferData) => {
-                        debugger;
+                        console.log("onTransferFinished", transferData);
                     },
                     onEvent: (ev) => {
                         console.log(ev);
@@ -243,6 +264,28 @@ const CheckSessionKeyStep = ({
             .catch((err) => console.error(err));
     };
 
+    if (invalidChainId) {
+        return (
+            <BodyWrapper>
+                <Box textAlign="center" py={8}>
+                    <Text
+                        fontSize="lg"
+                        fontWeight="bold"
+                        color="red.500"
+                        mb={4}
+                    >
+                        Unsupported Network
+                    </Text>
+                    <Text color="fg.muted" mb={6}>
+                        The selected network (Chain ID: {chainIdOut}) is not
+                        supported for exchange transactions. Please switch to a
+                        supported network such as: {MESH_NETWORKS.join(", ")}
+                    </Text>
+                </Box>
+            </BodyWrapper>
+        );
+    }
+
     if (showConfirmation) {
         return <ConfirmExchangeStep onConfirm={handleConfirmAuth} />;
     }
@@ -251,7 +294,7 @@ const CheckSessionKeyStep = ({
 };
 
 // Generate a unique device ID to use as user id for Mesh
-const useStorageKey = () => {
+const useDeviceKey = () => {
     return useMemo(() => {
         const deviceIdKey = "meshDeviceId";
         let deviceId = localStorage.getItem(deviceIdKey);
@@ -272,10 +315,10 @@ const ChooseAssetStep = ({
     setStep: (step: WithdrawalStep) => void;
     onTokenSelect: (token: MatchedToken) => void;
 }) => {
-    const [holdings, setHoldings] = useState<CryptocurrencyPosition[]>([]);
-    const [supportedTokens, setSupportedTokens] = useState<SupportedToken[]>(
-        [],
-    );
+    // const [holdings, setHoldings] = useState<CryptocurrencyPosition[]>([]);
+    // const [supportedTokens, setSupportedTokens] = useState<SupportedToken[]>(
+    //     [],
+    // );
     const [matchedTokens, setMatchedTokens] = useState<MatchedToken[]>([]);
     const [selectedTokenSymbol, setSelectedTokenSymbol] = useState<
         string | null
@@ -293,7 +336,7 @@ const ChooseAssetStep = ({
         chainIdIn,
     } = useAppStore();
 
-    const storageKey = useStorageKey();
+    const deviceKey = useDeviceKey();
     useEffect(() => {
         const fetchData = async () => {
             try {
@@ -319,17 +362,15 @@ const ChooseAssetStep = ({
                 console.log("Holdings data:", holdingsData);
 
                 if (
-                    holdingsData.status === "ok" &&
-                    holdingsData.content?.cryptocurrencyPositions
+                    holdingsData.status !== "ok" ||
+                    !holdingsData.content?.cryptocurrencyPositions
                 ) {
-                    setHoldings(holdingsData.content.cryptocurrencyPositions);
-                } else {
                     if (holdingsData.errorType === "invalidIntegrationToken") {
                         console.log("Invalid integration token");
                         setStep(WithdrawalStep.CheckSessionKey);
                         setMeshAccessToken(null);
                         setSessionId(null);
-                        localStorage.removeItem(storageKey);
+                        sessionStorage.removeItem(deviceKey);
                     }
                     throw new Error(
                         holdingsData.message || "Failed to fetch holdings",
@@ -347,7 +388,7 @@ const ChooseAssetStep = ({
                     tokensData.status === "success" &&
                     tokensData.content?.tokens
                 ) {
-                    setSupportedTokens(tokensData.content.tokens);
+                    // setSupportedTokens(tokensData.content.tokens);
 
                     // Match holdings with supported tokens
                     const matched = tokensData.content.tokens
@@ -481,26 +522,30 @@ const ChooseAmountStep = ({
     const [usdValue, setUsdValue] = useState<string>("");
     const { setAmountIn } = useAppStore();
     const { tokenInData, tokenIn } = useAppDetails();
+    const isStable = selectedToken?.symbol.toLowerCase().includes("USD");
+    const roundingPrecision = isStable ? 2 : 6;
+
+    const maxUsdAmount = selectedToken
+        ? (selectedToken.marketValue - EXCHANGE_MAX_LIMIT_GAP_USD).toFixed(2)
+        : 0;
 
     // Handle percentage selection with limits
     const handlePercentageSelect = useCallback(
         (percent: number) => {
             if (!selectedToken) return;
 
-            const minAmountForToken =
+            const minValueForToken =
                 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),
+                minValueForToken,
+                Math.min(targetUsdAmount, +maxUsdAmount),
             );
 
             // Convert back to token amount
@@ -511,7 +556,9 @@ const ChooseAmountStep = ({
                 selectedToken.balance,
             );
 
-            setAmount(limitedTokenAmount.toString());
+            setAmount(
+                precisionizeNumber(limitedTokenAmount, roundingPrecision),
+            );
             setUsdValue(limitedUsdAmount.toFixed(2));
         },
         [selectedToken],
@@ -525,10 +572,11 @@ const ChooseAmountStep = ({
     }, [selectedToken, handlePercentageSelect]);
 
     useEffect(() => {
-        console.log("tokenIn", tokenIn);
         if (tokenInData?.decimals)
             setAmountIn(
-                (Number(amount) * 10 ** tokenInData?.decimals).toFixed(),
+                Number(
+                    denormalizeValue(amount || "0", tokenInData?.decimals),
+                ).toFixed(),
             );
     }, [amount, tokenInData?.decimals]);
 
@@ -537,15 +585,15 @@ const ChooseAmountStep = ({
         if (!selectedToken) return;
 
         if (inputMode === "usd") {
-            const cleanUsd = value.replace("$", "");
+            const cleanUsd = value.replace("$", "") || "";
             setUsdValue(cleanUsd);
             // Calculate token amount from USD value
             const tokenPrice =
                 selectedToken.marketValue / selectedToken.balance;
-            const tokenAmount = parseFloat(cleanUsd) / tokenPrice;
-            setAmount(tokenAmount.toString());
+            const tokenAmount = parseFloat(cleanUsd || "0") / tokenPrice;
+            setAmount(precisionizeNumber(tokenAmount, roundingPrecision));
         } else {
-            setAmount(value);
+            setAmount(precisionizeNumber(value, roundingPrecision));
             // Calculate USD value from token amount
             const tokenPrice =
                 selectedToken.marketValue / selectedToken.balance;
@@ -585,20 +633,19 @@ const ChooseAmountStep = ({
 
     // Limits validation logic
     const currentUsdValue = parseFloat(usdValue);
-    const minAmountForToken = selectedToken
+    const minValueForToken = selectedToken
         ? EXCHANGE_MIN_LIMIT[
               selectedToken.symbol as keyof typeof EXCHANGE_MIN_LIMIT
           ]
         : 0;
-    const maxUsdAmount = selectedToken ? selectedToken.marketValue - 5 : 0;
 
     const isBelowMinAmount =
         selectedToken &&
         currentUsdValue > 0 &&
-        minAmountForToken &&
-        currentUsdValue < minAmountForToken;
+        minValueForToken &&
+        +amount < minValueForToken;
     const isAboveMaxAmount =
-        selectedToken && currentUsdValue > 0 && currentUsdValue > maxUsdAmount;
+        selectedToken && currentUsdValue > 0 && currentUsdValue > +maxUsdAmount;
 
     const isAmountInvalid =
         isBelowMinAmount || isAboveMaxAmount || notEnoughBalance;
@@ -696,32 +743,39 @@ const ChooseAmountStep = ({
                 </Box>
             </Box>
 
-            <Tooltip
-                disabled={!isAmountInvalid && !!amount}
-                content={
-                    !amount
+            {
+                <Box
+                    textAlign="center"
+                    color="fg.subtle"
+                    fontSize="xs"
+                    h={3}
+                    m={-1}
+                    visibility={
+                        isAmountInvalid || !amount ? "visible" : "hidden"
+                    }
+                >
+                    {!amount
                         ? "Please enter an amount"
                         : isBelowMinAmount
-                          ? `Minimum amount is $${minAmountForToken} USD`
+                          ? `Minimum amount is ${formatNumber(minValueForToken)} ${selectedToken.symbol}`
                           : isAboveMaxAmount
-                            ? `Maximum amount is $${maxUsdAmount.toFixed(2)} USD (balance - $10)`
+                            ? `Maximum amount is ${formatUSD(maxUsdAmount)} (balance - $${EXCHANGE_MAX_LIMIT_GAP_USD})`
                             : notEnoughBalance
                               ? "Amount exceeds available balance"
-                              : ""
+                              : ""}
+                </Box>
+            }
+
+            <Button
+                onClick={() =>
+                    isAmountInvalid || !amount
+                        ? undefined
+                        : setStep(WithdrawalStep.GetUserOpSignature)
                 }
-                showArrow
+                disabled={isAmountInvalid || !amount}
             >
-                <Button
-                    onClick={() =>
-                        isAmountInvalid || !amount
-                            ? undefined
-                            : setStep(WithdrawalStep.GetUserOpSignature)
-                    }
-                    disabled={isAmountInvalid || !amount}
-                >
-                    Continue
-                </Button>
-            </Tooltip>
+                Continue
+            </Button>
         </BodyWrapper>
     );
 };
@@ -848,6 +902,9 @@ const InitiateWithdrawalStep = ({
     const { tokenInData } = useAppDetails();
     const [isLoading, setIsLoading] = useState(true);
 
+    const handleMeshAccessPayload = useHandleMeshAccessPayload();
+    const deviceKey = useDeviceKey();
+
     useEffect(() => {
         if (!selectedToken || !userOp || !meshAccessToken) {
             console.error("Missing required data for withdrawal initiation");
@@ -856,9 +913,11 @@ const InitiateWithdrawalStep = ({
 
         // Convert amountIn from wei to token amount
         const transferAmount = tokenInData?.decimals
-            ? Number(amountIn) / 10 ** tokenInData.decimals
+            ? normalizeValue(amountIn, tokenInData.decimals)
             : 0;
 
+        console.log("transferAmount", transferAmount);
+
         const fetchLinkTokenAndOpen = async () => {
             try {
                 const toAddresses = [
@@ -871,7 +930,7 @@ const InitiateWithdrawalStep = ({
                 ];
                 const meshData = {
                     restrictMultipleAccounts: true,
-                    userId: address,
+                    userId: deviceKey,
                     integrationId: BINANCE_INTEGRATION_ID,
                     transferOptions: {
                         toAddresses,
@@ -887,7 +946,7 @@ const InitiateWithdrawalStep = ({
                     },
                     body: JSON.stringify({
                         restrictMultipleAccounts: true,
-                        userId: address,
+                        userId: deviceKey,
                         integrationId: BINANCE_INTEGRATION_ID,
                         transferOptions: {
                             toAddresses,
@@ -912,8 +971,9 @@ const InitiateWithdrawalStep = ({
                 const link = createLink({
                     clientId: address,
                     accessTokens,
-                    onIntegrationConnected: (e) => {
-                        console.log("Integration connected", e);
+                    onIntegrationConnected: (payload) => {
+                        handleMeshAccessPayload(payload.accessToken); // Persist access token and session id for future reloads
+                        console.log("Integration connected", payload);
                     },
                     onTransferFinished: (transferData) => {
                         console.log("Transfer finished:", transferData);
@@ -1275,10 +1335,10 @@ const ExchangeFlow = () => {
     const { chainIdOut } = useAppStore();
     const setIsCheckout = useAppStore((state) => state.setIsCheckout);
     const setChainIdIn = useAppStore((state) => state.setChainIdIn);
-    const walletChainId = useChainId();
-    const { switchChain } = useSwitchChain();
-
-    const wrongChain = walletChainId !== chainIdOut;
+    // const walletChainId = useChainId();
+    // const { switchChain } = useSwitchChain();
+    //
+    // const wrongChain = walletChainId !== chainIdOut;
 
     const handleTokenSelect = (token: MatchedToken) => {
         setSelectedToken(token);
@@ -1394,34 +1454,33 @@ const ExchangeFlow = () => {
                 </HeaderWrapper>
             </Modal.Header>
             <Modal.Body>
-                {wrongChain ? (
-                    <BodyWrapper>
-                        <Box
-                            display="flex"
-                            flexDirection="column"
-                            alignItems="center"
-                            gap="16px"
-                            textAlign="center"
-                        >
-                            <Text fontSize="16px" fontWeight="600">
-                                Wrong Network
-                            </Text>
-                            <Text fontSize="14px" color="fg.muted">
-                                Please switch to {getChainName(chainIdOut)} to
-                                continue with your Binance withdrawal.
-                            </Text>
-                            <Button
-                                onClick={() => {
-                                    switchChain({ chainId: chainIdOut });
-                                }}
-                            >
-                                Switch to {getChainName(chainIdOut)}
-                            </Button>
-                        </Box>
-                    </BodyWrapper>
-                ) : (
-                    currentStepComponent
-                )}
+                {/*{wrongChain ? (*/}
+                {/*    <BodyWrapper>*/}
+                {/*        <Box*/}
+                {/*            display="flex"*/}
+                {/*            flexDirection="column"*/}
+                {/*            alignItems="center"*/}
+                {/*            gap="16px"*/}
+                {/*            textAlign="center"*/}
+                {/*        >*/}
+                {/*            <Text fontSize="16px" fontWeight="600">*/}
+                {/*                Wrong Network*/}
+                {/*            </Text>*/}
+                {/*            <Text fontSize="14px" color="fg.muted">*/}
+                {/*                Please switch to {getChainName(chainIdOut)} to*/}
+                {/*                continue with your Binance withdrawal.*/}
+                {/*            </Text>*/}
+                {/*            <Button*/}
+                {/*                onClick={() => {*/}
+                {/*                    switchChain({ chainId: chainIdOut });*/}
+                {/*                }}*/}
+                {/*            >*/}
+                {/*                Switch to {getChainName(chainIdOut)}*/}
+                {/*            </Button>*/}
+                {/*        </Box>*/}
+                {/*    </BodyWrapper>*/}
+                {/*) : */}
+                {currentStepComponent}
             </Modal.Body>
         </>
     );

package/src/components/steps/InitialStep.tsx

@@ -2,7 +2,7 @@ import { Box, Icon, Skeleton } from "@chakra-ui/react";
 import { X } from "lucide-react";
 import { useContext, useMemo } from "react";
 import { useAccount } from "wagmi";
-import { IconButton, Tooltip } from "../ui";
+import { IconButton } from "../ui";
 import {
     HeaderWrapperSpaceBetween as InitialStepHeaderWrapper,
     HeaderTitle,
@@ -17,10 +17,6 @@ import { CheckoutContext } from "../Checkout";
 import { WalletCard, OptionCard } from "../cards";
 import { WalletStatus } from "../cards/WalletCard";
 import { useWalletIcon } from "@/util/enso-hooks";
-import RabbyIcon from "../../assets/rabby.png";
-import MetamaskIcon from "../../assets/metamask.png";
-import MastercardIcon from "../../assets/mastercard.png";
-import VisaIcon from "../../assets/visa.png";
 import BinanceIcon from "../../assets/BinanceBadge.svg";
 
 const InitialStep = () => {
@@ -28,7 +24,7 @@ const InitialStep = () => {
         useContext(CheckoutContext);
 
     const { total, isLoading } = useWalletBalance();
-    const { address, isConnected } = useAccount();
+    const { address } = useAccount();
 
     const { walletIcon, walletDisplayName } = useWalletIcon();
 

package/src/components/ui/index.tsx

@@ -284,9 +284,9 @@ const CardTitle: React.FC<{ children: React.ReactNode }> = ({ children }) => (
 const CardDescription: React.FC<{ children: React.ReactNode }> = ({
     children,
 }) => (
-    <Text fontSize="xs" color="fg.muted">
+    <Box fontSize="xs" color="fg.muted">
         {children}
-    </Text>
+    </Box>
 );
 
 export const Card: React.FC<CardProps> & {

package/src/enso-api/api.ts

@@ -40,7 +40,7 @@ export const useWalletBalance = () => {
             ?.map((balanace) => ({
                 ...balanace,
                 total:
-                    (+balanace.amount / 10 ** balanace.decimals) *
+                    +normalizeValue(balanace.amount, balanace.decimals) *
                     +balanace.price,
             }))
             .filter((balance) => balance.total > 1 && balance.total < 10000)

package/src/util/common.tsx

@@ -322,3 +322,6 @@ export const getChainEtherscanUrl = ({
 
     if (hash) return `${chainPrefix}${type}/${hash}`;
 };
+
+export const precisionizeNumber = (value: number | string, precision: number) =>
+    Number(parseFloat(value.toString()).toFixed(precision)).toString();