chore: Add page for WalletDropdownDisconnect and WalletDropdownLink

coinbase · Aug 13, 2024 · a010953 · a010953
1 parent 7d03bf3
commit a010953
Show file tree

Hide file tree

Showing 4 changed files with 194 additions and 15 deletions.
diff --git 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';
 
 # `<WalletDropdownBaseName />`

diff --git a/site/docs/pages/wallet/wallet-dropdown-disconnect.mdx 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';
+
+# `<WalletDropdownDisconnect />`
+
+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 (
+    <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>
+          <WalletDropdownDisconnect /> // [!code focus]
+        </WalletDropdown>
+      </Wallet>
+    </div>
+  );
+}      
+```
+
+<WalletComponents>
+  <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>
+      <WalletDropdownDisconnect />
+    </WalletDropdown>
+  </Wallet>
+</WalletComponents>
+
+## 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
@@ -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';
+
+# `<WalletDropdownLink />`
+
+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 (
+    <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>
+          <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com"> // [!code focus]
+            Wallet // [!code focus]
+          </WalletDropdownLink> // [!code focus]
+          <WalletDropdownDisconnect />
+        </WalletDropdown>
+      </Wallet>
+    </div>
+  );
+}      
+```
+
+<WalletComponents>
+  <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>
+      <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
+        Wallet
+      </WalletDropdownLink>
+      <WalletDropdownDisconnect />
+    </WalletDropdown>
+  </Wallet>
+</WalletComponents>
+
+## Props 
+- [`WalletDropdownLinkReact`](/wallet/types#walletdropdownlinkreact)
diff --git 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',
-          }
         ],
       },
     ]