WaaS Schnellstart

Installation

Installieren Sie helius-wallet-kit von npm (Node.js 18+):

pnpm add helius-wallet-kit

Erforderliche Peer-Abhängigkeiten:

react >= 18
react-dom >= 18
@solana/web3.js ^1.98

next >= 14 wird für das empfohlene Route-Handler-Setup unten benötigt.

Einrichtung

Das empfohlene Setup hält Ihren Helius API-Schlüssel serverseitig — kein Helius-Schlüssel wird an den Browser gesendet. Nur lokal testen? Springen Sie zum Prototyping-Shortcut.

Wickeln Sie Ihre App in den Anbieter

Fügen Sie HeliusWalletProvider in der Nähe des Stammverzeichnisses Ihrer App in einer Client-Komponente hinzu. Lassen Sie den API-Schlüssel weg — der Route-Handler (nächster Schritt) liefert ihn serverseitig. Das SDK löst Ihre Projekt-ID und schlüssellose Secure RPC URLs automatisch auf.

app/providers.tsx

"use client";

import { HeliusWalletProvider } from "helius-wallet-kit";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <HeliusWalletProvider config={{ cluster: "mainnet-beta" }}>
      {children}
    </HeliusWalletProvider>
  );
}

Montieren Sie den Route-Handler

Fügen Sie den Catch-All Route-Handler bei /api/helius/[...path] hinzu. Er hält HELIUS_API_KEY serverseitig und leitet den Wallet-Start, RPC, Sendungen und Registrierung weiter — kein Helius-Schlüssel erreicht jemals den Browser. Dies ermöglicht auch senderoptimiertes Landing und Transaktionshistorie.

app/api/helius/[...path]/route.ts

import { createHeliusRouteHandler } from "helius-wallet-kit/next";

export const { GET, POST } = createHeliusRouteHandler();

Setzen Sie HELIUS_API_KEY als Server-Umgebungsvariable (nicht NEXT_PUBLIC_); der Handler injiziert ihn in die weitergeleiteten Anfragen.

Importieren Sie die Stile

Importieren Sie das SDK Stylesheet einmal in Ihrem Root-Layout:

app/layout.tsx

import "helius-wallet-kit/ui/styles.css";

Sie wählen die Anmeldemethoden aus, die Ihre Benutzer im Dashboard sehen — siehe Anmeldemethoden konfigurieren.

Prototyping-Shortcut

Nur lokal ausprobieren? Überspringen Sie den Route-Handler und übergeben Sie Ihren API-Schlüssel direkt an den Anbieter:

app/providers.tsx

<HeliusWalletProvider
  config={{ apiKey: process.env.NEXT_PUBLIC_HELIUS_API_KEY!, cluster: "devnet" }}
>
  {children}
</HeliusWalletProvider>

Dies überträgt den Schlüssel in Ihrem Browser-Bundle, daher ist es nur für lokales Testen gedacht — wechseln Sie vor der Bereitstellung zum Route-Handler-Setup oben. Beschränken Sie den Schlüssel zwischenzeitlich auf die Domain (siehe Schützen Sie Ihren Schlüssel): Er kann keine Wallets oder Gelder berühren, aber ein öffentlicher Schlüssel kann trotzdem verwendet werden, um Ihre Kredite auszugeben.

Erste Schritte

Daten-Streaming & Ereignisüberwachung

Daten-APIs & RPCs

Handel

Transaktionen senden

Wallet-as-a-Service

Privatsphäre

Ressourcen

Installation

Einrichtung

Prototyping-Shortcut

Nächste Schritte

Konfiguration

Verwendung des Wallets

​Installation

​Einrichtung

​Prototyping-Shortcut

​Nächste Schritte

Konfiguration

Verwendung des Wallets

Installation

Einrichtung

Prototyping-Shortcut

Nächste Schritte