@spicenet-io/spiceflow-ui 1.2.0 → 1.2.2

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-aWXByNBC.js';
+import { c as createTheme, B as Button } from './Button-RifBkofT.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-aWXByNBC.js';
+import { B as Button, c as createTheme } from './Button-RifBkofT.js';
 import { usePrivy, useLogin, useLogout } from '@privy-io/react-auth';
 
 const PrivyLogin = ({

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

@@ -15,8 +15,7 @@ export interface SpiceDepositProps {
     destinationTokenAddress?: string;
     postDepositInstruction?: (bridgedAmount: string) => Promise<void> | void;
     postDepositInstructionLabel?: string;
+    useInternalWagmi?: boolean;
 }
 export declare const SpiceDepositFlow: React.FC<SpiceDepositProps>;
-export declare const SpiceDeposit: React.FC<SpiceDepositProps & {
-    useInternalWagmi?: boolean;
-}>;
+export declare const SpiceDeposit: React.FC<SpiceDepositProps>;

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

@@ -2,4 +2,4 @@ import { SelectChainModal } from "./SelectChainModal";
 import { ConnectWalletModal } from "./ConnectWalletModal";
 import { DepositModal } from "./DepositModal";
 import { SpiceDeposit, SpiceDepositFlow } from "./SpiceDeposit";
-export { SelectChainModal, ConnectWalletModal, DepositModal, SpiceDeposit, SpiceDepositFlow };
+export { SelectChainModal, ConnectWalletModal, DepositModal, SpiceDeposit, SpiceDepositFlow, };

package/dist/index.cjs.js

@@ -6012,7 +6012,7 @@ const DepositModal = React.memo(
     const address = embeddedWalletAddress || embeddedWallet?.address;
     const sourceAddress = externalWalletAddress;
     const { data: externalWalletClient } = wagmi.useWalletClient();
-    const { switchChainAsync } = wagmi.useSwitchChain();
+    wagmi.useSwitchChain();
     const { chain: currentChain } = wagmi.useAccount();
     const currentChainRef = React.useRef(currentChain);
     React.useEffect(() => {
@@ -6181,6 +6181,11 @@ const DepositModal = React.memo(
       });
       setShowConfirmation(true);
     };
+    const isChainMismatchError = (error2) => {
+      const errorMessage = error2?.message || error2?.shortMessage || error2?.details || error2?.cause?.message || error2?.reason || String(error2 || "");
+      const errorString = errorMessage.toLowerCase();
+      return errorString.includes("does not match") || errorString.includes("current chain") || errorString.includes("expected chain") || errorString.includes("chain mismatch") || errorString.includes("target chain") || errorString.includes("the current chain of the wallet") || errorString.includes("chain of the wallet") || errorString.includes("chain") && errorString.includes("match") && errorString.includes("id") || error2?.code && error2.code === 4902 || error2?.name === "ChainMismatchError" || error2?.name === "ChainMismatch";
+    };
     const executeDeposit = async () => {
       const validAssets = selectedDepositAssets.filter(
         (a) => a.asset && a.amount && parseFloat(a.amount) > 0
@@ -6214,36 +6219,6 @@ const DepositModal = React.memo(
         if (!externalWalletClient) {
           throw new Error("External wallet not connected");
         }
-        if (currentChain?.id !== chainId) {
-          setError("Wrong chain selected. Switching network...");
-          try {
-            await switchChainAsync({ chainId });
-            let attempts = 0;
-            const maxAttempts = 20;
-            while (attempts < maxAttempts) {
-              await new Promise((resolve) => setTimeout(resolve, 100));
-              if (currentChainRef.current?.id === chainId) {
-                setError(null);
-                break;
-              }
-              attempts++;
-            }
-            if (currentChainRef.current?.id !== chainId) {
-              throw new Error(
-                `Failed to switch to chain ${chainId}. Please switch manually in your wallet.`
-              );
-            }
-            setError(null);
-          } catch (switchError) {
-            if (switchError.code === 4902 || switchError.name === "ChainNotConfiguredError") {
-              throw new Error(
-                `Chain ${chainId} is not configured in your wallet. Please add it manually.`
-              );
-            } else {
-              throw switchError;
-            }
-          }
-        }
         if (nonEip7702Mode) {
           if (!destinationChainId) {
             throw new Error(
@@ -6517,16 +6492,20 @@ const DepositModal = React.memo(
         }
       } catch (error2) {
         hasError = true;
+        const errorMsgText = error2?.message || error2?.shortMessage || error2?.details || error2?.cause?.message || String(error2 || "");
         let errorMessage = "Deposit failed";
-        if (error2?.code === 4001 || error2?.code === "ACTION_REJECTED") {
+        if (isChainMismatchError(error2)) {
+          const chainId = validAssets[0]?.asset?.chainId;
+          const chainConfig = chainId ? getChainConfig(chainId) : null;
+          const chainName = chainConfig?.displayName || `Chain ${chainId}`;
+          errorMessage = `Wrong network selected. Please switch your wallet to ${chainName} and click the DEPOSIT button again.`;
+        } else if (error2?.code === 4001 || error2?.code === "ACTION_REJECTED") {
           errorMessage = "Transaction rejected by user";
         } else if (error2?.code === -32603) {
           errorMessage = "Internal wallet error. Please try again.";
-        } else if (error2?.message?.includes("insufficient funds")) {
+        } else if (errorMsgText.toLowerCase().includes("insufficient funds")) {
           errorMessage = "Insufficient funds for transaction";
-        } else if (error2?.message?.includes("User rejected")) {
-          errorMessage = "Transaction rejected by user";
-        } else if (error2?.message?.includes("user rejected")) {
+        } else if (errorMsgText.toLowerCase().includes("user rejected")) {
           errorMessage = "Transaction rejected by user";
         } else if (error2 instanceof Error) {
           errorMessage = error2.message;

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, parseEther, parseUnits, encodeFunctionData } from 'viem';
-import { c as createTheme, B as Button, d as defaultTheme } from './Button-aWXByNBC.js';
+import { c as createTheme, B as Button, d as defaultTheme } from './Button-RifBkofT.js';
 import { getBalance } from 'viem/actions';
 import { basecampTestnet, citreaTestnet, baseSepolia, arbitrumSepolia, sepolia } from 'viem/chains';
 import { createPortal } from 'react-dom';
@@ -6010,7 +6010,7 @@ const DepositModal = React.memo(
     const address = embeddedWalletAddress || embeddedWallet?.address;
     const sourceAddress = externalWalletAddress;
     const { data: externalWalletClient } = useWalletClient();
-    const { switchChainAsync } = useSwitchChain();
+    useSwitchChain();
     const { chain: currentChain } = useAccount();
     const currentChainRef = React.useRef(currentChain);
     React.useEffect(() => {
@@ -6179,6 +6179,11 @@ const DepositModal = React.memo(
       });
       setShowConfirmation(true);
     };
+    const isChainMismatchError = (error2) => {
+      const errorMessage = error2?.message || error2?.shortMessage || error2?.details || error2?.cause?.message || error2?.reason || String(error2 || "");
+      const errorString = errorMessage.toLowerCase();
+      return errorString.includes("does not match") || errorString.includes("current chain") || errorString.includes("expected chain") || errorString.includes("chain mismatch") || errorString.includes("target chain") || errorString.includes("the current chain of the wallet") || errorString.includes("chain of the wallet") || errorString.includes("chain") && errorString.includes("match") && errorString.includes("id") || error2?.code && error2.code === 4902 || error2?.name === "ChainMismatchError" || error2?.name === "ChainMismatch";
+    };
     const executeDeposit = async () => {
       const validAssets = selectedDepositAssets.filter(
         (a) => a.asset && a.amount && parseFloat(a.amount) > 0
@@ -6212,36 +6217,6 @@ const DepositModal = React.memo(
         if (!externalWalletClient) {
           throw new Error("External wallet not connected");
         }
-        if (currentChain?.id !== chainId) {
-          setError("Wrong chain selected. Switching network...");
-          try {
-            await switchChainAsync({ chainId });
-            let attempts = 0;
-            const maxAttempts = 20;
-            while (attempts < maxAttempts) {
-              await new Promise((resolve) => setTimeout(resolve, 100));
-              if (currentChainRef.current?.id === chainId) {
-                setError(null);
-                break;
-              }
-              attempts++;
-            }
-            if (currentChainRef.current?.id !== chainId) {
-              throw new Error(
-                `Failed to switch to chain ${chainId}. Please switch manually in your wallet.`
-              );
-            }
-            setError(null);
-          } catch (switchError) {
-            if (switchError.code === 4902 || switchError.name === "ChainNotConfiguredError") {
-              throw new Error(
-                `Chain ${chainId} is not configured in your wallet. Please add it manually.`
-              );
-            } else {
-              throw switchError;
-            }
-          }
-        }
         if (nonEip7702Mode) {
           if (!destinationChainId) {
             throw new Error(
@@ -6515,16 +6490,20 @@ const DepositModal = React.memo(
         }
       } catch (error2) {
         hasError = true;
+        const errorMsgText = error2?.message || error2?.shortMessage || error2?.details || error2?.cause?.message || String(error2 || "");
         let errorMessage = "Deposit failed";
-        if (error2?.code === 4001 || error2?.code === "ACTION_REJECTED") {
+        if (isChainMismatchError(error2)) {
+          const chainId = validAssets[0]?.asset?.chainId;
+          const chainConfig = chainId ? getChainConfig(chainId) : null;
+          const chainName = chainConfig?.displayName || `Chain ${chainId}`;
+          errorMessage = `Wrong network selected. Please switch your wallet to ${chainName} and click the DEPOSIT button again.`;
+        } else if (error2?.code === 4001 || error2?.code === "ACTION_REJECTED") {
           errorMessage = "Transaction rejected by user";
         } else if (error2?.code === -32603) {
           errorMessage = "Internal wallet error. Please try again.";
-        } else if (error2?.message?.includes("insufficient funds")) {
+        } else if (errorMsgText.toLowerCase().includes("insufficient funds")) {
           errorMessage = "Insufficient funds for transaction";
-        } else if (error2?.message?.includes("User rejected")) {
-          errorMessage = "Transaction rejected by user";
-        } else if (error2?.message?.includes("user rejected")) {
+        } else if (errorMsgText.toLowerCase().includes("user rejected")) {
           errorMessage = "Transaction rejected by user";
         } else if (error2 instanceof Error) {
           errorMessage = error2.message;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spicenet-io/spiceflow-ui",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Spiceflow UI SDK",
   "type": "module",
   "main": "dist/index.cjs.js",
@@ -71,14 +71,14 @@
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "@dynamic-labs/ethereum": ">=3.9.13",
-    "@dynamic-labs/sdk-react-core": ">=3.9.13",
-    "@dynamic-labs/wallet-connector-core": ">=3.9.13",
-    "@privy-io/react-auth": ">=2.24.0",
+    "@dynamic-labs/ethereum": ">=3.9.13 <5.0.0",
+    "@dynamic-labs/sdk-react-core": ">=3.9.13 <5.0.0",
+    "@dynamic-labs/wallet-connector-core": ">=3.9.13 <5.0.0",
+    "@privy-io/react-auth": ">=2.24.0 <4.0.0",
     "@tanstack/react-query": ">=5.0.0",
     "axios": ">=1.0.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "spiceflow-core-test": ">=0.1.0",
     "viem": ">=2.21.0",
     "wagmi": ">=2.12.0"
@@ -113,8 +113,8 @@
     "rollup-plugin-esbuild": "^6.1.1",
     "@tanstack/react-query": "^5.90.5",
     "@types/node": "^24.3.0",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "eslint": "^8.45.0",
@@ -127,8 +127,8 @@
     "postcss-import": "^16.1.1",
     "prettier": "3.6.2",
     "jest": "^29.6.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rollup": "^4.50.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",