> ## Documentation Index
> Fetch the complete documentation index at: https://layerswaplabsv0-main-depositactionsguide.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<CodeGroup>
  ```typescript yarn theme={"system"} theme={null}
  yarn add @layerswap/wallet-evm wagmi viem @tanstack/react-query
  ```

  ```typescript pnpm theme={"system"} theme={null}
  pnpm add @layerswap/wallet-evm wagmi viem @tanstack/react-query
  ```

  ```typescript npm theme={"system"} theme={null}
  npm install @layerswap/wallet-evm wagmi viem @tanstack/react-query
  ```
</CodeGroup>

[**Wagmi**](https://wagmi.sh/) is a React Hooks library for Ethereum.

[**Viem**](https://wagmi.sh/react/guides/viem) is a low-level TypeScript Interface for Ethereum that enables developers to interact with the blockchain.

[**TanStack Query**](https://tanstack.com/query/v5) is an async state manager that handles fetching, caching, synchronizing and more.

## Basic Usage

```typescript theme={null}
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:

```typescript theme={null}
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](https://cloud.walletconnect.com/).

***

## Advanced: EVM Modules

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

```typescript theme={null}
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](/integration/UI/Widget/WalletManagement/PartialIntegration) for details on integrating Layerswap with your existing wagmi setup.