Use Basename · OnchainKit

Integrate Basenames into your onchain app, in just a few steps.

Basenames are an essential onchain building block that empowers builders to establish their identity on Base by registering human-readable names for their wallet addresses.

They operate entirely onchain, utilizing the same technology as ENS names, and are deployed on Base.

You can integrate Basenames into your app with these few steps.

1. New to OnchainKit?

   Follow the Getting Started guide to install the package.

2. Already using OnchainKit?

   Update to the latest version and choose from the following steps: a React component approach, a React hook, or a pure TypeScript utility function.

React components with <Avatar> and <Name>

Use the <Avatar> and <Name> components to display Basenames associated with Ethereum addresses.

The chain prop is optional and setting to Base, it’s what makes the components switch from ENS to Basenames.

// @noErrors: 2657 - JSX expressions must have one parent element
import { Avatar, Name } from '@coinbase/onchainkit/identity';
import { base } from 'viem/chains';

const address = '0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1';

// omitted component code for brevity
<Avatar address={address} chain={base} />
<Name address={address} chain={base} />

React hooks with useAvatar and useName

Use the useAvatar and useName hooks to get Basenames associated with Ethereum addresses.

The hooks are incredibly useful for building custom components while leveraging OnchainKit for efficient data fetching.

code

import { useAvatar, useName } from '@coinbase/onchainkit/identity';
import { base } from 'viem/chains';

const address = '0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1';
const basename = 'zizzamia.base.eth';
const { data: avatar, isLoading: avatarIsLoading } = await useAvatar({ ensName: basename, chain: base });
const { data: name, isLoading: nameIsLoading } = await useName({ address, chain: base });

Typescript utility with getAvatar and getName

Use the getAvatar and getName functions to get Basenames associated with Ethereum addresses.

Being pure functions, it seamlessly integrates into any TypeScript project, including Vue, Angular, Svelte, or Node.js.

code

import { getAvatar, getName } from '@coinbase/onchainkit/identity';
import { base } from 'viem/chains';

const address = '0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1';
const basename = 'zizzamia.base.eth';
const avatar = await getAvatar({ ensName: basename, chain: base });
const name = await getName({ address, chain: base });