fix: review comments

Author: alessey

apps/base-docs/docs/components/SignatureComponents.tsx

@@ -0,0 +1,97 @@
+import { APIError } from '@coinbase/onchainkit/api';
+import { LifecycleStatus, Signature } from '@coinbase/onchainkit/signature';
+import { encodeAbiParameters } from 'viem';
+import App from './App.tsx';
+
+const SCHEMA_UID = '0xf58b8b212ef75ee8cd7e8d803c37c03e0519890502d5e99ee2412aae1456cafe';
+const EAS_CONTRACT = '0x4200000000000000000000000000000000000021';
+
+export function EIP712Signature() {
+  const domain = {
+    name: 'EAS Attestation',
+    version: '1.0.0',
+    chainId: 8453,
+    verifyingContract: EAS_CONTRACT,
+  } as const;
+
+  const types = {
+    Attest: [
+      { name: 'schema', type: 'bytes32' },
+      { name: 'recipient', type: 'address' },
+      { name: 'time', type: 'uint64' },
+      { name: 'revocable', type: 'bool' },
+      { name: 'refUID', type: 'bytes32' },
+      { name: 'data', type: 'bytes' },
+      { name: 'value', type: 'uint256' },
+    ],
+  } as const;
+
+  const message = {
+    schema: SCHEMA_UID,
+    recipient: '0x0000000000000000000000000000000000000000',
+    time: BigInt(0),
+    revocable: false,
+    refUID: '0x0000000000000000000000000000000000000000000000000000000000000000',
+    data: encodeAbiParameters([{ type: 'string' }], ['test attestation']) as `0x${string}`,
+    value: BigInt(0),
+  } as const;
+
+  const handleOnSuccess = (signature: string) => {
+    console.log(signature);
+  };
+
+  const handleOnStatus = (status: LifecycleStatus) => {
+    console.log(status);
+  };
+
+  const handleOnError = (error: APIError) => {
+    console.log(error);
+  };
+
+  return (
+    <App>
+      <div style={{ width: '200px' }}>
+        <Signature
+          domain={domain}
+          types={types}
+          message={message}
+          primaryType="Attest"
+          label="EIP712"
+          onSuccess={handleOnSuccess}
+          onStatus={handleOnStatus}
+          onError={handleOnError}
+          resetAfter={1000}
+        />
+      </div>
+    </App>
+  );
+}
+
+export function PersonalSignSignature() {
+  const handleOnSuccess = (signature: string) => {
+    console.log(signature);
+  };
+
+  const handleOnStatus = (status: LifecycleStatus) => {
+    console.log(status);
+  };
+
+  const handleOnError = (error: APIError) => {
+    console.log(error);
+  };
+
+  return (
+    <App>
+      <div style={{ width: '200px' }}>
+        <Signature
+          message="test message"
+          label="personal_sign"
+          onSuccess={handleOnSuccess}
+          onStatus={handleOnStatus}
+          onError={handleOnError}
+          resetAfter={1000}
+        />
+      </div>
+    </App>
+  );
+}

apps/base-docs/docs/pages/builderkits/onchainkit/signature/signature.mdx

@@ -1,19 +1,9 @@
 ---
 title: <Signature /> · OnchainKit
-description: The `<Signature />` components provide a high-level wrap around the entire transaction flow. It handles the transaction lifecycle, including gas estimation, fee sponsorship, and status updates.
+description: The `<Signature />` component supports signing EIP712 and personal_sign messages.
 ---
 
-import { Avatar, Name } from '@coinbase/onchainkit/identity';
-import {
-  Signature,
-  SignatureButton,
-  SignatureStatus,
-  SignatureLabel,
-  SignatureToast,
-  SignatureIcon,
-} from '@coinbase/onchainkit/signature';
-import { Wallet, ConnectWallet } from '@coinbase/onchainkit/wallet';
-import TransactionWrapper from '@/components/TransactionWrapper';
+import { EIP712Signature, PersonalSignSignature } from '@/components/SignatureComponents';
 
 # `<Signature />`
 
@@ -70,7 +60,9 @@ export const message = {
 <Signature
   domain={domain}
   types={types}
+  primaryType="Attest"
   message={message}
+  label="Sign EIP712"
   onSuccess={(signature: string) => console.log(signature)}
 />
 ```
@@ -112,17 +104,22 @@ export const message = {
 
 :::
 
+<EIP712Signature />
+
 ### Default implementation for personal_sign messages
 
-```tsx twoslash
+```tsx twoslash [Signature.tsx]
 import { Signature } from '@coinbase/onchainkit/signature';
 
 <Signature
   message="Hello, OnchainKit!"
+  label="Personal_Sign me"
   onSuccess={(signature: string) => console.log(signature)}
 />
 ```
 
+<PersonalSignSignature />
+
 ## Components
 
 The Signature components provide a complete signature flow:
@@ -140,7 +137,7 @@ The Signature components provide a complete signature flow:
 ### `<SignatureStatus />` and `<SignatureToast />` subcomponents
 
 - `<SignatureLabel />` - Displays status text ("Success", "Confirm in wallet", etc.)
-- `<SignatureIcon />` - Shows status icons (spinner, success, error)
+- `<SignatureIcon />` - Shows status icons (pending, success, error)
 
 ## Component API
 
@@ -160,6 +157,7 @@ Main wrapper component that manages the signature flow.
   message="Hello World"
 
   // Optional props
+  label="Sign"
   onSuccess={(signature: string) => {}}
   onError={(error: APIError) => {}}
   onStatus={(status: LifecycleStatus) => {}}
@@ -260,7 +258,7 @@ Custom error handling:
 
 ## Message Types
 
-The component supports two types of signatures:
+The `<Signature />` component supports two types of messages:
 
 ### EIP-712 Typed Data