BotãoConectar

BotãoConectar

Usando e personalizando o BotãoConectar

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

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

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

Nota: Certifique-se de que seu aplicativo esteja envolvido nos provedores necessários. Leia mais.

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

Nota: o ponto de interrupção largeScreen incorporado é 768px.

Use a propriedade label para definir um texto personalizado para o ConnectButton.

<ConnectButton label="Sign in" />

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

Mostre apenas o avatar da conta.

<ConnectButton accountStatus="avatar" />

Mostre apenas o endereço da conta.

<ConnectButton accountStatus="address" />

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

Mostre apenas o ícone da cadeia atual.

<ConnectButton chainStatus="icon" />

Mostre apenas o nome da cadeia atual.

<ConnectButton chainStatus="name" />

Oculte totalmente a interface da cadeia.

<ConnectButton chainStatus="none" />

Use a propriedade showBalance para ocultar/mostrar o saldo.

Ocultar o saldo.

<ConnectButton showBalance={false} />

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

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

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

Em telas pequenas, oculte o saldo. Mas em telas grandes, mostre-o.

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