add notificationavatar

packages/shared/src/components/avatars/NotificationAvatar.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    import { Avatar, IconName, Tooltip } from '@bloomwalletio/ui'
+    import { darkMode } from '@core/app/stores'
+    import type { NotifyClientTypes } from '@walletconnect/notify-client'
+
+    export let subscription: NotifyClientTypes.NotifySubscription | undefined = undefined
+    export let notificationType: string | undefined = undefined
+
+    let dappImageError = false
+    let notificationImageError = false
+    $: hasDappImage = subscription?.metadata.icons[0] && !dappImageError
+
+    let dappAnchor: HTMLElement
+    let notificationAnchor: HTMLElement
+</script>
+
+<div class="relative self-start" bind:this={dappAnchor}>
+    <Avatar
+        size="lg"
+        icon={!hasDappImage ? IconName.Application : undefined}
+        textColor="primary"
+        backgroundColor={$darkMode ? 'surface-2-dark' : 'surface-2'}
+    >
+        {#if hasDappImage}
+            <img
+                src={subscription?.metadata.icons[0]}
+                alt={subscription?.metadata?.name}
+                class="size-full"
+                on:error={() => (dappImageError = true)}
+            />
+        {/if}
+    </Avatar>
+    {#if notificationType && subscription?.scope[notificationType]}
+        <span class="absolute -right-1 -bottom-1" bind:this={notificationAnchor}>
+            <Avatar
+                size="xs"
+                icon={notificationImageError ? IconName.Bell : undefined}
+                textColor="primary"
+                backgroundColor={$darkMode ? 'surface-2-dark' : 'surface-2'}
+            >
+                {#if !notificationImageError}
+                    <img
+                        src={subscription.scope[notificationType]?.imageUrls.sm}
+                        alt={notificationType}
+                        class="size-full"
+                        on:error={() => (notificationImageError = true)}
+                    />
+                {/if}
+            </Avatar>
+        </span>
+    {/if}
+</div>
+{#if subscription?.metadata.name}
+    <Tooltip anchor={dappAnchor} text={subscription.metadata.name} placement="right" event="hover" />
+{/if}
+{#if notificationType && subscription?.scope[notificationType].name}
+    <Tooltip
+        anchor={notificationAnchor}
+        text={subscription.scope[notificationType].name}
+        placement="right"
+        event="hover"
+    />
+{/if}

packages/shared/src/components/avatars/index.ts

@@ -3,6 +3,7 @@ export { default as GovernanceAvatar } from './GovernanceAvatar.svelte'
 export { default as NftAvatar } from './NftAvatar.svelte'
 export { default as NetworkAvatar } from './NetworkAvatar.svelte'
 export { default as NetworkAvatarGroup } from './NetworkAvatarGroup.svelte'
+export { default as NotificationAvatar } from './NotificationAvatar.svelte'
 export { default as ProfileAvatar } from './ProfileAvatar.svelte'
 export { default as ProfileAvatarWithBadge } from './ProfileAvatarWithBadge.svelte'
 export { default as TokenAvatar } from './TokenAvatar.svelte'

packages/shared/src/components/tiles/NotificationTile.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
     import { notificationsManager } from '@auxiliary/wallet-connect/notifications'
-    import { Icon, IconName, Text, Tile } from '@bloomwalletio/ui'
+    import { Text, Tile } from '@bloomwalletio/ui'
     import { getBestTimeDuration } from '@core/utils'
+    import { NotificationAvatar } from '@ui/avatars'
     import { NotifyClientTypes } from '@walletconnect/notify-client'
 
     export let notification: NotifyClientTypes.NotifyNotification
@@ -11,24 +12,8 @@
 </script>
 
 <Tile class="!rounded-none">
-    <div class="flex justify-between gap-2 w-full">
-        <icon-container
-            class="w-12 h-12 flex justify-center items-center rounded-xl shrink-0"
-            style:background-color={'#fff'}
-        >
-            {#if subscription?.metadata?.icons[0] && subscription?.scope[notification.type]?.imageUrls?.sm}
-                <div class="relative">
-                    <img src={subscription.metadata.icons[0]} alt="icon" class="w-10 h-10 rounded-md" />
-                    <img
-                        src={subscription.scope[notification.type]?.imageUrls.sm}
-                        alt="icon"
-                        class="absolute -right-1 -bottom-1 w-4 h-4 rounded-full"
-                    />
-                </div>
-            {:else}
-                <Icon name={IconName.Bell} customColor={'brand'} size="sm" />
-            {/if}
-        </icon-container>
+    <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="flex justify-between items-center gap-2">
                 <Text type="sm" lineClamp={1}>{notification.title}</Text>