notifications-react

Web3Analytic's react SDK for in-dapp notifications

Install

npm install @web3analytic/notifications-react

Usage

There are two ways to use this SDK. The first is through React context providers, which is very easy to integrate but provides minimal flexibility. The second is through a component and a function call, which requires state management but provides more room for customization. We provide examples of both approaches below.

Context Providers Approach

Import the following:

import { 
  DappNotificationProvider,
  DappNotificationContext,
} from '@web3analytic/notifications-react';

In your main App.tsx or whereever your React DOM and routes are, wrap the the DOM with the provider:

<DappNotificationProvider>
  ...
</DappNotificationProvider>

Then, in the component where users are connecting their wallet to your frontend, add the following lines:

import { DappNotificationContext } from '@web3analytic/notifications-react';
...
const { onConnectAddress } = useContext(DappNotificationContext); 

The function onConnectAddress is defined by this SDK as a callback when the end-user connects their wallet. It will automatically register an impression and render the notification.

Here is a specific example of using onConnectAddress with Metamask (note that your code may look different to this):

async function connectToMetamask() {
  if (window.ethereum) {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    await provider.send('eth_requestAccounts', []);
    const signer = provider.getSigner();
    try {
      var address: string = await signer.getAddress();
      address = address.toLowerCase().trim();

      // Callback from context to show notification
      onConnectAddress(address);
    } catch (err: any) {
      console.log(err);
    }
  }
}

Checkout this gist for a full example.

Component Approach

We require the following import:

import { DappNotification } from '@web3analytic/notifications-react';

This component takes as its props several variables returned by registerImpression (see @web3analytic/notifications-sdk). It renders a notification that appears in the top right hand side of the page that the user can interact with. Reactions to this component are then tracked. Import the following lines:

import { registerImpression } from '@web3analytic/notifications-sdk';
import { DappNotification } from '@web3analytic/notifications-react';

Now, you can render a component conditionally. For instance, here is an example of showing an in-dapp notification when a user connects an addess to MetaMask:

// Saves the ID of an impression
const [impressionId, setImpressionId] = useState(null);
// Saves the prompt returned by the SDK
const [notificationPrompt, setNotificationPrompt] = useState(null);
// Web3Analytic API key
const apiKey = ...

// ...more code...

/**
 * Callback for when an end-user connects their wallet to your dapp
 */
async function OnConnectToMetamask() {
  if (window.ethereum) {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    try {
      const address = await signer.getAddress();
      registerImpression(apiKey, address)
      .then(res => {
        if (res.impressionId) { setImpressionId(res.impressionId); }
        if (res.prompt) { setPrompt(res.prompt); }
      })
      .catch(err => {
        console.log('App `registerImpression` error:', err);
      });
    } catch (error) {
      console.log("web3analytic error", error);
    }
  }
}

// ...more code...

return (
  ...
  <DappNotification
    apiKey={apiKey}
    impressionId={impressionId}
    prompt={prompt}
  />
);

The impressionId is an identifier for the impression object produced by the SDK function registerImpression. This is used to record a reaction to the notification in DappNotification. The prompt object contains the metadata of what to show in the notification; it is also passed to DappNotification to render. The variable apiKey can be found in the Web3Analytic web application on the campaigns page.

In the context provider approach, these variables are managed for you. In this approach, you have access to this variables and can easily customize the call to registerImpression.

Please see this gist for a complete example.