> ## 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.

# Bắt đầu nhanh với WaaS

> Cài đặt SDK Helius wallet-kit và kết nối ví nhúng với một trình cung cấp

## Cài đặt

Cài đặt [`helius-wallet-kit`](https://www.npmjs.com/package/helius-wallet-kit) từ npm (Node.js 18+):

```bash theme={"system"}
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](#cách-nhanh-để-tạo-nguyên-mẫu).

<Steps>
  <Step title="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.

    ```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">
    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](/docs/vi/sending-transactions/sender) và lịch sử giao dịch.

    ```ts app/api/helius/[...path]/route.ts theme={"system"}
    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.
  </Step>

  <Step title="Import the styles">
    Nhập bảng định kiểu của SDK một lần trong bố cục gốc:

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

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](/docs/vi/waas/configuration#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:

```tsx app/providers.tsx theme={"system"}
<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](/docs/vi/waas/securing-your-key)): 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

<CardGroup cols={2}>
  <Card title="Configuration" icon="sliders" href="/docs/vi/waas/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.
  </Card>

  <Card title="Using the wallet" icon="wallet" href="/docs/vi/waas/using-the-wallet">
    Đọc trạng thái xác thực, ký, gửi và đọc lịch sử.
  </Card>
</CardGroup>