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.

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

chore: update + cleanup wallet docs #1671

Merged
merged 2 commits into from
Nov 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
14 changes: 12 additions & 2 deletions site/docs/pages/config/onchainkit-provider.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const App = () => {
| [`apiKey`](#apikey) | Client API Key from Coinbase Developer Platform. | No |
| [`rpcUrl`](#rpc-url) | RPC URL for onchain requests. | No |
| [`projectId`](#project-id) | Your Coinbase Developer Platform Project ID. | No |
| [`config`](#config) | - `config.appearance` — customized your OnchainKit project's appearance <br /> - `config.paymaster` — Paymaster URL for gas sponsorship | No |
| [`config`](#config) | - `config.appearance` — Customize your OnchainKit project's appearance <br /> - `config.paymaster` — Paymaster URL for gas sponsorship <br /> - `config.wallet` — Wallet configuration options | No |
| [`schemaId`](#schema-id) | _[Deprecation Pending]_ The schema ID for attestations from the Ethereum Attestation Service (EAS). | No |
| [`address`](#address) | _[Deprecation Pending]_ This prop is no longer used. | No |

Expand Down Expand Up @@ -109,7 +109,7 @@ You can obtain a Project ID from the [Coinbase Developer Platform](https://porta
`config` is an object that can be used to customize the appearance and behavior
of the OnchainKit components.

This prop has two keys: `appearance` and `paymaster`.
This prop has three keys: `appearance`, `paymaster`, and `wallet`.

#### Appearance

Expand All @@ -129,6 +129,16 @@ Explore appearance options in the [OnchainKit Playground](https://onchainkit.xyz
You can configure your Paymaster and obtain your Paymaster URL from the
[Coinbase Developer Platform](https://portal.cdp.coinbase.com/products/bundler-and-paymaster).

#### Wallet

`wallet` configures the wallet connection experience and has the following properties:

- `display` — The display mode for the wallet interface. Can be either:
- `'modal'` — Shows wallet connection in a modal overlay with wallet aggregation
- `'classic'` — Shows wallet connection in the traditional inline style
- `termsUrl` — URL to your terms of service
- `privacyUrl` — URL to your privacy policy

---

### Address _[Deprecation Pending]_
Expand Down
59 changes: 19 additions & 40 deletions site/docs/pages/wallet/wallet.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,9 @@ import {
</Wallet>
</WalletComponents>

### Customize Connect button text and style
::::

## Customize Connect button text and style

Each OnchainKit component offers the flexibility to customize `className`
and adjust the style of the React components it represents.
Expand Down Expand Up @@ -317,49 +319,23 @@ import { color } from '@coinbase/onchainkit/theme';
</Wallet>
</WalletComponents>

### Implementing the Wallet Modal for wallet connection aggregation
## Using Wallet Modal

<img alt="Wallet Modal"
src="https://onchainkit.xyz/assets/wallet-modal.gif"
height="364"/>

OnchainKit provides a built-in wallet modal that offers users multiple connection options. The modal automatically appears when users click the `ConnectWallet` component and provides three distinct connection paths:
Wallet modal offers users multiple wallet connection options. The modal automatically appears when users click the `ConnectWallet` component and provides three distinct connection paths:

1. Quickly create a new smart wallet for new users
2. Coinbase Wallet connection (supporting both smart wallets and EOA)
3. Other wallets via WalletConnect
3. Other wallets via [WalletConnect](https://docs.walletconnect.org/)

#### Setup Steps
### Setup Steps

1. Configure the wallet connectors in your Wagmi config:

```tsx [wagmiConfig.ts]
const wagmiConfig = createConfig({
chains: [base, baseSepolia],
connectors: [
// Smart wallet support
coinbaseWallet({
appName: 'Your App',
preference: 'smartWalletOnly',
}),
// EOA wallet support
coinbaseWallet({
appName: 'Your App',
preference: 'eoaOnly',
}),
// Other wallets via WalletConnect
walletConnect({ // [!code focus]
projectId: process.env.WALLET_CONNECT_PROJECT_ID, // [!code focus]
showQrModal: true, // [!code focus]
metadata: { // [!code focus]
name: 'Your App', // [!code focus]
description: 'Your app description', // [!code focus]
url: 'https://your-app.com', // [!code focus]
icons: [], // [!code focus]
},
}),
],
// ... other config
});
```
::::steps

2. Configure the `OnchainKitProvider` with modal settings:
## Configure the `OnchainKitProvider` with modal settings:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the parent here is a three-hash (### Setup Steps) so i'd make this a four-hash


```tsx [providers.tsx]
<OnchainKitProvider
Expand All @@ -383,7 +359,7 @@ const wagmiConfig = createConfig({
</OnchainKitProvider>
```

3. Use the `ConnectWallet` component in your UI:
## Use the `ConnectWallet` component in your UI:

```tsx [App.tsx]
<Wallet>
Expand Down Expand Up @@ -429,9 +405,11 @@ const wagmiConfig = createConfig({
</div>
</AppWithWalletModal>

## Examples
::::

## Example usage

### With Sign In With Ethereum (SIWE)
### Usage with Sign In With Ethereum (SIWE)

To use [Sign In With Ethereum (SIWE)](https://docs.login.xyz/general-information/siwe-overview) with OnchainKit, you can use the `onConnect` prop in the `<ConnectWallet />` component. This will trigger the SIWE prompt when the user connects their wallet.

Expand Down Expand Up @@ -466,6 +444,7 @@ The components are designed to work together hierarchically. For each component,

- `<Wallet />` - Serves as the main container for all wallet-related components.
- `<ConnectWallet />` - Handles the wallet connection process. Place child components inside to customize the connect button appearance.
- `<AppWithWalletModal />` - Enables a wallet aggregation experience.
- `<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 Basename within the dropdown.
Expand Down
Binary file added site/docs/public/assets/wallet-modal.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading