Developer Quick Integration Guide

Explore how Blocknative works with this demo Dapp!

QUICK SETUP STEPS

 

Step 1: Sign Up

Sign Up - It's Free!     You'll need to create your account and confirm your email to get your API Key.

Step 2: Get an API Key

Create your API key to connect Assist.js to your Blocknative analytics account.

Step 3: Initialize Blocknative Assist

After creating your API Key, initialize Assist on the first page of your Dapp and add your API key to the configuration settings.

Step 4: Implement a Capability Below

This page works as a live Dapp. Look for the "Try It" buttons below to see examples of Blocknative Assist in action along with code examples for implementation in your own Dapp.

Want to dig deeper? Check out or Github Repo or Join us on Discord.

Capability Review

 

Capability 1: Readiness Assessment

Get the status of your user’s environment when they load your Dapp by using the getstate() function. 



1  accessToAccounts: true,
2  accountAddress: "0x27c382487b6f30926acf7086de1210845d62e7cd",
3  accountBalance: "128426660000000000",
4  correctNetwork: true,
5  currentProvider: "metamask”,
6  minimumBalance: true,
7  mobileDevice: false,
8  userCurrentNetworkId: “4”,
9  validBrowser: true,
10 walletEnabled: true,
11 walletLoggedIn: true,
12 web3Wallet: true

The above values represent your current browser state. Try logging in or out of MetaMask to see them change in real time.

Why use Assist.js? ¯\_(ツ)_/¯

Trying to keep track of all these states isn’t trivial, and they change all the time. Save yourself — and your team — hours of headaches and support work and let us cover every edge case for you.



Capability 2:
Onboarding Assistance

Call up helpful modals to guide your users through browser setup and wallet install with the onboard() function in Assist.JS. Check out the example react app implementation below.


More complex Dapps should consider calling our API through a singleton in your Dapp. The below JS file demonstrates that pattern.

Download blocknative_config.js

Why do I need onboarding?! ¯\_(ツ)_/¯

Every Dapp has to overcome the hurdle of explaining to new users how to interact with the blockchain. We handle every step a user needs to take — from installing MetaMask to getting more ETH — to successfully transact with your Dapp. Assist will prevent users from getting stuck by common errors.

Try-It@2x 

Want to see Blocknative Assist onboarding in other live Dapps? Check out these demos:

Maker CDP Demo    Uniswap Demo



Capability 3 & 4:
Wallet Check & Transaction Awareness

Get Wallet Check & Transaction Awareness by wrapping your contract and transactions with assist. See our basic implementation below and explore our github documentation to see all the additional customizations you can make.



Why do I need Wallet Check?! ¯\_(ツ)_/¯

It’s easy to get mixed up and connect to the wrong network (or run out of ETH). These notifications will keep your users on-track and ready to transact with your Dapp.

Try-It@2x 

 

Why do I need Transaction Awareness?! ¯\_(ツ)_/¯

It’s frustrating for new and experienced users alike to keep track of the state of their transaction. Did it complete? Did it stall or fail? We will provide them with real-time feedback on in-flight transactions so they know what's happening without having to leave your Dapp.

Try a transaction to our demo contract that will only use some Gas.

Try-It@2x 

 

Want to use our notification for more than just transaction messages? Write your own notification messages and choose from 3 style types to create your own with the notify method.

Try-It@2x 

 



Capability 5:
Performance Analytics

Once Assist is configured you get baseline visibility into your ‘wallet funnel’ from top-to-bottom with no extra code!

In order to ensure user privacy, all our stats are based on Dapp EVENTS. Blocknative does not capture user session information.

chart-onboarding-problems@2xchart-transaction-readiness@2xchart-transaction-results@2xchart-transaction-volume@2xchart-error-volume@2x

Why do I need this?! ¯\_(ツ)_/¯

Any experienced developer knows it’s not about what you build but how you can learn from what you built. Assist’s analytics give you visibility into your user’s state and transactions so you can identify areas for improvement.

Want transaction analytics without the UI notifications? You’ll need to wrap your transactions and contract as outlined above and set headlessMode:true in your config.

In order to get the stat “Onboarding Problems” you must call onboard() and set headlessMode:false.



Looking for help?

Join the community on Discord and our team will be there to talk you through it!

Connect on Discord