BotãoConectar

BotãoConectar

Usando e customizando o BotãoConectar

Este é o componente principal. Ele é responsável por renderizar o botão de conectar/desconectar, bem como a interface de troca de cadeias.

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

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

Nota: Certifique-se de que seu aplicativo está envolto nos provedores necessários. Saiba mais.

O componente BotãoConectar expõe várias propriedades para customizar sua aparência, incluindo a alternância da visibilidade de diferentes elementos.

Nota: o breakpoint embutido para grandeTela é 768px.

Use a propriedade label para definir um texto personalizado para o BotãoConectar.

<ConnectButton label="Sign in" />

Aqui estão algumas maneiras diferentes de usar a propriedade statusConta.

Mostrar apenas o avatar da conta.

<ConnectButton accountStatus="avatar" />

Mostrar apenas o endereço da conta.

<ConnectButton accountStatus="address" />

Aqui estão algumas maneiras diferentes de usar a propriedade statusCadeia.

Mostrar apenas o ícone da cadeia atual.

<ConnectButton chainStatus="icon" />

Mostrar apenas o nome da cadeia atual.

<ConnectButton chainStatus="name" />

Ocultar totalmente a interface da cadeia.

<ConnectButton chainStatus="none" />

Use a propriedade mostrarSaldo para esconder/mostrar o saldo.

Esconder o saldo.

<ConnectButton showBalance={false} />

Essas propriedades também podem ser definidas em um formato responsivo.

Em telas pequenas, mostrar apenas o ícone da conta. Mas em telas grandes, mostrar ícone e endereço.

<ConnectButton
  accountStatus={{
    smallScreen: 'avatar',
    largeScreen: 'full',
  }}
/>

Em telas pequenas, esconder o saldo. Mas em telas grandes, mostrá-lo.

<ConnectButton
  showBalance={{
    smallScreen: false,
    largeScreen: true,
  }}
/>