SignGate
Blocks a page until an agreement is signed. The page stays visible but inert.
SourcePackage @weft-js/warp
Preview
tsx
import { state } from '@weft-js/core'import { Button, Card, Segmented, SignGate, Stack } from '@weft-js/warp'import type { SignStatus } from '@weft-js/warp'export function LiveKeys() { const status = state<SignStatus>('unsigned') return ( <Stack gap="group"> <Segmented label="What the provider says" size="sm" value={status.value} options={SIGN_STATES} onChange={v => (status.value = v)} /> <SignGate status={status.value} src="about:blank" title="Sign the data agreement to use live keys" description="Two pages. It takes about a minute." onResend={() => (status.value = 'unsigned')} onRetry={() => (status.value = 'unsigned')}> <Card title="Live API keys"><Button>Create live key</Button></Card> </SignGate> </Stack> )}const SIGN_STATES: { value: SignStatus; label: string }[] = [{ value: 'unsigned', label: 'Unsigned' }, { value: 'pending', label: 'Pending' }, { value: 'signed', label: 'Signed' }, { value: 'expired', label: 'Expired' }, { value: 'error', label: 'Error' }]Installation
npm install @weft-js/warpUsage
tsx
import { SignGate } from '@weft-js/warp'Accessibility
- The blocker is a region with a heading, not a dialog, so it reads as the page.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
status | SignStatus | — | From the provider: query.live, a poll, or a signal. |
src | string | — | The provider's embedded signer. |
title | unknown | — | The heading. |
description | unknown | — | Shown while unsigned. |
level | number | 3 | The blocker heading's level in the page's outline (the spec's h4 keeps its style). |
signerTitle | string | 'Signer, provided by the e-signature service' | The signer frame's accessible name. |
children | unknown | — | The gated page: rendered, inert behind the blocker until signed. |
| Event | Type | Default | Description |
|---|---|---|---|
onResend | (() => void) | — | The button on expired and declined. |
onRetry | (() => void) | — | The button on error. |
onSigned | (() => void) | — | Once, when status turns signed. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="gate"] [data-part="content"]
contentblockerspinner
RelatedSign gate badgeApi keys