接続ボタン

接続ボタン

接続ボタンの使用とカスタマイズ

これは主要なコンポーネントです。接続/切断ボタンのレンダリングとチェーンスワッピングUIを担当します。

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

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

注意: アプリが必要なプロバイダーでラップされていることを確認してください。詳細を読む.

ConnectButtonコンポーネントは、外観をカスタマイズするためのいくつかのプロパティを公開しており、異なる要素の表示を切り替えることができます。

注意: 組み込みlargeScreenのブレークポイントは768pxです。

labelプロパティを使用してカスタムConnectButtonテキストを設定します。

<ConnectButton label="Sign in" />

accountStatusプロパティを使用するさまざまな方法を紹介します。

アカウントのアバターのみを表示。

<ConnectButton accountStatus="avatar" />

アカウントのアドレスのみを表示。

<ConnectButton accountStatus="address" />

chainStatusプロパティを使用するさまざまな方法を紹介します。

現在のチェーンのアイコンのみを表示。

<ConnectButton chainStatus="icon" />

現在のチェーンの名前のみを表示。

<ConnectButton chainStatus="name" />

チェーンUIを完全に非表示。

<ConnectButton chainStatus="none" />

showBalanceプロパティを使用して残高を表示/非表示にします。

残高を非表示。

<ConnectButton showBalance={false} />

これらのプロパティもレスポンシブ形式で定義できます。

小さな画面ではアカウントアイコンのみを表示しますが、大きな画面ではアイコンとアドレスを表示します。

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

小さな画面では残高を非表示にしますが、大きな画面では表示します。

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