React

@solana/react, bileşen ağacınıza tek bir sağlayıcı aracılığıyla bir Kit istemcisi yayınlar; hook'lar ise RPC verilerini, abonelikleri ve cüzdan durumunu bu istemciden okur. Tarayıcı cüzdan hook'ları @solana/kit-plugin-wallet/react içinde bulunur ve aynı sağlayıcıyı okur — ayrı bir cüzdan sağlayıcısına gerek yoktur.

Kurulum

Terminal

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

İstemciyi oluşturun

İstemciyi bir kez, modül kapsamında, React ağacının dışında oluşturun. Tarayıcıda walletSigner, bağlı cüzdanı hem ücret ödeyici hem de kimlik olarak ayarlar.

client.ts

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, client.wallet ekler (Wallet Standard keşfi ve bağlantısı); solanaRpc ise client.rpc ile client.sendTransaction yardımcısını ekler. İstemci türünü Awaited<> içine sararak dışa aktarın; böylece daha sonra asenkron çözümlenen bir eklenti eklediğinizde tür doğruluğu korunur ve bu AppClient'ı her useClient çağrısına iletin.

Ağacınızı bir kez sarın

ClientProvider, istemciyi yayınlar. Veri hook'ları (useRequest, useSubscription, useTrackedData) bunu useClient aracılığıyla okur. Aşağıdaki cüzdan hook'larının ise aynı istemcinin açıkça ilk argüman olarak iletilmesi gerekir.

providers.tsx

"use client";

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

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

Cüzdan hook'ları

Cüzdan hook'ları, cüzdan eklentisi yüklü bir istemci gerektirir (örn. walletSigner). useClient<AppClient>() ile alın ve her hook'un ilk argümanı olarak iletin — bu, bağlam aramalarına güvenmek yerine uygulamanın uçtan uca tam olarak türlendirilmesini sağlar.

useWallets(client) — İstemcinin zinciri için keşfedilen Wallet Standard cüzdanları.
useWalletStatus(client) — "pending" | "disconnected" | "connecting" | "connected" | "disconnecting" | "reconnecting".
useConnectedWallet(client) — { account, signer, wallet } veya null. signer, salt okunur cüzdanlar için null'dır.
useConnect(client) / useDisconnect(client) — Bir ActionResult döndürür; dispatch (ve dispatchAsync) eylemi çalıştırır, isRunning, status, data, error ve reset ise sonucu izler.

"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>
  );
}

İşlem gönderme

useClient, yayınladığınız istemcinin aynısını döndürür. Oluşturulan bir program istemcisiyle talimatlar oluşturun ve bunları client.sendTransaction aracılığıyla gönderin.

"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>
  );
}

Dışa aktarılan AppClient türünü useClient'a iletmek, hook'a eklenti genişletmeli tam istemciyi sağlar; böylece client.rpc ve client.sendTransaction türlendirilmiş olur.

Veri okuma

@solana/react, istemci üzerinden okuyan hook'larla birlikte gelir:

useRequest(source) — tek seferlik RPC okuması; { data, error, status, refresh } döndürür.
useSubscription(source) — canlı bir abonelik; { data, error, reconnect, status } döndürür.
useTrackedData(spec) — abonelik ile güncel tutulan, RPC ile başlatılan bir değer.

"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>
  );
}

Hook'un yalnızca girdileri değiştiğinde yeniden veri çekmesi için (her render'da değil) kaynağı memoize edin (useMemo ile veya bir fonksiyon için useCallback ile).

Önbellekleme ve yeniden doğrulama için @solana/react/swr ve @solana/react/query alt yolları, aynı hook'ları SWR ve TanStack Query için sarar.

Solana geliştiricileri için yaygın kalıplar

Tek sağlayıcı: ClientProvider, ihtiyacınız olan tek sağlayıcıdır; useClient<AppClient>() ile istemciyi alın ve cüzdan hook'larına iletin.
Sunucu bileşenlerini destekler: Yalnızca hook çağıran yaprak bileşenleri "use client" ile işaretleyin; sunucu okumaları, cüzdan olmaksızın düz bir Kit RPC istemcisi kullanabilir.
Test: Cüzdanları ve RPC yanıtlarını simüle etmek için ClientProvider aracılığıyla sahte bir istemci yayınlayın.

İki hook ailesi, aynı isimler

useSignIn ve useSignMessage hem @solana/react içinde (bir UiWalletAccount argümanı alır) hem de @solana/kit-plugin-wallet/react içinde (bunun yerine client alır, bir ActionResult döndürür) bulunur. Yukarıdaki istemci kalıbıyla @solana/kit-plugin-wallet/react sürümlerini kullanın; eski @solana/react cüzdan hook'larının yerini bunlar almaktadır.

Her hook'un okuduğu istemciyi anlamak için bu kılavuzu Kit istemcisine genel bakış ile birlikte kullanın.

İçindekiler