Skip to content

Add multichain namespace support documentation for wallet buttons #582

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

Merged
rtomas merged 2 commits into from
Jul 25, 2025
Merged

Add multichain namespace support documentation for wallet buttons #582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
956f286
Add multichain namespace support documentation for wallet buttons
devin-ai-integration[bot] Jul 22, 2025
701c557
improve for svelte
rtomas Jul 25, 2025
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
55 changes: 55 additions & 0 deletions appkit/javascript/core/actions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,6 +279,53 @@ pnpm add @reown/appkit-wallet-button

```

#### Multichain Support

You can specify a blockchain namespace to target specific chains:

```javascript
<script type="module">
import { createAppKitWalletButton } from '@reown/appkit-wallet-button';

// Create wallet buttons for different namespaces
const evmWalletButton = createAppKitWalletButton({ namespace: 'eip155' });
const solanaWalletButton = createAppKitWalletButton({ namespace: 'solana' });
const bitcoinWalletButton = createAppKitWalletButton({ namespace: 'bip122' });

function connectEVMWallet(id) {
if (evmWalletButton.isReady()) {
evmWalletButton.connect(id);
}
}

function connectSolanaWallet(id) {
if (solanaWalletButton.isReady()) {
solanaWalletButton.connect(id);
}
}

function connectBitcoinWallet(id) {
if (bitcoinWalletButton.isReady()) {
bitcoinWalletButton.connect(id);
}
}

// Attach to global scope
window.connectEVMWallet = connectEVMWallet;
window.connectSolanaWallet = connectSolanaWallet;
window.connectBitcoinWallet = connectBitcoinWallet;
</script>

<!-- Connect to Ethereum/EVM chains -->
<button onclick="connectEVMWallet('metamask')">Connect MetaMask (EVM)</button>

<!-- Connect to Solana -->
<button onclick="connectSolanaWallet('phantom')">Connect Phantom (Solana)</button>

<!-- Connect to Bitcoin -->
<button onclick="connectBitcoinWallet('leather')">Connect Leather (Bitcoin)</button>
```

<Note>
Make sure to call `createAppKitWalletButton` after `createAppKit`.
</Note>
Expand All @@ -292,6 +339,14 @@ Change the string parameter `name` from `appKitWalletButton.connect(name)` in or
| Wallets | `metamask`, `trust`, `coinbase`, `rainbow`, `coinbase`, `jupiter`, `solflare`, `coin98`, `magic-eden`, `backpack`, `frontier`, `xverse`, `okx`, `bitget`, `leather`, `binance`, `uniswap`, `safepal`, `bybit`, `phantom`, `ledger`, `timeless-x`, `safe`, `zerion`, `oneinch`, `crypto-com`, `imtoken`, `kraken`, `ronin`, `robinhood`, `exodus`, `argent`, and `tokenpocket` |
| Social logins | `google`, `github`, `apple`, `facebook`, `x`, `discord`, and `farcaster` |

#### Options for namespace property

| Value | Description |
| --------- | ------------------------------------- |
| `eip155` | Ethereum and EVM-compatible chains |
| `solana` | Solana blockchain |
| `bip122` | Bitcoin blockchain |


## themeVariables

Expand Down
23 changes: 23 additions & 0 deletions appkit/next/core/components.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,33 @@ import "@reown/appkit-wallet-button/react";
<appkit-wallet-button wallet="metamask" />
```

#### Multichain Support

You can specify a blockchain namespace to target specific chains:

```tsx
<!-- Connect to Ethereum/EVM chains -->
<appkit-wallet-button wallet="metamask" namespace="eip155" />

<!-- Connect to Solana -->
<appkit-wallet-button wallet="phantom" namespace="solana" />

<!-- Connect to Bitcoin -->
<appkit-wallet-button wallet="leather" namespace="bip122" />
```

#### Options for wallet property

