Solana Wallet-Integration mit Next.js und Solana Kit

Richten Sie eine minimale Solana Wallet-Integration in Next.js mit Solana Kit ein.

Dieser Leitfaden bietet ein minimales Beispiel für die Implementierung von Solana Wallet-Funktionalität in einer Next.js-Anwendung mit @solana/kit. Sie erstellen einen Connect-Wallet-Button und eine Komponente zum Senden von Transaktionen.

Nextjs Kit Anwendung

Für ein umfassenderes Beispiel zur Verwendung von @solana/kit in einer React-Anwendung, siehe das React App Beispiel im Solana Kit Repository.

Ressourcen

Voraussetzungen

Installation von Node.js

Next.js-Projekt erstellen

Erstellen Sie ein neues Next.js-Projekt mit shadcn für UI-Komponenten und installieren Sie die erforderlichen Solana-Abhängigkeiten.

Terminal

$ npx shadcn@latest init

Navigieren Sie zu Ihrem Projektverzeichnis:

Terminal

$ cd <project-name>

UI-Komponenten installieren

Installieren Sie die folgenden shadcn UI-Komponenten:

Terminal

$ npx shadcn@latest add button dropdown-menu avatar

Solana-Abhängigkeiten installieren

Installieren Sie die folgenden Solana-Abhängigkeiten:

Terminal

$ npm install @solana/kit @solana/react @wallet-standard/core @wallet-standard/react @solana-program/memo

Implementierungsanleitung

Folgen Sie den untenstehenden Schritten und kopieren Sie den bereitgestellten Code in Ihr Projekt.

1. Solana-Kontext erstellen

Erstelle zunächst einen React-Kontext, der den gesamten Wallet-Status für die Anwendung verwaltet.

Erstelle components/solana-provider.tsx und füge den bereitgestellten Code hinzu. Diese Provider- Komponente wird:

Eine Verbindung zu Solanas Devnet-RPC-Endpunkten herstellen
Nach verfügbaren Solana-Wallets filtern, die im Browser des Nutzers installiert sind
Verfolgen, welches Wallet und welches Konto aktuell verbunden ist
Den Wallet-Status an untergeordnete Komponenten weitergeben

components/solana-provider.tsx

"use client";

import React, { createContext, useContext, useState, useMemo } from "react";
import {
  useWallets,
  type UiWallet,
  type UiWalletAccount
} from "@wallet-standard/react";
import { createSolanaRpc, createSolanaRpcSubscriptions } from "@solana/kit";
import { StandardConnect } from "@wallet-standard/core";

// Create RPC connection
const RPC_ENDPOINT = "https://api.devnet.solana.com";
const WS_ENDPOINT = "wss://api.devnet.solana.com";
const chain = "solana:devnet";
const rpc = createSolanaRpc(RPC_ENDPOINT);
const ws = createSolanaRpcSubscriptions(WS_ENDPOINT);

interface SolanaContextState {
  // RPC
  rpc: ReturnType<typeof createSolanaRpc>;
  ws: ReturnType<typeof createSolanaRpcSubscriptions>;
  chain: typeof chain;

  // Wallet State
  wallets: UiWallet[];
  selectedWallet: UiWallet | null;
  selectedAccount: UiWalletAccount | null;
  isConnected: boolean;

  // Wallet Actions
  setWalletAndAccount: (
    wallet: UiWallet | null,
    account: UiWalletAccount | null
  ) => void;
}

const SolanaContext = createContext<SolanaContextState | undefined>(undefined);

export function useSolana() {
  const context = useContext(SolanaContext);
  if (!context) {
    throw new Error("useSolana must be used within a SolanaProvider");
  }
  return context;
}

