@rhinestone/deposit-modal 0.1.32 → 0.1.34

package/dist/{DepositModalReown-SZPCCNPH.mjs → DepositModalReown-25YB4LPZ.mjs}

@@ -1,10 +1,10 @@
 import {
   DepositModalInner
-} from "./chunk-MKKJ7ZE2.mjs";
+} from "./chunk-DL5M5QZZ.mjs";
 import {
   ReownWalletProvider,
   useReownWallet
-} from "./chunk-K2JJKFTV.mjs";
+} from "./chunk-SJEIKMVO.mjs";
 import "./chunk-DLFUXLAM.mjs";
 import "./chunk-C6I5TFSL.mjs";
 

package/dist/{DepositModalReown-XUAEWIW7.cjs → DepositModalReown-TLKQ7Y4X.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkNYEWO4NWcjs = require('./chunk-NYEWO4NW.cjs');
+var _chunkYCXVHPGZcjs = require('./chunk-YCXVHPGZ.cjs');
 
 
 
-var _chunk52FVEYTLcjs = require('./chunk-52FVEYTL.cjs');
+var _chunkV7I5T4SWcjs = require('./chunk-V7I5T4SW.cjs');
 require('./chunk-YIHOACM3.cjs');
 require('./chunk-S4UBVD3H.cjs');
 
@@ -12,7 +12,7 @@ require('./chunk-S4UBVD3H.cjs');
 var _react = require('react');
 var _jsxruntime = require('react/jsx-runtime');
 function DepositModalWithReown(props) {
-  const reown = _chunk52FVEYTLcjs.useReownWallet.call(void 0, );
+  const reown = _chunkV7I5T4SWcjs.useReownWallet.call(void 0, );
   const handleConnect = _react.useCallback.call(void 0, () => {
     reown.openConnect();
   }, [reown.openConnect]);
@@ -20,7 +20,7 @@ function DepositModalWithReown(props) {
     reown.disconnect();
   }, [reown.disconnect]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkNYEWO4NWcjs.DepositModalInner,
+    _chunkYCXVHPGZcjs.DepositModalInner,
     {
       ...props,
       reownWallet: reown,
@@ -30,7 +30,7 @@ function DepositModalWithReown(props) {
   );
 }
 function DepositModalReown(props) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk52FVEYTLcjs.ReownWalletProvider, { projectId: props.reownAppId, theme: props.theme, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DepositModalWithReown, { ...props }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkV7I5T4SWcjs.ReownWalletProvider, { projectId: props.reownAppId, theme: props.theme, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DepositModalWithReown, { ...props }) });
 }
 
 

package/dist/{WithdrawModalReown-YGGV7BL2.mjs → WithdrawModalReown-E3OEW7QZ.mjs}

@@ -1,10 +1,10 @@
 import {
   WithdrawModalInner
-} from "./chunk-RR25E5DZ.mjs";
+} from "./chunk-EIWNQ2MO.mjs";
 import {
   ReownWalletProvider,
   useReownWallet
-} from "./chunk-K2JJKFTV.mjs";
+} from "./chunk-SJEIKMVO.mjs";
 import "./chunk-DLFUXLAM.mjs";
 import "./chunk-C6I5TFSL.mjs";
 

package/dist/{WithdrawModalReown-53FDOZG2.cjs → WithdrawModalReown-HTPBAGPM.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkSQDXU7MLcjs = require('./chunk-SQDXU7ML.cjs');
+var _chunkDQO6MO27cjs = require('./chunk-DQO6MO27.cjs');
 
 
 
-var _chunk52FVEYTLcjs = require('./chunk-52FVEYTL.cjs');
+var _chunkV7I5T4SWcjs = require('./chunk-V7I5T4SW.cjs');
 require('./chunk-YIHOACM3.cjs');
 require('./chunk-S4UBVD3H.cjs');
 
@@ -12,7 +12,7 @@ require('./chunk-S4UBVD3H.cjs');
 var _react = require('react');
 var _jsxruntime = require('react/jsx-runtime');
 function WithdrawModalWithReown(props) {
-  const reown = _chunk52FVEYTLcjs.useReownWallet.call(void 0, );
+  const reown = _chunkV7I5T4SWcjs.useReownWallet.call(void 0, );
   const handleConnect = _react.useCallback.call(void 0, () => {
     reown.openConnect();
   }, [reown.openConnect]);
@@ -20,7 +20,7 @@ function WithdrawModalWithReown(props) {
     reown.disconnect();
   }, [reown.disconnect]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkSQDXU7MLcjs.WithdrawModalInner,
+    _chunkDQO6MO27cjs.WithdrawModalInner,
     {
       ...props,
       reownWallet: reown,
@@ -30,7 +30,7 @@ function WithdrawModalWithReown(props) {
   );
 }
 function WithdrawModalReown(props) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk52FVEYTLcjs.ReownWalletProvider, { projectId: props.reownAppId, theme: props.theme, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WithdrawModalWithReown, { ...props }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkV7I5T4SWcjs.ReownWalletProvider, { projectId: props.reownAppId, theme: props.theme, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WithdrawModalWithReown, { ...props }) });
 }
 
 

