@solana/react-hooks 0.5.0 → 1.0.0-rc.0

package/README.md

@@ -13,15 +13,18 @@ pnpm add @solana/react-hooks
 
 ## Minimal example
 
-Mount the provider once and call hooks anywhere in the subtree.
+Build connectors first, create a client, and hand it to the combined provider.
 
 ```tsx
-import {
-    SolanaClientProvider,
-    useBalance,
-    useConnectWallet,
-    useWallet,
-} from '@solana/react-hooks';
+import { autoDiscover, backpack, createClient, phantom, solflare } from '@solana/client';
+import { SolanaProvider, useBalance, useConnectWallet, useWallet } from '@solana/react-hooks';
+
+const walletConnectors = [...phantom(), ...solflare(), ...backpack(), ...autoDiscover()];
+const client = createClient({
+    endpoint: 'https://api.devnet.solana.com',
+    websocketEndpoint: 'wss://api.devnet.solana.com',
+    walletConnectors,
+});
 
 function WalletButton() {
     const connectWallet = useConnectWallet();
@@ -40,19 +43,23 @@ function WalletBalance() {
 
 export function App() {
     return (
-        <SolanaClientProvider
-            config={{
-                endpoint: 'https://api.devnet.solana.com',
-                websocketEndpoint: 'wss://api.devnet.solana.com',
-            }}
-        >
+        <SolanaProvider client={client} query={{ suspense: true }}>
             <WalletButton />
             <WalletBalance />
-        </SolanaClientProvider>
+        </SolanaProvider>
     );
 }
 ```
 
+`SolanaProvider` composes `SolanaClientProvider` and `SolanaQueryProvider` with SWR v2-aligned defaults
+(`revalidateOnFocus`/`revalidateOnReconnect`/`revalidateIfStale` are `true`, `dedupingInterval` is `2000`,
+`focusThrottleInterval` is `5000`). Override them via the `query.config` prop or per-hook `swr` options.
+Prefer passing a `client`; `config`-based setup on `SolanaClientProvider` is still available for bespoke
+composition.
+
+Every hook exposes `UseHookNameParameters` / `UseHookNameReturnType` aliases so wrapper components stay in
+sync with the public API.
+
 ## Hooks at a glance
 
 - `useWallet`, `useConnectWallet`, `useDisconnectWallet` – read or update the current wallet session.
