Inicio rápido de WaaS

Instalación

Instala helius-wallet-kit desde npm (Node.js 18 o posterior):

pnpm add helius-wallet-kit

Dependencias peer requeridas:

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

next >= 14 es necesario para la configuración recomendada del controlador de rutas que aparece a continuación.

Configuración

La configuración recomendada mantiene tu clave de API de Helius del lado del servidor; ninguna clave de Helius se envía al navegador. ¿Solo estás haciendo pruebas locales? Ve al atajo para prototipos.

Wrap your app in the provider

Agrega HeliusWalletProvider cerca de la raíz de tu aplicación, en un componente cliente. Omite la clave de API: el controlador de rutas (siguiente paso) la proporciona del lado del servidor. El SDK obtiene automáticamente el identificador de tu proyecto y las URL de Secure RPC sin clave.

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

Agrega el controlador de rutas comodín en /api/helius/[...path]. Este mantiene HELIUS_API_KEY del lado del servidor y actúa como proxy para la inicialización de la billetera, RPC, los envíos y el registro, de modo que ninguna clave de Helius llegue al navegador. Esto también te proporciona envíos optimizados con Sender y el historial de transacciones.

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

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

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

Define HELIUS_API_KEY como una variable de entorno del servidor (no NEXT_PUBLIC_); el controlador la inyecta en las solicitudes reenviadas.

Import the styles

Importa una vez la hoja de estilos del SDK en tu diseño raíz:

app/layout.tsx

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

Tú eliges en el panel qué métodos de inicio de sesión ven tus usuarios. Consulta Configurar métodos de inicio de sesión.

Atajo para prototipos

¿Solo quieres probarlo localmente? Omite el controlador de rutas y pasa tu clave de API directamente al proveedor:

app/providers.tsx

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

Esto incluye la clave en el paquete del navegador, por lo que es solo para pruebas locales. Cambia a la configuración del controlador de rutas anterior antes de implementar la aplicación. Mientras tanto, restringe la clave por dominio (consulta Proteger tu clave): no puede acceder a billeteras ni fondos, pero una clave pública todavía puede utilizarse para gastar tus créditos.

Primeros pasos

Streaming de datos y escucha de eventos

API de datos y RPC

Trading

Envío de transacciones

Billetera como servicio

Privacidad

Recursos

Inicio rápido de WaaS

Instalación

Configuración

Atajo para prototipos

Siguientes pasos

Configuration

Using the wallet

​Instalación

​Configuración

​Atajo para prototipos

​Siguientes pasos

Configuration

Using the wallet

Instalación

Configuración

Atajo para prototipos

Siguientes pasos