export function SolanaProvider({ children }: { children: React.ReactNode }) {
  const allWallets = useWallets();

  // Filter for Solana wallets only that support signAndSendTransaction
  const wallets = useMemo(() => {
    return allWallets.filter(
      (wallet) =>
        wallet.chains?.some((c) => c.startsWith("solana:")) &&
        wallet.features.includes(StandardConnect) &&
        wallet.features.includes("solana:signAndSendTransaction")
    );
  }, [allWallets]);

  // State management
  const [selectedWallet, setSelectedWallet] = useState<UiWallet | null>(null);
  const [selectedAccount, setSelectedAccount] =
    useState<UiWalletAccount | null>(null);

  // Check if connected (account must exist in the wallet's accounts)
  const isConnected = useMemo(() => {
    if (!selectedAccount || !selectedWallet) return false;

    // Find the wallet and check if it still has this account
    const currentWallet = wallets.find((w) => w.name === selectedWallet.name);
    return !!(
      currentWallet &&
      currentWallet.accounts.some(
        (acc) => acc.address === selectedAccount.address
      )
    );
  }, [selectedAccount, selectedWallet, wallets]);

  const setWalletAndAccount = (
    wallet: UiWallet | null,
    account: UiWalletAccount | null
  ) => {
    setSelectedWallet(wallet);
    setSelectedAccount(account);
  };

  // Create context value
  const contextValue = useMemo<SolanaContextState>(
    () => ({
      // Static RPC values
      rpc,
      ws,
      chain,

      // Dynamic wallet values
      wallets,
      selectedWallet,
      selectedAccount,
      isConnected,
      setWalletAndAccount
    }),
    [wallets, selectedWallet, selectedAccount, isConnected]
  );

  return (
    <SolanaContext.Provider value={contextValue}>
      {children}
    </SolanaContext.Provider>
  );
}

2. Layout aktualisieren

Als Nächstes umschließe die gesamte Next.js-Anwendung mit dem Solana-Provider.

Aktualisiere app/layout.tsx mit dem bereitgestellten Code. Dieser Schritt:

Importiert die SolanaProvider-Komponente
Umschließt die untergeordneten Komponenten der Anwendung mit dem SolanaProvider
Stellt sicher, dass alle Seiten und Komponenten Zugriff auf die Wallet-Funktionalität haben

app/layout.tsx

import { SolanaProvider } from "@/components/solana-provider";
import "./globals.css";

export default function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <SolanaProvider>{children}</SolanaProvider>
      </body>
    </html>
  );
}

3. Wallet-Connect-Button erstellen

Erstelle nun den Button zum Verbinden und Trennen von Wallets.

Erstelle components/wallet-connect-button.tsx und füge den bereitgestellten Code hinzu. Dieser Dropdown-Button:

Zeigt verfügbare Wallets an, wenn er angeklickt wird
Verarbeitet den Wallet-Verbindungsablauf mit dem Wallet Standard

components/wallet-connect-button.tsx

"use client";

import { useState } from "react";
import { useSolana } from "@/components/solana-provider";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger
} from "@/components/ui/dropdown-menu";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { ChevronDown, Wallet, LogOut } from "lucide-react";
import {
  useConnect,
  useDisconnect,
  type UiWallet
} from "@wallet-standard/react";

function truncateAddress(address: string): string {
  return `${address.slice(0, 4)}...${address.slice(-4)}`;
}

function WalletIcon({
  wallet,
  className
}: {
  wallet: UiWallet;
  className?: string;
}) {
  return (
    <Avatar className={className}>
      {wallet.icon && (
        <AvatarImage src={wallet.icon} alt={`${wallet.name} icon`} />
      )}
      <AvatarFallback>{wallet.name.slice(0, 2).toUpperCase()}</AvatarFallback>
    </Avatar>
  );
}

