Skip to content

Commit aef2c56

Browse files
briandoyle81briandoyle81
authored
Merge pull request #1147 from timothyylim/timothyylim/rainbowkit-integration
Add rainbowkit integration guide
2 parents 3f6e965 + c2a6b60 commit aef2c56

File tree

3 files changed

+194
-0
lines changed

3 files changed

+194
-0
lines changed

‎docs/evm/guides/rainbowkit-1.png

525 KB
Loading

‎docs/evm/guides/rainbowkit-2.png

147 KB
Loading

‎docs/evm/guides/rainbowkit.md

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
---
2+
title: Using Rainbowkit with Flow Wallet
3+
description: A step-by-step guide on adding Flow Wallet as a custom Wallet to RainbowKit.
4+
sidebar_position: 4
5+
sidebar_label: Rainbowkit
6+
---
7+
8+
Integrating Flow Wallet with [RainbowKit][1] allows users to seamlessly connect their Flow accounts through one of the most popular wallet connection interfaces.
9+
10+
This guide walks you through the process of defining Flow Wallet as a custom wallet in RainbowKit and testing the integration. You can follow along by setting up a new RainbowKit project or use the code in this guide to integrate these steps into your existing dApp.
11+
12+
## Objectives
13+
14+
After completing this guide, you'll be able to:
15+
- Create a custom Flow Wallet connector compatible with RainbowKit's interface
16+
- Configure your Wagmi setup to support Flow Wallet connections
17+
- Implement a complete wallet connection flow for Flow blockchain users
18+
- Test and verify the Flow Wallet integration in your dApp
19+
20+
## Prerequisites
21+
22+
### Next.js and Modern Frontend Development
23+
24+
The RainbowKit starter is built on Next.js, so familiarity with React, hooks, and modern frontend development will help you follow along.
25+
26+
## A Flow Wallet
27+
28+
To use Flow Wallet with RainbowKit, install the Flow Wallet browser extension from the [Chrome Web Store][2].
29+
30+
Once installed, set up your wallet by creating or importing an account. For quick access, pin the extension to your browser toolbar.
31+
32+
## Setting Up Your Environment
33+
34+
### Initial Setup
35+
36+
The RainbowKit starter is built on Next.js, following its standard project structure and conventions. Create a new project or ensure your existing one has the necessary dependencies:
37+
38+
```bash
39+
$ npm init @rainbow-me/rainbowkit@latest
40+
$ cd my-rainbowkit-app
41+
$ npm run dev
42+
```
43+
44+
The [RainbowKit](https://www.rainbowkit.com/) components will be available throughout your application via the provided wrapper components.
45+
46+
### Creating the Flow Wallet Connector
47+
The first major step is defining the Flow Wallet connector. Create a new file called `flowWallet.ts` in `src/flowWallet.ts` to house the wallet configuration:
48+
49+
```tsx
50+
/* src/flowWallet.ts */
51+
import { Wallet, getWalletConnectConnector } from '@rainbow-me/rainbowkit';
52+
53+
export interface MyWalletOptions {
54+
projectId: string;
55+
}
56+
57+
export const flowWallet = ({ projectId }: MyWalletOptions): Wallet => ({
58+
id: 'flow-wallet',
59+
name: 'Flow Wallet',
60+
iconUrl: 'https://lilico.app/logo_mobile.png',
61+
iconBackground: '#41CC5D',
62+
downloadUrls: {
63+
android: 'https://play.google.com/store/apps/details?id=com.flowfoundation.wallet',
64+
ios: 'https://apps.apple.com/ca/app/flow-wallet-nfts-and-crypto/id6478996750',
65+
chrome: 'https://chromewebstore.google.com/detail/flow-wallet/hpclkefagolihohboafpheddmmgdffjm',
66+
qrCode: 'https://link.lilico.app',
67+
},
68+
mobile: {
69+
getUri: (uri: string) => uri,
70+
},
71+
qrCode: {
72+
getUri: (uri: string) => uri,
73+
instructions: {
74+
learnMoreUrl: 'https://wallet.flow.com',
75+
steps: [
76+
{
77+
description: 'We recommend putting Flow Wallet on your home screen for faster access to your wallet.',
78+
step: 'install',
79+
title: 'Open the Flow Wallet app',
80+
},
81+
{
82+
description: 'You can find the scan button on home page, a connection prompt will appear for you to connect your wallet.',
83+
step: 'scan',
84+
title: 'Tap the scan button',
85+
},
86+
],
87+
},
88+
},
89+
extension: {
90+
instructions: {
91+
learnMoreUrl: 'https://wallet.flow.com',
92+
steps: [
93+
{
94+
description: 'We recommend pinning Flow Wallet to your taskbar for quicker access to your wallet.',
95+
step: 'install',
96+
title: 'Install the Flow Wallet extension',
97+
},
98+
{
99+
description: 'Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone.',
100+
step: 'create',
101+
title: 'Create or Import a Wallet',
102+
},
103+
{
104+
description: 'Once you set up your wallet, click below to refresh the browser and load up the extension.',
105+
step: 'refresh',
106+
title: 'Refresh your browser',
107+
},
108+
],
109+
},
110+
},
111+
createConnector: getWalletConnectConnector({ projectId }),
112+
});
113+
```
114+
115+
### Configuring Wagmi Integration
116+
117+
Next, update your Wagmi configuration to include Flow Wallet support. Modify your `wagmi.ts` file:
118+
119+
```tsx
120+
/* src/wagmi.ts */
121+
'use client';
122+
123+
import { connectorsForWallets } from '@rainbow-me/rainbowkit';
124+
import { createConfig, http } from 'wagmi';
125+
import { mainnet, flowMainnet } from 'viem/chains';
126+
import { flowWallet } from './flowWallet';
127+
128+
/*
129+
We can leave this as is for the tutorial but it should be
130+
replaced with your own project ID for production use.
131+
*/
132+
const projectId = 'YOUR_PROJECT_ID';
133+
134+
const connectors = connectorsForWallets(
135+
[
136+
{
137+
groupName: 'Recommended',
138+
wallets: [flowWallet]
139+
},
140+
],
141+
{
142+
appName: 'RainbowKit App',
143+
projectId,
144+
}
145+
);
146+
147+
export const config = createConfig({
148+
connectors,
149+
chains: [flowMainnet, mainnet],
150+
ssr: true,
151+
transports: {
152+
[flowMainnet.id]: http(),
153+
[mainnet.id]: http(),
154+
},
155+
});
156+
```
157+
158+
:::info
159+
160+
WalletConnect Project ID
161+
162+
Every dApp that relies on WalletConnect now needs to obtain a projectId from [WalletConnect Cloud (now rebranded as reown)](https://cloud.reown.com/sign-in). This is absolutely free and only takes a few minutes.
163+
164+
To get a Project ID, sign up at WalletConnect Cloud, create a new project, and copy the generated ID into the `projectId` variable in the `wagmi.ts` file.
165+
166+
:::
167+
168+
## Testing Your Integration
169+
170+
After implementing the Flow Wallet connector and configuring Wagmi, follow these steps to verify that the integration works correctly in your dApp:
171+
172+
1. **Click "Connect Wallet"** – Open your application and click the "Connect Wallet" button.
173+
2. **Check for Flow Wallet** – Ensure Flow Wallet appears as an option in the RainbowKit wallet selection modal.
174+
- If you haven't installed the browser extension and set up your wallet yet, you can find install it via the [Chrome Web Store][2].
175+
3. **Connect the Wallet** – Click on Flow Wallet in the selection modal. If using the browser extension, open it and press "Connect."
176+
177+
![Rainbowkit dAPP UI](./rainbowkit-1.png)
178+
179+
4. **Verify Connection** – Confirm that your Flow Wallet is now connected and visible in your dApp's UI.
180+
181+
![Rainbowkit dAPP UI](./rainbowkit-2.png)
182+
183+
## Conclusion
184+
185+
In this tutorial, you learned how to integrate Flow Wallet with [RainbowKit](https://www.rainbowkit.com/), creating a seamless wallet connection experience for your users. You should now be able to:
186+
- Create a custom Flow Wallet connector compatible with RainbowKit's interface
187+
- Configure your Wagmi setup to support Flow Wallet connections
188+
- Implement a complete wallet connection flow for Flow blockchain users
189+
- Test and verify the Flow Wallet integration in your dApp
190+
191+
Now that you've completed this tutorial, you're ready to enhance your dApp with additional Flow blockchain features such as token transfers, NFT minting, and smart contract interactions.
192+
193+
[1]: https://www.rainbowkit.com/
194+
[2]: https://chromewebstore.google.com/detail/flow-wallet/hpclkefagolihohboafpheddmmgdffjm?hl=en

0 commit comments

Comments
 (0)