React

Το @solana/react δημοσιεύει ένα Kit client στο δέντρο των components σας μέσω ενός provider, και στη συνέχεια τα hooks διαβάζουν δεδομένα RPC, subscriptions και κατάσταση wallet από αυτόν. Τα browser wallet hooks βρίσκονται στο @solana/kit-plugin-wallet/react και διαβάζουν τον ίδιο provider — δεν υπάρχει ξεχωριστός wallet provider.

Εγκατάσταση

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

Δημιουργία του client

Δημιουργήστε τον client μια φορά, στο εύρος της ενότητας, εκτός του δέντρου React. Στο πρόγραμμα περιήγησης, ο walletSigner κάνει το συνδεδεμένο wallet τόσο τον πληρωτή τελών όσο και την ταυτότητα.

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 (ανακάλυψη και σύνδεση Wallet Standard), και το solanaRpc προσθέτει το client.rpc μαζί με τον βοηθό client.sendTransaction. Εξάγετε τον τύπο του client τυλιγμένο σε Awaited<> ώστε να παραμένει σωστός αν αργότερα προσθέσετε ένα plugin που επιλύεται ασύγχρονα, και περάστε αυτό το AppClient σε κάθε κλήση useClient.

Τυλίξτε το δέντρο σας μία φορά

Ο ClientProvider δημοσιεύει τον client. Τα hooks δεδομένων (useRequest, useSubscription, useTrackedData) το διαβάζουν μέσω του useClient. Τα wallet hooks παρακάτω χρειάζονται τον ίδιο client να περαστεί ρητά ως πρώτο όρισμά τους.

"use client";

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

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

Wallet hooks

Τα wallet hooks χρειάζονται έναν client με εγκατεστημένο wallet plugin (π.χ. walletSigner). Αποκτήστε τον από το useClient<AppClient>() και περάστε τον ως πρώτο όρισμα κάθε hook — αυτό διατηρεί την εφαρμογή πλήρως τυποποιημένη από άκρο σε άκρο αντί να βασίζεται σε αναζητήσεις context.

• useWallets(client) — Wallet Standard wallets που ανακαλύφθηκαν για την αλυσίδα του client.
• useWalletStatus(client) — "pending" | "disconnected" | "connecting" | "connected" | "disconnecting" | "reconnecting".
• useConnectedWallet(client) — { account, signer, wallet } ή null. Το signer είναι null για wallets μόνο ανάγνωσης.
• useConnect(client) / useDisconnect(client) — επιστρέφουν ένα ActionResult του οποίου το dispatch (και το dispatchAsync) εκτελεί την ενέργεια και τα isRunning, status, data, error και reset παρακολουθούν το αποτέλεσμά της.

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

Αποστολή συναλλαγής

Το useClient επιστρέφει τον ίδιο client που δημοσιεύσατε. Δημιουργήστε εντολές με έναν παραχθέντα program client και στείλτε τις μέσω του 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>
  );
}

Η μεταβίβαση του εξαγόμενου τύπου AppClient στο useClient δίνει στο hook τον πλήρη client με επεκτάσεις plugin, ώστε τα client.rpc και client.sendTransaction να είναι τυποποιημένα.

Ανάγνωση δεδομένων

Το @solana/react παρέχει hooks που διαβάζουν μέσω του client:

• useRequest(source) — μονοφορική ανάγνωση RPC· επιστρέφει { data, error, status, refresh }.
• useSubscription(source) — ζωντανή εγγραφή· επιστρέφει { data, error, reconnect, status }.
• useTrackedData(spec) — μια τιμή με σπόρο RPC που διατηρείται ενημερωμένη μέσω εγγραφής.

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

Χρησιμοποιήστε memoize για την πηγή (με useMemo, ή useCallback για συνάρτηση) ώστε το hook να ξαναφορτώνει μόνο όταν αλλάζουν οι είσοδοί του και όχι σε κάθε render.

Για caching και επαναεπικύρωση, τα υποδιαδρόματα @solana/react/swr και @solana/react/query τυλίγουν τα ίδια hooks για SWR και TanStack Query.

Κοινά μοτίβα για προγραμματιστές Solana

• Ένας provider: Ο ClientProvider είναι ο μοναδικός provider που χρειάζεστε· αποκτήστε τον client με useClient<AppClient>() και περάστε τον στα wallet hooks.
• Ενημερωμένο για Server components: Επισημάνετε με "use client" μόνο τα leaf components που καλούν hooks· οι αναγνώσεις από server μπορούν να χρησιμοποιούν έναν απλό Kit RPC client χωρίς wallet.
• Δοκιμές: Δημοσιεύστε έναν εικονικό client μέσω του ClientProvider για προσομοίωση wallets και αποκρίσεων RPC.

Συνδυάστε αυτόν τον οδηγό με την επισκόπηση Kit client για να κατανοήσετε τον client που διαβάζει κάθε hook.