Identity Kit

Seamlessly integrate web3 avatars, usernames and profiles into your app.

0xd8dA...6045

Connected accounts

Supported resolvers:

Configuration

Before using components or hooks from this kit, set the IdentityKitConfig in the WhiskSdkProvider.

providers.tsx

"use client"; 
import { WhiskSdkProvider } from "@paperclip-labs/whisk-sdk";
import { IdentityResolver } from "@paperclip-labs/whisk-sdk/identity";
 
export default function Providers({ children }: { children: React.ReactNode }) {
  return (
    <WhiskSdkProvider
        apiKey={"<YOUR_API_KEY>"}
        config={{
            identity: { 
                // Specify the resolver order for sequential resolution. 
                // This will be used as defaults if no resolvers are provided in the component or hook. 
                resolverOrder: [IdentityResolver.Ens, IdentityResolver.Farcaster, IdentityResolver.Base, IdentityResolver.Nns, IdentityResolver.Uni, IdentityResolver.Lens, IdentityResolver.World],  
 
                // Optional: Override specific addresses with custom names or avatars.
                overrides: {} 
            }, 
        }}
    >
        {children}
    </WhiskSdkProvider>
  );
}

Parameter	Type	Required	Description
`resolverOrder`	`IdentityResolver[]`	No	Resolver order to use, will process sequentially until one resolves. Will use a default order if not provided.
`overrides`	`Record<Address, { name: string; avatar: string }>`	No	Override for a specific addresses with custom names and avatars.

Components

React Components are the easiest and recommended way to get up and running with Identity Kit.

Name

The name for an address.

0xd8dA...6045

Props	Type	Required	Description
`address`	`Address`	Yes	Address to resolve.
`resolverOrder`	`IdentityResolver[]`	No	Override the default resolvers set in the `WhiskSdkProvider` config.
`className`	`string`	No	Custom CSS class names.

Example customizing with tailwindCSS:

0x17cd...5DCc

Avatar

The avatar for an address.

Props	Type	Required	Description
`address`	`Address`	Yes	Address to resolve.
`size`	`number`	Yes	Size in pixels.
`resolverOrder`	`IdentityResolver[]`	No	Override the default resolvers set in the `WhiskSdkProvider` config.
`className`	`string`	No	Custom CSS class names.

Example customizing with tailwindCSS:

Profile

The profile for an address.

0x17cd...5DCc

Connected accounts

Props	Type	Required	Description
`address`	`Address`	Yes	Address to resolve.
`resolverOrder`	`IdentityResolver[]`	No	Override the default resolvers set in the `WhiskSdkProvider` config.
`className`	`string`	No	Custom CSS class names.

Hooks

Hooks allow you to get the data to build your own custom components if the provided components don't fit your needs.

They use useQuery from Tanstack Query under the hood, and return a UseQueryResult object.

useName

import { useName } from "@paperclip-labs/whisk-sdk/identity";
 
const { data: name, isLoading } = useName({ address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" });

Props	Type	Required	Description
`address`	`Address`	Yes	Address to resolve.
`resolverOrder`	`IdentityResolver[]`	No	Override the default resolvers set in the `WhiskSdkProvider` config.

useAvatar

import { useAvatar } from "@paperclip-labs/whisk-sdk/identity";
 
const { data: avatar, isLoading } = useAvatar({ address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" });

Props	Type	Required	Description
`address`	`Address`	Yes	Address to resolve.
`resolverOrder`	`IdentityResolver[]`	No	Override the default resolvers set in the `WhiskSdkProvider` config.

useProfile

import { useProfile } from "@paperclip-labs/whisk-sdk/identity";
 
const { data: profile, isLoading } = useProfile({ address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" });

Props	Type	Required	Description
`address`	`Address`	Yes	Address to resolve.
`resolverOrder`	`IdentityResolver[]`	No	Override the default resolvers set in the `WhiskSdkProvider` config.

GraphQL

If you need direct data access you can query the Whisk GraphQL API directly. This is useful for server component fetching, or for use outside of React.

Relevant schema:

schema.graphql

type Query {
  identities(addresses: [String!]!, resolverOrder: [IdentityResolver!]): [Identity!]!
  identity(address: String!, resolverOrder: [IdentityResolver!]): Identity!
}
 
type Identity {
  aggregate: IdentityResolverOutput! # Aggregate based on the resolverOrder
  base: IdentityResolverOutput!
  ens: IdentityResolverOutput!
  farcaster: IdentityResolverOutput!
  lens: IdentityResolverOutput!
  nns: IdentityResolverOutput!
  uni: IdentityResolverOutput!
  world: IdentityResolverOutput!
}
 
type IdentityResolverOutput {
  avatar: String
  bio: String
  discord: String
  github: String
  name: String
  telegram: String
  website: String
  x: String
}

Types

IdentityResolver

export enum IdentityResolver {
  Base = 'base',
  Ens = 'ens',
  Farcaster = 'farcaster',
  Lens = 'lens',
  Nns = 'nns',
  Uni = 'uni',
  World = 'world'
}