Skip to main content

WalletConnect

Introduction​

WalletConnect is a protocol providing a decentralized standard to connect Web3 wallets and dApps.

This guide lays out a step-by-step process to configure a React or HTML dApp on Neon EVM using WalletConnect's Web3Modal SDK.

Web3Modal is a library that allows users to connect to any dApp via the WalletConnect interface.

info

Check out Web3Modal code on GitHub.

Web3Modal supports:

Prerequisites​

  • EVM-compatible wallet (this tutorial uses MathWallet)
  • WalletConnect account

Tutorial​

Step 1: Create a project​

Log into WalletConnect Cloud to create a new project and copy the Project ID.

Step 2: Configure your project's chain​

From WalletConnect's project page, click the Explorer tab and select the Neon chain you require from the Chains drop-down. For this guide, we will use the Neon EVM Devnet.

Step 3: Configure your app​

For this guide, we are configuring an HTML Web App.

3.1 Install the required packages into your app:

npm install @wagmi/core @web3modal/wagmi viem vite

3.2 Inside package.json file, add the following code:

vite is a dependency that starts the server

"scripts": {
    "dev": "vite"
}

3.3 Create .env.local file and place VITE_PROJECT_ID="XYZ" ( place your project ID key from WalletConnect Cloud ).

3.4 Create an index.html file and use the following code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Neon WalletConnect Example</title>
    </head>
    <body>
        <w3m-button />
        <script type="module" src="main.js"></script>
    </body>
</html>

3.5 Create a main.js file and place the following code:

import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi';
import { neonMainnet, neonDevnet } from '@wagmi/core/chains';

const projectId = import.meta.env.VITE_PROJECT_ID;
const metadata = {
    name: 'Neon Example',
    description: 'Neon Web3Modal Example',
    url: 'https://neonevm.org',
    icons: ['https://neonevm.org/favicons/android-chrome-512x512.png']
};

const chains = [neonMainnet, neonDevnet];
const wagmiConfig = defaultWagmiConfig({chains, projectId, metadata});

const modal = createWeb3Modal({wagmiConfig, projectId, chains});

3.6 Run npm run dev or yarn run dev to start your Web application, and you should see the Web3Modal button loaded in your Web app page.

Step 4: Connect your wallet​

For this example, we use MathWallet.

4.1 You have several connecting options; select WalletConnect:

4.2 The popup will load a WalletConnect QR code.

4.3 Open your MathWallet mobile app and scan the QR code.

4.4 After scanning the WalletConnect QR code, you should be able to see your NEON balance inside your Web app page:

Now, if you click your NEON balance, you'll be able to see more options for your WalletConnect connection:

Was this page helpful?