Instalação

Instalação

Comece a trabalhar com o RainbowKit

Você pode criar 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 irá solicitar o nome do projeto, gerar um novo diretório contendo um projeto boilerplate e instalar todas as dependências necessárias.

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

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

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

Nota: RainbowKit é uma biblioteca React.

Importe RainbowKit e wagmi.

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 suas cadeias desejadas e gere os conectores necessários. Você também precisará configurar um wagmi config. Se o seu dApp usa renderização no 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 é totalmente grátis 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 sua aplicação 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 />;
};

Agora, o RainbowKit vai gerenciar a seleção de carteira do seu usuário, exibir informações de carteira/transação e lidar com a troca de rede/carteira.

Algumas ferramentas de build podem necessitar de configuração adicional.

Ao usar o Remix, você deve polyfill dos módulos buffer, events e http. Consulte a configuração do Remix abaixo, ou nosso exemplo de projeto 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 muitas vezes 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, adquirir acesso a um provedor RPC por meio de serviços como Alchemy ou QuickNode, e definir seus próprios Transportes no Wagmi. Isso pode ser alcançado adicionando o parâmetro transports em getDefaultConfig ou diretamente via 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 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 a documentação wagmi.

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

Envie transações, interaja com contratos, resolva detalhes da ENS e muito mais com o abrangente conjunto de React Hooks do wagmi.

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

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

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

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