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

# Inicio rápido de WaaS

> Instala el SDK wallet-kit de Helius y conecta billeteras integradas con un solo proveedor

## Instalación

Instala [`helius-wallet-kit`](https://www.npmjs.com/package/helius-wallet-kit) desde npm (Node.js 18 o posterior):

```bash theme={"system"}
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](#atajo-para-prototipos).

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

    ```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">
    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](/docs/es/sending-transactions/sender) y el historial de transacciones.

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

  <Step title="Import the styles">
    Importa una vez la hoja de estilos del SDK en tu diseño raíz:

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

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

```tsx app/providers.tsx theme={"system"}
<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](/docs/es/waas/securing-your-key)): no puede acceder a billeteras ni fondos, pero una clave pública todavía puede utilizarse para gastar tus créditos.

## Siguientes pasos

<CardGroup cols={2}>
  <Card title="Configuration" icon="sliders" href="/docs/es/waas/configuration">
    Opciones de configuración y métodos de inicio de sesión del panel.
  </Card>

  <Card title="Using the wallet" icon="wallet" href="/docs/es/waas/using-the-wallet">
    Consulta el estado de autenticación, firma, envía y consulta el historial.
  </Card>
</CardGroup>