FCL + RainbowKit + Wagmi Integration Demo

A demonstration of integrating Flow blockchain cross-VM functionality with FCL, RainbowKit, Wagmi, and Next.js, allowing users to connect both EVM and Flow wallets in a single application.

✨ Supercharge Your Apps with Cadence ✨

• 🔗 Seamless Cross-VM Integration – Connect Flow and EVM wallets effortlessly.
• 🔥 Leverage Cadence's Power – Enhance dApps with composable, atomic interactions.
• 🚀 Progressive Adoption – Incrementally integrate Flow’s features without disrupting existing workflows.
• ⚡ Bundled Transactions – Execute multiple operations in a single atomic transaction using FCL and Cadence, reducing gas costs and improving efficiency.

Features

• Connect to Flow and EVM wallets using RainbowKit
• Display connected wallet addresses
• Interactive code evaluation sandbox
• Built with Next.js 15 and React 19

Prerequisites

• Node.js >= 20.0.0
• Flow Wallet Browser Extension
• An EVM wallet (like MetaMask)

Getting Started

1. Clone the repository:

   git clone <repository-url>

2. Install dependencies:

   npm install

3. Install and build FCL-JS at the path ../fcl-js (this can be configured in the package.json file).

4. Run the development server:

   npm run dev

5. Open http://localhost:3000 in your browser.

Project Structure

• src/app/ - Next.js application routes and components
• src/wagmi.ts - Wagmi and Flow wallet configuration
• src/app/code-evaluator.tsx - Interactive code evaluation component
• src/app/providers.tsx - React context providers setup

Technology Stack

• Next.js - React framework
• RainbowKit - Wallet connection UI
• Wagmi - React Hooks for Ethereum
• Flow Client Library (FCL) - Flow blockchain interaction
• React - UI library
• TypeScript - Type safety

Related Packages

These packages are currently in alpha and make it possible for a Wagmi/RainbowKit app to integrate with Flow tooling by bridging the gap between EVM and Cadence:

• FCL Ethereum Provider - Acts as an Ethereum provider for FCL to enable Cadence and EVM interactions in a single session.
• FCL Wagmi Adapter - Provides seamless integration of FCL with Wagmi's wallet connectors.
• FCL RainbowKit Adapter - Enables RainbowKit to support FCL-compatible wallets.

This integration facilitates progressive adoption of Cadence in Ethereum applications by unifying wallet session management and reducing tooling fragmentation.

Read more about this proposal in the Cross VM FLIP.

Official Documentation

To learn more about building cross-VM apps in Cadence, please read the official guide here.

Development

The project uses TypeScript for type safety and Next.js App Router for routing. The main components are:

• CodeEvaluator: An interactive sandbox for testing Flow and Wagmi functionality
• Providers: Sets up RainbowKit, Wagmi, and query client providers
• Page: Main application page with wallet connection buttons and address display

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.