EVM Wallet

Overview

The EVM wallet provider supports Ethereum and all EVM-compatible chains including Arbitrum, Optimism, Base, Polygon, and more. It uses wagmi v2 for wallet connections and supports MetaMask, WalletConnect, Coinbase Wallet, and other EVM wallets.

Installation

yarn

yarn add @layerswap/wallet-evm wagmi viem @tanstack/react-query

pnpm add @layerswap/wallet-evm wagmi viem @tanstack/react-query

npm install @layerswap/wallet-evm wagmi viem @tanstack/react-query

Wagmi is a React Hooks library for Ethereum.

Viem is a low-level TypeScript Interface for Ethereum that enables developers to interact with the blockchain.

TanStack Query is an async state manager that handles fetching, caching, synchronizing and more.

Basic Usage

import { LayerswapProvider, Swap } from "@layerswap/widget"
import { createEVMProvider } from "@layerswap/wallet-evm"
import "@layerswap/widget/index.css"

export const App = () => {
  const evmProvider = createEVMProvider({
    walletConnectConfigs: {
      projectId: "YOUR_WALLETCONNECT_PROJECT_ID",
      name: "Your App Name",
      description: "Your app description",
      url: "https://yourapp.com",
      icons: ["https://yourapp.com/icon.png"]
    }
  })

  return (
    <LayerswapProvider
      walletProviders={[evmProvider]}
    >
      <Swap />
    </LayerswapProvider>
  )
}

---

Configuration

WalletConnect Configuration

The EVM provider requires WalletConnect configuration:

import { createEVMProvider } from "@layerswap/wallet-evm"
import type { WalletConnectConfig } from "@layerswap/wallets"

const walletConnectConfigs: WalletConnectConfig = {
  projectId: string,      // Required: Your WalletConnect project ID
  name: string,           // Required: Your app name
  description: string,    // Required: Your app description
  url: string,            // Required: Your app URL
  icons: string[]         // Required: Array of logo URLs
}

const evmProvider = createEVMProvider({ walletConnectConfigs })

Get your WalletConnect project ID at WalletConnect Cloud.

---

Advanced: EVM Modules

Extend the EVM provider with network-specific functionality using modules:

import { createEVMProvider, zkSyncModule, LoopringModule } from "@layerswap/wallets"

const evmProvider = createEVMProvider({
  walletConnectConfigs: {
    projectId: "YOUR_WALLETCONNECT_PROJECT_ID",
    name: "Your App",
    description: "Your app description",
    url: "https://yourapp.com",
    icons: ["https://yourapp.com/icon.png"]
  },
  walletProviderModules: [zkSyncModule, LoopringModule]
})

Available Modules

• zkSyncModule - Adds zkSync-specific balance providers and multi-step transaction handlers
• LoopringModule - Adds Loopring-specific balance providers and multi-step transaction handlers

---

Integration with Existing Wagmi

If your application already uses wagmi, see the Partial Integration guide for details on integrating Layerswap with your existing wagmi setup.