@spicenet-io/spiceflow-ui 1.9.14 → 1.9.16

package/dist/index.cjs.js

@@ -4285,7 +4285,6 @@ const DepositStatusPanel = ({
   };
   if (intentStatus) {
     const { steps, overallStatus } = intentStatus;
-    const isProcessing = overallStatus === "processing";
     const isSuccess = overallStatus === "success";
     const isError = overallStatus === "failed";
     const stepWithTxHash = steps.find((step) => step.transactionHash);
@@ -4322,9 +4321,9 @@ const DepositStatusPanel = ({
                       display: "flex",
                       alignItems: "center",
                       gap: "8px",
-                      cursor: !isProcessing ? "pointer" : "default"
+                      cursor: "pointer"
                     },
-                    onClick: !isProcessing ? toggleDetails : void 0,
+                    onClick: toggleDetails,
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "span",
@@ -4338,7 +4337,7 @@ const DepositStatusPanel = ({
                           children: "Deposit Results"
                         }
                       ),
-                      !isProcessing && /* @__PURE__ */ jsxRuntime.jsx(
+                      /* @__PURE__ */ jsxRuntime.jsx(
                         "svg",
                         {
                           width: "16",
@@ -4364,7 +4363,7 @@ const DepositStatusPanel = ({
                     ]
                   }
                 ),
-                !isProcessing && /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     onClick: onClose,
@@ -4393,47 +4392,7 @@ const DepositStatusPanel = ({
               ]
             }
           ),
-          isProcessing && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                padding: "24px",
-                marginBottom: "16px"
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    style: {
-                      width: "48px",
-                      height: "48px",
-                      border: "3px solid #e5e7eb",
-                      borderTopColor: theme.colors.primary,
-                      borderRadius: "50%",
-                      animation: "spin 1s linear infinite",
-                      marginBottom: "16px"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "p",
-                  {
-                    style: {
-                      fontSize: "14px",
-                      fontWeight: 500,
-                      color: "#374151",
-                      margin: 0
-                    },
-                    children: "Processing your deposit..."
-                  }
-                )
-              ]
-            }
-          ),
-          !isProcessing && /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               style: {
@@ -4450,7 +4409,7 @@ const DepositStatusPanel = ({
               )
             }
           ),
-          !isProcessing && /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               style: {
@@ -4510,7 +4469,7 @@ const DepositStatusPanel = ({
               )
             }
           ),
-          !isProcessing && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
             isError && onRetry && /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
@@ -4561,13 +4520,7 @@ const DepositStatusPanel = ({
                 children: "CONTINUE \u2192"
               }
             )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-          @keyframes spin {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
-          }
-        ` })
+          ] })
         ]
       }
     );
@@ -4834,9 +4787,7 @@ const DepositWidget = ({
     provider,
     actions
   } = wallet;
-  React.useContext(SpiceFlowProviderContext);
   const [selectedDepositAsset, setSelectedDepositAsset] = React.useState(null);
-  const [isPending, startTransition] = React.useTransition();
   const {
     assets: spiceAssets,
     loading: loadingSpiceAssets,
@@ -4851,9 +4802,37 @@ const DepositWidget = ({
   });
   const [isExecuting, setIsExecuting] = React.useState(false);
   const [error, setError] = React.useState(null);
+  const spiceDepositSubmittedRef = React.useRef(null);
   const { intentStatus, startStatusPolling, clearStatus } = useStatus({
     checkStepStatus: (intentId, stepId) => relayerService.checkStepStatus(intentId, stepId)
   });
+  React.useEffect(() => {
+    if (intentStatus?.overallStatus === "success" && intentStatus.intentId && spiceDepositSubmittedRef.current !== intentStatus.intentId && selectedDepositAsset && address) {
+      const stepWithTxHash = intentStatus.steps.find(
+        (step) => step.transactionHash
+      );
+      if (stepWithTxHash?.transactionHash) {
+        spiceDepositSubmittedRef.current = intentStatus.intentId;
+        const withdrawalAmount = viem.parseUnits(
+          selectedDepositAsset.amount,
+          selectedDepositAsset.asset.decimals
+        );
+        relayerService.submitSpiceDeposit({
+          user: address,
+          txHash: stepWithTxHash.transactionHash,
+          sender: address,
+          tokenAddress: selectedDepositAsset.asset.address,
+          chainId: selectedDepositAsset.asset.chainId,
+          amount: withdrawalAmount.toString(),
+          isDeposit: false
+        }).then(() => {
+          refreshSpiceAssets();
+        }).catch(() => {
+          spiceDepositSubmittedRef.current = null;
+        });
+      }
+    }
+  }, [intentStatus, address]);
   React.useEffect(() => {
     if (depositInputHook && depositInputHook.depositAmount !== selectedDepositAsset?.amount) {
       if (selectedDepositAsset) {
@@ -4877,7 +4856,7 @@ const DepositWidget = ({
   const handleDepositAmountChange = React.useCallback(
     (amount) => {
       if (selectedDepositAsset) {
-        startTransition(() => {
+        React.startTransition(() => {
           setSelectedDepositAsset({
             ...selectedDepositAsset,
             amount
@@ -4950,26 +4929,12 @@ const DepositWidget = ({
       };
       const result = await relayerService.submitTransaction(submitRequest);
       if (result) {
-        const withdrawalAmount = viem.parseUnits(
-          selectedDepositAsset.amount,
-          selectedDepositAsset.asset.decimals
-        );
-        await relayerService.submitSpiceDeposit({
-          user: address,
-          txHash: result.hash,
-          sender: address,
-          tokenAddress: selectedDepositAsset.asset.address,
-          chainId: selectedDepositAsset.asset.chainId,
-          amount: withdrawalAmount.toString(),
-          isDeposit: false
-        });
         const getChainName = (chainId) => {
           return `Chain ${chainId}`;
         };
         const initialSteps = createInitialSteps(allChainBatches, getChainName);
         startStatusPolling(result.intentId, initialSteps);
         onDepositSuccess?.(result.intentId);
-        refreshSpiceAssets();
       }
     } catch (error2) {
       const errorMessage = error2 instanceof Error ? error2.message : "Deposit failed";
@@ -5016,6 +4981,7 @@ const DepositWidget = ({
         onNewDeposit: () => {
           clearStatus();
           setSelectedDepositAsset(null);
+          spiceDepositSubmittedRef.current = null;
           refreshSpiceAssets();
         },
         theme
@@ -5853,7 +5819,7 @@ const CrossChainDepositModal = ({
           if (confirmations < 2) {
             await new Promise((resolve) => setTimeout(resolve, 3e3));
           }
-          console.log("submitting deposit to relayer with params:", {
+          await relayerService.submitSpiceDeposit({
             txHash: hash,
             sender: embeddedWalletAddress,
             tokenAddress: asset.address,
@@ -5862,19 +5828,8 @@ const CrossChainDepositModal = ({
             user: embeddedWalletAddress,
             isDeposit: true
           });
-          const depositResult = await relayerService.submitSpiceDeposit({
-            txHash: hash,
-            sender: embeddedWalletAddress,
-            tokenAddress: asset.address,
-            chainId,
-            amount: viem.parseUnits(amount, asset.decimals).toString(),
-            user: embeddedWalletAddress,
-            isDeposit: true
-          });
-          console.log("Deposit result:", depositResult);
           results.push({ asset, txHash: hash, success: true });
         } catch (err) {
-          console.error(`Deposit error for ${asset.symbol}:`, err);
           const error2 = err;
           let errorMsg = error2?.message || "Deposit failed";
           if (error2?.code === 4001 || error2?.message?.includes("rejected")) {
@@ -5888,7 +5843,6 @@ const CrossChainDepositModal = ({
       setDepositResults(results);
       setIsSuccess(true);
     } catch (err) {
-      console.error("Deposit error:", err);
       const error2 = err;
       setError(error2?.message || "Deposit failed");
     } finally {
@@ -5901,8 +5855,7 @@ const CrossChainDepositModal = ({
     chainId,
     switchChainAsync,
     escrowAddress,
-    assets,
-    externalWalletAddress
+    assets
   ]);
   React.useEffect(() => {
     if (!isOpen) {

package/dist/index.js

@@ -2,7 +2,7 @@
 import { defineChain, createPublicClient, http, isAddress, getAddress, parseEther, parseUnits, erc20Abi, encodeFunctionData } from 'viem';
 import { basecampTestnet, citreaTestnet, baseSepolia, arbitrumSepolia, sepolia } from 'viem/chains';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useState, useRef, useEffect, useCallback, createContext, useContext, useTransition, useMemo, forwardRef, createElement } from 'react';
+import React, { useState, useRef, useEffect, useCallback, createContext, useContext, useTransition, startTransition, useMemo, forwardRef, createElement } from 'react';
 import { c as createTheme, B as Button, d as defaultTheme } from './Button-CWjGZdAM.js';
 import { getBalance, readContract } from 'viem/actions';
 import { createPortal } from 'react-dom';
@@ -4283,7 +4283,6 @@ const DepositStatusPanel = ({
   };
   if (intentStatus) {
     const { steps, overallStatus } = intentStatus;
-    const isProcessing = overallStatus === "processing";
     const isSuccess = overallStatus === "success";
     const isError = overallStatus === "failed";
     const stepWithTxHash = steps.find((step) => step.transactionHash);
@@ -4320,9 +4319,9 @@ const DepositStatusPanel = ({
                       display: "flex",
                       alignItems: "center",
                       gap: "8px",
-                      cursor: !isProcessing ? "pointer" : "default"
+                      cursor: "pointer"
                     },
-                    onClick: !isProcessing ? toggleDetails : void 0,
+                    onClick: toggleDetails,
                     children: [
                       /* @__PURE__ */ jsx(
                         "span",
@@ -4336,7 +4335,7 @@ const DepositStatusPanel = ({
                           children: "Deposit Results"
                         }
                       ),
-                      !isProcessing && /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx(
                         "svg",
                         {
                           width: "16",
@@ -4362,7 +4361,7 @@ const DepositStatusPanel = ({
                     ]
                   }
                 ),
-                !isProcessing && /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(
                   "button",
                   {
                     onClick: onClose,
@@ -4391,47 +4390,7 @@ const DepositStatusPanel = ({
               ]
             }
           ),
-          isProcessing && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                padding: "24px",
-                marginBottom: "16px"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      width: "48px",
-                      height: "48px",
-                      border: "3px solid #e5e7eb",
-                      borderTopColor: theme.colors.primary,
-                      borderRadius: "50%",
-                      animation: "spin 1s linear infinite",
-                      marginBottom: "16px"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    style: {
-                      fontSize: "14px",
-                      fontWeight: 500,
-                      color: "#374151",
-                      margin: 0
-                    },
-                    children: "Processing your deposit..."
-                  }
-                )
-              ]
-            }
-          ),
-          !isProcessing && /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(
             "div",
             {
               style: {
@@ -4448,7 +4407,7 @@ const DepositStatusPanel = ({
               )
             }
           ),
-          !isProcessing && /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(
             "div",
             {
               style: {
@@ -4508,7 +4467,7 @@ const DepositStatusPanel = ({
               )
             }
           ),
-          !isProcessing && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
             isError && onRetry && /* @__PURE__ */ jsx(
               "button",
               {
@@ -4559,13 +4518,7 @@ const DepositStatusPanel = ({
                 children: "CONTINUE \u2192"
               }
             )
-          ] }),
-          /* @__PURE__ */ jsx("style", { children: `
-          @keyframes spin {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
-          }
-        ` })
+          ] })
         ]
       }
     );
@@ -4832,9 +4785,7 @@ const DepositWidget = ({
     provider,
     actions
   } = wallet;
-  useContext(SpiceFlowProviderContext);
   const [selectedDepositAsset, setSelectedDepositAsset] = useState(null);
-  const [isPending, startTransition] = useTransition();
   const {
     assets: spiceAssets,
     loading: loadingSpiceAssets,
@@ -4849,9 +4800,37 @@ const DepositWidget = ({
   });
   const [isExecuting, setIsExecuting] = useState(false);
   const [error, setError] = useState(null);
+  const spiceDepositSubmittedRef = useRef(null);
   const { intentStatus, startStatusPolling, clearStatus } = useStatus({
     checkStepStatus: (intentId, stepId) => relayerService.checkStepStatus(intentId, stepId)
   });
+  useEffect(() => {
+    if (intentStatus?.overallStatus === "success" && intentStatus.intentId && spiceDepositSubmittedRef.current !== intentStatus.intentId && selectedDepositAsset && address) {
+      const stepWithTxHash = intentStatus.steps.find(
+        (step) => step.transactionHash
+      );
+      if (stepWithTxHash?.transactionHash) {
+        spiceDepositSubmittedRef.current = intentStatus.intentId;
+        const withdrawalAmount = parseUnits(
+          selectedDepositAsset.amount,
+          selectedDepositAsset.asset.decimals
+        );
+        relayerService.submitSpiceDeposit({
+          user: address,
+          txHash: stepWithTxHash.transactionHash,
+          sender: address,
+          tokenAddress: selectedDepositAsset.asset.address,
+          chainId: selectedDepositAsset.asset.chainId,
+          amount: withdrawalAmount.toString(),
+          isDeposit: false
+        }).then(() => {
+          refreshSpiceAssets();
+        }).catch(() => {
+          spiceDepositSubmittedRef.current = null;
+        });
+      }
+    }
+  }, [intentStatus, address]);
   useEffect(() => {
     if (depositInputHook && depositInputHook.depositAmount !== selectedDepositAsset?.amount) {
       if (selectedDepositAsset) {
@@ -4948,26 +4927,12 @@ const DepositWidget = ({
       };
       const result = await relayerService.submitTransaction(submitRequest);
       if (result) {
-        const withdrawalAmount = parseUnits(
-          selectedDepositAsset.amount,
-          selectedDepositAsset.asset.decimals
-        );
-        await relayerService.submitSpiceDeposit({
-          user: address,
-          txHash: result.hash,
-          sender: address,
-          tokenAddress: selectedDepositAsset.asset.address,
-          chainId: selectedDepositAsset.asset.chainId,
-          amount: withdrawalAmount.toString(),
-          isDeposit: false
-        });
         const getChainName = (chainId) => {
           return `Chain ${chainId}`;
         };
         const initialSteps = createInitialSteps(allChainBatches, getChainName);
         startStatusPolling(result.intentId, initialSteps);
         onDepositSuccess?.(result.intentId);
-        refreshSpiceAssets();
       }
     } catch (error2) {
       const errorMessage = error2 instanceof Error ? error2.message : "Deposit failed";
@@ -5014,6 +4979,7 @@ const DepositWidget = ({
         onNewDeposit: () => {
           clearStatus();
           setSelectedDepositAsset(null);
+          spiceDepositSubmittedRef.current = null;
           refreshSpiceAssets();
         },
         theme
@@ -5851,7 +5817,7 @@ const CrossChainDepositModal = ({
           if (confirmations < 2) {
             await new Promise((resolve) => setTimeout(resolve, 3e3));
           }
-          console.log("submitting deposit to relayer with params:", {
+          await relayerService.submitSpiceDeposit({
             txHash: hash,
             sender: embeddedWalletAddress,
             tokenAddress: asset.address,
@@ -5860,19 +5826,8 @@ const CrossChainDepositModal = ({
             user: embeddedWalletAddress,
             isDeposit: true
           });
-          const depositResult = await relayerService.submitSpiceDeposit({
-            txHash: hash,
-            sender: embeddedWalletAddress,
-            tokenAddress: asset.address,
-            chainId,
-            amount: parseUnits(amount, asset.decimals).toString(),
-            user: embeddedWalletAddress,
-            isDeposit: true
-          });
-          console.log("Deposit result:", depositResult);
           results.push({ asset, txHash: hash, success: true });
         } catch (err) {
-          console.error(`Deposit error for ${asset.symbol}:`, err);
           const error2 = err;
           let errorMsg = error2?.message || "Deposit failed";
           if (error2?.code === 4001 || error2?.message?.includes("rejected")) {
@@ -5886,7 +5841,6 @@ const CrossChainDepositModal = ({
       setDepositResults(results);
       setIsSuccess(true);
     } catch (err) {
-      console.error("Deposit error:", err);
       const error2 = err;
       setError(error2?.message || "Deposit failed");
     } finally {
@@ -5899,8 +5853,7 @@ const CrossChainDepositModal = ({
     chainId,
     switchChainAsync,
     escrowAddress,
-    assets,
-    externalWalletAddress
+    assets
   ]);
   useEffect(() => {
     if (!isOpen) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spicenet-io/spiceflow-ui",
-  "version": "1.9.14",
+  "version": "1.9.16",
   "description": "Spiceflow UI SDK",
   "type": "module",
   "main": "dist/index.cjs.js",