TombolKoneksi

TombolKoneksi

Menggunakan dan menyesuaikan TombolKoneksi

Ini adalah komponen utama. Ini bertanggung jawab untuk merender tombol sambung/pisah, serta UI untuk mengganti rantai.

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

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

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

Komponen TombolKoneksi memiliki beberapa properti untuk menyesuaikan tampilannya, termasuk menyesuaikan visibilitas elemen yang berbeda.

Catatan: breakpoint largeScreen bawaan adalah 768px.

Gunakan properti label untuk mengatur teks TombolKoneksi kustom.

<ConnectButton label="Sign in" />

Berikut adalah beberapa cara berbeda Anda dapat menggunakan properti accountStatus.

Hanya tampilkan avatar akun.

<ConnectButton accountStatus="avatar" />

Hanya tampilkan alamat akun.

<ConnectButton accountStatus="address" />

Berikut adalah beberapa cara berbeda Anda dapat menggunakan properti chainStatus.

Hanya tampilkan ikon rantai saat ini.

<ConnectButton chainStatus="icon" />

Hanya tampilkan nama rantai saat ini.

<ConnectButton chainStatus="name" />

Sembunyikan UI rantai sepenuhnya.

<ConnectButton chainStatus="none" />

Gunakan properti showBalance untuk menyembunyikan/menampilkan saldo.

Sembunyikan saldo.

<ConnectButton showBalance={false} />

Properti ini juga dapat didefinisikan dalam format responsif.

Pada layar kecil, hanya tampilkan ikon akun. Namun di layar besar, tampilkan ikon dan alamat.

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

Pada layar kecil, sembunyikan saldo. Namun di layar besar, tampilkan.

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