diff --git a/site/docs/pages/identity/avatar.mdx b/site/docs/pages/identity/avatar.mdx index b7bac979e6..cc0f16980e 100644 --- a/site/docs/pages/identity/avatar.mdx +++ b/site/docs/pages/identity/avatar.mdx @@ -1,35 +1,47 @@ import { Avatar, Badge, Identity } from '@coinbase/onchainkit/identity'; import App from '../../components/App'; +import { base } from 'viem/chains'; # `` -The `Avatar` component is used to display ENS avatar associated with Ethereum addresses. -When an ENS avatar is not available, it defaults to blue color avatar. +The `Avatar` component is used to display ENS or [Basenames](https://www.base.org/names) avatar associated with Ethereum addresses. +When an avatar is not available, it defaults to blue color avatar. ## Usage Address with an ENS avatar: - ```tsx import { Avatar } from '@coinbase/onchainkit/identity'; // [!code focus] ``` - -Address without an ENS avatar, and it defaults to a plain avatar: +Address without an ENS or Basenames avatar defaults to a plain avatar: ```tsx import { Avatar } from '@coinbase/onchainkit/identity'; // [!code focus] ``` - + +Address with a Basename avatar: + +```tsx +import { Avatar } from '@coinbase/onchainkit/identity'; +import { base } from 'viem/chains'; // [!code focus] + + // [!code focus] +``` + + + + + Override styles via `className` prop: ```tsx @@ -39,15 +51,11 @@ import { Avatar } from '@coinbase/onchainkit/identity'; address="0x1234567890abcdef1234567890abcdef12345678" /> // [!code focus] ``` - - Use `defaultComponent` prop to change the default avatar when ENS avatar is not found. - Use `loadingComponent` prop to change the loading placeholder: - ```tsx import { Avatar } from '@coinbase/onchainkit/identity'; ``` - - Show attestation on ENV avatar with [`Badge`](/identity/badge) component. - Use [`OnchainKitProvider`](/config/onchainkit-provider) or [`Identity`](/identity/identity) component with the `schemaId` prop. - ```tsx import { Avatar, Badge, Identity } from '@coinbase/onchainkit/identity'; // [!code focus] - // [!code focus] ``` - - ## Props - -[`AvatarReact`](/identity/types#AvatarReact) +[`AvatarReact`](/identity/types#AvatarReact) \ No newline at end of file diff --git a/site/docs/pages/identity/get-avatar.mdx b/site/docs/pages/identity/get-avatar.mdx index 93d74fb4fc..e58a9e920e 100644 --- a/site/docs/pages/identity/get-avatar.mdx +++ b/site/docs/pages/identity/get-avatar.mdx @@ -8,16 +8,44 @@ use it with Next.js or any Node.js backend. Supported providers: +- [Basenames](https://www.base.org/names) - ENS ## Usage -```tsx +Get Basename avatar: + +:::code-group +```tsx [code] import { getAvatar } from '@coinbase/onchainkit/identity'; +import { base, mainnet } from 'viem/chains'; + +const baseAvatar = await getAvatar({ ensName: 'paulcramer.eth', chain: base }); +``` -const avatar = await getAvatar({ ensName: 'vitalik.eth' }); +```ts [return value] +https://zku9gdedgba48lmr.public.blob.vercel-storage.com/basenames/avatar/paul.base.eth/1722120524815/FWUzoZmJ_400x400-kWjr2gMvjNe9hHMs9Z9LxGVGIME3By.jpg ``` +::: + +Get ENS avatar: + +:::code-group + +```tsx [code] +import { getAvatar } from '@coinbase/onchainkit/identity'; +import { mainnet } from 'viem/chains'; + +const ensAvatar = await getAvatar({ ensName: 'paulcramer.eth', chain: mainnet }); +``` + +```ts [return value] +https://euc.li/paulcramer.eth; +``` + +::: + ## Returns [`Promise`](/identity/types#getavatarreturntype) diff --git a/site/docs/pages/identity/get-name.mdx b/site/docs/pages/identity/get-name.mdx index f303bf3d74..ef850e6113 100644 --- a/site/docs/pages/identity/get-name.mdx +++ b/site/docs/pages/identity/get-name.mdx @@ -8,6 +8,7 @@ use it with Next.js or any Node.js backend. Supported providers: +- [Basenames](https://www.base.org/names) - ENS ## Usage @@ -27,6 +28,25 @@ const name = await getName({ address }); zizzamia.eth; ``` +::: + +Get Basename from an address: + +:::code-group + +```tsx [code] +import { getName } from '@coinbase/onchainkit/identity'; +import { base } from 'viem/chains'; + +const address = '0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1'; +const name = await getName({ address, chain: base }); +``` + +```ts [return value] +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 c1731db150..e34aab99f3 100644 --- a/site/docs/pages/identity/name.mdx +++ b/site/docs/pages/identity/name.mdx @@ -1,9 +1,10 @@ import { Badge, Name, Identity, } from '@coinbase/onchainkit/identity'; import App from '../../components/App'; +import { base } from 'viem/chains'; # `` -The `Name` component is used to display ENS names associated with Ethereum addresses. +The `Name` component is used to display ENS or [Basenames](https://www.base.org/names) associated with Ethereum addresses. ## Usage @@ -18,6 +19,18 @@ import { Name } from '@coinbase/onchainkit/identity'; +Address with a Basename: + +```tsx +import { Name } from '@coinbase/onchainkit/identity'; +import { base } from 'viem/chains'; // [!code focus] + // [!code focus] +``` + + + + + ### Override styles You can override component styles using `className`. diff --git a/site/docs/pages/index.mdx b/site/docs/pages/index.mdx index d5e0966eab..984dde2606 100644 --- a/site/docs/pages/index.mdx +++ b/site/docs/pages/index.mdx @@ -16,6 +16,7 @@ import { ConnectWallet, Wallet, WalletDropdown, + WalletDropdownBaseName, WalletDropdownLink, WalletDropdownDisconnect, } from '@coinbase/onchainkit/wallet'; @@ -197,6 +198,7 @@ bun add @coinbase/onchainkit // [!code focus] Wallet // [!code focus] // [!code focus] + // [!code focus] // [!code focus] // [!code focus] @@ -221,6 +223,7 @@ bun add @coinbase/onchainkit Wallet + diff --git a/site/docs/pages/wallet/types.mdx b/site/docs/pages/wallet/types.mdx index f60599d3bd..b8a617f0a8 100644 --- a/site/docs/pages/wallet/types.mdx +++ b/site/docs/pages/wallet/types.mdx @@ -56,6 +56,14 @@ type WalletReact = { }; ``` +## `WalletDropdownBaseNameReact` + +```ts +type WalletDropdownBaseNameReact = { + className?: string; // Optional className override for the element +}; +``` + ## `WalletDropdownReact` ```ts diff --git a/site/docs/pages/wallet/wallet-dropdown-base-name.mdx b/site/docs/pages/wallet/wallet-dropdown-base-name.mdx new file mode 100644 index 0000000000..c33ad1add6 --- /dev/null +++ b/site/docs/pages/wallet/wallet-dropdown-base-name.mdx @@ -0,0 +1,92 @@ +import { + ConnectWallet, + Wallet, + WalletDropdown, + WalletDropdownLink, + WalletDropdownBaseName, + WalletDropdownDisconnect, +} from '@coinbase/onchainkit/wallet'; +import { + Address, + Avatar, + Name, + Identity, + EthBalance, +} from '@coinbase/onchainkit/identity'; +import { color } from '@coinbase/onchainkit/theme'; +import AppWithRK from '../../components/AppWithRK'; +import WalletComponents from '../../components/WalletComponents'; + +# `` + +The `WalletDropdownBaseName` component adds a [Basename](https://www.base.org/names) tab to the Wallet Component. This tab serves two purposes: + +1. For users with a Basename: It provides a link to their Base Name profile page. +2. For users without a Basename: It provides a link to a page where they can create one. + +This component enhances the wallet interface by providing easy access to Base Name functionality, whether for viewing an existing profile or setting up a new one. + +## Usage + +```tsx +import { + ConnectWallet, + Wallet, + WalletDropdown, + WalletDropdownBaseName, // [!code focus] + WalletDropdownDisconnect, +} from '@coinbase/onchainkit/wallet'; +import { + Address, + Avatar, + Name, + Identity, + EthBalance, +} from '@coinbase/onchainkit/identity'; +import { color } from '@coinbase/onchainkit/theme'; + +export function WalletComponents() { + return ( +
+ + + + + + + + + +
+ + + // [!code focus] + + + +
+ ); +} +``` + + + + + + + + + + + +
+ + + + + + + + +## Props +- [`WalletDropdownBaseNameReact`](/wallet/types#walletdropdownbasenamereact) diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx index 4677509bea..627878feda 100644 --- a/site/docs/pages/wallet/wallet.mdx +++ b/site/docs/pages/wallet/wallet.mdx @@ -356,6 +356,7 @@ The components are designed to work together hierarchically. For each component, - `` - Handles the wallet connection process. Place child components inside to customize the connect button appearance. - `` - Contains additional wallet information and options. Place inside the `` component. - `` - Displays user identity information. Place inside `` for a complete profile view. +- `` - Displays the user's base name within the dropdown. - `` - Creates a custom link within the dropdown. Use the `icon` prop to add an icon, and `href` to specify the destination. - `` - Provides a disconnect option within the dropdown. @@ -374,5 +375,6 @@ The Wallet component automatically handles the wallet connection state and updat - [`WalletReact`](/wallet/types#walletreact) - [`ConnectWalletReact`](/wallet/types#connectwalletreact) - [`WalletDropdownReact`](/wallet/types#walletdropdownreact) +- [`WalletDropdownBaseNameReact`](/wallet/types#walletdropdownbasenamereact) - [`WalletDropdownDisconnectReact`](/wallet/types#walletdropdowndisconnectreact) - [`WalletDropdownLinkReact`](/wallet/types#walletdropdownlinkreact) diff --git a/site/sidebar.ts b/site/sidebar.ts index aea92c1e9a..37046d9fa8 100644 --- a/site/sidebar.ts +++ b/site/sidebar.ts @@ -135,6 +135,10 @@ export const sidebar = [ text: 'Wallet', link: '/wallet/wallet', }, + { + text: 'WalletDropdownBaseName', + link: '/wallet/wallet-dropdown-base-name', + } ], }, ] diff --git a/src/internal/svg/baseNameSvg.tsx b/src/internal/svg/baseNameSvg.tsx index 0d5318cbfe..7541914112 100644 --- a/src/internal/svg/baseNameSvg.tsx +++ b/src/internal/svg/baseNameSvg.tsx @@ -12,13 +12,12 @@ export const baseNameSvg = ( fill="none" className="h-full w-full" > - - + + + );