<WalletWidget>

<WalletWidget> é o componente React responsável por renderizar o widget da carteira.

<WalletWidget> deve ser renderizado dentro de um <WalletProvider>.

Exemplo

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

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

INFO

O widget fica invisível até que o usuário conecte a carteira — ele retorna null quando desconectado. Coloque-o em um container que esteja sempre montado (por exemplo, seu layout raiz) e renderize seu próprio botão de conexão ao lado dele.

Referência

props.theme

Personalize o tema do widget da carteira passando um objeto com os seguintes atributos:

Atributo	Descrição	Padrão	Valores
variant	O skin do widget da carteira expandido.	'glow'	'dark' | 'flat' | 'glow'
colors.accentColor	A cor de destaque do widget da carteira. Defini-la ativa o modo monocromático, removendo qualquer outra cor concorrente (ex.: ícones de tokens).	undefined	Qualquer string de cor CSS válida.
colors.collapsed.accentColor	A cor de destaque do widget da carteira recolhido. Recai para colors.accentColor se esse estiver definido.	undefined	Qualquer string de cor CSS válida.
colors.collapsed.backgroundColor	A cor de fundo do widget da carteira recolhido.	undefined	Qualquer string de cor CSS válida.

Referências CSS var(...) são resolvidas de forma antecipada antes de serem encaminhadas ao iframe, para que você possa referenciar seus próprios design tokens:

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

props.size

Escolha entre quatro tamanhos diferentes para o widget da carteira recolhido: small, medium, large e huge.

O padrão é 'medium'.

props.shape

Escolha entre dois formatos diferentes para o widget da carteira recolhido: rounded e squared.

O padrão é 'rounded'.

props.compact

Ativa o modo compact. Esse modo é uma versão miúda do widget da carteira recolhido, que contém apenas o avatar.

O padrão é false.

props.noAutoCompact

Impede que o widget da carteira alterne para o modo compact em telas pequenas.

O padrão é false.

props.smallBreakpoint

Define o breakpoint, em pixels, usado para otimizar o widget da carteira para telas pequenas.

Quando a largura do viewport fica abaixo desse número, o widget da carteira usa o modo compact e se expande para ocupar a tela inteira.

O padrão é 540.

props.noAutoCollapse

Impede que o widget da carteira recolha quando o usuário clica fora dele.

O padrão é false.

props.experimental_mode

Modo de renderização. dropdown expande o widget no local (apropriado para desktop); modal renderiza o widget em um portal centralizado. O padrão é dropdown — ele permanece responsivo através da prop smallBreakpoint.

props.className

Classes CSS adicionais para estilização customizada.

O padrão é undefined.

props.style

Estilos inline para estilização customizada.

O padrão é undefined.