連接按鈕

使用及自定義連接按鈕

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

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,
  }}
/>