PairingVerificationCode
The anti-hijack check on the guardian side (Figma "Pairing Verification Code" 2130:12321): the 4 digits must match the ones on the person's phone.
Label, spaced digits in a lilac box, a polite live refresh note, the explanation and the two answers. Not Pairing Code Display, which carries Abrir o WhatsApp / Copiar.
<PairingVerificationCode label="O número que aparece no celular da Lia é este?" code="4827" refreshNote="Muda a cada 30 segundos." explanation="Se for diferente, não continue." sameLabel="É o mesmo número" differentLabel="É diferente" onSame={confirm} onDifferent={stop} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Pairing Verification Code
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
| Default | Refreshing |
|---|---|
O número que aparece no celular da Lia é este? 4827 Muda a cada 30 segundos. Se for diferente, não continue: alguém pode estar tentando conectar outro WhatsApp. | O número que aparece no celular da Lia é este? 4827 Gerando um número novo… Se for diferente, não continue: alguém pode estar tentando conectar outro WhatsApp. |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| label | string | — | Figma `label`: the question ("O número que aparece no celular da Lia é este?"). |
| code | string | — | Figma `code`: the 4 digits. |
| state? | "default" | "refreshing" | "default" | Figma State: Refreshing dims the digits while a new number is made. |
| refreshNote | string | — | The live note under the code ("Muda a cada 30 segundos." / "Gerando um número novo…"). |
| explanation | string | — | Figma `explanation`: what to do if it differs. |
| sameLabel | string | — | Brand answer ("É o mesmo número"). |
| differentLabel | string | — | Outline answer ("É diferente"). |
| onSame? | (() => void) | — | |
| onDifferent? | (() => void) | — | |
| className? | string | — |