@accesly/react 1.1.1 → 1.1.3

package/dist/index.js

@@ -1,5 +1,5 @@
 import { CognitoAuthClient, defaultSessionStorage, InMemoryDeviceStore, TokenManager, AccesslyApiClient, AccesslyEndpoints, getRandomBytes, unlockPasskey, hkdfSha256, zeroize, decryptAesGcm, sha256, registerPasskey, normalizeSecp256r1Pubkey, createWallet, generateRecoverySalt, deriveRecoveryKey, encryptAesGcm, emailHashBytes, computeSmartAccountAddress, signTransaction, generateX25519Keypair, unwrapSessionFragment2, reconstructFromPlainAndEncrypted, signSorobanAuthEntry, reconstructKey, AccesslyApiError } from '@accesly/core';
-import { createContext, useMemo, useState, useRef, useEffect, useContext, useCallback } from 'react';
+import { createContext, useMemo, useState, useRef, useCallback, useEffect, useContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 // src/provider.tsx
@@ -86,14 +86,14 @@ function AcceslyProvider(props) {
     () => initialUsername(instances.sessionStorage)
   );
   const mountedRef = useRef(true);
-  const refreshStatus = async () => {
+  const refreshStatus = useCallback(async () => {
     const next = await instances.tokenManager.getStatus();
     const tokens = await Promise.resolve(instances.sessionStorage.load());
     if (mountedRef.current) {
       setStatus(next);
       setUsername(tokens?.username ?? null);
     }
-  };
+  }, [instances]);
   useEffect(() => {
     mountedRef.current = true;
     void refreshStatus();
@@ -1113,6 +1113,11 @@ function useWalletStatus() {
   return { status, walletAddress, onChain, isStale, refresh };
 }
 var POLL_INTERVAL_MS = 8e3;
+function useStableRef(value) {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+}
 function useBalance(walletAddress) {
   const { wallet, _internal } = useAccesly();
   const username = _internal.username;
@@ -1124,6 +1129,7 @@ function useBalance(walletAddress) {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const fetchInFlight = useRef(false);
+  const walletRef = useStableRef(wallet);
   useEffect(() => {
     if (walletAddress) {
       setResolvedAddress(walletAddress);
@@ -1136,7 +1142,7 @@ function useBalance(walletAddress) {
     let cancelled = false;
     void (async () => {
       try {
-        const stored = await wallet.getStoredCredential(username);
+        const stored = await walletRef.current.getStoredCredential(username);
         if (cancelled) return;
         setResolvedAddress(stored?.walletAddress ?? null);
       } catch {
@@ -1146,13 +1152,14 @@ function useBalance(walletAddress) {
     return () => {
       cancelled = true;
     };
-  }, [walletAddress, username, wallet]);
+  }, [walletAddress, username, walletRef]);
+  const endpointsRef = useStableRef(_internal.endpoints);
   const doFetch = useCallback(async () => {
     if (!resolvedAddress) return;
     if (fetchInFlight.current) return;
     fetchInFlight.current = true;
     try {
-      const res = await _internal.endpoints.walletBalance(resolvedAddress);
+      const res = await endpointsRef.current.walletBalance(resolvedAddress);
       setStroops(res.xlm.stroops);
       setXlm(res.xlm.xlm);
       setError(null);
@@ -1162,19 +1169,20 @@ function useBalance(walletAddress) {
       setIsLoading(false);
       fetchInFlight.current = false;
     }
-  }, [resolvedAddress, _internal.endpoints]);
+  }, [resolvedAddress, endpointsRef]);
+  const doFetchRef = useStableRef(doFetch);
   useEffect(() => {
     if (!resolvedAddress) {
       setIsLoading(false);
       return void 0;
     }
-    void doFetch();
+    void doFetchRef.current();
     let interval = null;
     const startInterval = () => {
       if (interval) return;
       interval = setInterval(() => {
         if (typeof document !== "undefined" && document.hidden) return;
-        void doFetch();
+        void doFetchRef.current();
       }, POLL_INTERVAL_MS);
     };
     const stopInterval = () => {
@@ -1189,7 +1197,7 @@ function useBalance(walletAddress) {
       if (document.hidden) {
         stopInterval();
       } else {
-        void doFetch();
+        void doFetchRef.current();
         startInterval();
       }
     };
@@ -1202,14 +1210,19 @@ function useBalance(walletAddress) {
         document.removeEventListener("visibilitychange", onVisibilityChange);
       }
     };
-  }, [resolvedAddress, doFetch]);
+  }, [resolvedAddress, doFetchRef]);
   const refresh = useCallback(async () => {
-    await doFetch();
-  }, [doFetch]);
+    await doFetchRef.current();
+  }, [doFetchRef]);
   return { stroops, xlm, isLoading, error, refresh };
 }
 var POLL_INTERVAL_MS2 = 2e4;
 var DEFAULT_LIMIT = 20;
+function useStableRef2(value) {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+}
 function useWalletActivity(walletAddress, opts = {}) {
   const { wallet, _internal } = useAccesly();
   const username = _internal.username;
@@ -1221,6 +1234,7 @@ function useWalletActivity(walletAddress, opts = {}) {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const fetchInFlight = useRef(false);
+  const walletRef = useStableRef2(wallet);
   useEffect(() => {
     if (walletAddress) {
       setResolvedAddress(walletAddress);
@@ -1233,7 +1247,7 @@ function useWalletActivity(walletAddress, opts = {}) {
     let cancelled = false;
     void (async () => {
       try {
-        const stored = await wallet.getStoredCredential(username);
+        const stored = await walletRef.current.getStoredCredential(username);
         if (cancelled) return;
         setResolvedAddress(stored?.walletAddress ?? null);
       } catch {
@@ -1243,13 +1257,14 @@ function useWalletActivity(walletAddress, opts = {}) {
     return () => {
       cancelled = true;
     };
-  }, [walletAddress, username, wallet]);
+  }, [walletAddress, username, walletRef]);
+  const endpointsRef = useStableRef2(_internal.endpoints);
   const doFetch = useCallback(async () => {
     if (!resolvedAddress) return;
     if (fetchInFlight.current) return;
     fetchInFlight.current = true;
     try {
-      const res = await _internal.endpoints.walletActivity(resolvedAddress, limit);
+      const res = await endpointsRef.current.walletActivity(resolvedAddress, limit);
       setEvents(res.events);
       setError(null);
     } catch (err) {
@@ -1258,19 +1273,20 @@ function useWalletActivity(walletAddress, opts = {}) {
       setIsLoading(false);
       fetchInFlight.current = false;
     }
-  }, [resolvedAddress, limit, _internal.endpoints]);
+  }, [resolvedAddress, limit, endpointsRef]);
+  const doFetchRef = useStableRef2(doFetch);
   useEffect(() => {
     if (!resolvedAddress) {
       setIsLoading(false);
       return void 0;
     }
-    void doFetch();
+    void doFetchRef.current();
     let interval = null;
     const start = () => {
       if (interval) return;
       interval = setInterval(() => {
         if (typeof document !== "undefined" && document.hidden) return;
-        void doFetch();
+        void doFetchRef.current();
       }, POLL_INTERVAL_MS2);
     };
     const stop = () => {
@@ -1284,7 +1300,7 @@ function useWalletActivity(walletAddress, opts = {}) {
       if (typeof document === "undefined") return;
       if (document.hidden) stop();
       else {
-        void doFetch();
+        void doFetchRef.current();
         start();
       }
     };
@@ -1297,10 +1313,10 @@ function useWalletActivity(walletAddress, opts = {}) {
         document.removeEventListener("visibilitychange", onVisibilityChange);
       }
     };
-  }, [resolvedAddress, doFetch]);
+  }, [resolvedAddress, doFetchRef]);
   const refresh = useCallback(async () => {
-    await doFetch();
-  }, [doFetch]);
+    await doFetchRef.current();
+  }, [doFetchRef]);
   return { events, isLoading, error, refresh };
 }