function WalletMenuItem({
  wallet,
  onConnect
}: {
  wallet: UiWallet;
  onConnect: () => void;
}) {
  const { setWalletAndAccount } = useSolana();
  const [isConnecting, connect] = useConnect(wallet);

  const handleConnect = async () => {
    if (isConnecting) return;

    try {
      const accounts = await connect();

      if (accounts && accounts.length > 0) {
        const account = accounts[0];
        setWalletAndAccount(wallet, account);
        onConnect();
      }
    } catch (err) {
      console.error(`Failed to connect ${wallet.name}:`, err);
    }
  };

  return (
    <button
      className="flex w-full items-center justify-between px-2 py-1.5 text-sm outline-none hover:bg-accent focus:bg-accent disabled:pointer-events-none disabled:opacity-50"
      onClick={handleConnect}
      disabled={isConnecting}
    >
      <div className="flex items-center gap-2">
        <WalletIcon wallet={wallet} className="h-6 w-6" />
        <span className="font-medium">{wallet.name}</span>
      </div>
    </button>
  );
}

function DisconnectButton({
  wallet,
  onDisconnect
}: {
  wallet: UiWallet;
  onDisconnect: () => void;
}) {
  const { setWalletAndAccount } = useSolana();
  const [isDisconnecting, disconnect] = useDisconnect(wallet);

  const handleDisconnect = async () => {
    try {
      await disconnect();
      setWalletAndAccount(null, null);
      onDisconnect();
    } catch (err) {
      console.error("Failed to disconnect wallet:", err);
    }
  };

  return (
    <DropdownMenuItem
      className="text-destructive focus:text-destructive cursor-pointer"
      onClick={handleDisconnect}
      disabled={isDisconnecting}
    >
      <LogOut className="mr-2 h-4 w-4" />
      Disconnect
    </DropdownMenuItem>
  );
}

