Save progress

coinbase · Jul 30, 2024 · 2aae284 · 2aae284
1 parent 2e67f9a
commit 2aae284
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git a/.changeset/mighty-rockets-drive.md 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
@@ -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
@@ -8,6 +8,7 @@ import {
   Wallet,
   WalletDropdown,
   WalletDropdownLink,
+  WalletDropdownBaseName,
   WalletDropdownDisconnect,
 } from '@coinbase/onchainkit/wallet';
 import {
@@ -33,6 +34,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]
@@ -63,6 +65,7 @@ export function WalletComponents() {
             <Address className={color.foregroundMuted} />
             <EthBalance />
           </Identity>
+          <WalletDropdownBaseName /> // [!code focus]
           <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com"> // [!code focus]
             Go to Wallet Dashboard // [!code focus]
           </WalletDropdownLink> // [!code focus]
@@ -89,6 +92,7 @@ export function WalletComponents() {
         <Address className={color.foregroundMuted} />
         <EthBalance />
       </Identity>
+      <WalletDropdownBaseName /> 
       <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
         Go to Wallet Dashboard
       </WalletDropdownLink>
@@ -121,6 +125,7 @@ You can override component styles using `className`.
       <Address />
       <EthBalance />
     </Identity>
+    <WalletDropdownBaseName /> 
     <WalletDropdownLink 
       className='hover:bg-blue-200' 
       icon="wallet" 
@@ -148,6 +153,7 @@ You can override component styles using `className`.
         <Address className={color.foregroundMuted} />
         <EthBalance />
       </Identity>
+      <WalletDropdownBaseName /> 
       <WalletDropdownLink 
         className='hover:bg-blue-200' 
         icon="wallet" 
@@ -218,6 +224,7 @@ OnchainKit leverages [RainbowKit](https://www.rainbowkit.com/) to offer this fea
       <Address />
       <EthBalance />
     </Identity>
+    <WalletDropdownBaseName /> 
     <WalletDropdownLink 
       icon="wallet" 
       href="https://wallet.coinbase.com"
@@ -314,6 +321,7 @@ export default OnchainProviders;
           <Address className={color.foregroundMuted} />
           <EthBalance />
         </Identity>
+        <WalletDropdownBaseName /> 
         <WalletDropdownLink 
           icon="wallet" 
           href="https://wallet.coinbase.com"
@@ -334,6 +342,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.
 
@@ -352,5 +361,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)