Introduction to Identity Kit

OnchainKit provides TypeScript utilities and React components to help you build applications that interact with onchain identity.

Components

The available components are:

<Avatar />: Display an ENS avatar.
<Badge />: Display an Attestation badge.
<Name />: Display an ENS name.

code

<OnchainKitProvider
  chain={base}
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
>
  <div className="flex h-10 items-center space-x-4">
    <Avatar address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9" showAttestation />
    <div className="flex flex-col text-sm">
      <b>
        <Name address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9" />
      </b>
      <Name address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9" showAddress />
    </div>
  </div>
</OnchainKitProvider>

Hooks

The available hooks are:

useAvatar: Get avatar image src. (ENS only for now)
useName: Get an onchain name for a given address. (ENS only for now)

Utilities

The available utilities are:

getAttestations: Fetch EAS attestations.
getAvatar: Get avatar image src. (ENS only for now)
getName: Get an onchain name for a given address. (ENS only for now)

Required dependencies

To use the Identity utilities and components install:

npm

npm install @coinbase/onchainkit
npm install react@18 react-dom@18 @tanstack/react-query graphql@14 graphql-request@6

Required providers

If you are using any of the provided components, you will need to install and configure @tanstack/react-query and wrap your app in <QueryClientProvider>.

import { Avatar } from '@coinbase/onchainkit/identity';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
// Create a client
const queryClient = new QueryClient();
 
function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <Avatar address="0x1234567890abcdef1234567890abcdef12345678" />
    </QueryClientProvider>
  );
}

See Tanstack Query documentation for more info.