Migration Guide

General Migration notes

• isLimited flag has been removed in favor of allApps flag. They essentially mean the opposite thing.
• Deleting messages is no longer possible
• Messages are now stored on notify server and can be paged
• Registration is more flexible since it is now split into 2 functions

Migrating from 0.x to 1.0.0

There are numerous breaking changes in the stable release.

Package rename

@web3inbox/widget-react has been renamed to @web3inbox/react

@web3inbox/core is still named the same.

Initializing the client

Previously, a use of hook was required to init the client and a separate hook was required to check for ready status. Now, there is only a hook for checking ready status which is recommended to be used to be sure if web3inbox functionality is ready to use. However, initiating the client is now done with a simple function call.

import { useInitWeb3InboxClient } from '@web3inbox/widget-react'
import { initWeb3InboxClient } from '@web3inbox/react'

useInitWeb3inboxClient({ projectId, domain, isLimited })
initWeb3inboxClient({ projectId, domain, allApps })

Checking for client ready status

import { useWeb3InboxClient } from '@web3inbox/react'

const { isLoading: w3iClientIsLoading } = useWeb3InboxClient()

Managing Accounts

Previously, the account needed to be set using setAccount and still had to be passed down to hooks like useManageSubscriptions. This is no longer the case. Also, registration management was included in the same hook. Now they all follow single responsibility principle.

• Setting accounts

- import { useW3iAccount } from "@web3inbox/widget-react"
+ import { useWeb3InboxAccount } from "@web3inbox/react"

- const { setAccount } = useW3iAccount()

setAccount(`eip155:1:0x...`)
+ const { data: account } = useWeb3InboxAccount(`eip155:1:0x...`)

• Handling registration

- const handleRegistration = () => {
-   register(signMessageAsync)
- }
+ const { prepareRegistration } = usePrepareRegistration();
+ const { register, isLoading: isLoadingRegister } = useRegister();
+ const handleRegistration = async () => {
+   try {
+     const { message, registerParams } = await prepareRegistration();
+     const signature = await signMessageAsync({ message: message });
+     await register({ registerParams, signature });
+   } catch (registerIdentityError: any) {
+     console.error(registerIdentityError)
+   }
+ };

Managing notifications

Messages (notifications) function a little differently now. One of the big changes is that you can no longer delete messages. Furthermore, messages can now be paged. For convenience, "infinite scroll" paging functionality is available, as in keeping older pages in the returned array.

• Retrieving notifications

- import { useMessages } from "@web3inbox/widget-react"
+ import { useNotifications } from "@web3inbox/react"

- const { messages } = useMessages()
+ const notificationsPerPage = 5
+ const isInfiniteScroll = true
+
+ const { data: notifications, nextPage } = useNotifications(
+   notificationsPerPage,
+   isInfiniteScroll
+ )
+
+ const getMoreNotifications = () => {
+   nextPage()
+ }

• Retrieving notification types

Note

Notification images are retrieved from notification types now.

Sizes of images available are: sm, md and lg for small, medium and large respectively.

- import { useSubscriptionScopes } from "@web3inbox/widget-react"
+ import { useNotificationTypes } from "@web3inbox/react"

- const { scopes } = useSubscriptionScopes()
+ const { data: notificationTypes } = useNotificationTypes()
+
+ const notificationImageUrl = notificationTypes[notification.type].imageUrls.md;

Managing Subscriptions

Managing subscriptions has changed considerably. Previously there was a single hook and now there are numerous single responsibility hooks.

- import { useManageSubscription } from "@web3inbox/widget-react"
+ import { useSubscribe, useUnsubscribe, useSubscription } from "@web3inbox/react"

- const { subscribe, unsubscribe, isSubscribed } = useManageSubscription()
+ const { subscribe } = useSubscribe()
+ const { unsubscribe } = useUnsubscribe()
+ const { data: subscription } = useSubscription()

- const { subscriptions } = useSubscriptions()
+ const { data: subscriptions } = useSubscriptions()