ConnectButton

ConnectButton

Використання та налаштування ConnectButton

Це головний компонент. Він відповідає за відображення кнопки підключення/відключення, а також UI для зміни ланцюжка.

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" />

Приховайте UI ланцюжка повністю.

<ConnectButton chainStatus="none" />

Використовуйте властивість showBalance для приховування/показу балансу.

Приховати баланс.

<ConnectButton showBalance={false} />

Ці властивості також можна визначити в адаптивному форматі.

На малих екранах показуйте лише значок облікового запису. А на великих екранах показуйте як значок, так і адресу.

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

На малих екранах приховайте баланс. А на великих екранах показуйте його.

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