<WalletWidget>

<WalletWidget> est le composant React chargé de rendre le widget du portefeuille.

<WalletWidget> doit être rendu à l'intérieur d'un <WalletProvider>.

Exemple

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

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

INFO

Le widget reste invisible jusqu'à ce que l'utilisateur connecte le portefeuille — il retourne null lorsqu'il est déconnecté. Placez-le dans un conteneur toujours monté (par exemple votre layout racine) et affichez votre propre bouton de connexion à côté.

Référence

props.theme

Personnalisez le thème du widget du portefeuille en passant un objet avec les attributs suivants :

Attribut	Description	Défaut	Valeurs
variant	L'apparence du widget du portefeuille déplié.	'glow'	'dark' | 'flat' | 'glow'
colors.accentColor	La couleur d'accentuation du widget du portefeuille. Définir cette valeur active le mode monochromatique, supprimant toute autre couleur concurrente (par exemple les icônes des tokens).	undefined	Toute chaîne de couleur CSS valide.
colors.collapsed.accentColor	La couleur d'accentuation du widget du portefeuille replié. Utilise colors.accentColor par défaut si celle-ci est définie.	undefined	Toute chaîne de couleur CSS valide.
colors.collapsed.backgroundColor	La couleur d'arrière-plan du widget du portefeuille replié.	undefined	Toute chaîne de couleur CSS valide.

Les références CSS var(...) sont résolues de manière anticipée avant d'être transmises à l'iframe, ce qui vous permet de référencer vos propres design tokens :

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

props.size

Choisissez entre quatre tailles différentes pour le widget du portefeuille replié : small, medium, large et huge.

Par défaut 'medium'.

props.shape

Choisissez entre deux formes différentes pour le widget du portefeuille replié : rounded et squared.

Par défaut 'rounded'.

props.compact

Active le mode compact. Ce mode est une version minuscule du widget du portefeuille replié qui ne contient que l'avatar.

Par défaut false.

props.noAutoCompact

Empêche le widget du portefeuille de basculer en mode compact sur les petits écrans.

Par défaut false.

props.smallBreakpoint

Définit le breakpoint, en pixels, utilisé pour optimiser le widget du portefeuille pour les petits écrans.

Lorsque la largeur de la fenêtre est inférieure à ce nombre, le widget du portefeuille utilise le mode compact et s'étend pour occuper tout l'écran.

Par défaut 540.

props.noAutoCollapse

Empêche le widget du portefeuille de se replier lorsque l'utilisateur clique en dehors.

Par défaut false.

props.experimental_mode

Mode de rendu. dropdown déplie le widget sur place (adapté pour le desktop) ; modal rend le widget dans un portail centré. Par défaut dropdown — il reste responsive grâce à la prop smallBreakpoint.

props.className

Classes CSS supplémentaires pour un style personnalisé.

Par défaut undefined.

props.style

Styles inline pour un style personnalisé.

Par défaut undefined.