Skip to main content

EVM Wallets Login

Using the Wallet Selector it is possible to login into NEAR applications using Ethereum wallets like MetaMask, WalletConnect and many others.

This tutorial will guide you to add Ethereum wallet support to your NEAR application using the Reown library, which is widely used in the Ethereum ecosystem.

info

Learn more about Ethereum Wallets on NEAR in our concepts page

Overview​

To integrate Metamask and other EVM wallets you will need to:

  1. Add the @near-wallet-selector/ethereum-wallets module
  2. Add the EVM libraries wagmi and reown
  3. Create configurations so the Ethereum wallets can communicate with our Translator RPC
  4. Create a Web3Modal and connect it to the Near Wallet Selector
  5. Initialize the Ethereum Wallets

We will show how we added Ethereum Wallets support to our Hello Near Examples.

tip

This article was created by the AuroraLabs team, and appeared originally in the official Aurora documentation

1. Update Wallet Selector libraries​

Lets start by updating the package.json, adding all the necessary libraries to support Ethereum wallets.

Wallet Selector Packages​

In your package.json, add the @near-wallet-selector/ethereum-wallets package, and update all wallet selector packages to version 8.9.13 or above:

package.json
  "dependencies": {
    ...
    "@near-wallet-selector/core": "^9.5.0",
    "@near-wallet-selector/ethereum-wallets": "^9.5.0",
    "@near-wallet-selector/here-wallet": "^9.5.0",
    "@near-wallet-selector/modal-ui": "^9.5.0",
    "@near-wallet-selector/my-near-wallet": "^9.5.0",
    ...
    }

Add Web3Modal libraries​

Web3Modal (also known as AppKit) is a standard way to integrate multiple wallets in Ethereum community.

It is based on [wagmi] hooks library for React. We will describe the React integration here, but if you are on another platform - just go here, and try using specific instructions suitable for you to install it.

npm install @reown/appkit-adapter-wagmi @reown/appkit @wagmi/core viem

2. Add Web3Modal​

First, let's create a new file to handle the Web3Modal (i.e. the modal shown when selecting the Ethereum Wallets on the Wallet Selector), and all the configs needed to setup the Ethereum Wallets.

Metadata

You can pass a metadata object to the walletConnect connector. This object will be displayed in the EVM wallets, like MetaMask.

source/wallets/web3modal.js
const url = "http://localhost:3000";

const metadata = {
  name: "Onboard to NEAR Protocol with EVM Wallet",
  description: "Discover NEAR Protocol with Ethereum and NEAR wallets.",
  url: url,
  icons: [`${url}/icon.svg`],
};

This tracks the app requesting the connection on the WalletConnect side. See more here.

tip

Make sure to call reconnect(wagmiConfig) in your code, to persist the connection between the app and the wallet when the user refreshes the page

Get projectId​

Notice that the modal uses a projectId, which refers to your unique project on Reown. Let's get the Web3Modal projectId for your project:

  1. Go to Cloud Reown.
  2. Register there.
  3. Create a project on Cloud Reown.
  4. You can copy your projectId:

reown_projectid

tip

You can read more about the projectId and how it works here.

4. Setup Wallet Selector​

The last step is to add the Ethereum Wallets selector to your Near Wallet Selector. Let's find your setupWalletSelector call and add setupEthereumWallets there:

import { setupWalletSelector } from '@near-wallet-selector/core';
import { wagmiConfig, web3Modal } from '@/wallets/web3modal';
import { setupEthereumWallets } from "@near-wallet-selector/ethereum-wallets";

5. Use It!​

That is it! Just re-build your project and click on login! You should see Ethereum Wallets option in your Near Selector:

ethwallets_popup1

And after click to be able to choose the EVM wallet of your taste:

ethwallets_popup2

Resources​

  1. Source code of the project above

  2. Example of the EVM account on the Near Testnet to see what happens in reality on-chain during the execution.

  3. Details about how does it work are in NEP-518

  4. Recording of the Near Devs call with the EthWallets presentation.