Skip to content

Commit 65da193

Browse files
cpcramercpcramer
authored
chore: Add OCK Badge, Identity, and IdentityCard tooltip docs (#2052)
* chore: Add OCK Badge, Identity, and IdentityCard tooltip docs * remove comment * clean * IdentityCard React * clean
1 parent 55bb735 commit 65da193

File tree

4 files changed

+184
-7
lines changed

4 files changed

+184
-7
lines changed

‎apps/base-docs/docs/pages/builderkits/onchainkit/identity/badge.mdx

+45-4
Original file line numberDiff line numberDiff line change
@@ -43,17 +43,57 @@ import { Badge } from '@coinbase/onchainkit/identity';
4343
<Badge className="bg-blue-400 border-white"/>
4444
</App>
4545

46+
## Badge with Tooltip
47+
48+
You can enable a tooltip for the attestation badge to provide context about what the badge represents:
49+
50+
```tsx twoslash
51+
// @noErrors: 2657
52+
import { Badge } from '@coinbase/onchainkit/identity';
53+
54+
<Badge
55+
tooltip={true} // [!code focus]
56+
className="badge"
57+
/>
58+
```
59+
60+
<App>
61+
<Badge tooltip={true} className="badge" />
62+
</App>
63+
64+
With custom tooltip text:
65+
66+
```tsx twoslash
67+
// @noErrors: 2657
68+
import { Badge } from '@coinbase/onchainkit/identity';
69+
70+
<Badge
71+
tooltip="Coinbase Verified Account" // [!code focus]
72+
className="badge"
73+
/>
74+
```
75+
76+
<App>
77+
<Badge tooltip="Coinbase Verified Account" className="badge" />
78+
</App>
79+
4680
## Props
4781

4882
[`BadgeReact`](/builderkits/onchainkit/identity/types#badgereact)
4983

84+
| Prop | Type | Description |
85+
|------|------|-------------|
86+
| `className` | `string` | Optional className override for top span element |
87+
| `tooltip` | `boolean \| string` | Controls whether the badge shows a tooltip on hover. When `true`, displays the attestation name. When a string is provided, shows that custom text instead. Defaults to `false` |
88+
5089
## Badge on `<Name />` and `<Avatar />`
5190

5291
Badge with [`<Name />`](/builderkits/onchainkit/identity/name), best used when [`<Name />`](/builderkits/onchainkit/identity/name) are displayed alongside [`<Avatar />`](/builderkits/onchainkit/identity/avatar) components.
5392

5493
In both examples we use the Coinbase [Verified Account](https://base.easscan.org/schema/view/0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9) schema ID to show the Coinbase verified badge on the Name and Avatar components.
5594

5695
```tsx twoslash
96+
// @noErrors: 2657
5797
import { base } from 'viem/chains';
5898
import { Badge, Name, Identity } from '@coinbase/onchainkit/identity';
5999

@@ -67,7 +107,7 @@ const COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID =
67107
address={address}
68108
>
69109
<Name address={address}>
70-
<Badge />
110+
<Badge tooltip={true} /> {/* With tooltip that shows attestation name */}
71111
</Name>
72112
</Identity>
73113
```
@@ -78,14 +118,15 @@ const COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID =
78118
schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
79119
>
80120
<Name address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9">
81-
<Badge />
121+
<Badge tooltip={true} />
82122
</Name>
83123
</Identity>
84124
</App>
85125

86126
Badge with [`<Avatar />`](/builderkits/onchainkit/identity/avatar), best used when [`<Avatar />`](/builderkits/onchainkit/identity/avatar) is not paired with any labels.
87127

88128
```tsx twoslash
129+
// @noErrors: 2657
89130
import { base } from 'viem/chains';
90131
import { Avatar, Badge, Identity } from '@coinbase/onchainkit/identity';
91132

@@ -98,15 +139,15 @@ const COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID =
98139
schemaId={COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID}
99140
>
100141
<Avatar address={address}>
101-
<Badge />
142+
<Badge tooltip="Verified by Coinbase" /> {/* With custom tooltip text */}
102143
</Avatar>
103144
</Identity>
104145
```
105146

106147
<App>
107148
<Identity schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9" className="bg-transparent">
108149
<Avatar address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9">
109-
<Badge />
150+
<Badge tooltip="Verified by Coinbase" />
110151
</Avatar>
111152
</Identity>
112153
</App>

‎apps/base-docs/docs/pages/builderkits/onchainkit/identity/identity-card.mdx

+59-3
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ The `IdentityCard` component provides a comprehensive way to display user identi
2222
- **Avatar Support:** Displays ENS and chain-specific avatars
2323
- **Flexible Display:** Customizable layout and styling options
2424
- **Chain-Aware:** Works across different EVM chains that support name resolution
25+
- **Tooltip Support:** Displays attestation information on badge hover
2526

2627
## Usage
2728

@@ -47,6 +48,58 @@ import { base } from 'viem/chains';
4748
/>
4849
</App>
4950

51+
### Badge Tooltip
52+
53+
You can enable a tooltip for the attestation badge to provide context about what the badge represents:
54+
55+
```tsx twoslash
56+
// @noErrors: 2305 2657
57+
import { IdentityCard } from '@coinbase/onchainkit/identity';
58+
import { base } from 'viem/chains';
59+
60+
<IdentityCard
61+
address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF"
62+
chain={base}
63+
schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
64+
badgeTooltip={true} // [!code focus]
65+
/>
66+
```
67+
68+
<App>
69+
<IdentityCard
70+
schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
71+
address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF"
72+
chain={base}
73+
className="max-w-[300px]"
74+
badgeTooltip={true}
75+
/>
76+
</App>
77+
78+
You can also provide custom tooltip text:
79+
80+
```tsx twoslash
81+
// @noErrors: 2305 2657
82+
import { IdentityCard } from '@coinbase/onchainkit/identity';
83+
import { base } from 'viem/chains';
84+
85+
<IdentityCard
86+
address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF"
87+
chain={base}
88+
schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
89+
badgeTooltip="Coinbase Verified" // [!code focus]
90+
/>
91+
```
92+
93+
<App>
94+
<IdentityCard
95+
schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
96+
address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF"
97+
chain={base}
98+
className="max-w-[300px]"
99+
badgeTooltip="Coinbase Verified"
100+
/>
101+
</App>
102+
50103
## Customization
51104

52105
You can override styles using `className` or by setting a custom [OnchainKit theme](/builderkits/onchainkit/guides/themes#custom-theme). You can also set the `mainnet` chain for ENS name resolution:
@@ -83,13 +136,15 @@ import { mainnet } from 'viem/chains'; // [!code focus]
83136

84137
## Props
85138

86-
The `IdentityCard` component accepts the following props:
139+
[`IdentityCardReact`](/builderkits/onchainkit/identity/types#identitycardreact)
87140

88141
| Prop | Type | Description |
89142
|------|------|-------------|
90143
| `address` | `string` | The wallet address to display identity for |
91144
| `chain` | `Chain` | The chain to resolve the identity on |
92145
| `className` | `string` | Additional CSS classes to apply |
146+
| `schemaId` | `Address \| null` | The schema ID for attestation |
147+
| `badgeTooltip` | `boolean \| string` | When `true`, displays the attestation name in tooltip. When a string is provided, shows that custom text instead. Defaults to `false` |
93148

94149
## Error Handling
95150

@@ -104,8 +159,9 @@ The component handles various error states gracefully:
104159

105160
1. Always provide a valid chain object from viem/chains
106161
2. Handle loading states in parent components when address might be undefined
107-
4. Implement proper error boundaries in parent components
108-
5. Consider mobile responsiveness when styling
162+
3. Implement proper error boundaries in parent components
163+
4. Consider mobile responsiveness when styling
164+
5. Use `badgeTooltip` to provide context about what the verification badge represents
109165

110166
## Related Components
111167

‎apps/base-docs/docs/pages/builderkits/onchainkit/identity/identity.mdx

+67
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,76 @@ import { Avatar, Identity, Name, Badge, Address } from '@coinbase/onchainkit/ide
4242
</Identity>
4343
</App>
4444

45+
### Badge with Tooltip
46+
47+
You can enable a tooltip for the attestation badge to provide context about what the badge represents:
48+
49+
```tsx twoslash
50+
import { Avatar, Identity, Name, Badge, Address } from '@coinbase/onchainkit/identity';
51+
52+
<Identity
53+
address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
54+
schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
55+
>
56+
<Avatar />
57+
<Name>
58+
<Badge
59+
tooltip={true} // [!code focus]
60+
/>
61+
</Name>
62+
<Address />
63+
</Identity>
64+
```
65+
66+
<App>
67+
<Identity
68+
address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
69+
schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
70+
>
71+
<Avatar />
72+
<Name>
73+
<Badge tooltip={true} />
74+
</Name>
75+
<Address />
76+
</Identity>
77+
</App>
78+
79+
You can also provide custom tooltip text:
80+
```tsx twoslash
81+
// @errors: 2304 2552
82+
import { Avatar, Identity, Name, Badge, Address } from '@coinbase/onchainkit/identity';
83+
84+
<Identity
85+
address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
86+
schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
87+
>
88+
<Avatar />
89+
<Name>
90+
<Badge
91+
tooltip="Coinbase Verified Account" // [!code focus]
92+
/>
93+
</Name>
94+
<Address />
95+
</Identity>
96+
```
97+
98+
<App>
99+
<Identity
100+
address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
101+
schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
102+
>
103+
<Avatar />
104+
<Name>
105+
<Badge tooltip="Coinbase Verified Account" />
106+
</Name>
107+
<Address />
108+
</Identity>
109+
</App>
110+
45111
Modify any styles with `className` prop.
46112

47113
```tsx twoslash
114+
// @errors: 2304 2552 2657
48115
import { Avatar, Identity, Name, Badge, Address } from '@coinbase/onchainkit/identity';
49116

50117
<Identity

‎apps/base-docs/docs/pages/builderkits/onchainkit/identity/types.mdx

+13
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ type AvatarReact = {
5050
```ts
5151
type BadgeReact = {
5252
className?: string; // Optional className override for top span element.
53+
tooltip?: boolean | string; // Controls whether the badge shows a tooltip on hover. When true, the tooltip displays the attestation's name. When a string is provided, that text overrides the default display. Defaults to false.
5354
};
5455
```
5556

@@ -161,6 +162,18 @@ type GetNames = {
161162
};
162163
```
163164

165+
## `IdentityCardReact`
166+
167+
```ts
168+
type IdentityCardReact = {
169+
address?: Address;
170+
chain?: Chain;
171+
className?: string;
172+
schemaId?: Address | null;
173+
badgeTooltip?: boolean | string; // Controls whether the badge shows a tooltip on hover. When true, the tooltip displays the attestation's name. When a string is provided, that text overrides the default display. Defaults to false.
174+
};
175+
```
176+
164177
## `IdentityContextType`
165178

166179
```ts

0 commit comments

Comments
 (0)