Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Add WalletDropdownDisconnect and WalletDropdownLink page #1042

Merged
merged 12 commits into from
Aug 14, 2024
Merged

docs: Add WalletDropdownDisconnect and WalletDropdownLink page #1042

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a010953
chore: Add page for WalletDropdownDisconnect and WalletDropdownLink
cpcramer Aug 13, 2024
197d61b
Update imports
cpcramer Aug 13, 2024
3cf7c90
Update sidebar
cpcramer Aug 13, 2024
4b54b8c
Add Basenames override styles example
cpcramer Aug 13, 2024
37789e3
Add WalletDropdownDisconnect prop examples
cpcramer Aug 13, 2024
a99a9f3
Save changes
cpcramer Aug 14, 2024
4402c78
Save changes
cpcramer Aug 14, 2024
cece33d
Clean up
cpcramer Aug 14, 2024
f7f2cd0
update description
cpcramer Aug 14, 2024
9f4e8fe
clean
cpcramer Aug 14, 2024
ed2a0d3
Update exapmle to use base.org
cpcramer Aug 14, 2024
dbc1f5e
Update dropdown example to base.org
cpcramer Aug 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 46 additions & 18 deletions site/docs/pages/wallet/wallet-dropdown-base-name.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 />`
Expand All @@ -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,
Expand All @@ -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 (
Expand Down Expand Up @@ -88,5 +86,35 @@ export function WalletComponents() {
</Wallet>
</WalletComponents>

### Override styles

You can override component styles using `className`.

```tsx
// omitted for brevity

<WalletDropdownBaseName className="hover:bg-red-500" /> // [!code focus]
```

<WalletComponents>
<Wallet>
<ConnectWallet text="Log In">
<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>
<WalletDropdownBaseName className="hover:bg-red-500"/>
<WalletDropdownDisconnect />
</WalletDropdown>
</Wallet>
</WalletComponents>


## Props
- [`WalletDropdownBaseNameReact`](/wallet/types#walletdropdownbasenamereact)
139 changes: 139 additions & 0 deletions site/docs/pages/wallet/wallet-dropdown-disconnect.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

# `<WalletDropdownDisconnect />`

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 (
<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>

### Override styles

You can override component styles using `className`.

```tsx
// omitted for brevity

<WalletDropdownDisconnect className="hover:bg-red-500" /> // [!code focus]
```

<WalletComponents>
<Wallet>
<ConnectWallet text="Log In">
<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 className="hover:bg-red-500"/>
</WalletDropdown>
</Wallet>
</WalletComponents>

### Override text

You can override component text using `text`.

```tsx
// omitted for brevity

<WalletDropdownDisconnect text="Log out" /> // [!code focus]
```

<WalletComponents>
<Wallet>
<ConnectWallet text="Log In">
<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 text="Log out"/>
</WalletDropdown>
</Wallet>
</WalletComponents>

## Props
- [`WalletDropdownDisconnectReact`](/wallet/types#walletdropdowndisconnectreact)
90 changes: 90 additions & 0 deletions site/docs/pages/wallet/wallet-dropdown-link.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
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 (
<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)
18 changes: 13 additions & 5 deletions site/sidebar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,10 @@ export const sidebar = [
{
text: 'Identity',
items: [
{
text: 'Identity',
link: '/identity/identity',
},
{
text: 'Address',
link: '/identity/address',
Expand All @@ -75,10 +79,6 @@ export const sidebar = [
text: 'Badge',
link: '/identity/badge',
},
{
text: 'Identity',
link: '/identity/identity',
},
{
text: 'Name',
link: '/identity/name',
Expand Down Expand Up @@ -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',
},
],
},
]
Expand Down