From 8372d075688c0bcfac3d337ff94eb09db22d37dd Mon Sep 17 00:00:00 2001 From: Leonardo Zizzamia Date: Tue, 27 Aug 2024 18:00:57 -0700 Subject: [PATCH] docs: use basename (#1174) --- .../components/demo/Identity.tsx | 2 +- site/docs/pages/guides/contribution.mdx | 2 +- site/docs/pages/guides/reporting-bug.mdx | 2 +- site/docs/pages/guides/tailwind.mdx | 2 +- .../guides/use-basename-in-onchain-app.mdx | 99 +++++++++++++++++++ site/docs/pages/identity/get-address.mdx | 45 +++++++++ site/docs/pages/identity/get-name.mdx | 6 -- site/docs/pages/identity/name.mdx | 17 +++- site/docs/pages/identity/types.mdx | 40 +++++--- site/docs/pages/identity/use-address.mdx | 20 ++++ site/docs/pages/identity/use-avatar.mdx | 19 +--- site/docs/pages/identity/use-name.mdx | 51 +++++++--- site/sidebar.ts | 12 +++ src/identity/types.ts | 28 +++--- 14 files changed, 274 insertions(+), 71 deletions(-) create mode 100644 site/docs/pages/guides/use-basename-in-onchain-app.mdx create mode 100644 site/docs/pages/identity/get-address.mdx create mode 100644 site/docs/pages/identity/use-address.mdx diff --git a/playground/nextjs-app-router/components/demo/Identity.tsx b/playground/nextjs-app-router/components/demo/Identity.tsx index caa124835a..87ae8c8dd8 100644 --- a/playground/nextjs-app-router/components/demo/Identity.tsx +++ b/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 }); diff --git a/site/docs/pages/guides/contribution.mdx b/site/docs/pages/guides/contribution.mdx index bc09bfe040..5f26275682 100644 --- a/site/docs/pages/guides/contribution.mdx +++ b/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 --- diff --git a/site/docs/pages/guides/reporting-bug.mdx b/site/docs/pages/guides/reporting-bug.mdx index 157b1b0e5f..88e309a40b 100644 --- a/site/docs/pages/guides/reporting-bug.mdx +++ b/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 --- diff --git a/site/docs/pages/guides/tailwind.mdx b/site/docs/pages/guides/tailwind.mdx index 80ee08e2f8..43a58b42f7 100644 --- a/site/docs/pages/guides/tailwind.mdx +++ b/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 --- diff --git a/site/docs/pages/guides/use-basename-in-onchain-app.mdx b/site/docs/pages/guides/use-basename-in-onchain-app.mdx new file mode 100644 index 0000000000..38115fa159 --- /dev/null +++ b/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 `` and `` + +Use the [``](/identity/avatar) and [``](/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 + + +``` + + + + + + +## 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; +``` + +::: diff --git a/site/docs/pages/identity/get-address.mdx b/site/docs/pages/identity/get-address.mdx new file mode 100644 index 0000000000..3533b82492 --- /dev/null +++ b/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`](/identity/types#getaddressreturntype) + +## Parameters + +[`GetAddress`](/identity/types#getaddress) diff --git a/site/docs/pages/identity/get-name.mdx b/site/docs/pages/identity/get-name.mdx index ef850e6113..0be6e83154 100644 --- a/site/docs/pages/identity/get-name.mdx +++ b/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: diff --git a/site/docs/pages/identity/name.mdx b/site/docs/pages/identity/name.mdx index e34aab99f3..455cd95967 100644 --- a/site/docs/pages/identity/name.mdx +++ b/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'; - // [!code focus] + +const address = '0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1'; + // [!code focus] ``` @@ -24,7 +26,9 @@ Address with a Basename: ```tsx import { Name } from '@coinbase/onchainkit/identity'; import { base } from 'viem/chains'; // [!code focus] - // [!code focus] + +const address = '0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1'; + // [!code focus] ``` @@ -37,9 +41,11 @@ You can override component styles using `className`. ```tsx import { Name } from '@coinbase/onchainkit/identity'; + +const 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'; // [!code focus] // [!code focus] diff --git a/site/docs/pages/identity/types.mdx b/site/docs/pages/identity/types.mdx index 802b04ccf8..d893062adf 100644 --- a/site/docs/pages/identity/types.mdx +++ b/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; // 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. -}; -``` diff --git a/site/docs/pages/identity/use-address.mdx b/site/docs/pages/identity/use-address.mdx new file mode 100644 index 0000000000..555bc694cf --- /dev/null +++ b/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>`](/identity/types#getaddressreturntype) + +## Parameters + +[`UseAddressOptions`](/identity/types#useaddressoptions) +[`UseQueryOptions`](/identity/types#usequeryoptions) diff --git a/site/docs/pages/identity/use-avatar.mdx b/site/docs/pages/identity/use-avatar.mdx index ff29b202b5..365a79b2f4 100644 --- a/site/docs/pages/identity/use-avatar.mdx +++ b/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>`](/identity/types#getaddressreturntype) -type UseAvatarQueryOptions = { - enabled?: boolean; - cacheTime?: number; -}; -``` +## Parameters + +[`UseAvatarOptions`](/identity/types#useavataroptions) +[`UseQueryOptions`](/identity/types#usequeryoptions) diff --git a/site/docs/pages/identity/use-name.mdx b/site/docs/pages/identity/use-name.mdx index 05ce3dda4c..2f94753d86 100644 --- a/site/docs/pages/identity/use-name.mdx +++ b/site/docs/pages/identity/use-name.mdx @@ -3,28 +3,49 @@ The `useName` hook is used to get name from an onchain identity provider for a given address. -Supported providers: +## Usage -- ENS +Get ENS name from an address: -## Usage +:::code-group -```tsx +```tsx [code] import { useName } from '@coinbase/onchainkit/identity'; -const { data: name, isLoading } = useName({ address: '0x1234' }); +const address = '0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1'; +const { data: name, isLoading } = await useName({ address }); ``` -## Returns +```ts [return value] +{ data: 'zizzamia.eth', isLoading: false } +``` + +::: + +Get Basename from an address: + +:::code-group + +```tsx [code] +import { getName } from '@coinbase/onchainkit/identity'; +import { base } from 'viem/chains'; -```ts -type UseNameOptions = { - address: Address; // The Ethereum address for which the ENS name is to be fetched. - chain?: Chain; // Optional chain for domain resolution -}; +const address = '0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1'; +const { data: name, isLoading } = await useName({ address, chain: base }); +``` -type UseNameQueryOptions = { - enabled?: boolean; - cacheTime?: number; -}; +```ts [return value] +{ data: 'zizzamia.base.eth', isLoading: false } ``` + +::: + + +## Returns + +[`useQuery>`](/identity/types#getaddressreturntype) + +## Parameters + +[`UseNameOptions`](/identity/types#usenameoptions) +[`UseQueryOptions`](/identity/types#usequeryoptions) diff --git a/site/sidebar.ts b/site/sidebar.ts index 0fd00310d8..1a900992b7 100644 --- a/site/sidebar.ts +++ b/site/sidebar.ts @@ -24,6 +24,10 @@ export const sidebar = [ text: 'Framegear', link: '/frame/framegear', }, + { + text: 'Use Basename', + link: '/guides/use-basename-in-onchain-app', + }, ], }, { @@ -227,6 +231,10 @@ export const sidebar = [ { text: 'Identity', items: [ + { + text: 'getAddress', + link: '/identity/get-address', + }, { text: 'getAttestations', link: '/identity/get-attestations', @@ -239,6 +247,10 @@ export const sidebar = [ text: 'getName', link: '/identity/get-name', }, + { + text: 'useAddress', + link: '/identity/use-address', + }, { text: 'useAvatar', link: '/identity/use-avatar', diff --git a/src/identity/types.ts b/src/identity/types.ts index ec9f3828a0..c34f782f9a 100644 --- a/src/identity/types.ts +++ b/src/identity/types.ts @@ -91,8 +91,19 @@ export type EthBalanceReact = { }; /** - * Attestation Options - * + * Note: exported as public Type + */ +export type GetAddress = { + name: string | Basename; + chain?: Chain; +}; + +/** + * Note: exported as public Type + */ +export type GetAddressReturnType = Address | null; + +/** * Note: exported as public Type */ export type GetAttestationsOptions = { @@ -115,14 +126,6 @@ export type GetAvatar = { */ export type GetAvatarReturnType = string | null; -/** - * Note: exported as public Type - */ -export type GetAddress = { - name: string | Basename; - chain?: Chain; -}; - /** * Note: exported as public Type */ @@ -131,11 +134,6 @@ export type GetName = { chain?: Chain; }; -/** - * Note: exported as public Type - */ -export type GetAddressReturnType = Address | null; - /** * Note: exported as public Type */