ConnectButton

ConnectButton

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

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

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

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

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

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

Примечание: встроенный 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,
  }}
/>