| Type | Options |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| QR Code | `walletConnect` |
| Wallets | `metamask`, `trust`, `coinbase`, `rainbow`, `coinbase`, `jupiter`, `solflare`, `coin98`, `magic-eden`, `backpack`, `frontier`, `xverse`, `okx`, `bitget`, `leather`, `binance`, `uniswap`, `safepal`, `bybit`, `phantom`, `ledger`, `timeless-x`, `safe`, `zerion`, `oneinch`, `crypto-com`, `imtoken`, `kraken`, `ronin`, `robinhood`, `exodus`, `argent`, and `tokenpocket` |
| Social logins | `google`, `github`, `apple`, `facebook`, `x`, `discord`, and `farcaster` |

#### Options for namespace property

| Value | Description |
| --------- | ------------------------------------- |
| `eip155` | Ethereum and EVM-compatible chains |
| `solana` | Solana blockchain |
| `bip122` | Bitcoin blockchain |
40 changes: 40 additions & 0 deletions appkit/next/core/hooks.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,7 @@ And finally, you can use the hook in your project:

```tsx
const { isReady, isPending, connect } = useAppKitWallet({
namespace: 'eip155', // Optional: specify chain namespace
onSuccess(parsedCaipAddress) {
// Access the parsed CAIP address object
// See: https://github.com/reown-com/appkit/blob/main/packages/common/src/utils/ParseUtil.ts#L3-L7
Expand Down Expand Up @@ -261,6 +262,45 @@ AppKit supports the [top 32 wallets](https://github.com/reown-com/appkit/blob/ma
- Custom notifications
- Responsive connection states

6. **Multichain Support**
- Connect to specific blockchain namespaces
- Target wallets for specific chains (EVM, Solana, Bitcoin)

#### Multichain Examples

```tsx
// Connect to Ethereum/EVM chains
const { connect: connectEVM } = useAppKitWallet({
namespace: 'eip155',
onSuccess: (address) => console.log('Connected to EVM:', address)
})

// Connect to Solana
const { connect: connectSolana } = useAppKitWallet({
namespace: 'solana',
onSuccess: (address) => console.log('Connected to Solana:', address)
})

// Connect to Bitcoin
const { connect: connectBitcoin } = useAppKitWallet({
namespace: 'bip122',
onSuccess: (address) => console.log('Connected to Bitcoin:', address)
})

// Usage
<Button onClick={() => connectEVM("metamask")}>Connect MetaMask (EVM)</Button>
<Button onClick={() => connectSolana("phantom")}>Connect Phantom (Solana)</Button>
<Button onClick={() => connectBitcoin("leather")}>Connect Leather (Bitcoin)</Button>
```

#### Parameters

- `namespace` (optional): The blockchain namespace to target. Supported values:
- `'eip155'` - Ethereum and EVM-compatible chains
- `'solana'` - Solana blockchain
- `'bip122'` - Bitcoin blockchain
- If not specified, uses the default namespace from your AppKit configuration

## useAppKitNetwork

The network management hook that provides access to chain information and network switching capabilities. Use this hook when you need to display the current network, switch between networks, or validate network compatibility.
Expand Down
44 changes: 44 additions & 0 deletions appkit/nuxt/core/wallet-buttons.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,50 @@ onMounted(() => {
</script>
```

#### Multichain Support

You can specify a blockchain namespace to target specific chains:

```javascript
<template>
<div>
<!-- Connect to Ethereum/EVM chains -->
<button @click="() => evmWalletButton.connect('metamask')" :disabled="!isEvmReady">
Connect MetaMask (EVM)
</button>

<!-- Connect to Solana -->
<button @click="() => solanaWalletButton.connect('phantom')" :disabled="!isSolanaReady">
Connect Phantom (Solana)
</button>

<!-- Connect to Bitcoin -->
<button @click="() => bitcoinWalletButton.connect('leather')" :disabled="!isBitcoinReady">
Connect Leather (Bitcoin)
</button>
</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

const evmWalletButton = createAppKitWalletButton({ namespace: 'eip155' })
const solanaWalletButton = createAppKitWalletButton({ namespace: 'solana' })
const bitcoinWalletButton = createAppKitWalletButton({ namespace: 'bip122' })

const isEvmReady = ref(false)
const isSolanaReady = ref(false)
const isBitcoinReady = ref(false)

onMounted(() => {
isEvmReady.value = evmWalletButton.isReady()
isSolanaReady.value = solanaWalletButton.isReady()
isBitcoinReady.value = bitcoinWalletButton.isReady()
})
</script>
```

