docs: use basename (#1174)

playground/nextjs-app-router/components/demo/Identity.tsx

@@ -21,7 +21,7 @@ export default function IdentityDemo() {
     ensName: 'zizzamia.eth',
   });
   const { data: avatarBasename } = useAvatar({
-    ensName: 'zizzamia.eth',
+    ensName: 'zizzamia.base.eth',
     chain: base,
   });
   const { data: name } = useName({ address: demoAddress });

site/docs/pages/guides/contribution.mdx

@@ -1,5 +1,5 @@
 ---
-title: OnchainKit Contribution Guide
+title: Contribution Guide · OnchainKit
 description: Learn how to contribute to OnchainKit
 ---
 

site/docs/pages/guides/reporting-bug.mdx

@@ -1,5 +1,5 @@
 ---
-title: Reporting a bug
+title: Reporting a bug · OnchainKit
 description: Help us make OnchainKit better
 ---
 

site/docs/pages/guides/tailwind.mdx

@@ -1,5 +1,5 @@
 ---
-title: Tailwindcss Integration Guide
+title: Tailwindcss Integration Guide · OnchainKit
 description: Learn how to integrate tailwindcss with OnchainKit
 ---
 

site/docs/pages/guides/use-basename-in-onchain-app.mdx

@@ -0,0 +1,99 @@
+---
+title: Use Basename · OnchainKit
+description: Integrate Basenames into your onchain app, in just a few steps.
+---
+import { Avatar, Name } from '@coinbase/onchainkit/identity';
+import App from '../../components/App';
+import { base } from 'viem/chains';
+
+# Use Basename
+
+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](https://www.base.org/names) into your app with few these steps.
+
+::::steps
+
+### New to OnchainKit?
+
+Follow the [Getting Started](/getting-started) guide to install the package.
+
+### 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>`](/identity/avatar) and [`<Name>`](/identity/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.
+
+```tsx
+import { 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} />
+```
+
+<App>
+  <Avatar address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" chain={base}/>
+  <Name address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" chain={base}/>
+</App>
+
+## React hooks with `useAvatar` and `useName`
+
+Use the [`useAvatar`](/identity/use-avatar) and [`useName`](/identity/use-name) 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-group
+
+```tsx [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 } = await useAvatar({ ensName: basename, chain: base });
+const { data: name, isLoading } = await useName({ address, chain: base });
+```
+
+```ts [return value]
+{ data: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwMCIgaGVpZ2h0PSIzMDAwIiB2aWV3Qm94PSIwIDAgMzAwMCAzMDAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF81NTY5XzcyODM1KSI+PHJlY3Qgd2lkdGg9IjMwMDAiIGhlaWdodD0iMzAwMCIgZmlsbD0iIzE1NURGRCIvPjxjaXJjbGUgY3g9IjE1MDAiIGN5PSIxNTAwIiByPSIxNTAwIiBmaWxsPSIjMTU1REZEIi8+PHBhdGggZD0iTTI3MTMuMTMgMTUwMEMyNzMxLjIgMTY4MC45MiAyNjE1LjEzIDE4MTguMTUgMjUwNy43OCAxOTI0LjQyQzIzOTQuNyAyMDMyLjEzIDIyOTAuNDQgMjEwOC44OCAyMjAwLjg4IDIyMDAuNjFDMjEwOS4xNSAyMjkwLjE2IDIwMzIuMjIgMjM5NC42MSAxOTI0LjUxIDI1MDcuNjhDMTgxOC4xNSAyNjE1LjA0IDE2ODAuOTIgMjczMS4xMSAxNTAwIDI3MTMuMTNDMTMxOS4wOCAyNzMxLjIgMTE4MS44NSAyNjE1LjEzIDEwNzUuNTggMjUwNy43OEM5NjcuODY2IDIzOTQuNyA4OTEuMTIgMjI5MC40NCA3OTkuMzg5IDIyMDAuODhDNzA5LjgzNyAyMTA5LjE1IDYwNS4zOSAyMDMyLjIyIDQ5Mi4zMTUgMTkyNC41MUMzODQuOTYyIDE4MTguMTUgMjY4Ljg5IDE2ODAuOTIgMjg2Ljg3MyAxNTAwQzI2OC43OTkgMTMxOS4wOCAzODQuODcxIDExODEuODUgNDkyLjIyNCAxMDc1LjU4QzYwNS4yOTkgOTY3Ljg2NiA3MDkuNTY0IDg5MS4xMiA3OTkuMTE2IDc5OS4zODlDODkwLjg0OCA3MDkuODM3IDk2Ny43NzUgNjA1LjM5IDEwNzUuNDkgNDkyLjMxNUMxMTgxLjg1IDM4NC44NzEgMTMxOS4wOCAyNjguNzk5IDE1MDAgMjg2Ljg3M0MxNjgwLjkyIDI2OC43OTkgMTgxOC4xNSAzODQuODcxIDE5MjQuNDIgNDkyLjIyNEMyMDMyLjEzIDYwNS4yOTkgMjEwOC44OCA3MDkuNTY0IDIyMDAuNjEgNzk5LjExNkMyMjkwLjE2IDg5MC44NDggMjM5NC42MSA5NjcuNzc1IDI1MDcuNjggMTA3NS40OUMyNjE1LjA0IDExODEuODUgMjczMS4xMSAxMzE5LjA4IDI3MTMuMTMgMTUwMFoiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTEzOTEuMDYgMTUwMEMxMzkxLjA2IDE2NDcuODkgMTM1OC40IDE3ODEuNjIgMTMwNS43NCAxODc4LjI4QzEyNTMuMDMgMTk3NS4wNSAxMTgwLjY5IDIwMzQgMTEwMS41MyAyMDM0QzEwMjIuMzYgMjAzNCA5NTAuMDMxIDE5NzUuMDUgODk3LjMxNCAxODc4LjI4Qzg0NC42NiAxNzgxLjYyIDgxMiAxNjQ3Ljg5IDgxMiAxNTAwQzgxMiAxMzUyLjExIDg0NC42NiAxMjE4LjM4IDg5Ny4zMTQgMTEyMS43MkM5NTAuMDMxIDEwMjQuOTUgMTAyMi4zNiA5NjYgMTEwMS41MyA5NjZDMTE4MC42OSA5NjYgMTI1My4wMyAxMDI0Ljk1IDEzMDUuNzQgMTEyMS43MkMxMzU4LjQgMTIxOC4zOCAxMzkxLjA2IDEzNTIuMTEgMTM5MS4wNiAxNTAwWiIgZmlsbD0iIzE1NURGRCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSI2Ii8+PGVsbGlwc2UgY3g9IjExMDIuNTciIGN5PSIxMTk0LjkzIiByeD0iMTI2LjQxNCIgcnk9IjIzMS45MzQiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTIxODcuMTYgMTUwMEMyMTg3LjE2IDE2NDcuODkgMjE1NC41IDE3ODEuNjIgMjEwMS44NCAxODc4LjI4QzIwNDkuMTIgMTk3NS4wNSAxOTc2Ljc5IDIwMzQgMTg5Ny42MyAyMDM0QzE4MTguNDYgMjAzNCAxNzQ2LjEzIDE5NzUuMDUgMTY5My40MSAxODc4LjI4QzE2NDAuNzYgMTc4MS42MiAxNjA4LjEgMTY0Ny44OSAxNjA4LjEgMTUwMEMxNjA4LjEgMTM1Mi4xMSAxNjQwLjc2IDEyMTguMzggMTY5My40MSAxMTIxLjcyQzE3NDYuMTMgMTAyNC45NSAxODE4LjQ2IDk2NiAxODk3LjYzIDk2NkMxOTc2Ljc5IDk2NiAyMDQ5LjEyIDEwMjQuOTUgMjEwMS44NCAxMTIxLjcyQzIxNTQuNSAxMjE4LjM4IDIxODcuMTYgMTM1Mi4xMSAyMTg3LjE2IDE1MDBaIiBmaWxsPSIjMTU1REZEIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjYiLz48ZWxsaXBzZSBjeD0iMTg5Ni41OCIgY3k9IjExOTQuOTMiIHJ4PSIxMjYuNDE0IiByeT0iMjMxLjkzNCIgZmlsbD0id2hpdGUiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF81NTY5XzcyODM1Ij48cmVjdCB3aWR0aD0iMzAwMCIgaGVpZ2h0PSIzMDAwIiBmaWxsPSJ3aGl0ZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==', isLoading: false }
+{ data: 'zizzamia.base.eth', isLoading: false }
+```
+
+:::
+
+## Typescript utility with `getAvatar` and `getName`
+
+Use the [`getAvatar`](/identity/get-name) and [`getName`](/identity/get-name) 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-group
+
+```tsx [code]
+import { 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 });
+```
+
+```ts [return value]
+data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwMCIgaGVpZ2h0PSIzMDAwIiB2aWV3Qm94PSIwIDAgMzAwMCAzMDAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF81NTY5XzcyODM1KSI+PHJlY3Qgd2lkdGg9IjMwMDAiIGhlaWdodD0iMzAwMCIgZmlsbD0iIzE1NURGRCIvPjxjaXJjbGUgY3g9IjE1MDAiIGN5PSIxNTAwIiByPSIxNTAwIiBmaWxsPSIjMTU1REZEIi8+PHBhdGggZD0iTTI3MTMuMTMgMTUwMEMyNzMxLjIgMTY4MC45MiAyNjE1LjEzIDE4MTguMTUgMjUwNy43OCAxOTI0LjQyQzIzOTQuNyAyMDMyLjEzIDIyOTAuNDQgMjEwOC44OCAyMjAwLjg4IDIyMDAuNjFDMjEwOS4xNSAyMjkwLjE2IDIwMzIuMjIgMjM5NC42MSAxOTI0LjUxIDI1MDcuNjhDMTgxOC4xNSAyNjE1LjA0IDE2ODAuOTIgMjczMS4xMSAxNTAwIDI3MTMuMTNDMTMxOS4wOCAyNzMxLjIgMTE4MS44NSAyNjE1LjEzIDEwNzUuNTggMjUwNy43OEM5NjcuODY2IDIzOTQuNyA4OTEuMTIgMjI5MC40NCA3OTkuMzg5IDIyMDAuODhDNzA5LjgzNyAyMTA5LjE1IDYwNS4zOSAyMDMyLjIyIDQ5Mi4zMTUgMTkyNC41MUMzODQuOTYyIDE4MTguMTUgMjY4Ljg5IDE2ODAuOTIgMjg2Ljg3MyAxNTAwQzI2OC43OTkgMTMxOS4wOCAzODQuODcxIDExODEuODUgNDkyLjIyNCAxMDc1LjU4QzYwNS4yOTkgOTY3Ljg2NiA3MDkuNTY0IDg5MS4xMiA3OTkuMTE2IDc5OS4zODlDODkwLjg0OCA3MDkuODM3IDk2Ny43NzUgNjA1LjM5IDEwNzUuNDkgNDkyLjMxNUMxMTgxLjg1IDM4NC44NzEgMTMxOS4wOCAyNjguNzk5IDE1MDAgMjg2Ljg3M0MxNjgwLjkyIDI2OC43OTkgMTgxOC4xNSAzODQuODcxIDE5MjQuNDIgNDkyLjIyNEMyMDMyLjEzIDYwNS4yOTkgMjEwOC44OCA3MDkuNTY0IDIyMDAuNjEgNzk5LjExNkMyMjkwLjE2IDg5MC44NDggMjM5NC42MSA5NjcuNzc1IDI1MDcuNjggMTA3NS40OUMyNjE1LjA0IDExODEuODUgMjczMS4xMSAxMzE5LjA4IDI3MTMuMTMgMTUwMFoiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTEzOTEuMDYgMTUwMEMxMzkxLjA2IDE2NDcuODkgMTM1OC40IDE3ODEuNjIgMTMwNS43NCAxODc4LjI4QzEyNTMuMDMgMTk3NS4wNSAxMTgwLjY5IDIwMzQgMTEwMS41MyAyMDM0QzEwMjIuMzYgMjAzNCA5NTAuMDMxIDE5NzUuMDUgODk3LjMxNCAxODc4LjI4Qzg0NC42NiAxNzgxLjYyIDgxMiAxNjQ3Ljg5IDgxMiAxNTAwQzgxMiAxMzUyLjExIDg0NC42NiAxMjE4LjM4IDg5Ny4zMTQgMTEyMS43MkM5NTAuMDMxIDEwMjQuOTUgMTAyMi4zNiA5NjYgMTEwMS41MyA5NjZDMTE4MC42OSA5NjYgMTI1My4wMyAxMDI0Ljk1IDEzMDUuNzQgMTEyMS43MkMxMzU4LjQgMTIxOC4zOCAxMzkxLjA2IDEzNTIuMTEgMTM5MS4wNiAxNTAwWiIgZmlsbD0iIzE1NURGRCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSI2Ii8+PGVsbGlwc2UgY3g9IjExMDIuNTciIGN5PSIxMTk0LjkzIiByeD0iMTI2LjQxNCIgcnk9IjIzMS45MzQiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTIxODcuMTYgMTUwMEMyMTg3LjE2IDE2NDcuODkgMjE1NC41IDE3ODEuNjIgMjEwMS44NCAxODc4LjI4QzIwNDkuMTIgMTk3NS4wNSAxOTc2Ljc5IDIwMzQgMTg5Ny42MyAyMDM0QzE4MTguNDYgMjAzNCAxNzQ2LjEzIDE5NzUuMDUgMTY5My40MSAxODc4LjI4QzE2NDAuNzYgMTc4MS42MiAxNjA4LjEgMTY0Ny44OSAxNjA4LjEgMTUwMEMxNjA4LjEgMTM1Mi4xMSAxNjQwLjc2IDEyMTguMzggMTY5My40MSAxMTIxLjcyQzE3NDYuMTMgMTAyNC45NSAxODE4LjQ2IDk2NiAxODk3LjYzIDk2NkMxOTc2Ljc5IDk2NiAyMDQ5LjEyIDEwMjQuOTUgMjEwMS44NCAxMTIxLjcyQzIxNTQuNSAxMjE4LjM4IDIxODcuMTYgMTM1Mi4xMSAyMTg3LjE2IDE1MDBaIiBmaWxsPSIjMTU1REZEIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjYiLz48ZWxsaXBzZSBjeD0iMTg5Ni41OCIgY3k9IjExOTQuOTMiIHJ4PSIxMjYuNDE0IiByeT0iMjMxLjkzNCIgZmlsbD0id2hpdGUiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF81NTY5XzcyODM1Ij48cmVjdCB3aWR0aD0iMzAwMCIgaGVpZ2h0PSIzMDAwIiBmaWxsPSJ3aGl0ZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==
+zizzamia.base.eth;
+```
+
+:::

site/docs/pages/identity/get-address.mdx

@@ -0,0 +1,45 @@
+# `getAddress`
+
+The `getAddress` utility is designed to retrieve an address from an onchain identity provider for a given name.
+
+## Usage
+
+Get ENS Name from mainnet chain
+
+:::code-group
+```tsx [code]
+import { getAddress } from '@coinbase/onchainkit/identity';
+
+const address = await getAddress({ name: 'zizzamia.eth' });
+```
+
+```ts [return value]
+0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1
+```
+
+:::
+
+Get Basename from base chain
+
+:::code-group
+
+```tsx [code]
+import { getAddress } from '@coinbase/onchainkit/identity';
+import { base } from 'viem/chains';
+
+const address = await getAddress({ name: 'zizzamia.base.eth', chain: base });
+```
+
+```ts [return value]
+0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1
+```
+
+:::
+
+## Returns
+
+[`Promise<GetAddressReturnType>`](/identity/types#getaddressreturntype)
+
+## Parameters
+
+[`GetAddress`](/identity/types#getaddress)

site/docs/pages/identity/get-name.mdx

@@ -6,11 +6,6 @@ provider for a specific address.
 Consider the utility instead of the hook when you
 use it with Next.js or any Node.js backend.
 
-Supported providers:
-
-- [Basenames](https://www.base.org/names)
-- ENS
-
 ## Usage
 
 Get ENS name from an address:
@@ -46,7 +41,6 @@ const name = await getName({ address, chain: base });
 zizzamia.base.eth;
 ```
 
-
 :::
 
 Get a sliced address when address does not have an ENS name:

site/docs/pages/identity/name.mdx

@@ -1,4 +1,4 @@
-import { Badge, Name, Identity, } from '@coinbase/onchainkit/identity';
+import { Badge, Name, Identity } from '@coinbase/onchainkit/identity';
 import App from '../../components/App';
 import { base } from 'viem/chains';
 
@@ -12,7 +12,9 @@ Address with an ENS:
 
 ```tsx
 import { Name } from '@coinbase/onchainkit/identity';
-<Name address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" /> // [!code focus]
+
+const address = '0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1';
+<Name address={address} /> // [!code focus]
 ```
 
 <App>
@@ -24,7 +26,9 @@ Address with a Basename:
 ```tsx
 import { Name } from '@coinbase/onchainkit/identity';
 import { base } from 'viem/chains'; // [!code focus]
-<Name address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" chain={base} /> // [!code focus]
+
+const address = '0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1';
+<Name address={address} chain={base} /> // [!code focus]
 ```
 
 <App>
@@ -37,9 +41,11 @@ You can override component styles using `className`.
 
 ```tsx
 import { Name } from '@coinbase/onchainkit/identity';
+
+const address = '0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1';
 <Name
+  address={address}
   className="bg-emerald-400 px-2 py-1 rounded"// [!code focus]
-  address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1"
 />
 ```
 
@@ -56,9 +62,10 @@ Use [`OnchainKitProvider`](/config/onchainkit-provider) or [`Identity`](/identit
 ```tsx
 import { Badge, Name, Identity } from '@coinbase/onchainkit/identity'; // [!code focus]
 
+const address = '0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9';
 <Identity
+  address={address}
   schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"  // [!code focus]
-  address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
 >
   <Name> // [!code focus]
     <Badge /> // [!code focus]

site/docs/pages/identity/types.mdx

@@ -9,8 +9,9 @@ description: Glossary of Types in Identity components & utilities.
 
 ```ts
 type AddressReact = {
-  address?: Address | null; // The Ethereum address to render
+  address?: Address | null; // The Ethereum address to render.
   className?: string; // Optional className override for top span element.
+  isSliced?: boolean; // Determines if the displayed address should be sliced.
 };
 ```
 
@@ -94,6 +95,21 @@ type EthBalanceReact = {
 };
 ```
 
+## `GetAddress`
+
+```ts
+type GetAddress = {
+  name: string | Basename;
+  chain?: Chain;
+};
+```
+
+## `GetAddressReturnType`
+
+```ts
+type GetAddressReturnType = Address | null;
+```
+
 ## `GetAttestationsOptions`
 
 ```ts
@@ -168,6 +184,15 @@ type NameReact = {
 } & HTMLAttributes<HTMLSpanElement>; // Optional additional span attributes to apply to the name.
 ```
 
+## `UseAddressOptions`
+
+```ts
+type UseAddressOptions = {
+  name: string | Basename; // The ENS or Basename for which the Ethereum address is to be fetched
+  chain?: Chain; // Optional chain for domain resolution
+};
+```
+
 ## `UseAvatarOptions`
 
 ```ts
@@ -177,10 +202,10 @@ type UseAvatarOptions = {
 };
 ```
 
-## `UseAvatarQueryOptions`
+## `UseQueryOptions`
 
 ```ts
-type UseAvatarQueryOptions = {
+type UseQueryOptions = {
   enabled?: boolean;
   cacheTime?: number;
 };
@@ -194,12 +219,3 @@ type UseNameOptions = {
   chain?: Chain; // Optional chain for domain resolution
 };
 ```
-
-## `UseNameQueryOptions`
-
-```ts
-type UseNameQueryOptions = {
-  enabled?: boolean; // Whether the query should be enabled. Defaults to true.
-  cacheTime?: number; // Cache time in milliseconds.
-};
-```

site/docs/pages/identity/use-address.mdx

@@ -0,0 +1,20 @@
+# `useAddress`
+
+The `useAddress` hook is used to get an address from an onchain identity provider for a given name.
+
+## Usage
+
+```tsx
+import { useAddress } from '@coinbase/onchainkit/identity';
+
+const { data: address, isLoading } = useAddress({ name: 'zizzamia.base.eth' });
+```
+
+## Returns
+
+[`useQuery<Promise<GetAddressReturnType>>`](/identity/types#getaddressreturntype)
+
+## Parameters
+
+[`UseAddressOptions`](/identity/types#useaddressoptions)
+[`UseQueryOptions`](/identity/types#usequeryoptions)

site/docs/pages/identity/use-avatar.mdx

@@ -3,10 +3,6 @@
 The `useAvatar` hook is used to get avatar image url from an onchain identity
 provider for a given name.
 
-Supported providers:
-
-- ENS
-
 ## Usage
 
 ```tsx
@@ -17,14 +13,9 @@ const { data: avatar, isLoading } = useAvatar({ ensName: 'vitalik.eth' });
 
 ## Returns
 
-```ts
-type UseAvatarOptions = {
-  ensName: string;
-  chain?: Chain;
-};
+[`useQuery<Promise<GetAddressReturnType>>`](/identity/types#getaddressreturntype)
 
-type UseAvatarQueryOptions = {
-  enabled?: boolean;
-  cacheTime?: number;
-};
-```
+## Parameters
+
+[`UseAvatarOptions`](/identity/types#useavataroptions)
+[`UseQueryOptions`](/identity/types#usequeryoptions)