WalletConnect
Published in

WalletConnect

Beginner’s Guide to the WalletConnect v2.0 Sign SDK for JavaScript Developers

We’re excited to introduce the WalletConnect v2.0 Sign SDK! WalletConnect Sign is a remote protocol designed for secure peer-to-peer communication between dapps (web3 applications) and wallets.

WalletConnect Sign establishes a remote pairing between two devices using a relay server. The payloads from these relay servers are symmetrically encrypted with a shared private key between the peers.

The Sign SDK greatly enhances the user experience of dapps. The pairing can be initiated seamlessly by scanning a QR code displayed by a peer and approving the pairing request.

If you are interested in knowing more about the upcoming features and latest information on our protocols, check out our technical specifications.

Getting started with the JavaScript client

Step 1: Installing the required packages

The first step is to install the required packages. You can use the package manager of your choice to install the dependencies.

Using npm:

npm install @walletconnect/sign-client@experimental

Using yarn:

yarn add @walletconnect/sign-client@experimental

Step 2: Initializing SignClient

The next step is to initialize the SignClient by passing the projectId. If you don’t have a projectId yet, head over to the WalletConnect Cloud to create a project and copy its unique project ID.

Once you have the projectId, you can initialize the SignClient as follows:

Step 3: Connecting to the dapp and creating a session

In order to connect the dapp and specify session permissions, you can make use of the client.connect() function.

Make sure you provide the list of methods, chains and session events that you wish to use in the session when you call the client.connect() function as follows:

Step 4: Displaying the QRCode Modal and handling the session

Import the QR Code modal from the WalletConnect SDK by using the following import statement.

Now, open the QR Code modal by checking if a URI was successfully returned by using the QRCodeModal.open() function as follows:

Next, await for session approval from the wallet. When the session is successfully connected, handle the returned session by updating the UI to the connected state.

It is recommended to use a try-catch block so that the errors can be handled properly and the QR code modal is closed (if it was open). The final code after implementing the try-catch block should be as follows:

Step 5: Listening to events

Listening to events emitted by the session is simple. Events such as chainChanged and accountsChanged can be handled by using an event listener.

Step 6: Making JSON-RPC requests

Once the session is established successfully, you will be able to make JSON-RPC requests to the signer as follows:

You can find more information on JSON-RPC requests in the JSON-RPC reference.

What’s next?

WalletConnect v2.0 Sign SDK is still in beta. We encourage you to check out our GitHub and documentation if you are interested in knowing more about our protocol. Make sure to follow WalletConnect on Twitter to stay informed about our upcoming announcements and updates. If you have any questions, please feel free to shoot them out on our Discord server.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store