<Note>
Make sure to call wallet button methods after `createAppKit` has been initialized.
</Note>
Expand Down
23 changes: 23 additions & 0 deletions appkit/react/core/components.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,33 @@ import "@reown/appkit-wallet-button/react";
<appkit-wallet-button wallet="metamask" />
```

#### Multichain Support

You can specify a blockchain namespace to target specific chains:

```tsx
<!-- Connect to Ethereum/EVM chains -->
<appkit-wallet-button wallet="metamask" namespace="eip155" />

<!-- Connect to Solana -->
<appkit-wallet-button wallet="phantom" namespace="solana" />

<!-- Connect to Bitcoin -->
<appkit-wallet-button wallet="leather" namespace="bip122" />
```

#### Options for wallet property

| Type | Options |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| QR Code | walletConnect |
| Wallets | metamask, trust, coinbase, rainbow, coinbase, jupiter, solflare, coin98, magic-eden, backpack, frontier, xverse, okx, bitget, leather, binance, uniswap, safepal, bybit, phantom, ledger, timeless-x, safe, zerion, oneinch, crypto-com, imtoken, kraken, ronin, robinhood, exodus, argent and tokenpocket |
| Social logins | google, github, apple, facebook, x, discord and farcaster |

#### Options for namespace property

| Value | Description |
| --------- | ------------------------------------- |
| `eip155` | Ethereum and EVM-compatible chains |
| `solana` | Solana blockchain |
| `bip122` | Bitcoin blockchain |
40 changes: 40 additions & 0 deletions appkit/react/core/hooks.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,7 @@ And finally, you can use the hook in your project:

```tsx
const { isReady, isPending, connect } = useAppKitWallet({
namespace: 'eip155', // Optional: specify chain namespace
onSuccess(parsedCaipAddress) {
// Access the parsed CAIP address object
// See: https://github.com/reown-com/appkit/blob/main/packages/common/src/utils/ParseUtil.ts#L3-L7
Expand Down Expand Up @@ -261,6 +262,45 @@ AppKit supports the [top 32 wallets](https://github.com/reown-com/appkit/blob/ma
- Custom notifications
- Responsive connection states

6. **Multichain Support**
- Connect to specific blockchain namespaces
- Target wallets for specific chains (EVM, Solana, Bitcoin)

#### Multichain Examples

```tsx
// Connect to Ethereum/EVM chains
const { connect: connectEVM } = useAppKitWallet({
namespace: 'eip155',
onSuccess: (address) => console.log('Connected to EVM:', address)
})

// Connect to Solana
const { connect: connectSolana } = useAppKitWallet({
namespace: 'solana',
onSuccess: (address) => console.log('Connected to Solana:', address)
})

// Connect to Bitcoin
const { connect: connectBitcoin } = useAppKitWallet({
namespace: 'bip122',
onSuccess: (address) => console.log('Connected to Bitcoin:', address)
})

// Usage
<Button onClick={() => connectEVM("metamask")}>Connect MetaMask (EVM)</Button>
<Button onClick={() => connectSolana("phantom")}>Connect Phantom (Solana)</Button>
<Button onClick={() => connectBitcoin("leather")}>Connect Leather (Bitcoin)</Button>
```

#### Parameters

- `namespace` (optional): The blockchain namespace to target. Supported values:
- `'eip155'` - Ethereum and EVM-compatible chains
- `'solana'` - Solana blockchain
- `'bip122'` - Bitcoin blockchain
- If not specified, uses the default namespace from your AppKit configuration

## useAppKitNetwork

The network management hook that provides access to chain information and network switching capabilities. Use this hook when you need to display the current network, switch between networks, or validate network compatibility.
Expand Down
55 changes: 55 additions & 0 deletions appkit/svelte/core/actions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,53 @@ pnpm add @reown/appkit-wallet-button
Make sure to call wallet button methods after `createAppKit` has been initialized.
</Note>

### Multichain Support

You can specify a blockchain namespace to target specific chains:

```javascript
<script type="module">
import { createAppKitWalletButton } from '@reown/appkit-wallet-button';

// Create wallet buttons for different namespaces
const evmWalletButton = createAppKitWalletButton({ namespace: 'eip155' });
const solanaWalletButton = createAppKitWalletButton({ namespace: 'solana' });
const bitcoinWalletButton = createAppKitWalletButton({ namespace: 'bip122' });

function connectEVMWallet(id) {
if (evmWalletButton.isReady()) {
evmWalletButton.connect(id);
}
}

function connectSolanaWallet(id) {
if (solanaWalletButton.isReady()) {
solanaWalletButton.connect(id);
}
}

function connectBitcoinWallet(id) {
if (bitcoinWalletButton.isReady()) {
bitcoinWalletButton.connect(id);
}
}

// Attach to global scope
window.connectEVMWallet = connectEVMWallet;
window.connectSolanaWallet = connectSolanaWallet;
window.connectBitcoinWallet = connectBitcoinWallet;
</script>

<!-- Connect to Ethereum/EVM chains -->
<button onclick="connectEVMWallet('metamask')">Connect MetaMask (EVM)</button>

<!-- Connect to Solana -->
<button onclick="connectSolanaWallet('phantom')">Connect Phantom (Solana)</button>

<!-- Connect to Bitcoin -->
<button onclick="connectBitcoinWallet('leather')">Connect Leather (Bitcoin)</button>
```

#### Options for wallet property

| Type | Options |
Expand All @@ -188,6 +235,14 @@ pnpm add @reown/appkit-wallet-button
| Wallets | `metamask`, `trust`, `coinbase`, `rainbow`, `jupiter`, `solflare`, `coin98`, `magic-eden`, `backpack`, `frontier`, `xverse`, `okx`, `bitget`, `leather`, `binance`, `uniswap`, `safepal`, `bybit`, `phantom`, `ledger`, `timeless-x`, `safe`, `zerion`, `oneinch`, `crypto-com`, `imtoken`, `kraken`, `ronin`, `robinhood`, `exodus`, `argent`, `tokenpocket`, and more |
| Social logins | `google`, `github`, `apple`, `facebook`, `x`, `discord`, and `farcaster` |

#### Options for namespace property

| Value | Description |
| --------- | ------------------------------------- |
| `eip155` | Ethereum and EVM-compatible chains |
| `solana` | Solana blockchain |
| `bip122` | Bitcoin blockchain |

## Ethereum Library

<Tabs>
Expand Down
8 changes: 8 additions & 0 deletions appkit/vue/core/wallet-buttons.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,3 +73,11 @@ onMounted(() => {
| QR Code | `walletConnect` |
| Wallets | `metamask`, `trust`, `coinbase`, `rainbow`, `jupiter`, `solflare`, `coin98`, `magic-eden`, `backpack`, `frontier`, `xverse`, `okx`, `bitget`, `leather`, `binance`, `uniswap`, `safepal`, `bybit`, `phantom`, `ledger`, `timeless-x`, `safe`, `zerion`, `oneinch`, `crypto-com`, `imtoken`, `kraken`, `ronin`, `robinhood`, `exodus`, `argent`, `tokenpocket`, and more |
| Social logins | `google`, `github`, `apple`, `facebook`, `x`, `discord`, and `farcaster` |

#### Options for namespace property

| Value | Description |
| --------- | ------------------------------------- |
| `eip155` | Ethereum and EVM-compatible chains |
| `solana` | Solana blockchain |
| `bip122` | Bitcoin blockchain |