Skip to content
Get help

<Signature />

The <Signature /> components provide a wrapper around the useSignTypedData and useSignMessage wagmi hooks. These hooks handle EIP712 signatures and personal_sign messages, falling back to eth_sign.

Before using them, ensure you've completed all Getting Started steps.

Quick start

You can use the Signature component with the default implementation without passing any subcomponents or pass any subcomponents to fully customize the UI.

Default implementation for EIP712 signatures

Signature.tsx
import { Signature } from '@coinbase/onchainkit/signature';
import { domain, types, message } from './data';
<Signature
  domain={domain}
  types={types}
  primaryType="Attest"
  message={message}
  label="Sign EIP712"
  onSuccess={(signature: string) => console.log(signature)}
/>

Default implementation for personal_sign messages

Signature.tsx
import { Signature } from '@coinbase/onchainkit/signature';
 
<Signature
  message="Hello, OnchainKit!"
  label="Personal_Sign me"
  onSuccess={(signature: string) => console.log(signature)}
/>

Components

The Signature components provide a complete signature flow:

Core Component

  • <Signature /> - Main container that manages the signature lifecycle

<Signature /> subcomponents

  • <SignatureButton /> - Handles signature initiation with customizable labels
  • <SignatureStatus /> - Displays current signature status and actions
  • <SignatureToast /> - Shows toast notifications for signature events

<SignatureStatus /> and <SignatureToast /> subcomponents

  • <SignatureLabel /> - Displays status text ("Success", "Confirm in wallet", etc.)
  • <SignatureIcon /> - Shows status icons (pending, success, error)

Component API

Signature

Main wrapper component that manages the signature flow.

<Signature
  // Required for EIP-712 typed data
  domain={domain}
  types={types}
  message={message}
  primaryType="Test"
 
  // OR for personal_sign
  message="Hello World"
 
  // Optional props
  label="Sign"
  onSuccess={(signature: string) => {}}
  onError={(error: APIError) => {}}
  onStatus={(status: LifecycleStatus) => {}}
  resetAfter={5000} // ms to reset after success
  className="custom-class"
  disabled={false}
/>

SignatureButton

Button component that triggers the signature request.

<SignatureButton
  label="Sign Message" // Default: "Sign"
  connectLabel="Connect Wallet" // Default: "Connect Wallet"
  errorLabel="Try Again" // Default: "Try again"
  successLabel="Signed!" // Default: "Signed"
  pendingLabel="Signing..." // Default: "Signing..."
  disabled={false}
  className="custom-class"
/>

SignatureStatus

Container for signature status information.

<SignatureStatus className="custom-class">
  <SignatureLabel />
  {/* Custom status content */}
</SignatureStatus>

SignatureToast

Toast notification for signature events.

<SignatureToast
  durationMs={5000} // Default: 5000
  position="bottom-center" // Default: "bottom-center"
  className="custom-class"
>
  <SignatureIcon />
  <SignatureLabel />
  {/* Custom toast content */}
</SignatureToast>

Lifecycle States

The signature flow has the following states:

  • init - Initial state
  • pending - Waiting for wallet signature
  • success - Signature completed successfully
  • error - Error occurred during signing
  • reset - Component reset to initial state

Access the current state through the onStatus callback:

<Signature
  onStatus={(status: LifecycleStatus) => {
    switch (status.statusName) {
      case 'success':
        console.log('Signature:', status.statusData.signature);
        break;
      case 'error':
        console.log('Error:', status.statusData.message);
        break;
    }
  }}
/>

Error Handling

Errors are handled automatically and displayed in the UI. Common errors include:

  • User rejected request
  • Invalid message format
  • Wallet connection issues

Custom error handling:

<Signature
  onError={(error: APIError) => {
    console.error('Error code:', error.code);
    console.error('Error message:', error.message);
  }}
/>

Message Types

The <Signature /> component supports two types of messages:

EIP-712 Typed Data

<Signature
  domain={{
    name: 'Example App',
    version: '1.0.0',
    chainId: 1,
    verifyingContract: '0x...'
  }}
  types={{
    Person: [
      { name: 'name', type: 'string' },
      { name: 'wallet', type: 'address' }
    ]
  }}
  message={{
    name: 'Bob',
    wallet: '0x...'
  }}
  primaryType="Person"
/>

Personal Sign (personal_sign)

<Signature
  message="Welcome to Example App! Click to sign in."
/>

Component types

Related Components