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

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

Використання та налаштування кнопки Підключення

Цей компонент є основним. Він відповідає за рендеринг кнопок підключення/відключення, а також 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" />

Приховати інтерфейс ланцюга повністю.

<ConnectButton chainStatus="none" />

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

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

<ConnectButton showBalance={false} />

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

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

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

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

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