Overview


Portis offers a dynamic and powerful web3 wallet with top of the line security features and a simple but seamless user interface. Not only that, but integrating Portis into your dapp is as easy as it gets from a developer perspective. A more user friendly and composable blockchain is essential in the path towards mainstream adoption. We are excited to support Portis in this endeavor by allowing any dapp integrated with Portis to begin surfacing logs and analytics using the TerminalSDK.

Today, we will go through integrating Portis wallet with the TerminalSDK to surface logs and analytics from Portis Wallet to Terminal. To begin, we will assume that you already have a Portis dapp ID. If not, you can sign up for one here. If you already have a dapp ID and 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 Portis wallet and surface the logs to the Terminal dapp monitoring platform. For more information about using TerminalSDK, check out the docs and npm page.

For this tutorial we’re going to build a dapp to initialize a portis 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 portis-test

This will create a `portis-test` directory and initialize a React project within. Open up the `portis-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

You can also install the required packages using npm if you'd like. From here we are ready to actually writing our dapp. We'll start by importing Web3, and the TerminalSDK as well as initializing a Portis instance like this:


import Portis from "@portis/web3";
import Web3 from "web3";
import { TerminalHttpProvider, SourceType } from "@terminal-packages/sdk";

const portis = new Portis("PORTIS_DAPP_ID", "kovan");

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 web3 instance like this:


const web3 = new Web3(
  new TerminalHttpProvider({
    apiKey: "TERMINAL_API_KEY",
    projectId: "TERMINAL_PROJECTID",
    source: SourceType.Portis,
    customHttpProvider: portis.provider
  })
);

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 sendTransaction function is defined and called with a button. Notice that the Portis 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 logo from "./logo.svg";
import "./App.css";
import Portis from "@portis/web3";
import Web3 from "web3";
import { TerminalHttpProvider, SourceType } from "@terminal-packages/sdk";


const portis = new Portis("PORTIS_DEV_ID", "kovan");

const web3 = new Web3(
  new TerminalHttpProvider({
    apiKey: "TERMINAL_API_KEY",
    projectId: "TERMINAL_PROJECTID",
    source: SourceType.Portis,
    customHttpProvider: portis.provider
  })
);

function App() {

  const sendTrx = () => {
    web3.eth.getAccounts().then(accounts => {
      web3.eth.sendTransaction({
        from: accounts[0],
        value: web3.utils.toWei(".0001", "ether"),
        to: accounts[0]
      });
    });
  };

  return (
    <div>
      <button onClick={() => sendTrx()}>Send Transaction</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 like this:

The full code for this dapp is available here. If you are having trouble integrating Portis 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.