Instalação

Instalação

Prepare-se e comece a usar o RainbowKit

Você pode criar rapidamente um novo aplicativo RainbowKit + wagmi + Next.js com um dos seguintes comandos, usando o gerenciador de pacotes de sua escolha:

npm init @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit

Isso solicitará o nome do projeto, gerará um novo diretório contendo um projeto modelo e instalará todas as dependências necessárias.

Alternativamente, você pode integrar o RainbowKit manualmente em seu projeto existente.

Instale o RainbowKit e suas dependências pares, wagmi, viem, e @tanstack/react-query.

npm install @rainbow-me/rainbowkit wagmi [email protected] @tanstack/react-query

Nota: RainbowKit é uma biblioteca de React.

Importe RainbowKit, Wagmi e TanStack Query.

import '@rainbow-me/rainbowkit/styles.css';

import {
  getDefaultConfig,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import {
  mainnet,
  polygon,
  optimism,
  arbitrum,
  base,
} from 'wagmi/chains';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

Configure as cadeias desejadas e gere os conectores necessários. Você também precisará configurar um wagmi. Se seu dApp usar renderização do lado do servidor (SSR), certifique-se de definir ssr como true.

Nota: Todo dApp que depende do WalletConnect agora precisa obter um projectId do WalletConnect Cloud. Isso é absolutamente gratuito e leva apenas alguns minutos.

...
import { getDefaultConfig } from '@rainbow-me/rainbowkit';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, polygon, optimism, arbitrum, base],
  ssr: true, // If your dApp uses server side rendering (SSR)
});

Envolva seu aplicativo com RainbowKitProvider, WagmiProvider, e QueryClientProvider.

const queryClient = new QueryClient();

const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {/* Your App */}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

Então, no seu aplicativo, importe e renderize o componente ConnectButton.

import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};

RainbowKit agora irá lidar com a seleção de carteiras dos seus usuários, exibir informações de carteira/transação e gerenciar a troca de rede/carteira.

Algumas ferramentas de build exigem configuração adicional.

Ao usar Remix, você deve preencher os módulos buffer, events e http. Consulte a configuração do Remix abaixo ou nosso projeto exemplo com Remix.

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  browserNodeBuiltinsPolyfill: {
    modules: { buffer: true, events: true, http: true },
  },
};

Por padrão, seu dApp usa provedores RPC públicos para cada cadeia para buscar saldos, resolver nomes ENS e mais. Isso pode frequentemente causar problemas de confiabilidade para seus usuários, já que os nós públicos têm limite de taxa. Você deve, ao invés disso, comprar acesso a um provedor de RPC por meio de serviços como Alchemy ou QuickNode, e definir seus próprios Transports no Wagmi. Isso pode ser alcançado adicionando o parâmetro transports em getDefaultConfig ou diretamente através do createConfig do Wagmi.

Um Transporte é a camada intermediária de rede que lida com o envio de solicitações JSON-RPC para o provedor de nó Ethereum (como Alchemy, Infura, etc).

Exemplo com um transporte http

import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import { http } from 'wagmi';
import { mainnet, sepolia } from 'wagmi/chains';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/...'),
    [sepolia.id]: http('https://eth-sepolia.g.alchemy.com/v2/...'),
  },
});

Para mais detalhes, veja os documentos de transporte do wagmi.

Agora que seus usuários podem conectar suas carteiras, você pode começar a desenvolver o restante do seu aplicativo usando o wagmi.

Envie transações, interaja com contratos, resolva detalhes ENS e muito mais com a abrangente suíte de React Hooks do wagmi.

Para mais detalhes, veja a documentação do wagmi.

Para ver alguns exemplos em execução do RainbowKit, ou até usá-los para criar automaticamente um novo projeto, veja os exemplos oficiais.

Para experimentar o RainbowKit diretamente em seu navegador, confira os links no CodeSandbox abaixo:

• com Create React App
• com Next.js
• com Next.js App Router
• com Remix
• com Vite
• com React Router