ConnectButton

ConnectButton

Menggunakan dan menyesuaikan ConnectButton

Ini adalah komponen utama. Bertanggung jawab untuk menampilkan tombol koneksi / pemutusan, serta UI pergantian rantai.

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

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

Catatan: Pastikan aplikasi Anda dibungkus dalam penyedia yang diperlukan. Baca lebih lanjut.

Komponen ConnectButton menyediakan beberapa props untuk menyesuaikan tampilannya, termasuk mengaktifkan / menonaktifkan visibilitas elemen yang berbeda.

Catatan: breakpoint largeScreen bawaan adalah 768px.

Gunakan prop label untuk mengatur teks ConnectButton khusus.

<ConnectButton label="Sign in" />

Berikut beberapa cara berbeda yang bisa Anda gunakan pada prop accountStatus.

Hanya menampilkan avatar akun.

<ConnectButton accountStatus="avatar" />

Hanya menampilkan alamat akun.

<ConnectButton accountStatus="address" />

Berikut beberapa cara berbeda yang bisa Anda gunakan pada prop chainStatus.

Hanya menampilkan ikon rantai saat ini.

<ConnectButton chainStatus="icon" />

Hanya menampilkan nama rantai saat ini.

<ConnectButton chainStatus="name" />

Menyembunyikan UI rantai sepenuhnya.

<ConnectButton chainStatus="none" />

Gunakan prop showBalance untuk menyembunyikan / menampilkan saldo.

Sembunyikan saldo.

<ConnectButton showBalance={false} />

Props ini juga dapat didefinisikan dalam format responsif.

Pada layar kecil, hanya menampilkan ikon akun. Tetapi pada layar besar, menampilkan ikon dan alamat.

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

Pada layar kecil, sembunyikan saldo. Tetapi pada layar besar, tampilkan.

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