<WalletWidget>

<WalletWidget> es el componente de React responsable de renderizar el widget de la wallet.

<WalletWidget> debe renderizarse dentro de un <WalletProvider>.

Ejemplo

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

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

INFO

El widget es invisible hasta que el usuario conecta la wallet: devuelve null cuando está desconectado. Colócalo en un contenedor que esté siempre montado (p. ej. tu layout raíz) y renderiza tu propio botón de conexión junto a él.

Referencia

props.theme

Personaliza el tema del widget de la wallet pasando un objeto con los siguientes atributos:

Atributo	Descripción	Por defecto	Valores
variant	El skin del widget de la wallet expandido.	'glow'	'dark' | 'flat' | 'glow'
colors.accentColor	El color de acento del widget de la wallet. Establecerlo activa el modo monocromático, eliminando cualquier otro color competidor (p. ej. iconos de tokens).	undefined	Cualquier cadena de color CSS válida.
colors.collapsed.accentColor	El color de acento del widget de la wallet colapsado. Recurre a colors.accentColor si está definido.	undefined	Cualquier cadena de color CSS válida.
colors.collapsed.backgroundColor	El color de fondo del widget de la wallet colapsado.	undefined	Cualquier cadena de color CSS válida.

Las referencias CSS var(...) se resuelven de forma anticipada antes de reenviarse al iframe, por lo que puedes referenciar tus propios tokens de diseño:

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

props.size

Elige entre cuatro tamaños distintos para el widget de la wallet colapsado: small, medium, large y huge.

Por defecto es 'medium'.

props.shape

Elige entre dos formas distintas para el widget de la wallet colapsado: rounded y squared.

Por defecto es 'rounded'.

props.compact

Activa el modo compacto. Este modo es una versión diminuta del widget de la wallet colapsado que solo contiene el avatar.

Por defecto es false.

props.noAutoCompact

Impide que el widget de la wallet cambie al modo compacto en pantallas pequeñas.

Por defecto es false.

props.smallBreakpoint

Define el breakpoint, en píxeles, que se utiliza para optimizar el widget de la wallet en pantallas pequeñas.

Cuando el ancho del viewport está por debajo de este número, el widget de la wallet utiliza el modo compacto y se expande para ocupar toda la pantalla.

Por defecto es 540.

props.noAutoCollapse

Impide que el widget de la wallet se colapse al hacer clic fuera de él.

Por defecto es false.

props.experimental_mode

Modo de renderizado. dropdown expande el widget en su sitio (apropiado para escritorio); modal renderiza el widget en un portal centrado. Por defecto es dropdown: se mantiene responsive a través de la prop smallBreakpoint.

props.className

Clases CSS adicionales para estilos personalizados.

Por defecto es undefined.

props.style

Estilos inline para estilos personalizados.

Por defecto es undefined.