@solana/react-hooks 0.2.0 → 0.2.2

package/dist/index.browser.cjs

@@ -236,6 +236,38 @@ function createAccountSelector(key) {
   return (state) => key ? state.accounts[key] : void 0;
 }
 __name(createAccountSelector, "createAccountSelector");
+function useSuspenseFetcher(config) {
+  const preference = useQuerySuspensePreference();
+  const suspenseEnabled = Boolean(preference) && config.enabled;
+  const pendingRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!suspenseEnabled) {
+      pendingRef.current = null;
+      return;
+    }
+    if (pendingRef.current && pendingRef.current.key !== config.key) {
+      pendingRef.current = null;
+    }
+  }, [config.key, suspenseEnabled]);
+  if (pendingRef.current && pendingRef.current.key !== config.key) {
+    pendingRef.current = null;
+  }
+  if (suspenseEnabled && config.key && !config.ready) {
+    if (!pendingRef.current) {
+      const promise = config.fetcher();
+      pendingRef.current = {
+        key: config.key,
+        promise: promise.finally(() => {
+          if (pendingRef.current?.promise === promise) {
+            pendingRef.current = null;
+          }
+        })
+      };
+    }
+    throw pendingRef.current.promise;
+  }
+}
+__name(useSuspenseFetcher, "useSuspenseFetcher");
 function useClusterState() {
   const selector = react.useMemo(createClusterSelector, []);
   return useClientStore(selector);
@@ -315,6 +347,7 @@ __name(useSolTransfer, "useSolTransfer");
 function useSplToken(mint, options = {}) {
   const client$1 = useSolanaClient();
   const session = useWalletSession();
+  const suspense = Boolean(useQuerySuspensePreference());
   const normalizedMint = react.useMemo(() => String(mint), [mint]);
   const helperConfig = react.useMemo(
     () => ({
@@ -335,7 +368,8 @@ function useSplToken(mint, options = {}) {
     return helper.fetchBalance(owner, options.commitment);
   }, [helper, owner, options.commitment]);
   const { data, error, isLoading, isValidating, mutate } = useSWR__default.default(balanceKey, fetchBalance, {
-    revalidateOnFocus: options.revalidateOnFocus ?? false
+    revalidateOnFocus: options.revalidateOnFocus ?? false,
+    suspense
   });
   const sessionRef = react.useRef(session);
   react.useEffect(() => {
@@ -408,12 +442,23 @@ function useAccount(addressLike, options = {}) {
   const accountKey = react.useMemo(() => address2?.toString(), [address2]);
   const selector = react.useMemo(() => createAccountSelector(accountKey), [accountKey]);
   const account = useClientStore(selector);
+  useSuspenseFetcher({
+    enabled: options.fetch !== false && !shouldSkip && Boolean(address2),
+    fetcher: /* @__PURE__ */ __name(() => {
+      if (!address2) {
+        throw new Error("Provide an address before fetching account data.");
+      }
+      return client$1.actions.fetchAccount(address2, options.commitment);
+    }, "fetcher"),
+    key: accountKey ?? null,
+    ready: account !== void 0
+  });
   react.useEffect(() => {
     if (!address2) {
       return;
     }
     const commitment = options.commitment;
-    if (options.fetch !== false) {
+    if (options.fetch !== false && account === void 0) {
       void client$1.actions.fetchAccount(address2, commitment).catch(() => void 0);
     }
     if (options.watch) {
@@ -423,7 +468,7 @@ function useAccount(addressLike, options = {}) {
       };
     }
     return void 0;
-  }, [address2, client$1, options.commitment, options.fetch, options.watch]);
+  }, [account, address2, client$1, options.commitment, options.fetch, options.watch]);
   return account;
 }
 __name(useAccount, "useAccount");
@@ -448,12 +493,23 @@ function useBalance(addressLike, options = {}) {
   const accountKey = react.useMemo(() => address2?.toString(), [address2]);
   const selector = react.useMemo(() => createAccountSelector(accountKey), [accountKey]);
   const account = useClientStore(selector);
+  useSuspenseFetcher({
+    enabled: mergedOptions.fetch !== false && !shouldSkip && Boolean(address2),
+    fetcher: /* @__PURE__ */ __name(() => {
+      if (!address2) {
+        throw new Error("Provide an address before fetching balance.");
+      }
+      return client$1.actions.fetchBalance(address2, mergedOptions.commitment);
+    }, "fetcher"),
+    key: accountKey ?? null,
+    ready: account !== void 0
+  });
   react.useEffect(() => {
     if (!address2) {
       return;
     }
     const commitment = mergedOptions.commitment;
-    if (mergedOptions.fetch !== false) {
+    if (mergedOptions.fetch !== false && account === void 0) {
       void client$1.actions.fetchBalance(address2, commitment).catch(() => void 0);
     }
     if (mergedOptions.watch) {
@@ -463,7 +519,7 @@ function useBalance(addressLike, options = {}) {
       };
     }
     return void 0;
-  }, [address2, client$1, mergedOptions.commitment, mergedOptions.fetch, mergedOptions.watch]);
+  }, [account, address2, client$1, mergedOptions.commitment, mergedOptions.fetch, mergedOptions.watch]);
   const lamports = account?.lamports ?? null;
   const fetching = account?.fetching ?? false;
   const slot = account?.slot;