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

// @errors: 2305
import {
  Address,
  Avatar,
  Badge,
  Identity,
  Name,
  Socials, 
} from '@coinbase/onchainkit/identity';
import { base } from 'viem/chains';

<Identity
  address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF"
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
  chain={base}
>
  <Avatar />
  <Name>
    <Badge />
  </Name>
  <Address />
  <Socials />
</Identity>

​
Standalone Usage

You can also use the Socials component independently by providing an address:

// @errors: 2305
import { Socials } from '@coinbase/onchainkit/identity';
import { base } from 'viem/chains';

export default function StandaloneSocials() {
  return (
    <Socials
      address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF"
      chain={base}
    />
  );
}

​
Custom Chain

Specify a different chain for ENS resolution:

// @errors: 2305
import {
  Address,
  Avatar,
  Badge,
  Identity,
  Name,
  Socials, 
} from '@coinbase/onchainkit/identity';
import { mainnet } from 'viem/chains'; 

<Identity
  address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF"
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
  chain={mainnet}
>
  <Avatar />
  <Name>
    <Badge />
  </Name>
  <Address />
  <Socials />
</Identity>

​
Props

The Socials component accepts the following props:

PropTypeDescription
addressAddress | nullThe Ethereum address to resolve social links for
ensNamestringOptional ENS name to resolve social links for
chainChainThe chain to use for ENS resolution
classNamestringCustom 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