ConnectButton

使用和自定义 ConnectButton

这是主要的组件。它负责渲染连接/断开按钮，以及链切换 UI。

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

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

注意：确保您的应用程序被必要的提供器包裹。阅读更多。

ConnectButton 组件公开了一些 props 来自定义其外观，包括切换不同元素的可见性。

Prop	Type	Default
`label`	`string`	`Connect Wallet`
`accountStatus`	`enum`	`full`
`chainStatus`	`enum`	`{ smallScreen: "icon", largeScreen: "full" }`
`showBalance`	`enum`	`{ smallScreen: false, largeScreen: true }`

注意：内置的 largeScreen 断点是 768px。

你可以使用几种不同的方式使用 accountStatus prop。

仅显示账户的头像。

<ConnectButton accountStatus="avatar" />

仅显示账户的地址。

<ConnectButton accountStatus="address" />

你可以使用几种不同的方式使用 chainStatus prop。

仅显示当前链的图标。

<ConnectButton chainStatus="icon" />

仅显示当前链的名称。

<ConnectButton chainStatus="name" />

完全隐藏链的 UI。

<ConnectButton chainStatus="none" />

使用 showBalance prop 隐藏/显示余额。

隐藏余额。

<ConnectButton showBalance={false} />

这些 prop 也可以定义为响应式格式。

在小屏幕上，只显示账户图标。但在大屏幕上，显示图标和地址。

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

在小屏幕上，隐藏余额。但在大屏幕上，显示它。

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