docs: Implement WalletDropdownBaseName Sub-Component (#916)

coinbase · Aug 12, 2024 · e8887bc · e8887bc
1 parent 56059fa
commit e8887bc
Show file tree

Hide file tree

Showing 10 changed files with 199 additions and 30 deletions.
diff --git 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';
 
 # `<Avatar />`
 
-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';
 <Avatar address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9" /> // [!code focus]
 ```
-
 <App>
   <Avatar address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9" />
 </App>
 
-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';
 <Avatar address="0x1234567890abcdef1234567890abcdef12345678" /> // [!code focus]
 ```
-
 <App>
   <Avatar address="0x1234567890abcdef1234567890abcdef12345678" />
 </App>
 
+
+Address with a Basename avatar:
+
+```tsx
+import { Avatar } from '@coinbase/onchainkit/identity';
+import { base } from 'viem/chains'; // [!code focus]
+
+<Avatar address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF" chain={base} /> // [!code focus]
+```
+
+<App>
+  <Avatar address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF" chain={base}/>
+</App>
+
 Override styles via `className` prop:
 
 ```tsx
@@ -39,15 +51,11 @@ import { Avatar } from '@coinbase/onchainkit/identity';
   address="0x1234567890abcdef1234567890abcdef12345678"
 /> // [!code focus]
 ```
-
 <App>
   <Avatar className="bg-white rounded-full" address="0x1234567890abcdef1234567890abcdef12345678" />
 </App>
-
 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';
 <Avatar
@@ -68,7 +76,6 @@ import { Avatar } from '@coinbase/onchainkit/identity';
   )} // [!code focus]
 />
 ```
-
 <App>
   <Avatar
     address="0x1234567890abcdef1234567890abcdef12345678"
@@ -88,14 +95,10 @@ import { Avatar } from '@coinbase/onchainkit/identity';
     )}
   />
 </App>
-
 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]
-
 <Identity
   schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9" // [!code focus]
   address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
@@ -105,7 +108,6 @@ import { Avatar, Badge, Identity } from '@coinbase/onchainkit/identity'; // [!co
   </Avatar> // [!code focus]
 </Identity>
 ```
-
 <App>
   <Identity
     schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
@@ -117,7 +119,5 @@ import { Avatar, Badge, Identity } from '@coinbase/onchainkit/identity'; // [!co
     </Avatar>
   </Identity>
 </App>
-
 ## Props
-
-[`AvatarReact`](/identity/types#AvatarReact)
+[`AvatarReact`](/identity/types#AvatarReact)
diff --git 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<GetAvatarReturnType>`](/identity/types#getavatarreturntype)
diff --git 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
@@ -1,9 +1,10 @@
 import { Badge, Name, Identity, } from '@coinbase/onchainkit/identity';
 import App from '../../components/App';
+import { base } from 'viem/chains';
 
 # `<Name />`
 
-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';
   <Name address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1"/>
 </App>
 
+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]
+```
+
+<App>
+  <Name address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" chain={base}/>
+</App>
+
 ### Override styles
 
 You can override component styles using `className`.

diff --git 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
     <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com"> // [!code focus]
       Wallet // [!code focus]
     </WalletDropdownLink> // [!code focus]
+    <WalletDropdownBaseName />
     <WalletDropdownDisconnect /> // [!code focus]
   </WalletDropdown> // [!code focus]
 </Wallet> // [!code focus]
@@ -221,6 +223,7 @@ bun add @coinbase/onchainkit
       <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
         Wallet
       </WalletDropdownLink>
+      <WalletDropdownBaseName />
       <WalletDropdownDisconnect />
     </WalletDropdown>
   </Wallet>

diff --git 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
@@ -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';
+
+# `<WalletDropdownBaseName />`
+
+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 (
+    <div className="flex justify-end">
+      <Wallet>
+        <ConnectWallet>
+          <Avatar className="h-6 w-6" />
+          <Name />
+        </ConnectWallet>
+        <WalletDropdown>
+          <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
+            <Avatar />
+            <Name />
+            <Address className={color.foregroundMuted} />
+            <EthBalance />
+          </Identity>
+          <WalletDropdownBaseName /> // [!code focus] 
+          <WalletDropdownDisconnect />
+        </WalletDropdown>
+      </Wallet>
+    </div>
+  );
+}
+```
+
+<WalletComponents>
+  <Wallet>
+    <ConnectWallet text="Log In">
+      <Avatar className="h-6 w-6" />
+      <Name />
+    </ConnectWallet>
+    <WalletDropdown>
+      <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
+        <Avatar />
+        <Name />
+        <Address className={color.foregroundMuted} />
+        <EthBalance />
+      </Identity>
+      <WalletDropdownBaseName />
+      <WalletDropdownDisconnect />
+    </WalletDropdown>
+  </Wallet>
+</WalletComponents>
+
+## Props
+- [`WalletDropdownBaseNameReact`](/wallet/types#walletdropdownbasenamereact)
diff --git 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,
 - `<ConnectWallet />` - Handles the wallet connection process. Place child components inside to customize the connect button appearance.
 - `<WalletDropdown />` - Contains additional wallet information and options. Place inside the `<Wallet />` component.
 - `<Identity />` - Displays user identity information. Place inside `<WalletDropdown />` for a complete profile view.
+- `<WalletDropdownBaseName />` - Displays the user's base name within the dropdown.
 - `<WalletDropdownLink />` - Creates a custom link within the dropdown. Use the `icon` prop to add an icon, and `href` to specify the destination.
 - `<WalletDropdownDisconnect />` - 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
@@ -135,6 +135,10 @@ export const sidebar = [
             text: 'Wallet',
             link: '/wallet/wallet',
           },
+          {
+            text: 'WalletDropdownBaseName',
+            link: '/wallet/wallet-dropdown-base-name',
+          }
         ],
       },
     ]