Flow Wallet
  • 👋Welcome to Flow Wallet
  • Ecosystem Primers
    • ⭐Flow Reference Wallet Primer
  • FAQ
    • ❓FAQ
  • Features
    • ⛓️Account Linking
    • 🔌WalletConnect
    • 📖Human Readable Transactions
    • 💚Flow Client Library (FCL)
    • 🔓Secure Enclave
    • 🦺Account Recovery
  • Ecosystem Development
    • 🛠️Ecosystem Developer Grants
    • 🔌Integrate Flow EVM with Web3 SDKs
      • Wagmi
      • Rainbowkit
      • Etherjs
      • Web3js
      • Viem
      • Web3-Onboard
      • MIPD
      • Others SDKs
  • Download
    • 📲Download
  • Open Source
    • 💽Open Source
  • Tutorial
    • 🔐Mobile Wallet Backup Guide
    • 💸Move Assets between Flow and EVM
    • 📱Mobile Wallet Restore Guide
    • 💻Extension Wallet Backup Guide
    • 🖥️Extension Wallet Restore Guide
    • 🔁Extension Update Guide
    • 🪙FLOW wallet init token guide
    • 💾Extension Private Key and Seed Phrase Guide
    • ⛵Mobile Wallet Export Log Guide
Powered by GitBook
On this page
  1. Ecosystem Development

Integrate Flow EVM with Web3 SDKs

Detect Flow wallet provider via EIP-6963

// React code
import React, { useState, useEffect } from 'react';

const WalletConnect = () => {
  const [flowWalletProvider, setFlowWalletProvider] = useState(null)


  const setupEventListeners = () => {
    // detect wallet announcement
    window.addEventListener(
      'eip6963:announceProvider',
      ((event: CustomEvent) => {
        const { info, provider } = event.detail;
        console.log('Wallet announced:', info.name);
        // detect flow wallet with rdns
        if (info.rdns == 'com.flowfoundation.wallet') {
          setFlowWalletProvider(provider)
        }

      }) as EventListener
    );
  }


  useEffect(() => {
    setupEventListeners()
  }, [])
  

  // ...//

}

PreviousEcosystem Developer GrantsNextWagmi

Last updated 4 months ago

🔌