package/dist/{chunk-MKKJ7ZE2.mjs → chunk-DL5M5QZZ.mjs}

@@ -42,8 +42,8 @@ import {
 // src/DepositModal.tsx
 import {
   useMemo as useMemo6,
-  useEffect as useEffect7,
-  useRef as useRef5,
+  useEffect as useEffect8,
+  useRef as useRef6,
   useState as useState8,
   useCallback as useCallback4,
   lazy,
@@ -51,7 +51,7 @@ import {
 } from "react";
 
 // src/DepositFlow.tsx
-import { useState as useState7, useCallback as useCallback3, useMemo as useMemo5, useEffect as useEffect6, useRef as useRef4 } from "react";
+import { useState as useState7, useCallback as useCallback3, useMemo as useMemo5, useEffect as useEffect7, useRef as useRef5 } from "react";
 
 // src/components/steps/SetupStep.tsx
 import { useState, useEffect, useRef, useCallback } from "react";
@@ -510,7 +510,7 @@ function mergeAssets(existing, incoming) {
 }
 
 // src/components/steps/AmountStep.tsx
-import { useEffect as useEffect3, useMemo as useMemo2, useState as useState3, useRef as useRef2 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
 import { erc20Abi, formatUnits as formatUnits2, parseUnits } from "viem";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function AmountStep({
@@ -586,13 +586,16 @@ function AmountStep({
       hasAttemptedSwitch.current = true;
       setIsSwitching(true);
       switchChain(asset.chainId).catch((err) => {
-        const message = err instanceof Error ? err.message : "Failed to switch chain";
-        setError(message);
+        const raw = err instanceof Error ? err.message : "Failed to switch chain";
+        setError(formatUserError(raw));
       }).finally(() => {
         setIsSwitching(false);
       });
     }
   }, [chainMismatch, switchChain, asset.chainId]);
+  useEffect3(() => {
+    hasAttemptedSwitch.current = false;
+  }, [asset.chainId]);
   useEffect3(() => {
     if (defaultAmount && !amount) {
       const parsed = Number(defaultAmount);
@@ -688,18 +691,6 @@ function AmountStep({
     setError(null);
     onContinue(tokenAmountStr, amount, balance ?? void 0);
   };
-  const handleSwitch = async () => {
-    if (!asset.chainId || !switchChain) return;
-    setIsSwitching(true);
-    try {
-      await switchChain(asset.chainId);
-    } catch (err) {
-      const message = err instanceof Error ? err.message : "Failed to switch chain";
-      setError(message);
-    } finally {
-      setIsSwitching(false);
-    }
-  };
   return /* @__PURE__ */ jsxs3("div", { className: "rs-step", children: [
     /* @__PURE__ */ jsxs3("div", { className: "rs-step-body", style: { paddingTop: 0 }, children: [
       /* @__PURE__ */ jsxs3("div", { className: "rs-amount-display", children: [
@@ -865,14 +856,7 @@ function AmountStep({
           }
         )
       ] }),
-      chainMismatch && !isSwitching && /* @__PURE__ */ jsxs3("div", { className: "rs-chain-switch", style: { marginTop: 16 }, children: [
-        /* @__PURE__ */ jsxs3("div", { className: "rs-chain-switch-text", children: [
-          "Switch your wallet to ",
-          getChainName(asset.chainId),
-          " to continue."
-        ] }),
-        switchChain && /* @__PURE__ */ jsx3(Button, { variant: "outline", size: "small", onClick: handleSwitch, children: "Switch" })
-      ] }),
+      chainMismatch && /* @__PURE__ */ jsx3("div", { className: "rs-chain-switch", style: { marginTop: 16 }, children: /* @__PURE__ */ jsx3("div", { className: "rs-chain-switch-text", children: isSwitching ? `Switching to ${getChainName(asset.chainId)}...` : `Switch your wallet to ${getChainName(asset.chainId)} to continue.` }) }),
       error && /* @__PURE__ */ jsxs3("div", { className: "rs-amount-error", children: [
         /* @__PURE__ */ jsx3(
           "svg",
@@ -909,7 +893,7 @@ function AmountStep({
 }
 
 // src/components/steps/ConfirmStep.tsx
-import { useState as useState4 } from "react";
+import { useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
 import { erc20Abi as erc20Abi2, parseUnits as parseUnits2 } from "viem";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function ConfirmStep({
@@ -932,6 +916,7 @@ function ConfirmStep({
   const [isSubmitting, setIsSubmitting] = useState4(false);
   const [error, setError] = useState4(null);
   const [isSwitching, setIsSwitching] = useState4(false);
+  const hasAttemptedSwitch = useRef3(false);
   const chainMismatch = walletClient?.chain?.id && walletClient.chain.id !== asset.chainId;
   const sameRoute = targetChain === asset.chainId && targetToken.toLowerCase() === asset.token.toLowerCase();
   const targetSymbol = sameRoute ? asset.symbol : getTokenSymbol(targetToken, targetChain);
@@ -947,6 +932,21 @@ function ConfirmStep({
     return formattedSendAmount;
   })();
   const receiveAmount = sameRoute ? formattedReceiveAmount : `~ ${formattedReceiveAmount}`;
+  useEffect4(() => {
+    if (chainMismatch && switchChain && !hasAttemptedSwitch.current) {
+      hasAttemptedSwitch.current = true;
+      setIsSwitching(true);
+      switchChain(asset.chainId).catch((err) => {
+        const raw = err instanceof Error ? err.message : "Failed to switch chain";
+        setError(formatUserError(raw));
+      }).finally(() => {
+        setIsSwitching(false);
+      });
+    }
+  }, [chainMismatch, switchChain, asset.chainId]);
+  useEffect4(() => {
+    hasAttemptedSwitch.current = false;
+  }, [asset.chainId]);
   const handleConfirm = async () => {
     if (!address || !walletClient) {
       setError("Wallet not connected");
@@ -1005,18 +1005,6 @@ function ConfirmStep({
       setIsSubmitting(false);
     }
   };
-  const handleSwitch = async () => {
-    if (!switchChain) return;
-    setIsSwitching(true);
-    try {
-      await switchChain(asset.chainId);
-    } catch (err) {
-      const raw = err instanceof Error ? err.message : "Failed to switch chain";
-      setError(formatUserError(raw));
-    } finally {
-      setIsSwitching(false);
-    }
-  };
   return /* @__PURE__ */ jsxs4("div", { className: "rs-step", children: [
     /* @__PURE__ */ jsx4("div", { style: { padding: "12px 12px 10px" }, children: /* @__PURE__ */ jsx4("div", { className: "rs-step-title", children: "Review order" }) }),
     /* @__PURE__ */ jsxs4("div", { className: "rs-step-body rs-space-y-3", style: { paddingTop: 0 }, children: [
@@ -1116,23 +1104,7 @@ function ConfirmStep({
           )
         ] })
       ] }),
-      chainMismatch && /* @__PURE__ */ jsxs4("div", { className: "rs-chain-switch", children: [
-        /* @__PURE__ */ jsxs4("div", { className: "rs-chain-switch-text", children: [
-          "Switch your wallet to ",
-          getChainName(asset.chainId),
-          " to sign."
-        ] }),
-        switchChain && /* @__PURE__ */ jsx4(
-          Button,
-          {
-            variant: "outline",
-            size: "small",
-            loading: isSwitching,
-            onClick: handleSwitch,
-            children: "Switch"
-          }
-        )
-      ] }),
+      chainMismatch && /* @__PURE__ */ jsx4("div", { className: "rs-chain-switch", children: /* @__PURE__ */ jsx4("div", { className: "rs-chain-switch-text", children: isSwitching ? `Switching to ${getChainName(asset.chainId)}...` : `Switch your wallet to ${getChainName(asset.chainId)} to sign.` }) }),
       error && /* @__PURE__ */ jsxs4("div", { className: "rs-alert rs-alert--error", children: [
         /* @__PURE__ */ jsx4(
           "svg",
@@ -1170,14 +1142,14 @@ function ConfirmStep({
 }
 
 // src/components/steps/DepositAddressStep.tsx
-import { useState as useState6, useEffect as useEffect5, useCallback as useCallback2, useRef as useRef3, useMemo as useMemo4 } from "react";
+import { useState as useState6, useEffect as useEffect6, useCallback as useCallback2, useRef as useRef4, useMemo as useMemo4 } from "react";
 
 // src/components/ui/QRCode.tsx
-import { useEffect as useEffect4, useMemo as useMemo3, useState as useState5 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo3, useState as useState5 } from "react";
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function QRCode({ value, size = 200, iconSrc, className }) {
   const [createQrCode, setCreateQrCode] = useState5(null);
-  useEffect4(() => {
+  useEffect5(() => {
     let mounted = true;
     void import("qrcode-generator").then((mod) => {
       if (mounted) {
@@ -1320,7 +1292,7 @@ function DepositAddressStep({
   );
   const defaultToken = tokensForChain.includes("USDC") ? "USDC" : tokensForChain[0] ?? "USDC";
   const [sourceTokenSymbol, setSourceTokenSymbol] = useState6(defaultToken);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!tokensForChain.includes(sourceTokenSymbol)) {
       setSourceTokenSymbol(tokensForChain[0] ?? "USDC");
     }
@@ -1329,12 +1301,12 @@ function DepositAddressStep({
   const [pollingError, setPollingError] = useState6(null);
   const [chainDropdownOpen, setChainDropdownOpen] = useState6(false);
   const [tokenDropdownOpen, setTokenDropdownOpen] = useState6(false);
-  const depositHandledRef = useRef3(false);
-  const sourceSelectionRef = useRef3({
+  const depositHandledRef = useRef4(false);
+  const sourceSelectionRef = useRef4({
     chainId: defaultChainId,
     tokenSymbol: defaultToken
   });
-  useEffect5(() => {
+  useEffect6(() => {
     sourceSelectionRef.current = {
       chainId: sourceChainId,
       tokenSymbol: sourceTokenSymbol
@@ -1358,7 +1330,7 @@ function DepositAddressStep({
       setTimeout(() => setCopied(false), 2e3);
     }
   }, [smartAccount]);
-  useEffect5(() => {
+  useEffect6(() => {
     depositHandledRef.current = false;
     setPollingError(null);
     let timeoutId;
@@ -1629,7 +1601,7 @@ function DepositFlow({
   const [totalBalanceUsd, setTotalBalanceUsd] = useState7(0);
   const [isConnectSelectionConfirmed, setIsConnectSelectionConfirmed] = useState7(false);
   const [selectedConnectAddress, setSelectedConnectAddress] = useState7(null);
-  const portfolioAssetsRef = useRef4([]);
+  const portfolioAssetsRef = useRef5([]);
   const handleAssetsLoaded = useCallback3((assets) => {
     portfolioAssetsRef.current = assets;
   }, []);
@@ -1663,7 +1635,7 @@ function DepositFlow({
       });
       seen.add(dappWalletClient.account.address.toLowerCase());
     }
-    if (reownWallet?.address && reownWallet.isConnected && !seen.has(reownWallet.address.toLowerCase())) {
+    if (reownWallet?.address && reownWallet.isConnected && reownWallet.walletClient && reownWallet.publicClient && !seen.has(reownWallet.address.toLowerCase())) {
       options.push({
         address: reownWallet.address,
         label: "External Wallet",
@@ -1677,10 +1649,13 @@ function DepositFlow({
     dappAddress,
     reownWallet?.address,
     reownWallet?.isConnected,
+    reownWallet?.walletClient,
+    reownWallet?.publicClient,
     reownWallet?.icon
   ]);
   const canAutoLock = dappWalletClient?.account && dappAddress && !reownWallet;
   const hasWalletOptions = walletOptions.length > 0;
+  const hasReownSession = Boolean(reownWallet?.isConnected || reownWallet?.address);
   const showConnectStep = !canAutoLock && !isConnectSelectionConfirmed;
   const signerContext = useMemo5(() => {
     if (flowMode === "deposit-address") {
@@ -1733,8 +1708,8 @@ function DepositFlow({
     targetChain
   ]);
   const sessionKeyAddress = dappAddress ?? signerContext?.ownerAddress ?? null;
-  const lastTargetRef = useRef4(null);
-  useEffect6(() => {
+  const lastTargetRef = useRef5(null);
+  useEffect7(() => {
     const prev = lastTargetRef.current;
     if (prev && (prev.chain !== targetChain || prev.token.toLowerCase() !== targetToken.toLowerCase())) {
       if (step.type !== "processing") {
@@ -1775,10 +1750,10 @@ function DepositFlow({
   }, []);
   const stepIndex = step.type === "setup" ? 0 : step.type === "deposit-address" ? 1 : step.type === "select-asset" ? 1 : step.type === "amount" ? 2 : step.type === "confirm" ? 3 : 4;
   const currentBackHandler = step.type === "deposit-address" ? handleBackFromDepositAddress : step.type === "select-asset" && signerContext && !canAutoLock ? handleBackFromSelectAsset : step.type === "amount" ? handleBackFromAmount : step.type === "confirm" ? handleBackFromConfirm : void 0;
-  useEffect6(() => {
+  useEffect7(() => {
     onStepChange?.(stepIndex, currentBackHandler);
   }, [stepIndex, currentBackHandler, onStepChange]);
-  useEffect6(() => {
+  useEffect7(() => {
     onTotalBalanceChange?.(totalBalanceUsd);
   }, [totalBalanceUsd, onTotalBalanceChange]);
   const isDepositAddressMode = flowMode === "deposit-address";
@@ -1912,15 +1887,15 @@ function DepositFlow({
     }
     return null;
   }, [selectedConnectAddress, walletOptions]);
-  const walletOptionsKey = useMemo5(
-    () => walletOptions.map((option) => option.address.toLowerCase()).join(","),
-    [walletOptions]
-  );
-  const hasNavigatedBackRef = useRef4(false);
-  useEffect6(() => {
-    setIsConnectSelectionConfirmed(false);
-  }, [walletOptionsKey]);
-  useEffect6(() => {
+  const hasNavigatedBackRef = useRef5(false);
+  useEffect7(() => {
+    if (!showConnectStep && isConnectSelectionConfirmed && flowMode === "wallet" && !signerContext) {
+      setSelectedConnectAddress(null);
+      setIsConnectSelectionConfirmed(false);
+      setFlowMode(null);
+    }
+  }, [showConnectStep, isConnectSelectionConfirmed, flowMode, signerContext]);
+  useEffect7(() => {
     if (hasNavigatedBackRef.current || isConnectSelectionConfirmed || flowMode) {
       return;
     }
@@ -1933,12 +1908,13 @@ function DepositFlow({
         return;
       }
     }
-    if (!hasWalletOptions && dappAddress) {
+    if (!hasWalletOptions && dappAddress && !hasReownSession) {
       handleSelectTransferCrypto();
       setIsConnectSelectionConfirmed(true);
     }
   }, [
     hasWalletOptions,
+    hasReownSession,
     isConnectSelectionConfirmed,
     flowMode,
     selectedConnectAddressEffective,
@@ -2123,7 +2099,7 @@ function DepositFlow({
 // src/DepositModal.tsx
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var ReownDepositInner = lazy(
-  () => import("./DepositModalReown-SZPCCNPH.mjs").then((m) => ({ default: m.DepositModalReown }))
+  () => import("./DepositModalReown-25YB4LPZ.mjs").then((m) => ({ default: m.DepositModalReown }))
 );
 function DepositModal(props) {
   const needsReown = !!props.reownAppId;
@@ -2168,26 +2144,26 @@ function DepositModalInner({
   onError,
   debug
 }) {
-  const modalRef = useRef5(null);
+  const modalRef = useRef6(null);
   const [currentStepIndex, setCurrentStepIndex] = useState8(0);
   const [totalBalanceUsd, setTotalBalanceUsd] = useState8(null);
-  const backHandlerRef = useRef5(void 0);
+  const backHandlerRef = useRef6(void 0);
   const targetChain = getChainId(targetChainProp);
   const sourceChain = sourceChainProp ? getChainId(sourceChainProp) : void 0;
   const service = useMemo6(() => createDepositService(backendUrl), [backendUrl]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (isOpen && modalRef.current) {
       applyTheme(modalRef.current, theme);
     }
   }, [isOpen, theme]);
-  const hasCalledReady = useRef5(false);
-  useEffect7(() => {
+  const hasCalledReady = useRef6(false);
+  useEffect8(() => {
     if (isOpen && !hasCalledReady.current) {
       hasCalledReady.current = true;
       onReady?.();
     }
   }, [isOpen, onReady]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!isOpen) {
       setCurrentStepIndex(0);
     }