How to use wallet connect for your dApp in 3 minutes

This is a short tutorial for web3 developers looking for a simple way to connect users’ wallets to their dapps since there’s a million wallets out there. A single library like wallet connect for everything works well.

This tutorial is for simple dapps without React. To get started, install these libraries:

yarn add @walletconnect/sign-client@2.7.3 @web3modal/html@2.4.1 @web3modal/standalone@2.4.1 web3modal@1.9.12 copy-webpack-plugin@11.0.0 webpack@5.82.1 webpack-cli@5.1.1 npm-run-all@4.1.5 http-server@14.1.1 @web3modal/ethereum@2.4.1 @wagmi/core@1.0.2 @web3modal/html@2.4.1 viem@0.3.21

Make sure to use the exact versions specified in the command above so that you get the app working properly since those libraries change very fast.

Then in your package.json include these scripts:

  "scripts": {
    "server": "http-server dist/ -p 8000",
    "compile": "NODE_ENV=production npx webpack",
    "watch": "NODE_ENV=development npx webpack -w",
    "start": "npm-run-all --parallel watch server"
  },

Those will be useful to start the app, you’ll only need to execute the command yarn start. Now create a webpack.config.js with the following configuration:

const path = require('path')
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
 mode: 'development',
 entry: path.join(__dirname, 'src', 'index.js'),
 output: {
  filename: 'build.js',
  path: path.resolve(__dirname, 'dist'),
 },
 plugins: [
  new CopyPlugin({
   patterns: [
     { from: "src/index.html", to: "index.html" },
   ],
  }),
 ]
}

What it does is it processes the index.js file inside src/ and copies the index.html from src/ to dist/ where the app will be delivered.

Now create a src/ folder with the files index.html and index.js . Inside the javascript file include the following code:

import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { Web3Modal } from '@web3modal/html'
import { configureChains, createConfig } from '@wagmi/core'
import { mainnet } from '@wagmi/core/chains'
import { getAccount } from '@wagmi/core'

const chains = [mainnet]
const projectId = '' // Get yours at…