Skip to main content

DesmJS WalletConnect v2

This package provides a Signer capable of sign transactions through WalletConnect v2.

Verify client implementation

This package assumes that the other client implements the following RPC methods:

  • cosmos_signAmino: Sign a amino encoded transaction
  • cosmos_signDirect: Sign a protobuf encoded transaction
  • cosmos_getAccountData: Gets the details of the account

Installation​

To install the package run the following command:

yarn add @desmoslabs/desmjs-walletconnect-v2 @walletconnect/types

Usage​

Initializing a WalletConnect SignClient instance​

Before creating the WalletConnectSigner you must create an instance of the WalletConnect SignClient.

To initialize a SignClient instance you need a project id that can be obtained from the WalletConnect website.

import { SignClient } from "@desmoslabs/desmjs-walletconnect-v2";

const signClient = await SignClient.init({
  projectId: "<YOUR_PROJECT_ID>",
  metadata: {
    name: "Example Dapp",
    description: "Example Dapp",
    url: "#",
    icons: ["https://walletconnect.com/walletconnect-logo.png"],
  },
});

Building a DesmosClient using WalletConnectSigner​

import { WalletConnectSigner, QRCodeModal } from "@desmoslabs/desmjs-walletconnect-v2";

const signer = new WalletConnectSigner(signClient, {
  // Id of the chain you are connecting to
  chain: "desmos:desmos-mainnet",
  // Signer sign mode
  signingMode: SigningMode.DIRECT,
  // Controller used to display the QR Code that can be scanned from a wallet 
  qrCodeModalController: QRCodeModal,
});

const client = await DesmosClient.connectWithSigner('https://rpc.mainnet.desmos.network', signer, {
  // Common gas price in the Desmos mainnet.
  gasPrice: GasPrice.fromString("0.01udsm"),
});

// Use the client to perform operations...

Connecting to a client​

After you have initialized the signer you can create a new session or reconnect to a previously established connection.

Custom QR code modal

If your application needs a custom UI to show the QR code you can see how to customize it here.

Creating a new connection​

To create a new connection you can call the connect method.
This will show to the user a QR code that can be scanned from a wallet to connect to your DApp.

await signer.connect();

Reconnecting to a session​

To reconnect to a previously established session, you can call the connectToSession method.

import { WalletConnectSigner, SignClient } from "@desmoslabs/desmjs-walletconnect-v2";

const signClient: SignClient; // Your initialized SignClient
const signer: WalletConnectSigner; // Your initialized Signer

// Get sessions from WalletConnect SignClient
const sessions = signClient.session.values;

// Reconnect to the first one
await signer.connectToSession(sessions[0]);

Disconnecting​

When you have finished to perform the operations, or if the user wants to disconnect from your app, you can call the disconnect method to terminate the session.

Customize the QR code modal​

To customize the UI that present the QR code to the user, you can create an object that implements the QrCodeModalController interface.

NOTE: An example of implementation can be found at https://github.com/desmos-labs/desmjs/tree/main/packages/walletconnect-modal.

import { QrCodeModalController } from "@desmoslabs/desmjs-walletconnect-v2";

const customController: QrCodeModalController = {
  open(uri: string, onCloseCb: () => void) {
    // Show the QR code to the user.
    // uri - Uri to be displayed as QR Code
    // onCloseCb - callback to be called when the user closes the UI.
  },
  close() {
    // Close the QR code ui.
  },
};

With the custom QrCodeModalController, now you can pass it as qrCodeController inside the options field of WalletConnectSigner.

import { WalletConnectSigner } from "@desmoslabs/desmjs-walletconnect-v2";
import { QrCodeModalController } from "@desmoslabs/desmjs-walletconnect-v2";

const customController: QrCodeModalController = {
  open(uri: string, onCloseCb: () => void) {
    // Show the QR code to the user.
    // uri - Uri to be displayed as QR Code
    // onCloseCb - callback to be called when the user closes the UI.
  },
  close() {
    // Close the QR code ui.
  },
};

const signer = new WalletConnectSigner(signClient, {
  // Id of the chain you are connecting to
  chain: "desmos:desmos-mainnet",
  // Signer sign mode
  signingMode: SigningMode.DIRECT,
  // Controller used to display the QR Code that can be scanned from a wallet 
  qrCodeModalController: customController,
});