Onchain Social

Onchain social apps can use onchain identity, which allows users to carry a single, portable profile across many applications. By leveraging onchain identity, your app can instantly personalize the user experience as soon as a user connects their wallet. This creates a frictionless experience where users feel recognized immediately. This guide will walk you through how to integrate onchain identity into your social app.

Benefits

• Seamless Onboarding: Eliminate tedious information collection from your onboarding flow.
• Instant Personalization: Delight users by displaying their profile information the first time they open your app.
• Global Profiles: Leverage the user's global profile instead of building your own profile management. If the user updates their Avatar anywhere, it automatically updates everywhere.

Onchain profiles are built with Basenames and ENS, services which wrap wallet addresses with profile information like names and avatars. Using the IdentityCard component from OnchainKit we can easily display a user’s Basename or ENS profile in our app.

<IdentityCard/> will display the user's:

• Name
• Avatar
• Socials
• Verification Badge

Integrating <IdentityCard/>

npm create onchain@latest

import { IdentityCard } from '@coinbase/onchainkit/identity'; 
import { base } from 'viem/chains';
 
<IdentityCard
  address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF"
  chain={base} 
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
/> 

Just like that, you've added onchain identity into your app! Once a user connects a wallet with a Basename or ENS name, the IdentityCard component will display the user's profile information like you see below.

The IdentityCard component comes with helpful defaults, such as a plain avatar image, for users who don't have a Basename or ENS name.

Customization

Since every app is different, OnchainKit's components are designed to be easily customized. You can override styles using className or by setting a custom OnchainKit theme. You can also set the mainnet chain for ENS name resolution:

import { IdentityCard } from '@coinbase/onchainkit/identity';
import { mainnet } from 'viem/chains'; 
 
<OnchainKitProvider
  config={{
    appearance: {
      mode: 'auto',
      theme: 'cyberpunk', 
    },
  }}
>
</OnchainKitProvider>
 
<IdentityCard
  address="0x123..."
  chain={mainnet} 
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
/>

In the above customization we updated the theme to the cyberpunk theme and defined the chain as mainnet to trigger ENS name resolution.

Next Steps

By using <IdentityCard/>, you've essentially given your app a “user profile” feature powered by onchain data. Users will have the magical experience of being welcomed by their profile as soon as they jump into your app without getting stuck in a laborious onboarding flow.

Keep Building

If you're building a social app, there are additional features you may want to explore:

• <NFTMintCard/> - Allow users to mint NFTs directly from your app.
• Social feed integration with Farcaster - Bring the farcaster feed directly into your app.
• <Checkout/> - Allow users to checkout with onchain payments if your app offers products or services.