From c443f29fa422dde2c0c814fe091b704427987b5b Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Wed, 14 Aug 2024 14:01:29 -0700 Subject: [PATCH] docs: added WalletDropdownDisconnect and WalletDropdownLink page (#1042) --- .../walletDropdownLinkCustomBaseIconSvg.tsx | 244 ++++++++++++++++++ .../wallet/wallet-dropdown-base-name.mdx | 63 +++-- .../wallet/wallet-dropdown-disconnect.mdx | 139 ++++++++++ .../pages/wallet/wallet-dropdown-link.mdx | 195 ++++++++++++++ site/sidebar.ts | 18 +- 5 files changed, 636 insertions(+), 23 deletions(-) create mode 100644 site/docs/components/svg/walletDropdownLinkCustomBaseIconSvg.tsx create mode 100644 site/docs/pages/wallet/wallet-dropdown-disconnect.mdx create mode 100644 site/docs/pages/wallet/wallet-dropdown-link.mdx diff --git a/site/docs/components/svg/walletDropdownLinkCustomBaseIconSvg.tsx b/site/docs/components/svg/walletDropdownLinkCustomBaseIconSvg.tsx new file mode 100644 index 0000000000..e8fbc2c9fb --- /dev/null +++ b/site/docs/components/svg/walletDropdownLinkCustomBaseIconSvg.tsx @@ -0,0 +1,244 @@ +export const walletDropdownLinkCustomBaseIconSvg = ( + + + + + + + + + + + + + + + + + + +); diff --git a/site/docs/pages/wallet/wallet-dropdown-base-name.mdx b/site/docs/pages/wallet/wallet-dropdown-base-name.mdx index c33ad1add6..eccab09483 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'; # `` @@ -29,13 +27,6 @@ This component enhances the wallet interface by providing easy access to Base Na ## Usage ```tsx -import { - ConnectWallet, - Wallet, - WalletDropdown, - WalletDropdownBaseName, // [!code focus] - WalletDropdownDisconnect, -} from '@coinbase/onchainkit/wallet'; import { Address, Avatar, @@ -44,6 +35,13 @@ import { EthBalance, } from '@coinbase/onchainkit/identity'; import { color } from '@coinbase/onchainkit/theme'; +import { + ConnectWallet, + Wallet, + WalletDropdown, + WalletDropdownBaseName, // [!code focus] + WalletDropdownDisconnect, +} from '@coinbase/onchainkit/wallet'; export function WalletComponents() { return ( @@ -88,5 +86,34 @@ export function WalletComponents() { +### Override styles + +You can override component styles using `className`. + +```tsx +// omitted for brevity + + // [!code focus] +``` + + + + + + + + + + + +
+ + + + + + + + ## Props - [`WalletDropdownBaseNameReact`](/wallet/types#walletdropdownbasenamereact) 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..30d0fbafee --- /dev/null +++ b/site/docs/pages/wallet/wallet-dropdown-disconnect.mdx @@ -0,0 +1,139 @@ +import { + Address, + Avatar, + Name, + Identity, + EthBalance, +} from '@coinbase/onchainkit/identity'; +import { color } from '@coinbase/onchainkit/theme'; +import { + ConnectWallet, + Wallet, + WalletDropdown, + WalletDropdownLink, + WalletDropdownBaseName, + WalletDropdownDisconnect, +} from '@coinbase/onchainkit/wallet'; +import WalletComponents from '../../components/WalletComponents'; + +# `` + +The `WalletDropdownDisconnect` component is used to disconnect the wallet from the application. + +## Usage + +```tsx +import { + Address, + Avatar, + Name, + Identity, + EthBalance, +} from '@coinbase/onchainkit/identity'; +import { color } from '@coinbase/onchainkit/theme'; +import { + ConnectWallet, + Wallet, + WalletDropdown, + WalletDropdownDisconnect, // [!code focus] +} from '@coinbase/onchainkit/wallet'; + +export function WalletComponents() { + return ( +
+ + + + + + + + + +
+ + + // [!code focus] + + +
+ ); +} +``` + + + + + + + + + + + +
+ + + + + + + +### Override styles + +You can override component styles using `className`. + +```tsx +// omitted for brevity + + // [!code focus] +``` + + + + + + + + + + + +
+ + + + + + + +### Override text + +You can override component text using `text`. + +```tsx +// omitted for brevity + + // [!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..abe3c1d728 --- /dev/null +++ b/site/docs/pages/wallet/wallet-dropdown-link.mdx @@ -0,0 +1,195 @@ +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'; +import { walletDropdownLinkCustomBaseIconSvg } from '../../components/svg/walletDropdownLinkCustomBaseIconSvg' + +# `` + +The `WalletDropdownLink` component creates customizable, interactive links within the wallet dropdown menu. + +## Usage + +```tsx +import { + Address, + Avatar, + Name, + Identity, + EthBalance, +} from '@coinbase/onchainkit/identity'; +import { color } from '@coinbase/onchainkit/theme'; +import { + ConnectWallet, + Wallet, + WalletDropdown, + WalletDropdownLink, // [!code focus] + WalletDropdownDisconnect, +} from '@coinbase/onchainkit/wallet'; + +export function WalletComponents() { + return ( +
+ + + + + + + + + +
+ + + // [!code focus] + Wallet // [!code focus] + // [!code focus] + + + +
+ ); +} +``` + + + + + + + + + + + +
+ + + + Wallet + + + + + + +### Custom link +Add a custom link to the wallet dropdown menu, allowing users to navigate to external resources directly from the wallet interface. + +```tsx +// omitted for brevity + // [!code focus] + Base.org // [!code focus] + // [!code focus] +``` + + + + + + + + + + + +
+ + + + Base.org + + + + + + +### Custom children components +Accepts React children, enabling the use of custom elements, styled text, icons, and complex components. +This allows for diverse customizations, including complex layouts and conditional rendering based on your app's state. + +```tsx +// omitted for brevity + // [!code focus] + Profile // [!code focus] + 🔵 // [!code focus] + // [!code focus] +``` + + + + + + + + + + + +
+ + + + Profile + 🔵 + + + + + + +### Override styles +You can override component styles using className. + +```tsx +// omitted for brevity + // [!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..bb58180f0c 100644 --- a/site/sidebar.ts +++ b/site/sidebar.ts @@ -63,6 +63,10 @@ export const sidebar = [ { text: 'Identity', items: [ + { + text: 'Identity', + link: '/identity/identity', + }, { text: 'Address', link: '/identity/address', @@ -75,10 +79,6 @@ export const sidebar = [ text: 'Badge', link: '/identity/badge', }, - { - text: 'Identity', - link: '/identity/identity', - }, { text: 'Name', link: '/identity/name', @@ -138,7 +138,15 @@ export const sidebar = [ { text: 'WalletDropdownBaseName', link: '/wallet/wallet-dropdown-base-name', - } + }, + { + text: 'WalletDropdownDisconnect', + link: '/wallet/wallet-dropdown-disconnect', + }, + { + text: 'WalletDropdownLink', + link: '/wallet/wallet-dropdown-link', + }, ], }, ]