In today’s world, people rely on their mobile devices for a countless number of important tasks. The mainstream adoption of blockchain technology will not be possible without the seamless integration dapps and mobile devices. WalletConnect offers the ability to easily connect your dapp to mobile devices through the use of a QR code. Once the QR code is scanned, the dapp can push signature requests, transactions or make any web3 calls through a wallet on the users mobile device. We believe this is a critical step towards widespread use of the blockchain. If your not familiar with WalletConnect you can check out their page here.

Unfortunately these dapp interactions provided through WalletConnect are difficult to get data and logs for, making a data driven approach to growth and analytics impossible. However, with use of the Terminal's dapp Management and Monitoring platform that is no long the case. Today we are excited to announce full WalletConnect support with the TerminalSDK allowing you to surface every web3 interaction - decoded and in one place. There are two different ways you might have WalletConnect integrated into your dapp. The first is simply using the WalletConnect web3 provider, which can be found here. If your dapp uses their web3-provider wrapping it with the TerminalSDK is straight forward, following the same basic steps as most other integrations. The other option is to use the WalletConnect Browser SDK.

We are going to walk through how to integrate both of these options in this tutorial. Lets start by doing the integration for WalletConnect web3-provider. WalletConnect web3-provider acts as secondary infrastructure provider so that your dapp can avoid making all of its read calls through the WalletConnect session. Implementing this with the TerminalSDK looks like the code below. If you want to follow along and do this on your own, you will need a Terminal API key and projectId, which you an find here.

import Web3 from "web3";
import WalletConnectProvider from "@walletconnect/web3-provider";
import {TerminalHttpProvider} from '@terminal-packages/sdk';
// Create WalletConnect Provider
const provider = new WalletConnectProvider({
	infuraId: "27e484dcd9e3efcfd25a83a78777cdf1" // Required
});

await provider.enable();
// Create Web3

const web3 = new Web3(
	new TerminalHttpProvider({
		customHttpProvider: provider,
		apiKey: 'YOUR_TERMINAL_API_KEY',
		projectId: 'YOUR_TERMINAL_PROJECTID',
		source: 'WalletConnect'
	})
);
 // make web3 calls

From here you’ll be able to make any web3 calls just as you would with another web3 provider and all the calls will be surfaced to the Terminal Dapp Monitoring platform.

If your dapp uses the WalletConnect Browser SDK, integrating it with the TerminalSDK is slightly different. Normally your WalletConnect Browser SDK initialization probably looks like this:

import WalletConnect from "@walletconnect/browser";

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

//add your wallet connection logic

Integrating the TerminalSDK into this WalletConnect instantiation is simple as the SDK offers a TerminalWalletConnectBrowserProvider object. This allows users to simply swap their WalletConnect for Terminals version which will function identically, along with surfacing all logs. Using the TerminalWalletConnectBrowserProviderlooks like this:

import WalletConnect from "@walletconnect/browser";
import { TerminalWalletConnectBrowserProvider } from "@terminal-packages/sdk";

const walletConnector = new TerminalWalletConnectBrowserProvider({
  apiKey: "YOUR_TERMINAL_API_KEY",
  projectId: "YOUR_TERMINAL_PROJECTID",
  walletConnectOptions: {
    bridge: "https://bridge.walletconnect.org" 
  }
});

//add your wallet connection logic

To see what this looks like in action, you can check out this example repo on github.

Once you have replaced the WalletConnect instance with the Terminal version, everything will function the same, however we will now be able to surface data on which wallets your users are connecting with and more.  

If you are having trouble integrating Torus or any other provider, please feel free to get in touch on are website, Twitter, or at hi@terminal.co as we are more than happy to help out.