README.md

@solana/example-vite-react

Demonstrates how to build a React interface with the experimental @solana/react-hooks package.

The example mirrors the vanilla proof-of-concept by wiring wallet discovery, SOL transfers, SPL token helpers, and live balance updates through idiomatic React components.

All hooks expose UseHookNameParameters / UseHookNameReturnType aliases so you can type your own helpers consistently with the library.

The app starts with connector-first setup: build connectors, create a client, and pass it to the provider (which includes the query layer). Cluster URLs are resolved from the cluster moniker (Devnet here).

import { autoDiscover, backpack, createClient, metamask, phantom, solflare } from '@solana/client';
import { SolanaProvider } from '@solana/react-hooks';

const walletConnectors = [...phantom(), ...solflare(), ...backpack(), ...metamask(), ...autoDiscover()];
const client = createClient({
	cluster: 'devnet',
	walletConnectors,
});

export function App() {
	return (
		<SolanaProvider client={client} query={{ suspense: true }}>
            {/* components under examples/vite-react/src/components */}
		</SolanaProvider>
	);
}

Query hooks lean on SWR v2 defaults (revalidate on focus/reconnect/if stale, 2s deduping, 5s focus throttle) and accept overrides under the swr option.

Compute-unit tuned transactions

useTransactionPool now exposes the same prepareAndSend helper that lives in @solana/client. You can surface compute-unit simulation plus logging in a single call:

import { useMemo } from 'react';
import { useTransactionPool, useWalletSession } from '@solana/react-hooks';

const MEMO_PROGRAM = 'Memo111111111111111111111111111111111111111';

export function MemoWithTelemetryButton() {
	const session = useWalletSession();
	const instruction = useMemo(() => {
		if (!session) {
			return null;
		}
		return {
			accounts: [
				{ address: session.account.address, isSigner: true, isWritable: false },
			],
			data: new TextEncoder().encode('hello from hooks'),
			programAddress: MEMO_PROGRAM,
		};
	}, [session]);
	const pool = useTransactionPool({ instructions: instruction ? [instruction] : [] });

	return (
		<button
			disabled={!session || pool.isSending}
			onClick={() =>
				pool.prepareAndSend(
					{
						authority: session,
						prepareTransaction: {
							computeUnitLimitMultiplier: 1.25,
							logRequest: ({ base64WireTransaction }) =>
								console.debug('tx wire payload', base64WireTransaction),
						},
					},
					{ commitment: 'confirmed' },
				)}
		>
			{pool.isSending ? 'Sending memo…' : 'Send memo with CU tuning'}
		</button>
	);
}

The hook takes care of building instructions, simulating to determine compute units, logging the Base64 wire transaction, and finally sending the tuned transaction.

Developing

pnpm install
pnpm --filter @solana/example-vite-react dev

The app runs against Devnet by default. Press o + Enter in the terminal to open a browser window once Vite starts.

Building

pnpm --filter @solana/example-vite-react build

The production bundle is emitted to dist/.