ConnectButton

ConnectButton

ConnectButtonの使用とカスタマイズ

これは主要なコンポーネントです。 これは主要なコンポーネントです。 接続/切断ボタンのレンダリングやチェーンのスワップ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,
  }}
/>