ConnectButton

ConnectButton

Verwendung und Anpassung des ConnectButtons

Dies ist die Hauptkomponente. Sie ist für das Rendern des Verbindungs-/Trennungs-Buttons verantwortlich sowie für die Chain-Swap-Benutzeroberfläche.

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

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

Hinweis: Stellen Sie sicher, dass Ihre App in die erforderlichen Provider eingebettet ist. Weiterlesen.

Die ConnectButton Komponente bietet mehrere Eigenschaften zur Anpassung ihres Erscheinungsbildes, einschließlich des Umschaltens der Sichtbarkeit verschiedener Elemente.

Hinweis: Der eingebaute largeScreen-Breakpoint ist 768px.

Verwenden Sie die label Eigenschaft, um einen benutzerdefinierten ConnectButton-Text festzulegen.

<ConnectButton label="Sign in" />

Hier sind einige verschiedene Möglichkeiten, wie Sie die accountStatus-Eigenschaft 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 chainStatus-Eigenschaft verwenden können.

Nur das Icon der aktuellen Chain anzeigen.

<ConnectButton chainStatus="icon" />

Nur den Namen der aktuellen Chain anzeigen.

<ConnectButton chainStatus="name" />

Die Chain-Benutzeroberfläche vollständig ausblenden.

<ConnectButton chainStatus="none" />

Verwenden Sie die showBalance-Eigenschaft, um das Guthaben ein- oder auszublenden.

Das Guthaben ausblenden.

<ConnectButton showBalance={false} />

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

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

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

Auf kleinen Bildschirmen das Guthaben ausblenden. Auf großen Bildschirmen anzeigen.

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