@rhinestone/deposit-modal 0.1.61 → 0.1.62

package/dist/{chunk-7TTEHQBD.mjs → chunk-NDTY5AUU.mjs}

@@ -809,6 +809,16 @@ function formatUserError(raw) {
   return cleaned;
 }
 
+// src/core/useLatestRef.ts
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+function useLatestRef(value) {
+  const ref = useRef2(value);
+  useEffect2(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+}
+
 // src/core/theme.ts
 var RADIUS_SCALE = {
   none: { sm: "0", md: "0", lg: "0" },
@@ -1262,7 +1272,7 @@ function accountFromPrivateKey(privateKey) {
 }
 
 // src/components/steps/ProcessingStep.tsx
-import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useState } from "react";
 import { formatUnits } from "viem";
 
 // src/components/ui/PoweredBy.tsx
@@ -1529,10 +1539,10 @@ function ProcessingStep({
   onDepositFailed,
   onError
 }) {
-  const startTimeRef = useRef2(Date.now());
-  const pollIntervalRef = useRef2(INITIAL_POLL_INTERVAL);
-  const pollTimeoutRef = useRef2(null);
-  const escalatedDelayRef = useRef2(false);
+  const startTimeRef = useRef3(Date.now());
+  const pollIntervalRef = useRef3(INITIAL_POLL_INTERVAL);
+  const pollTimeoutRef = useRef3(null);
+  const escalatedDelayRef = useRef3(false);
   const [state, setState] = useState(
     directTransfer ? { type: "complete" } : { type: "processing" }
   );
@@ -1546,7 +1556,7 @@ function ProcessingStep({
     return { startedAt: startTimeRef.current };
   });
   const [hasEscalatedDelay, setHasEscalatedDelay] = useState(false);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!directTransfer) return;
     const completedAt = Date.now();
     setPhaseTimings({
@@ -1577,7 +1587,7 @@ function ProcessingStep({
     targetToken,
     txHash
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (directTransfer || state.type !== "processing") return;
     const updateElapsed = () => {
       setElapsedSeconds(
@@ -1588,7 +1598,7 @@ function ProcessingStep({
     const intervalId = setInterval(updateElapsed, 1e3);
     return () => clearInterval(intervalId);
   }, [directTransfer, state.type]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (state.type === "processing") return;
     const endedAt = state.type === "complete" ? phaseTimings.completedAt ?? Date.now() : Date.now();
     setElapsedSeconds(Math.floor((endedAt - startTimeRef.current) / 1e3));
@@ -1596,14 +1606,14 @@ function ProcessingStep({
       (previous) => previous.endedAt !== void 0 ? previous : { ...previous, endedAt }
     );
   }, [phaseTimings.completedAt, state.type]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!state.lastEvent) return;
     setPhaseTimings((previous) => syncPhaseTimings(previous, state.lastEvent));
   }, [state.lastEvent?.time, state.lastEvent?.type]);
-  useEffect2(() => {
+  useEffect3(() => {
     savePhaseTimings(txHash, phaseTimings);
   }, [txHash, phaseTimings]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (directTransfer) return;
     if (state.type !== "processing") {
       pollIntervalRef.current = INITIAL_POLL_INTERVAL;
@@ -1741,7 +1751,7 @@ function ProcessingStep({
     txHash,
     waitForFinalTx
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (directTransfer || state.type !== "processing") return;
     const timeoutId = setTimeout(() => {
       if (escalatedDelayRef.current) return;
@@ -2094,5 +2104,6 @@ export {
   txRefsMatch,
   ProcessingStep,
   getPublicClient,
+  useLatestRef,
   applyTheme
 };

package/dist/{chunk-IKTHUMGZ.mjs → chunk-QME5ZAI6.mjs}

@@ -24,8 +24,9 @@ import {
   saveSessionOwnerToStorage,
   toEvmCaip2,
   tokenFormatter,
-  txRefsMatch
-} from "./chunk-7TTEHQBD.mjs";
+  txRefsMatch,
+  useLatestRef
+} from "./chunk-NDTY5AUU.mjs";
 import {
   DEFAULT_BACKEND_URL,
   DEFAULT_SIGNER_ADDRESS,
@@ -2592,6 +2593,9 @@ function DepositFlow({
   onError,
   debug
 }) {
+  const onStepChangeRef = useLatestRef(onStepChange);
+  const onTotalBalanceChangeRef = useLatestRef(onTotalBalanceChange);
+  const onEventRef = useLatestRef(onEvent);
   const hasInitialReownSession = Boolean(
     enableSolana ? reownWallet?.isConnected || reownWallet?.address : reownWallet?.address
   );
@@ -2916,12 +2920,22 @@ function DepositFlow({
   const stepIndex = step.type === "setup" ? 0 : step.type === "deposit-address" ? 1 : step.type === "select-asset" ? 1 : step.type === "solana-token-select" ? 1 : step.type === "solana-amount" ? 2 : step.type === "amount" ? 2 : step.type === "confirm" ? 3 : step.type === "solana-confirm" ? 3 : 4;
   const currentBackHandler = step.type === "deposit-address" ? handleBackFromDepositAddress : step.type === "select-asset" && signerContext && !canAutoLock ? handleBackFromSelectAsset : step.type === "solana-token-select" ? handleBackFromSolanaTokenSelect : step.type === "solana-amount" ? handleBackFromSolanaAmount : step.type === "solana-confirm" ? handleBackFromSolanaConfirm : step.type === "amount" ? handleBackFromAmount : step.type === "confirm" ? handleBackFromConfirm : void 0;
   useEffect9(() => {
-    onStepChange?.(stepIndex, currentBackHandler);
-  }, [stepIndex, currentBackHandler, onStepChange]);
+    onStepChangeRef.current?.(stepIndex, currentBackHandler);
+  }, [stepIndex, currentBackHandler, onStepChangeRef]);
   const stepSendToken = step.type === "amount" ? step.asset.symbol : null;
+  const stepOpenEventKey = step.type === "select-asset" ? "select-asset" : step.type === "deposit-address" ? "deposit-address" : step.type === "amount" && stepSendToken ? `amount:${stepSendToken.toLowerCase()}` : null;
+  const lastStepOpenEventKeyRef = useRef5(null);
   useEffect9(() => {
+    if (!stepOpenEventKey) {
+      lastStepOpenEventKeyRef.current = null;
+      return;
+    }
+    if (lastStepOpenEventKeyRef.current === stepOpenEventKey) {
+      return;
+    }
+    lastStepOpenEventKeyRef.current = stepOpenEventKey;
     if (step.type === "select-asset") {
-      onEvent?.({
+      onEventRef.current?.({
         type: "deposit_modal_connected_wallet_select_source_open",
         total_balance_in_external_wallet: totalBalanceUsd,
         pred_balance: totalBalanceUsd
@@ -2929,7 +2943,7 @@ function DepositFlow({
     } else if (step.type === "deposit-address") {
       const chainName = getChainName(targetChain);
       const tokenSymbol = getTokenSymbol(targetToken, targetChain);
-      onEvent?.({
+      onEventRef.current?.({
         type: "deposit_modal_transfer_crypto_open",
         default_chain: chainName,
         default_token: tokenSymbol,
@@ -2937,14 +2951,22 @@ function DepositFlow({
       });
     } else if (step.type === "amount" && stepSendToken) {
       const receiveSymbol = getTokenSymbol(targetToken, targetChain);
-      onEvent?.({
+      onEventRef.current?.({
         type: "deposit_modal_connected_wallet_enter_value_open",
         send_token: stepSendToken,
         receive_token: receiveSymbol,
         pred_balance: totalBalanceUsd
       });
     }
-  }, [step.type, stepSendToken, onEvent]);
+  }, [
+    step.type,
+    stepOpenEventKey,
+    stepSendToken,
+    targetChain,
+    targetToken,
+    totalBalanceUsd,
+    onEventRef
+  ]);
   useEffect9(() => {
     logFlow("state:changed", {
       step: step.type,
@@ -2962,8 +2984,8 @@ function DepositFlow({
     targetToken
   ]);
   useEffect9(() => {
-    onTotalBalanceChange?.(totalBalanceUsd);
-  }, [totalBalanceUsd, onTotalBalanceChange]);
+    onTotalBalanceChangeRef.current?.(totalBalanceUsd);
+  }, [totalBalanceUsd, onTotalBalanceChangeRef]);
   const isDepositAddressMode = flowMode === "deposit-address";
   const isSolanaWalletMode = flowMode === "solana-wallet";
   const handleSelectProvider = useCallback3(() => {
@@ -3640,7 +3662,7 @@ function DepositFlow({
 // src/DepositModal.tsx
 import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 var ReownDepositInner = lazy(
-  () => import("./DepositModalReown-727JVH7Q.mjs").then((m) => ({ default: m.DepositModalReown }))
+  () => import("./DepositModalReown-5CFJIJO5.mjs").then((m) => ({ default: m.DepositModalReown }))
 );
 function DepositModal(props) {
   const needsReown = !!props.reownAppId;
@@ -3709,6 +3731,7 @@ function DepositModalInner({
   debug
 }) {
   const modalRef = useRef6(null);
+  const onReadyRef = useLatestRef(onReady);
   const [currentStepIndex, setCurrentStepIndex] = useState11(0);
   const [totalBalanceUsd, setTotalBalanceUsd] = useState11(null);
   const backHandlerRef = useRef6(void 0);
@@ -3733,9 +3756,9 @@ function DepositModalInner({
   useEffect10(() => {
     if (isOpen && !hasCalledReady.current) {
       hasCalledReady.current = true;
-      onReady?.();
+      onReadyRef.current?.();
     }
-  }, [isOpen, onReady]);
+  }, [isOpen, onReadyRef]);
   useEffect10(() => {
     if (!isOpen) {
       setCurrentStepIndex(0);

package/dist/deposit.cjs

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkTBUOMWKJcjs = require('./chunk-TBUOMWKJ.cjs');
-require('./chunk-TQ6IIGRS.cjs');
+var _chunk6UBIFHRVcjs = require('./chunk-6UBIFHRV.cjs');
+require('./chunk-MVFMDKAS.cjs');
 require('./chunk-R6U6BHCV.cjs');
 
 
-exports.DepositModal = _chunkTBUOMWKJcjs.DepositModal;
+exports.DepositModal = _chunk6UBIFHRVcjs.DepositModal;

package/dist/deposit.mjs

@@ -1,7 +1,7 @@
 import {
   DepositModal
-} from "./chunk-IKTHUMGZ.mjs";
-import "./chunk-7TTEHQBD.mjs";
+} from "./chunk-QME5ZAI6.mjs";
+import "./chunk-NDTY5AUU.mjs";
 import "./chunk-CIXHTOO3.mjs";
 export {
   DepositModal

package/dist/index.cjs

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkTBUOMWKJcjs = require('./chunk-TBUOMWKJ.cjs');
+var _chunk6UBIFHRVcjs = require('./chunk-6UBIFHRV.cjs');
 
 
-var _chunkC5TWF4ZEcjs = require('./chunk-C5TWF4ZE.cjs');
-require('./chunk-TQ6IIGRS.cjs');
+var _chunkMKU7VETPcjs = require('./chunk-MKU7VETP.cjs');
+require('./chunk-MVFMDKAS.cjs');
 
 
 
@@ -66,4 +66,4 @@ var _chunkR6U6BHCVcjs = require('./chunk-R6U6BHCV.cjs');
 
 
 
-exports.CHAIN_BY_ID = _chunkR6U6BHCVcjs.CHAIN_BY_ID; exports.DEFAULT_BACKEND_URL = _chunkR6U6BHCVcjs.DEFAULT_BACKEND_URL; exports.DEFAULT_SIGNER_ADDRESS = _chunkR6U6BHCVcjs.DEFAULT_SIGNER_ADDRESS; exports.DepositModal = _chunkTBUOMWKJcjs.DepositModal; exports.NATIVE_TOKEN_ADDRESS = _chunkR6U6BHCVcjs.NATIVE_TOKEN_ADDRESS; exports.SOURCE_CHAINS = _chunkR6U6BHCVcjs.SOURCE_CHAINS; exports.SUPPORTED_CHAINS = _chunkR6U6BHCVcjs.SUPPORTED_CHAINS; exports.WithdrawModal = _chunkC5TWF4ZEcjs.WithdrawModal; exports.chainRegistry = _chunkR6U6BHCVcjs.chainRegistry; exports.findChainIdForToken = _chunkR6U6BHCVcjs.findChainIdForToken; exports.getChainBadge = _chunkR6U6BHCVcjs.getChainBadge; exports.getChainIcon = _chunkR6U6BHCVcjs.getChainIcon; exports.getChainId = _chunkR6U6BHCVcjs.getChainId; exports.getChainName = _chunkR6U6BHCVcjs.getChainName; exports.getChainObject = _chunkR6U6BHCVcjs.getChainObject; exports.getExplorerName = _chunkR6U6BHCVcjs.getExplorerName; exports.getExplorerTxUrl = _chunkR6U6BHCVcjs.getExplorerTxUrl; exports.getExplorerUrl = _chunkR6U6BHCVcjs.getExplorerUrl; exports.getSupportedChainIds = _chunkR6U6BHCVcjs.getSupportedChainIds; exports.getSupportedTargetTokens = _chunkR6U6BHCVcjs.getSupportedTargetTokens; exports.getSupportedTokenSymbolsForChain = _chunkR6U6BHCVcjs.getSupportedTokenSymbolsForChain; exports.getTargetTokenSymbolsForChain = _chunkR6U6BHCVcjs.getTargetTokenSymbolsForChain; exports.getTokenAddress = _chunkR6U6BHCVcjs.getTokenAddress; exports.getTokenDecimals = _chunkR6U6BHCVcjs.getTokenDecimals; exports.getTokenDecimalsByAddress = _chunkR6U6BHCVcjs.getTokenDecimalsByAddress; exports.getTokenIcon = _chunkR6U6BHCVcjs.getTokenIcon; exports.getTokenSymbol = _chunkR6U6BHCVcjs.getTokenSymbol; exports.getUsdcAddress = _chunkR6U6BHCVcjs.getUsdcAddress; exports.getUsdcDecimals = _chunkR6U6BHCVcjs.getUsdcDecimals; exports.isSupportedTokenAddressForChain = _chunkR6U6BHCVcjs.isSupportedTokenAddressForChain;
+exports.CHAIN_BY_ID = _chunkR6U6BHCVcjs.CHAIN_BY_ID; exports.DEFAULT_BACKEND_URL = _chunkR6U6BHCVcjs.DEFAULT_BACKEND_URL; exports.DEFAULT_SIGNER_ADDRESS = _chunkR6U6BHCVcjs.DEFAULT_SIGNER_ADDRESS; exports.DepositModal = _chunk6UBIFHRVcjs.DepositModal; exports.NATIVE_TOKEN_ADDRESS = _chunkR6U6BHCVcjs.NATIVE_TOKEN_ADDRESS; exports.SOURCE_CHAINS = _chunkR6U6BHCVcjs.SOURCE_CHAINS; exports.SUPPORTED_CHAINS = _chunkR6U6BHCVcjs.SUPPORTED_CHAINS; exports.WithdrawModal = _chunkMKU7VETPcjs.WithdrawModal; exports.chainRegistry = _chunkR6U6BHCVcjs.chainRegistry; exports.findChainIdForToken = _chunkR6U6BHCVcjs.findChainIdForToken; exports.getChainBadge = _chunkR6U6BHCVcjs.getChainBadge; exports.getChainIcon = _chunkR6U6BHCVcjs.getChainIcon; exports.getChainId = _chunkR6U6BHCVcjs.getChainId; exports.getChainName = _chunkR6U6BHCVcjs.getChainName; exports.getChainObject = _chunkR6U6BHCVcjs.getChainObject; exports.getExplorerName = _chunkR6U6BHCVcjs.getExplorerName; exports.getExplorerTxUrl = _chunkR6U6BHCVcjs.getExplorerTxUrl; exports.getExplorerUrl = _chunkR6U6BHCVcjs.getExplorerUrl; exports.getSupportedChainIds = _chunkR6U6BHCVcjs.getSupportedChainIds; exports.getSupportedTargetTokens = _chunkR6U6BHCVcjs.getSupportedTargetTokens; exports.getSupportedTokenSymbolsForChain = _chunkR6U6BHCVcjs.getSupportedTokenSymbolsForChain; exports.getTargetTokenSymbolsForChain = _chunkR6U6BHCVcjs.getTargetTokenSymbolsForChain; exports.getTokenAddress = _chunkR6U6BHCVcjs.getTokenAddress; exports.getTokenDecimals = _chunkR6U6BHCVcjs.getTokenDecimals; exports.getTokenDecimalsByAddress = _chunkR6U6BHCVcjs.getTokenDecimalsByAddress; exports.getTokenIcon = _chunkR6U6BHCVcjs.getTokenIcon; exports.getTokenSymbol = _chunkR6U6BHCVcjs.getTokenSymbol; exports.getUsdcAddress = _chunkR6U6BHCVcjs.getUsdcAddress; exports.getUsdcDecimals = _chunkR6U6BHCVcjs.getUsdcDecimals; exports.isSupportedTokenAddressForChain = _chunkR6U6BHCVcjs.isSupportedTokenAddressForChain;

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import {
   DepositModal
-} from "./chunk-IKTHUMGZ.mjs";
+} from "./chunk-QME5ZAI6.mjs";
 import {
   WithdrawModal
-} from "./chunk-RRYC5EZF.mjs";
-import "./chunk-7TTEHQBD.mjs";
+} from "./chunk-7YERRXZ4.mjs";
+import "./chunk-NDTY5AUU.mjs";
 import {
   CHAIN_BY_ID,
   DEFAULT_BACKEND_URL,

package/dist/reown.cjs

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkTBUOMWKJcjs = require('./chunk-TBUOMWKJ.cjs');
+var _chunk6UBIFHRVcjs = require('./chunk-6UBIFHRV.cjs');
 
 
-var _chunkC5TWF4ZEcjs = require('./chunk-C5TWF4ZE.cjs');
-require('./chunk-TQ6IIGRS.cjs');
+var _chunkMKU7VETPcjs = require('./chunk-MKU7VETP.cjs');
+require('./chunk-MVFMDKAS.cjs');
 require('./chunk-R6U6BHCV.cjs');
 
 
 
-exports.DepositModal = _chunkTBUOMWKJcjs.DepositModal; exports.WithdrawModal = _chunkC5TWF4ZEcjs.WithdrawModal;
+exports.DepositModal = _chunk6UBIFHRVcjs.DepositModal; exports.WithdrawModal = _chunkMKU7VETPcjs.WithdrawModal;

package/dist/reown.mjs

@@ -1,10 +1,10 @@
 import {
   DepositModal
-} from "./chunk-IKTHUMGZ.mjs";
+} from "./chunk-QME5ZAI6.mjs";
 import {
   WithdrawModal
-} from "./chunk-RRYC5EZF.mjs";
-import "./chunk-7TTEHQBD.mjs";
+} from "./chunk-7YERRXZ4.mjs";
+import "./chunk-NDTY5AUU.mjs";
 import "./chunk-CIXHTOO3.mjs";
 export {
   DepositModal,

package/dist/withdraw.cjs

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkC5TWF4ZEcjs = require('./chunk-C5TWF4ZE.cjs');
-require('./chunk-TQ6IIGRS.cjs');
+var _chunkMKU7VETPcjs = require('./chunk-MKU7VETP.cjs');
+require('./chunk-MVFMDKAS.cjs');
 require('./chunk-R6U6BHCV.cjs');
 
 
-exports.WithdrawModal = _chunkC5TWF4ZEcjs.WithdrawModal;
+exports.WithdrawModal = _chunkMKU7VETPcjs.WithdrawModal;

package/dist/withdraw.mjs

@@ -1,7 +1,7 @@
 import {
   WithdrawModal
-} from "./chunk-RRYC5EZF.mjs";
-import "./chunk-7TTEHQBD.mjs";
+} from "./chunk-7YERRXZ4.mjs";
+import "./chunk-NDTY5AUU.mjs";
 import "./chunk-CIXHTOO3.mjs";
 export {
   WithdrawModal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhinestone/deposit-modal",
-  "version": "0.1.61",
+  "version": "0.1.62",
   "description": "React modal component for Rhinestone cross-chain deposits",
   "author": "Rhinestone <dev@rhinestone.wtf>",
   "bugs": {