> ## Documentation Index
> Fetch the complete documentation index at: https://www.helius.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

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

> Установите SDK Helius wallet-kit и подключите встроенные кошельки с помощью одного провайдера

## Установка

Установите [`helius-wallet-kit`](https://www.npmjs.com/package/helius-wallet-kit) из npm (требуется Node.js 18 или более поздней версии):

```bash theme={"system"}
pnpm add helius-wallet-kit
```

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

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

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

## Настройка

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

<Steps>
  <Step title="Wrap your app in the provider">
    Добавьте `HeliusWalletProvider` рядом с корневым компонентом приложения внутри клиентского компонента. **Не указывайте API-ключ** — обработчик маршрута (следующий шаг) добавит его на стороне сервера. SDK автоматически определит идентификатор вашего проекта и URL Secure RPC без ключа.

    ```tsx app/providers.tsx theme={"system"}
    "use client";

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

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

  <Step title="Mount the route handler">
    Добавьте универсальный обработчик маршрута по адресу `/api/helius/[...path]`. Он хранит `HELIUS_API_KEY` **на стороне сервера** и проксирует инициализацию кошелька, RPC-запросы, отправку транзакций и регистрацию, поэтому ключ Helius никогда не попадает в браузер. Этот обработчик также обеспечивает [попадание транзакций с оптимизацией Sender](/docs/ru/sending-transactions/sender) и доступ к истории транзакций.

    ```ts app/api/helius/[...path]/route.ts theme={"system"}
    import { createHeliusRouteHandler } from "helius-wallet-kit/next";

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

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

  <Step title="Import the styles">
    Один раз импортируйте таблицу стилей SDK в корневом макете:

    ```tsx app/layout.tsx theme={"system"}
    import "helius-wallet-kit/ui/styles.css";
    ```
  </Step>
</Steps>

Выберите в панели управления способы входа, которые будут доступны вашим пользователям. См. раздел [Настройка способов входа](/docs/ru/waas/configuration#настройка-способов-входа).

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

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

```tsx app/providers.tsx theme={"system"}
<HeliusWalletProvider
  config={{ apiKey: process.env.NEXT_PUBLIC_HELIUS_API_KEY!, cluster: "devnet" }}
>
  {children}
</HeliusWalletProvider>
```

При этом ключ включается в браузерный пакет, поэтому такой вариант подходит **только для локального тестирования**. Перед развёртыванием перейдите на описанную выше настройку с обработчиком маршрута. Тем временем ограничьте использование ключа доменом (см. раздел [Защита ключа](/docs/ru/waas/securing-your-key)): ключ не может получить доступ к кошелькам или средствам, но общедоступный ключ всё равно можно использовать для расходования ваших кредитов.

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

<CardGroup cols={2}>
  <Card title="Configuration" icon="sliders" href="/docs/ru/waas/configuration">
    Параметры конфигурации и способы входа из панели управления.
  </Card>

  <Card title="Using the wallet" icon="wallet" href="/docs/ru/waas/using-the-wallet">
    Чтение состояния аутентификации и истории, подписание и отправка транзакций.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.