@spicenet-io/spiceflow-ui 1.9.13 → 1.9.15

package/dist/index.cjs.js

@@ -4787,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,
@@ -4804,6 +4802,7 @@ 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)
   });
@@ -4830,7 +4829,7 @@ const DepositWidget = ({
   const handleDepositAmountChange = React.useCallback(
     (amount) => {
       if (selectedDepositAsset) {
-        startTransition(() => {
+        React.startTransition(() => {
           setSelectedDepositAsset({
             ...selectedDepositAsset,
             amount
@@ -4903,19 +4902,34 @@ 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
-        });
+        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((error2) => {
+                console.error("Failed to submit spice deposit:", error2);
+                spiceDepositSubmittedRef.current = null;
+              });
+            }
+          }
+        }, [intentStatus, selectedDepositAsset, address, refreshSpiceAssets]);
         const getChainName = (chainId) => {
           return `Chain ${chainId}`;
         };
@@ -4942,8 +4956,7 @@ const DepositWidget = ({
     }
     return spiceAssets;
   }, [spiceAssets, supportedTokens]);
-  const isProcessingIntent = intentStatus?.overallStatus === "processing";
-  const canDeposit = selectedDepositAsset && selectedDepositAsset.amount && parseFloat(selectedDepositAsset.amount) > 0 && parseFloat(selectedDepositAsset.amount) <= selectedDepositAsset.asset.balanceFormatted && isConnected && !isExecuting && !isProcessingIntent && depositBatches.length > 0;
+  const canDeposit = selectedDepositAsset && selectedDepositAsset.amount && parseFloat(selectedDepositAsset.amount) > 0 && parseFloat(selectedDepositAsset.amount) <= selectedDepositAsset.asset.balanceFormatted && isConnected && !isExecuting && depositBatches.length > 0;
   const displayError = spiceAssetsError || error;
   const containerStyles = {
     backgroundColor: styles?.container?.backgroundColor || styles?.primaryBackground || theme.colors.background,
@@ -4957,8 +4970,7 @@ const DepositWidget = ({
     fontFamily: theme.typography.fontFamily,
     boxShadow: styles?.container?.boxShadow || (theme.mode === "light" ? "0 4px 6px -1px rgb(0 0 0 / 0.1)" : "0 4px 6px -1px rgb(0 0 0 / 0.3)")
   };
-  const showStatusPanel = intentStatus && intentStatus.overallStatus !== "processing";
-  if (showStatusPanel) {
+  if (intentStatus) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
       DepositStatusPanel,
       {
@@ -4971,6 +4983,7 @@ const DepositWidget = ({
         onNewDeposit: () => {
           clearStatus();
           setSelectedDepositAsset(null);
+          spiceDepositSubmittedRef.current = null;
           refreshSpiceAssets();
         },
         theme
@@ -5074,11 +5087,11 @@ const DepositWidget = ({
             variant: "outline",
             fullWidth: true,
             onClick: handleDeposit,
-            loading: isExecuting || isProcessingIntent,
+            loading: isExecuting,
             disabled: !canDeposit || !isConnected,
             theme,
             styles,
-            children: !ready ? "Loading..." : !authenticated ? "Authentication Required" : !isConnected ? "Wallet Not Connected" : isExecuting ? "Executing Deposit..." : isProcessingIntent ? "Processing..." : !selectedDepositAsset ? "Select Token" : !selectedDepositAsset.amount ? "Enter Amount" : parseFloat(selectedDepositAsset.amount) > selectedDepositAsset.asset.balanceFormatted ? "Insufficient Balance" : depositBatches.length === 0 ? "No Deposit Batches" : "Execute Deposit"
+            children: !ready ? "Loading..." : !authenticated ? "Authentication Required" : !isConnected ? "Wallet Not Connected" : isExecuting ? "Executing Deposit..." : !selectedDepositAsset ? "Select Token" : !selectedDepositAsset.amount ? "Enter Amount" : parseFloat(selectedDepositAsset.amount) > selectedDepositAsset.asset.balanceFormatted ? "Insufficient Balance" : depositBatches.length === 0 ? "No Deposit Batches" : "Execute Deposit"
           }
         )
       }
@@ -5808,16 +5821,7 @@ const CrossChainDepositModal = ({
           if (confirmations < 2) {
             await new Promise((resolve) => setTimeout(resolve, 3e3));
           }
-          console.log("submitting deposit to relayer with params:", {
-            txHash: hash,
-            sender: embeddedWalletAddress,
-            tokenAddress: asset.address,
-            chainId,
-            amount: viem.parseUnits(amount, asset.decimals).toString(),
-            user: embeddedWalletAddress,
-            isDeposit: true
-          });
-          const depositResult = await relayerService.submitSpiceDeposit({
+          await relayerService.submitSpiceDeposit({
             txHash: hash,
             sender: embeddedWalletAddress,
             tokenAddress: asset.address,
@@ -5826,10 +5830,8 @@ const CrossChainDepositModal = ({
             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")) {
@@ -5843,7 +5845,6 @@ const CrossChainDepositModal = ({
       setDepositResults(results);
       setIsSuccess(true);
     } catch (err) {
-      console.error("Deposit error:", err);
       const error2 = err;
       setError(error2?.message || "Deposit failed");
     } finally {
@@ -5856,8 +5857,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';
@@ -4785,9 +4785,7 @@ const DepositWidget = ({
     provider,
     actions
   } = wallet;
-  useContext(SpiceFlowProviderContext);
   const [selectedDepositAsset, setSelectedDepositAsset] = useState(null);
-  const [isPending, startTransition] = useTransition();
   const {
     assets: spiceAssets,
     loading: loadingSpiceAssets,
@@ -4802,6 +4800,7 @@ 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)
   });
@@ -4901,19 +4900,34 @@ 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
-        });
+        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((error2) => {
+                console.error("Failed to submit spice deposit:", error2);
+                spiceDepositSubmittedRef.current = null;
+              });
+            }
+          }
+        }, [intentStatus, selectedDepositAsset, address, refreshSpiceAssets]);
         const getChainName = (chainId) => {
           return `Chain ${chainId}`;
         };
@@ -4940,8 +4954,7 @@ const DepositWidget = ({
     }
     return spiceAssets;
   }, [spiceAssets, supportedTokens]);
-  const isProcessingIntent = intentStatus?.overallStatus === "processing";
-  const canDeposit = selectedDepositAsset && selectedDepositAsset.amount && parseFloat(selectedDepositAsset.amount) > 0 && parseFloat(selectedDepositAsset.amount) <= selectedDepositAsset.asset.balanceFormatted && isConnected && !isExecuting && !isProcessingIntent && depositBatches.length > 0;
+  const canDeposit = selectedDepositAsset && selectedDepositAsset.amount && parseFloat(selectedDepositAsset.amount) > 0 && parseFloat(selectedDepositAsset.amount) <= selectedDepositAsset.asset.balanceFormatted && isConnected && !isExecuting && depositBatches.length > 0;
   const displayError = spiceAssetsError || error;
   const containerStyles = {
     backgroundColor: styles?.container?.backgroundColor || styles?.primaryBackground || theme.colors.background,
@@ -4955,8 +4968,7 @@ const DepositWidget = ({
     fontFamily: theme.typography.fontFamily,
     boxShadow: styles?.container?.boxShadow || (theme.mode === "light" ? "0 4px 6px -1px rgb(0 0 0 / 0.1)" : "0 4px 6px -1px rgb(0 0 0 / 0.3)")
   };
-  const showStatusPanel = intentStatus && intentStatus.overallStatus !== "processing";
-  if (showStatusPanel) {
+  if (intentStatus) {
     return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
       DepositStatusPanel,
       {
@@ -4969,6 +4981,7 @@ const DepositWidget = ({
         onNewDeposit: () => {
           clearStatus();
           setSelectedDepositAsset(null);
+          spiceDepositSubmittedRef.current = null;
           refreshSpiceAssets();
         },
         theme
@@ -5072,11 +5085,11 @@ const DepositWidget = ({
             variant: "outline",
             fullWidth: true,
             onClick: handleDeposit,
-            loading: isExecuting || isProcessingIntent,
+            loading: isExecuting,
             disabled: !canDeposit || !isConnected,
             theme,
             styles,
-            children: !ready ? "Loading..." : !authenticated ? "Authentication Required" : !isConnected ? "Wallet Not Connected" : isExecuting ? "Executing Deposit..." : isProcessingIntent ? "Processing..." : !selectedDepositAsset ? "Select Token" : !selectedDepositAsset.amount ? "Enter Amount" : parseFloat(selectedDepositAsset.amount) > selectedDepositAsset.asset.balanceFormatted ? "Insufficient Balance" : depositBatches.length === 0 ? "No Deposit Batches" : "Execute Deposit"
+            children: !ready ? "Loading..." : !authenticated ? "Authentication Required" : !isConnected ? "Wallet Not Connected" : isExecuting ? "Executing Deposit..." : !selectedDepositAsset ? "Select Token" : !selectedDepositAsset.amount ? "Enter Amount" : parseFloat(selectedDepositAsset.amount) > selectedDepositAsset.asset.balanceFormatted ? "Insufficient Balance" : depositBatches.length === 0 ? "No Deposit Batches" : "Execute Deposit"
           }
         )
       }
@@ -5806,16 +5819,7 @@ const CrossChainDepositModal = ({
           if (confirmations < 2) {
             await new Promise((resolve) => setTimeout(resolve, 3e3));
           }
-          console.log("submitting deposit to relayer with params:", {
-            txHash: hash,
-            sender: embeddedWalletAddress,
-            tokenAddress: asset.address,
-            chainId,
-            amount: parseUnits(amount, asset.decimals).toString(),
-            user: embeddedWalletAddress,
-            isDeposit: true
-          });
-          const depositResult = await relayerService.submitSpiceDeposit({
+          await relayerService.submitSpiceDeposit({
             txHash: hash,
             sender: embeddedWalletAddress,
             tokenAddress: asset.address,
@@ -5824,10 +5828,8 @@ const CrossChainDepositModal = ({
             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")) {
@@ -5841,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 {
@@ -5854,8 +5855,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.13",
+  "version": "1.9.15",
   "description": "Spiceflow UI SDK",
   "type": "module",
   "main": "dist/index.cjs.js",