@spicenet-io/spiceflow-ui 1.6.6 → 1.7.1

package/dist/auth-dynamic.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useEffect, useState, useCallback } from 'react';
-import { c as createTheme, B as Button } from './Button-RifBkofT.js';
+import { c as createTheme, B as Button } from './Button-aWXByNBC.js';
 import { useDynamicContext, useConnectWithOtp } from '@dynamic-labs/sdk-react-core';
 
 const Input = ({

package/dist/auth-privy.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
-import { B as Button, c as createTheme } from './Button-RifBkofT.js';
+import { B as Button, c as createTheme } from './Button-aWXByNBC.js';
 import { usePrivy, useLogin, useLogout } from '@privy-io/react-auth';
 
 const PrivyLogin = ({

package/dist/components/SpiceDeposit/SpiceDeposit.d.ts

@@ -16,5 +16,6 @@ export interface SpiceDepositProps {
     postDepositInstruction?: (bridgedAmount: string) => Promise<void> | void;
     postDepositInstructionLabel?: string;
     airdrop?: boolean;
+    sponsorGas?: boolean;
 }
 export declare const SpiceDeposit: React.FC<SpiceDepositProps>;

package/dist/index.cjs.js

@@ -3914,7 +3914,8 @@ const SwapWidget = ({
 
 const DepositWidget = ({
   depositBatches,
-  tokenAddress = "0x0",
+  tokenAddress,
+  tokenDecimals,
   supportedChains,
   theme: themeMode = "light",
   styles,
@@ -4104,7 +4105,10 @@ const DepositWidget = ({
           [
             {
               tokenAddress,
-              tokenAmount: viem.parseEther(selectedDepositAsset.amount)
+              tokenAmount: viem.parseUnits(
+                selectedDepositAsset.amount,
+                tokenDecimals
+              )
             }
           ]
         ]
@@ -4615,6 +4619,7 @@ const DepositWidgetModal = ({
   // Pass through all DepositWidget props
   depositBatches,
   tokenAddress,
+  tokenDecimals,
   supportedChains,
   theme: themeMode = "light",
   styles,
@@ -4680,6 +4685,7 @@ const DepositWidgetModal = ({
         {
           depositBatches,
           tokenAddress,
+          tokenDecimals,
           supportedChains,
           theme: themeMode,
           styles: {
@@ -6917,7 +6923,8 @@ const DepositModal = React.memo(
     postDepositInstruction,
     postDepositInstructionLabel,
     nativeChainId,
-    airdrop = false
+    airdrop = false,
+    sponsorGas = false
   }) => {
     const depositAmount = depositInputHook?.depositAmount || "";
     const setDepositAmount = depositInputHook?.setDepositAmount || (() => {
@@ -7260,21 +7267,28 @@ const DepositModal = React.memo(
               console.log(`Waiting for transaction receipt: ${txHash}`);
               const receipt = await client.waitForTransactionReceipt({
                 hash: txHash,
-                timeout: 6e4,
-                pollingInterval: 5e3,
-                confirmations: 1
+                timeout: 12e4,
+                pollingInterval: 2e3,
+                confirmations: 2
               });
               console.log("Transaction receipt:", {
                 hash: receipt.transactionHash,
                 blockNumber: receipt.blockNumber,
                 status: receipt.status,
-                confirmations: 1
+                confirmations: 2
               });
               if (receipt.status !== "success") {
                 throw new Error(
                   `Transfer to delegate contract failed for ${selectedAsset.asset.symbol}`
                 );
               }
+              const currentBlock = await client.getBlockNumber();
+              const confirmations = currentBlock - receipt.blockNumber;
+              console.log(`Transaction has ${confirmations} confirmations`);
+              if (confirmations < 2) {
+                console.log("Waiting for additional confirmations...");
+                await new Promise((resolve) => setTimeout(resolve, 3e3));
+              }
               if (!depositDataRef.current) {
                 depositDataRef.current = [];
               }
@@ -7303,11 +7317,27 @@ const DepositModal = React.memo(
             if (!sourceTransactionHash) {
               throw new Error("No transaction hash generated");
             }
+            const finalClient = getClientForChain(chainId);
+            const finalBlock = await finalClient.getBlockNumber();
+            console.log(
+              "Final block number before relayer submission:",
+              finalBlock
+            );
+            console.log("All transactions confirmed, submitting to relayer...");
             if (!destinationTokenAddress) {
               throw new Error(
                 "Destination token address is required for bridging"
               );
             }
+            if (sponsorGas && nativeChainId) {
+              const gasAmount = viem.parseUnits("0.0003", 18);
+              tokenTransfers.push({
+                tokenAddress: "0x0",
+                tokenAmount: gasAmount.toString(),
+                sender: sourceAddress,
+                receiver: delegateContract
+              });
+            }
             const result = await relayerService.submitTransactionNon7702({
               tokenTransfers: [tokenTransfers],
               user: sourceAddress,
@@ -7376,21 +7406,28 @@ const DepositModal = React.memo(
             );
             const receipt = await client2.waitForTransactionReceipt({
               hash: transferToEmbeddedTx,
-              timeout: 6e4,
-              pollingInterval: 5e3,
-              confirmations: 1
+              timeout: 12e4,
+              pollingInterval: 2e3,
+              confirmations: 2
             });
             console.log("Transaction receipt (EIP-7702):", {
               hash: receipt.transactionHash,
               blockNumber: receipt.blockNumber,
               status: receipt.status,
-              confirmations: 1
+              confirmations: 2
             });
             if (receipt.status !== "success") {
               throw new Error(
                 `Transfer to embedded wallet failed for ${selectedAsset.asset.symbol}`
               );
             }
+            const currentBlock = await client2.getBlockNumber();
+            const confirmations = currentBlock - receipt.blockNumber;
+            console.log(`Transaction has ${confirmations} confirmations`);
+            if (confirmations < 2) {
+              console.log("Waiting for additional confirmations...");
+              await new Promise((resolve) => setTimeout(resolve, 3e3));
+            }
             console.log("Calling submitSpiceDeposit (EIP-7702) with:", {
               txHash: transferToEmbeddedTx,
               sender: sourceAddress,
@@ -7432,6 +7469,15 @@ const DepositModal = React.memo(
               receiver: isNative ? "" : escrowAddress
             });
           }
+          if (sponsorGas && nativeChainId) {
+            const gasAmount = viem.parseUnits("0.0003", 18);
+            tokenTransfers.push({
+              tokenAddress: "0x0",
+              tokenAmount: gasAmount.toString(),
+              sender: address,
+              receiver: address
+            });
+          }
           const client = getClientForChain(chainId);
           const sourceRecentBlock = await client.getBlockNumber();
           const escrowDepositBatch = {
@@ -8093,7 +8139,8 @@ const SpiceDepositFlow = ({
   destinationTokenAddress,
   postDepositInstruction,
   postDepositInstructionLabel,
-  airdrop = false
+  airdrop = false,
+  sponsorGas = false
 }) => {
   const context = React.useContext(SpiceFlowProviderContext);
   if (!context) {
@@ -8222,7 +8269,8 @@ const SpiceDepositFlow = ({
         postDepositInstruction,
         postDepositInstructionLabel,
         nativeChainId,
-        airdrop
+        airdrop,
+        sponsorGas
       }
     );
   }
@@ -11916,7 +11964,7 @@ const LpModal = ({
 };
 
 const useFromInput = () => {
-  const [fromAmount, setFromAmount] = React.useState("");
+  const [fromAmount, setFromAmount] = React.useState("0");
   return {
     fromAmount,
     setFromAmount
@@ -11924,7 +11972,7 @@ const useFromInput = () => {
 };
 
 const useToInputUpdate = () => {
-  const [toAmount, setToAmount] = React.useState("");
+  const [toAmount, setToAmount] = React.useState("0");
   const updateToAmount = React.useCallback((amount) => {
     setToAmount(amount);
   }, []);
@@ -11936,7 +11984,7 @@ const useToInputUpdate = () => {
 };
 
 const useDepositInput = () => {
-  const [depositAmount, setDepositAmount] = React.useState("");
+  const [depositAmount, setDepositAmount] = React.useState("0");
   return {
     depositAmount,
     setDepositAmount

package/dist/index.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useState, useRef, useEffect, useCallback, createContext, useContext, useTransition, forwardRef, createElement, useMemo } from 'react';
 import { defineChain, createPublicClient, http, isAddress, getAddress, parseEther, encodeFunctionData, parseUnits, erc20Abi } from 'viem';
-import { c as createTheme, B as Button, d as defaultTheme } from './Button-RifBkofT.js';
+import { c as createTheme, B as Button, d as defaultTheme } from './Button-aWXByNBC.js';
 import { getBalance, readContract } from 'viem/actions';
 import { basecampTestnet, citreaTestnet, baseSepolia, arbitrumSepolia, sepolia } from 'viem/chains';
 import { createPortal } from 'react-dom';
@@ -3912,7 +3912,8 @@ const SwapWidget = ({
 
 const DepositWidget = ({
   depositBatches,
-  tokenAddress = "0x0",
+  tokenAddress,
+  tokenDecimals,
   supportedChains,
   theme: themeMode = "light",
   styles,
@@ -4102,7 +4103,10 @@ const DepositWidget = ({
           [
             {
               tokenAddress,
-              tokenAmount: parseEther(selectedDepositAsset.amount)
+              tokenAmount: parseUnits(
+                selectedDepositAsset.amount,
+                tokenDecimals
+              )
             }
           ]
         ]
@@ -4613,6 +4617,7 @@ const DepositWidgetModal = ({
   // Pass through all DepositWidget props
   depositBatches,
   tokenAddress,
+  tokenDecimals,
   supportedChains,
   theme: themeMode = "light",
   styles,
@@ -4678,6 +4683,7 @@ const DepositWidgetModal = ({
         {
           depositBatches,
           tokenAddress,
+          tokenDecimals,
           supportedChains,
           theme: themeMode,
           styles: {
@@ -6915,7 +6921,8 @@ const DepositModal = React.memo(
     postDepositInstruction,
     postDepositInstructionLabel,
     nativeChainId,
-    airdrop = false
+    airdrop = false,
+    sponsorGas = false
   }) => {
     const depositAmount = depositInputHook?.depositAmount || "";
     const setDepositAmount = depositInputHook?.setDepositAmount || (() => {
@@ -7258,21 +7265,28 @@ const DepositModal = React.memo(
               console.log(`Waiting for transaction receipt: ${txHash}`);
               const receipt = await client.waitForTransactionReceipt({
                 hash: txHash,
-                timeout: 6e4,
-                pollingInterval: 5e3,
-                confirmations: 1
+                timeout: 12e4,
+                pollingInterval: 2e3,
+                confirmations: 2
               });
               console.log("Transaction receipt:", {
                 hash: receipt.transactionHash,
                 blockNumber: receipt.blockNumber,
                 status: receipt.status,
-                confirmations: 1
+                confirmations: 2
               });
               if (receipt.status !== "success") {
                 throw new Error(
                   `Transfer to delegate contract failed for ${selectedAsset.asset.symbol}`
                 );
               }
+              const currentBlock = await client.getBlockNumber();
+              const confirmations = currentBlock - receipt.blockNumber;
+              console.log(`Transaction has ${confirmations} confirmations`);
+              if (confirmations < 2) {
+                console.log("Waiting for additional confirmations...");
+                await new Promise((resolve) => setTimeout(resolve, 3e3));
+              }
               if (!depositDataRef.current) {
                 depositDataRef.current = [];
               }
@@ -7301,11 +7315,27 @@ const DepositModal = React.memo(
             if (!sourceTransactionHash) {
               throw new Error("No transaction hash generated");
             }
+            const finalClient = getClientForChain(chainId);
+            const finalBlock = await finalClient.getBlockNumber();
+            console.log(
+              "Final block number before relayer submission:",
+              finalBlock
+            );
+            console.log("All transactions confirmed, submitting to relayer...");
             if (!destinationTokenAddress) {
               throw new Error(
                 "Destination token address is required for bridging"
               );
             }
+            if (sponsorGas && nativeChainId) {
+              const gasAmount = parseUnits("0.0003", 18);
+              tokenTransfers.push({
+                tokenAddress: "0x0",
+                tokenAmount: gasAmount.toString(),
+                sender: sourceAddress,
+                receiver: delegateContract
+              });
+            }
             const result = await relayerService.submitTransactionNon7702({
               tokenTransfers: [tokenTransfers],
               user: sourceAddress,
@@ -7374,21 +7404,28 @@ const DepositModal = React.memo(
             );
             const receipt = await client2.waitForTransactionReceipt({
               hash: transferToEmbeddedTx,
-              timeout: 6e4,
-              pollingInterval: 5e3,
-              confirmations: 1
+              timeout: 12e4,
+              pollingInterval: 2e3,
+              confirmations: 2
             });
             console.log("Transaction receipt (EIP-7702):", {
               hash: receipt.transactionHash,
               blockNumber: receipt.blockNumber,
               status: receipt.status,
-              confirmations: 1
+              confirmations: 2
             });
             if (receipt.status !== "success") {
               throw new Error(
                 `Transfer to embedded wallet failed for ${selectedAsset.asset.symbol}`
               );
             }
+            const currentBlock = await client2.getBlockNumber();
+            const confirmations = currentBlock - receipt.blockNumber;
+            console.log(`Transaction has ${confirmations} confirmations`);
+            if (confirmations < 2) {
+              console.log("Waiting for additional confirmations...");
+              await new Promise((resolve) => setTimeout(resolve, 3e3));
+            }
             console.log("Calling submitSpiceDeposit (EIP-7702) with:", {
               txHash: transferToEmbeddedTx,
               sender: sourceAddress,
@@ -7430,6 +7467,15 @@ const DepositModal = React.memo(
               receiver: isNative ? "" : escrowAddress
             });
           }
+          if (sponsorGas && nativeChainId) {
+            const gasAmount = parseUnits("0.0003", 18);
+            tokenTransfers.push({
+              tokenAddress: "0x0",
+              tokenAmount: gasAmount.toString(),
+              sender: address,
+              receiver: address
+            });
+          }
           const client = getClientForChain(chainId);
           const sourceRecentBlock = await client.getBlockNumber();
           const escrowDepositBatch = {
@@ -8091,7 +8137,8 @@ const SpiceDepositFlow = ({
   destinationTokenAddress,
   postDepositInstruction,
   postDepositInstructionLabel,
-  airdrop = false
+  airdrop = false,
+  sponsorGas = false
 }) => {
   const context = useContext(SpiceFlowProviderContext);
   if (!context) {
@@ -8220,7 +8267,8 @@ const SpiceDepositFlow = ({
         postDepositInstruction,
         postDepositInstructionLabel,
         nativeChainId,
-        airdrop
+        airdrop,
+        sponsorGas
       }
     );
   }
@@ -11914,7 +11962,7 @@ const LpModal = ({
 };
 
 const useFromInput = () => {
-  const [fromAmount, setFromAmount] = useState("");
+  const [fromAmount, setFromAmount] = useState("0");
   return {
     fromAmount,
     setFromAmount
@@ -11922,7 +11970,7 @@ const useFromInput = () => {
 };
 
 const useToInputUpdate = () => {
-  const [toAmount, setToAmount] = useState("");
+  const [toAmount, setToAmount] = useState("0");
   const updateToAmount = useCallback((amount) => {
     setToAmount(amount);
   }, []);
@@ -11934,7 +11982,7 @@ const useToInputUpdate = () => {
 };
 
 const useDepositInput = () => {
-  const [depositAmount, setDepositAmount] = useState("");
+  const [depositAmount, setDepositAmount] = useState("0");
   return {
     depositAmount,
     setDepositAmount

package/dist/types/deposit.d.ts

@@ -19,7 +19,8 @@ export interface SpiceDepositResponse {
 }
 export interface DepositWidgetProps {
     depositBatches: ChainBatch[];
-    tokenAddress?: Address;
+    tokenAddress: Address;
+    tokenDecimals: number;
     supportedChains: number[];
     theme?: ThemeMode;
     styles?: CustomStyles;
@@ -49,4 +50,5 @@ export interface DepositModalProps {
     postDepositInstructionLabel?: string;
     nativeChainId?: number;
     airdrop?: boolean;
+    sponsorGas?: boolean;
 }

package/package.json

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