diff --git a/site/docs/pages/wallet/wallet-dropdown-base-name.mdx b/site/docs/pages/wallet/wallet-dropdown-base-name.mdx
index c33ad1add6..ac6237768e 100644
--- a/site/docs/pages/wallet/wallet-dropdown-base-name.mdx
+++ b/site/docs/pages/wallet/wallet-dropdown-base-name.mdx
@@ -1,20 +1,18 @@
import {
- ConnectWallet,
- Wallet,
- WalletDropdown,
- WalletDropdownLink,
- WalletDropdownBaseName,
- WalletDropdownDisconnect,
-} from '@coinbase/onchainkit/wallet';
-import {
Address,
Avatar,
- Name,
- Identity,
EthBalance,
+ Identity,
+ Name
} from '@coinbase/onchainkit/identity';
import { color } from '@coinbase/onchainkit/theme';
-import AppWithRK from '../../components/AppWithRK';
+import {
+ ConnectWallet,
+ Wallet,
+ WalletDropdown,
+ WalletDropdownBaseName,
+ WalletDropdownDisconnect
+} from '@coinbase/onchainkit/wallet';
import WalletComponents from '../../components/WalletComponents';
# ``
diff --git a/site/docs/pages/wallet/wallet-dropdown-disconnect.mdx b/site/docs/pages/wallet/wallet-dropdown-disconnect.mdx
new file mode 100644
index 0000000000..03ffda3ca9
--- /dev/null
+++ b/site/docs/pages/wallet/wallet-dropdown-disconnect.mdx
@@ -0,0 +1,83 @@
+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 WalletComponents from '../../components/WalletComponents';
+
+# ``
+
+The `WalletDropdownDisconnect` component is used to disconnect the wallet from the application.
+
+## Usage
+
+```tsx
+import {
+ ConnectWallet,
+ Wallet,
+ WalletDropdown,
+ WalletDropdownDisconnect, // [!code focus]
+} 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
+- [`WalletDropdownDisconnectReact`](/wallet/types#walletdropdowndisconnectreact)
diff --git a/site/docs/pages/wallet/wallet-dropdown-link.mdx b/site/docs/pages/wallet/wallet-dropdown-link.mdx
new file mode 100644
index 0000000000..db64590433
--- /dev/null
+++ b/site/docs/pages/wallet/wallet-dropdown-link.mdx
@@ -0,0 +1,90 @@
+import {
+ Address,
+ Avatar,
+ EthBalance,
+ Identity,
+ Name,
+} from '@coinbase/onchainkit/identity';
+import { color } from '@coinbase/onchainkit/theme';
+import {
+ ConnectWallet,
+ Wallet,
+ WalletDropdown,
+ WalletDropdownBaseName,
+ WalletDropdownDisconnect,
+ WalletDropdownLink,
+} from '@coinbase/onchainkit/wallet';
+import WalletComponents from '../../components/WalletComponents';
+
+# ``
+
+The `WalletDropdownLink` creates a custom link within the dropdown. Use the icon prop to add an icon, and href to specify the destination.
+
+## Usage
+
+```tsx
+import {
+ ConnectWallet,
+ Wallet,
+ WalletDropdown,
+ WalletDropdownLink, // [!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]
+ Wallet // [!code focus]
+ // [!code focus]
+
+
+
+
+ );
+}
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Wallet
+
+
+
+
+
+
+## Props
+- [`WalletDropdownLinkReact`](/wallet/types#walletdropdownlinkreact)
diff --git a/site/sidebar.ts b/site/sidebar.ts
index 37046d9fa8..12ab0ac0b5 100644
--- a/site/sidebar.ts
+++ b/site/sidebar.ts
@@ -131,14 +131,22 @@ export const sidebar = [
{
text: 'Wallet',
items: [
+ {
+ text: 'WalletDropdownBaseName',
+ link: '/wallet/wallet-dropdown-base-name',
+ },
+ {
+ text: 'WalletDropdownDisconnect',
+ link: '/wallet/wallet-dropdown-disconnect',
+ },
+ {
+ text: 'WalletDropdownLink',
+ link: '/wallet/wallet-dropdown-link',
+ },
{
text: 'Wallet',
link: '/wallet/wallet',
},
- {
- text: 'WalletDropdownBaseName',
- link: '/wallet/wallet-dropdown-base-name',
- }
],
},
]