<WalletWidget>

<WalletWidget> adalah komponen React yang bertanggung jawab me-render widget wallet.

<WalletWidget> harus dirender di dalam <WalletProvider>.

Contoh

import { WalletWidget } from '@money-sdk/react'

function Layout() {
  return (
    <header>
      <WalletWidget theme={{ variant: 'dark' }} size="large" shape="squared" />
    </header>
  )
}

INFO

Widget tidak terlihat sampai pengguna menghubungkan wallet — ia mengembalikan null ketika terputus. Letakkan di container yang selalu ter-mount (misalnya root layout Anda) dan render tombol connect Anda sendiri di sampingnya.

Referensi

props.theme

Sesuaikan tema widget wallet dengan mengoper objek yang memiliki atribut berikut:

Atribut	Deskripsi	Default	Nilai
variant	Skin untuk widget wallet yang terbuka.	'glow'	'dark' | 'flat' | 'glow'
colors.accentColor	Warna aksen untuk widget wallet. Menyetel ini akan mengaktifkan mode monokromatik, menghilangkan warna lain yang bersaing (mis. ikon token).	undefined	Semua string warna CSS yang valid.
colors.collapsed.accentColor	Warna aksen untuk widget wallet yang terlipat. Fallback ke colors.accentColor jika itu didefinisikan.	undefined	Semua string warna CSS yang valid.
colors.collapsed.backgroundColor	Warna background untuk widget wallet yang terlipat.	undefined	Semua string warna CSS yang valid.

Referensi var(...) CSS diresolusi secara eager sebelum diteruskan ke iframe, sehingga Anda dapat mereferensikan design token Anda sendiri:

<WalletWidget
  theme={{
    variant: 'glow',
    colors: { accentColor: 'var(--brand-accent)' },
  }}
/>

props.size

Pilih di antara empat ukuran berbeda untuk widget wallet yang terlipat: small, medium, large, dan huge.

Default-nya 'medium'.

props.shape

Pilih di antara dua bentuk berbeda untuk widget wallet yang terlipat: rounded dan squared.

Default-nya 'rounded'.

props.compact

Aktifkan mode compact. Mode ini adalah versi mungil dari widget wallet terlipat yang hanya berisi avatar.

Default-nya false.

props.noAutoCompact

Mencegah widget wallet beralih ke mode compact pada layar kecil.

Default-nya false.

props.smallBreakpoint

Mendefinisikan breakpoint, dalam piksel, yang digunakan untuk mengoptimalkan widget wallet untuk layar kecil.

Ketika lebar viewport di bawah angka ini, widget wallet menggunakan mode compact dan mengembang untuk memenuhi seluruh layar.

Default-nya 540.

props.noAutoCollapse

Mencegah widget wallet terlipat ketika mengklik di luar widget.

Default-nya false.

props.experimental_mode

Mode render. dropdown mengembangkan widget di tempatnya (cocok untuk desktop); modal me-render widget di portal yang terpusat. Default-nya dropdown — tetap responsif melalui prop smallBreakpoint.

props.className

Kelas CSS tambahan untuk styling kustom.

Default-nya undefined.

props.style

Inline style untuk styling kustom.

Default-nya undefined.