Skip to content

Identity Kit

Seamlessly integrate web3 avatars and usernames into your app.

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";
 
export default function Providers({ children }: { children: React.ReactNode }) {
  return (
    <WhiskSdkProvider
        config={{
            identity: { 
                // Specify resolvers and their order for sequential resolution.
                // This will be used as defaults if no resolvers are provided in the component or hook.
                resolvers: ["ens", "base", "farcaster", "nns", "uni", "lens", "world"],  
 
                // Optional: Override specific addresses with custom names or avatars.
                overrides: {} 
            }, 
        }}
    >
        {children}
    </WhiskSdkProvider>
  );
}
ParameterTypeRequiredDescription
resolversIdentityResolver[]YesList of resolvers to use, will process sequentially until one resolves.
overridesRecord<Address, { name: string; avatar: string }>NoOverride 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
PropsTypeRequiredDescription
addressAddressYesAddress to resolve.
resolversIdentityResolver[]NoOverride the default resolvers set in the WhiskSdkProvider config.
classNamestringNoCustom CSS class names.

Example customizing with tailwindCSS:

0x17cd...5DCc

Avatar

The avatar for an address.

PropsTypeRequiredDescription
addressAddressYesAddress to resolve.
sizenumberYesSize in pixels.
resolversIdentityResolver[]NoOverride the default resolvers set in the WhiskSdkProvider config.
classNamestringNoCustom CSS class names.

Example customizing with tailwindCSS:

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" });
PropsTypeRequiredDescription
addressAddressYesAddress to resolve.
resolversIdentityResolver[]NoOverride the default resolvers set in the WhiskSdkProvider config.

useAvatar

import { useAvatar } from "@paperclip-labs/whisk-sdk/identity";
 
const { data: avatar, isLoading } = useAvatar({ address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" });
PropsTypeRequiredDescription
addressAddressYesAddress to resolve.
resolversIdentityResolver[]NoOverride the default resolvers set in the WhiskSdkProvider config.

Core

If you need direct data access you can use to SDK core. This is useful for server component fetching, or for use outside of React.

getName

import { getName } from "@paperclip-labs/whisk-sdk/identity/core";
 
const name = await getName("", { address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", resolvers: ["ens", "farcaster"] })
ParamsTypeRequiredDescription
apiKeystringYesWhisk API key, can be empty string for now.
params{address: Address, resolvers?: IdentityResolver[]}YesSame params as useName.

getAvatar

import { getAvatar } from "@paperclip-labs/whisk-sdk/identity/core";
 
const avatar = await getAvatar("", { address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", resolvers: ["ens", "farcaster"] })
ParamsTypeRequiredDescription
apiKeystringYesWhisk API key, can be empty string for now.
params{address: Address, resolvers?: IdentityResolver[]}YesSame params as useAvatar.

Types

IdentityResolver

type IdentityResolver = ("ens" | "nns" | "farcaster" | "uni" | "base" | "lens" | "world");