A main driver in our design decisions for the Terminal SDK since early on has been to make the process of integrating logging support for dapps as straightforward and painless as possible.  Since our initial release we have released various sample projects and aided with a number of third party integrations. The diversity of approaches taken by frontend teams when handling web3 logic has led us to create simple frameworks for initializing web3 using different providers and libraries along with the TerminalSDK. Here, we will outline how to use our framework for using web3-react

Web3-react is a modular framework designed to make bootstrapping react dapp frontends a breeze.  With web3-react developers can establish a single Web3ReactProvider near the root of a react project that exposes web3 functionality and a variety of utility functions throughout the entire dapp.  Web3-react provides concise abstractions over web3 provider initialization, exposes contextualized data about the current injected provider instance for seamless multi-network support, and has baked in support for a number of the most popular Ethereum wallets.  It’s these exact abstractions that make using web3-react in your next dapp a no-brainer, especially when coupled with the Terminal SDK.  

Check out the code framework on codesandbox or github now, or read on to learn more about how it works. You can use the patterns seen in this example to seamlessly bootstrap your next dapp with logging support baked in from day one.

For more details on the Terminal SDK, check out the official docs.

To learn more about the different features web3-react has to offer, check it out on github.

If you pop open the project in codesandbox and navigate to src/App.js you will see a function named getLibrary (also defined below).  getLibrary is where you would traditionally initialize web3, but notice how we handle things a bit differently when using the Terminal SDK.  Using the Terminal SDK, we either initialize a new Web3 with a modified window.terminal.ethereum object from metamask, or the TerminalHttpProvider object with various configurable options.

  const getLibrary = provider => {
    let library;
    if (provider._metamask) {
      library = new Web3(window.terminal.ethereum);
    } else {
      library = new Web3(
        new TerminalHttpProvider({
          customHttpProvider: provider,
          apiKey: values.apiKey,
          projectId: values.projectId,
          source: setSource(provider),
          web3Version: Web3Versions.one
        })
      );
    }
    library.pollingInterval = 8000;
    return library;
  };

The apiKey and projectId properties shown in the TerminalHttpProvider object are derived from your Terminal account.  If you don’t have a Terminal account already, head over to terminal.co and follow this short guide in the docs to get your account set up in minutes.  The apiKey and projectId are configurable from within the dapp ui simply by modifying their respective values in the text fields (pictured below).  It’s important to note that passing your credentials into these text fields will enable logs for every provider options aside from Metamask.  To get logs for metamask, navigate to the public/index.html file and change the apiKey and projectId values in the startLogging function found on line 29.  

Now you’re ready to test how quickly and easily you can log your dapp using the Terminal SDK and web3-react!  Go ahead and swap between the provider options a few times, then head into the “Logs” section of your Terminal account.  Each time a new web3 provider is initialized, the dapp will immediately make requests for your current balance and the current block number of the network you are connected to.  Metadata for these requests forwarded to the Terminal logging service and subsequently decoded  so that you can get detailed insights into your the dapp’s activity and performance.  While you’re checking out the logs, be sure to explore the other analytics tools layered on top of the logging service, such as the dapp specific user and transaction feeds.

If you have any questions or are interested in learning more about how Terminal can level up your dapp monitoring and insights, you can reach us in the official Terminal Discord channel or at hi@terminal.co, on our website or on twitter.