Summary

The webpage provides a concise tutorial for web3 developers to integrate Wallet Connect into their decentralized applications (dApps) for seamless wallet connectivity across various wallets.

Abstract

The tutorial guides developers through the process of using Wallet Connect with their dApps, emphasizing simplicity for non-React dApps. It includes the necessary libraries and versions to install, scripts to add to the package.json for easy app startup, and the configuration for webpack.config.js to process the application's files. The tutorial also provides the essential JavaScript code to initialize Wallet Connect, demonstrating how to obtain and display the user's wallet address. Additionally, it instructs on updating the index.html to incorporate a Wallet Connect button, which, when executed, allows the dApp to interact with the user's wallet. The entire setup is designed to be quick, taking about three minutes, and requires a projectId obtainable from Wallet Connect's cloud service.

Opinions

The tutorial expresses the importance of using specific library versions to ensure the dApp functions correctly, hinting at the rapid pace of library updates and potential compatibility issues.
The author suggests that developers do not need to fully understand all the code, indicating that the provided configuration and imports are straightforward enough for implementation.
The inclusion of a Wallet Connect button in the HTML is presented as a simple yet effective method to initiate wallet connections, reflecting a user-friendly approach.
The tutorial implies that obtaining a projectId from Wallet Connect's cloud service is a standard and necessary step in the setup process, highlighting the integration of Wallet Connect's infrastructure.
The emphasis on the tutorial being for simple dApps without React suggests that the provided instructions are tailored for a specific developer audience, acknowledging the diversity of dApp development environments.

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/[email protected] @web3modal/[email protected] @web3modal/[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] @web3modal/[email protected] @wagmi/[email protected] @web3modal/[email protected] [email protected]

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 https://cloud.walletconnect.com/
const { publicClient } = configureChains(chains, [w3mProvider({ projectId })])
const wagmiConfig = createConfig({
  autoConnect: true,
  connectors: w3mConnectors({ projectId, version: 1, chains }),
  publicClient
})
const ethereumClient = new EthereumClient(wagmiConfig, chains)
const web3modal = new Web3Modal({ projectId }, ethereumClient)
const start = async () => {
    // Get your account
    console.log('getAccount', getAccount().address)
}

start()

You don’t have to understand it all, simply the fact that you can import the chains you want to use from @wagmi/core/chain and change the configuration. In order to get this working you’ll need a projectId which you can get at cloud.walletconnect.com.

The code will run the start() function executing the getAccount().address and showing you the connected address at start. You can get the address anytime using that command. If it’s undefined show the user an alert letting them know.

Next, update your index.html with this code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Wallet Connector</title>
    </head>

    <body>
        <w3m-core-button></w3m-core-button>
    </body>

    <script src="build.js"></script>
</html>

As you can see it’s very simple, all it does is display the web3 modal button and import the build.js file from webpack.

That’s it!

Now you can execute it with yarn start or npm run start and you’ll see the button working so you can access the user’s wallet address anytime.