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

# Démarrage rapide WaaS

> Installez le SDK Helius wallet-kit et connectez des portefeuilles intégrés avec un fournisseur

## Installation

Installez [`helius-wallet-kit`](https://www.npmjs.com/package/helius-wallet-kit) à partir de npm (Node.js 18+):

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

Dépendances homologues requises :

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

`next >= 14` est nécessaire pour la configuration de gestionnaire de route recommandée ci-dessous.

## Configuration

La configuration recommandée garde votre clé API Helius **côté serveur** — aucune clé Helius n'est envoyée au navigateur. Vous testez localement ? Passez directement au [raccourci de prototypage](#raccourci-de-prototypage).

<Steps>
  <Step title="Enveloppez votre application dans le fournisseur">
    Ajoutez `HeliusWalletProvider` près de la racine de votre application dans un composant client. **Omettez la clé API** — le gestionnaire de route (étape suivante) la fournit côté serveur. Le SDK résout automatiquement votre id de projet et les URLs RPC sécurisées sans clé.

    ```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="Montez le gestionnaire de route">
    Ajoutez le gestionnaire de route générique à `/api/helius/[...path]`. Il contient `HELIUS_API_KEY` **côté serveur** et relaie l'amorçage du portefeuille, le RPC, les envois et l'enregistrement — ainsi, aucune clé Helius n'atteint jamais le navigateur. Cela vous permet d'avoir [Landing optimisé pour l'expéditeur](/docs/fr/sending-transactions/sender) et un historique des transactions.

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

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

    Réglez `HELIUS_API_KEY` comme une variable d'environnement **serveur** (non `NEXT_PUBLIC_`); le gestionnaire l'injecte dans les requêtes transférées.
  </Step>

  <Step title="Importez les styles">
    Importez la feuille de style du SDK une fois, dans la mise en page racine :

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

Vous choisissez les méthodes de connexion que vos utilisateurs voient dans le tableau de bord — voir [Configurer les méthodes de connexion](/docs/fr/waas/configuration#configurer-les-méthodes-de-connexion).

## Raccourci de prototypage

Vous essayez juste localement ? Ignorez le gestionnaire de route et passez directement votre clé API au fournisseur :

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

Cela envoie la clé dans votre bundle de navigateur, donc c'est uniquement pour **tests locaux** — passez à la configuration du gestionnaire de route ci-dessus avant de déployer. Limitez la clé au domaine en attendant (voir [Sécuriser votre clé](/docs/fr/waas/securing-your-key)) : elle ne peut toucher ni les portefeuilles ni les fonds, mais une clé publique peut toujours être utilisée pour dépenser vos crédits.

## Prochaines étapes

<CardGroup cols={2}>
  <Card title="Configuration" icon="sliders" href="/docs/fr/waas/configuration">
    Options de configuration et méthodes de connexion au tableau de bord.
  </Card>

  <Card title="Utiliser le portefeuille" icon="wallet" href="/docs/fr/waas/using-the-wallet">
    Lire l'état d'authentification, signer, envoyer et lire l'historique.
  </Card>
</CardGroup>