Skip to content

Commit 3cf1cc0

Browse files
rohit-710rohit-710
authored
Merge pull request #675 from reown-com/mintlify/appkit-react-wallet-buttons-guide-40719
Add AppKit React wallet buttons guide
2 parents ae021ba + 84d489b commit 3cf1cc0

File tree

2 files changed

+162
-0
lines changed

2 files changed

+162
-0
lines changed

‎appkit/recipes/wallet-buttons-react.mdx‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
---
2+
title: "How to Use Wallet Buttons in AppKit React"
3+
sidebarTitle: "Wallet Buttons in React"
4+
---
5+
6+
Learn how to use wallet buttons in AppKit React to provide direct connection options for MetaMask, Trust Wallet, and other wallets without opening the traditional modal.
7+
8+
---
9+
10+
In this recipe, you will learn how to:
11+
12+
- Install and set up wallet buttons in your React application.
13+
- Create custom wallet connection buttons for MetaMask and Trust Wallet.
14+
- Customize wallet buttons for different blockchain namespaces.
15+
16+
This guide takes approximately 10 minutes to complete.
17+
18+
Let's dive in!
19+
20+
<Frame>
21+
<img src="/images/assets/walletButtons.jpg" />
22+
</Frame>
23+
24+
## Prerequisites
25+
26+
- A fundamental understanding of JavaScript and React.
27+
- A minimal installation of AppKit in React.
28+
- Obtain a new project Id on Reown Dashboard at https://dashboard.reown.com
29+
30+
## What are wallet buttons?
31+
32+
Using the wallet button components ([Demo in our Lab](https://appkit-lab.reown.com/appkit/?name=wagmi)), you can directly connect to the top 20 wallets, WalletConnect QR, and all the social logins. This component allows you to customize your dApp, enabling users to connect their wallets effortlessly, all without the need to open the traditional modal.
33+
34+
## Installation
35+
36+
Install the wallet button package in your React project:
37+
38+
<CodeGroup>
39+
40+
```bash npm
41+
npm install @reown/appkit-wallet-button
42+
```
43+
44+
```bash Yarn
45+
yarn add @reown/appkit-wallet-button
46+
```
47+
48+
```bash Bun
49+
bun a @reown/appkit-wallet-button
50+
```
51+
52+
```bash pnpm
53+
pnpm add @reown/appkit-wallet-button
54+
```
55+
56+
</CodeGroup>
57+
58+
## Basic usage
59+
60+
### Step 1: Import the library
61+
62+
Import the wallet button library in your React component:
63+
64+
```tsx
65+
import "@reown/appkit-wallet-button/react";
66+
```
67+
68+
### Step 2: Add wallet buttons to your component
69+
70+
Use the `<appkit-wallet-button />` web component to create connection buttons for specific wallets:
71+
72+
```tsx
73+
function App() {
74+
return (
75+
<div>
76+
<h1>Connect Your Wallet</h1>
77+
78+
{/* MetaMask button */}
79+
<appkit-wallet-button wallet="metamask" />
80+
81+
{/* Trust Wallet button */}
82+
<appkit-wallet-button wallet="trust" />
83+
</div>
84+
);
85+
}
86+
87+
export default App;
88+
```
89+
90+
That's it! The wallet buttons will automatically handle the connection flow for the specified wallets.
91+
92+
## Multichain support
93+
94+
You can specify a blockchain namespace to target specific chains:
95+
96+
```tsx
97+
{/* Connect to Ethereum/EVM chains */}
98+
<appkit-wallet-button wallet="metamask" namespace="eip155" />
99+
100+
{/* Connect to Solana */}
101+
<appkit-wallet-button wallet="phantom" namespace="solana" />
102+
103+
{/* Connect to Bitcoin */}
104+
<appkit-wallet-button wallet="leather" namespace="bip122" />
105+
```
106+
107+
## Complete example
108+
109+
Here's a complete example showing MetaMask and Trust Wallet buttons with EVM support:
110+
111+
```tsx
112+
import "@reown/appkit-wallet-button/react";
113+
114+
function WalletConnection() {
115+
return (
116+
<div style={{ padding: "20px" }}>
117+
<h1>Connect to Your Wallet</h1>
118+
<p>Choose your preferred wallet to connect:</p>
119+
120+
<div style={{ display: "flex", gap: "10px", marginTop: "20px" }}>
121+
{/* MetaMask button for EVM chains */}
122+
<appkit-wallet-button wallet="metamask" namespace="eip155" />
123+
124+
{/* Trust Wallet button for EVM chains */}
125+
<appkit-wallet-button wallet="trust" namespace="eip155" />
126+
</div>
127+
128+
<div style={{ marginTop: "20px" }}>
129+
{/* WalletConnect QR code option */}
130+
<appkit-wallet-button wallet="walletConnect" />
131+
</div>
132+
</div>
133+
);
134+
}
135+
136+
export default WalletConnection;
137+
```
138+
139+
## Available wallet options
140+
141+
You can use the wallet button component with any of the following options:
142+
143+
| Type | Options |
144+
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
145+
| QR Code | walletConnect |
146+
| 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 and tokenpocket |
147+
| Social logins | google, github, apple, facebook, x, discord and farcaster |
148+
149+
## Namespace options
150+
151+
| Value | Description |
152+
| --------- | ------------------------------------- |
153+
| `eip155` | Ethereum and EVM-compatible chains |
154+
| `solana` | Solana blockchain |
155+
| `bip122` | Bitcoin blockchain |
156+
157+
## Conclusion
158+
159+
By following this guide, you've learned how to implement wallet buttons in your React application using AppKit. This provides a streamlined connection experience for your users, allowing them to connect directly to their preferred wallets like MetaMask and Trust Wallet without opening the full modal.
160+
161+
Keep exploring AppKit to enhance your dApp's functionality and user experience!

‎docs.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@
8787
"pages":[
8888
"appkit/recipes/telegram-mini-app",
8989
"appkit/recipes/tenderly-virtual-testnets",
90+
"appkit/recipes/wallet-buttons-react",
9091
"appkit/recipes/wagmi-send-transaction",
9192
"appkit/recipes/ethers-send-transaction",
9293
"appkit/recipes/EVM-smart-contract-interaction",

0 commit comments

Comments
 (0)