@spicenet-io/spiceflow-ui 1.8.5 → 1.8.6

package/dist/components/DepositWidget/DepositStatusPanel.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { IntentStatus } from "../../types/status";
+import { Theme } from "../../types/theme";
+interface DepositStatusPanelProps {
+    intentStatus: IntentStatus;
+    onClose: () => void;
+    onRetry?: () => void;
+    onNewDeposit?: () => void;
+    theme?: Theme;
+}
+export declare const DepositStatusPanel: React.FC<DepositStatusPanelProps>;
+export {};

package/dist/index.cjs.js

@@ -4083,6 +4083,211 @@ const useSpiceAssets = ({
   };
 };
 
+const DepositStatusPanel = ({
+  intentStatus,
+  onClose,
+  onRetry,
+  onNewDeposit,
+  theme: providedTheme
+}) => {
+  const theme = providedTheme || Button.createTheme("dark");
+  const containerStyles = {
+    width: "100%",
+    maxWidth: "28rem",
+    margin: "0 auto",
+    backgroundColor: theme.colors.background,
+    border: `1px solid ${theme.colors.border}`,
+    borderRadius: theme.borderRadius.lg,
+    padding: theme.spacing.lg,
+    color: theme.colors.text
+  };
+  const headerStyles = {
+    textAlign: "center",
+    marginBottom: theme.spacing.lg
+  };
+  const iconContainerStyles = {
+    width: "5rem",
+    height: "5rem",
+    margin: "0 auto",
+    backgroundColor: theme.colors.surface,
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: `2px solid ${theme.colors.border}`,
+    marginBottom: theme.spacing.md
+  };
+  const titleStyles = {
+    fontSize: theme.typography.fontSize.lg,
+    fontWeight: theme.typography.fontWeight.semibold,
+    color: theme.colors.text,
+    marginBottom: theme.spacing.sm
+  };
+  const descriptionStyles = {
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.textMuted
+  };
+  const buttonContainerStyles = {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing.sm,
+    marginTop: theme.spacing.lg
+  };
+  const getStatusContent = () => {
+    switch (intentStatus.overallStatus) {
+      case "success":
+        return {
+          icon: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              width: "32",
+              height: "32",
+              fill: "none",
+              stroke: theme.colors.success,
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M5 13l4 4L19 7"
+                }
+              )
+            }
+          ),
+          title: "Deposit Completed!",
+          description: "Your tokens have been successfully deposited.",
+          borderColor: theme.colors.success
+        };
+      case "failed":
+        return {
+          icon: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              width: "32",
+              height: "32",
+              fill: "none",
+              stroke: theme.colors.error,
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M6 18L18 6M6 6l12 12"
+                }
+              )
+            }
+          ),
+          title: "Deposit Failed",
+          description: "Something went wrong. Please try again.",
+          borderColor: theme.colors.error
+        };
+      default:
+        return {
+          icon: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                width: "2rem",
+                height: "2rem",
+                border: `3px solid ${theme.colors.primary}`,
+                borderTop: "3px solid transparent",
+                borderRadius: "50%",
+                animation: "spin 1s linear infinite"
+              }
+            }
+          ),
+          title: "Processing Deposit",
+          description: "Please wait while your deposit is being processed...",
+          borderColor: theme.colors.primary
+        };
+    }
+  };
+  const statusContent = getStatusContent();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyles, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        ` }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyles, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            ...iconContainerStyles,
+            borderColor: statusContent.borderColor
+          },
+          children: statusContent.icon
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: titleStyles, children: statusContent.title }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: descriptionStyles, children: statusContent.description })
+    ] }),
+    intentStatus.overallStatus === "processing" && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          backgroundColor: theme.colors.surface,
+          borderRadius: theme.borderRadius.md,
+          padding: theme.spacing.md,
+          marginBottom: theme.spacing.md
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                height: "4px",
+                backgroundColor: `${theme.colors.primary}30`,
+                borderRadius: "2px",
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    width: "30%",
+                    height: "100%",
+                    backgroundColor: theme.colors.primary,
+                    borderRadius: "2px",
+                    animation: "progress 1.5s ease-in-out infinite"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+              @keyframes progress {
+                0% { transform: translateX(-100%); width: 30%; }
+                50% { width: 60%; }
+                100% { transform: translateX(400%); width: 30%; }
+              }
+            ` })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: buttonContainerStyles, children: [
+      intentStatus.overallStatus === "success" && onNewDeposit && /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          variant: "success",
+          fullWidth: true,
+          onClick: onNewDeposit,
+          theme,
+          children: "New Deposit"
+        }
+      ),
+      intentStatus.overallStatus === "failed" && onRetry && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "error", fullWidth: true, onClick: onRetry, theme, children: "Try Again" }),
+      intentStatus.overallStatus === "processing" && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "ghost", fullWidth: true, onClick: onClose, theme, children: "Cancel" })
+    ] })
+  ] });
+};
+
 const DepositWidget = ({
   depositBatches,
   tokenAddress,
@@ -4186,62 +4391,7 @@ const DepositWidget = ({
     setIsExecuting(true);
     setError(null);
     try {
-      const depositClient = getClientForChain(
-        selectedDepositAsset.asset.chainId
-      );
-      const depositRecentBlock = await depositClient.getBlockNumber();
-      let depositAssetBatch;
-      if (selectedDepositAsset.asset.isNative) {
-        depositAssetBatch = {
-          chainId: selectedDepositAsset.asset.chainId,
-          recentBlock: depositRecentBlock,
-          calls: [
-            {
-              to: "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
-              value: viem.parseEther(selectedDepositAsset.amount),
-              data: "0x"
-            }
-          ]
-        };
-      } else {
-        depositAssetBatch = {
-          chainId: selectedDepositAsset.asset.chainId,
-          recentBlock: depositRecentBlock,
-          calls: [
-            {
-              to: selectedDepositAsset.asset.address,
-              value: BigInt(0),
-              data: viem.encodeFunctionData({
-                abi: viem.erc20Abi,
-                functionName: "approve",
-                args: [
-                  "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
-                  viem.parseUnits(
-                    selectedDepositAsset.amount,
-                    selectedDepositAsset.asset.decimals
-                  )
-                ]
-              })
-            },
-            {
-              to: selectedDepositAsset.asset.address,
-              value: BigInt(0),
-              data: viem.encodeFunctionData({
-                abi: viem.erc20Abi,
-                functionName: "transfer",
-                args: [
-                  "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
-                  viem.parseUnits(
-                    selectedDepositAsset.amount,
-                    selectedDepositAsset.asset.decimals
-                  )
-                ]
-              })
-            }
-          ]
-        };
-      }
-      const allChainBatches = [depositAssetBatch, ...depositBatches];
+      const allChainBatches = [...depositBatches];
       const uniqueChainIds = [
         ...new Set(allChainBatches.map((batch) => batch.chainId))
       ];
@@ -4288,6 +4438,19 @@ 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}`;
         };
@@ -4330,7 +4493,7 @@ const DepositWidget = ({
   };
   if (intentStatus) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
-      StatusDisplay,
+      DepositStatusPanel,
       {
         intentStatus,
         onClose: clearStatus,
@@ -4338,13 +4501,11 @@ const DepositWidget = ({
           clearStatus();
           handleDeposit();
         },
-        txType: "deposit",
-        onNewTx: () => {
+        onNewDeposit: () => {
           clearStatus();
           setSelectedDepositAsset(null);
           refreshSpiceAssets();
         },
-        explorerUrlBuilder: (chainId, txHash) => getExplorerUrl(chainId, txHash),
         theme
       }
     ) });

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { defineChain, createPublicClient, http, isAddress, getAddress, parseEther, encodeFunctionData, parseUnits, erc20Abi } from 'viem';
+import { defineChain, createPublicClient, http, isAddress, getAddress, parseEther, parseUnits, 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';
@@ -4081,6 +4081,211 @@ const useSpiceAssets = ({
   };
 };
 
+const DepositStatusPanel = ({
+  intentStatus,
+  onClose,
+  onRetry,
+  onNewDeposit,
+  theme: providedTheme
+}) => {
+  const theme = providedTheme || createTheme("dark");
+  const containerStyles = {
+    width: "100%",
+    maxWidth: "28rem",
+    margin: "0 auto",
+    backgroundColor: theme.colors.background,
+    border: `1px solid ${theme.colors.border}`,
+    borderRadius: theme.borderRadius.lg,
+    padding: theme.spacing.lg,
+    color: theme.colors.text
+  };
+  const headerStyles = {
+    textAlign: "center",
+    marginBottom: theme.spacing.lg
+  };
+  const iconContainerStyles = {
+    width: "5rem",
+    height: "5rem",
+    margin: "0 auto",
+    backgroundColor: theme.colors.surface,
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: `2px solid ${theme.colors.border}`,
+    marginBottom: theme.spacing.md
+  };
+  const titleStyles = {
+    fontSize: theme.typography.fontSize.lg,
+    fontWeight: theme.typography.fontWeight.semibold,
+    color: theme.colors.text,
+    marginBottom: theme.spacing.sm
+  };
+  const descriptionStyles = {
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.textMuted
+  };
+  const buttonContainerStyles = {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing.sm,
+    marginTop: theme.spacing.lg
+  };
+  const getStatusContent = () => {
+    switch (intentStatus.overallStatus) {
+      case "success":
+        return {
+          icon: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "32",
+              height: "32",
+              fill: "none",
+              stroke: theme.colors.success,
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M5 13l4 4L19 7"
+                }
+              )
+            }
+          ),
+          title: "Deposit Completed!",
+          description: "Your tokens have been successfully deposited.",
+          borderColor: theme.colors.success
+        };
+      case "failed":
+        return {
+          icon: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "32",
+              height: "32",
+              fill: "none",
+              stroke: theme.colors.error,
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M6 18L18 6M6 6l12 12"
+                }
+              )
+            }
+          ),
+          title: "Deposit Failed",
+          description: "Something went wrong. Please try again.",
+          borderColor: theme.colors.error
+        };
+      default:
+        return {
+          icon: /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: "2rem",
+                height: "2rem",
+                border: `3px solid ${theme.colors.primary}`,
+                borderTop: "3px solid transparent",
+                borderRadius: "50%",
+                animation: "spin 1s linear infinite"
+              }
+            }
+          ),
+          title: "Processing Deposit",
+          description: "Please wait while your deposit is being processed...",
+          borderColor: theme.colors.primary
+        };
+    }
+  };
+  const statusContent = getStatusContent();
+  return /* @__PURE__ */ jsxs("div", { style: containerStyles, children: [
+    /* @__PURE__ */ jsx("style", { children: `
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        ` }),
+    /* @__PURE__ */ jsxs("div", { style: headerStyles, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            ...iconContainerStyles,
+            borderColor: statusContent.borderColor
+          },
+          children: statusContent.icon
+        }
+      ),
+      /* @__PURE__ */ jsx("h3", { style: titleStyles, children: statusContent.title }),
+      /* @__PURE__ */ jsx("p", { style: descriptionStyles, children: statusContent.description })
+    ] }),
+    intentStatus.overallStatus === "processing" && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          backgroundColor: theme.colors.surface,
+          borderRadius: theme.borderRadius.md,
+          padding: theme.spacing.md,
+          marginBottom: theme.spacing.md
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                height: "4px",
+                backgroundColor: `${theme.colors.primary}30`,
+                borderRadius: "2px",
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: "30%",
+                    height: "100%",
+                    backgroundColor: theme.colors.primary,
+                    borderRadius: "2px",
+                    animation: "progress 1.5s ease-in-out infinite"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("style", { children: `
+              @keyframes progress {
+                0% { transform: translateX(-100%); width: 30%; }
+                50% { width: 60%; }
+                100% { transform: translateX(400%); width: 30%; }
+              }
+            ` })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: buttonContainerStyles, children: [
+      intentStatus.overallStatus === "success" && onNewDeposit && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "success",
+          fullWidth: true,
+          onClick: onNewDeposit,
+          theme,
+          children: "New Deposit"
+        }
+      ),
+      intentStatus.overallStatus === "failed" && onRetry && /* @__PURE__ */ jsx(Button, { variant: "error", fullWidth: true, onClick: onRetry, theme, children: "Try Again" }),
+      intentStatus.overallStatus === "processing" && /* @__PURE__ */ jsx(Button, { variant: "ghost", fullWidth: true, onClick: onClose, theme, children: "Cancel" })
+    ] })
+  ] });
+};
+
 const DepositWidget = ({
   depositBatches,
   tokenAddress,
@@ -4184,62 +4389,7 @@ const DepositWidget = ({
     setIsExecuting(true);
     setError(null);
     try {
-      const depositClient = getClientForChain(
-        selectedDepositAsset.asset.chainId
-      );
-      const depositRecentBlock = await depositClient.getBlockNumber();
-      let depositAssetBatch;
-      if (selectedDepositAsset.asset.isNative) {
-        depositAssetBatch = {
-          chainId: selectedDepositAsset.asset.chainId,
-          recentBlock: depositRecentBlock,
-          calls: [
-            {
-              to: "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
-              value: parseEther(selectedDepositAsset.amount),
-              data: "0x"
-            }
-          ]
-        };
-      } else {
-        depositAssetBatch = {
-          chainId: selectedDepositAsset.asset.chainId,
-          recentBlock: depositRecentBlock,
-          calls: [
-            {
-              to: selectedDepositAsset.asset.address,
-              value: BigInt(0),
-              data: encodeFunctionData({
-                abi: erc20Abi,
-                functionName: "approve",
-                args: [
-                  "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
-                  parseUnits(
-                    selectedDepositAsset.amount,
-                    selectedDepositAsset.asset.decimals
-                  )
-                ]
-              })
-            },
-            {
-              to: selectedDepositAsset.asset.address,
-              value: BigInt(0),
-              data: encodeFunctionData({
-                abi: erc20Abi,
-                functionName: "transfer",
-                args: [
-                  "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
-                  parseUnits(
-                    selectedDepositAsset.amount,
-                    selectedDepositAsset.asset.decimals
-                  )
-                ]
-              })
-            }
-          ]
-        };
-      }
-      const allChainBatches = [depositAssetBatch, ...depositBatches];
+      const allChainBatches = [...depositBatches];
       const uniqueChainIds = [
         ...new Set(allChainBatches.map((batch) => batch.chainId))
       ];
@@ -4286,6 +4436,19 @@ 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}`;
         };
@@ -4328,7 +4491,7 @@ const DepositWidget = ({
   };
   if (intentStatus) {
     return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
-      StatusDisplay,
+      DepositStatusPanel,
       {
         intentStatus,
         onClose: clearStatus,
@@ -4336,13 +4499,11 @@ const DepositWidget = ({
           clearStatus();
           handleDeposit();
         },
-        txType: "deposit",
-        onNewTx: () => {
+        onNewDeposit: () => {
           clearStatus();
           setSelectedDepositAsset(null);
           refreshSpiceAssets();
         },
-        explorerUrlBuilder: (chainId, txHash) => getExplorerUrl(chainId, txHash),
         theme
       }
     ) });

package/package.json

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