<WalletWidget>

<WalletWidget> ist die React-Komponente, die für das Rendern des Wallet-Widgets verantwortlich ist.

<WalletWidget> muss innerhalb eines <WalletProvider> gerendert werden.

Beispiel

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

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

INFO

Das Widget ist unsichtbar, bis der Nutzer das Wallet verbindet – es gibt null zurück, wenn es nicht verbunden ist. Platziere es in einem Container, der immer eingebunden ist (z. B. deinem Root-Layout), und rendere deinen eigenen Connect-Button daneben.

Referenz

props.theme

Passe das Theme des Wallet-Widgets an, indem du ein Objekt mit den folgenden Attributen übergibst:

Attribut	Beschreibung	Standard	Werte
variant	Das Skin für das ausgeklappte Wallet-Widget.	'glow'	'dark' | 'flat' | 'glow'
colors.accentColor	Die Akzentfarbe für das Wallet-Widget. Diese einzustellen aktiviert den monochromatischen Modus und entfernt alle anderen konkurrierenden Farben (z. B. Token-Icons).	undefined	Ein beliebiger gültiger CSS-Farb-String.
colors.collapsed.accentColor	Die Akzentfarbe für das eingeklappte Wallet-Widget. Fällt auf colors.accentColor zurück, wenn dieser definiert ist.	undefined	Ein beliebiger gültiger CSS-Farb-String.
colors.collapsed.backgroundColor	Die Hintergrundfarbe für das eingeklappte Wallet-Widget.	undefined	Ein beliebiger gültiger CSS-Farb-String.

CSS-var(...)-Referenzen werden frühzeitig aufgelöst, bevor sie an das iframe weitergeleitet werden, sodass du deine eigenen Design-Tokens referenzieren kannst:

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

props.size

Wähle zwischen vier verschiedenen Größen für das eingeklappte Wallet-Widget: small, medium, large und huge.

Standardmäßig 'medium'.

props.shape

Wähle zwischen zwei verschiedenen Formen für das eingeklappte Wallet-Widget: rounded und squared.

Standardmäßig 'rounded'.

props.compact

Aktiviert den kompakten Modus. Dieser Modus ist eine winzige Version des eingeklappten Wallet-Widgets, die nur den Avatar enthält.

Standardmäßig false.

props.noAutoCompact

Verhindert, dass das Wallet-Widget auf kleinen Bildschirmen in den kompakten Modus wechselt.

Standardmäßig false.

props.smallBreakpoint

Definiert den Breakpoint in Pixeln, der verwendet wird, um das Wallet-Widget für kleine Bildschirme zu optimieren.

Wenn die Viewport-Breite unter diesem Wert liegt, verwendet das Wallet-Widget den kompakten Modus und expandiert, um den gesamten Bildschirm auszufüllen.

Standardmäßig 540.

props.noAutoCollapse

Verhindert, dass das Wallet-Widget einklappt, wenn außerhalb davon geklickt wird.

Standardmäßig false.

props.experimental_mode

Render-Modus. dropdown klappt das Widget an Ort und Stelle aus (geeignet für Desktop); modal rendert das Widget in einem zentrierten Portal. Standardmäßig dropdown – es bleibt über das smallBreakpoint-Prop responsiv.

props.className

Zusätzliche CSS-Klassen für benutzerdefiniertes Styling.

Standardmäßig undefined.

props.style

Inline-Styles für benutzerdefiniertes Styling.

Standardmäßig undefined.