@@ -318,7 +325,7 @@ Poll or refetch the cluster's latest blockhash.
 import { SolanaQueryProvider, useLatestBlockhash } from '@solana/react-hooks';
 
 function BlockhashTicker() {
-    const latest = useLatestBlockhash({ refreshInterval: 20_000 });
+    const latest = useLatestBlockhash({ swr: { refreshInterval: 20_000 } });
     if (latest.status === 'loading') return <p>Fetching blockhash…</p>;
     if (latest.status === 'error') return <p role="alert">Failed to fetch blockhash.</p>;
 
@@ -343,7 +350,15 @@ export function BlockhashCard() {
 ### Program accounts
 
 ```tsx
-import { SolanaClientProvider, SolanaQueryProvider, useProgramAccounts } from '@solana/react-hooks';
+import { autoDiscover, backpack, createClient, phantom, solflare } from '@solana/client';
+import { SolanaProvider, SolanaQueryProvider, useProgramAccounts } from '@solana/react-hooks';
+
+const walletConnectors = [...phantom(), ...solflare(), ...backpack(), ...autoDiscover()];
+const client = createClient({
+    endpoint: 'https://api.devnet.solana.com',
+    websocketEndpoint: 'wss://api.devnet.solana.com',
+    walletConnectors,
+});
 
 function ProgramAccountsList({ programAddress }) {
     const query = useProgramAccounts(programAddress);
@@ -365,11 +380,11 @@ function ProgramAccountsList({ programAddress }) {
 
 export function QueryDemo({ programAddress }) {
     return (
-        <SolanaClientProvider config={{ endpoint: 'https://api.devnet.solana.com' }}>
+        <SolanaProvider client={client}>
             <SolanaQueryProvider>
                 <ProgramAccountsList programAddress={programAddress} />
             </SolanaQueryProvider>
-        </SolanaClientProvider>
+        </SolanaProvider>
     );
 }
 ```
@@ -407,7 +422,7 @@ function SimulationLogs({ transaction }) {
   `useProgramAccounts(address, { swr: { revalidateOnFocus: false } })`) and expose typed parameter
   and return aliases across all hooks.
 - Type helpers: use `UseHookNameParameters` / `UseHookNameReturnType` for public hooks.
-- Looking for examples? See `examples/react-hooks` for a ready-to-run, tabbed playground that wires
+- Looking for examples? See `examples/vite-react` for a ready-to-run, tabbed playground that wires
   the provider, hooks, and mock UIs together across wallet/state, transaction, and query demos.
 
 ## Scripts

package/dist/index.browser.cjs

@@ -14,16 +14,18 @@ var useSWR__default = /*#__PURE__*/_interopDefault(useSWR);
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var SolanaClientContext = react.createContext(null);
+function normalizeConfig(config) {
+  return client.resolveClientConfig(config ?? {});
+}
+__name(normalizeConfig, "normalizeConfig");
 function SolanaClientProvider({ children, client: providedClient, config }) {
+  const normalizedConfig = react.useMemo(() => normalizeConfig(config), [config]);
   const client$1 = react.useMemo(() => {
     if (providedClient) {
       return providedClient;
     }
-    if (!config) {
-      throw new Error("SolanaClientProvider requires either a `client` or `config` prop.");
-    }
-    return client.createClient(config);
-  }, [config, providedClient]);
+    return client.createClient(normalizedConfig);
+  }, [normalizedConfig, providedClient]);
   react.useEffect(() => {
     if (providedClient) {
       return;
@@ -601,7 +603,9 @@ function useTransactionPool(config = {}) {
   );
   const client$1 = useSolanaClient();
   const helper = client$1.helpers.transaction;
-  const blockhashMaxAgeMs = config.latestBlockhash?.refreshInterval ?? 3e4;
+  const swrRefreshInterval = config.latestBlockhash?.swr?.refreshInterval;
+  const blockhashRefreshInterval = config.latestBlockhash?.refreshInterval ?? (typeof swrRefreshInterval === "number" ? swrRefreshInterval : void 0);
+  const blockhashMaxAgeMs = blockhashRefreshInterval ?? 3e4;
   const controller = react.useMemo(
     () => client.createTransactionPoolController({
       blockhashMaxAgeMs,
@@ -883,14 +887,15 @@ function SolanaQueryProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(QuerySuspenseContext.Provider, { value: suspense, children: /* @__PURE__ */ jsxRuntime.jsx(useSWR.SWRConfig, { value, children }) });
 }
 __name(SolanaQueryProvider, "SolanaQueryProvider");
-function SolanaProvider({ children, client, config, query, walletPersistence }) {
+function SolanaProvider({ children, client: client$1, config, query, walletPersistence }) {
   const shouldIncludeQueryLayer = query !== false && query?.disabled !== true;
   const queryProps = shouldIncludeQueryLayer && query ? query : {};
   const persistenceConfig = walletPersistence === false ? void 0 : walletPersistence ?? {};
   const storage = persistenceConfig ? persistenceConfig.storage ?? getDefaultStorage() : null;
   const storageKey = persistenceConfig?.storageKey ?? DEFAULT_STORAGE_KEY;
   const persistedState = persistenceConfig ? readPersistedState(storage, storageKey) : { legacyConnectorId: null, state: null };
-  const clientConfig = config && persistenceConfig ? { ...config, initialState: config.initialState ?? persistedState.state ?? void 0 } : config;
+  const normalizedConfig = config ? client.resolveClientConfig(config) : client.resolveClientConfig();
+  const clientConfig = persistenceConfig ? { ...normalizedConfig, initialState: normalizedConfig.initialState ?? persistedState.state ?? void 0 } : normalizedConfig;
   const content = shouldIncludeQueryLayer ? /* @__PURE__ */ jsxRuntime.jsx(
     SolanaQueryProvider,
     {
@@ -900,7 +905,7 @@ function SolanaProvider({ children, client, config, query, walletPersistence })
       children
     }
   ) : children;
-  return /* @__PURE__ */ jsxRuntime.jsxs(SolanaClientProvider, { client, config: clientConfig, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(SolanaClientProvider, { client: client$1, config: clientConfig, children: [
     persistenceConfig ? /* @__PURE__ */ jsxRuntime.jsx(
       WalletPersistence,
       {