React

@solana/react publiceert een Kit-client naar je componentenboom via één provider, waarna hooks RPC-data, abonnementen en walletstatus daaruit lezen. De browser-wallethooks bevinden zich in @solana/kit-plugin-wallet/react en lezen dezelfde provider — er is geen aparte walletprovider.

Installeren

$ 
npm install @solana/kit @solana/kit-plugin-rpc @solana/kit-plugin-wallet @solana/reactCopy

De client bouwen

Bouw de client eenmalig op moduleniveau, buiten de React-boom. In de browser zorgt walletSigner ervoor dat de verbonden wallet zowel de fee-betaler als de identiteit is.

import { createClient } from "@solana/kit";
import { solanaRpc } from "@solana/kit-plugin-rpc";
import { walletSigner } from "@solana/kit-plugin-wallet";

export const client = createClient()
  .use(walletSigner({ chain: "solana:devnet" }))
  .use(solanaRpc({ rpcUrl: "https://api.devnet.solana.com" }));

export type AppClient = Awaited<typeof client>;

walletSigner voegt client.wallet toe (Wallet Standard-detectie en -verbinding), en solanaRpc voegt client.rpc plus de hulpfunctie client.sendTransaction toe. Exporteer het clienttype gewrapped in Awaited<> zodat het correct blijft als je later een plugin toevoegt die asynchroon resolvet, en geef dat AppClient door aan elke useClient-aanroep.

Wrap je boom eenmalig

ClientProvider publiceert de client. De datahooks (useRequest, useSubscription, useTrackedData) lezen hem via useClient. De wallethooks hieronder hebben dezelfde client nodig, die expliciet als eerste argument wordt meegegeven.

"use client";

import { ClientProvider } from "@solana/react";
import { client } from "./client";

export function Providers({ children }: { children: React.ReactNode }) {
  return <ClientProvider client={client}>{children}</ClientProvider>;
}

Wallethooks

De wallethooks hebben een client met een geïnstalleerde walletplugin nodig (bijv. walletSigner). Haal hem op via useClient<AppClient>() en geef hem door als eerste argument van elke hook — zo blijft de app van begin tot eind volledig getypeerd in plaats van te vertrouwen op contextopzoekingen.

• useWallets(client) — Wallet Standard-wallets die zijn ontdekt voor de keten van de client.
• useWalletStatus(client) — "pending" | "disconnected" | "connecting" | "connected" | "disconnecting" | "reconnecting".
• useConnectedWallet(client) — { account, signer, wallet } of null. signer is null voor alleen-lezen wallets.
• useConnect(client) / useDisconnect(client) — retourneert een ActionResult waarvan dispatch (en dispatchAsync) de actie uitvoert en waarvan isRunning, status, data, error en reset het resultaat bijhouden.

"use client";

import {
  useConnect,
  useConnectedWallet,
  useDisconnect,
  useWallets,
  useWalletStatus
} from "@solana/kit-plugin-wallet/react";
import { useClient } from "@solana/react";
import type { AppClient } from "./client";

function WalletPanel() {
  const client = useClient<AppClient>();
  const status = useWalletStatus(client);
  const wallets = useWallets(client);
  const connected = useConnectedWallet(client);
  const connect = useConnect(client);
  const disconnect = useDisconnect(client);

  if (status === "pending") return null; // wait out auto-reconnect

  if (connected) {
    return (
      <div>
        <p>{connected.account.address}</p>
        <button onClick={() => disconnect.dispatch()}>Disconnect</button>
      </div>
    );
  }

  return (
    <div>
      {wallets.map((wallet) => (
        <button
          key={wallet.name}
          disabled={connect.isRunning}
          onClick={() => connect.dispatch(wallet)}
        >
          Connect {wallet.name}
        </button>
      ))}
    </div>
  );
}

Een transactie versturen

useClient retourneert dezelfde client die je hebt gepubliceerd. Bouw instructies met een gegenereerde programma-client en verstuur ze via client.sendTransaction.

"use client";

import { address, lamports } from "@solana/kit";
import { getTransferSolInstruction } from "@solana-program/system";
import { useClient } from "@solana/react";
import { useConnectedWallet } from "@solana/kit-plugin-wallet/react";
import type { AppClient } from "./client";

function SendSol({ destination }: { destination: string }) {
  const client = useClient<AppClient>();
  const connected = useConnectedWallet(client);

  async function handleSend() {
    if (!connected?.signer) return;
    const transfer = getTransferSolInstruction({
      source: connected.signer,
      destination: address(destination),
      amount: lamports(10_000_000n) // 0.01 SOL
    });
    const result = await client.sendTransaction([transfer]);
    console.log("sent", result.context.signature);
  }

  return (
    <button disabled={!connected?.signer} onClick={handleSend}>
      Send 0.01 SOL
    </button>
  );
}

Het geëxporteerde AppClient-type doorgeven aan useClient geeft de hook de volledig plugin-uitgebreide client, zodat client.rpc en client.sendTransaction getypeerd zijn.

Data lezen

@solana/react levert hooks die via de client lezen:

• useRequest(source) — eenmalige RPC-leesactie; retourneert { data, error, status, refresh }.
• useSubscription(source) — een live-abonnement; retourneert { data, error, reconnect, status }.
• useTrackedData(spec) — een RPC-gevoed waarde die actueel wordt gehouden via een abonnement.

"use client";

import { address } from "@solana/kit";
import { useClient, useRequest } from "@solana/react";
import { useMemo } from "react";
import type { AppClient } from "./client";

function Balance({ owner }: { owner: string }) {
  const client = useClient<AppClient>();
  const source = useMemo(
    () => client.rpc.getBalance(address(owner)),
    [client, owner]
  );
  const { data, status, refresh } = useRequest(source);

  if (status === "fetching") return <p>Loading…</p>;
  if (status === "error") return <p role="alert">RPC error</p>;

  return (
    <div>
      <p>Lamports: {data?.value.toString()}</p>
      <button onClick={() => refresh()}>Refresh</button>
    </div>
  );
}

Memoïseer de bron (met useMemo, of useCallback voor een functie) zodat de hook alleen opnieuw ophaalt wanneer de invoer verandert in plaats van bij elke render.

Voor caching en revalidatie wikkelen de subpaden @solana/react/swr en @solana/react/query dezelfde hooks voor SWR en TanStack Query.

Veelgebruikte patronen voor Solana-ontwikkelaars

• Één provider: ClientProvider is de enige provider die je nodig hebt; haal de client op met useClient<AppClient>() en geef hem door aan de wallethooks.
• Servercomponenten-bewust: Markeer alleen leaf-componenten die hooks aanroepen met "use client"; serverleesacties kunnen een gewone Kit RPC-client gebruiken zonder wallet.
• Testen: Publiceer een nagebootste client via ClientProvider om wallets en RPC-responses te simuleren.

Combineer deze gids met de Kit-clientoverzicht om te begrijpen welke client elke hook leest.