Bắt đầu nhanh với WaaS

Cài đặt

Cài đặt helius-wallet-kit từ npm (Node.js 18+):

pnpm add helius-wallet-kit

Các phần phụ thuộc ngang hàng bắt buộc:

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

Cần có next >= 14 để sử dụng cách thiết lập trình xử lý route được đề xuất bên dưới.

Thiết lập

Cách thiết lập được đề xuất giữ khóa API Helius của bạn ở phía máy chủ — không có khóa Helius nào được gửi đến trình duyệt. Chỉ đang kiểm thử cục bộ? Chuyển đến cách nhanh để tạo nguyên mẫu.

Wrap your app in the provider

Thêm HeliusWalletProvider gần phần gốc của ứng dụng trong một thành phần phía máy khách. Không truyền khóa API — trình xử lý route (bước tiếp theo) sẽ cung cấp khóa ở phía máy chủ. SDK tự động phân giải ID dự án và các URL RPC bảo mật không cần khóa.

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

Thêm trình xử lý route dạng catch-all tại /api/helius/[...path]. Trình xử lý này lưu HELIUS_API_KEY ở phía máy chủ và làm proxy cho quá trình khởi tạo ví, RPC, gửi giao dịch và đăng ký — vì vậy khóa Helius không bao giờ đến trình duyệt. Đây cũng là thành phần cung cấp trang đích được tối ưu hóa cho Sender và lịch sử giao dịch.

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

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

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

Đặt HELIUS_API_KEY làm biến môi trường máy chủ (không phải NEXT_PUBLIC_); trình xử lý sẽ chèn biến này vào các yêu cầu được chuyển tiếp.

Import the styles

Nhập bảng định kiểu của SDK một lần trong bố cục gốc:

app/layout.tsx

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

Bạn chọn các phương thức đăng nhập mà người dùng sẽ thấy trong bảng điều khiển — xem Định cấu hình phương thức đăng nhập.

Cách nhanh để tạo nguyên mẫu

Chỉ muốn dùng thử cục bộ? Bỏ qua trình xử lý route và truyền trực tiếp khóa API cho trình cung cấp:

app/providers.tsx

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

Cách này đưa khóa vào gói mã trình duyệt, vì vậy chỉ dùng để kiểm thử cục bộ — hãy chuyển sang cách thiết lập trình xử lý route ở trên trước khi triển khai. Trong thời gian đó, hãy giới hạn khóa theo miền (xem Bảo mật khóa của bạn): khóa không thể truy cập ví hoặc tiền, nhưng nếu bị công khai, khóa vẫn có thể được dùng để tiêu hao tín dụng của bạn.

Các bước tiếp theo

Configuration

Các tùy chọn cấu hình và phương thức đăng nhập trên bảng điều khiển.

Using the wallet

Đọc trạng thái xác thực, ký, gửi và đọc lịch sử.

Bắt đầu

Truyền phát dữ liệu & lắng nghe sự kiện

API dữ liệu & RPC

Giao dịch

Gửi giao dịch

Ví dưới dạng dịch vụ

Quyền riêng tư

Tài nguyên

Bắt đầu nhanh với WaaS

Cài đặt

Thiết lập

Cách nhanh để tạo nguyên mẫu

Các bước tiếp theo

Configuration

Using the wallet

​Cài đặt

​Thiết lập

​Cách nhanh để tạo nguyên mẫu

​Các bước tiếp theo

Configuration

Using the wallet

Cài đặt

Thiết lập

Cách nhanh để tạo nguyên mẫu

Các bước tiếp theo