Follow up notifications

components/common/NotificationBox/NotificationBoxModal.vue

@@ -1,12 +1,13 @@
 <template>
   <div
+    v-if="isOpen"
     class="notification-modal-container theme-background-color border-left is-flex is-flex-direction-column">
     <header
       class="py-4 px-2rem is-flex is-justify-content-space-between border-bottom mb-4">
       <span class="control-label is-size-6 has-text-weight-bold">
         {{ $t('notification.notifications') }}
       </span>
-      <a class="is-flex is-align-items-center" @click="emit('close')">
+      <a class="is-flex is-align-items-center" @click="closeModal">
         <NeoIcon icon="close" />
       </a>
     </header>
@@ -18,15 +19,15 @@
           <NeoButton
             v-if="!showFilter"
             no-shadow
-            class="button-rounded"
+            class="rounded"
             @click.native="showFilter = !showFilter">
             {{ $t('notification.add') }}
             <NeoIcon icon="plus" size="small" />
           </NeoButton>
           <NeoButton
             v-else
             no-shadow
-            class="button-rounded"
+            class="rounded"
             @click.native="showFilter = !showFilter">
             {{ $t('notification.done') }}
             <NeoIcon icon="check" size="small" />
@@ -88,24 +89,30 @@
           </div>
         </div>
       </div>
-      <div v-if="displayedEvents.length === 0" class="empty-tip">
-        <p>{{ $t('notification.emptyTipLine1') }}</p>
-        <p>{{ $t('notification.emptyTipLine2') }}</p>
+      <div v-if="loading" class="empty-tip">
+        <p>{{ $t('notification.loadingTip') }}</p>
       </div>
-      <div v-else class="is-flex is-flex-direction-column">
-        <NotificationItem
-          v-for="(event, index) in displayedEvents"
-          :key="`${event.id}-${index}`"
-          :event="event" />
+      <div v-else>
+        <div v-if="allEvents.length === 0" class="empty-tip">
+          <p>{{ $t('notification.emptyTipLine1') }}</p>
+          <p>{{ $t('notification.emptyTipLine2') }}</p>
+        </div>
+        <div v-else class="is-flex is-flex-direction-column">
+          <NotificationItem
+            v-for="(event, index) in displayedEvents"
+            :key="`${event.id}-${index}`"
+            :event="event" />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Event, FilterOption } from './types'
+import { FilterOption } from './types'
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
 import NeoTag from '@/components/shared/gallery/NeoTag.vue'