export function WalletConnectButton() {
  const { wallets, selectedWallet, selectedAccount, isConnected } = useSolana();

  const [dropdownOpen, setDropdownOpen] = useState(false);

  return (
    <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" className="min-w-[140px] justify-between">
          {isConnected && selectedWallet && selectedAccount ? (
            <>
              <div className="flex items-center gap-2">
                <WalletIcon wallet={selectedWallet} className="h-4 w-4" />
                <span className="font-mono text-sm">
                  {truncateAddress(selectedAccount.address)}
                </span>
              </div>
              <ChevronDown className="ml-2 h-4 w-4" />
            </>
          ) : (
            <>
              <Wallet className="mr-2 h-4 w-4" />
              <span>Connect Wallet</span>
              <ChevronDown className="ml-2 h-4 w-4" />
            </>
          )}
        </Button>
      </DropdownMenuTrigger>

      <DropdownMenuContent align="end" className="w-[280px]">
        {wallets.length === 0 ? (
          <p className="text-sm text-muted-foreground p-3 text-center">
            No wallets detected
          </p>
        ) : (
          <>
            {!isConnected ? (
              <>
                <DropdownMenuLabel>Available Wallets</DropdownMenuLabel>
                <DropdownMenuSeparator />
                {wallets.map((wallet, index) => (
                  <WalletMenuItem
                    key={`${wallet.name}-${index}`}
                    wallet={wallet}
                    onConnect={() => setDropdownOpen(false)}
                  />
                ))}
              </>
            ) : (
              selectedWallet &&
              selectedAccount && (
                <>
                  <DropdownMenuLabel>Connected Wallet</DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <div className="px-2 py-1.5">
                    <div className="flex items-center gap-2">
                      <WalletIcon wallet={selectedWallet} className="h-6 w-6" />
                      <div className="flex flex-col">
                        <span className="text-sm font-medium">
                          {selectedWallet.name}
                        </span>
                        <span className="text-xs text-muted-foreground font-mono">
                          {truncateAddress(selectedAccount.address)}
                        </span>
                      </div>
                    </div>
                  </div>
                  <DropdownMenuSeparator />
                  <DisconnectButton
                    wallet={selectedWallet}
                    onDisconnect={() => setDropdownOpen(false)}
                  />
                </>
              )
            )}
          </>
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

4. Komponente zum Senden von Transaktionen erstellen

Erstelle eine Komponente, die eine Transaktion sendet, welche das Memo-Programm aufruft, um eine Nachricht zu den Transaktionslogs hinzuzufügen.

Der Zweck dieser Komponente ist es zu demonstrieren, wie man Transaktionen mit dem verbundenen Wallet sendet.

Erstelle components/memo-card.tsx und füge den bereitgestellten Code hinzu. Diese Komponente:

Ermöglicht Benutzern, eine Nachricht einzugeben
Erstellt eine Solana-Transaktion mit Anweisungen, die das Memo-Programm aufrufen
Fordert das verbundene Wallet auf, die Transaktion zu signieren und zu senden
Zeigt einen Link an, um die Transaktion im Solana Explorer anzusehen

components/memo-card.tsx

"use client";

import { useState } from "react";
import { useSolana } from "@/components/solana-provider";
import { useWalletAccountTransactionSendingSigner } from "@solana/react";
import { type UiWalletAccount } from "@wallet-standard/react";
import {
  pipe,
  createTransactionMessage,
  appendTransactionMessageInstruction,
  setTransactionMessageFeePayerSigner,
  setTransactionMessageLifetimeUsingBlockhash,
  signAndSendTransactionMessageWithSigners,
  getBase58Decoder,
  type Signature
} from "@solana/kit";
import { getAddMemoInstruction } from "@solana-program/memo";

// Component that only renders when wallet is connected
function ConnectedMemoCard({ account }: { account: UiWalletAccount }) {
  const { rpc, chain } = useSolana();
  const [isLoading, setIsLoading] = useState(false);
  const [memoText, setMemoText] = useState("");
  const [txSignature, setTxSignature] = useState("");

  const signer = useWalletAccountTransactionSendingSigner(account, chain);

  const sendMemo = async () => {
    if (!signer) return;

    setIsLoading(true);
    try {
      const { value: latestBlockhash } = await rpc
        .getLatestBlockhash({ commitment: "confirmed" })
        .send();

      const memoInstruction = getAddMemoInstruction({ memo: memoText });

      const message = pipe(
        createTransactionMessage({ version: 0 }),
        (m) => setTransactionMessageFeePayerSigner(signer, m),
        (m) => setTransactionMessageLifetimeUsingBlockhash(latestBlockhash, m),
        (m) => appendTransactionMessageInstruction(memoInstruction, m)
      );

      const signature = await signAndSendTransactionMessageWithSigners(message);
      const signatureStr = getBase58Decoder().decode(signature) as Signature;

      setTxSignature(signatureStr);
      setMemoText("");
    } catch (error) {
      console.error("Memo failed:", error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="space-y-4">
      <div>
        <label className="block text-sm mb-1">Memo Message</label>
        <textarea
          value={memoText}
          onChange={(e) => setMemoText(e.target.value)}
          placeholder="Enter your memo message"
          className="w-full p-2 border rounded min-h-[100px]"
          maxLength={566}
        />
      </div>

      <button
        onClick={sendMemo}
        disabled={isLoading || !memoText.trim()}
        className="w-full p-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-400"
      >
        {isLoading ? "Sending..." : "Send Memo"}
      </button>

      {txSignature && (
        <div className="p-2 border rounded text-sm">
          <p className="mb-1">Memo Sent</p>
          <a
            href={`https://explorer.solana.com/tx/${txSignature}?cluster=devnet`}
            target="_blank"
            rel="noopener noreferrer"
            className="text-blue-500 hover:underline"
          >
            View on Solana Explorer →
          </a>
        </div>
      )}
    </div>
  );
}

// Main memo component
export function MemoCard() {
  const { selectedAccount, isConnected } = useSolana();

  return (
    <div className="space-y-4 p-4 border rounded-lg">
      <h3 className="text-lg font-semibold">Send Memo</h3>
      {isConnected && selectedAccount ? (
        <ConnectedMemoCard account={selectedAccount} />
      ) : (
        <p className="text-gray-500 text-center py-4">
          Connect your wallet to send a memo
        </p>
      )}
    </div>
  );
}

5. App-Seite aktualisieren

Aktualisiere zum Schluss die Hauptseite der App.

Aktualisiere app/page.tsx mit dem bereitgestellten Code. Diese Seite:

Importiert und verwendet die Komponenten WalletConnectButton und MemoCard

app/page.tsx

"use client";

import { WalletConnectButton } from "@/components/wallet-connect-button";
import { MemoCard } from "@/components/memo-card";

export default function Home() {
  return (
    <div className="min-h-screen flex items-center justify-center p-4">
      <div className="w-full max-w-md bg-card rounded-lg border shadow-lg p-6 space-y-6">
        <div className="flex justify-center">
          <WalletConnectButton />
        </div>
        <MemoCard />
      </div>
    </div>
  );
}

6. Anwendung ausführen

Führe nun die Anwendung aus, um die Wallet-Integration zu testen.

Terminal

$ npm run dev

Beachte, dass das verbundene Wallet für die Verbindung zum Devnet-Cluster konfiguriert und mit Devnet SOL aufgeladen sein muss, um Transaktionen zu senden.

1. Solana-Kontext erstellen

Erstelle zunächst einen React-Kontext, der den gesamten Wallet-Status für die Anwendung verwaltet.

Erstelle components/solana-provider.tsx und füge den bereitgestellten Code hinzu. Diese Provider- Komponente wird:

Eine Verbindung zu Solanas Devnet-RPC-Endpunkten herstellen
Nach verfügbaren Solana-Wallets filtern, die im Browser des Nutzers installiert sind
Verfolgen, welches Wallet und welches Konto aktuell verbunden ist
Den Wallet-Status an untergeordnete Komponenten weitergeben

2. Layout aktualisieren

Als Nächstes umschließe die gesamte Next.js-Anwendung mit dem Solana-Provider.

Aktualisiere app/layout.tsx mit dem bereitgestellten Code. Dieser Schritt:

Importiert die SolanaProvider-Komponente
Umschließt die untergeordneten Komponenten der Anwendung mit dem SolanaProvider
Stellt sicher, dass alle Seiten und Komponenten Zugriff auf die Wallet-Funktionalität haben

3. Wallet-Connect-Button erstellen

Erstelle nun den Button zum Verbinden und Trennen von Wallets.

Erstelle components/wallet-connect-button.tsx und füge den bereitgestellten Code hinzu. Dieser Dropdown-Button:

Zeigt verfügbare Wallets an, wenn er angeklickt wird
Verarbeitet den Wallet-Verbindungsablauf mit dem Wallet Standard

4. Komponente zum Senden von Transaktionen erstellen

Erstelle eine Komponente, die eine Transaktion sendet, welche das Memo-Programm aufruft, um eine Nachricht zu den Transaktionslogs hinzuzufügen.

Der Zweck dieser Komponente ist es zu demonstrieren, wie man Transaktionen mit dem verbundenen Wallet sendet.

Erstelle components/memo-card.tsx und füge den bereitgestellten Code hinzu. Diese Komponente:

Ermöglicht Benutzern, eine Nachricht einzugeben
Erstellt eine Solana-Transaktion mit Anweisungen, die das Memo-Programm aufrufen
Fordert das verbundene Wallet auf, die Transaktion zu signieren und zu senden
Zeigt einen Link an, um die Transaktion im Solana Explorer anzusehen

5. App-Seite aktualisieren

Aktualisiere zum Schluss die Hauptseite der App.

Aktualisiere app/page.tsx mit dem bereitgestellten Code. Diese Seite:

Importiert und verwendet die Komponenten WalletConnectButton und MemoCard

6. Anwendung ausführen

Führe nun die Anwendung aus, um die Wallet-Integration zu testen.

Terminal

$ npm run dev

Beachte, dass das verbundene Wallet für die Verbindung zum Devnet-Cluster konfiguriert und mit Devnet SOL aufgeladen sein muss, um Transaktionen zu senden.

layout.tsx

page.tsx

solana-provider.tsx

package.json

"use client";

import React, { createContext, useContext, useState, useMemo } from "react";
import {
  useWallets,
  type UiWallet,
  type UiWalletAccount
} from "@wallet-standard/react";
import { createSolanaRpc, createSolanaRpcSubscriptions } from "@solana/kit";
import { StandardConnect } from "@wallet-standard/core";

// Create RPC connection
const RPC_ENDPOINT = "https://api.devnet.solana.com";
const WS_ENDPOINT = "wss://api.devnet.solana.com";
const chain = "solana:devnet";
const rpc = createSolanaRpc(RPC_ENDPOINT);
const ws = createSolanaRpcSubscriptions(WS_ENDPOINT);

interface SolanaContextState {
  // RPC
  rpc: ReturnType<typeof createSolanaRpc>;
  ws: ReturnType<typeof createSolanaRpcSubscriptions>;
  chain: typeof chain;

  // Wallet State
  wallets: UiWallet[];
  selectedWallet: UiWallet | null;
  selectedAccount: UiWalletAccount | null;
  isConnected: boolean;

  // Wallet Actions
  setWalletAndAccount: (
    wallet: UiWallet | null,
    account: UiWalletAccount | null
  ) => void;
}

const SolanaContext = createContext<SolanaContextState | undefined>(undefined);

export function useSolana() {
  const context = useContext(SolanaContext);
  if (!context) {
    throw new Error("useSolana must be used within a SolanaProvider");
  }
  return context;
}

export function SolanaProvider({ children }: { children: React.ReactNode }) {
  const allWallets = useWallets();

  // Filter for Solana wallets only that support signAndSendTransaction
  const wallets = useMemo(() => {
    return allWallets.filter(
      (wallet) =>
        wallet.chains?.some((c) => c.startsWith("solana:")) &&
        wallet.features.includes(StandardConnect) &&
        wallet.features.includes("solana:signAndSendTransaction")
    );
  }, [allWallets]);

  // State management
  const [selectedWallet, setSelectedWallet] = useState<UiWallet | null>(null);
  const [selectedAccount, setSelectedAccount] =
    useState<UiWalletAccount | null>(null);

  // Check if connected (account must exist in the wallet's accounts)
  const isConnected = useMemo(() => {
    if (!selectedAccount || !selectedWallet) return false;

    // Find the wallet and check if it still has this account
    const currentWallet = wallets.find((w) => w.name === selectedWallet.name);
    return !!(
      currentWallet &&
      currentWallet.accounts.some(
        (acc) => acc.address === selectedAccount.address
      )
    );
  }, [selectedAccount, selectedWallet, wallets]);

  const setWalletAndAccount = (
    wallet: UiWallet | null,
    account: UiWalletAccount | null
  ) => {
    setSelectedWallet(wallet);
    setSelectedAccount(account);
  };

  // Create context value
  const contextValue = useMemo<SolanaContextState>(
    () => ({
      // Static RPC values
      rpc,
      ws,
      chain,

      // Dynamic wallet values
      wallets,
      selectedWallet,
      selectedAccount,
      isConnected,
      setWalletAndAccount
    }),
    [wallets, selectedWallet, selectedAccount, isConnected]
  );

  return (
    <SolanaContext.Provider value={contextValue}>
      {children}
    </SolanaContext.Provider>
  );
}

Next.js - Solana Kit

Ressourcen

Voraussetzungen

Next.js-Projekt erstellen

UI-Komponenten installieren

Solana-Abhängigkeiten installieren

Implementierungsanleitung

1. Solana-Kontext erstellen

2. Layout aktualisieren

3. Wallet-Connect-Button erstellen

4. Komponente zum Senden von Transaktionen erstellen

5. App-Seite aktualisieren

6. Anwendung ausführen

1. Solana-Kontext erstellen

2. Layout aktualisieren

3. Wallet-Connect-Button erstellen

4. Komponente zum Senden von Transaktionen erstellen

5. App-Seite aktualisieren

6. Anwendung ausführen

Inhaltsverzeichnis