ConectarBotón

ConectarBotón

Usar y personalizar el Botón de Conexión

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

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

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

Nota: Asegúrate de que tu aplicación esté envuelta en los proveedores necesarios. Leer más.

El componente ConnectButton expone varios props para personalizar su apariencia, incluyendo la visibilidad de diferentes elementos.

Nota: el punto de quiebre largeScreen incorporado es 768px.

Usa el prop label para establecer un texto personalizado para el ConnectButton.

<ConnectButton label="Sign in" />

Aquí hay algunas formas diferentes de usar el 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 formas diferentes de usar el prop chainStatus.

Mostrar solo el icono de la cadena actual.

<ConnectButton chainStatus="icon" />

Mostrar solo el nombre de la cadena actual.

<ConnectButton chainStatus="name" />

Ocultar completamente la interfaz de usuario de la cadena.

<ConnectButton chainStatus="none" />

Usa el prop showBalance para ocultar/mostrar el saldo.

Ocultar el saldo.

<ConnectButton showBalance={false} />

Estos props también se pueden definir en un formato responsivo.

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

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

En pantallas pequeñas, oculta el saldo. Pero en pantallas grandes, muéstralo.

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