Creating dApps via WalletConnect-JS

Add WalletConnect functionality to your dApp lightning fast ⚡

Make a new WalletConnect dApp in a matter of minutes

To follow along or just fork and be done, view the source code here.

This tutorial will quickly guide you though building a new dApp using React.js and walletconnect-js. This tutorial is a fast and basic setup, if you want more information/documentation view the walletconnect-js readme here.

November 3, 2022 Update

Using walletconnect-js version ≥= 2.0.2 we no longer need any of the setup steps. That’s right, we’re back to getting started at break-neck speeds!

No additional steps required — just import and fly

Implementation

Just a few imports and we’re done

Pretty much builds itself

First we want to wrap our app in the walletconnect-js provider: WalletConnectContextProvider

index.tsx will hold the entry point for wcjs’s context provider

In the body of our app we’ll import useWalletConnect, and QRCodeModal from walletconnect-js

import { useWalletConnect, QRCodeModal } from "@provenanceio/walletconnect-js";

QRCodeModal is a React component. It automatically creates a connection popup when walletConnectService.connect() is called. It will handle connecting to all the various available wallet types. It will sit quietly until the connect function prompts it to open. QRCodeModal requires walletConnectService as a prop.

<QRCodeModal walletConnectService={walletConnectService} />

QRCodeModal Component open

The useWalletConnect hook will give us access to walletConnectService, and walletConnectState.

const { walletConnectService, walletConnectState } = useWalletConnect();

walletConnectService holds methods/actions such as: connect and disconnect. View the full list of actions.

walletConnectState contains all current walletconnect-js state information such as: address, wallet name, and publicKey. View the full list of state values.

Let’s pull some state values and monitor the value of connected.

Pulling state values using walletConnectState

We’ll add some dynamic code to render different views for connected and non-connected users. Within these views we added two buttons, connect and disconnect. These each respectfully call walletConnectService.connect() and walletConnectService.disconnect().

Dynamically loading page elements based on the current connected value

Optionally, to prevent text scrolling, we’ll add some minor styling to index.css.

Slight changes within the index.css file

Results

We should see an empty page prompting the user to connect when they aren’t connected.

User is not connected

And successful connection information once the user has connected their wallet.

User has successfully connected their wallet to our dApp

This connection is saved in localStorage, so even if you refresh the page you’ll remain connected until the session timeout is reached or the user manually disconnects on the dApp or in their wallet.

To see the demo app up close or for an even faster setup, you can fork it and get started right away by clicking here.

In this tutorial we created a new standalone dApp which can connect to various wallets using walletconnect-js then dynamically show information or change content on the page based on wallet information. This is a very basic setup and there are lots of additional configuration options available to you, the developer.

For more detailed information about walletconnect-js, take a look at the repo and readme. To learn more about the Provenance Blockchain and Provenance Blockchain Foundation visit here.