WaaS-Schnellstart

Installation

Installiere helius-wallet-kit über 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 ist für die unten empfohlene Einrichtung mit Route Handler erforderlich.

Einrichtung

Bei der empfohlenen Einrichtung bleibt dein Helius API key serverseitig — kein Helius API key gelangt in den Browser. Testest du nur lokal? Springe zur Abkürzung für Prototypen.

Wrap your app in the provider

Füge HeliusWalletProvider nahe dem Einstiegspunkt deiner App in einer Client-Komponente hinzu. Lass den API key weg — der Route Handler im nächsten Schritt stellt ihn serverseitig bereit. Das SDK ermittelt deine Projekt-ID und die Secure-RPC-URLs ohne Key automatisch.

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

Mount the route handler

Füge den Catch-all Route Handler unter /api/helius/[...path] hinzu. Er speichert HELIUS_API_KEY serverseitig und leitet die Wallet-Initialisierung, RPC-Aufrufe, Sendevorgänge und Registrierung über einen Proxy weiter. So gelangt kein Helius API key in den Browser. Dadurch erhältst du außerdem eine Sender-optimierte Transaktionsaufnahme und den Transaktionsverlauf.

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

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

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

Lege HELIUS_API_KEY als serverseitige Umgebungsvariable fest (nicht NEXT_PUBLIC_). Der Handler fügt sie in die weitergeleiteten requests ein.

Import the styles

Importiere das SDK-Stylesheet einmal in deinem Root-Layout:

app/layout.tsx

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

Du legst im Dashboard fest, welche Anmeldemethoden deine Nutzer sehen. Weitere Informationen findest du unter Anmeldemethoden konfigurieren.

Abkürzung für Prototypen

Möchtest du es nur lokal ausprobieren? Überspringe den Route Handler und übergib deinen API key direkt an den Provider:

app/providers.tsx

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

Dadurch landet der API key in deinem Browser-Bundle. Verwende diese Methode daher nur für lokale Tests und wechsle vor der Bereitstellung zur oben beschriebenen Einrichtung mit Route Handler. Beschränke den API key vorerst auf deine Domain (siehe API key schützen): Er ermöglicht keinen Zugriff auf Wallets oder Guthaben, aber ein öffentlicher API key kann weiterhin deine Credits verbrauchen.

Nächste Schritte

Configuration

Konfigurationsoptionen und Anmeldemethoden im Dashboard.

Using the wallet

Lies den Authentifizierungsstatus und den Verlauf aus, signiere und sende Transaktionen.

Erste Schritte

Streaming von Daten und Event-Überwachung

Daten-APIs und RPCs

Trading

Transaktionen senden

Wallet-as-a-Service

Datenschutz

Ressourcen

Installation

Einrichtung

Abkürzung für Prototypen

Nächste Schritte

Configuration

Using the wallet

​Installation

​Einrichtung

​Abkürzung für Prototypen

​Nächste Schritte

Configuration

Using the wallet

Installation

Einrichtung

Abkürzung für Prototypen

Nächste Schritte