Unlocking the Power of WalletConnect in Vue DApps

Getting Started with a Vue.js App

To begin, we’ll create a new Vue project using the Vue CLI. If you haven’t already installed the Vue CLI, run the following command:

npm install -g @vue/cli

Next, create a new project with the following command:

vue create my-walletconnect-app

Choose the “Manually select features” option and select the following features:

• Babel
• CSS Pre-processors
• Linter / Formatter

After creating the project, navigate to the new project folder:

cd my-walletconnect-app

We’ll use Ethers.js in our Vue app to interact with the blockchain while connecting our wallet. Install Ethers.js with the following command:

npm install ethers

Next, install the WalletConnect library:

npm install @walletconnect/web3-provider

To use the WalletConnect library directly in Vue 3, install the node-polyfill-webpack-plugin package:

npm install node-polyfill-webpack-plugin

This plugin is required because our project uses Webpack v5, where polyfill Node core modules were removed.

Building the UI

Create a new file called StatusContainer.vue in the components folder. This component will contain our main page with a welcome message, Connect Wallet button, Disconnect button, and Connected button.

<template>
  <div>
    <h1>Welcome to My WalletConnect App</h1>
    <button @click="connectWalletConnect">Connect Wallet</button>
    <button @click="disconnectWallet">Disconnect</button>
    <p>Connected to {{ state.address }} on chain {{ state.chainId }}</p>
  </div>
</template>

Open the App.vue file and import the StatusContainer component:

<template>
  <div>
    <StatusContainer />
  </div>
</template>

<script>
import StatusContainer from './components/StatusContainer.vue'

export default {
  components: { StatusContainer }
}
</script>

Instantiating WalletConnect

Create a new folder called walletConnect under the src folder. Inside this folder, create a provider.js file. Import the WalletConnect library, instantiate it using your Infura ID, and export it for use in other files.

import { Web3Provider } from '@walletconnect/web3-provider'

const infuraId = 'YOURINFURAID'

const provider = new Web3Provider({
  infuraId,
  qrcode: true
})

export default provider

Replace YOUR_INFURA_ID with your actual Infura ID.

Adding Functionality Using Composables

Create a new folder called composables under the src folder. Inside this folder, create a connect.js file. Import the reactive and watch functions from Vue, and create a state object called defaultState.

import { reactive, watch } from 'vue'

const defaultState = {
  status: false,
  address: '',
  chainId: ''
}

const STATE_NAME = 'userState'

const state = reactive(defaultState)

watch(state, (newState) => {
  localStorage.setItem(STATE_NAME, JSON.stringify(newState))
})

const getDefaultState = () => {
  const storedState = localStorage.getItem(STATE_NAME)
  return storedState? JSON.parse(storedState) : defaultState
}

state.value = getDefaultState()

export { state }

This composable sets up a reactive state object and watches for changes to the state. When the state changes, it updates the local storage with the new state.

Creating Actions

Create three functions: connectWalletConnect, autoConnect, and disconnectWallet. These functions will be used to connect to a wallet, automatically reconnect to a wallet on page refresh, and disconnect from a wallet.

const connectWalletConnect = async () => {
  // Call the connect function from WalletConnect here
}

const autoConnect = async () => {
  // Call the autoConnect function from WalletConnect here
}

const disconnectWallet = async () => {
  // Call the disconnect function from WalletConnect here
}

export { connectWalletConnect, autoConnect, disconnectWallet }

Implementing Logic in Our Components

Open the StatusContainer.vue component and import the connectWalletConnect and disconnectWallet functions. Call these functions when the Connect Wallet and Disconnect buttons are clicked.

<template>
  <div>
    <h1>Welcome to My WalletConnect App</h1>
    <button @click="connectWalletConnect">Connect Wallet</button>
    <button @click="disconnectWallet">Disconnect</button>
    <p>Connected to {{ state.address }} on chain {{ state.chainId }}</p>
  </div>
</template>

<script>
import { connectWalletConnect, disconnectWallet } from '../composables/connect'

export default {
  methods: {
    connectWalletConnect,
    disconnectWallet
  }
}
</script>

Open the App.vue component and import the autoConnect function. Call this function when the component is mounted.

<template>
  <div>
    <StatusContainer />
  </div>
</template>

<script>
import StatusContainer from './components/StatusContainer.vue'
import { autoConnect } from './composables/connect'

export default {
  components: { StatusContainer },
  mounted() {
    autoConnect()
  }
}
</script>

That’s it! You have now integrated WalletConnect into your Vue DApp. Users can connect to their wallets, and your app will automatically reconnect to their wallets on page refresh.