ConnectButton

ConnectButton

Utilisation et personnalisation du ConnectButton

Ceci est le composant principal. Il est responsable du rendu du bouton de connexion/déconnexion, ainsi que de l'interface d'échange de chaînes.

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

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

Remarque: Assurez-vous que votre application est enveloppée par les fournisseurs nécessaires. En savoir plus.

Le composant ConnectButton expose plusieurs propriétés pour personnaliser son apparence, y compris la possibilité d'activer ou de désactiver la visibilité de différents éléments.

Remarque: le point de rupture intégré largeScreen est de 768px.

Utilisez la propriété label pour définir un texte personnalisé du ConnectButton.

<ConnectButton label="Sign in" />

Voici quelques différentes façons d'utiliser la propriété accountStatus.

Afficher uniquement l'avatar du compte.

<ConnectButton accountStatus="avatar" />

Afficher uniquement l'adresse du compte.

<ConnectButton accountStatus="address" />

Voici quelques différentes façons d'utiliser la propriété chainStatus.

Afficher uniquement l'icône de la chaîne actuelle.

<ConnectButton chainStatus="icon" />

Afficher uniquement le nom de la chaîne actuelle.

<ConnectButton chainStatus="name" />

Masquer complètement l'interface de la chaîne.

<ConnectButton chainStatus="none" />

Utilisez la propriété showBalance pour masquer/afficher le solde.

Masquer le solde.

<ConnectButton showBalance={false} />

Ces propriétés peuvent également être définies dans un format responsive.

Sur les petits écrans, affichez uniquement l'icône du compte. Mais sur les grands écrans, affichez l'icône et l'adresse.

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

Sur les petits écrans, masquez le solde. Mais sur les grands écrans, affichez-le.

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