ConnectButton

Использование и настройка ConnectButton

Это основной компонент. Он отвечает за рендеринг кнопки подключения/отключения, а также интерфейса смены сети.

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

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

Примечание: убедитесь, что ваше приложение обернуто в необходимые провайдеры. Подробнее.

Компонент ConnectButton предоставляет несколько свойств для настройки его внешнего вида, включая переключение видимости различных элементов.

Prop	Type	Default
`label`	`string`	`Подключить кошелек`
`accountStatus`	`enum`	`полный`
`chainStatus`	`enum`	`{ smallScreen: "иконка", largeScreen: "полный" }`
`showBalance`	`enum`	`{ smallScreen: false, largeScreen: true }`

Примечание: встроенная точка останова largeScreen - 768px.

Используйте свойство label для установки текста настраиваемой кнопки ConnectButton.

<ConnectButton label="Sign in" />

Вот несколько способов использования свойства 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,
  }}
/>