ConnectButton

ConnectButton

Verwendung und Anpassung des ConnectButton

Dies ist die Hauptkomponente. Sie ist verantwortlich für das Rendern des Verbindungs-/Trennungsknopfes sowie der Kettenwechsel-UI.

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

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

Hinweis: Stellen Sie sicher, dass Ihre App in die erforderlichen Provider eingebunden ist. Mehr erfahren.

Die ConnectButton-Komponente bietet mehrere Requisiten, um ihr Erscheinungsbild anzupassen, einschließlich des Umschaltens der Sichtbarkeit verschiedener Elemente.

Hinweis: Der eingebaute largeScreen-Breakpunkt ist 768px.

Verwenden Sie die label-Requisite, um einen benutzerdefinierten Text für den ConnectButton festzulegen.

<ConnectButton label="Sign in" />

Hier sind einige verschiedene Möglichkeiten, wie Sie die Requisite accountStatus verwenden können.

Nur das Avatar des Kontos anzeigen.

<ConnectButton accountStatus="avatar" />

Nur die Adresse des Kontos anzeigen.

<ConnectButton accountStatus="address" />

Hier sind einige verschiedene Möglichkeiten, wie Sie die Requisite chainStatus verwenden können.

Nur das aktuelle Ketten-Icon anzeigen.

<ConnectButton chainStatus="icon" />

Nur den Namen der aktuellen Kette anzeigen.

<ConnectButton chainStatus="name" />

Die Ketten-UI vollständig ausblenden.

<ConnectButton chainStatus="none" />

Verwenden Sie die Requisite showBalance, um das Guthaben auszublenden/anzuzeigen.

Das Guthaben ausblenden.

<ConnectButton showBalance={false} />

Diese Requisiten können auch in einem responsiven Format definiert werden.

Auf kleinen Bildschirmen nur das Konto-Icon anzeigen. Aber auf großen Bildschirmen Icon und Adresse anzeigen.

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

Auf kleinen Bildschirmen Guthaben ausblenden. Aber auf großen Bildschirmen anzeigen.

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