Overview

Torus offers a simplistic web3 wallet that wields unparalleled distributed key storage to ensure maximum security. Torus wallet streamlines dapp logins by connecting to your wallet using a google or facebook account, enabling non-technical consumers to easily join the web3 ecosystem and interact with dapps. Torus is leading the way in the path toward simplifying the process of interacting with the blockchain. We are excited to support Torus in this journey towards mainstream adoption by allowing any dapp integrated with Torus to begin surfacing logs and analytics using the TerminalSDK. If you're unfamiliar with Torus wallet go ahead and check out their page here

Today, we will go through integrating Torus wallet with the TerminalSDK to surface logs and analytics from Torus Wallet to Terminal. If your not familiar with the Torus wallet, go ahead and check it out here. If you already have a basic dapp running, surfacing logs with the TerminalSDK is easy and straightforward. To demonstrate this, we will build a simple dapp to interact with the Torus wallet and surface the logs to the Terminal dapp monitoring platform. For more information about using TerminalSDK, check out the docs and npm page.

Tutorial

For this tutorial we’re going to build a dapp to initialize a torus web3 instance and send a transaction. To do so, we are going to use React. React allows for the easy creation of web apps through the `create-react-app` command. If your unfamiliar with React, you can follow this tutorial to get it installed. Once you have it installed you can run the command

create-react-app torus-test

This will create a `torus-test` directory and initialize a React project within. Open up the `torus-test` directory in your preferred code editor and navigate to the App.js file. This is where we will be doing all of the work for this dapp.

To keep the dapp as simple as possible, we will begin by deleting everything within the return statement except the outermost <div>:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div></div>
  );
}

export default App;

Now that the project is setup, we will go ahead and install the required dependencies. Install the necessary dependencies with the following commands:

yarn add web3

yarn add @terminal-packages/sdk

yarn add @toruslabs/torus-embed

You can also install the required packages using npm if you'd like. From here we are ready to actually start writing our dapp. We'll start importing everything we will need and instantiating a Torus and web3 object:


import Torus from "@toruslabs/torus-embed";
import Web3 from "web3";
import { TerminalHttpProvider, SourceType, Web3Versions } from "@terminal-packages/sdk";

const torus = new Torus();
let web3 = {};

// rest of your code

If you don't already have one, you'll need to grab an API key and a projectId for your Terminal account from the settings page. Check out the docs for more info on getting your API key and projectId. Once you have your credentials ready to go, we can go ahead and initialize our Torus object and web3 object by defining a setup function inside the App() function:


function App() {

  const setup = async function() {
    await torus.init({ network: { host: "kovan" } });
    await torus.login();
    web3 = new Web3(
      new TerminalHttpProvider({
        customHttpProvider: torus.provider,
        apiKey: "YOUR_TERMINAL_API_KEY",
        source: "TORUS",
        projectId: "YOUR_TERMINAL_PROJECTID",
        web3Version: Web3Versions.one,
      })
    );
  }; 
  //this function logs in to torus and then sets web3 instance
  setup();
  
  //rest of your code
  }

Note that we initialize our Torus object on the kovan network. This is not necessary and simply leaving it as await torus.init() will initialize it to the ethereum mainnet.

Now you'll be able to make any web3 call using this instance and retrieve all the logs to your Terminal account. Below you can find the full App.js file where a sendTx function is defined and called with a button. This Torus instance is initialized on the kovan network and the "to:" address defined in the transaction will be your own so there is no risk of losing your precious ETH. Feel free to replace sendTransaction with any web3 method of your choice and test it out.

import React from "react";
import Web3 from "web3";
import { TerminalHttpProvider, Web3Versions } from "@terminal-packages/sdk";
import Torus from "@toruslabs/torus-embed";

let web3 = {};
const torus = new Torus();

function App() {
  const setup = async function() {
    await torus.init({ network: { host: "kovan" } });
    await torus.login();

    web3 = new Web3(
      new TerminalHttpProvider({
        customHttpProvider: torus.provider,
        apiKey: "YOUR_TERMINAL_API_KEY",
        source: "TORUS",
        projectId: "YOUR_TERMINAL_PROJECTID",
        web3Version: Web3Versions.one
      })
    );
  };

  const sendTx = () => {
    web3.eth.getAccounts((err, res) => {
      console.log(res[0]);
      web3.eth.sendTransaction({
        from: res[0],
        to: res[0],
        value: web3.utils.toWei("0.0001")
      });
    });
  };

  setup();
  return (
    <div className="App">
      <button onClick={() => sendTx()}>SendTx</button>
    </div>
  );
}

export default App;

After testing it out, you will be able to find all of the logs as wells as other relevant analytics data on your Terminal account looking something like this:

The full code for this dapp is available here. 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.