連接按鈕

使用和自訂連接按鈕

這是主要組件。它負責渲染連接/斷開按鈕，以及鏈切換用戶端。

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

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

注意：請確保您的應用程序被包裝在必要的提供者中。閱讀更多。

ConnectButton 組件提供多個屬性來自訂其外觀，包括切換不同元素的可見性。

Prop	Type	Default
`label`	`string`	`連接錢包`
`accountStatus`	`enum`	`full`
`chainStatus`	`enum`	`{ smallScreen: "icon", largeScreen: "full" }`
`showBalance`	`enum`	`{ smallScreen: false, largeScreen: true }`

注意：內建的 largeScreen 斷點為 768px。

這裡有一些不同方法來使用 accountStatus 屬性。

僅顯示帳戶的頭像。

<ConnectButton accountStatus="avatar" />

僅顯示帳戶的地址。

<ConnectButton accountStatus="address" />

這裡有一些不同的方法來使用 chainStatus 屬性。

僅顯示當前鏈的圖示。

<ConnectButton chainStatus="icon" />

僅顯示當前鏈的名稱。

<ConnectButton chainStatus="name" />

完全隱藏鏈用戶介面。

<ConnectButton chainStatus="none" />

使用 showBalance 屬性來隱藏/顯示餘額。

隱藏餘額。

<ConnectButton showBalance={false} />

這些屬性也可以定義為響應格式。

在小螢幕上，僅顯示帳戶圖示。但在大螢幕上，顯示圖示和地址。

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

在小螢幕上，隱藏餘額。但在大螢幕上，顯示它。

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