npm - @spicenet-io/spiceflow-ui - Versions diffs - 1.9.3 → 1.9.4 - Mend

@spicenet-io/spiceflow-ui 1.9.3 → 1.9.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/components/DepositWidget/CrossChainDepositModal.d.ts +2 -0
package/dist/components/DepositWidget/DepositWidgetModal.d.ts +1 -1
package/dist/index.cjs.js +51 -173
package/dist/index.js +51 -173
package/dist/types/deposit.d.ts +1 -0
package/package.json +1 -1

package/dist/components/DepositWidget/CrossChainDepositModal.d.ts CHANGED Viewed

@@ -23,6 +23,8 @@ export interface CrossChainDepositModalProps {
     isOpen: boolean;
     onClose: () => void;
     onComplete: () => void;
+    title?: string;
+    description?: string;
     chainId: 11155111 | 421614 | 84532 | undefined;
     externalWalletAddress: string;
     escrowAddress?: string;

package/dist/components/DepositWidget/DepositWidgetModal.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ export interface DepositWidgetModalProps extends DepositWidgetProps {
     isOpen: boolean;
     onClose: () => void;
     title?: string;
-    subtitle?: React.ReactNode;
+    description?: React.ReactNode;
     maxWidth?: string;
 }
 export declare const DepositWidgetModal: React.FC<DepositWidgetModalProps>;

package/dist/index.cjs.js CHANGED Viewed

@@ -4405,7 +4405,8 @@ const DepositWidget = ({
   className = "",
   depositInputHook,
   onDepositSuccess,
-  onDepositError
+  onDepositError,
+  onTopUp
 }) => {
   const baseTheme = Button.createTheme(themeMode);
   const theme = {
@@ -4429,13 +4430,14 @@ const DepositWidget = ({
     provider,
     actions
   } = wallet;
-  const spiceFlowContext = React.useContext(SpiceFlowProviderContext);
+  React.useContext(SpiceFlowProviderContext);
   const [selectedDepositAsset, setSelectedDepositAsset] = React.useState(null);
   const [isPending, startTransition] = React.useTransition();
   const {
     assets: spiceAssets,
     loading: loadingSpiceAssets,
     error: spiceAssetsError,
+    hasBalance: hasSpiceBalance,
     refetch: refreshSpiceAssets
   } = useSpiceAssets({
     address,
@@ -4617,124 +4619,48 @@ const DepositWidget = ({
     ) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyles, className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    !loadingSpiceAssets && !hasSpiceBalance && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         style: {
-          padding: styles?.statusDisplay?.padding || "8px",
-          backgroundColor: styles?.statusDisplay?.backgroundColor || styles?.tertiaryBackground || (theme.mode === "light" ? "#f9fafb" : theme.colors.surface),
-          border: `1px solid ${styles?.statusDisplay?.borderColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.border)}`,
-          borderRadius: styles?.statusDisplay?.borderRadius || theme.borderRadius.md
+          backgroundColor: theme.mode === "light" ? "#fef3c7" : `${theme.colors.warning || "#f59e0b"}20`,
+          border: `1px solid ${theme.mode === "light" ? "#fcd34d" : theme.colors.warning || "#f59e0b"}`,
+          borderRadius: theme.borderRadius.md,
+          padding: theme.spacing.md,
+          marginBottom: theme.spacing.md,
+          textAlign: "center"
         },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between"
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "span",
-                  {
-                    style: {
-                      fontSize: styles?.statusDisplay?.text?.fontSize || theme.typography.fontSize.xs,
-                      fontWeight: styles?.statusDisplay?.text?.fontWeight || theme.typography.fontWeight.medium,
-                      color: styles?.statusDisplay?.text?.color || theme.colors.text,
-                      fontFamily: styles?.statusDisplay?.text?.fontFamily || theme.typography.fontFamily
-                    },
-                    children: [
-                      spiceFlowContext?.provider === "privy" ? "Privy" : spiceFlowContext?.provider === "dynamic" ? "Dynamic" : "Wallet",
-                      " ",
-                      "Status"
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    style: {
-                      fontSize: styles?.statusDisplay?.text?.fontSize || theme.typography.fontSize.xs,
-                      padding: `2px ${theme.spacing.xs}`,
-                      borderRadius: theme.borderRadius.sm,
-                      border: `1px solid ${isConnected ? styles?.statusDisplay?.successColor || theme.colors.success : styles?.statusDisplay?.warningColor || theme.colors.warning}`,
-                      backgroundColor: isConnected ? theme.mode === "light" ? "#dcfce7" : `${styles?.statusDisplay?.successColor || theme.colors.success}20` : theme.mode === "light" ? "#fef3c7" : `${styles?.statusDisplay?.warningColor || theme.colors.warning}20`,
-                      color: isConnected ? styles?.statusDisplay?.successColor || theme.colors.success : styles?.statusDisplay?.warningColor || theme.colors.warning,
-                      fontFamily: styles?.statusDisplay?.text?.fontFamily || theme.typography.fontFamily
-                    },
-                    children: isConnected ? "Connected" : "Disconnected"
-                  }
-                )
-              ]
-            }
-          ),
-          isConnected && address && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: "ibm-plex-mono",
-              style: {
-                marginTop: "6px",
-                backgroundColor: styles?.addressDisplay?.backgroundColor || (theme.mode === "light" ? "#f3f4f6" : theme.colors.secondary),
-                border: `1px solid ${styles?.addressDisplay?.borderColor || (theme.mode === "light" ? "#d1d5db" : theme.colors.borderHover)}`,
-                borderRadius: styles?.addressDisplay?.borderRadius || theme.borderRadius.sm,
-                padding: styles?.addressDisplay?.padding || `${theme.spacing.xs} ${theme.spacing.sm}`,
-                fontSize: styles?.addressDisplay?.fontSize || theme.typography.fontSize.xs,
-                fontFamily: styles?.addressDisplay?.fontFamily || (styles?.fontFamily ? `${styles.fontFamily}, IBM Plex Mono` : "IBM Plex Mono"),
-                color: styles?.addressDisplay?.color || theme.colors.text,
-                display: "flex",
-                alignItems: "center",
-                gap: theme.spacing.sm
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { flex: 1 }, children: [
-                  address.slice(0, 6),
-                  "...",
-                  address.slice(-4)
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    style: {
-                      fontSize: styles?.addressDisplay?.copyButton?.fontSize || theme.typography.fontSize.xs,
-                      padding: styles?.addressDisplay?.copyButton?.padding || `${theme.spacing.xs} ${theme.spacing.sm}`,
-                      backgroundColor: styles?.addressDisplay?.copyButton?.backgroundColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.surfaceHover),
-                      border: `1px solid ${styles?.addressDisplay?.copyButton?.borderColor || (theme.mode === "light" ? "#d1d5db" : theme.colors.border)}`,
-                      borderRadius: styles?.addressDisplay?.copyButton?.borderRadius || theme.borderRadius.sm,
-                      color: styles?.addressDisplay?.copyButton?.color || theme.colors.text,
-                      fontFamily: styles?.addressDisplay?.copyButton?.fontFamily || theme.typography.fontFamily,
-                      cursor: "pointer",
-                      transition: `background-color ${theme.animation.normal}`
-                    },
-                    onClick: () => copyToClipboard(address),
-                    title: "Copy address",
-                    children: "Copy"
-                  }
-                )
-              ]
-            }
-          ),
-          !ready && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              style: {
-                marginTop: "6px",
-                fontSize: theme.typography.fontSize.xs,
-                color: theme.colors.textSecondary,
-                fontFamily: theme.typography.fontFamily
-              },
-              children: [
-                "Loading",
-                " ",
-                spiceFlowContext?.provider === "privy" ? "Privy" : spiceFlowContext?.provider === "dynamic" ? "Dynamic" : "Wallet",
-                "..."
-              ]
-            }
-          )
-        ]
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "p",
+          {
+            style: {
+              color: theme.mode === "light" ? "#92400e" : "#fbbf24",
+              fontSize: theme.typography.fontSize.sm,
+              fontFamily: theme.typography.fontFamily,
+              margin: 0,
+              lineHeight: 1.5
+            },
+            children: [
+              "You do not have any cross-chain balance.",
+              " ",
+              onTopUp && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  onClick: onTopUp,
+                  style: {
+                    color: theme.colors.primary,
+                    textDecoration: "underline",
+                    cursor: "pointer",
+                    fontWeight: 600
+                  },
+                  children: "Top-up here."
+                }
+              )
+            ]
+          }
+        )
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxRuntime.jsx(
       AssetSelector,
       {
@@ -4750,50 +4676,6 @@ const DepositWidget = ({
         styles
       }
     ) }),
