React

@solana/react julkaisee Kit-asiakkaan komponenttipuuhun yhden tarjoajan kautta, ja hookit lukevat siitä RPC-dataa, tilauksia sekä lompakkotilaa. Selaimen lompakkohookit sijaitsevat paketissa @solana/kit-plugin-wallet/react ja lukevat samaa tarjoajaa — erillistä lompakon tarjoajaa ei tarvita.

Asennus

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

Rakenna asiakas

Rakenna asiakas kerran moduulitasolla, React-puun ulkopuolella. Selaimessa walletSigner tekee yhdistetystä lompakosta sekä transaktiomaksun maksajan että identiteetin.

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 lisää client.wallet-ominaisuuden (Wallet Standard -löytäminen ja yhteyden muodostaminen), ja solanaRpc lisää client.rpc-ominaisuuden sekä client.sendTransaction-apufunktion. Vie asiakkaan tyyppi Awaited<>-kääreen sisään, jotta se pysyy oikeana, jos lisäät myöhemmin asynkronisesti ratkeavan liitännäisen, ja välitä kyseinen AppClient jokaiselle useClient-kutsulle.

Kääri puusi kerran

ClientProvider julkaisee asiakkaan. Datahookit (useRequest, useSubscription, useTrackedData) lukevat sitä useClient-hookin kautta. Alla olevat lompakkohookit tarvitsevat saman asiakkaan välitettynä suoraan ensimmäisenä argumenttina.

"use client";

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

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

Lompakkohookit

Lompakkohookit tarvitsevat asiakkaan, johon on asennettu lompakkolitännäinen (esim. walletSigner). Hae se useClient<AppClient>()-hookilla ja välitä se kunkin hookin ensimmäisenä argumenttina — näin sovellus pysyy täysin tyypitettynä alusta loppuun kontekstin hakemisen sijaan.

• useWallets(client) — Wallet Standard -lompakot, jotka on löydetty asiakkaan ketjulle.
• useWalletStatus(client) — "pending" | "disconnected" | "connecting" | "connected" | "disconnecting" | "reconnecting".
• useConnectedWallet(client) — { account, signer, wallet } tai null. signer on null vain luku -lompakoille.
• useConnect(client) / useDisconnect(client) — palauttavat ActionResult-olion, jonka dispatch (ja dispatchAsync) suorittaa toiminnon ja jonka isRunning, status, data, error ja reset seuraavat sen tulosta.

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

Lähetä transaktio

useClient palauttaa saman asiakkaan, jonka julkaisit. Rakenna ohjeet generoitu ohjelmaklientin avulla ja lähetä ne client.sendTransaction-funktion kautta.

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

Välittämällä viety AppClient-tyyppi useClient-hookille annetaan hookille täysi liitännäisillä laajennettu asiakas, jolloin client.rpc ja client.sendTransaction ovat tyypitettyjä.

Lue dataa

@solana/react toimittaa hookit, jotka lukevat asiakkaan kautta:

• useRequest(source) — kertaluonteinen RPC-luku; palauttaa { data, error, status, refresh }.
• useSubscription(source) — reaaliaikainen tilaus; palauttaa { data, error, reconnect, status }.
• useTrackedData(spec) — RPC:llä alustettu arvo, joka pidetään ajantasaisena tilauksen avulla.

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

Muistoi lähde (useMemo-hookilla tai useCallback-hookilla funktion tapauksessa), jotta hookki hakee datan uudelleen vain syötteiden muuttuessa eikä joka renderöinnillä.

Välimuistia ja uudelleenvalidointia varten @solana/react/swr- ja @solana/react/query- alipoluissa samat hookit on kääritty SWR- ja TanStack Query -kirjastoille.

Yleisiä malleja Solana-kehittäjille

• Yksi tarjoaja: ClientProvider on ainoa tarvitsemasi tarjoaja; hae asiakas useClient<AppClient>()-hookilla ja välitä se lompakkohookeille.
• Palvelinkomponentit huomioitu: Merkitse vain "use client" -direktiivillä ne lehtikomponentit, jotka kutsuvat hookkeja; palvelinlukuihin voi käyttää tavallista Kit RPC -asiakasta ilman lompakkoa.
• Testaus: Julkaise simuloitu asiakas ClientProvider-tarjoajan kautta lompakkojen ja RPC-vastausten simuloimiseksi.

Täydennä tätä opasta Kit-asiakkaan yleiskatsauksella ymmärtääksesi asiakkaan, jota kukin hookki lukee.