feat: read/unread status

docs/api/notify/usage.mdx

@@ -224,7 +224,14 @@ const accountSubscriptions = notifyClient.getActiveSubscriptions({
 
 ```javascript
 // Will return all past Notify messages for the provided subscription topic, keyed by messageId.
-const messageHistory = notifyClient.getNotificationHistory({ topic, limit: 10, startingAfter: "notification-id" })
+const messageHistory = notifyClient.getNotificationHistory({ topic, limit: 10, startingAfter: "notification-id", unreadFirst: true })
+```
+
+#### Marking notification as read
+
+```javascript
+// Will mark the 2 specific notifications as read
+const messageHistory = notifyClient.markNotificationsAsRead({ topic, notificationIds: ["notification-1", "notification-2" ] })
 ```
 
 </PlatformTabItem>

docs/web3inbox/about.mdx

@@ -27,6 +27,7 @@ Some of the key features of the Web3Inbox SDK include:
 - **Device push notifications:** Push notifications to the user's wallet (if it supports Notify API) or the [Web3Inbox.com app](https://app.web3inbox.com).
 - **Notifications history:** Messages are stored and can be accessed from any device.
 - **Spam protection/subscription control.**
+- **Tracking read status across devices.**
 
 ## How do users receive notifications?
 

docs/web3inbox/frontend-integration/api.mdx

@@ -298,27 +298,45 @@ Get notifications
 // watch notifications of current account's subscription to current dapp
 const notificationsPerPage = 5
 const isInfiniteScroll = true
+const unreadFirst = true
 
-const { data: notifications, nextPage } = useNotifications(
+const { data: notifications, nextPage, markAllReturnedNotificationsAsRead, markNotificationsAsRead } = useNotifications(
   notificationsPerPage, 
-  isInfiniteScroll
+  isInfiniteScroll,
+  unreadFirst 
 )
+
+// marking a single notification as read
+notifications[0].markAsRead();
+
+// mark all notifications currently in `notifications` returned array as read
+markAllReturnedNotificationsAsRead();
+
+// mark specific notifications as read
+markNotificationsAsRead(notifications.slice(2).map(n => n.id))
+
 ```
 
 #### References
 
 - **notificationsPerPage:** Number representing how many notifications to get per fetch
 - **isInfiniteScroll:** Whether or not to keep already fetched notifications when getting next page
+- **unreadFirst:** Whether or not unread messages should be sorted at the top, regardless of timestamp
 - **notifications:** Array of notifications, of type
+- **notification.markAsRead:** Mark the notification as read
+- **markAllReturnedNotificationsAsRead**: Mark currently fetched notifications as read. *This does not mark all notifications as read, just the ones that have been fetched and returned here.*.
+- **markNotificationsAsRead**: Takes an array of notification IDs and marks them as read
 
 ```ts
 {
   title: string;
   sentAt: number;
   body: string;
   id: string;
+  isRead: boolean;
   url: string | null;
   type: string;
+  markAsRead: () => Promise<void>
 }
 ```
 
@@ -336,29 +354,53 @@ const notificationsPage = client.getNotificationHistory({
 
 const notificationsPerPage = 5
 const isInfiniteScroll = true
+const unreadFirst = true
+
+let notifications = []
 
-const { nextPage } = client.pageNotifications(
+const onUpdate = ({notifications: fetchedNotifications}: GetNotificationsReturn) => {
+  notifications = fetchedNotifications
+}
+
+const { nextPage, markAllReturnedNotificationsAsRead, markNotificationAsRead } = client.pageNotifications(
   notificationsPerPage,
-  isInfiniteScroll
+  isInfiniteScroll,
+  unreadFirst,
 )(onUpdate)
+
+
+// marking a single notification as read
+notifications[0].markAsRead();
+
+// mark all notifications currently in `notifications` returned array as read
+markAllReturnedNotificationsAsRead();
+
+// mark specific notifications as read
+markNotificationsAsRead(notifications.slice(2).map(n => n.id))
 ```
 
 #### References
 
 - **notificationsPerPage:** Number representing how many notifications to get per fetch
 - **isInfiniteScroll:** Whether or not to keep already fetched notifications when getting next page
+- **unreadFirst:** Whether or not unread messages should be sorted at the top, regardless of timestamp
 - **onUpdate:**: A callback that will be called whenever notifications get updated
 - **nextPage:**: A function to be called to fetch the next page of notifications
 - **notifications:** Array of notifications, of type
+- **notification.markAsRead:** Mark the notification as read
+- **markAllReturnedNotificationsAsRead**: Mark currently fetched notifications as read. *This does not mark all notifications as read, just the ones that have been fetched and returned here.*.
+- **markNotificationsAsRead**: Takes an array of notification IDs and marks them as read
 
 ```ts
 {
   title: string;
   sentAt: number;
   body: string;
   id: string;
+  isRead: boolean;
   url: string | null;
   type: string;
+  markAsRead: () => Promise<void>
 }
 ```
 

docs/web3wallet/notify/usage.mdx

@@ -24,6 +24,8 @@ Links to sections on this page. Some sections are platform specific and are only
   Change allowed notification types sent by dapp
 - [Fetching available notification types](#fetching-available-notification-types):
   Get latest notification types
+- [Updating messages read state](#updating-messages-read-state):
+  Marking messages as read or unread across all devices
 - [Unsubscribe from a dapp](#unsubscribe-from-a-dapp):
   Opt-out from receiving notifications from a dapp
 - [Account logout](#account-logout):
@@ -45,6 +47,9 @@ section are:
 
 To check the full list of platform specific instructions for your preferred platform, go to [Extra (Platform Specific)](#extra-platform-specific) and select your platform.
 
+
+
+
 ## Initialization
 
 <CloudBanner />
@@ -553,6 +558,50 @@ const notificationTypes = notifyClient.getActiveSubscriptions({ account }).filte
 </PlatformTabItem>
 </PlatformTabs>
 
+
+## Updating messages read state
+
+Updating a messages read state allows the user to know that they already looked at and seen the message. The state of being read is also synced across all devices where the user can see the notification.
+
+This method could be used in several ways in your UI, for example the user may click a button to mark the notification as read. Or you may automatically mark the notification is read when the notification is within the viewport. How you choose implement this is up to you.
+
+<PlatformTabs activeOptions={["ios","android", "react-native"]}>
+<PlatformTabItem value="ios">
+</PlatformTabItem>
+<PlatformTabItem value="android">
+
+
+```kotlin
+val topic: String = // active subscription topic
+val notificationIds: List<String> = // List of notification ids to mark as read
+val read: Boolean = // Read state to set the notifications to
+
+val params = Notify.Params.UpdateNotificationsReadState(topic, notificationIds, read)
+
+NotifyClient.updateNotificationsReadState(
+    params,
+    onSuccess = {
+        // callback for when the change notifications read state request was successful
+    },
+    onError = { error ->
+      // callback for when the change notifications read state request has failed
+    }
+)
+}
+```
+
+</PlatformTabItem>
+<PlatformTabItem value="react-native">
+```typescript
+notifyClient.updateNotificationsReadState({
+  topic: string,
+  notificationIds: ["notification-id1", "notification-id2"],
+  read: true
+})
+```
+</PlatformTabItem>
+</PlatformTabs>
+
 ## Unsubscribe from a dapp
 
 To opt-out of receiving notifications from a dap, a user can decide to unsubscribe from dapp.
@@ -765,6 +814,10 @@ val walletDelegate = object : NotifyClient.Delegate {
     override fun onError(error: Notify.Model.Error) {
         // Triggered when there's an error inside the SDK
     }
+
+    override fun onNotifyNotificationsChanged(notifyNotificationsChanged: Notify.Event.NotificationsChanged) {
+        // Triggered when a state was changed in the notifications
+    } 
 }
 
 NotifyClient.setDelegate(walletDelegate)