From 38cacc24b42cda6fed50a1b076599bf082512bc3 Mon Sep 17 00:00:00 2001
From: Paul Cramer <paulccramer@gmail.com>
Date: Fri, 26 Jul 2024 16:49:05 -0700
Subject: [PATCH] Save progress

---
 .changeset/mighty-rockets-drive.md |  5 +++++
 site/docs/pages/wallet/types.mdx   |  8 ++++++++
 site/docs/pages/wallet/wallet.mdx  | 10 ++++++++++
 3 files changed, 23 insertions(+)
 create mode 100644 .changeset/mighty-rockets-drive.md

diff --git a/.changeset/mighty-rockets-drive.md b/.changeset/mighty-rockets-drive.md
new file mode 100644
index 0000000000..b49a1155ea
--- /dev/null
+++ b/.changeset/mighty-rockets-drive.md
@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+-**docs**: Implement WalletDropdownBaseName Sub-Component. By @cpcramer #916
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.mdx b/site/docs/pages/wallet/wallet.mdx
index 4677509bea..3baacd135e 100644
--- a/site/docs/pages/wallet/wallet.mdx
+++ b/site/docs/pages/wallet/wallet.mdx
@@ -8,6 +8,7 @@ import {
   Wallet,
   WalletDropdown,
   WalletDropdownLink,
+  WalletDropdownBaseName,
   WalletDropdownDisconnect,
 } from '@coinbase/onchainkit/wallet';
 import {
@@ -32,6 +33,7 @@ import { // [!code focus]
   ConnectWallet, // [!code focus]
   Wallet, // [!code focus]
   WalletDropdown, // [!code focus]
+  WalletDropdownBaseName, // [!code focus]
   WalletDropdownLink, // [!code focus]
   WalletDropdownDisconnect, // [!code focus]
 } from '@coinbase/onchainkit/wallet'; // [!code focus]
@@ -59,6 +61,7 @@ export function WalletComponents() {
             <Address className={color.foregroundMuted} />
             <EthBalance />
           </Identity>
+          <WalletDropdownBaseName /> // [!code focus]
           <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com"> // [!code focus]
             Wallet // [!code focus]
           </WalletDropdownLink> // [!code focus]
@@ -83,6 +86,7 @@ export function WalletComponents() {
         <Address className={color.foregroundMuted} />
         <EthBalance />
       </Identity>
+      <WalletDropdownBaseName /> 
       <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
         Wallet
       </WalletDropdownLink>
@@ -113,6 +117,7 @@ You can override component styles using `className`.
       <Address />
       <EthBalance />
     </Identity>
+    <WalletDropdownBaseName /> 
     <WalletDropdownLink 
       className='hover:bg-blue-200' 
       icon="wallet" 
@@ -138,6 +143,7 @@ You can override component styles using `className`.
         <Address className={color.foregroundMuted} />
         <EthBalance />
       </Identity>
+      <WalletDropdownBaseName /> 
       <WalletDropdownLink 
         className='hover:bg-blue-200' 
         icon="wallet" 
@@ -242,6 +248,7 @@ OnchainKit leverages [RainbowKit](https://www.rainbowkit.com/) to offer this fea
       <Address />
       <EthBalance />
     </Identity>
+    <WalletDropdownBaseName /> 
     <WalletDropdownLink 
       icon="wallet" 
       href="https://wallet.coinbase.com"
@@ -336,6 +343,7 @@ export default OnchainProviders;
           <Address className={color.foregroundMuted} />
           <EthBalance />
         </Identity>
+        <WalletDropdownBaseName /> 
         <WalletDropdownLink 
           icon="wallet" 
           href="https://wallet.coinbase.com"
@@ -356,6 +364,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 +383,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)