Mobile (WalletConnect) / Coming Soon

FEATURE WILL BE AVAILABLE SOON

WalletConnect is an open source protocol for connecting DAPPs to mobile wallets with QR code scanning or deep linking.

There are two common ways to integrate:

1. Web3Modal

Web3Modal is an easy-to-use library to help developers add support for multiple providers (including WalletConnect) in their apps with a simple customizable configuration.

Installation

npm install --save web3modal web3 @walletconnect/web3-provider

Customize chain id

Sample code for configuring WalletConnect with Bitrock Blockchain

import Web3 from "web3";
import WalletConnectProvider from "@walletconnect/web3-provider";
import Web3Modal from "web3modal";

// set chain id and rpc mapping in provider options
const providerOptions = {
  walletconnect: {
    package: WalletConnectProvider,
    options: {
      rpc: {
        7171: "https://connect.bit-rock.io",
      },
      chainId: 7171,
    },
  },
};

const web3Modal = new Web3Modal({
  network: "mainnet", // optional
  cacheProvider: true, // optional
  providerOptions, // required
});

const provider = await web3Modal.connect();
await web3Modal.toggleModal();

// regular web3 provider methods
const newWeb3 = new Web3(provider);
const accounts = await newWeb3.eth.getAccounts();

console.log(accounts);

2. Standalone Client

Bitrock Wallet extends WalletConnect 1.x with aditional JSON-RPC methods to support multi-chain dApps. Currently, you can get all accounts and sign transactions for Bitrock Blockchain implements signJSON method in wallet core.

Installation

npm install --save @walletconnect/client @walletconnect/qrcode-modal

Initiate Connection

Before you can sign transactions, you have to initiate a connection to a WalletConnect bridge server, and handle all possible states:

import WalletConnect from "@walletconnect/client";
import QRCodeModal from "@walletconnect/qrcode-modal";

// Create a connector
const connector = new WalletConnect({
  bridge: "https://bridge.walletconnect.org", // Required
  qrcodeModal: QRCodeModal,
});

// Check if connection is already established
if (!connector.connected) {
  // create new session
  connector.createSession();
}

// Subscribe to connection events
connector.on("connect", (error, payload) => {
  if (error) {
    throw error;
  }

  // Get provided accounts and chainId
  const { accounts, chainId } = payload.params[0];
});

connector.on("session_update", (error, payload) => {
  if (error) {
    throw error;
  }

  // Get updated accounts and chainId
  const { accounts, chainId } = payload.params[0];
});

connector.on("disconnect", (error, payload) => {
  if (error) {
    throw error;
  }

  // Delete connector
});

code snippet above is copied from https://docs.walletconnect.org/quick-start/dapps/client#initiate-connection, please check out the original link for standard methods.

Get chain accounts from Bitrock Wallet

Once you have walletconnect client set up, you will be able to get user's accounts:

const request = connector._formatRequest({
  method: "get_accounts",
});

connector
  ._sendCallRequest(request)
  .then((result) => {
    // Returns the accounts
    console.log(result);
  })
  .catch((error) => {
    // Error returned when rejected
    console.error(error);
  });

The result is an array with following structure:

[
  {
    network: number,
    address: string,
  },
];

Need more details about Wallet Connect set up for your dApp to connect to Bitrock Wallet smoothly find it HERE

Last updated