-
Notifications
You must be signed in to change notification settings - Fork 148
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: IdentityCard and Socials components (#1534)
- Loading branch information
Showing
5 changed files
with
286 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| --- | ||
| title: <IdentityCard /> · OnchainKit | ||
| description: Display user identity information with ENS and chain-specific name resolution | ||
| --- | ||
|
|
||
| import { | ||
| Address, | ||
| Avatar, | ||
| Identity, | ||
| IdentityCard, | ||
| Name, | ||
| } from '@coinbase/onchainkit/identity'; | ||
| import App from '../../components/App'; | ||
| import { base, mainnet } from 'viem/chains'; | ||
|
|
||
| # `<IdentityCard />` | ||
|
|
||
| The `IdentityCard` component provides a comprehensive way to display user identity information, including ENS names, avatars, and chain-specific name resolution. | ||
|
|
||
| ## Features | ||
| - **Name Resolution:** Resolves both Basenames and ENS names automatically | ||
| - **Avatar Support:** Displays ENS and chain-specific avatars | ||
| - **Flexible Display:** Customizable layout and styling options | ||
| - **Chain-Aware:** Works across different EVM chains that support name resolution | ||
|
|
||
| ## Usage | ||
|
|
||
| ### Basic Usage | ||
|
|
||
| ```tsx twoslash | ||
| // @errors: 2305 | ||
| import { IdentityCard } from '@coinbase/onchainkit/identity'; // [!code focus] | ||
| import { base } from 'viem/chains'; | ||
|
|
||
| <IdentityCard // [!code focus] | ||
| address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF" // [!code focus] | ||
| chain={base} // [!code focus] | ||
| /> // [!code focus] | ||
| ``` | ||
| <App> | ||
| <IdentityCard | ||
| schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9" | ||
| address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF" | ||
| chain={base} | ||
| className="max-w-[300px]" | ||
| /> | ||
| </App> | ||
|
|
||
| ## Customization | ||
|
|
||
| You can override styles using `className` or by setting a custom [OnchainKit theme](/guides/themes#custom-theme). You can also set the `mainnet` chain for ENS name resolution: | ||
|
|
||
| ```tsx | ||
| // @errors: 2305 2724 2304 2657 | ||
| import { IdentityCard } from '@coinbase/onchainkit/identity'; | ||
| import { mainnet } from 'viem/chains'; // [!code focus] | ||
|
|
||
| <OnchainKitProvider | ||
| config={{ | ||
| appearance: { | ||
| mode: 'auto', | ||
| theme: 'cyberpunk', // [!code focus] | ||
| }, | ||
| }} | ||
| > | ||
| </OnchainKitProvider> | ||
|
|
||
| <IdentityCard | ||
| address="0x123..." | ||
| chain={mainnet} // [!code focus] | ||
| /> | ||
|
|
||
| ``` | ||
| <App> | ||
| <IdentityCard | ||
| schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9" | ||
| address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF" | ||
| chain={mainnet} | ||
| className="cyberpunk max-w-[300px]" | ||
| /> | ||
| </App> | ||
|
|
||
| ## Props | ||
|
|
||
| The `IdentityCard` component accepts the following props: | ||
|
|
||
| | Prop | Type | Description | | ||
| |------|------|-------------| | ||
| | `address` | `string` | The wallet address to display identity for | | ||
| | `chain` | `Chain` | The chain to resolve the identity on | | ||
| | `className` | `string` | Additional CSS classes to apply | | ||
|
|
||
| ## Error Handling | ||
|
|
||
| The component handles various error states gracefully: | ||
|
|
||
| - Invalid addresses display a shortened address format | ||
| - Missing ENS names fallback to shortened addresses | ||
| - Failed avatar fetches show a default avatar | ||
| - Network errors maintain a degraded but functional display | ||
|
|
||
| ## Best Practices | ||
|
|
||
| 1. Always provide a valid chain object from viem/chains | ||
| 2. Handle loading states in parent components when address might be undefined | ||
| 4. Implement proper error boundaries in parent components | ||
| 5. Consider mobile responsiveness when styling | ||
|
|
||
| ## Related Components | ||
|
|
||
| - [`<Avatar />`](/identity/avatar) - Displays user avatars | ||
| - [`<Name />`](/identity/name) - Displays resolved names | ||
| - [`<Identity />`](/identity/identity) - Simplified identity display |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| --- | ||
| title: <Socials /> · OnchainKit | ||
| description: Display social links for ENS names | ||
| --- | ||
| import { | ||
| Address, | ||
| Avatar, | ||
| Badge, | ||
| Identity, | ||
| Name, | ||
| Socials, | ||
| } from '@coinbase/onchainkit/identity'; | ||
| import App from '../../components/App'; | ||
| import { base, mainnet } from 'viem/chains'; | ||
|
|
||
| # `<Socials />` | ||
|
|
||
| The `Socials` component displays social media links associated with Basenames and ENS names. | ||
| It automatically fetches and renders social links stored in text records. | ||
|
|
||
| ## Features | ||
| - **Name Resolution:** Resolves both Basenames and ENS names to fetch associated social links | ||
| - **Multiple Platform Support:** Supports Twitter, GitHub, Discord, and other major platforms | ||
| - **Customizable Display:** Flexible styling options to match your app's design | ||
| - **Chain-Aware:** Works across different EVM chains that support ENS | ||
|
|
||
| ## Usage | ||
|
|
||
| ### Basic Usage | ||
|
|
||
| ```tsx twoslash | ||
| // @errors: 2305 | ||
| import { | ||
| Address, | ||
| Avatar, | ||
| Badge, | ||
| Identity, | ||
| Name, | ||
| Socials, // [!code focus] | ||
| } from '@coinbase/onchainkit/identity'; | ||
| import { base } from 'viem/chains'; | ||
|
|
||
| <Identity | ||
| address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF" | ||
| schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9" | ||
| chain={base} | ||
| > | ||
| <Avatar /> | ||
| <Name> | ||
| <Badge /> | ||
| </Name> | ||
| <Address /> | ||
| <Socials /> // [!code focus] | ||
| </Identity> | ||
| ``` | ||
| <App> | ||
| <Identity | ||
| address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF" | ||
| schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9" | ||
| chain={base} | ||
| > | ||
| <Avatar /> | ||
| <Name> | ||
| <Badge /> | ||
| </Name> | ||
| <Address /> | ||
| <Socials /> | ||
| </Identity> | ||
| </App> | ||
|
|
||
| ### Standalone Usage | ||
|
|
||
| You can also use the `Socials` component independently by providing an address: | ||
|
|
||
| ```tsx twoslash | ||
| // @errors: 2305 | ||
| import { Socials } from '@coinbase/onchainkit/identity'; | ||
| import { base } from 'viem/chains'; | ||
|
|
||
| export default function StandaloneSocials() { | ||
| return ( | ||
| <Socials // [!code focus] | ||
| address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF" // [!code focus] | ||
| chain={base} // [!code focus] | ||
| /> // [!code focus] | ||
| ); | ||
| } | ||
| ``` | ||
| <App> | ||
| <Socials | ||
| address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF" | ||
| chain={base} | ||
| /> | ||
| </App> | ||
|
|
||
| ### Custom Chain | ||
|
|
||
| Specify a different chain for ENS resolution: | ||
|
|
||
| ```tsx twoslash | ||
| // @errors: 2305 | ||
| import { | ||
| Address, | ||
| Avatar, | ||
| Badge, | ||
| Identity, | ||
| Name, | ||
| Socials, // [!code focus] | ||
| } from '@coinbase/onchainkit/identity'; | ||
| import { mainnet } from 'viem/chains'; // [!code focus] | ||
|
|
||
| <Identity | ||
| address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF" | ||
| schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9" | ||
| chain={mainnet} | ||
| > | ||
| <Avatar /> | ||
| <Name> | ||
| <Badge /> | ||
| </Name> | ||
| <Address /> | ||
| <Socials /> // [!code focus] | ||
| </Identity> | ||
| ``` | ||
| <App> | ||
| <Identity | ||
| address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF" | ||
| schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9" | ||
| chain={mainnet} | ||
| > | ||
| <Avatar /> | ||
| <Name> | ||
| <Badge /> | ||
| </Name> | ||
| <Address /> | ||
| <Socials /> | ||
| </Identity> | ||
| </App> | ||
|
|
||
| ## Props | ||
|
|
||
| The `Socials` component accepts the following props: | ||
|
|
||
| | Prop | Type | Description | | ||
| |------|------|-------------| | ||
| | `address` | `Address \| null` | The Ethereum address to resolve social links for | | ||
| | `ensName` | `string` | Optional ENS name to resolve social links for | | ||
| | `chain` | `Chain` | The chain to use for ENS resolution | | ||
| | `className` | `string` | Custom CSS classes to apply to the component | | ||
|
|
||
|
|
||
| ## Error Handling | ||
|
|
||
| The component handles various edge cases: | ||
|
|
||
| - Returns `null` if no social links are found | ||
| - Shows empty state while loading | ||
| - Gracefully handles ENS resolution errors | ||
| - Validates social links before display |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters