Skip to main content

Usage

AppKit Notifications provides you the building blocks necessary to allow users to subscribe, receive notifications, and manage notification preferences, all from your app's UI. The Web3Inbox SDK supports both React hooks and JavaScript-based integrations.

Before begin using Web3Inbox, you will first need to setup your project to send notifications.

Installation​

npm i @web3inbox/core

Example Usage​

This basic example demonstrates how to use the AppKit Notifications to subscribe to notifications and receive them in your app. Refer to the API Reference for more details on the available methods.

import { Web3InboxClient } from '@web3inbox/core'
import { signMessage } from '@wagmi/core'

const client = await Web3InboxClient.init({ projectId: '...' })

const account = 'eip155:1:0x9AfEaC202C837df470b5A145e0EfD6a574B21029'

// Set the account to a CAIP-10 account ID
await client.setAccount(account)

const { message, registerParams } = await client.prepareRegistration({ account })
const { signature } = await signMessage(message)
await client.register({ signature, registerParams })

// Get the current notification subscription or watch for updates
const subscription = client.getSubscription()
client.watchSubscription(subscription => console.log({ subscription }))

// Subscribe to the app
await client.subscribeToDapp()

// Get notification history
const notificationsPerPage = 5
const isInfiniteScroll = true

client.pageNotifications(
  notificationsPerPage,
  isInfiniteScroll
)(notifications => {
  // add logic to display notifications here.
  // if isInfiniteScroll is true, notifications will contain all notifications fetched so far, else it will only fetch current page
  // See API docs for more information on `pageNotifications()` and how to use `notifications`
})

UX Guidelines​

For the best user experience we have several recommendations on how to build the Web3Inbox flows into your app:

  • Have an explicit opt-in UI to subscribe to notifications. Some users may not want to receive notifications, and enabling notifications requires the user to sign a message with their blockchain account. Enabling notifications should be optional, and if they do enable them they should be told that they will need to sign a message to enable this.
  • Have a button to unsubscribe from notifications once they are enabled. Users may want to stop receiving notifications, so you should have a button to unsubscribe from notifications if the user wants to.
  • Make use of notification types. These allow the user fine-grained control over what types of notifications they want to receive from your app. These allow users to only unsubscribe from the specific notifications they are no longer interested in, rather than needing to unsubscribe from your entire app. Your app should include functionality to manage notification preferences.