Быстрый старт WaaS

Установка

Установите helius-wallet-kit из npm (требуется Node.js 18 или более поздней версии):

pnpm add helius-wallet-kit

Обязательные peer-зависимости:

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

next >= 14 необходим для рекомендуемой ниже настройки обработчика маршрута.

Настройка

При рекомендуемой настройке ваш API-ключ Helius хранится на стороне сервера и не передаётся в браузер. Просто тестируете локально? Перейдите к упрощённой настройке для прототипирования.

Wrap your app in the provider

Добавьте HeliusWalletProvider рядом с корневым компонентом приложения внутри клиентского компонента. Не указывайте API-ключ — обработчик маршрута (следующий шаг) добавит его на стороне сервера. SDK автоматически определит идентификатор вашего проекта и URL Secure RPC без ключа.

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

Добавьте универсальный обработчик маршрута по адресу /api/helius/[...path]. Он хранит HELIUS_API_KEY на стороне сервера и проксирует инициализацию кошелька, RPC-запросы, отправку транзакций и регистрацию, поэтому ключ Helius никогда не попадает в браузер. Этот обработчик также обеспечивает попадание транзакций с оптимизацией Sender и доступ к истории транзакций.

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

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

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

Задайте HELIUS_API_KEY как серверную переменную окружения (не NEXT_PUBLIC_). Обработчик добавит её в перенаправляемые запросы.

Import the styles

Один раз импортируйте таблицу стилей SDK в корневом макете:

app/layout.tsx

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

Выберите в панели управления способы входа, которые будут доступны вашим пользователям. См. раздел Настройка способов входа.

Упрощённая настройка для прототипирования

Просто тестируете локально? Не используйте обработчик маршрута и передайте API-ключ непосредственно провайдеру:

app/providers.tsx

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

При этом ключ включается в браузерный пакет, поэтому такой вариант подходит только для локального тестирования. Перед развёртыванием перейдите на описанную выше настройку с обработчиком маршрута. Тем временем ограничьте использование ключа доменом (см. раздел Защита ключа): ключ не может получить доступ к кошелькам или средствам, но общедоступный ключ всё равно можно использовать для расходования ваших кредитов.

Дальнейшие действия

Configuration

Параметры конфигурации и способы входа из панели управления.

Using the wallet

Чтение состояния аутентификации и истории, подписание и отправка транзакций.

Начало работы

Потоковая передача данных и отслеживание событий

API данных и RPC

Торговля

Отправка транзакций

Кошелек как услуга

Конфиденциальность

Ресурсы

Быстрый старт WaaS

Установка

Настройка

Упрощённая настройка для прототипирования

Дальнейшие действия

Configuration

Using the wallet

​Установка

​Настройка

​Упрощённая настройка для прототипирования

​Дальнейшие действия

Configuration

Using the wallet

Установка

Настройка

Упрощённая настройка для прототипирования

Дальнейшие действия