WaaS Quickstart

Instalação

Instale helius-wallet-kit do npm (Node.js 18+):

pnpm add helius-wallet-kit

Dependências peer obrigatórias:

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

next >= 14 é necessário para a configuração recomendada do manipulador de rotas abaixo.

Configuração

A configuração recomendada mantém sua chave de API Helius do lado do servidor — nenhuma chave Helius é enviada para o navegador. Apenas testando localmente? Vá para o atalho de prototipagem.

Envolva seu aplicativo no provedor

Adicione HeliusWalletProvider próximo à raiz do seu aplicativo em um componente cliente. Omitir a chave de API — o manipulador de rotas (próximo passo) a fornece do lado do servidor. O SDK resolve automaticamente seu ID de projeto e URLs Secure RPC sem chave.

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>
  );
}

Monte o manipulador de rotas

Adicione o manipulador de rota genérico em /api/helius/[...path]. Ele mantém HELIUS_API_KEY do lado do servidor e faz proxies de bootstrap da carteira, RPC, envios e registro — portanto, nenhuma chave Helius chega ao navegador. Isso também lhe oferece página otimizada para o remetente e histórico de transações.

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

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

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

Defina HELIUS_API_KEY como uma variável de ambiente do servidor (não NEXT_PUBLIC_); o manipulador a injeta nas solicitações encaminhadas.

Importe os estilos

Importe a folha de estilos do SDK uma vez, no layout raiz:

app/layout.tsx

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

Você escolhe quais métodos de login seus usuários veem no dashboard — veja Configurar métodos de login.

Atalho de prototipagem

Apenas testando localmente? Pule o manipulador de rotas e passe sua chave de API diretamente para o provedor:

app/providers.tsx

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

Isso envia a chave no pacote do navegador, então é apenas para testes locais — mude para a configuração do manipulador de rotas acima antes de implantar. Restrinja a chave por domínio nesse meio tempo (veja Segurando sua chave): ela não pode tocar carteiras ou fundos, mas uma chave pública ainda pode ser usada para gastar seus créditos.

Primeiros Passos

Transmissão de Dados e Audição de Eventos

APIs de Dados & RPCs

Negociação

Enviando Transações

Carteira como Serviço

Privacidade

Recursos

Instalação

Configuração

Atalho de prototipagem

Próximos passos

Configuração

Usando a carteira

​Instalação

​Configuração

​Atalho de prototipagem

​Próximos passos

Configuração

Usando a carteira

Instalação

Configuração

Atalho de prototipagem

Próximos passos