-    depositBatches.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        style: {
-          backgroundColor: styles?.infoCard?.backgroundColor || styles?.tertiaryBackground || (theme.mode === "light" ? "#f9fafb" : theme.colors.surface),
-          border: `1px solid ${styles?.infoCard?.borderColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.border)}`,
-          borderRadius: styles?.infoCard?.borderRadius || theme.borderRadius.md,
-          padding: styles?.infoCard?.padding || theme.spacing.sm
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              style: {
-                fontSize: styles?.infoCard?.title?.fontSize || theme.typography.fontSize.xs,
-                fontWeight: styles?.infoCard?.title?.fontWeight || theme.typography.fontWeight.medium,
-                color: styles?.infoCard?.title?.color || theme.colors.text,
-                fontFamily: styles?.infoCard?.title?.fontFamily || theme.typography.fontFamily,
-                marginBottom: "4px"
-              },
-              children: "Deposit Batches Ready"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              style: {
-                fontSize: styles?.infoCard?.description?.fontSize || theme.typography.fontSize.xs,
-                color: styles?.infoCard?.description?.color || theme.colors.textSecondary,
-                fontFamily: styles?.infoCard?.description?.fontFamily || theme.typography.fontFamily
-              },
-              children: [
-                depositBatches.length,
-                " deposit batch",
-                depositBatches.length > 1 ? "es" : "",
-                " across chains:",
-                " ",
-                [...new Set(depositBatches.map((b) => b.chainId))].join(", ")
-              ]
-            }
-          )
-        ]
-      }
-    ) }),
     displayError && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -4830,7 +4712,7 @@ const DepositWidget = ({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           Button.Button,
           {
-            variant: "primary",
+            variant: "outline",
             fullWidth: true,
             onClick: handleDeposit,
             loading: isExecuting,
@@ -5061,7 +4943,7 @@ const DepositWidgetModal = ({
   isOpen,
   onClose,
   title = "Deposit",
-  subtitle,
+  description = "Deposit funds to execute chain batches across multiple networks.",
   maxWidth = "480px",
   // Pass through all DepositWidget props
   depositBatches,
@@ -5077,7 +4959,7 @@ const DepositWidgetModal = ({
   onDepositError
 }) => {
   const theme = Button.createTheme(themeMode);
-  const defaultSubtitle = /* @__PURE__ */ jsxRuntime.jsxs(
+  const defaultDescription = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       style: {
@@ -5109,7 +4991,7 @@ const DepositWidgetModal = ({
               lineHeight: "1.4",
               fontFamily: "system-ui, -apple-system, sans-serif"
             },
-            children: "Deposit funds to execute chain batches across multiple networks."
+            children: description
           }
         )
       ]
@@ -5124,7 +5006,7 @@ const DepositWidgetModal = ({
       isOpen,
       onClose,
       title,
-      subtitle: subtitle || defaultSubtitle,
+      subtitle: description || defaultDescription,
       styles,
       theme,
       maxWidth,
@@ -5399,6 +5281,8 @@ const CrossChainDepositModal = ({
   isOpen,
   onClose,
   onComplete,
+  title = "Deposit to Spicenet",
+  description = "Select tokens and enter amounts to deposit to your Spicenet Account",
   chainId,
   externalWalletAddress,
   escrowAddress = "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
@@ -5629,7 +5513,7 @@ const CrossChainDepositModal = ({
             }
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx(
           "p",
           {
             style: {
@@ -5638,12 +5522,7 @@ const CrossChainDepositModal = ({
               margin: 0,
               lineHeight: "1.5"
             },
-            children: [
-              "Select tokens and enter amounts to deposit to your Spicenet Account on",
-              " ",
-              chainConfig?.displayName || `Chain ${chainId}`,
-              "."
-            ]
+            children: description
           }
         )
       ]
@@ -5801,7 +5680,7 @@ const CrossChainDepositModal = ({
     {
       isOpen,
       onClose,
-      title: "Deposit to Spicenet",
+      title,
       subtitle,
       theme,
       maxWidth: "480px",
@@ -5928,7 +5807,6 @@ const CrossChainDepositModal = ({
             variant: "outline",
             fullWidth: true,
             onClick: executeDeposit,
-            loading: isExecuting,
             disabled: !canDeposit,
             theme,
             style: {

package/dist/index.js CHANGED Viewed

@@ -4403,7 +4403,8 @@ const DepositWidget = ({
   className = "",
   depositInputHook,
   onDepositSuccess,
-  onDepositError
+  onDepositError,
+  onTopUp
 }) => {
   const baseTheme = createTheme(themeMode);
   const theme = {
@@ -4427,13 +4428,14 @@ const DepositWidget = ({
     provider,
     actions
   } = wallet;
-  const spiceFlowContext = useContext(SpiceFlowProviderContext);
+  useContext(SpiceFlowProviderContext);
   const [selectedDepositAsset, setSelectedDepositAsset] = useState(null);
   const [isPending, startTransition] = useTransition();
   const {
     assets: spiceAssets,
     loading: loadingSpiceAssets,
     error: spiceAssetsError,
+    hasBalance: hasSpiceBalance,
     refetch: refreshSpiceAssets
   } = useSpiceAssets({
     address,
@@ -4615,124 +4617,48 @@ const DepositWidget = ({
     ) });
   }
   return /* @__PURE__ */ jsxs("div", { style: containerStyles, className, children: [
-    /* @__PURE__ */ jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxs(
+    !loadingSpiceAssets && !hasSpiceBalance && /* @__PURE__ */ jsx(
       "div",
       {
         style: {
-          padding: styles?.statusDisplay?.padding || "8px",
-          backgroundColor: styles?.statusDisplay?.backgroundColor || styles?.tertiaryBackground || (theme.mode === "light" ? "#f9fafb" : theme.colors.surface),
-          border: `1px solid ${styles?.statusDisplay?.borderColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.border)}`,
-          borderRadius: styles?.statusDisplay?.borderRadius || theme.borderRadius.md
+          backgroundColor: theme.mode === "light" ? "#fef3c7" : `${theme.colors.warning || "#f59e0b"}20`,
+          border: `1px solid ${theme.mode === "light" ? "#fcd34d" : theme.colors.warning || "#f59e0b"}`,
+          borderRadius: theme.borderRadius.md,
+          padding: theme.spacing.md,
+          marginBottom: theme.spacing.md,
+          textAlign: "center"
         },
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between"
-              },
-              children: [
-                /* @__PURE__ */ jsxs(
-                  "span",
-                  {
-                    style: {
-                      fontSize: styles?.statusDisplay?.text?.fontSize || theme.typography.fontSize.xs,
-                      fontWeight: styles?.statusDisplay?.text?.fontWeight || theme.typography.fontWeight.medium,
-                      color: styles?.statusDisplay?.text?.color || theme.colors.text,
-                      fontFamily: styles?.statusDisplay?.text?.fontFamily || theme.typography.fontFamily
-                    },
-                    children: [
-                      spiceFlowContext?.provider === "privy" ? "Privy" : spiceFlowContext?.provider === "dynamic" ? "Dynamic" : "Wallet",
-                      " ",
-                      "Status"
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      fontSize: styles?.statusDisplay?.text?.fontSize || theme.typography.fontSize.xs,
-                      padding: `2px ${theme.spacing.xs}`,
-                      borderRadius: theme.borderRadius.sm,
-                      border: `1px solid ${isConnected ? styles?.statusDisplay?.successColor || theme.colors.success : styles?.statusDisplay?.warningColor || theme.colors.warning}`,
-                      backgroundColor: isConnected ? theme.mode === "light" ? "#dcfce7" : `${styles?.statusDisplay?.successColor || theme.colors.success}20` : theme.mode === "light" ? "#fef3c7" : `${styles?.statusDisplay?.warningColor || theme.colors.warning}20`,
-                      color: isConnected ? styles?.statusDisplay?.successColor || theme.colors.success : styles?.statusDisplay?.warningColor || theme.colors.warning,
-                      fontFamily: styles?.statusDisplay?.text?.fontFamily || theme.typography.fontFamily
-                    },
-                    children: isConnected ? "Connected" : "Disconnected"
-                  }
-                )
-              ]
-            }
-          ),
-          isConnected && address && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "ibm-plex-mono",
-              style: {
-                marginTop: "6px",
-                backgroundColor: styles?.addressDisplay?.backgroundColor || (theme.mode === "light" ? "#f3f4f6" : theme.colors.secondary),
-                border: `1px solid ${styles?.addressDisplay?.borderColor || (theme.mode === "light" ? "#d1d5db" : theme.colors.borderHover)}`,
-                borderRadius: styles?.addressDisplay?.borderRadius || theme.borderRadius.sm,
-                padding: styles?.addressDisplay?.padding || `${theme.spacing.xs} ${theme.spacing.sm}`,
-                fontSize: styles?.addressDisplay?.fontSize || theme.typography.fontSize.xs,
-                fontFamily: styles?.addressDisplay?.fontFamily || (styles?.fontFamily ? `${styles.fontFamily}, IBM Plex Mono` : "IBM Plex Mono"),
-                color: styles?.addressDisplay?.color || theme.colors.text,
-                display: "flex",
-                alignItems: "center",
-                gap: theme.spacing.sm
-              },
-              children: [
-                /* @__PURE__ */ jsxs("span", { style: { flex: 1 }, children: [
-                  address.slice(0, 6),
-                  "...",
-                  address.slice(-4)
-                ] }),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    style: {
-                      fontSize: styles?.addressDisplay?.copyButton?.fontSize || theme.typography.fontSize.xs,
-                      padding: styles?.addressDisplay?.copyButton?.padding || `${theme.spacing.xs} ${theme.spacing.sm}`,
-                      backgroundColor: styles?.addressDisplay?.copyButton?.backgroundColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.surfaceHover),
-                      border: `1px solid ${styles?.addressDisplay?.copyButton?.borderColor || (theme.mode === "light" ? "#d1d5db" : theme.colors.border)}`,
-                      borderRadius: styles?.addressDisplay?.copyButton?.borderRadius || theme.borderRadius.sm,
-                      color: styles?.addressDisplay?.copyButton?.color || theme.colors.text,
-                      fontFamily: styles?.addressDisplay?.copyButton?.fontFamily || theme.typography.fontFamily,
-                      cursor: "pointer",
-                      transition: `background-color ${theme.animation.normal}`
-                    },
-                    onClick: () => copyToClipboard(address),
-                    title: "Copy address",
-                    children: "Copy"
-                  }
-                )
-              ]
-            }
-          ),
-          !ready && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                marginTop: "6px",
-                fontSize: theme.typography.fontSize.xs,
-                color: theme.colors.textSecondary,
-                fontFamily: theme.typography.fontFamily
-              },
-              children: [
-                "Loading",
-                " ",
-                spiceFlowContext?.provider === "privy" ? "Privy" : spiceFlowContext?.provider === "dynamic" ? "Dynamic" : "Wallet",
-                "..."
-              ]
-            }
-          )
-        ]
+        children: /* @__PURE__ */ jsxs(
+          "p",
+          {
+            style: {
+              color: theme.mode === "light" ? "#92400e" : "#fbbf24",
+              fontSize: theme.typography.fontSize.sm,
+              fontFamily: theme.typography.fontFamily,
+              margin: 0,
+              lineHeight: 1.5
+            },
+            children: [
+              "You do not have any cross-chain balance.",
+              " ",
+              onTopUp && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  onClick: onTopUp,
+                  style: {
+                    color: theme.colors.primary,
+                    textDecoration: "underline",
+                    cursor: "pointer",
+                    fontWeight: 600
+                  },
+                  children: "Top-up here."
+                }
+              )
+            ]
+          }
+        )
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsx(
       AssetSelector,
       {
@@ -4748,50 +4674,6 @@ const DepositWidget = ({
         styles
       }
     ) }),
-    depositBatches.length > 0 && /* @__PURE__ */ jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          backgroundColor: styles?.infoCard?.backgroundColor || styles?.tertiaryBackground || (theme.mode === "light" ? "#f9fafb" : theme.colors.surface),
-          border: `1px solid ${styles?.infoCard?.borderColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.border)}`,
-          borderRadius: styles?.infoCard?.borderRadius || theme.borderRadius.md,
-          padding: styles?.infoCard?.padding || theme.spacing.sm
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                fontSize: styles?.infoCard?.title?.fontSize || theme.typography.fontSize.xs,
-                fontWeight: styles?.infoCard?.title?.fontWeight || theme.typography.fontWeight.medium,
-                color: styles?.infoCard?.title?.color || theme.colors.text,
-                fontFamily: styles?.infoCard?.title?.fontFamily || theme.typography.fontFamily,
-                marginBottom: "4px"
-              },
-              children: "Deposit Batches Ready"
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                fontSize: styles?.infoCard?.description?.fontSize || theme.typography.fontSize.xs,
-                color: styles?.infoCard?.description?.color || theme.colors.textSecondary,
-                fontFamily: styles?.infoCard?.description?.fontFamily || theme.typography.fontFamily
-              },
-              children: [
-                depositBatches.length,
-                " deposit batch",
-                depositBatches.length > 1 ? "es" : "",
-                " across chains:",
-                " ",
-                [...new Set(depositBatches.map((b) => b.chainId))].join(", ")
-              ]
-            }
-          )
-        ]
-      }
-    ) }),
     displayError && /* @__PURE__ */ jsx(
       "div",
       {
@@ -4828,7 +4710,7 @@ const DepositWidget = ({
         children: /* @__PURE__ */ jsx(
           Button,
           {
-            variant: "primary",
+            variant: "outline",
             fullWidth: true,
             onClick: handleDeposit,
             loading: isExecuting,
@@ -5059,7 +4941,7 @@ const DepositWidgetModal = ({
   isOpen,
   onClose,
   title = "Deposit",
-  subtitle,
+  description = "Deposit funds to execute chain batches across multiple networks.",
   maxWidth = "480px",
   // Pass through all DepositWidget props
   depositBatches,
@@ -5075,7 +4957,7 @@ const DepositWidgetModal = ({
   onDepositError
 }) => {
   const theme = createTheme(themeMode);
-  const defaultSubtitle = /* @__PURE__ */ jsxs(
+  const defaultDescription = /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
@@ -5107,7 +4989,7 @@ const DepositWidgetModal = ({
               lineHeight: "1.4",
               fontFamily: "system-ui, -apple-system, sans-serif"
             },
-            children: "Deposit funds to execute chain batches across multiple networks."
+            children: description
           }
         )
       ]
@@ -5122,7 +5004,7 @@ const DepositWidgetModal = ({
       isOpen,
       onClose,
       title,
-      subtitle: subtitle || defaultSubtitle,
+      subtitle: description || defaultDescription,
       styles,
       theme,
       maxWidth,
@@ -5397,6 +5279,8 @@ const CrossChainDepositModal = ({
   isOpen,
   onClose,
   onComplete,
+  title = "Deposit to Spicenet",
+  description = "Select tokens and enter amounts to deposit to your Spicenet Account",
   chainId,
   externalWalletAddress,
   escrowAddress = "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
@@ -5627,7 +5511,7 @@ const CrossChainDepositModal = ({
             }
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           "p",
           {
             style: {
@@ -5636,12 +5520,7 @@ const CrossChainDepositModal = ({
               margin: 0,
               lineHeight: "1.5"
             },
-            children: [
-              "Select tokens and enter amounts to deposit to your Spicenet Account on",
-              " ",
-              chainConfig?.displayName || `Chain ${chainId}`,
-              "."
-            ]
+            children: description
           }
         )
       ]
@@ -5799,7 +5678,7 @@ const CrossChainDepositModal = ({
     {
       isOpen,
       onClose,
-      title: "Deposit to Spicenet",
+      title,
       subtitle,
       theme,
       maxWidth: "480px",
@@ -5926,7 +5805,6 @@ const CrossChainDepositModal = ({
             variant: "outline",
             fullWidth: true,
             onClick: executeDeposit,
-            loading: isExecuting,
             disabled: !canDeposit,
             theme,
             style: {

package/dist/types/deposit.d.ts CHANGED Viewed

@@ -29,6 +29,7 @@ export interface DepositWidgetProps {
     depositInputHook?: UseDepositInputReturn;
     onDepositSuccess?: (intentId: string) => void;
     onDepositError?: (error: string) => void;
+    onTopUp?: () => void;
 }
 export interface DepositModalProps {
     isOpen: boolean;

package/package.json CHANGED Viewed

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