Mulai Cepat WaaS

Instalasi

Instal helius-wallet-kit dari npm (Node.js 18+):

pnpm add helius-wallet-kit

Dependensi peer yang diperlukan:

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

next >= 14 diperlukan untuk penyiapan handler rute yang direkomendasikan di bawah ini.

Penyiapan

Penyiapan yang direkomendasikan menyimpan kunci API Helius Anda di sisi server — tidak ada kunci Helius yang dikirim ke browser. Hanya ingin menguji secara lokal? Buka pintasan pembuatan prototipe.

Wrap your app in the provider

Tambahkan HeliusWalletProvider di dekat root aplikasi Anda dalam komponen klien. Jangan sertakan kunci API — handler rute (langkah berikutnya) menyediakannya di sisi server. SDK secara otomatis menemukan ID proyek dan URL Secure RPC tanpa kunci Anda.

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

Tambahkan handler rute catch-all di /api/helius/[...path]. Handler ini menyimpan HELIUS_API_KEY di sisi server dan memproksikan inisialisasi dompet, RPC, pengiriman, serta pendaftaran — sehingga kunci Helius tidak pernah sampai ke browser. Handler ini juga memberi Anda landing yang dioptimalkan untuk Sender dan riwayat transaksi.

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

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

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

Tetapkan HELIUS_API_KEY sebagai variabel lingkungan server (bukan NEXT_PUBLIC_); handler akan menyisipkannya ke permintaan yang diteruskan.

Import the styles

Impor stylesheet SDK satu kali dalam tata letak root Anda:

app/layout.tsx

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

Anda dapat memilih metode masuk yang dilihat pengguna di dasbor — lihat Mengonfigurasi metode masuk.

Pintasan pembuatan prototipe

Hanya ingin mencobanya secara lokal? Lewati handler rute dan teruskan kunci API Anda langsung ke penyedia:

app/providers.tsx

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

Cara ini menyertakan kunci dalam bundle browser Anda, sehingga hanya ditujukan untuk pengujian lokal — beralihlah ke penyiapan handler rute di atas sebelum melakukan deployment. Sementara itu, batasi kunci berdasarkan domain (lihat Mengamankan kunci Anda): kunci tersebut tidak dapat mengakses dompet atau dana, tetapi kunci yang terekspos ke publik masih dapat digunakan untuk menghabiskan kredit Anda.

Memulai

Streaming Data & Pemantauan Peristiwa

API Data & RPC

Perdagangan

Mengirim Transaksi

Dompet sebagai Layanan

Privasi

Sumber Daya

Instalasi

Penyiapan

Pintasan pembuatan prototipe

Langkah berikutnya

Configuration

Using the wallet

​Instalasi

​Penyiapan

​Pintasan pembuatan prototipe

​Langkah berikutnya

Configuration

Using the wallet

Instalasi

Penyiapan

Pintasan pembuatan prototipe

Langkah berikutnya