How to Integrate Ethereum Wallets with NEAR DApps

This guide provides a step-by-step approach to adding Ethereum Virtual Machine (EVM) wallet support (e.g., MetaMask) to your NEAR decentralized application (DApp) using the NEAR Wallet Selector.

Prerequisites

A NEAR DApp already integrated with the NEAR Wallet Selector.
Basic familiarity with React (for Web3Modal) and EVM-compatible wallets.

Step-by-Step Integration

1. Update Wallet Selector Libraries

Begin by updating your package.json to include the latest Wallet Selector packages and Web3Modal dependencies:

"dependencies": {
  "@near-wallet-selector/core": "^8.9.13",
  "@near-wallet-selector/ethereum-wallets": "^8.9.13",
  "@web3modal/wagmi": "^2.0.0",
  "wagmi": "^1.0.0",
  "viem": "^1.0.0",
  "@tanstack/react-query": "^4.0.0"
}

Key Actions:

Install @near-wallet-selector/ethereum-wallets for EVM wallet support.
Add Web3Modal libraries (wagmi, viem) for Ethereum wallet connectivity.

👉 Learn more about Web3Modal integration

2. Configure NEAR Chain Settings

EVM wallets require RPC endpoints to interact with NEAR’s blockchain. Update your config file with:

NEAR RPC URLs (Testnet/Mainnet).
Chain ID (e.g., 1313161554 for Aurora).

const nearChainConfig = {
  chainId: "1313161554",
  rpcUrls: ["https://rpc.testnet.near.org"]
};

3. Set Up Web3Modal

Create a dedicated file (e.g., web3modal.js) to handle modal configurations:

import { createWeb3Modal } from '@web3modal/wagmi';
import { wagmiConfig } from './wagmiConfig';

const web3Modal = createWeb3Modal({
  wagmiConfig,
  projectId: 'YOUR_REOWN_PROJECT_ID', // Replace with your Reown ID
  themeVariables: { theme: 'dark' }
});

Obtaining a `projectId`:

Sign up at Cloud Reown.
Create a project and copy the projectId from the dashboard.

4. Initialize Ethereum Wallets

Add EVM wallet support to the NEAR Wallet Selector:

import { setupEthereumWallets } from '@near-wallet-selector/ethereum-wallets';

const selector = await setupWalletSelector({
  modules: [setupEthereumWallets({ wagmiConfig, web3Modal })]
});

Pro Tip: Use reconnect(wagmiConfig) to persist wallet sessions post-refresh.

5. Test the Integration

Rebuild your DApp and launch the Wallet Selector. Users will now see:

Ethereum Wallets option alongside NEAR wallets.
A Web3Modal interface to choose MetaMask or other EVM wallets.

Wallet Selector with EVM support [Example: Wallet Selector UI]

FAQs

Q1: Why use Web3Modal for NEAR DApps?

A: Web3Modal standardizes EVM wallet integration, simplifying multi-chain support without custom UI development.

Q2: Can I use this with non-React frameworks?

A: Yes! Web3Modal supports vanilla JS, Vue, and more. Refer to the official docs.

Q3: How do I handle transaction signing?

A: wagmi hooks (e.g., useSignMessage) manage signing seamlessly across EVM and NEAR.

👉 Explore advanced wallet configurations