feat: highlight unread notifications (#2527)

* chore: refactor for multi chain support (#2511) * chore: remove BASE_TOKEN_CONTRACT_ADDRESS map * chore: rename getL1Network to getStardustNetwork * fix: type * feat: highlight unread notification * fix incoming notifications * restructure --------- Co-authored-by: Tuditi <[email protected]> Co-authored-by: Mark Nardi <[email protected]>
bloomwalletio · May 22, 2024 · af30bb5 · af30bb5
1 parent b1777ca
commit af30bb5
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 15 deletions.
diff --git a/packages/shared/src/components/tiles/NotificationTile.svelte b/packages/shared/src/components/tiles/NotificationTile.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { notificationsManager } from '@auxiliary/wallet-connect/notifications'
-    import { Link, Text, Tile } from '@bloomwalletio/ui'
+    import { Link, Indicator, Text, Tile } from '@bloomwalletio/ui'
+    import { time } from '@core/app/stores'
     import { getBestTimeDuration } from '@core/utils'
     import { NotificationAvatar } from '@ui/avatars'
     import { NotifyClientTypes } from '@walletconnect/notify-client'
@@ -11,22 +12,27 @@
     $: subscription = notificationsManager.getSubscriptionsForTopic(subscriptionTopic)
 </script>
 
-<Tile class="!rounded-none">
+<Tile class="!rounded-none {notification.isRead ? '' : '!bg-brand/5 !dark:bg-brand-dark/5'}">
     <div class="flex justify-between gap-4 w-full">
         <NotificationAvatar {subscription} notificationType={notification.type} />
         <div class="flex-grow flex flex-col items-start">
-            <div class="w-full flex justify-between items-center gap-2">
+            <div class="w-full flex justify-between gap-2">
                 <div class="flex items-center gap-2">
                     <Text type="sm" lineClamp={1}>{notification.title}</Text>
-                    <Text type="xs" fontWeight="normal">
-                        {getBestTimeDuration(new Date().getTime() - notification.sentAt, 'day', true)}
-                    </Text>
+                    {#if notification.url}
+                        <Link textType="xs" href={notification.url} external />
+                    {/if}
                 </div>
-                {#if notification.url}
-                    <Link textType="xs" href={notification.url} external />
+                {#if !notification.isRead}
+                    <Indicator size="sm" />
                 {/if}
             </div>
-            <Text type="xs" fontWeight="normal" lineClamp={2}>{notification.body}</Text>
+            <div class="w-full flex justify-between gap-2">
+                <Text type="xs" fontWeight="normal" lineClamp={2}>{notification.body}</Text>
+                <Text type="xs" fontWeight="normal">
+                    {getBestTimeDuration($time.getTime() - notification.sentAt, 'day', true)}
+                </Text>
+            </div>
         </div>
     </div>
 </Tile>
diff --git a/...ared/src/lib/auxiliary/wallet-connect/notifications/classes/notificationsManager.class.ts b/...ared/src/lib/auxiliary/wallet-connect/notifications/classes/notificationsManager.class.ts
@@ -49,7 +49,11 @@ export class NotificationsManager {
         this.notifyClient.on(
             NotifyEvent.Notification,
             (event: NotifyClientTypes.EventArguments[NotifyEvent.Notification]) => {
-                this.handleNewNotification(event.topic, event.params.notification)
+                // The types are not correct on this event, so we need to cast it to the correct type
+                this.handleNewNotification(
+                    event.topic,
+                    event.params.notification as unknown as NotifyClientTypes.NotifyServerNotification
+                )
             }
         )
 
@@ -212,14 +216,25 @@ export class NotificationsManager {
         })
     }
 
-    private handleNewNotification(topic: string, notification: NotifyClientTypes.NotifyNotification): void {
+    private handleNewNotification(topic: string, notification: NotifyClientTypes.NotifyServerNotification): void {
+        const notificationsForTopic = get(this.notificationsPerSubscription)[topic]
+
+        if (!notificationsForTopic || notificationsForTopic?.find((n) => n.id === notification.id)) {
+            return
+        }
+
         this.notificationsPerSubscription.update((state) => {
-            if (!state[topic]) {
-                return state
+            const parsedNotification = {
+                title: notification.title,
+                sentAt: notification.sent_at,
+                body: notification.body,
+                id: notification.id,
+                url: notification.url,
+                isRead: notification.is_read,
+                type: notification.type,
             }
 
-            const notificationsForTopic = state[topic]
-            state[topic] = [...notificationsForTopic, notification]
+            state[topic] = [...state[topic], parsedNotification]
             return state
         })
     }