+import { usePreferencesStore } from '@/stores/preferences'
 
 import NotificationItem from './NotificationItem.vue'
 import {
@@ -114,18 +121,35 @@ import {
   useNotification,
 } from './useNotification'
 
-const { $store } = useNuxtApp()
-
 const eventTypes = ref<string[]>([
   Interaction.SALE,
   Interaction.OFFER,
   Interaction.ACCEPTED_OFFER,
 ])
+const collectionFilter = ref<FilterOption | null>(null)
+const eventFilter = ref<string[]>([])
+const showFilter = ref(false)
+const prefrencesStore = usePreferencesStore()
+const isOpen = computed({
+  get: () => prefrencesStore.getNotificationBoxCollapse,
+  set: (value) => prefrencesStore.setNotificationBoxCollapse(value),
+})
+const emit = defineEmits(['close'])
 
-const collections = ref<FilterOption[]>([])
-const allEvents = ref<Event[]>([])
+// properly close modal when being closed from outside,e.g. by changeing chain
+watch(isOpen, (newValue, oldValue) => {
+  if (newValue === false && oldValue === true) {
+    emit('close')
+  }
+})
+
+const closeModal = () => {
+  isOpen.value = false
+  emit('close')
+}
+
+const { collections, events: allEvents, loading } = useNotification()
 
-const collectionFilter = ref<FilterOption | null>(null)
 const toggleCollectionFilter = (target: FilterOption) => {
   if (collectionFilter.value?.id === target.id) {
     collectionFilter.value = null
@@ -134,7 +158,6 @@ const toggleCollectionFilter = (target: FilterOption) => {
   }
 }
 
-const eventFilter = ref<string[]>([])
 const toggleEventFilter = (target) => {
   const index = eventFilter.value.findIndex((x) => x === target)
   if (index === -1) {
@@ -144,41 +167,19 @@ const toggleEventFilter = (target) => {
   }
 }
 
-const showFilter = ref(false)
 const isFilterEmpty = computed(
   () => !collectionFilter.value && eventFilter.value.length === 0
 )
 
-const displayedEvents = ref<Event[]>([])
-
-const doSearch = () => {
-  displayedEvents.value = allEvents.value.filter(
+const displayedEvents = computed(() =>
+  allEvents.value.filter(
     (item) =>
       (!collectionFilter.value ||
         collectionFilter.value.id === item.nft.collection?.id) &&
       (eventFilter.value.length === 0 ||
         eventFilter.value.some((x) => x === item.interaction))
   )
-}
-
-const getNotifications = () => {
-  const { collections: collectionData, events: allEventsData } =
-    useNotification($store.getters.getAuthAddress)
-  collections.value = collectionData as unknown as FilterOption[]
-  allEvents.value = allEventsData as unknown as Event[]
-}
-
-watch(allEvents, doSearch, {
-  immediate: true,
-})
-
-watch(collectionFilter, doSearch, { deep: true })
-watch(eventFilter, doSearch, { deep: true })
-
-watch(() => $store.getters.currentUrlPrefix, getNotifications, {
-  immediate: true,
-})
-const emit = defineEmits(['close'])
+)
 </script>
 
 <style scoped lang="scss">

components/common/NotificationBox/NotificationItem.vue

@@ -17,8 +17,9 @@
         <NeoTooltip
           :label="displayName"
           :append-to-body="false"
-          class="nft-name mr-4 has-text-weight-bold">
-          <div class="is-ellipsis">
+          :delay="1000"
+          class="nft-name mr-4">
+          <div class="is-ellipsis max-width has-text-weight-bold">
             {{ displayName }}
           </div>
         </NeoTooltip>
@@ -84,6 +85,9 @@ const displayName = computed(
 <style scoped lang="scss">
 @import '@/styles/abstracts/variables';
 
+.max-width {
+  max-width: 8rem;
+}
 .notify-item {
   padding: 0.75rem 2rem;
   &:hover {

components/common/NotificationBox/useNotification.ts

@@ -29,8 +29,10 @@ export const getInteractionColor = (key: string) => {
   return colorMap[key]
 }
 
-export const useNotification = (account: string) => {
+export const useNotification = () => {
   const { apiInstance } = useApi()
+  const { accountId } = useAuth()
+  const { urlPrefix } = usePrefix()
   const collections = ref<FilterOption[]>([])
   const events = ref<Event[]>([])
 
@@ -43,14 +45,17 @@ export const useNotification = (account: string) => {
   const { data: collectionData } = useGraphql({
     queryName: 'collectionByAccount',
     variables: {
-      account,
+      account: accountId.value,
     },
   })
-
-  const { data: eventData } = useGraphql({
+  const { data: eventData, loading } = useGraphql({
+    queryPrefix:
+      urlPrefix.value === 'bsx' || urlPrefix.value === 'snek'
+        ? 'chain-bsx'
+        : 'subsquid',
     queryName: 'notificationsByAccount',
     variables: {
-      account,
+      account: accountId.value,
     },
   })
 
@@ -60,7 +65,7 @@ export const useNotification = (account: string) => {
 
   watch(eventData, async (result) => {
     const currentBlockNumber = await currentBlock()
-    const offerEvents = result.offerEvents
+    const offerEvents = (result.offerEvents ?? [])
       .map((event) => ({
         ...event,
         nft: {
@@ -70,7 +75,7 @@ export const useNotification = (account: string) => {
       .filter(
         (event) =>
           event.interaction === Interaction.OFFER &&
-          Number(event.offer.expiration) < Number(currentBlockNumber)
+          Number(event.offer.expiration) > Number(currentBlockNumber)
       )
     events.value = sortedEventByDate(
       [...result.events, ...offerEvents],
@@ -81,5 +86,6 @@ export const useNotification = (account: string) => {
   return {
     collections,
     events,
+    loading,
   }
 }

components/navbar/ChainSelectDropdown.vue

@@ -17,17 +17,20 @@
 
 <script lang="ts" setup>
 import { getChainNameByPrefix } from '@/utils/chain'
+import { usePreferencesStore } from '@/stores/preferences'
 
 const { availableChains } = useChain()
 const { $store } = useNuxtApp()
 const { urlPrefix } = usePrefix()
+const prefrencesStore = usePreferencesStore()
 const router = useRouter()
 
 const selected = computed({
   get: () => urlPrefix.value,
   set: (value) => {
     $store.dispatch('setUrlPrefix', value)
     router.push({ path: `/${value}` })
+    prefrencesStore.setNotificationBoxCollapse(false)
   },
 })
 

components/navbar/NotificationBoxButton.vue

@@ -11,22 +11,27 @@ import { NotificationBoxModalConfig } from '@/components/common/NotificationBox/
 import { BModalComponent, BModalConfig } from 'buefy/types/components'
 import type Vue from 'vue'
 import { ModalProgrammatic as Modal } from 'buefy'
+import { usePreferencesStore } from '@/stores/preferences'
 const root = ref<Vue<Record<string, string>>>()
 const props = defineProps<{
   showLabel: boolean
 }>()
 const emit = defineEmits(['closeBurgerMenu'])
 const modal = ref<BModalComponent | null>()
+const prefrencesStore = usePreferencesStore()
 function toggleNotificationModal() {
   emit('closeBurgerMenu')
   if (modal.value) {
     modal.value.close()
     modal.value = null
+    prefrencesStore.setNotificationBoxCollapse(false)
   } else {
+    prefrencesStore.setNotificationBoxCollapse(true)
     modal.value = Modal.open({
       parent: root?.value,
       onCancel: () => {
         modal.value = null
+        prefrencesStore.setNotificationBoxCollapse(false)
       },
       ...NotificationBoxModalConfig,
     } as unknown as BModalConfig)

libs/ui/src/components/NeoTooltip/NeoTooltip.scss

@@ -6,11 +6,14 @@
   @media screen and (max-width: 768px) {
     $tooltip-distance: calc(16px + 100%);
   }
-  .o-tip__trigger > * {
+  .o-tip__trigger{
+    width: fit-content;
+     > * {
     height: 100%;
     font-size: inherit;
     font-family: inherit;
   }
+}
 
   .o-tip__content {
     font-size: max(min(2vw, 1rem), 0.45rem);
@@ -43,16 +46,16 @@
       left: $tooltip-distance;
     }
   }
-  .o-tip__trigger {
-    &:after {
-      content: '';
-      position: absolute;
-      top: -10px;
-      bottom: -10px;
-      left: -10px;
-      right: -10px;
-    }
-  }
+  // .o-tip__trigger {
+  //   &:after {
+  //     content: '';
+  //     position: absolute;
+  //     top: -10px;
+  //     bottom: -10px;
+  //     left: -10px;
+  //     right: -10px;
+  //   }
+  // }
 }
 
 .wrapper {

libs/ui/src/components/NeoTooltip/NeoTooltip.vue

@@ -5,6 +5,7 @@
     class="neo-tooltip"
     :position="position"
     :label="label"
+    :delay="delay"
     @click.native.stop>
     <slot>
       <div />
@@ -25,11 +26,13 @@ export interface Props {
   position?: 'top' | 'bottom' | 'left' | 'right'
   active?: boolean
   appendToBody?: boolean
+  delay?: number
 }
 withDefaults(defineProps<Props>(), {
   position: 'top',
   active: true,
   appendToBody: true,
+  delay: undefined,
 })
 </script>
 

locales/en.json

@@ -1315,6 +1315,7 @@
     "byCollection": "By collection",
     "byEvent": "By event",
     "emptyTipLine1": "Don't wait for notifications,",
-    "emptyTipLine2": "make your own buzz with your art."
+    "emptyTipLine2": "make your own buzz with your art.",
+    "loadingTip": "Loading Your Notifications..."
   }
 }