<WalletWidget>

<WalletWidget>, cüzdan widget'ını render etmekten sorumlu React bileşenidir.

<WalletWidget>, bir <WalletProvider> içinde render edilmelidir.

Örnek

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

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

INFO

Widget, kullanıcı cüzdanı bağlayana kadar görünmezdir — bağlantısı kesildiğinde null döndürür. Her zaman mount edilmiş bir konteynere (örn. kök düzeninize) yerleştirin ve kendi bağlanma butonunuzu yanına render edin.

Referans

props.theme

Aşağıdaki özelliklere sahip bir nesne geçerek cüzdan widget'ının temasını özelleştirin:

Özellik	Açıklama	Varsayılan	Değerler
variant	Genişletilmiş cüzdan widget'ının görünümü.	'glow'	'dark' | 'flat' | 'glow'
colors.accentColor	Cüzdan widget'ının vurgu rengi. Bunun ayarlanması monokromatik modu açar ve diğer çakışan renkleri (örn. token ikonları) kaldırır.	undefined	Herhangi bir geçerli CSS rengi.
colors.collapsed.accentColor	Daraltılmış cüzdan widget'ının vurgu rengi. Tanımlıysa colors.accentColor'a geri döner.	undefined	Herhangi bir geçerli CSS rengi.
colors.collapsed.backgroundColor	Daraltılmış cüzdan widget'ının arka plan rengi.	undefined	Herhangi bir geçerli CSS rengi.

CSS var(...) referansları, iframe'e iletilmeden önce eager olarak çözümlenir; böylece kendi design token'larınıza başvurabilirsiniz:

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

props.size

Daraltılmış cüzdan widget'ı için dört farklı boyut arasından seçim yapın: small, medium, large ve huge.

Varsayılan olarak 'medium'.

props.shape

Daraltılmış cüzdan widget'ı için iki farklı şekil arasından seçim yapın: rounded ve squared.

Varsayılan olarak 'rounded'.

props.compact

Compact modu etkinleştir. Bu mod, daraltılmış cüzdan widget'ının yalnızca avatarı içeren küçük bir versiyonudur.

Varsayılan olarak false.

props.noAutoCompact

Cüzdan widget'ının küçük ekranlarda compact moduna geçmesini engeller.

Varsayılan olarak false.

props.smallBreakpoint

Cüzdan widget'ının küçük ekranlar için optimize edilmesinde kullanılan kırılma noktasını piksel cinsinden tanımlar.

Viewport'un genişliği bu sayının altında olduğunda, cüzdan widget'ı compact modunu kullanır ve tüm ekranı kaplayacak şekilde genişler.

Varsayılan olarak 540.

props.noAutoCollapse

Cüzdan widget'ının dışına tıklandığında daralmasını engeller.

Varsayılan olarak false.

props.experimental_mode

Render modu. dropdown, widget'ı yerinde genişletir (masaüstü için uygundur); modal, widget'ı ortalanmış bir portalda render eder. Varsayılan olarak dropdown'dur — smallBreakpoint prop'u aracılığıyla responsive kalır.

props.className

Özel stil için ek CSS sınıfları.

Varsayılan olarak undefined.

props.style

Özel stil için inline stiller.

Varsayılan olarak undefined.