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>
);
}
Parameter | Type | Required | Description |
---|---|---|---|
resolvers | IdentityResolver[] | Yes | List of resolvers to use, will process sequentially until one resolves. |
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. |
resolvers | 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. |
resolvers | IdentityResolver[] | No | Override the default resolvers set in the WhiskSdkProvider config. |
className | string | No | Custom 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" });
Props | Type | Required | Description |
---|---|---|---|
address | Address | Yes | Address to resolve. |
resolvers | 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. |
resolvers | IdentityResolver[] | No | Override 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"] })
Params | Type | Required | Description |
---|---|---|---|
apiKey | string | Yes | Whisk API key, can be empty string for now. |
params | {address: Address, resolvers?: IdentityResolver[]} | Yes | Same params as useName . |
getAvatar
import { getAvatar } from "@paperclip-labs/whisk-sdk/identity/core";
const avatar = await getAvatar("", { address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", resolvers: ["ens", "farcaster"] })
Params | Type | Required | Description |
---|---|---|---|
apiKey | string | Yes | Whisk API key, can be empty string for now. |
params | {address: Address, resolvers?: IdentityResolver[]} | Yes | Same params as useAvatar . |
Types
IdentityResolver
type IdentityResolver = ("ens" | "nns" | "farcaster" | "uni" | "base" | "lens" | "world");