Skip to content

README.md

Latest commit

 

History

History
122 lines (91 loc) · 3.78 KB

README.md

File metadata and controls

122 lines (91 loc) · 3.78 KB

Flow Chrome Extension Wallet Example

An example and guide showing how to build an FCL-compatible wallet extension on Flow with EVM support.
Read the docs »

What is FCL? · Report a Bug

This guide and sample is based on a winning FLIP Fest submission from the ZayCodes team.

🚀 Architecture

This project consists of two main components:

  • Extension (packages/extension/): Chrome extension wallet built with React + Vite
  • Harness (packages/harness/): Testing dApp built with Next.js, featuring dual Flow/EVM support with RainbowKit

🛠 Getting Started

Prerequisites

  • Node.js 18+
  • pnpm (recommended package manager)

Installation

Run all commands from the root directory.

# Install pnpm globally if you haven't already
npm install -g pnpm

# Install dependencies
pnpm install

Build the Extension

# Development build (with watch mode)
cd packages/extension
pnpm run dev

# Production build
pnpm run build

Add the Extension to Chrome

  1. In Chrome, navigate to chrome://extensions
  2. Enable the "Developer mode" toggle
  3. Click on "Load unpacked"
  4. Select the packages/extension/dist folder

Refreshing the Extension

If you make changes to the code:

  1. Rebuild with pnpm run build (or use pnpm run dev for watch mode)
  2. Click the refresh icon in the Chrome extensions page

Start the Harness App

The harness is a Next.js web app with dual Flow/EVM support for testing wallet functionality.

# Development server
cd packages/harness
pnpm run dev

# Production build
pnpm run build
pnpm run start

Open http://localhost:3000 to view the harness.

🌐 Flow EVM Support

The harness includes built-in support for Flow EVM networks:

  • Flow EVM Mainnet (Chain ID: 747)

    • RPC: https://mainnet.evm.nodes.onflow.org
    • Explorer: https://evm.flowscan.org

  • Flow EVM Testnet (Chain ID: 545)

    • RPC: https://testnet.evm.nodes.onflow.org
    • Explorer: https://evm-testnet.flowscan.org

The harness displays both Flow and EVM connection details side-by-side, making it easy to test both networks simultaneously.

Build your own wallet

See the full guide to building an extension on Flow here.