Кнопка подключения

Кнопка подключения

Использование и настройка кнопки подключения

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

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