@ensofinance/checkout-widget 0.1.1 → 0.1.2

package/package.json

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

package/src/components/steps/ExchangeFlow.tsx

@@ -9,7 +9,7 @@ import {
     Image,
     Table,
 } from "@chakra-ui/react";
-import { ChevronLeft, X, ArrowDownUpIcon } from "lucide-react";
+import { ChevronLeft, X, ArrowDownUpIcon, TriangleAlert } from "lucide-react";
 import { useContext, useEffect, useMemo, useState, useCallback } from "react";
 import { useAccount, useSignMessage } from "wagmi";
 import { getUserOperationHash } from "viem/account-abstraction";
@@ -878,20 +878,33 @@ const ChooseAmountStep = ({
         if (!selectedToken) return;
 
         if (inputMode === "usd") {
-            const cleanUsd = value.replace("$", "") || "";
+            const cleanUsd = value.replace("$", "");
             setUsdValue(cleanUsd);
+            if (!cleanUsd) {
+                setAmount("");
+                return;
+            }
             // Calculate token amount from USD value
             const tokenPrice =
                 selectedToken.marketValue / selectedToken.balance;
-            const tokenAmount = parseFloat(cleanUsd || "0") / tokenPrice;
-            setAmount(precisionizeNumber(tokenAmount, roundingPrecision));
+            const tokenAmount = parseFloat(cleanUsd) / tokenPrice;
+            setAmount(
+                isNaN(tokenAmount)
+                    ? ""
+                    : precisionizeNumber(tokenAmount, roundingPrecision),
+            );
         } else {
+            if (!value) {
+                setAmount("");
+                setUsdValue("");
+                return;
+            }
             setAmount(precisionizeNumber(value, roundingPrecision));
             // Calculate USD value from token amount
             const tokenPrice =
                 selectedToken.marketValue / selectedToken.balance;
             const usdAmount = parseFloat(value) * tokenPrice;
-            setUsdValue(usdAmount.toFixed(2));
+            setUsdValue(isNaN(usdAmount) ? "" : usdAmount.toFixed(2));
         }
     };
 
@@ -1200,6 +1213,7 @@ const InitiateWithdrawalStep = ({
     const { tokenInData } = useAppDetails();
     const sessionId = useAppStore((state) => state.sessionId);
     const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
     const selectedIntegration = useAppStore((s) => s.selectedIntegration);
 
     const handleMeshAccessPayload = useHandleMeshAccessPayload();
@@ -1272,6 +1286,7 @@ const InitiateWithdrawalStep = ({
 
                 console.log("accessTokens", accessTokens);
 
+                let handledByEvent = false;
                 const link = createLink({
                     clientId: address,
                     accessTokens,
@@ -1285,6 +1300,7 @@ const InitiateWithdrawalStep = ({
                     },
                     onExit: (error) => {
                         console.log("Mesh link exited:", error);
+                        if (handledByEvent) return;
                         setIsLoading(false);
                         setStep(WithdrawalStep.ChooseExchangeAsset);
                     },
@@ -1294,8 +1310,18 @@ const InitiateWithdrawalStep = ({
                             console.log(
                                 "Transfer executed, closing mesh link and moving to TrackUserOp step",
                             );
+                            handledByEvent = true;
                             link.closeLink();
                             setStep(WithdrawalStep.TrackUserOp);
+                        } else if (ev.type === "transferExecutionError") {
+                            const errorMessage =
+                                ev.payload?.errorMessage ||
+                                "Transfer failed. Please try again.";
+                            console.error("Mesh transfer error:", errorMessage);
+                            handledByEvent = true;
+                            link.closeLink();
+                            setError(errorMessage);
+                            setIsLoading(false);
                         }
                     },
                 });
@@ -1310,6 +1336,28 @@ const InitiateWithdrawalStep = ({
         fetchLinkTokenAndOpen();
     }, [selectedToken, userOp]);
 
+    if (error) {
+        return (
+            <BodyWrapper>
+                <Flex direction="column" align="center" justify="center" flex={1} p={6} gap={4}>
+                    <Flex
+                        align="center"
+                        justify="center"
+                        w={12}
+                        h={12}
+                        borderRadius="full"
+                        bg="orange.100"
+                    >
+                        <Icon as={TriangleAlert} boxSize={6} color="orange.500" />
+                    </Flex>
+                    <Text fontSize="md" textAlign="center" color="gray.700">
+                        {error}
+                    </Text>
+                </Flex>
+            </BodyWrapper>
+        );
+    }
+
     return (
         <BodyWrapper>
             <Center>