ConnectButton

使用及自訂 ConnectButton

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

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" />

完全隱藏鏈的 UI。

<ConnectButton chainStatus="none" />

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

隱藏餘額。

<ConnectButton showBalance={false} />

這些屬性也可以以自適應格式定義。

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

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

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

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