ConnectButton

ConnectButton

Usando y personalizando el ConnectButton

Este es el componente principal. Es responsable de renderizar el botón de conectar/desconectar, así como la interfaz de usuario para cambiar de cadena.

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

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

Nota: Asegúrese de que su aplicación está envuelta en los proveedores necesarios. Lea más.

El componente ConnectButton expone varias props para personalizar su apariencia, incluyendo el cambio de visibilidad de diferentes elementos.

Nota: el punto de interrupción largeScreen incorporado es 768px.

Utilice la prop label para establecer un texto personalizado para ConnectButton.

<ConnectButton label="Sign in" />

Aquí hay algunas maneras diferentes en las que puede usar la prop accountStatus.

Mostrar solo el avatar de la cuenta.

<ConnectButton accountStatus="avatar" />

Mostrar solo la dirección de la cuenta.

<ConnectButton accountStatus="address" />

Aquí hay algunas maneras diferentes en las que puede usar la prop chainStatus.

Mostrar solo el ícono de la cadena actual.

<ConnectButton chainStatus="icon" />

Mostrar solo el nombre de la cadena actual.

<ConnectButton chainStatus="name" />

Ocultar completamente la interfaz de la cadena.

<ConnectButton chainStatus="none" />

Use la prop showBalance para ocultar/mostrar el saldo.

Ocultar el saldo.

<ConnectButton showBalance={false} />

Estas props también pueden ser definidas en un formato responsivo.

En pantallas pequeñas, mostrar solo el icono de la cuenta. Pero en pantallas grandes, mostrar el icono y la dirección.

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

En pantallas pequeñas, ocultar el saldo. Pero en pantallas grandes, mostrarlo.

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