From dea873f4a27404facf257d0ba04bf647d3f0f9f2 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Fri, 31 Mar 2023 01:28:11 +0800
Subject: [PATCH 01/65] feat: notification box

---
 components/Navbar.vue                         |   5 +
 .../NotificationBox/NotificationBoxModal.vue  | 291 ++++++++++++++++++
 .../NotificationBox/NotificationItem.vue      |  85 +++++
 components/common/NotificationBox/types.ts    |  26 ++
 .../common/NotificationBox/useNotification.ts |  38 +++
 .../NotificationBox/useNotificationBox.ts     |   7 +
 components/navbar/NotificationBoxButton.vue   |  37 +++
 locales/en.json                               |  13 +-
 8 files changed, 501 insertions(+), 1 deletion(-)
 create mode 100644 components/common/NotificationBox/NotificationBoxModal.vue
 create mode 100644 components/common/NotificationBox/NotificationItem.vue
 create mode 100644 components/common/NotificationBox/types.ts
 create mode 100644 components/common/NotificationBox/useNotification.ts
 create mode 100644 components/common/NotificationBox/useNotificationBox.ts
 create mode 100644 components/navbar/NotificationBoxButton.vue

diff --git a/components/Navbar.vue b/components/Navbar.vue
index cb061d113f..2703adee5a 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -77,6 +77,10 @@
         id="NavChainSelect"
         class="navbar-chain custom-navbar-item"
         data-cy="chain-select" />
+      <NotificationBoxButton
+        v-if="account"
+        :show-label="isMobile"
+        @closeBurgerMenu="closeBurgerMenu" />
       <template v-if="isMobile">
         <MobileLanguageOption v-if="!account" />
         <MobileExpandableSection
@@ -150,6 +154,7 @@ import ChainSelectDropdown from '~/components/navbar/ChainSelectDropdown.vue'
 import StatsDropdown from '~/components/navbar/StatsDropdown.vue'
 import MobileNavbarProfile from '~/components/navbar/MobileNavbarProfile.vue'
 import ConnectWalletButton from '~/components/shared/ConnectWalletButton.vue'
+import NotificationBoxButton from '~/components/navbar/NotificationBoxButton.vue'
 import { ConnectWalletModalConfig } from '@/components/common/ConnectWallet/useConnectWallet'
 import { BModalConfig } from 'buefy/types/components'
 import type Vue from 'vue'
diff --git a/components/common/NotificationBox/NotificationBoxModal.vue b/components/common/NotificationBox/NotificationBoxModal.vue
new file mode 100644
index 0000000000..ebe5f9e817
--- /dev/null
+++ b/components/common/NotificationBox/NotificationBoxModal.vue
@@ -0,0 +1,291 @@
+<template>
+  <div class="notification-modal-container is-flex is-flex-direction-column">
+    <header class="modal-card-head mb-4">
+      <span class="modal-card-title is-size-6 has-text-weight-bold">
+        {{ $t('notification.notifications') }}
+      </span>
+      <a class="is-flex is-align-items-center" @click="emit('close')">
+        <NeoIcon icon="close" />
+      </a>
+    </header>
+    <div class="modal-card-body">
+      <div class="notification-filter pb-5">
+        <div
+          class="is-flex is-justify-content-space-between is-align-items-center pb-4">
+          <span> {{ $t('notification.filters') }} </span>
+          <NeoButton
+            v-if="!showFilter"
+            no-shadow
+            class="button-rounded"
+            @click.native="showFilter = !showFilter">
+            {{ $t('notification.add') }}
+            <NeoIcon icon="plus" size="small" />
+          </NeoButton>
+          <NeoButton
+            v-else
+            no-shadow
+            class="button-rounded"
+            @click.native="onClickDone">
+            {{ $t('notification.done') }}
+            <NeoIcon icon="check" size="small" />
+          </NeoButton>
+        </div>
+        <div v-if="showFilter" class="filter-option">
+          <div
+            v-if="collections.length > 0"
+            class="is-flex is-flex-direction-column pb-4">
+            <span class="is-size-7 has-text-grey mb-2">
+              {{ $t('notification.byCollection') }}
+            </span>
+            <div class="is-flex filter-list">
+              <div
+                v-for="(item, index) in collections"
+                :key="`${item}-${index}`"
+                class="filter-item px-3 py-1 no-wrap"
+                :class="{
+                  activated: isInFilter('collection', item),
+                }"
+                @click="toggleFilter('collection', item)">
+                {{ item.name }}
+              </div>
+            </div>
+          </div>
+          <div class="is-flex is-flex-direction-column pb-4">
+            <span class="is-size-7 has-text-grey mb-2">{{
+              $t('notification.byEvent')
+            }}</span>
+            <div class="is-flex filter-list">
+              <div
+                v-for="(item, index) in eventTypes"
+                :key="`${item}-${index}`"
+                class="filter-item px-3 py-1 no-wrap"
+                :class="{
+                  activated: isInFilter('event', item),
+                }"
+                @click="toggleFilter('event', item)">
+                {{ item.name }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="!showFilter && !isFilterEmpty" class="filter-option">
+          <div class="is-flex filter-display-list pb-4">
+            <div
+              v-for="(item, index) in filters.collection"
+              :key="`${item}-${index}`"
+              class="filter-item no-wrap mr-1 px-3 py-1">
+              {{ item.name }}
+              <NeoIcon
+                icon="xmark"
+                @click.native="removeFilter('collection', item)" />
+            </div>
+            <div
+              v-for="(item, index) in filters.event"
+              :key="`${item}-${index}`"
+              class="filter-item no-wrap px-3 py-1">
+              {{ item.name }}
+              <NeoIcon
+                icon="xmark"
+                @click.native="removeFilter('event', item)" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="displayedEvents.length === 0" class="empty-tip">
+        <p v-html="$t('notification.emptyTip')"></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>
+</template>
+
+<script setup lang="ts">
+import { Event, FilterOption } from './types'
+import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import { Interaction } from '@kodadot1/minimark'
+import NotificationItem from './NotificationItem.vue'
+import { useNotification } from './useNotification'
+const { $i18n, $store } = useNuxtApp()
+type FilterType = 'collection' | 'event'
+const eventTypes = ref<FilterOption[]>([
+  {
+    id: Interaction.BUY,
+    name: $i18n.t('filters.buy'),
+  },
+  {
+    // TODO
+    id: 'Offer',
+    name: $i18n.t('filters.offer'),
+  },
+  {
+    // TODO
+    id: 'Accepted Offer',
+    name: $i18n.t('filters.acceptedOffer'),
+  },
+])
+const { collections, events: allEvents } = useNotification(
+  $store.getters.getAuthAddress
+)
+const showFilter = ref(false)
+const isFilterEmpty = computed(
+  () =>
+    filters.value.collection.length === 0 && filters.value.event.length === 0
+)
+const filters = ref<{
+  collection: FilterOption[]
+  event: FilterOption[]
+}>({
+  collection: [],
+  event: [],
+})
+const isInFilter = (key: FilterType, target: FilterOption) => {
+  return filters.value[key].some((x) => x.id === target.id)
+}
+const toggleFilter = (key: FilterType, target: FilterOption) => {
+  if (isInFilter(key, target)) {
+    const index = filters.value[key].findIndex((x) => x.id === target.id)
+    filters.value[key].splice(index, 1)
+  } else {
+    filters.value[key].push(target)
+  }
+}
+const displayedEvents = ref<Event[]>([])
+const doSearch = () => {
+  const { collection, event } = filters.value
+  displayedEvents.value = allEvents.value
+  if (collection.length > 0) {
+    displayedEvents.value = displayedEvents.value.filter((item) =>
+      collection.some((x) => x.id === item.nft.collection.id)
+    )
+  }
+  if (event.length > 0) {
+    displayedEvents.value = displayedEvents.value.filter((item) =>
+      event.some((x) => x.id === item.interaction)
+    )
+  }
+}
+const onClickDone = () => {
+  doSearch()
+  showFilter.value = false
+}
+const removeFilter = (key: FilterType, target: FilterOption) => {
+  toggleFilter(key, target)
+  doSearch()
+}
+watch(allEvents, doSearch, {
+  immediate: true,
+})
+const emit = defineEmits(['close'])
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/abstracts/variables';
+.no-wrap {
+  white-space: nowrap;
+}
+.notification-box-modal {
+  .notification-modal-container {
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100%;
+    padding-top: 83px;
+    max-width: 360px;
+    width: 100%;
+    @include mobile {
+      padding-top: 58px;
+      max-width: 100vw;
+    }
+    @include ktheme() {
+      background: theme('background-color');
+      border-left: 1px solid theme('border-color');
+    }
+    .modal-card-title {
+      @include ktheme() {
+        color: theme('text-color');
+      }
+    }
+    .modal-card-head {
+      background: unset;
+      padding: 1rem 2rem;
+      @include ktheme() {
+        border-bottom: 1px solid theme('border-color');
+      }
+    }
+    .modal-card-body {
+      padding: 0rem 2rem 1rem 2rem;
+      display: block;
+      @include ktheme() {
+        background-color: theme('background-color');
+      }
+    }
+    .notification-filter {
+      flex-shrink: 0;
+      flex-grow: 0;
+      position: sticky;
+      top: 0;
+      @include ktheme() {
+        background-color: theme('background-color');
+      }
+      & > div:last-child {
+        @include ktheme() {
+          border-bottom: 1px solid theme('k-grey');
+        }
+      }
+      .button-rounded {
+        border-radius: 2rem;
+      }
+      .filter-item {
+        border-radius: 2rem;
+        cursor: pointer;
+        margin-right: 0.25rem;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+      .filter-list {
+        overflow-x: auto;
+        .filter-item {
+          @include ktheme() {
+            border: 1px solid theme('k-shade');
+          }
+          &.activated {
+            @include ktheme() {
+              background-color: theme('k-shade');
+            }
+          }
+        }
+      }
+      .filter-display-list {
+        overflow-x: auto;
+        .filter-item {
+          @include ktheme() {
+            border: 1px solid theme('k-primary');
+          }
+        }
+      }
+    }
+    .empty-tip {
+      @include ktheme() {
+        color: theme('k-grey');
+        text-align: center;
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+.notification-box-modal {
+  .modal-content {
+    border: none !important;
+  }
+  .modal-background {
+    background-color: rgba(0, 0, 0, 0.17) !important;
+  }
+}
+</style>
diff --git a/components/common/NotificationBox/NotificationItem.vue b/components/common/NotificationBox/NotificationItem.vue
new file mode 100644
index 0000000000..9aabe1e61d
--- /dev/null
+++ b/components/common/NotificationBox/NotificationItem.vue
@@ -0,0 +1,85 @@
+<template>
+  <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`" class="is-flex mb-5">
+    <img
+      v-if="avatar"
+      :src="avatar"
+      :alt="event.nft.name"
+      width="50"
+      height="50"
+      class="border image-size" />
+    <img
+      v-else
+      src="/placeholder.webp"
+      width="50"
+      height="50"
+      class="border image-size" />
+    <div class="notify-content ml-5 is-flex is-flex-direction-column">
+      <div class="is-flex is-justify-content-space-between">
+        <div class="nft-name mr-4 has-text-weight-bold is-ellipsis">
+          {{ event.nft.name }}
+        </div>
+        <div class="nft-price is-ellipsis">
+          <Money :value="event.nft.price" />
+        </div>
+      </div>
+      <div class="is-flex is-justify-content-space-between">
+        <div>
+          <div class="height-50px is-flex is-align-items-center">
+            <div
+              class="event-type mr-4 border is-size-7 is-justify-content-center px-4 py-1 is-flex is-align-items-center"
+              :class="getInteractionColor(event.interaction)">
+              {{ event.interaction }}
+            </div>
+          </div>
+        </div>
+        <div class="is-ellipsis">
+          {{ formatToNow(new Date(event.timestamp)) }}
+        </div>
+      </div>
+    </div>
+  </nuxt-link>
+</template>
+
+<script setup lang="ts">
+import { Event } from './types'
+import { InteractionWithNFT } from '@/composables/collectionActivity/types'
+import Money from '@/components/shared/format/ChainMoney.vue'
+import { formatToNow } from '@/utils/format/time'
+import {
+  getInteractionColor,
+  getNFTAvatar,
+} from '@/components/collection/activity/events/eventRow/common'
+const { urlPrefix } = usePrefix()
+const props = defineProps<{
+  event: Event
+}>()
+const avatar = ref<string>()
+onMounted(() => {
+  getAvatar()
+})
+const getAvatar = async () => {
+  if (props.event) {
+    avatar.value = await getNFTAvatar(
+      props.event as unknown as InteractionWithNFT
+    )
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.notify-content {
+  flex: 1;
+  overflow: auto;
+}
+.nft-price {
+  overflow: auto;
+}
+.nft-name {
+  width: 0;
+  flex: 1;
+}
+.event-type {
+  line-height: 0.75rem;
+  border-radius: 2rem;
+}
+</style>
diff --git a/components/common/NotificationBox/types.ts b/components/common/NotificationBox/types.ts
new file mode 100644
index 0000000000..1959963295
--- /dev/null
+++ b/components/common/NotificationBox/types.ts
@@ -0,0 +1,26 @@
+export type FilterOption = {
+  id: string
+  name: string
+}
+
+interface NFT {
+  name: string
+  id: string
+  price: string
+  metadata: string
+  meta: {
+    id: string
+    image: string
+  }
+  collection: {
+    id: string
+  }
+}
+
+export type Event = {
+  id: string
+  interaction: string
+  timestamp: string
+  caller: string
+  nft: NFT
+}
diff --git a/components/common/NotificationBox/useNotification.ts b/components/common/NotificationBox/useNotification.ts
new file mode 100644
index 0000000000..fc3897b2cf
--- /dev/null
+++ b/components/common/NotificationBox/useNotification.ts
@@ -0,0 +1,38 @@
+import { Event, FilterOption } from './types'
+
+export const useNotification = (account: string) => {
+  const collections = ref<FilterOption[]>([])
+  const events = ref<Event[]>([])
+  const nfts = ref([])
+
+  const { data: collectionData } = useGraphql({
+    queryName: 'collectionByAccount',
+    variables: {
+      account,
+    },
+  })
+  const { data: eventsData } = useGraphql({
+    queryName: 'eventListByAccount',
+    variables: {
+      account,
+    },
+  })
+
+  watch(collectionData, (result) => {
+    if (result.collectionEntities) {
+      collections.value = result.collectionEntities
+    }
+  })
+
+  watch(eventsData, (result) => {
+    if (result.events) {
+      events.value = result.events
+    }
+  })
+
+  return {
+    collections,
+    events,
+    nfts,
+  }
+}
diff --git a/components/common/NotificationBox/useNotificationBox.ts b/components/common/NotificationBox/useNotificationBox.ts
new file mode 100644
index 0000000000..45a9a6f47f
--- /dev/null
+++ b/components/common/NotificationBox/useNotificationBox.ts
@@ -0,0 +1,7 @@
+import NotificationBoxModal from './NotificationBoxModal.vue'
+
+export const NotificationBoxModalConfig = {
+  component: NotificationBoxModal,
+  canCancel: true,
+  customClass: 'notification-box-modal',
+}
diff --git a/components/navbar/NotificationBoxButton.vue b/components/navbar/NotificationBoxButton.vue
new file mode 100644
index 0000000000..b76a31e287
--- /dev/null
+++ b/components/navbar/NotificationBoxButton.vue
@@ -0,0 +1,37 @@
+<template>
+  <a class="navbar-item" @click.stop="toggleNotificationModal">
+    <span v-if="props.showLabel">{{ $t('notification.notifications') }}</span>
+    <NeoIcon ref="root" icon="bell" class="icon" />
+  </a>
+</template>
+
+<script setup lang="ts">
+import { NeoIcon } from '@kodadot1/brick'
+import { NotificationBoxModalConfig } from '@/components/common/NotificationBox/useNotificationBox'
+import { BModalComponent, BModalConfig } from 'buefy/types/components'
+import type Vue from 'vue'
+import { ModalProgrammatic as Modal } from 'buefy'
+const root = ref<Vue<Record<string, string>>>()
+const props = defineProps<{
+  showLabel: boolean
+}>()
+const emit = defineEmits(['closeBurgerMenu'])
+const modal = ref<BModalComponent | null>()
+function toggleNotificationModal() {
+  emit('closeBurgerMenu')
+  if (modal.value) {
+    modal.value.close()
+    modal.value = null
+  } else {
+    modal.value = Modal.open({
+      parent: root?.value,
+      onCancel: () => {
+        modal.value = null
+      },
+      ...NotificationBoxModalConfig,
+    } as unknown as BModalConfig)
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/locales/en.json b/locales/en.json
index 342f4b518b..ecd266a184 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1288,10 +1288,21 @@
     "uploadDesc": "Upload Description File (Optional)"
   },
   "filters": {
+    "buy": "Buy",
     "sale": "Sale",
     "offer": "Offer",
+    "acceptedOffer": "Accepted offer",
     "listing": "Listing",
     "mint": "Mint",
     "transfer": "Transfer"
+  },
+  "notification": {
+    "notifications": "Notifications",
+    "filters": "Filters",
+    "add": "Add",
+    "done": "Done",
+    "byCollection": "By collection",
+    "byEvent": "By event",
+    "emptyTip": "Don't wait for notifications, <br/>make your own buzz with your art."
   }
-}
\ No newline at end of file
+}

From c8b61e611f023ff5e3d945b11a1f1e1e2b1b6fc3 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Fri, 31 Mar 2023 17:19:46 +0800
Subject: [PATCH 02/65] feat: update graphql file

---
 .../general/collectionByAccount.graphql       |  9 ++++++++
 .../general/eventListByAccount.graphql        | 21 +++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 queries/subsquid/general/collectionByAccount.graphql
 create mode 100644 queries/subsquid/general/eventListByAccount.graphql

diff --git a/queries/subsquid/general/collectionByAccount.graphql b/queries/subsquid/general/collectionByAccount.graphql
new file mode 100644
index 0000000000..88a32bcadd
--- /dev/null
+++ b/queries/subsquid/general/collectionByAccount.graphql
@@ -0,0 +1,9 @@
+query collectionByAccount($account: String!) {
+  collectionEntities(
+    where: { currentOwner_eq: $account }
+    orderBy: blockNumber_DESC
+  ) {
+    id
+    name
+  }
+}
diff --git a/queries/subsquid/general/eventListByAccount.graphql b/queries/subsquid/general/eventListByAccount.graphql
new file mode 100644
index 0000000000..9ba4eefc6b
--- /dev/null
+++ b/queries/subsquid/general/eventListByAccount.graphql
@@ -0,0 +1,21 @@
+query eventListByAccount($account: String!) {
+  events(where: { caller_eq: $account }, orderBy: timestamp_DESC) {
+    id
+    interaction
+    timestamp
+    caller
+    nft {
+      name
+      id
+      metadata
+      price
+      meta {
+        id
+        image
+      }
+      collection {
+        id
+      }
+    }
+  }
+}

From be4d3856910c531588c1f99bd5c49efd8fef73c4 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Fri, 31 Mar 2023 17:20:53 +0800
Subject: [PATCH 03/65] feat: remove suffix

---
 components/common/NotificationBox/NotificationItem.vue | 2 +-
 utils/format/time.ts                                   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/common/NotificationBox/NotificationItem.vue b/components/common/NotificationBox/NotificationItem.vue
index 9aabe1e61d..08bdd7ead8 100644
--- a/components/common/NotificationBox/NotificationItem.vue
+++ b/components/common/NotificationBox/NotificationItem.vue
@@ -33,7 +33,7 @@
           </div>
         </div>
         <div class="is-ellipsis">
-          {{ formatToNow(new Date(event.timestamp)) }}
+          {{ formatToNow(new Date(event.timestamp), false) }}
         </div>
       </div>
     </div>
diff --git a/utils/format/time.ts b/utils/format/time.ts
index 7ffe0b83cb..933acc6ae5 100644
--- a/utils/format/time.ts
+++ b/utils/format/time.ts
@@ -35,6 +35,6 @@ export const endDate = (seconds: number): string => {
   return parseDate(addSeconds(new Date(), seconds))
 }
 
-export const formatToNow = (date: Date): string => {
-  return formatDistanceToNowStrict(new Date(date), { addSuffix: true })
+export const formatToNow = (date: Date, addSuffix = true): string => {
+  return formatDistanceToNowStrict(new Date(date), { addSuffix: addSuffix })
 }

From cfadd6b77cd588d88bef1c63c9674f23905c778e Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Fri, 31 Mar 2023 17:23:42 +0800
Subject: [PATCH 04/65] feat: watch filter change

---
 .../common/NotificationBox/NotificationBoxModal.vue       | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/components/common/NotificationBox/NotificationBoxModal.vue b/components/common/NotificationBox/NotificationBoxModal.vue
index ebe5f9e817..8c894d8bb7 100644
--- a/components/common/NotificationBox/NotificationBoxModal.vue
+++ b/components/common/NotificationBox/NotificationBoxModal.vue
@@ -25,7 +25,7 @@
             v-else
             no-shadow
             class="button-rounded"
-            @click.native="onClickDone">
+            @click.native="showFilter = !showFilter">
             {{ $t('notification.done') }}
             <NeoIcon icon="check" size="small" />
           </NeoButton>
@@ -169,10 +169,7 @@ const doSearch = () => {
     )
   }
 }
-const onClickDone = () => {
-  doSearch()
-  showFilter.value = false
-}
+
 const removeFilter = (key: FilterType, target: FilterOption) => {
   toggleFilter(key, target)
   doSearch()
@@ -180,6 +177,7 @@ const removeFilter = (key: FilterType, target: FilterOption) => {
 watch(allEvents, doSearch, {
   immediate: true,
 })
+watch(filters, doSearch, { deep: true })
 const emit = defineEmits(['close'])
 </script>
 

From bfc652a1c2382c97e982b70c57c36012dc94e26d Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Mon, 3 Apr 2023 16:17:16 +0800
Subject: [PATCH 05/65] feat: add limit for notification

---
 queries/subsquid/general/eventListByAccount.graphql | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/queries/subsquid/general/eventListByAccount.graphql b/queries/subsquid/general/eventListByAccount.graphql
index 9ba4eefc6b..ce54775466 100644
--- a/queries/subsquid/general/eventListByAccount.graphql
+++ b/queries/subsquid/general/eventListByAccount.graphql
@@ -1,5 +1,5 @@
 query eventListByAccount($account: String!) {
-  events(where: { caller_eq: $account }, orderBy: timestamp_DESC) {
+  events(where: { caller_eq: $account }, orderBy: timestamp_DESC, limit: 30) {
     id
     interaction
     timestamp

From 5156529a28826754938a109fff1d4f349bb0b2c4 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Tue, 4 Apr 2023 00:06:16 +0800
Subject: [PATCH 06/65] refactor: only select one collection

---
 .../NotificationBox/NotificationBoxModal.vue  | 116 +++++++++---------
 1 file changed, 55 insertions(+), 61 deletions(-)

diff --git a/components/common/NotificationBox/NotificationBoxModal.vue b/components/common/NotificationBox/NotificationBoxModal.vue
index 8c894d8bb7..fbecc3bb1a 100644
--- a/components/common/NotificationBox/NotificationBoxModal.vue
+++ b/components/common/NotificationBox/NotificationBoxModal.vue
@@ -37,15 +37,15 @@
             <span class="is-size-7 has-text-grey mb-2">
               {{ $t('notification.byCollection') }}
             </span>
-            <div class="is-flex filter-list">
+            <div class="is-flex is-flex-wrap-wrap filter-list">
               <div
                 v-for="(item, index) in collections"
                 :key="`${item}-${index}`"
-                class="filter-item px-3 py-1 no-wrap"
+                class="filter-item px-3 py-1 mb-1 no-wrap"
                 :class="{
-                  activated: isInFilter('collection', item),
+                  activated: collectionFilter?.id === item.id,
                 }"
-                @click="toggleFilter('collection', item)">
+                @click="toggleCollectionFilter(item)">
                 {{ item.name }}
               </div>
             </div>
@@ -54,39 +54,34 @@
             <span class="is-size-7 has-text-grey mb-2">{{
               $t('notification.byEvent')
             }}</span>
-            <div class="is-flex filter-list">
+            <div class="is-flex is-flex-wrap-wrap filter-list">
               <div
                 v-for="(item, index) in eventTypes"
                 :key="`${item}-${index}`"
                 class="filter-item px-3 py-1 no-wrap"
                 :class="{
-                  activated: isInFilter('event', item),
+                  activated: eventFilter.some((x) => x.id === item.id),
                 }"
-                @click="toggleFilter('event', item)">
+                @click="toggleEventFilter(item)">
                 {{ item.name }}
               </div>
             </div>
           </div>
         </div>
         <div v-if="!showFilter && !isFilterEmpty" class="filter-option">
-          <div class="is-flex filter-display-list pb-4">
+          <div class="is-flex filter-display-list pb-3 is-flex-wrap-wrap">
             <div
-              v-for="(item, index) in filters.collection"
-              :key="`${item}-${index}`"
-              class="filter-item no-wrap mr-1 px-3 py-1">
-              {{ item.name }}
-              <NeoIcon
-                icon="xmark"
-                @click.native="removeFilter('collection', item)" />
+              v-if="collectionFilter"
+              class="filter-item no-wrap mr-1 px-3 py-1 mb-1">
+              {{ collectionFilter.name }}
+              <NeoIcon icon="xmark" @click.native="collectionFilter = null" />
             </div>
             <div
-              v-for="(item, index) in filters.event"
-              :key="`${item}-${index}`"
-              class="filter-item no-wrap px-3 py-1">
-              {{ item.name }}
-              <NeoIcon
-                icon="xmark"
-                @click.native="removeFilter('event', item)" />
+              v-for="event in eventFilter"
+              :key="event.id"
+              class="filter-item no-wrap px-3 py-1 mb-1">
+              {{ event.name }}
+              <NeoIcon icon="xmark" @click.native="toggleEventFilter(event)" />
             </div>
           </div>
         </div>
@@ -110,8 +105,9 @@ import { NeoButton, NeoIcon } from '@kodadot1/brick'
 import { Interaction } from '@kodadot1/minimark'
 import NotificationItem from './NotificationItem.vue'
 import { useNotification } from './useNotification'
+
 const { $i18n, $store } = useNuxtApp()
-type FilterType = 'collection' | 'event'
+
 const eventTypes = ref<FilterOption[]>([
   {
     id: Interaction.BUY,
@@ -128,56 +124,56 @@ const eventTypes = ref<FilterOption[]>([
     name: $i18n.t('filters.acceptedOffer'),
   },
 ])
+
 const { collections, events: allEvents } = useNotification(
   $store.getters.getAuthAddress
 )
-const showFilter = ref(false)
-const isFilterEmpty = computed(
-  () =>
-    filters.value.collection.length === 0 && filters.value.event.length === 0
-)
-const filters = ref<{
-  collection: FilterOption[]
-  event: FilterOption[]
-}>({
-  collection: [],
-  event: [],
-})
-const isInFilter = (key: FilterType, target: FilterOption) => {
-  return filters.value[key].some((x) => x.id === target.id)
+
+const collectionFilter = ref<FilterOption | null>(null)
+const toggleCollectionFilter = (target: FilterOption) => {
+  if (collectionFilter.value?.id === target.id) {
+    collectionFilter.value = null
+  } else {
+    collectionFilter.value = target
+  }
 }
-const toggleFilter = (key: FilterType, target: FilterOption) => {
-  if (isInFilter(key, target)) {
-    const index = filters.value[key].findIndex((x) => x.id === target.id)
-    filters.value[key].splice(index, 1)
+
+const eventFilter = ref<FilterOption[]>([])
+const toggleEventFilter = (target: FilterOption) => {
+  const index = eventFilter.value.findIndex(
+    (x: FilterOption) => x.id === target.id
+  )
+  if (index === -1) {
+    eventFilter.value.push(target)
   } else {
-    filters.value[key].push(target)
+    eventFilter.value.splice(index, 1)
   }
 }
+
+const showFilter = ref(false)
+const isFilterEmpty = computed(
+  () => !collectionFilter.value && eventFilter.value.length === 0
+)
+
 const displayedEvents = ref<Event[]>([])
+
 const doSearch = () => {
-  const { collection, event } = filters.value
-  displayedEvents.value = allEvents.value
-  if (collection.length > 0) {
-    displayedEvents.value = displayedEvents.value.filter((item) =>
-      collection.some((x) => x.id === item.nft.collection.id)
-    )
-  }
-  if (event.length > 0) {
-    displayedEvents.value = displayedEvents.value.filter((item) =>
-      event.some((x) => x.id === item.interaction)
-    )
-  }
+  displayedEvents.value = allEvents.value.filter(
+    (item) =>
+      (!collectionFilter.value ||
+        collectionFilter.value.id === item.nft.collection.id) &&
+      (eventFilter.value.length === 0 ||
+        eventFilter.value.some((x) => x.id === item.interaction))
+  )
 }
 
-const removeFilter = (key: FilterType, target: FilterOption) => {
-  toggleFilter(key, target)
-  doSearch()
-}
 watch(allEvents, doSearch, {
   immediate: true,
 })
-watch(filters, doSearch, { deep: true })
+
+watch(collectionFilter, doSearch, { deep: true })
+watch(eventFilter, doSearch, { deep: true })
+
 const emit = defineEmits(['close'])
 </script>
 
@@ -247,7 +243,6 @@ const emit = defineEmits(['close'])
         }
       }
       .filter-list {
-        overflow-x: auto;
         .filter-item {
           @include ktheme() {
             border: 1px solid theme('k-shade');
@@ -260,7 +255,6 @@ const emit = defineEmits(['close'])
         }
       }
       .filter-display-list {
-        overflow-x: auto;
         .filter-item {
           @include ktheme() {
             border: 1px solid theme('k-primary');

From 169d1ecf199b3608c28347d81d0de8e67ef9dd79 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Tue, 4 Apr 2023 00:45:29 +0800
Subject: [PATCH 07/65] feat: ui update

---
 .../NotificationBox/NotificationBoxModal.vue  | 42 +++++++++----------
 .../NotificationBox/NotificationItem.vue      | 15 ++++++-
 2 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/components/common/NotificationBox/NotificationBoxModal.vue b/components/common/NotificationBox/NotificationBoxModal.vue
index fbecc3bb1a..2f228bddf1 100644
--- a/components/common/NotificationBox/NotificationBoxModal.vue
+++ b/components/common/NotificationBox/NotificationBoxModal.vue
@@ -41,7 +41,7 @@
               <div
                 v-for="(item, index) in collections"
                 :key="`${item}-${index}`"
-                class="filter-item px-3 py-1 mb-1 no-wrap"
+                class="filter-item button-rounded px-3 py-1 mb-1 no-wrap"
                 :class="{
                   activated: collectionFilter?.id === item.id,
                 }"
@@ -58,7 +58,7 @@
               <div
                 v-for="(item, index) in eventTypes"
                 :key="`${item}-${index}`"
-                class="filter-item px-3 py-1 no-wrap"
+                class="filter-item button-rounded px-3 py-1 no-wrap"
                 :class="{
                   activated: eventFilter.some((x) => x.id === item.id),
                 }"
@@ -70,19 +70,19 @@
         </div>
         <div v-if="!showFilter && !isFilterEmpty" class="filter-option">
           <div class="is-flex filter-display-list pb-3 is-flex-wrap-wrap">
-            <div
+            <NeoTag
               v-if="collectionFilter"
-              class="filter-item no-wrap mr-1 px-3 py-1 mb-1">
+              class="no-wrap mr-1 mb-1"
+              @close="collectionFilter = null">
               {{ collectionFilter.name }}
-              <NeoIcon icon="xmark" @click.native="collectionFilter = null" />
-            </div>
-            <div
+            </NeoTag>
+            <NeoTag
               v-for="event in eventFilter"
               :key="event.id"
-              class="filter-item no-wrap px-3 py-1 mb-1">
+              class="no-wrap mb-1 mr-1"
+              @close="toggleEventFilter(event)">
               {{ event.name }}
-              <NeoIcon icon="xmark" @click.native="toggleEventFilter(event)" />
-            </div>
+            </NeoTag>
           </div>
         </div>
       </div>
@@ -102,6 +102,8 @@
 <script setup lang="ts">
 import { Event, FilterOption } from './types'
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import NeoTag from '@/components/shared/gallery/NeoTag.vue'
+
 import { Interaction } from '@kodadot1/minimark'
 import NotificationItem from './NotificationItem.vue'
 import { useNotification } from './useNotification'
@@ -212,7 +214,7 @@ const emit = defineEmits(['close'])
       }
     }
     .modal-card-body {
-      padding: 0rem 2rem 1rem 2rem;
+      padding: 0rem 0rem 1rem 0rem;
       display: block;
       @include ktheme() {
         background-color: theme('background-color');
@@ -223,6 +225,8 @@ const emit = defineEmits(['close'])
       flex-grow: 0;
       position: sticky;
       top: 0;
+      padding-right: 2rem;
+      padding-left: 2rem;
       @include ktheme() {
         background-color: theme('background-color');
       }
@@ -235,7 +239,6 @@ const emit = defineEmits(['close'])
         border-radius: 2rem;
       }
       .filter-item {
-        border-radius: 2rem;
         cursor: pointer;
         margin-right: 0.25rem;
         &:last-child {
@@ -246,21 +249,16 @@ const emit = defineEmits(['close'])
         .filter-item {
           @include ktheme() {
             border: 1px solid theme('k-shade');
-          }
-          &.activated {
-            @include ktheme() {
+            &:hover {
+              border-color: theme('border-color');
+            }
+            &.activated {
+              color: theme('black');
               background-color: theme('k-shade');
             }
           }
         }
       }
-      .filter-display-list {
-        .filter-item {
-          @include ktheme() {
-            border: 1px solid theme('k-primary');
-          }
-        }
-      }
     }
     .empty-tip {
       @include ktheme() {
diff --git a/components/common/NotificationBox/NotificationItem.vue b/components/common/NotificationBox/NotificationItem.vue
index 08bdd7ead8..2ac88f501a 100644
--- a/components/common/NotificationBox/NotificationItem.vue
+++ b/components/common/NotificationBox/NotificationItem.vue
@@ -1,5 +1,7 @@
 <template>
-  <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`" class="is-flex mb-5">
+  <nuxt-link
+    :to="`/${urlPrefix}/gallery/${event.nft.id}`"
+    class="is-flex notify-item">
     <img
       v-if="avatar"
       :src="avatar"
@@ -67,6 +69,17 @@ const getAvatar = async () => {
 </script>
 
 <style scoped lang="scss">
+@import '@/styles/abstracts/variables';
+
+.notify-item {
+  padding: 0.75rem 2rem;
+  &:hover {
+    @include ktheme() {
+      color: theme('text-color');
+      background-color: theme('k-accentlight2');
+    }
+  }
+}
 .notify-content {
   flex: 1;
   overflow: auto;

From 96badb8fb8acfb35972b363b3de6e6309c559a5f Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Sat, 25 Mar 2023 17:50:30 +0800
Subject: [PATCH 08/65] feat(wip): external link redirect

---
 nuxt.config.js            |  1 +
 pages/redirect.vue        | 44 ++++++++++++++++++++++++++++++++
 plugins/handleRedirect.ts | 53 +++++++++++++++++++++++++++++++++++++++
 utils/constants.ts        |  4 +++
 4 files changed, 102 insertions(+)
 create mode 100644 pages/redirect.vue
 create mode 100644 plugins/handleRedirect.ts

diff --git a/nuxt.config.js b/nuxt.config.js
index e18c8e6ec5..bdcd234bef 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -144,6 +144,7 @@ export default defineNuxtConfig({
     { src: '~/plugins/assets', mode: 'client' },
     '~/plugins/filters',
     '~/plugins/globalVariables',
+    '~/plugins/handleRedirect',
     '~/plugins/pwa',
     '~/plugins/vueAudioVisual',
     '~/plugins/vueClipboard',
diff --git a/pages/redirect.vue b/pages/redirect.vue
new file mode 100644
index 0000000000..0e24c1eacb
--- /dev/null
+++ b/pages/redirect.vue
@@ -0,0 +1,44 @@
+<!--
+ * @Description:
+ * @Author: Floyd Li (floyd.li@outlook.com)
+ * @Date: 2023-03-24 16:10:46
+ * @LastEditors: Floyd Li (floyd.li@outlook.com)
+ * @LastEditTime: 2023-03-25 17:49:29
+-->
+<template>
+  <div>
+    <div v-if="warn">
+      {{ warn }}
+    </div>
+    <span>
+      {{ redirectUrl }}
+    </span>
+    <div>
+      you are redirecting to the external link which is not hosted by KodaDot,
+      make sure it's safe!
+    </div>
+    <div>
+      <NeoButton @click.native="redirect">Continue</NeoButton>
+      <NeoButton @click.native="close">Close</NeoButton>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { NeoButton } from '@kodadot1/brick'
+
+const route = useRoute()
+const redirectUrl = ref(route.query.redirect)
+const warn = ref(route.query.warn)
+
+function redirect() {
+  // window.open is hooked,  use the origin _open instead
+  window._open(redirectUrl.value, '_self')
+}
+
+function close() {
+  window.close()
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/plugins/handleRedirect.ts b/plugins/handleRedirect.ts
new file mode 100644
index 0000000000..2068b6a6d9
--- /dev/null
+++ b/plugins/handleRedirect.ts
@@ -0,0 +1,53 @@
+import {
+  EXTERNAL_LINK_BLACKLIST,
+  EXTERNAL_LINK_WHITELIST,
+} from '../utils/constants'
+
+function isExternal(url: string) {
+  return !url.startsWith(window.location.origin)
+}
+
+function getRedirectUrl(url: string) {
+  const urlObj = new URL(url)
+  const redirectHost = urlObj.host.toLocaleLowerCase()
+  if (EXTERNAL_LINK_WHITELIST.includes(redirectHost)) {
+    return url
+  }
+  const redirectUrl = encodeURIComponent(url)
+  if (EXTERNAL_LINK_BLACKLIST.includes(redirectHost)) {
+    return `/redirect?redirect=${redirectUrl}&warn=blacklist`
+  }
+  return `/redirect?redirect=${redirectUrl}`
+}
+
+function handleLink() {
+  document.body.addEventListener('click', (event) => {
+    if ((event.target as HTMLElement).tagName === 'A') {
+      const target = event.target as HTMLLinkElement
+      if (isExternal(target.href)) {
+        event.preventDefault()
+        window.open(target.href)
+      }
+    }
+  })
+}
+
+function handleOpen() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const _window = window as any
+  _window._open = _window._open || _window.open
+  window.open = (url, target, ...args) => {
+    let redirectUrl = url
+    if (isExternal(url as string)) {
+      redirectUrl = getRedirectUrl(url as string)
+      target = '_blank'
+    }
+    _window._open(redirectUrl, target, ...args)
+    return window
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  handleLink()
+  handleOpen()
+})
diff --git a/utils/constants.ts b/utils/constants.ts
index e04d99f405..37ebdb9234 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -110,3 +110,7 @@ export const getChainTestList = () => {
 }
 
 export const MIN_OFFER_PRICE = 0.01
+
+export const EXTERNAL_LINK_WHITELIST = ['docs.kodadot.xyz']
+
+export const EXTERNAL_LINK_BLACKLIST = ['github.com']

From 8a39b7286f663ac9d2cea90fd6af04300773c3a6 Mon Sep 17 00:00:00 2001
From: Viki Val <viktorko99@gmail.com>
Date: Wed, 29 Mar 2023 17:55:53 +0200
Subject: [PATCH 09/65] Update pages/redirect.vue

---
 pages/redirect.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/pages/redirect.vue b/pages/redirect.vue
index 0e24c1eacb..c0d339f4a4 100644
--- a/pages/redirect.vue
+++ b/pages/redirect.vue
@@ -1,10 +1,3 @@
-<!--
- * @Description:
- * @Author: Floyd Li (floyd.li@outlook.com)
- * @Date: 2023-03-24 16:10:46
- * @LastEditors: Floyd Li (floyd.li@outlook.com)
- * @LastEditTime: 2023-03-25 17:49:29
--->
 <template>
   <div>
     <div v-if="warn">

From 1f78861f4c01e55a6464f94043d67536450e63e2 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Sat, 1 Apr 2023 02:13:29 +0800
Subject: [PATCH 10/65] feat: redirect modal

---
 components/gallery/GalleryItemDescription.vue |  3 +-
 components/redirect/RedirectModal.vue         | 73 +++++++++++++++++++
 components/redirect/useRedirectModal.ts       | 47 ++++++++++++
 .../shared/collapse/DescriptionWrapper.vue    |  6 +-
 locales/en.json                               |  7 ++
 plugins/handleRedirect.ts                     | 53 --------------
 utils/constants.ts                            |  4 +-
 7 files changed, 134 insertions(+), 59 deletions(-)
 create mode 100644 components/redirect/RedirectModal.vue
 create mode 100644 components/redirect/useRedirectModal.ts
 delete mode 100644 plugins/handleRedirect.ts

diff --git a/components/gallery/GalleryItemDescription.vue b/components/gallery/GalleryItemDescription.vue
index 169240977c..2602cbe71b 100644
--- a/components/gallery/GalleryItemDescription.vue
+++ b/components/gallery/GalleryItemDescription.vue
@@ -98,7 +98,8 @@ import VueMarkdown from 'vue-markdown-render'
 import { DisablableTab } from '@kodadot1/brick'
 
 import { useGalleryItem } from './useGalleryItem'
-
+import { useRedirectModal } from '@/components/redirect/useRedirectModal'
+useRedirectModal('.gallery-item-desc-markdown')
 const { urlPrefix } = usePrefix()
 const { nft, nftMimeType, nftMetadata, nftImage, nftAnimation } =
   useGalleryItem()
diff --git a/components/redirect/RedirectModal.vue b/components/redirect/RedirectModal.vue
new file mode 100644
index 0000000000..eb423fe3a8
--- /dev/null
+++ b/components/redirect/RedirectModal.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="redirect-card p-4">
+    <div class="redirect-header has-text-weight-bold pb-2 mb-4">
+      {{ $t('redirect.title') }}
+    </div>
+    <div class="mb-4">
+      <p class="mb-2">
+        {{ $t('redirect.leavingTips') }}
+      </p>
+      <p class="link mb-2">{{ props.url }}</p>
+      <p>
+        {{ $t('redirect.safetyTips') }}
+      </p>
+    </div>
+    <div class="is-flex">
+      <NeoButton
+        class="mr-2"
+        no-shadow
+        :label="$t('redirect.continue')"
+        @click.native="handleRedirect" />
+      <NeoButton
+        no-shadow
+        :label="$t('redirect.stay')"
+        variant="k-accent"
+        @click.native="emit('close')" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NeoButton } from '@kodadot1/brick'
+
+const emit = defineEmits(['close'])
+const props = defineProps<{
+  url: string
+}>()
+
+const handleRedirect = () => {
+  emit('close')
+  window.open(props.url, '_blank')
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/abstracts/variables';
+@import '@/styles/abstracts/animations';
+
+.redirect-card {
+  box-shadow: var(--card-box-shadow);
+  @include ktheme() {
+    background: theme('background-color');
+  }
+  .redirect-header {
+    @include ktheme() {
+      border-bottom: 1px solid theme('k-grey');
+    }
+  }
+  p.link {
+    @include ktheme() {
+      color: theme('k-blue');
+    }
+  }
+  button.is-neo {
+    flex: 1;
+  }
+}
+</style>
+
+<style lang="scss">
+.redirect-modal .modal-content {
+  width: auto;
+}
+</style>
diff --git a/components/redirect/useRedirectModal.ts b/components/redirect/useRedirectModal.ts
new file mode 100644
index 0000000000..8b04186fe4
--- /dev/null
+++ b/components/redirect/useRedirectModal.ts
@@ -0,0 +1,47 @@
+import RedirectModal from './RedirectModal.vue'
+import { EXTERNAL_LINK_WHITELIST } from '@/utils/constants'
+import { ModalProgrammatic as Modal } from 'buefy'
+import { BModalConfig } from 'buefy/types/components'
+
+function isExternal(url: string) {
+  return !url.startsWith(window.location.origin)
+}
+
+function isWhiteList(url: string) {
+  const urlObj = new URL(url)
+  const redirectHost = urlObj.host.toLocaleLowerCase()
+  return EXTERNAL_LINK_WHITELIST.includes(redirectHost)
+}
+
+export const useRedirectModal = (target: string) => {
+  const _dom = document.querySelector(target) || document.body
+  const handleLink = (event: Event) => {
+    let target = event.target as HTMLLinkElement
+    if (target.closest('a') !== null) {
+      // to handle elements wrapped by <a>
+      target = target.closest('a') as unknown as HTMLLinkElement
+    }
+    if (target.href && isExternal(target.href) && !isWhiteList(target.href)) {
+      event.stopPropagation()
+      event.preventDefault()
+      showModal(target.href)
+    }
+  }
+  const showModal = (url: string) => {
+    Modal.open({
+      component: RedirectModal,
+      canCancel: true,
+      customClass: 'redirect-modal',
+      props: {
+        url,
+      },
+    } as unknown as BModalConfig)
+  }
+
+  onMounted(() => {
+    _dom.addEventListener('click', handleLink)
+  })
+  onBeforeUnmount(() => {
+    _dom.removeEventListener('click', handleLink)
+  })
+}
diff --git a/components/shared/collapse/DescriptionWrapper.vue b/components/shared/collapse/DescriptionWrapper.vue
index a2075a441b..3e891eed07 100644
--- a/components/shared/collapse/DescriptionWrapper.vue
+++ b/components/shared/collapse/DescriptionWrapper.vue
@@ -5,10 +5,10 @@
         activeWrapper && hasWrapper ? { maxHeight: `${rowHeight}px` } : null,
       ]"
       :class="{ 'description-wrapper': activeWrapper && hasWrapper }">
-      <VueMarkdown :source="text" />
+      <VueMarkdown :source="text" class="markdown-wrapper" />
     </div>
     <div class="has-text-centered">
-      <a @click.prevent="toggleDescription" v-if="hasWrapper">
+      <a v-if="hasWrapper" @click.prevent="toggleDescription">
         <b-icon :icon="activeWrapper ? 'chevron-down' : 'chevron-up'"></b-icon>
       </a>
     </div>
@@ -18,6 +18,7 @@
 <script lang="ts">
 import { Component, Prop, mixins } from 'nuxt-property-decorator'
 import KeyboardEventsMixin from '~/utils/mixins/keyboardEventsMixin'
+import { useRedirectModal } from '@/components/redirect/useRedirectModal'
 
 const components = {
   VueMarkdown: () => import('vue-markdown-render'),
@@ -34,6 +35,7 @@ export default class DescriptionWrapper extends mixins(KeyboardEventsMixin) {
     this.initKeyboardEventHandler({
       e: this.bindExpandEvents,
     })
+    useRedirectModal('.markdown-wrapper')
   }
 
   private bindExpandEvents(event) {
diff --git a/locales/en.json b/locales/en.json
index 5dc26dcdf3..0c5a8e9dd7 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1304,5 +1304,12 @@
     "byCollection": "By collection",
     "byEvent": "By event",
     "emptyTip": "Don't wait for notifications, <br/>make your own buzz with your art."
+  },
+  "redirect": {
+    "title": "Leaving Kodadot",
+    "leavingTips": "You are going outside KodaDot to external website",
+    "safetyTips": "Be sure that it's safe!",
+    "continue": "Continue",
+    "stay": "Stay"
   }
 }
diff --git a/plugins/handleRedirect.ts b/plugins/handleRedirect.ts
deleted file mode 100644
index 2068b6a6d9..0000000000
--- a/plugins/handleRedirect.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import {
-  EXTERNAL_LINK_BLACKLIST,
-  EXTERNAL_LINK_WHITELIST,
-} from '../utils/constants'
-
-function isExternal(url: string) {
-  return !url.startsWith(window.location.origin)
-}
-
-function getRedirectUrl(url: string) {
-  const urlObj = new URL(url)
-  const redirectHost = urlObj.host.toLocaleLowerCase()
-  if (EXTERNAL_LINK_WHITELIST.includes(redirectHost)) {
-    return url
-  }
-  const redirectUrl = encodeURIComponent(url)
-  if (EXTERNAL_LINK_BLACKLIST.includes(redirectHost)) {
-    return `/redirect?redirect=${redirectUrl}&warn=blacklist`
-  }
-  return `/redirect?redirect=${redirectUrl}`
-}
-
-function handleLink() {
-  document.body.addEventListener('click', (event) => {
-    if ((event.target as HTMLElement).tagName === 'A') {
-      const target = event.target as HTMLLinkElement
-      if (isExternal(target.href)) {
-        event.preventDefault()
-        window.open(target.href)
-      }
-    }
-  })
-}
-
-function handleOpen() {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const _window = window as any
-  _window._open = _window._open || _window.open
-  window.open = (url, target, ...args) => {
-    let redirectUrl = url
-    if (isExternal(url as string)) {
-      redirectUrl = getRedirectUrl(url as string)
-      target = '_blank'
-    }
-    _window._open(redirectUrl, target, ...args)
-    return window
-  }
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  handleLink()
-  handleOpen()
-})
diff --git a/utils/constants.ts b/utils/constants.ts
index 37ebdb9234..c898122e80 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -111,6 +111,4 @@ export const getChainTestList = () => {
 
 export const MIN_OFFER_PRICE = 0.01
 
-export const EXTERNAL_LINK_WHITELIST = ['docs.kodadot.xyz']
-
-export const EXTERNAL_LINK_BLACKLIST = ['github.com']
+export const EXTERNAL_LINK_WHITELIST = ['kodadot.xyz']

From 15f5e9b74c1eb0109bce462c3811be757752b651 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Sat, 1 Apr 2023 02:16:10 +0800
Subject: [PATCH 11/65] chore: remove unused config

---
 nuxt.config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/nuxt.config.js b/nuxt.config.js
index bdcd234bef..e18c8e6ec5 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -144,7 +144,6 @@ export default defineNuxtConfig({
     { src: '~/plugins/assets', mode: 'client' },
     '~/plugins/filters',
     '~/plugins/globalVariables',
-    '~/plugins/handleRedirect',
     '~/plugins/pwa',
     '~/plugins/vueAudioVisual',
     '~/plugins/vueClipboard',

From ffe020280cb8503338276ff76c8daef3ea76c7b8 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Sat, 1 Apr 2023 02:18:35 +0800
Subject: [PATCH 12/65] chore: remove unused page

---
 pages/redirect.vue | 37 -------------------------------------
 1 file changed, 37 deletions(-)
 delete mode 100644 pages/redirect.vue

diff --git a/pages/redirect.vue b/pages/redirect.vue
deleted file mode 100644
index c0d339f4a4..0000000000
--- a/pages/redirect.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <div>
-    <div v-if="warn">
-      {{ warn }}
-    </div>
-    <span>
-      {{ redirectUrl }}
-    </span>
-    <div>
-      you are redirecting to the external link which is not hosted by KodaDot,
-      make sure it's safe!
-    </div>
-    <div>
-      <NeoButton @click.native="redirect">Continue</NeoButton>
-      <NeoButton @click.native="close">Close</NeoButton>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { NeoButton } from '@kodadot1/brick'
-
-const route = useRoute()
-const redirectUrl = ref(route.query.redirect)
-const warn = ref(route.query.warn)
-
-function redirect() {
-  // window.open is hooked,  use the origin _open instead
-  window._open(redirectUrl.value, '_self')
-}
-
-function close() {
-  window.close()
-}
-</script>
-
-<style scoped lang="scss"></style>

From 18b8fb1db4e6f24e33dd8518afcd50b9aac996ed Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Sat, 1 Apr 2023 03:10:05 +0800
Subject: [PATCH 13/65] fix: use little hack to solve i18n not work

---
 components/redirect/RedirectModal.vue   | 13 ++++++++-----
 components/redirect/useRedirectModal.ts |  2 ++
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/components/redirect/RedirectModal.vue b/components/redirect/RedirectModal.vue
index eb423fe3a8..403f3cc3d3 100644
--- a/components/redirect/RedirectModal.vue
+++ b/components/redirect/RedirectModal.vue
@@ -1,26 +1,26 @@
 <template>
   <div class="redirect-card p-4">
     <div class="redirect-header has-text-weight-bold pb-2 mb-4">
-      {{ $t('redirect.title') }}
+      {{ props.i18n.t('redirect.title') }}
     </div>
     <div class="mb-4">
       <p class="mb-2">
-        {{ $t('redirect.leavingTips') }}
+        {{ props.i18n.t('redirect.leavingTips') }}
       </p>
       <p class="link mb-2">{{ props.url }}</p>
       <p>
-        {{ $t('redirect.safetyTips') }}
+        {{ props.i18n.t('redirect.safetyTips') }}
       </p>
     </div>
     <div class="is-flex">
       <NeoButton
         class="mr-2"
         no-shadow
-        :label="$t('redirect.continue')"
+        :label="props.i18n.t('redirect.continue')"
         @click.native="handleRedirect" />
       <NeoButton
         no-shadow
-        :label="$t('redirect.stay')"
+        :label="props.i18n.t('redirect.stay')"
         variant="k-accent"
         @click.native="emit('close')" />
     </div>
@@ -33,6 +33,9 @@ import { NeoButton } from '@kodadot1/brick'
 const emit = defineEmits(['close'])
 const props = defineProps<{
   url: string
+  i18n: {
+    t: (key: string) => string
+  }
 }>()
 
 const handleRedirect = () => {
diff --git a/components/redirect/useRedirectModal.ts b/components/redirect/useRedirectModal.ts
index 8b04186fe4..9a592f0d62 100644
--- a/components/redirect/useRedirectModal.ts
+++ b/components/redirect/useRedirectModal.ts
@@ -14,6 +14,7 @@ function isWhiteList(url: string) {
 }
 
 export const useRedirectModal = (target: string) => {
+  const { $i18n } = useNuxtApp()
   const _dom = document.querySelector(target) || document.body
   const handleLink = (event: Event) => {
     let target = event.target as HTMLLinkElement
@@ -34,6 +35,7 @@ export const useRedirectModal = (target: string) => {
       customClass: 'redirect-modal',
       props: {
         url,
+        i18n: $i18n,
       },
     } as unknown as BModalConfig)
   }

From f3b9b7eb4392cb23fbf9eb3a1d78fe63a4d28618 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Sat, 1 Apr 2023 03:15:23 +0800
Subject: [PATCH 14/65] fix: work break

---
 components/redirect/RedirectModal.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/redirect/RedirectModal.vue b/components/redirect/RedirectModal.vue
index 403f3cc3d3..a65dce550e 100644
--- a/components/redirect/RedirectModal.vue
+++ b/components/redirect/RedirectModal.vue
@@ -59,6 +59,7 @@ const handleRedirect = () => {
     }
   }
   p.link {
+    word-break: break-all;
     @include ktheme() {
       color: theme('k-blue');
     }

From 34579ce797d81969c703bc5201e3bb944892f000 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Sat, 1 Apr 2023 15:21:13 +0800
Subject: [PATCH 15/65] feat: add for more markdown

---
 components/collection/CollectionInfo.vue             | 7 ++++++-
 components/massmint/OnBoarding.vue                   | 6 +++++-
 components/unique/Collection/Item/CollectionItem.vue | 4 +++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/components/collection/CollectionInfo.vue b/components/collection/CollectionInfo.vue
index deaf302400..d0e421c292 100644
--- a/components/collection/CollectionInfo.vue
+++ b/components/collection/CollectionInfo.vue
@@ -10,7 +10,9 @@
         </nuxt-link>
       </div>
       <div class="overflow-wrap">
-        <vue-markdown :source="visibleDescription" />
+        <vue-markdown
+          class="collection-info-markdown"
+          :source="visibleDescription" />
       </div>
       <NeoButton
         v-if="hasSeeAllDescriptionOption"
@@ -63,6 +65,9 @@ import {
   useCollectionMinimal,
 } from './utils/useCollectionDetails'
 
+import { useRedirectModal } from '@/components/redirect/useRedirectModal'
+useRedirectModal('.collection-info-markdown')
+
 const route = useRoute()
 const { urlPrefix } = usePrefix()
 const { availableChains } = useChain()
diff --git a/components/massmint/OnBoarding.vue b/components/massmint/OnBoarding.vue
index cc04fa04a1..209e4bea14 100644
--- a/components/massmint/OnBoarding.vue
+++ b/components/massmint/OnBoarding.vue
@@ -27,7 +27,7 @@
               {{ card.title }}
             </p>
             <div class="content is-size-4-tablet is-size-5-mobile">
-              <VueMarkdown :source="card.content" />
+              <VueMarkdown class="massmint-markdown" :source="card.content" />
             </div>
           </div>
         </div>
@@ -68,6 +68,10 @@ import { NeoButton, NeoButtonVariant } from '@kodadot1/brick'
 import VueMarkdown from 'vue-markdown-render'
 import { usePreferencesStore } from '@/stores/preferences'
 import { SwipeDirection, useSwipe } from '@vueuse/core'
+
+import { useRedirectModal } from '@/components/redirect/useRedirectModal'
+useRedirectModal('.massmint-markdown')
+
 const router = useRouter()
 const { urlPrefix } = usePrefix()
 const { $i18n, $consola } = useNuxtApp()
diff --git a/components/unique/Collection/Item/CollectionItem.vue b/components/unique/Collection/Item/CollectionItem.vue
index 470fbba023..317abcb860 100644
--- a/components/unique/Collection/Item/CollectionItem.vue
+++ b/components/unique/Collection/Item/CollectionItem.vue
@@ -54,7 +54,7 @@
     <div class="columns is-centered">
       <div class="column is-8 has-text-centered">
         <p class="content">
-          <VueMarkdown :source="description" />
+          <VueMarkdown class="collection-info-markdown" :source="description" />
           <CollapseWrapper
             v-if="attributes && attributes.length"
             visible="collapse.collection.attributes.show"
@@ -99,6 +99,7 @@ import PrefixMixin from '@/utils/mixins/prefixMixin'
 import SubscribeMixin from '@/utils/mixins/subscribeMixin'
 import UseApiMixin from '@/utils/mixins/useApiMixin'
 import { tokenIdToRoute } from '../../utils'
+import { useRedirectModal } from '@/components/redirect/useRedirectModal'
 
 const components = {
   GalleryCardList: () =>
@@ -178,6 +179,7 @@ export default class CollectionItem extends mixins(
       this.loadMagic()
       this.subscribe(api.query.uniques.class, [this.id], this.observeOwner)
     })
+    useRedirectModal('.collection-info-markdown')
   }
 
   protected observeOwner(data: Option<ClassDetails>) {

From 7610774ac331e2d18bbe26677c5d6e497142b1d7 Mon Sep 17 00:00:00 2001
From: Viki Val <viktorko99@gmail.com>
Date: Sun, 2 Apr 2023 22:43:28 +0200
Subject: [PATCH 16/65] Apply suggestions from code review

---
 components/collection/CollectionInfo.vue      | 2 +-
 components/gallery/GalleryItemDescription.vue | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/collection/CollectionInfo.vue b/components/collection/CollectionInfo.vue
index d0e421c292..088723439c 100644
--- a/components/collection/CollectionInfo.vue
+++ b/components/collection/CollectionInfo.vue
@@ -66,8 +66,8 @@ import {
 } from './utils/useCollectionDetails'
 
 import { useRedirectModal } from '@/components/redirect/useRedirectModal'
-useRedirectModal('.collection-info-markdown')
 
+useRedirectModal('.collection-info-markdown')
 const route = useRoute()
 const { urlPrefix } = usePrefix()
 const { availableChains } = useChain()
diff --git a/components/gallery/GalleryItemDescription.vue b/components/gallery/GalleryItemDescription.vue
index 2602cbe71b..8d24e31287 100644
--- a/components/gallery/GalleryItemDescription.vue
+++ b/components/gallery/GalleryItemDescription.vue
@@ -99,6 +99,7 @@ import { DisablableTab } from '@kodadot1/brick'
 
 import { useGalleryItem } from './useGalleryItem'
 import { useRedirectModal } from '@/components/redirect/useRedirectModal'
+
 useRedirectModal('.gallery-item-desc-markdown')
 const { urlPrefix } = usePrefix()
 const { nft, nftMimeType, nftMetadata, nftImage, nftAnimation } =

From 58189319399fb52e7292f3c63941380c2d53c8eb Mon Sep 17 00:00:00 2001
From: Viki Val <viktorko99@gmail.com>
Date: Sun, 2 Apr 2023 22:43:41 +0200
Subject: [PATCH 17/65] Update components/massmint/OnBoarding.vue

---
 components/massmint/OnBoarding.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/massmint/OnBoarding.vue b/components/massmint/OnBoarding.vue
index 209e4bea14..b278f43569 100644
--- a/components/massmint/OnBoarding.vue
+++ b/components/massmint/OnBoarding.vue
@@ -68,10 +68,9 @@ import { NeoButton, NeoButtonVariant } from '@kodadot1/brick'
 import VueMarkdown from 'vue-markdown-render'
 import { usePreferencesStore } from '@/stores/preferences'
 import { SwipeDirection, useSwipe } from '@vueuse/core'
-
 import { useRedirectModal } from '@/components/redirect/useRedirectModal'
-useRedirectModal('.massmint-markdown')
 
+useRedirectModal('.massmint-markdown')
 const router = useRouter()
 const { urlPrefix } = usePrefix()
 const { $i18n, $consola } = useNuxtApp()

From e0251d3e44be59aded06b450a3f0b1f2b9ddb7ad Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Mon, 3 Apr 2023 14:25:52 +0800
Subject: [PATCH 18/65] fix: update i18n types

---
 components/redirect/RedirectModal.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/components/redirect/RedirectModal.vue b/components/redirect/RedirectModal.vue
index a65dce550e..a50d4eef3d 100644
--- a/components/redirect/RedirectModal.vue
+++ b/components/redirect/RedirectModal.vue
@@ -29,13 +29,12 @@
 
 <script setup lang="ts">
 import { NeoButton } from '@kodadot1/brick'
+import VueI18n from 'vue-i18n/types'
 
 const emit = defineEmits(['close'])
 const props = defineProps<{
   url: string
-  i18n: {
-    t: (key: string) => string
-  }
+  i18n: VueI18n
 }>()
 
 const handleRedirect = () => {

From a0f22008fe09f7931b9ab331ca898d88a596ca52 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Mon, 3 Apr 2023 14:27:14 +0800
Subject: [PATCH 19/65] refactor: fix codeclimate issues

---
 components/redirect/useRedirectModal.ts | 35 ++++++++++++++-----------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/components/redirect/useRedirectModal.ts b/components/redirect/useRedirectModal.ts
index 9a592f0d62..07fe1395a4 100644
--- a/components/redirect/useRedirectModal.ts
+++ b/components/redirect/useRedirectModal.ts
@@ -2,6 +2,7 @@ import RedirectModal from './RedirectModal.vue'
 import { EXTERNAL_LINK_WHITELIST } from '@/utils/constants'
 import { ModalProgrammatic as Modal } from 'buefy'
 import { BModalConfig } from 'buefy/types/components'
+import VueI18n from 'vue-i18n/types'
 
 function isExternal(url: string) {
   return !url.startsWith(window.location.origin)
@@ -13,32 +14,34 @@ function isWhiteList(url: string) {
   return EXTERNAL_LINK_WHITELIST.includes(redirectHost)
 }
 
+const showModal = (url: string, i18n: VueI18n) => {
+  Modal.open({
+    component: RedirectModal,
+    canCancel: true,
+    customClass: 'redirect-modal',
+    props: {
+      url,
+      i18n,
+    },
+  } as unknown as BModalConfig)
+}
+
 export const useRedirectModal = (target: string) => {
   const { $i18n } = useNuxtApp()
   const _dom = document.querySelector(target) || document.body
+
   const handleLink = (event: Event) => {
-    let target = event.target as HTMLLinkElement
-    if (target.closest('a') !== null) {
+    let ele = event.target as HTMLLinkElement
+    if (ele.closest('a') !== null) {
       // to handle elements wrapped by <a>
-      target = target.closest('a') as unknown as HTMLLinkElement
+      ele = ele.closest('a') as unknown as HTMLLinkElement
     }
-    if (target.href && isExternal(target.href) && !isWhiteList(target.href)) {
+    if (ele.href && isExternal(ele.href) && !isWhiteList(ele.href)) {
       event.stopPropagation()
       event.preventDefault()
-      showModal(target.href)
+      showModal(ele.href, $i18n)
     }
   }
-  const showModal = (url: string) => {
-    Modal.open({
-      component: RedirectModal,
-      canCancel: true,
-      customClass: 'redirect-modal',
-      props: {
-        url,
-        i18n: $i18n,
-      },
-    } as unknown as BModalConfig)
-  }
 
   onMounted(() => {
     _dom.addEventListener('click', handleLink)

From 5813a53f55e3d5c9e4a0fe0d0ec0a154c8b18160 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Mon, 3 Apr 2023 14:49:30 +0800
Subject: [PATCH 20/65]  refactor: fix codeclimate issue

---
 components/redirect/RedirectModal.vue   | 1 -
 components/redirect/useRedirectModal.ts | 6 ++----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/components/redirect/RedirectModal.vue b/components/redirect/RedirectModal.vue
index a50d4eef3d..ee46cc75a6 100644
--- a/components/redirect/RedirectModal.vue
+++ b/components/redirect/RedirectModal.vue
@@ -45,7 +45,6 @@ const handleRedirect = () => {
 
 <style scoped lang="scss">
 @import '@/styles/abstracts/variables';
-@import '@/styles/abstracts/animations';
 
 .redirect-card {
   box-shadow: var(--card-box-shadow);
diff --git a/components/redirect/useRedirectModal.ts b/components/redirect/useRedirectModal.ts
index 07fe1395a4..109bd1ca71 100644
--- a/components/redirect/useRedirectModal.ts
+++ b/components/redirect/useRedirectModal.ts
@@ -32,10 +32,8 @@ export const useRedirectModal = (target: string) => {
 
   const handleLink = (event: Event) => {
     let ele = event.target as HTMLLinkElement
-    if (ele.closest('a') !== null) {
-      // to handle elements wrapped by <a>
-      ele = ele.closest('a') as unknown as HTMLLinkElement
-    }
+    // to handle elements wrapped by <a>
+    ele = (ele.closest('a') as unknown as HTMLLinkElement) ?? ele
     if (ele.href && isExternal(ele.href) && !isWhiteList(ele.href)) {
       event.stopPropagation()
       event.preventDefault()

From 97a359dc7fb2ef906545d56673c8311cc47b01ca Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Mon, 3 Apr 2023 22:03:10 +0800
Subject: [PATCH 21/65] feat: add fuzzy matching

---
 components/redirect/useRedirectModal.ts | 14 +++++++++++++-
 utils/constants.ts                      |  2 +-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/components/redirect/useRedirectModal.ts b/components/redirect/useRedirectModal.ts
index 109bd1ca71..a9c66440b4 100644
--- a/components/redirect/useRedirectModal.ts
+++ b/components/redirect/useRedirectModal.ts
@@ -11,7 +11,19 @@ function isExternal(url: string) {
 function isWhiteList(url: string) {
   const urlObj = new URL(url)
   const redirectHost = urlObj.host.toLocaleLowerCase()
-  return EXTERNAL_LINK_WHITELIST.includes(redirectHost)
+  return EXTERNAL_LINK_WHITELIST.some((link) => {
+    // fuzzy matching
+    if (link.startsWith('*')) {
+      return (
+        // match ".kodadot.xyz", prevent match "fakekodadot.xyz"
+        redirectHost.endsWith(link.substring(1)) ||
+        // match kodadot.xyz
+        redirectHost === link.substring(2)
+      )
+    } else {
+      return redirectHost === link
+    }
+  })
 }
 
 const showModal = (url: string, i18n: VueI18n) => {
diff --git a/utils/constants.ts b/utils/constants.ts
index c898122e80..99a1ef67d7 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -111,4 +111,4 @@ export const getChainTestList = () => {
 
 export const MIN_OFFER_PRICE = 0.01
 
-export const EXTERNAL_LINK_WHITELIST = ['kodadot.xyz']
+export const EXTERNAL_LINK_WHITELIST = ['*.kodadot.xyz']

From c9949a0039671ab27109654362db61e948c59cf1 Mon Sep 17 00:00:00 2001
From: Jarsen <695552027@qq.com>
Date: Sun, 2 Apr 2023 22:32:59 +0800
Subject: [PATCH 22/65] fix: Scrolling in profile always kicks me back to top
 when loading

---
 app/router.scrollBehavior.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/router.scrollBehavior.js b/app/router.scrollBehavior.js
index 742b524115..00532a583f 100644
--- a/app/router.scrollBehavior.js
+++ b/app/router.scrollBehavior.js
@@ -6,6 +6,7 @@ export default function (to) {
     'prefix-collection-id-activity',
     'prefix-explore-items',
     'prefix-explore-collectibles',
+    'prefix-u-id',
   ]
 
   if (disableScrollToTop.includes(toPath)) {

From b306267d8695aa5396b6a1df7ccbb5967752f31e Mon Sep 17 00:00:00 2001
From: roiLeo <medina.leo42@gmail.com>
Date: Mon, 3 Apr 2023 11:54:05 +0200
Subject: [PATCH 23/65] =?UTF-8?q?=E2=9C=A8=20explore=20items=20scrollTopBu?=
 =?UTF-8?q?tton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/items/ItemsGrid/ItemsGrid.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/items/ItemsGrid/ItemsGrid.vue b/components/items/ItemsGrid/ItemsGrid.vue
index 65dc46fd0c..9a1e84379e 100644
--- a/components/items/ItemsGrid/ItemsGrid.vue
+++ b/components/items/ItemsGrid/ItemsGrid.vue
@@ -27,6 +27,7 @@
       </div>
     </DynamicGrid>
     <EmptyResult v-if="total === 0" />
+    <ScrollTopButton />
   </div>
 </template>
 

From c5cf3bb6cc1f247c2ea6ab798bd7864be6bd1dfa Mon Sep 17 00:00:00 2001
From: Matej yangwao <5887929+yangwao@users.noreply.github.com>
Date: Mon, 3 Apr 2023 15:35:14 +0200
Subject: [PATCH 24/65] added new deployments to bug report

---
 .github/ISSUE_TEMPLATE/rmrk2_bug.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/ISSUE_TEMPLATE/rmrk2_bug.yml b/.github/ISSUE_TEMPLATE/rmrk2_bug.yml
index 666a39d65b..4727226b29 100644
--- a/.github/ISSUE_TEMPLATE/rmrk2_bug.yml
+++ b/.github/ISSUE_TEMPLATE/rmrk2_bug.yml
@@ -50,6 +50,8 @@ body:
       label: At which address did you encounter bug?
       multiple: true
       options:
+        - rmrk2.kodadot.xyz
+        - canary.kodadot.xyz
         - beta.kodadot.xyz
         - kodadot.xyz
   - type: dropdown

From e8e26ef2c7f491d29a7c952d198bb98033b8dbc8 Mon Sep 17 00:00:00 2001
From: Matej yangwao <5887929+yangwao@users.noreply.github.com>
Date: Mon, 3 Apr 2023 15:35:40 +0200
Subject: [PATCH 25/65] Update bug.yml - canary

---
 .github/ISSUE_TEMPLATE/bug.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml
index 1ec76ecd6f..66a1ba8eae 100644
--- a/.github/ISSUE_TEMPLATE/bug.yml
+++ b/.github/ISSUE_TEMPLATE/bug.yml
@@ -51,6 +51,7 @@ body:
       label: At which address did you encounter bug?
       multiple: true
       options:
+        - canary.kodadot.xyz
         - beta.kodadot.xyz
         - kodadot.xyz
   - type: dropdown

From 8472f2fdc2f2e3e8ed72eb152aeeedd89e3648ec Mon Sep 17 00:00:00 2001
From: Jarsen <695552027@qq.com>
Date: Sun, 2 Apr 2023 13:36:53 +0800
Subject: [PATCH 26/65] fix: collection on mobile is broken

---
 components/collection/CollectionInfo.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/collection/CollectionInfo.vue b/components/collection/CollectionInfo.vue
index 088723439c..acedcea59a 100644
--- a/components/collection/CollectionInfo.vue
+++ b/components/collection/CollectionInfo.vue
@@ -21,15 +21,15 @@
         @click.native="toggleSeeAllDescription" />
     </div>
     <div>
-      <div class="columns is-mobile">
-        <div class="column">
+      <div class="columns pt-3">
+        <div class="column pt-0 mobile-column-padding-bottom">
           <CollectionInfoLine :title="$t('activity.network')" :value="chain" />
           <CollectionInfoLine title="Items" :value="stats.collectionLength" />
           <CollectionInfoLine
             :title="$t('series.owners')"
             :value="stats.uniqueOwners" />
         </div>
-        <div class="column">
+        <div class="column pt-0">
           <CollectionInfoLine :title="$t('activity.floor')">
             <CommonTokenMoney
               :value="stats.collectionFloorPrice"
@@ -124,6 +124,10 @@ const { stats } = useCollectionDetails({ collectionId: collectionId.value })
     flex-direction: column;
   }
 
+  .mobile-column-padding-bottom {
+    padding-bottom: 0;
+  }
+
   .max-width {
     max-width: 100%;
   }

From fe8db2736ede9f2e2b4b6d4d0eff331da867fd5d Mon Sep 17 00:00:00 2001
From: Jarsen <695552027@qq.com>
Date: Mon, 3 Apr 2023 20:58:50 +0800
Subject: [PATCH 27/65] fix: remove columns

---
 components/collection/CollectionInfo.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/components/collection/CollectionInfo.vue b/components/collection/CollectionInfo.vue
index acedcea59a..49b9e12b08 100644
--- a/components/collection/CollectionInfo.vue
+++ b/components/collection/CollectionInfo.vue
@@ -21,15 +21,15 @@
         @click.native="toggleSeeAllDescription" />
     </div>
     <div>
-      <div class="columns pt-3">
-        <div class="column pt-0 mobile-column-padding-bottom">
+      <div class="is-flex gap mobile-flex-direction-column mobile-no-gap">
+        <div>
           <CollectionInfoLine :title="$t('activity.network')" :value="chain" />
           <CollectionInfoLine title="Items" :value="stats.collectionLength" />
           <CollectionInfoLine
             :title="$t('series.owners')"
             :value="stats.uniqueOwners" />
         </div>
-        <div class="column pt-0">
+        <div>
           <CollectionInfoLine :title="$t('activity.floor')">
             <CommonTokenMoney
               :value="stats.collectionFloorPrice"
@@ -124,10 +124,9 @@ const { stats } = useCollectionDetails({ collectionId: collectionId.value })
     flex-direction: column;
   }
 
-  .mobile-column-padding-bottom {
-    padding-bottom: 0;
+  .mobile-no-gap {
+    gap: 0;
   }
-
   .max-width {
     max-width: 100%;
   }

From b8428e7638393f444a06a64d2f7bc6c2d683c061 Mon Sep 17 00:00:00 2001
From: Matej yangwao <5887929+yangwao@users.noreply.github.com>
Date: Mon, 3 Apr 2023 17:14:05 +0200
Subject: [PATCH 28/65] #5499 Playing with stepsize on chart

---
 components/chart/PriceChart.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/chart/PriceChart.vue b/components/chart/PriceChart.vue
index 80be62a4f4..4c196e1da3 100644
--- a/components/chart/PriceChart.vue
+++ b/components/chart/PriceChart.vue
@@ -246,7 +246,7 @@ const getPriceChartData = () => {
                 callback: (value) => {
                   return `${Number(value).toFixed(2)}  `
                 },
-                stepSize: 4,
+                stepSize: 3,
                 color: lineColor.value,
               },
               grid: {

From fa0acaf213125ca31ba0c5bfd768465b2f224b2d Mon Sep 17 00:00:00 2001
From: snyk-bot <snyk-bot@snyk.io>
Date: Mon, 3 Apr 2023 02:02:00 +0000
Subject: [PATCH 29/65] fix: upgrade @sentry/browser from 7.30.0 to 7.42.0

Snyk has created this PR to upgrade @sentry/browser from 7.30.0 to 7.42.0.

See this package in npm:
https://www.npmjs.com/package/@sentry/browser

See this project in Snyk:
https://app.snyk.io/org/jarsen136/project/4725085c-dd73-410d-8703-8a5f314528c5?utm_source=github&utm_medium=referral&page=upgrade-pr
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 17f04ac9e2..f3b96fba72 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
     "@polkadot/ui-keyring": "^2.12.1",
     "@polkadot/vue-identicon": "^2.12.1",
     "@ramp-network/ramp-instant-sdk": "^3.2.3",
-    "@sentry/browser": "7.30.0",
+    "@sentry/browser": "7.42.0",
     "@sgratzl/chartjs-chart-boxplot": "^3.10.0",
     "apollo-boost": "^0.4.9",
     "axios": "^0.27.2",

From 4db2780026ca5903498d4d55c3de9d0774b24429 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian27@gmail.com>
Date: Mon, 3 Apr 2023 13:59:42 +0700
Subject: [PATCH 30/65] chore: update lockfile

---
 pnpm-lock.yaml | 367 ++++++++++++++++++++++---------------------------
 1 file changed, 161 insertions(+), 206 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 272f892bd1..aea4887604 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -54,7 +54,7 @@ importers:
       '@polkadot/vue-identicon': ^2.12.1
       '@ramp-network/ramp-instant-sdk': ^3.2.3
       '@rollup/plugin-graphql': ^1.1.0
-      '@sentry/browser': 7.30.0
+      '@sentry/browser': 7.42.0
       '@sentry/webpack-plugin': ^1.20.0
       '@sgratzl/chartjs-chart-boxplot': ^3.10.0
       '@types/jest': ^27.5.2
@@ -155,7 +155,7 @@ importers:
       '@polkadot/ui-keyring': 2.12.1
       '@polkadot/vue-identicon': 2.12.1_vue@2.7.14
       '@ramp-network/ramp-instant-sdk': 3.2.3
-      '@sentry/browser': 7.30.0
+      '@sentry/browser': 7.42.0
       '@sgratzl/chartjs-chart-boxplot': 3.10.0_chart.js@3.9.1
       apollo-boost: 0.4.9_graphql@16.6.0
       axios: 0.27.2
@@ -5061,16 +5061,16 @@ packages:
   /@polka/url/1.0.0-next.21:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
 
-  /@polkadot/api-augment/10.2.1:
-    resolution: {integrity: sha512-fqxm+B0ASA5bdacOMk/YuVUGuRZT/B0iLOoaUSy2Z9yA4qx1mZnazwzIIkfHxTdcpEw8+prRmgv0EMXxMvmA0g==}
+  /@polkadot/api-augment/10.2.2:
+    resolution: {integrity: sha512-ENICYFmUX1BzbgfHvIsWvJVYrBK6y7A1AfYweQ4/sp7qqCXZ69uCrUzEJnyB5f6Zj7n7QJxBSa18l51yKljxrA==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/api-base': 10.2.1
-      '@polkadot/rpc-augment': 10.2.1
-      '@polkadot/types': 10.2.1
-      '@polkadot/types-augment': 10.2.1
-      '@polkadot/types-codec': 10.2.1
-      '@polkadot/util': 11.1.2
+      '@polkadot/api-base': 10.2.2
+      '@polkadot/rpc-augment': 10.2.2
+      '@polkadot/types': 10.2.2
+      '@polkadot/types-augment': 10.2.2
+      '@polkadot/types-codec': 10.2.2
+      '@polkadot/util': 11.1.3
       tslib: 2.5.0
     transitivePeerDependencies:
       - bufferutil
@@ -5111,13 +5111,13 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@polkadot/api-base/10.2.1:
-    resolution: {integrity: sha512-SLWjdzAGyVINsMa8V0XPK8npnJWUObuOlRmJ6kcxcwBi4BTJJeDMIp7HsATrxwhdBWZr7uuk+bQi+7ADH8yzvA==}
+  /@polkadot/api-base/10.2.2:
+    resolution: {integrity: sha512-7xpkUOIesYZ+K9dw9zJZW0NTVWfNJXszX0WWKYxBK7V4tH4DB1VVCC+5syNzhDUEfDVSLYfcZANx1W6T+32V/w==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/rpc-core': 10.2.1
-      '@polkadot/types': 10.2.1
-      '@polkadot/util': 11.1.2
+      '@polkadot/rpc-core': 10.2.2
+      '@polkadot/types': 10.2.2
+      '@polkadot/util': 11.1.3
       rxjs: 7.8.0
       tslib: 2.5.0
     transitivePeerDependencies:
@@ -5155,18 +5155,18 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@polkadot/api-derive/10.2.1:
-    resolution: {integrity: sha512-rLd4n57weI74A2hlDMoS/TmeKdzdyztWMRf4PznN6W2+31bfI9IOtmJaxUs8ZxEYO5nbHOZRzy6l4d+8HhC+5g==}
+  /@polkadot/api-derive/10.2.2:
+    resolution: {integrity: sha512-/qqZOMNXo1x24nBGc93SOpoddOa15duazsneeylulqf3zUM9E8JT510QnzSHC5UANCNs98q3UaU+CS/kHb9v6Q==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/api': 10.2.1
-      '@polkadot/api-augment': 10.2.1
-      '@polkadot/api-base': 10.2.1
-      '@polkadot/rpc-core': 10.2.1
-      '@polkadot/types': 10.2.1
-      '@polkadot/types-codec': 10.2.1
-      '@polkadot/util': 11.1.2
-      '@polkadot/util-crypto': 11.1.2_@polkadot+util@11.1.2
+      '@polkadot/api': 10.2.2
+      '@polkadot/api-augment': 10.2.2
+      '@polkadot/api-base': 10.2.2
+      '@polkadot/rpc-core': 10.2.2
+      '@polkadot/types': 10.2.2
+      '@polkadot/types-codec': 10.2.2
+      '@polkadot/util': 11.1.3
+      '@polkadot/util-crypto': 11.1.3_@polkadot+util@11.1.3
       rxjs: 7.8.0
       tslib: 2.5.0
     transitivePeerDependencies:
@@ -5214,24 +5214,24 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@polkadot/api/10.2.1:
-    resolution: {integrity: sha512-T8wXJQIZIM5vow1mU9JE2KN2/lFwBGK2YGnZdHRuLJY0QWn+z8FuJik9kEtgNcZ7gjPnT/rBXd71V3PxixvxcA==}
+  /@polkadot/api/10.2.2:
+    resolution: {integrity: sha512-tv/E+8qN492b33CvSEZ57SjKQ8f6AMUSI6Js6lZreYPomSq5SzJWFH1mplOp3/VI0uX1O5c01dgMWkpM8W2ZKw==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/api-augment': 10.2.1
-      '@polkadot/api-base': 10.2.1
-      '@polkadot/api-derive': 10.2.1
-      '@polkadot/keyring': 11.1.2_@polkadot+util@11.1.2
-      '@polkadot/rpc-augment': 10.2.1
-      '@polkadot/rpc-core': 10.2.1
-      '@polkadot/rpc-provider': 10.2.1
-      '@polkadot/types': 10.2.1
-      '@polkadot/types-augment': 10.2.1
-      '@polkadot/types-codec': 10.2.1
-      '@polkadot/types-create': 10.2.1
-      '@polkadot/types-known': 10.2.1
-      '@polkadot/util': 11.1.2
-      '@polkadot/util-crypto': 11.1.2_@polkadot+util@11.1.2
+      '@polkadot/api-augment': 10.2.2
+      '@polkadot/api-base': 10.2.2
+      '@polkadot/api-derive': 10.2.2
+      '@polkadot/keyring': 11.1.3_@polkadot+util@11.1.3
+      '@polkadot/rpc-augment': 10.2.2
+      '@polkadot/rpc-core': 10.2.2
+      '@polkadot/rpc-provider': 10.2.2
+      '@polkadot/types': 10.2.2
+      '@polkadot/types-augment': 10.2.2
+      '@polkadot/types-codec': 10.2.2
+      '@polkadot/types-create': 10.2.2
+      '@polkadot/types-known': 10.2.2
+      '@polkadot/util': 11.1.3
+      '@polkadot/util-crypto': 11.1.3_@polkadot+util@11.1.3
       eventemitter3: 5.0.0
       rxjs: 7.8.0
       tslib: 2.5.0
@@ -5383,14 +5383,14 @@ packages:
       '@polkadot/util-crypto': 10.4.2
     dev: false
 
-  /@polkadot/keyring/11.1.2_@polkadot+util@11.1.2:
-    resolution: {integrity: sha512-LvyvVTvW9gZ3HyYuSfozRI9fKMJNP33LSVoABNHDY3nUPBFPTitEgMtInw6RJkTy2oWGU5C+dEFmtxjb9NvA8g==}
+  /@polkadot/keyring/11.1.3_@polkadot+util@11.1.3:
+    resolution: {integrity: sha512-bzGz1cWDYK7MWhp0630W6KOwTC/wsvKKHBvWxReMT7iQwFHeLn5AemUOveqIPxF+esd/UfdN5aFDHApjYcyZsg==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@polkadot/util': 11.1.2
+      '@polkadot/util': 11.1.3
     dependencies:
-      '@polkadot/util': 11.1.2
-      '@polkadot/util-crypto': 11.1.2_@polkadot+util@11.1.2
+      '@polkadot/util': 11.1.3
+      '@polkadot/util-crypto': 11.1.3_@polkadot+util@11.1.3
       tslib: 2.5.0
     dev: false
 
@@ -5467,11 +5467,11 @@ packages:
       '@substrate/ss58-registry': 1.39.0
     dev: false
 
-  /@polkadot/networks/11.1.2:
-    resolution: {integrity: sha512-nYWykUlIdWsFhkEy/uette0nxF1KqmcPBeMqTbvpPdQqGkfZmb6Vfpm8mVRSxPhYLu8D7El7VO+Xz/HK6JLeQQ==}
+  /@polkadot/networks/11.1.3:
+    resolution: {integrity: sha512-goLpX9SswAGGeh1jXB79wHEfWOF5rLIItMHYalujBmhQVxyAqbxP2tzQqPQXDLcnkWbgwkyYGLXaDD72GBqHZw==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/util': 11.1.2
+      '@polkadot/util': 11.1.3
       '@substrate/ss58-registry': 1.39.0
       tslib: 2.5.0
     dev: false
@@ -5499,14 +5499,14 @@ packages:
       '@substrate/ss58-registry': 1.39.0
     dev: false
 
-  /@polkadot/rpc-augment/10.2.1:
-    resolution: {integrity: sha512-opWg0//5FsIpu3Mi7UKHGCgu6Azrrhqpwc8by4vhW73gAVuJ5kxGcfJPy4m8pBA0omChD/l33PnhRlc9LkNRYg==}
+  /@polkadot/rpc-augment/10.2.2:
+    resolution: {integrity: sha512-NpxdlIjQbnBAqTU7Gh9yd672r0BX4SAQ0xODtDKUFA4zXaHC6rrK0DpshAe4dmafvhvxGftXwTrkxl+6yBQ/AA==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/rpc-core': 10.2.1
-      '@polkadot/types': 10.2.1
-      '@polkadot/types-codec': 10.2.1
-      '@polkadot/util': 11.1.2
+      '@polkadot/rpc-core': 10.2.2
+      '@polkadot/types': 10.2.2
+      '@polkadot/types-codec': 10.2.2
+      '@polkadot/util': 11.1.3
       tslib: 2.5.0
     transitivePeerDependencies:
       - bufferutil
@@ -5543,14 +5543,14 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@polkadot/rpc-core/10.2.1:
-    resolution: {integrity: sha512-v7InyKGCxZKbsBcN4f0oIAE3f7mY+dCe6q11iCwAS8dAilXwfXDuZ1kwaSIxwZKRCMIWqwlVM8tNij48AWr04A==}
+  /@polkadot/rpc-core/10.2.2:
+    resolution: {integrity: sha512-PXsiGcb3PHWP4FSO1BsSX5R32GrKO5uaoT8ul2cm8ZuEeNA85MelXNH/5iKZ/gj2TwJoYARFLz4evW9F6QKTmw==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/rpc-augment': 10.2.1
-      '@polkadot/rpc-provider': 10.2.1
-      '@polkadot/types': 10.2.1
-      '@polkadot/util': 11.1.2
+      '@polkadot/rpc-augment': 10.2.2
+      '@polkadot/rpc-provider': 10.2.2
+      '@polkadot/types': 10.2.2
+      '@polkadot/util': 11.1.3
       rxjs: 7.8.0
       tslib: 2.5.0
     transitivePeerDependencies:
@@ -5590,18 +5590,18 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@polkadot/rpc-provider/10.2.1:
-    resolution: {integrity: sha512-Zg+6tXwrd/oH/mGW+HoGcwmqTUfusMSugDyL8ccNd+y9iU2d0AlZMbPBvOE4zIP3C2HCM7qye8ndaXzZNezvvA==}
+  /@polkadot/rpc-provider/10.2.2:
+    resolution: {integrity: sha512-bk4ihqKVapyZRNI6cMQanp4Ajouzh8t/028rpsZRbB7C5x2CIGwtTqxzo4l2oSNF6Mn0zji3UA5XYeWxSZDAAg==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/keyring': 11.1.2_@polkadot+util@11.1.2
-      '@polkadot/types': 10.2.1
-      '@polkadot/types-support': 10.2.1
-      '@polkadot/util': 11.1.2
-      '@polkadot/util-crypto': 11.1.2_@polkadot+util@11.1.2
-      '@polkadot/x-fetch': 11.1.2
-      '@polkadot/x-global': 11.1.2
-      '@polkadot/x-ws': 11.1.2
+      '@polkadot/keyring': 11.1.3_@polkadot+util@11.1.3
+      '@polkadot/types': 10.2.2
+      '@polkadot/types-support': 10.2.2
+      '@polkadot/util': 11.1.3
+      '@polkadot/util-crypto': 11.1.3_@polkadot+util@11.1.3
+      '@polkadot/x-fetch': 11.1.3
+      '@polkadot/x-global': 11.1.3
+      '@polkadot/x-ws': 11.1.3
       eventemitter3: 5.0.0
       mock-socket: 9.2.1
       nock: 13.3.0
@@ -5660,13 +5660,13 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@polkadot/types-augment/10.2.1:
-    resolution: {integrity: sha512-WCnL8a2vT/GSrVnWty1pHZhXK2rkYMCon/Ml7kJL+Xk72EPua1lLwUCAC2ct9uyFuqamjIuyWGo0dz34CvrYZw==}
+  /@polkadot/types-augment/10.2.2:
+    resolution: {integrity: sha512-1VTsILspyS23bysTub9Ub6ZIXvOoEsM6/P1xnYgNfFPxb4pTXvW+dPJ11BhJNsgYAm5NbcCo8QxLwMUnM+S86g==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/types': 10.2.1
-      '@polkadot/types-codec': 10.2.1
-      '@polkadot/util': 11.1.2
+      '@polkadot/types': 10.2.2
+      '@polkadot/types-codec': 10.2.2
+      '@polkadot/util': 11.1.3
       tslib: 2.5.0
     dev: false
 
@@ -5690,12 +5690,12 @@ packages:
       '@polkadot/util': 10.4.2
     dev: false
 
-  /@polkadot/types-codec/10.2.1:
-    resolution: {integrity: sha512-0H88kead5dLwST2JHGZw91Mq0iifdeXCCCCxTYaGL78naEdEEAUDb6emkr+wzhshoUT4/6iG6a56Idt/Sl+nSQ==}
+  /@polkadot/types-codec/10.2.2:
+    resolution: {integrity: sha512-W2nYjutn5T7Ggi8Kqf0tf56iuwKNnb6U6bhuSBMvpyA1O6Y0vc2si50fZ+jUfx/XYOshMs1skw80PnM577KPlQ==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/util': 11.1.2
-      '@polkadot/x-bigint': 11.1.2
+      '@polkadot/util': 11.1.3
+      '@polkadot/x-bigint': 11.1.3
       tslib: 2.5.0
     dev: false
 
@@ -5716,12 +5716,12 @@ packages:
       '@polkadot/x-bigint': 10.4.2
     dev: false
 
-  /@polkadot/types-create/10.2.1:
-    resolution: {integrity: sha512-OWRmsBsy4ee+KyGwO5iySdqCgObaDcyVU+IxzjagrU+HadioDdqI8m+Ptjy2DG/wbjd+NCCplyJ80TM++1+SDA==}
+  /@polkadot/types-create/10.2.2:
+    resolution: {integrity: sha512-bk+oTPjcm4811GzDmzcQqFZoZlcTaVjqoXS+GSRuPX0+OzAMIVUwz6qFnYpS1hxm8yfZKyOMAQyqV7aK7vQFfg==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/types-codec': 10.2.1
-      '@polkadot/util': 11.1.2
+      '@polkadot/types-codec': 10.2.2
+      '@polkadot/util': 11.1.3
       tslib: 2.5.0
     dev: false
 
@@ -5743,15 +5743,15 @@ packages:
       '@polkadot/util': 10.4.2
     dev: false
 
-  /@polkadot/types-known/10.2.1:
-    resolution: {integrity: sha512-DJEfhCBmqRjiL0VF6pqGExczqtOI/o4tg9UI2OUGHPGIKixyHAIiBd1wS+tKWC3toibzI3QVCIDCAPhkuLJJBw==}
+  /@polkadot/types-known/10.2.2:
+    resolution: {integrity: sha512-y9Lfzikd5VKaifBynyqG1oE4n7iIM6OAHtKW5YGCmfkwIrj1EeEn2CDc5zhvlVpbctqrB5XEbSf/r30zA1fUdw==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/networks': 11.1.2
-      '@polkadot/types': 10.2.1
-      '@polkadot/types-codec': 10.2.1
-      '@polkadot/types-create': 10.2.1
-      '@polkadot/util': 11.1.2
+      '@polkadot/networks': 11.1.3
+      '@polkadot/types': 10.2.2
+      '@polkadot/types-codec': 10.2.2
+      '@polkadot/types-create': 10.2.2
+      '@polkadot/util': 11.1.3
       tslib: 2.5.0
     dev: false
 
@@ -5799,11 +5799,11 @@ packages:
       '@polkadot/util': 10.4.2
     dev: false
 
-  /@polkadot/types-support/10.2.1:
-    resolution: {integrity: sha512-e7CUGtdYazYmoGUGNp1ZDl7Jo++j9d/U64/aZg1pULvi69sBmKQAtdHzJtxMUgZk+f9VDmcA07n1bvfXZUltew==}
+  /@polkadot/types-support/10.2.2:
+    resolution: {integrity: sha512-T0CxVmA/IWJ35CaFMMGJyvgDyDt6kF3a7r0IVGJD/ChkTiPvNKlZTrg2LHBH/m04I87yq26ILAq03sSiRbftWA==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/util': 11.1.2
+      '@polkadot/util': 11.1.3
       tslib: 2.5.0
     dev: false
 
@@ -5823,16 +5823,16 @@ packages:
       '@polkadot/util': 10.4.2
     dev: false
 
-  /@polkadot/types/10.2.1:
-    resolution: {integrity: sha512-P1v+R+ejvJP7ar1oTXxFUEYSQf/94PtwJaZj7K5AW5mUOfrnU2FLWv8c/W5voJNT0bMXcPAfnhF6X7ufUuf0Bg==}
+  /@polkadot/types/10.2.2:
+    resolution: {integrity: sha512-J7I93a+Rfn3nov03XYyYMZLTn0dPDjv9XDNhSU9KkKB8WpVW7P0aRJNee2PWJjmRX8uXQsoLRSz3CLpMVQTVNA==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/keyring': 11.1.2_@polkadot+util@11.1.2
-      '@polkadot/types-augment': 10.2.1
-      '@polkadot/types-codec': 10.2.1
-      '@polkadot/types-create': 10.2.1
-      '@polkadot/util': 11.1.2
-      '@polkadot/util-crypto': 11.1.2_@polkadot+util@11.1.2
+      '@polkadot/keyring': 11.1.3_@polkadot+util@11.1.3
+      '@polkadot/types-augment': 10.2.2
+      '@polkadot/types-codec': 10.2.2
+      '@polkadot/types-create': 10.2.2
+      '@polkadot/util': 11.1.3
+      '@polkadot/util-crypto': 11.1.3_@polkadot+util@11.1.3
       rxjs: 7.8.0
       tslib: 2.5.0
     dev: false
@@ -5939,19 +5939,19 @@ packages:
       tweetnacl: 1.0.3
     dev: false
 
-  /@polkadot/util-crypto/11.1.2_@polkadot+util@11.1.2:
-    resolution: {integrity: sha512-9+M4mqhmvtZ0eNfHjy+TuelXG8e2+vZAXLkPrzx0jPMnzhc7mqwBeIMgkV96kMVFPawLNscQGTSZ/ofkU8KYAw==}
+  /@polkadot/util-crypto/11.1.3_@polkadot+util@11.1.3:
+    resolution: {integrity: sha512-hjH1y6jXQuceJ2NWx7+ei0sR4A7t844XwlNquPxZX3kQbQS+1t6tO4Eo3/95JhPsEaJOXduus02cYEF6gteEYQ==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@polkadot/util': 11.1.2
+      '@polkadot/util': 11.1.3
     dependencies:
       '@noble/hashes': 1.3.0
       '@noble/secp256k1': 1.7.1
-      '@polkadot/networks': 11.1.2
-      '@polkadot/util': 11.1.2
-      '@polkadot/wasm-crypto': 7.0.3_vjag24kmkbe246bb5gbhxhl7qm
-      '@polkadot/x-bigint': 11.1.2
-      '@polkadot/x-randomvalues': 11.1.2
+      '@polkadot/networks': 11.1.3
+      '@polkadot/util': 11.1.3
+      '@polkadot/wasm-crypto': 7.0.3_mm43hiioo6dubpyqywbq6olrhm
+      '@polkadot/x-bigint': 11.1.3
+      '@polkadot/x-randomvalues': 11.1.3
       '@scure/base': 1.1.1
       tslib: 2.5.0
       tweetnacl: 1.0.3
@@ -6093,14 +6093,14 @@ packages:
       bn.js: 5.2.1
     dev: false
 
-  /@polkadot/util/11.1.2:
-    resolution: {integrity: sha512-DtVjZgiCEJfrnX/I8gWxG/11ObQeWG2aA0HA+8ek2j//Q2W1Jfq7xvQPupmvrlQaBlHZnkqolgIUXy6UdM98mg==}
+  /@polkadot/util/11.1.3:
+    resolution: {integrity: sha512-Gsqzv1/fSoypS5tnJkM+NJQeT7O4iYlSniubUJnaZVOKsIbueTS1bMQ1y3/h8ISxbKBtICW5cZ6zCej6Q/jC3w==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/x-bigint': 11.1.2
-      '@polkadot/x-global': 11.1.2
-      '@polkadot/x-textdecoder': 11.1.2
-      '@polkadot/x-textencoder': 11.1.2
+      '@polkadot/x-bigint': 11.1.3
+      '@polkadot/x-global': 11.1.3
+      '@polkadot/x-textdecoder': 11.1.3
+      '@polkadot/x-textencoder': 11.1.3
       '@types/bn.js': 5.1.1
       bn.js: 5.2.1
       tslib: 2.5.0
@@ -6158,15 +6158,15 @@ packages:
       '@polkadot/x-randomvalues': 10.4.2
     dev: false
 
-  /@polkadot/wasm-bridge/7.0.3_vjag24kmkbe246bb5gbhxhl7qm:
+  /@polkadot/wasm-bridge/7.0.3_mm43hiioo6dubpyqywbq6olrhm:
     resolution: {integrity: sha512-q5qyhkGE9lHQmThNg6G5zCM4gYip2KtmR+De/URX7yWAO6snsinFqt066RFVuHvX1hZijrYSe/BGQABAUtH4pw==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@polkadot/util': '*'
       '@polkadot/x-randomvalues': '*'
     dependencies:
-      '@polkadot/util': 11.1.2
-      '@polkadot/x-randomvalues': 11.1.2
+      '@polkadot/util': 11.1.3
+      '@polkadot/x-randomvalues': 11.1.3
       tslib: 2.5.0
     dev: false
 
@@ -6220,13 +6220,13 @@ packages:
       '@polkadot/util': 10.4.2
     dev: false
 
-  /@polkadot/wasm-crypto-asmjs/7.0.3_@polkadot+util@11.1.2:
+  /@polkadot/wasm-crypto-asmjs/7.0.3_@polkadot+util@11.1.3:
     resolution: {integrity: sha512-ldMZjowYywn0Uj7jSr8a21rrlFFq/jWhCXVl21/KDcYGdFEfIajqbcrO5cHoT6w95sQgAwMWJwwDClXOaBjc/Q==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@polkadot/util': '*'
     dependencies:
-      '@polkadot/util': 11.1.2
+      '@polkadot/util': 11.1.3
       tslib: 2.5.0
     dev: false
 
@@ -6245,18 +6245,18 @@ packages:
       '@polkadot/x-randomvalues': 10.4.2
     dev: false
 
-  /@polkadot/wasm-crypto-init/7.0.3_vjag24kmkbe246bb5gbhxhl7qm:
+  /@polkadot/wasm-crypto-init/7.0.3_mm43hiioo6dubpyqywbq6olrhm:
     resolution: {integrity: sha512-W4ClfPrzOTqiX0x4h6rXjCt8UsVsbg3zU7LJFFjeLgrguPoKTLGw4h5O1rR2H7EuMFbuqdztzJn3qTjBcR03Cg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@polkadot/util': '*'
       '@polkadot/x-randomvalues': '*'
     dependencies:
-      '@polkadot/util': 11.1.2
-      '@polkadot/wasm-bridge': 7.0.3_vjag24kmkbe246bb5gbhxhl7qm
-      '@polkadot/wasm-crypto-asmjs': 7.0.3_@polkadot+util@11.1.2
-      '@polkadot/wasm-crypto-wasm': 7.0.3_@polkadot+util@11.1.2
-      '@polkadot/x-randomvalues': 11.1.2
+      '@polkadot/util': 11.1.3
+      '@polkadot/wasm-bridge': 7.0.3_mm43hiioo6dubpyqywbq6olrhm
+      '@polkadot/wasm-crypto-asmjs': 7.0.3_@polkadot+util@11.1.3
+      '@polkadot/wasm-crypto-wasm': 7.0.3_@polkadot+util@11.1.3
+      '@polkadot/x-randomvalues': 11.1.3
       tslib: 2.5.0
     dev: false
 
@@ -6311,14 +6311,14 @@ packages:
       '@polkadot/wasm-util': 6.4.1_@polkadot+util@10.4.2
     dev: false
 
-  /@polkadot/wasm-crypto-wasm/7.0.3_@polkadot+util@11.1.2:
+  /@polkadot/wasm-crypto-wasm/7.0.3_@polkadot+util@11.1.3:
     resolution: {integrity: sha512-FRjUADiA3wMkjJqQLgB0v9rbSADcb2PY/6dJi06iza9m41HebTN3x7f5D3gWTCfgJjzWLAPchY2Hwsa0WpTQkw==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@polkadot/util': '*'
     dependencies:
-      '@polkadot/util': 11.1.2
-      '@polkadot/wasm-util': 7.0.3_@polkadot+util@11.1.2
+      '@polkadot/util': 11.1.3
+      '@polkadot/wasm-util': 7.0.3_@polkadot+util@11.1.3
       tslib: 2.5.0
     dev: false
 
@@ -6409,20 +6409,20 @@ packages:
       '@polkadot/x-randomvalues': 10.4.2
     dev: false
 
-  /@polkadot/wasm-crypto/7.0.3_vjag24kmkbe246bb5gbhxhl7qm:
+  /@polkadot/wasm-crypto/7.0.3_mm43hiioo6dubpyqywbq6olrhm:
     resolution: {integrity: sha512-mOCLCaL9cyrU72PCc9nMNAj3zdvOzau5mOGJjLahIz+mqlHAoAmEXCAJvJ2qCo7OFl8QiDToAEGhdDWQfiHUyg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@polkadot/util': '*'
       '@polkadot/x-randomvalues': '*'
     dependencies:
-      '@polkadot/util': 11.1.2
-      '@polkadot/wasm-bridge': 7.0.3_vjag24kmkbe246bb5gbhxhl7qm
-      '@polkadot/wasm-crypto-asmjs': 7.0.3_@polkadot+util@11.1.2
-      '@polkadot/wasm-crypto-init': 7.0.3_vjag24kmkbe246bb5gbhxhl7qm
-      '@polkadot/wasm-crypto-wasm': 7.0.3_@polkadot+util@11.1.2
-      '@polkadot/wasm-util': 7.0.3_@polkadot+util@11.1.2
-      '@polkadot/x-randomvalues': 11.1.2
+      '@polkadot/util': 11.1.3
+      '@polkadot/wasm-bridge': 7.0.3_mm43hiioo6dubpyqywbq6olrhm
+      '@polkadot/wasm-crypto-asmjs': 7.0.3_@polkadot+util@11.1.3
+      '@polkadot/wasm-crypto-init': 7.0.3_mm43hiioo6dubpyqywbq6olrhm
+      '@polkadot/wasm-crypto-wasm': 7.0.3_@polkadot+util@11.1.3
+      '@polkadot/wasm-util': 7.0.3_@polkadot+util@11.1.3
+      '@polkadot/x-randomvalues': 11.1.3
       tslib: 2.5.0
     dev: false
 
@@ -6436,13 +6436,13 @@ packages:
       '@polkadot/util': 10.4.2
     dev: false
 
-  /@polkadot/wasm-util/7.0.3_@polkadot+util@11.1.2:
+  /@polkadot/wasm-util/7.0.3_@polkadot+util@11.1.3:
     resolution: {integrity: sha512-L9U5nSbzr5xa2YSpveP/zZxhOB6i8ibssK+ihuG+7SICYtTC0B9wJp/UnjP/c6bEDlMV3yWiNXJPBTJMGmkmIQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@polkadot/util': '*'
     dependencies:
-      '@polkadot/util': 11.1.2
+      '@polkadot/util': 11.1.3
       tslib: 2.5.0
     dev: false
 
@@ -6462,11 +6462,11 @@ packages:
       '@polkadot/x-global': 10.4.2
     dev: false
 
-  /@polkadot/x-bigint/11.1.2:
-    resolution: {integrity: sha512-IUsYpkWmHeYyHnGLzFd129YtqZp0oRc8n0bb5+M2tHHPHbwfTBreSP6CimGfcJsmGO9KfWEkzZdvWxYcXzZX+Q==}
+  /@polkadot/x-bigint/11.1.3:
+    resolution: {integrity: sha512-fRUUHfW9VFsXT7sLUUY7gSu8v+PvzNLRwvjnp+Ly8vFx9LTLuVGFCi+mpysuRTaPpqZZJlzBJ3fST7xTGh67Pg==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/x-global': 11.1.2
+      '@polkadot/x-global': 11.1.3
       tslib: 2.5.0
     dev: false
 
@@ -6488,11 +6488,11 @@ packages:
       node-fetch: 3.3.1
     dev: false
 
-  /@polkadot/x-fetch/11.1.2:
-    resolution: {integrity: sha512-c7KF6Zbu2grfgLXrQAhTfW712ZYCJSMDIhxqNVDjBJlWEw1lyOvss79/LpKJGxEAvNIFVaUerxUyl7Rymkm0ug==}
+  /@polkadot/x-fetch/11.1.3:
+    resolution: {integrity: sha512-+Z0RxxsN7+l2ZmmDdHqOo0kgqvjXJ1bw8CwTVnq3t9nPgZKn2pC3Fq3xdj/sRWiLuf/UhgCxKfYfMmt5ek4kIg==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/x-global': 11.1.2
+      '@polkadot/x-global': 11.1.3
       node-fetch: 3.3.1
       tslib: 2.5.0
     dev: false
@@ -6523,8 +6523,8 @@ packages:
       '@babel/runtime': 7.21.0
     dev: false
 
-  /@polkadot/x-global/11.1.2:
-    resolution: {integrity: sha512-o/MV4ta7+teq8qOSXpaV7Dtk+9NltuRzsXEHiaqnLwaIXEQ2H7GJ+f/K7c+jQApEkdLp+iCt0D/lLjkW17vc2A==}
+  /@polkadot/x-global/11.1.3:
+    resolution: {integrity: sha512-R3aqtIjgzFHJ3TyX6wavhp+59oLbZiqczIHkaas/nJe21+SVARqFmIII6BwS7ty7+8Uu4fHliA9re+ZSUp+rwg==}
     engines: {node: '>=14'}
     dependencies:
       tslib: 2.5.0
@@ -6559,11 +6559,11 @@ packages:
       '@polkadot/x-global': 10.4.2
     dev: false
 
-  /@polkadot/x-randomvalues/11.1.2:
-    resolution: {integrity: sha512-hiAF1MfHVVkmFALikYMOi81Nh13gvg9E5yiW27jS33fyOR8d2mXt17QQzmfPCD3rkXwKZ8FI29sSTUXki1LL3Q==}
+  /@polkadot/x-randomvalues/11.1.3:
+    resolution: {integrity: sha512-kZjbRgxokMR9UTodZQKs6s3C/Q2YgeizcxpDCghM/VdvQUE8OVBGNzduF7SvBvQyg2Qbg8jMcSxXOY7UgcOWSg==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/x-global': 11.1.2
+      '@polkadot/x-global': 11.1.3
       tslib: 2.5.0
     dev: false
 
@@ -6615,11 +6615,11 @@ packages:
       '@polkadot/x-global': 10.4.2
     dev: false
 
-  /@polkadot/x-textdecoder/11.1.2:
-    resolution: {integrity: sha512-CoRd680J6YtW1L5+XhsY8jCT3+esj82AttraiuB0DZ85t/IOT/8hji/MJJAXn6a+cgJqVNgHzrnpiCFYfsMKtA==}
+  /@polkadot/x-textdecoder/11.1.3:
+    resolution: {integrity: sha512-NhOjuXVfYRMw9l0VhCtZOtcWefZth58p5KpVOrFyJZd12fTsoMO5/746K7QoAjWRrLQTJ/LHCEKCtWww0LwVPw==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/x-global': 11.1.2
+      '@polkadot/x-global': 11.1.3
       tslib: 2.5.0
     dev: false
 
@@ -6655,11 +6655,11 @@ packages:
       '@polkadot/x-global': 10.4.2
     dev: false
 
-  /@polkadot/x-textencoder/11.1.2:
-    resolution: {integrity: sha512-faZB0DRMJm54nrf8pTnE3ecHfZWi9cyQSx1ocqzjL/+J627alMvfPM7NBXU+HlmtENEbmRSgt6m9rIJKOL2LZw==}
+  /@polkadot/x-textencoder/11.1.3:
+    resolution: {integrity: sha512-7DmqjlPN8aQexLUKwoHeadihpUnW8hjpXEru+aEDxjgq9XIxPvb++NeBK+Mra9RzzZRuiT/K5z16HlwKN//ewg==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/x-global': 11.1.2
+      '@polkadot/x-global': 11.1.3
       tslib: 2.5.0
     dev: false
 
@@ -6691,11 +6691,11 @@ packages:
       - supports-color
     dev: false
 
-  /@polkadot/x-ws/11.1.2:
-    resolution: {integrity: sha512-Sp7BnGT8LKXDsGV5j8IzRtChuM39QiMPm6VL4mdDqhVyuqSSAtnLG3ZCuwE0EuREkduZxu1NaIToDeMeeXqxyg==}
+  /@polkadot/x-ws/11.1.3:
+    resolution: {integrity: sha512-omNU2mIVX997HiHm2YxEdJdyCFnv+oTyKWZd0+FdS47rdfhVwD+H9/bS+rtQ9lIqfhODdGmw3fG//gq1KpYJcw==}
     engines: {node: '>=14'}
     dependencies:
-      '@polkadot/x-global': 11.1.2
+      '@polkadot/x-global': 11.1.3
       tslib: 2.5.0
       ws: 8.13.0
     transitivePeerDependencies:
@@ -7067,17 +7067,6 @@ packages:
     resolution: {integrity: sha512-ZxOhsSyxYwLJj3pLZCefNitxsj093tb2vq90mp2txoYeBqbcjDjqFhyM8eUjq/uFm6zJ+mUuqxlS2FkuSY1MTA==}
     dev: false
 
-  /@sentry/browser/7.30.0:
-    resolution: {integrity: sha512-9hpaNAqIBDLdnrZ51iWkqenRotqqweE1f2AlHO56nyT/UE+u+GdmAiBrgRNqdFQQM13JtTG/gu4HGOyLWb9HEA==}
-    engines: {node: '>=8'}
-    dependencies:
-      '@sentry/core': 7.30.0
-      '@sentry/replay': 7.30.0_@sentry+browser@7.30.0
-      '@sentry/types': 7.30.0
-      '@sentry/utils': 7.30.0
-      tslib: 1.14.1
-    dev: false
-
   /@sentry/browser/7.42.0:
     resolution: {integrity: sha512-xTwfvrQPmYTkAvGivoJFadPLKLDS2N57D/18NA1gcrnF8NwR+I28x3I9ziVUiMCYX+6nJuqBNlMALAEPbb2G5A==}
     engines: {node: '>=8'}
@@ -7107,15 +7096,6 @@ packages:
       - supports-color
     dev: true
 
-  /@sentry/core/7.30.0:
-    resolution: {integrity: sha512-NeLigkBlpcK63ymM63GoIHurml6V3BUe1Vi+trwm4/qqOTzT7PQhvdJCX+o3+atzRBH+zdb6kd4VWx44Oye3KA==}
-    engines: {node: '>=8'}
-    dependencies:
-      '@sentry/types': 7.30.0
-      '@sentry/utils': 7.30.0
-      tslib: 1.14.1
-    dev: false
-
   /@sentry/core/7.42.0:
     resolution: {integrity: sha512-vNcTyoQz5kUXo5vMGDyc5BJMO0UugPvMfYMQVxqt/BuDNR30LVhY+DL2tW1DFZDvRvyn5At+H7kSTj6GFrANXQ==}
     engines: {node: '>=8'}
@@ -7150,18 +7130,6 @@ packages:
       - supports-color
     dev: false
 
-  /@sentry/replay/7.30.0_@sentry+browser@7.30.0:
-    resolution: {integrity: sha512-qJgz1tG0uStqMF5V7gN7KqxZuZY0MMQQY7siwPcSQVYj7X3AQswHjmvD4npEKbIa+jP6aQ6fFjoBjl3c0t3Mmg==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      '@sentry/browser': '>=7.24.0'
-    dependencies:
-      '@sentry/browser': 7.30.0
-      '@sentry/core': 7.30.0
-      '@sentry/types': 7.30.0
-      '@sentry/utils': 7.30.0
-    dev: false
-
   /@sentry/replay/7.42.0:
     resolution: {integrity: sha512-81HQm20hrW0+0eZ5sZf8KsSekkAlI0/u/M+9ZmOn2bHpGihqAM/O/lrXhTzaRXdpX/9NSwSCGY9k7LIRNMKaEQ==}
     engines: {node: '>=12'}
@@ -7171,24 +7139,11 @@ packages:
       '@sentry/utils': 7.42.0
     dev: false
 
-  /@sentry/types/7.30.0:
-    resolution: {integrity: sha512-l4A86typvt/SfWh5JffpdxNGkg5EEA8m35BzpIcKmCAQZUDmnb4b478r8jdD2uuOjLmPNmZr1tifdRW4NCLuxQ==}
-    engines: {node: '>=8'}
-    dev: false
-
   /@sentry/types/7.42.0:
     resolution: {integrity: sha512-Ga0xaBIR/peuXQ88hI9a5TNY3GLNoH8jpsgPaAjAtRHkLsTx0y3AR+PrD7pUysza9QjvG+Qux01DRvLgaNKOHA==}
     engines: {node: '>=8'}
     dev: false
 
-  /@sentry/utils/7.30.0:
-    resolution: {integrity: sha512-tSlBhr5u/LdE2emxIDTDmjmyRr99GnZGIAh5GwRxUgeDQ3VEfNUFlyFodBCbZ6yeYTYd6PWNih5xoHn1+Rf3Sw==}
-    engines: {node: '>=8'}
-    dependencies:
-      '@sentry/types': 7.30.0
-      tslib: 1.14.1
-    dev: false
-
   /@sentry/utils/7.42.0:
     resolution: {integrity: sha512-cBiDZVipC+is+IVgsTQLJyZWUZQxlLZ9GarNT+XZOZ5BFh0acFtz88hO6+S7vGmhcx2aCvsdC9yb2Yf+BphK6Q==}
     engines: {node: '>=8'}
@@ -7275,7 +7230,7 @@ packages:
   /@subsocial/definitions/0.7.12:
     resolution: {integrity: sha512-wM4CBYTRkBy56Qozo4PL4tVVk07v1tksp/0lzHH7m6Es3mGsr48LuV4KYtzaVAisUnObuQ9aFyfTuwiju2qL3Q==}
     dependencies:
-      '@polkadot/api': 10.2.1
+      '@polkadot/api': 10.2.2
       lodash.camelcase: 4.3.0
     transitivePeerDependencies:
       - bufferutil

From 7b6409cc0bc8079db1b675c2ecd5f3a01c477818 Mon Sep 17 00:00:00 2001
From: Jarsen <695552027@qq.com>
Date: Thu, 30 Mar 2023 14:02:03 +0800
Subject: [PATCH 31/65] fix: Infinity scroll is slow

---
 composables/useListInfiniteScroll.ts          | 19 ++++++++---
 .../components/MediaItem/type/ImageMedia.vue  |  2 +-
 nuxt.config.js                                |  1 +
 package.json                                  |  1 +
 plugins/vueLazyLoad.ts                        | 10 ++++++
 pnpm-lock.yaml                                | 32 ++++++++++---------
 6 files changed, 45 insertions(+), 20 deletions(-)
 create mode 100644 plugins/vueLazyLoad.ts

diff --git a/composables/useListInfiniteScroll.ts b/composables/useListInfiniteScroll.ts
index a6efbb9bea..daa808d717 100644
--- a/composables/useListInfiniteScroll.ts
+++ b/composables/useListInfiniteScroll.ts
@@ -35,7 +35,7 @@ export default function ({
   const scrollItemHeight = ref(300)
   const itemsPerRow = ref(4)
   const scrollItemSizeInit = ref(false)
-  const first = ref(defaultFirst || 20)
+  const first = ref(defaultFirst || 40)
   const total = ref(0)
   const isFetchingData = ref(false)
 
@@ -44,11 +44,21 @@ export default function ({
   useInfiniteScroll(
     containerRef,
     () => {
-      if (canLoadNextPage.value && total.value > 0) {
+      if (canLoadNextPage.value) {
         reachBottomHandler()
       }
     },
-    { distance: 1600 }
+    { distance: 0 }
+  )
+
+  useInfiniteScroll(
+    containerRef,
+    () => {
+      if (canLoadNextPage.value) {
+        prefetchNextPage()
+      }
+    },
+    { distance: 2000 }
   )
 
   const scrollContainerId = ref(
@@ -59,7 +69,8 @@ export default function ({
   )
 
   const canLoadNextPage = computed(
-    () => endPage.value < Math.ceil(total.value / first.value)
+    () =>
+      endPage.value < Math.ceil(total.value / first.value) && total.value > 0
   )
 
   const pageHeight = computed(
diff --git a/libs/ui/src/components/MediaItem/type/ImageMedia.vue b/libs/ui/src/components/MediaItem/type/ImageMedia.vue
index e1a46d6ba6..dfa7474800 100644
--- a/libs/ui/src/components/MediaItem/type/ImageMedia.vue
+++ b/libs/ui/src/components/MediaItem/type/ImageMedia.vue
@@ -6,8 +6,8 @@
       'is-detail': isDetail,
     }">
     <img
+      v-lazy="src"
       class="is-block image-media__image"
-      :src="src"
       :alt="alt"
       data-cy="type-image" />
   </figure>
diff --git a/nuxt.config.js b/nuxt.config.js
index e18c8e6ec5..07cbdb888d 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -149,6 +149,7 @@ export default defineNuxtConfig({
     '~/plugins/vueClipboard',
     '~/plugins/vueSocialSharing',
     '~/plugins/vueTippy',
+    '~/plugins/vueLazyLoad',
   ],
 
   router: {
diff --git a/package.json b/package.json
index f3b96fba72..fe29774e16 100644
--- a/package.json
+++ b/package.json
@@ -115,6 +115,7 @@
     "vue-class-component": "^7.2.6",
     "vue-clipboard2": "^0.3.3",
     "vue-infinite-loading": "^2.4.5",
+    "vue-lazyload": "^1.3.4",
     "vue-markdown-render": "^1.1.3",
     "vue-social-sharing": "^3.0.9",
     "vue-tippy": "^4.16.1",
diff --git a/plugins/vueLazyLoad.ts b/plugins/vueLazyLoad.ts
new file mode 100644
index 0000000000..59f2896108
--- /dev/null
+++ b/plugins/vueLazyLoad.ts
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+
+import VueLazyload from 'vue-lazyload'
+import placeholder from '@/static/placeholder.webp'
+
+Vue.use(VueLazyload, {
+  preLoad: 1.3,
+  error: placeholder,
+  attempt: 1,
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aea4887604..bd00f61eec 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -124,6 +124,7 @@ importers:
       vue-eslint-parser: ^9.1.0
       vue-gtag-next: ^1.14.0
       vue-infinite-loading: ^2.4.5
+      vue-lazyload: ^1.3.4
       vue-markdown-render: ^1.1.3
       vue-social-sharing: ^3.0.9
       vue-tippy: ^4.16.1
@@ -187,6 +188,7 @@ importers:
       vue-class-component: 7.2.6_vue@2.7.14
       vue-clipboard2: 0.3.3
       vue-infinite-loading: 2.4.5_vue@2.7.14
+      vue-lazyload: 1.3.4
       vue-markdown-render: 1.1.3
       vue-social-sharing: 3.0.9_vue@2.7.14
       vue-tippy: 4.16.1_vue@2.7.14
@@ -999,7 +1001,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.20.7
-      '@babel/types': 7.21.0
+      '@babel/types': 7.21.3
 
   /@babel/helper-hoist-variables/7.18.6:
     resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==}
@@ -1011,7 +1013,7 @@ packages:
     resolution: {integrity: sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.21.0
+      '@babel/types': 7.21.3
 
   /@babel/helper-module-imports/7.18.6:
     resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
@@ -1038,7 +1040,7 @@ packages:
     resolution: {integrity: sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.21.0
+      '@babel/types': 7.21.3
 
   /@babel/helper-plugin-utils/7.20.2:
     resolution: {integrity: sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==}
@@ -1073,7 +1075,7 @@ packages:
       '@babel/helper-optimise-call-expression': 7.18.6
       '@babel/template': 7.20.7
       '@babel/traverse': 7.21.0
-      '@babel/types': 7.21.0
+      '@babel/types': 7.21.3
     transitivePeerDependencies:
       - supports-color
 
@@ -1093,7 +1095,7 @@ packages:
     resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.21.0
+      '@babel/types': 7.21.3
 
   /@babel/helper-string-parser/7.19.4:
     resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
@@ -1161,7 +1163,7 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.21.0
+      '@babel/types': 7.21.3
 
   /@babel/parser/7.21.3:
     resolution: {integrity: sha512-lobG0d7aOfQRXh8AyklEAgZGvA4FShxo6xQbUrrT/cNBPUdIDojlokwJsQyCC/eKia7ifqM0yP+2DRZ4WKw2RQ==}
@@ -7476,7 +7478,7 @@ packages:
   /@types/fs-extra/9.0.13:
     resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}
     dependencies:
-      '@types/node': 18.13.0
+      '@types/node': 18.14.6
     dev: true
 
   /@types/html-minifier-terser/5.1.2:
@@ -7598,10 +7600,6 @@ packages:
     resolution: {integrity: sha512-ZOzvDRWp8dCVBmgnkIqYCArgdFOO9YzocZp8Ra25N/RStKiWvMOXHMz+GjSeVNe5TstaTmTWPucGJkDw0XXJWA==}
     dev: true
 
-  /@types/node/18.13.0:
-    resolution: {integrity: sha512-gC3TazRzGoOnoKAhUx+Q0t8S9Tzs74z7m0ipwGpSqQrleP14hKxP4/JUeEQcD3W1/aIpnWl8pHowI7WokuZpXg==}
-    dev: true
-
   /@types/node/18.14.6:
     resolution: {integrity: sha512-93+VvleD3mXwlLI/xASjw0FzKcwzl3OdTCzm1LaRfqgS21gfFtK3zDXM5Op9TeeMsJVOaJ2VRDpT9q4Y3d0AvA==}
 
@@ -22650,8 +22648,8 @@ packages:
       terser:
         optional: true
     dependencies:
-      esbuild: 0.15.12
-      postcss: 8.4.18
+      esbuild: 0.15.18
+      postcss: 8.4.21
       resolve: 1.22.1
       rollup: 2.79.1
       sass: 1.59.3
@@ -22686,8 +22684,8 @@ packages:
         optional: true
     dependencies:
       '@types/node': 18.14.6
-      esbuild: 0.15.12
-      postcss: 8.4.18
+      esbuild: 0.15.18
+      postcss: 8.4.21
       resolve: 1.22.1
       rollup: 2.79.1
       sass: 1.59.3
@@ -23022,6 +23020,10 @@ packages:
       vue: 2.7.14
     dev: false
 
+  /vue-lazyload/1.3.4:
+    resolution: {integrity: sha512-K0frbPQJuvFHVpdl/ov5CqCR/CHWeLGs8E8V1d/09DIETqBjeGhC1fLMmwUy3Go2Yd/VX610AZ7Mdn4B54592Q==}
+    dev: false
+
   /vue-loader/15.10.0_mi7kfaeh4nmupiqclubmvzt3ru:
     resolution: {integrity: sha512-VU6tuO8eKajrFeBzMssFUP9SvakEeeSi1BxdTH5o3+1yUyrldp8IERkSdXlMI2t4kxF2sqYUDsQY+WJBxzBmZg==}
     peerDependencies:

From 8d20f08177ba6fd936045f03ca4ad4988587a943 Mon Sep 17 00:00:00 2001
From: Jarsen <695552027@qq.com>
Date: Fri, 31 Mar 2023 23:59:31 +0800
Subject: [PATCH 32/65] fix: remvoe vue-lazyload

---
 .../components/MediaItem/type/ImageMedia.vue  | 19 +++++++++++++++++--
 nuxt.config.js                                |  1 -
 plugins/vueLazyLoad.ts                        | 10 ----------
 3 files changed, 17 insertions(+), 13 deletions(-)
 delete mode 100644 plugins/vueLazyLoad.ts

diff --git a/libs/ui/src/components/MediaItem/type/ImageMedia.vue b/libs/ui/src/components/MediaItem/type/ImageMedia.vue
index dfa7474800..ecf4fabdbc 100644
--- a/libs/ui/src/components/MediaItem/type/ImageMedia.vue
+++ b/libs/ui/src/components/MediaItem/type/ImageMedia.vue
@@ -6,10 +6,12 @@
       'is-detail': isDetail,
     }">
     <img
-      v-lazy="src"
+      :src="src"
+      loading="lazy"
       class="is-block image-media__image"
       :alt="alt"
-      data-cy="type-image" />
+      data-cy="type-image"
+      @error="onError" />
   </figure>
 </template>
 
@@ -20,6 +22,19 @@ defineProps<{
   original: boolean
   isDetail?: boolean
 }>()
+const { $consola } = useNuxtApp()
+const { isDarkMode } = useTheme()
+const placeholder = computed(() => {
+  return isDarkMode.value ? '/placeholder.webp' : '/placeholder-white.webp'
+})
+
+const onError = (e: Event) => {
+  const target = e.target as HTMLImageElement
+  if (target) {
+    $consola.log('image load error', e)
+    target.src = placeholder.value
+  }
+}
 </script>
 
 <style>
diff --git a/nuxt.config.js b/nuxt.config.js
index 07cbdb888d..e18c8e6ec5 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -149,7 +149,6 @@ export default defineNuxtConfig({
     '~/plugins/vueClipboard',
     '~/plugins/vueSocialSharing',
     '~/plugins/vueTippy',
-    '~/plugins/vueLazyLoad',
   ],
 
   router: {
diff --git a/plugins/vueLazyLoad.ts b/plugins/vueLazyLoad.ts
deleted file mode 100644
index 59f2896108..0000000000
--- a/plugins/vueLazyLoad.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import Vue from 'vue'
-
-import VueLazyload from 'vue-lazyload'
-import placeholder from '@/static/placeholder.webp'
-
-Vue.use(VueLazyload, {
-  preLoad: 1.3,
-  error: placeholder,
-  attempt: 1,
-})

From ed7438605b21cbf74442d60b4e0c84055f6ad64f Mon Sep 17 00:00:00 2001
From: Jarsen <695552027@qq.com>
Date: Sat, 1 Apr 2023 00:01:36 +0800
Subject: [PATCH 33/65] fix: remove deps

---
 package.json   |  1 -
 pnpm-lock.yaml | 35 ++++++-----------------------------
 2 files changed, 6 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index fe29774e16..f3b96fba72 100644
--- a/package.json
+++ b/package.json
@@ -115,7 +115,6 @@
     "vue-class-component": "^7.2.6",
     "vue-clipboard2": "^0.3.3",
     "vue-infinite-loading": "^2.4.5",
-    "vue-lazyload": "^1.3.4",
     "vue-markdown-render": "^1.1.3",
     "vue-social-sharing": "^3.0.9",
     "vue-tippy": "^4.16.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bd00f61eec..c9f2b99041 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -124,7 +124,6 @@ importers:
       vue-eslint-parser: ^9.1.0
       vue-gtag-next: ^1.14.0
       vue-infinite-loading: ^2.4.5
-      vue-lazyload: ^1.3.4
       vue-markdown-render: ^1.1.3
       vue-social-sharing: ^3.0.9
       vue-tippy: ^4.16.1
@@ -188,7 +187,6 @@ importers:
       vue-class-component: 7.2.6_vue@2.7.14
       vue-clipboard2: 0.3.3
       vue-infinite-loading: 2.4.5_vue@2.7.14
-      vue-lazyload: 1.3.4
       vue-markdown-render: 1.1.3
       vue-social-sharing: 3.0.9_vue@2.7.14
       vue-tippy: 4.16.1_vue@2.7.14
@@ -1074,7 +1072,7 @@ packages:
       '@babel/helper-member-expression-to-functions': 7.21.0
       '@babel/helper-optimise-call-expression': 7.18.6
       '@babel/template': 7.20.7
-      '@babel/traverse': 7.21.0
+      '@babel/traverse': 7.21.3
       '@babel/types': 7.21.3
     transitivePeerDependencies:
       - supports-color
@@ -2124,29 +2122,12 @@ packages:
       '@babel/helper-hoist-variables': 7.18.6
       '@babel/helper-split-export-declaration': 7.18.6
       '@babel/parser': 7.21.1
-      '@babel/types': 7.21.0
-      debug: 4.3.4
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@babel/traverse/7.21.0:
-    resolution: {integrity: sha512-Xdt2P1H4LKTO8ApPfnO1KmzYMFpp7D/EinoXzLYN/cHcBNrVCAkAtGUcXnHXrl/VGktureU6fkQrHSBE2URfoA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.18.6
-      '@babel/generator': 7.21.3
-      '@babel/helper-environment-visitor': 7.18.9
-      '@babel/helper-function-name': 7.21.0
-      '@babel/helper-hoist-variables': 7.18.6
-      '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/parser': 7.21.3
       '@babel/types': 7.21.3
       debug: 4.3.4
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
+    dev: false
 
   /@babel/traverse/7.21.3:
     resolution: {integrity: sha512-XLyopNeaTancVitYZe2MlUEvgKb6YVVPXzofHgqHijCImG33b/uTurMS488ht/Hbsb2XK3U2BnSTxKVNGV3nGQ==}
@@ -22648,8 +22629,8 @@ packages:
       terser:
         optional: true
     dependencies:
-      esbuild: 0.15.18
-      postcss: 8.4.21
+      esbuild: 0.15.12
+      postcss: 8.4.18
       resolve: 1.22.1
       rollup: 2.79.1
       sass: 1.59.3
@@ -22684,8 +22665,8 @@ packages:
         optional: true
     dependencies:
       '@types/node': 18.14.6
-      esbuild: 0.15.18
-      postcss: 8.4.21
+      esbuild: 0.15.12
+      postcss: 8.4.18
       resolve: 1.22.1
       rollup: 2.79.1
       sass: 1.59.3
@@ -23020,10 +23001,6 @@ packages:
       vue: 2.7.14
     dev: false
 
-  /vue-lazyload/1.3.4:
-    resolution: {integrity: sha512-K0frbPQJuvFHVpdl/ov5CqCR/CHWeLGs8E8V1d/09DIETqBjeGhC1fLMmwUy3Go2Yd/VX610AZ7Mdn4B54592Q==}
-    dev: false
-
   /vue-loader/15.10.0_mi7kfaeh4nmupiqclubmvzt3ru:
     resolution: {integrity: sha512-VU6tuO8eKajrFeBzMssFUP9SvakEeeSi1BxdTH5o3+1yUyrldp8IERkSdXlMI2t4kxF2sqYUDsQY+WJBxzBmZg==}
     peerDependencies:

From cd09eec7a2e1cb2dad8fb20b3ac11008611a484c Mon Sep 17 00:00:00 2001
From: Jarsen <695552027@qq.com>
Date: Sat, 1 Apr 2023 09:51:28 +0800
Subject: [PATCH 34/65] fix: update pnpm lock

---
 pnpm-lock.yaml | 39 ++++++++++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 9 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c9f2b99041..aea4887604 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -999,7 +999,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.20.7
-      '@babel/types': 7.21.3
+      '@babel/types': 7.21.0
 
   /@babel/helper-hoist-variables/7.18.6:
     resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==}
@@ -1011,7 +1011,7 @@ packages:
     resolution: {integrity: sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.21.3
+      '@babel/types': 7.21.0
 
   /@babel/helper-module-imports/7.18.6:
     resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
@@ -1038,7 +1038,7 @@ packages:
     resolution: {integrity: sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.21.3
+      '@babel/types': 7.21.0
 
   /@babel/helper-plugin-utils/7.20.2:
     resolution: {integrity: sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==}
@@ -1072,8 +1072,8 @@ packages:
       '@babel/helper-member-expression-to-functions': 7.21.0
       '@babel/helper-optimise-call-expression': 7.18.6
       '@babel/template': 7.20.7
-      '@babel/traverse': 7.21.3
-      '@babel/types': 7.21.3
+      '@babel/traverse': 7.21.0
+      '@babel/types': 7.21.0
     transitivePeerDependencies:
       - supports-color
 
@@ -1093,7 +1093,7 @@ packages:
     resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.21.3
+      '@babel/types': 7.21.0
 
   /@babel/helper-string-parser/7.19.4:
     resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
@@ -1161,7 +1161,7 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.21.3
+      '@babel/types': 7.21.0
 
   /@babel/parser/7.21.3:
     resolution: {integrity: sha512-lobG0d7aOfQRXh8AyklEAgZGvA4FShxo6xQbUrrT/cNBPUdIDojlokwJsQyCC/eKia7ifqM0yP+2DRZ4WKw2RQ==}
@@ -2122,13 +2122,30 @@ packages:
       '@babel/helper-hoist-variables': 7.18.6
       '@babel/helper-split-export-declaration': 7.18.6
       '@babel/parser': 7.21.1
-      '@babel/types': 7.21.3
+      '@babel/types': 7.21.0
       debug: 4.3.4
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
     dev: false
 
+  /@babel/traverse/7.21.0:
+    resolution: {integrity: sha512-Xdt2P1H4LKTO8ApPfnO1KmzYMFpp7D/EinoXzLYN/cHcBNrVCAkAtGUcXnHXrl/VGktureU6fkQrHSBE2URfoA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/generator': 7.21.3
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-function-name': 7.21.0
+      '@babel/helper-hoist-variables': 7.18.6
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/parser': 7.21.3
+      '@babel/types': 7.21.3
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+
   /@babel/traverse/7.21.3:
     resolution: {integrity: sha512-XLyopNeaTancVitYZe2MlUEvgKb6YVVPXzofHgqHijCImG33b/uTurMS488ht/Hbsb2XK3U2BnSTxKVNGV3nGQ==}
     engines: {node: '>=6.9.0'}
@@ -7459,7 +7476,7 @@ packages:
   /@types/fs-extra/9.0.13:
     resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}
     dependencies:
-      '@types/node': 18.14.6
+      '@types/node': 18.13.0
     dev: true
 
   /@types/html-minifier-terser/5.1.2:
@@ -7581,6 +7598,10 @@ packages:
     resolution: {integrity: sha512-ZOzvDRWp8dCVBmgnkIqYCArgdFOO9YzocZp8Ra25N/RStKiWvMOXHMz+GjSeVNe5TstaTmTWPucGJkDw0XXJWA==}
     dev: true
 
+  /@types/node/18.13.0:
+    resolution: {integrity: sha512-gC3TazRzGoOnoKAhUx+Q0t8S9Tzs74z7m0ipwGpSqQrleP14hKxP4/JUeEQcD3W1/aIpnWl8pHowI7WokuZpXg==}
+    dev: true
+
   /@types/node/18.14.6:
     resolution: {integrity: sha512-93+VvleD3mXwlLI/xASjw0FzKcwzl3OdTCzm1LaRfqgS21gfFtK3zDXM5Op9TeeMsJVOaJ2VRDpT9q4Y3d0AvA==}
 

From b383bcf74111cda309458b5f493feec03eb900a6 Mon Sep 17 00:00:00 2001
From: Jarsen <695552027@qq.com>
Date: Sat, 1 Apr 2023 10:02:15 +0800
Subject: [PATCH 35/65] fix: infinite scroll on higher screen

---
 composables/useListInfiniteScroll.ts | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/composables/useListInfiniteScroll.ts b/composables/useListInfiniteScroll.ts
index daa808d717..144a7c9955 100644
--- a/composables/useListInfiniteScroll.ts
+++ b/composables/useListInfiniteScroll.ts
@@ -51,16 +51,6 @@ export default function ({
     { distance: 0 }
   )
 
-  useInfiniteScroll(
-    containerRef,
-    () => {
-      if (canLoadNextPage.value) {
-        prefetchNextPage()
-      }
-    },
-    { distance: 2000 }
-  )
-
   const scrollContainerId = ref(
     defaultScrollContainerId ?? INFINITE_SCROLL_CONTAINER_ID
   )

From 5dda90c63566be7cc2880771390d9fc4094c5c58 Mon Sep 17 00:00:00 2001
From: Jarsen <695552027@qq.com>
Date: Sat, 1 Apr 2023 10:09:37 +0800
Subject: [PATCH 36/65] fix: prefetch more page

---
 composables/useListInfiniteScroll.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/composables/useListInfiniteScroll.ts b/composables/useListInfiniteScroll.ts
index 144a7c9955..7db1db8c78 100644
--- a/composables/useListInfiniteScroll.ts
+++ b/composables/useListInfiniteScroll.ts
@@ -157,7 +157,7 @@ export default function ({
 
   const prefetchNextPage = async () => {
     updateCurrentPage()
-    if (endPage.value - currentPage.value <= 3 && canLoadNextPage.value) {
+    if (endPage.value - currentPage.value <= 4 && canLoadNextPage.value) {
       await fetchNextPage()
     }
   }

From eb18221fc0c2ee7093be27833acee484cc4c47ce Mon Sep 17 00:00:00 2001
From: Jarsen <695552027@qq.com>
Date: Sat, 1 Apr 2023 20:21:00 +0800
Subject: [PATCH 37/65] fix: infinite scroll with incorrect item width

---
 components/items/ItemsGrid/ItemsGrid.vue | 2 +-
 composables/useListInfiniteScroll.ts     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/items/ItemsGrid/ItemsGrid.vue b/components/items/ItemsGrid/ItemsGrid.vue
index 9a1e84379e..97569d137a 100644
--- a/components/items/ItemsGrid/ItemsGrid.vue
+++ b/components/items/ItemsGrid/ItemsGrid.vue
@@ -13,7 +13,7 @@
       v-if="startPage > 1 && !isLoading && total > 0"
       @click="reachTopHandler" />
 
-    <DynamicGrid v-slot="slotProps" :class="scrollContainerId" class="mt-5">
+    <DynamicGrid :id="scrollContainerId" v-slot="slotProps" class="mt-5">
       <div
         v-for="(nft, index) in nfts"
         :key="`${nft.id}=${index}`"
diff --git a/composables/useListInfiniteScroll.ts b/composables/useListInfiniteScroll.ts
index 7db1db8c78..d11b71212e 100644
--- a/composables/useListInfiniteScroll.ts
+++ b/composables/useListInfiniteScroll.ts
@@ -86,7 +86,7 @@ export default function ({
       if (scrollItem && container) {
         scrollItemHeight.value = scrollItem.clientHeight
         itemsPerRow.value = Math.max(
-          Math.ceil(container.clientWidth / scrollItem.clientWidth),
+          Math.floor(container.clientWidth / scrollItem.clientWidth),
           1
         )
         scrollItemSizeInit.value = true
@@ -157,7 +157,7 @@ export default function ({
 
   const prefetchNextPage = async () => {
     updateCurrentPage()
-    if (endPage.value - currentPage.value <= 4 && canLoadNextPage.value) {
+    if (endPage.value - currentPage.value <= 3 && canLoadNextPage.value) {
       await fetchNextPage()
     }
   }

From 6110fba4d97965f74c4c2d7d12e65d9dd60273c7 Mon Sep 17 00:00:00 2001
From: Jarsen <695552027@qq.com>
Date: Sun, 2 Apr 2023 15:35:25 +0800
Subject: [PATCH 38/65] fix: remove lazy attr

---
 libs/ui/src/components/MediaItem/type/ImageMedia.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/libs/ui/src/components/MediaItem/type/ImageMedia.vue b/libs/ui/src/components/MediaItem/type/ImageMedia.vue
index ecf4fabdbc..5e6f599284 100644
--- a/libs/ui/src/components/MediaItem/type/ImageMedia.vue
+++ b/libs/ui/src/components/MediaItem/type/ImageMedia.vue
@@ -7,7 +7,6 @@
     }">
     <img
       :src="src"
-      loading="lazy"
       class="is-block image-media__image"
       :alt="alt"
       data-cy="type-image"

From a0f04325747e57e3eb4617d199863b58a8a238bd Mon Sep 17 00:00:00 2001
From: Jarsen <695552027@qq.com>
Date: Mon, 3 Apr 2023 10:21:17 +0800
Subject: [PATCH 39/65] fix: remove default value

---
 composables/useListInfiniteScroll.ts | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/composables/useListInfiniteScroll.ts b/composables/useListInfiniteScroll.ts
index d11b71212e..83f6afe33f 100644
--- a/composables/useListInfiniteScroll.ts
+++ b/composables/useListInfiniteScroll.ts
@@ -41,15 +41,11 @@ export default function ({
 
   const containerRef = ref<Window>(window)
 
-  useInfiniteScroll(
-    containerRef,
-    () => {
-      if (canLoadNextPage.value) {
-        reachBottomHandler()
-      }
-    },
-    { distance: 0 }
-  )
+  useInfiniteScroll(containerRef, () => {
+    if (canLoadNextPage.value) {
+      reachBottomHandler()
+    }
+  })
 
   const scrollContainerId = ref(
     defaultScrollContainerId ?? INFINITE_SCROLL_CONTAINER_ID

From a4c21a2e16d9f731bb5ef86b709a0ed875f0b5b4 Mon Sep 17 00:00:00 2001
From: Viki Val <viktorko99@gmail.com>
Date: Sun, 2 Apr 2023 22:30:19 +0200
Subject: [PATCH 40/65] Update
 libs/ui/src/components/MediaItem/type/ImageMedia.vue

---
 libs/ui/src/components/MediaItem/type/ImageMedia.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/ui/src/components/MediaItem/type/ImageMedia.vue b/libs/ui/src/components/MediaItem/type/ImageMedia.vue
index 5e6f599284..f87322b549 100644
--- a/libs/ui/src/components/MediaItem/type/ImageMedia.vue
+++ b/libs/ui/src/components/MediaItem/type/ImageMedia.vue
@@ -30,7 +30,7 @@ const placeholder = computed(() => {
 const onError = (e: Event) => {
   const target = e.target as HTMLImageElement
   if (target) {
-    $consola.log('image load error', e)
+    $consola.log('[KODADOT::IMAGE] unable to load', e)
     target.src = placeholder.value
   }
 }

From 6a6cdc9acef061ca831f9942b3f687599964eba0 Mon Sep 17 00:00:00 2001
From: Jarsen <695552027@qq.com>
Date: Mon, 3 Apr 2023 23:21:15 +0800
Subject: [PATCH 41/65] fix: dark mode fallback iamge

---
 components/items/ItemsGrid/ItemsGridImage.vue        |  2 ++
 libs/ui/src/components/MediaItem/MediaItem.vue       |  5 +++++
 libs/ui/src/components/MediaItem/type/ImageMedia.vue | 12 +++++++-----
 libs/ui/src/components/NeoNftCard/NeoNftCard.vue     |  2 ++
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/components/items/ItemsGrid/ItemsGridImage.vue b/components/items/ItemsGrid/ItemsGridImage.vue
index 25685bd68b..eacc9a895c 100644
--- a/components/items/ItemsGrid/ItemsGridImage.vue
+++ b/components/items/ItemsGrid/ItemsGridImage.vue
@@ -2,6 +2,7 @@
   <NeoNftCard
     v-if="nft"
     :nft="nft"
+    :is-dark-mode="isDarkMode"
     :prefix="urlPrefix"
     :show-price="Number(nft?.price) > 0"
     :variant="variant" />
@@ -14,6 +15,7 @@ import type { NftCardVariant } from '@kodadot1/brick'
 import type { NFTWithMetadata } from '@/composables/useNft'
 
 const { urlPrefix } = usePrefix()
+const { isDarkMode } = useTheme()
 
 const props = defineProps<{
   nft: NFTWithMetadata
diff --git a/libs/ui/src/components/MediaItem/MediaItem.vue b/libs/ui/src/components/MediaItem/MediaItem.vue
index ab06c4ed74..934e4a47c5 100644
--- a/libs/ui/src/components/MediaItem/MediaItem.vue
+++ b/libs/ui/src/components/MediaItem/MediaItem.vue
@@ -5,6 +5,7 @@
       :src="properSrc"
       :animation-src="animationSrc"
       :alt="title"
+      :is-dark-mode="isDarkMode"
       :original="original"
       :is-detail="isDetail" />
   </div>
@@ -47,6 +48,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isDarkMode: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
diff --git a/libs/ui/src/components/MediaItem/type/ImageMedia.vue b/libs/ui/src/components/MediaItem/type/ImageMedia.vue
index f87322b549..66d757d702 100644
--- a/libs/ui/src/components/MediaItem/type/ImageMedia.vue
+++ b/libs/ui/src/components/MediaItem/type/ImageMedia.vue
@@ -15,22 +15,24 @@
 </template>
 
 <script lang="ts" setup>
-defineProps<{
+import consola from 'consola'
+
+const props = defineProps<{
   src?: string
   alt?: string
   original: boolean
   isDetail?: boolean
+  isDarkMode?: boolean
 }>()
-const { $consola } = useNuxtApp()
-const { isDarkMode } = useTheme()
+
 const placeholder = computed(() => {
-  return isDarkMode.value ? '/placeholder.webp' : '/placeholder-white.webp'
+  return props.isDarkMode ? '/placeholder.webp' : '/placeholder-white.webp'
 })
 
 const onError = (e: Event) => {
   const target = e.target as HTMLImageElement
   if (target) {
-    $consola.log('[KODADOT::IMAGE] unable to load', e)
+    consola.log('[KODADOT::IMAGE] unable to load', e)
     target.src = placeholder.value
   }
 }
diff --git a/libs/ui/src/components/NeoNftCard/NeoNftCard.vue b/libs/ui/src/components/NeoNftCard/NeoNftCard.vue
index 745ad4c889..bb80ce0f62 100644
--- a/libs/ui/src/components/NeoNftCard/NeoNftCard.vue
+++ b/libs/ui/src/components/NeoNftCard/NeoNftCard.vue
@@ -7,6 +7,7 @@
         :src="nft.image"
         :animation-src="nft.animationUrl"
         :mime-type="nft.mimeType"
+        :is-dark-mode="isDarkMode"
         :title="nft?.name" />
     </nuxt-link>
     <div
@@ -70,6 +71,7 @@ withDefaults(
     showPrice: boolean
     collectionPopoverShowDelay?: number
     variant?: NftCardVariant
+    isDarkMode?: boolean
   }>(),
   {
     collectionPopoverShowDelay: 500,

From c89d5025e037fb85ec840139ec9eadfef89278ae Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 3 Apr 2023 18:58:40 +0000
Subject: [PATCH 42/65] [skip netlify] Update Node.js to ^v16.20.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f3b96fba72..5a397354e4 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
   "engines": {
     "npm": "please-use-pnpm",
     "pnpm": "7",
-    "node": "^v16.19.1"
+    "node": "^v16.20.0"
   },
   "prettier": {
     "semi": false,

From a845f808f39fe6e1a6da900b4db13d1cf65bf298 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Tue, 4 Apr 2023 14:49:40 +0800
Subject: [PATCH 43/65] feat(wip): update event type

---
 .../common/NotificationBox/NotificationBoxModal.vue | 13 +++++--------
 .../common/NotificationBox/useNotification.ts       | 11 +++++++++++
 queries/subsquid/general/eventListByAccount.graphql |  8 ++++++--
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/components/common/NotificationBox/NotificationBoxModal.vue b/components/common/NotificationBox/NotificationBoxModal.vue
index 2f228bddf1..976a6c3438 100644
--- a/components/common/NotificationBox/NotificationBoxModal.vue
+++ b/components/common/NotificationBox/NotificationBoxModal.vue
@@ -104,25 +104,22 @@ import { Event, FilterOption } from './types'
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
 import NeoTag from '@/components/shared/gallery/NeoTag.vue'
 
-import { Interaction } from '@kodadot1/minimark'
 import NotificationItem from './NotificationItem.vue'
-import { useNotification } from './useNotification'
+import { Interaction, useNotification } from './useNotification'
 
 const { $i18n, $store } = useNuxtApp()
 
 const eventTypes = ref<FilterOption[]>([
   {
-    id: Interaction.BUY,
-    name: $i18n.t('filters.buy'),
+    id: Interaction.SALE,
+    name: $i18n.t('filters.sale'),
   },
   {
-    // TODO
-    id: 'Offer',
+    id: Interaction.OFFER,
     name: $i18n.t('filters.offer'),
   },
   {
-    // TODO
-    id: 'Accepted Offer',
+    id: Interaction.ACCEPTED_OFFER,
     name: $i18n.t('filters.acceptedOffer'),
   },
 ])
diff --git a/components/common/NotificationBox/useNotification.ts b/components/common/NotificationBox/useNotification.ts
index fc3897b2cf..7c6de70005 100644
--- a/components/common/NotificationBox/useNotification.ts
+++ b/components/common/NotificationBox/useNotification.ts
@@ -1,5 +1,11 @@
 import { Event, FilterOption } from './types'
 
+export const Interaction = {
+  SALE: 'SALE',
+  OFFER: 'OFFER',
+  ACCEPTED_OFFER: 'ACCEPTED_OFFER',
+}
+
 export const useNotification = (account: string) => {
   const collections = ref<FilterOption[]>([])
   const events = ref<Event[]>([])
@@ -15,6 +21,11 @@ export const useNotification = (account: string) => {
     queryName: 'eventListByAccount',
     variables: {
       account,
+      interaction: [
+        Interaction.SALE,
+        Interaction.OFFER,
+        Interaction.ACCEPTED_OFFER,
+      ],
     },
   })
 
diff --git a/queries/subsquid/general/eventListByAccount.graphql b/queries/subsquid/general/eventListByAccount.graphql
index ce54775466..24b2b70f9d 100644
--- a/queries/subsquid/general/eventListByAccount.graphql
+++ b/queries/subsquid/general/eventListByAccount.graphql
@@ -1,5 +1,9 @@
-query eventListByAccount($account: String!) {
-  events(where: { caller_eq: $account }, orderBy: timestamp_DESC, limit: 30) {
+query eventListByAccount($account: String!, $interaction: [Interaction!]) {
+  events(
+    where: { caller_eq: $account, interaction_in: $interaction }
+    orderBy: timestamp_DESC
+    limit: 30
+  ) {
     id
     interaction
     timestamp

From d48d4ab41f7648a4e63cf128f8af5f7cb57099db Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Tue, 4 Apr 2023 14:55:47 +0800
Subject: [PATCH 44/65] fix: deepsource/codeclimate issue

---
 components/common/NotificationBox/useNotification.ts | 8 ++------
 utils/format/time.ts                                 | 2 +-
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/components/common/NotificationBox/useNotification.ts b/components/common/NotificationBox/useNotification.ts
index 7c6de70005..01d192121d 100644
--- a/components/common/NotificationBox/useNotification.ts
+++ b/components/common/NotificationBox/useNotification.ts
@@ -30,15 +30,11 @@ export const useNotification = (account: string) => {
   })
 
   watch(collectionData, (result) => {
-    if (result.collectionEntities) {
-      collections.value = result.collectionEntities
-    }
+    collections.value = result.collectionEntities ?? []
   })
 
   watch(eventsData, (result) => {
-    if (result.events) {
-      events.value = result.events
-    }
+    events.value = result.events ?? []
   })
 
   return {
diff --git a/utils/format/time.ts b/utils/format/time.ts
index 933acc6ae5..69f69da386 100644
--- a/utils/format/time.ts
+++ b/utils/format/time.ts
@@ -36,5 +36,5 @@ export const endDate = (seconds: number): string => {
 }
 
 export const formatToNow = (date: Date, addSuffix = true): string => {
-  return formatDistanceToNowStrict(new Date(date), { addSuffix: addSuffix })
+  return formatDistanceToNowStrict(new Date(date), { addSuffix })
 }

From ad0cf22eb979317b9e0920414b666d6600b441a7 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Tue, 4 Apr 2023 15:32:50 +0800
Subject: [PATCH 45/65] refactor: adjust locale key order

---
 locales/en.json | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/locales/en.json b/locales/en.json
index 0c5a8e9dd7..834c0dc2ee 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1296,6 +1296,13 @@
     "mint": "Mint",
     "transfer": "Transfer"
   },
+  "redirect": {
+    "title": "Leaving Kodadot",
+    "leavingTips": "You are going outside KodaDot to external website",
+    "safetyTips": "Be sure that it's safe!",
+    "continue": "Continue",
+    "stay": "Stay"
+  },
   "notification": {
     "notifications": "Notifications",
     "filters": "Filters",
@@ -1304,12 +1311,5 @@
     "byCollection": "By collection",
     "byEvent": "By event",
     "emptyTip": "Don't wait for notifications, <br/>make your own buzz with your art."
-  },
-  "redirect": {
-    "title": "Leaving Kodadot",
-    "leavingTips": "You are going outside KodaDot to external website",
-    "safetyTips": "Be sure that it's safe!",
-    "continue": "Continue",
-    "stay": "Stay"
   }
 }

From 21109ebcddbd541c0bae75b8fee12892c6605e29 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Thu, 6 Apr 2023 15:45:50 +0800
Subject: [PATCH 46/65] feat: fix type

---
 components/common/NotificationBox/useNotification.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/common/NotificationBox/useNotification.ts b/components/common/NotificationBox/useNotification.ts
index 01d192121d..d2313c8056 100644
--- a/components/common/NotificationBox/useNotification.ts
+++ b/components/common/NotificationBox/useNotification.ts
@@ -1,7 +1,8 @@
 import { Event, FilterOption } from './types'
+import { Interaction as _Interaction } from '@kodadot1/minimark'
 
 export const Interaction = {
-  SALE: 'SALE',
+  SALE: _Interaction.BUY,
   OFFER: 'OFFER',
   ACCEPTED_OFFER: 'ACCEPTED_OFFER',
 }

From 987c061907fb06aadabcac915888d8d6bc3fbb21 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Thu, 6 Apr 2023 22:47:14 +0800
Subject: [PATCH 47/65] refactor: notification graphql query

---
 .../NotificationBox/NotificationBoxModal.vue  | 49 +++++++---------
 .../NotificationBox/NotificationItem.vue      |  3 +-
 .../common/NotificationBox/useNotification.ts | 40 +++++++++----
 .../general/eventListByAccount.graphql        | 25 --------
 .../general/notificationsByAccount.graphql    | 57 +++++++++++++++++++
 5 files changed, 109 insertions(+), 65 deletions(-)
 delete mode 100644 queries/subsquid/general/eventListByAccount.graphql
 create mode 100644 queries/subsquid/general/notificationsByAccount.graphql

diff --git a/components/common/NotificationBox/NotificationBoxModal.vue b/components/common/NotificationBox/NotificationBoxModal.vue
index 976a6c3438..d82bd250d8 100644
--- a/components/common/NotificationBox/NotificationBoxModal.vue
+++ b/components/common/NotificationBox/NotificationBoxModal.vue
@@ -56,14 +56,14 @@
             }}</span>
             <div class="is-flex is-flex-wrap-wrap filter-list">
               <div
-                v-for="(item, index) in eventTypes"
-                :key="`${item}-${index}`"
+                v-for="event in eventTypes"
+                :key="event"
                 class="filter-item button-rounded px-3 py-1 no-wrap"
                 :class="{
-                  activated: eventFilter.some((x) => x.id === item.id),
+                  activated: eventFilter.includes(event),
                 }"
-                @click="toggleEventFilter(item)">
-                {{ item.name }}
+                @click="toggleEventFilter(event)">
+                {{ getInteractionName(event) }}
               </div>
             </div>
           </div>
@@ -78,10 +78,10 @@
             </NeoTag>
             <NeoTag
               v-for="event in eventFilter"
-              :key="event.id"
+              :key="event"
               class="no-wrap mb-1 mr-1"
               @close="toggleEventFilter(event)">
-              {{ event.name }}
+              {{ getInteractionName(event) }}
             </NeoTag>
           </div>
         </div>
@@ -105,23 +105,18 @@ import { NeoButton, NeoIcon } from '@kodadot1/brick'
 import NeoTag from '@/components/shared/gallery/NeoTag.vue'
 
 import NotificationItem from './NotificationItem.vue'
-import { Interaction, useNotification } from './useNotification'
+import {
+  Interaction,
+  getInteractionName,
+  useNotification,
+} from './useNotification'
 
-const { $i18n, $store } = useNuxtApp()
+const { $store } = useNuxtApp()
 
-const eventTypes = ref<FilterOption[]>([
-  {
-    id: Interaction.SALE,
-    name: $i18n.t('filters.sale'),
-  },
-  {
-    id: Interaction.OFFER,
-    name: $i18n.t('filters.offer'),
-  },
-  {
-    id: Interaction.ACCEPTED_OFFER,
-    name: $i18n.t('filters.acceptedOffer'),
-  },
+const eventTypes = ref<string[]>([
+  Interaction.SALE,
+  Interaction.OFFER,
+  Interaction.ACCEPTED_OFFER,
 ])
 
 const { collections, events: allEvents } = useNotification(
@@ -137,11 +132,9 @@ const toggleCollectionFilter = (target: FilterOption) => {
   }
 }
 
-const eventFilter = ref<FilterOption[]>([])
-const toggleEventFilter = (target: FilterOption) => {
-  const index = eventFilter.value.findIndex(
-    (x: FilterOption) => x.id === target.id
-  )
+const eventFilter = ref<string[]>([])
+const toggleEventFilter = (target) => {
+  const index = eventFilter.value.findIndex((x) => x === target)
   if (index === -1) {
     eventFilter.value.push(target)
   } else {
@@ -162,7 +155,7 @@ const doSearch = () => {
       (!collectionFilter.value ||
         collectionFilter.value.id === item.nft.collection.id) &&
       (eventFilter.value.length === 0 ||
-        eventFilter.value.some((x) => x.id === item.interaction))
+        eventFilter.value.some((x) => x === item.interaction))
   )
 }
 
diff --git a/components/common/NotificationBox/NotificationItem.vue b/components/common/NotificationBox/NotificationItem.vue
index 2ac88f501a..23feb6a857 100644
--- a/components/common/NotificationBox/NotificationItem.vue
+++ b/components/common/NotificationBox/NotificationItem.vue
@@ -30,7 +30,7 @@
             <div
               class="event-type mr-4 border is-size-7 is-justify-content-center px-4 py-1 is-flex is-align-items-center"
               :class="getInteractionColor(event.interaction)">
-              {{ event.interaction }}
+              {{ getInteractionName(event.interaction) }}
             </div>
           </div>
         </div>
@@ -44,6 +44,7 @@
 
 <script setup lang="ts">
 import { Event } from './types'
+import { getInteractionName } from './useNotification'
 import { InteractionWithNFT } from '@/composables/collectionActivity/types'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import { formatToNow } from '@/utils/format/time'
diff --git a/components/common/NotificationBox/useNotification.ts b/components/common/NotificationBox/useNotification.ts
index d2313c8056..13ed72720d 100644
--- a/components/common/NotificationBox/useNotification.ts
+++ b/components/common/NotificationBox/useNotification.ts
@@ -1,10 +1,22 @@
 import { Event, FilterOption } from './types'
 import { Interaction as _Interaction } from '@kodadot1/minimark'
+import { sortedEventByDate } from '@/utils/sorting'
 
 export const Interaction = {
   SALE: _Interaction.BUY,
-  OFFER: 'OFFER',
-  ACCEPTED_OFFER: 'ACCEPTED_OFFER',
+  OFFER: 'CREATE',
+  ACCEPTED_OFFER: 'ACCEPT',
+}
+
+export const getInteractionName = (key: string) => {
+  const { $i18n } = useNuxtApp()
+  const nampMap = {
+    [Interaction.SALE]: $i18n.t('filters.sale'),
+    [Interaction.OFFER]: $i18n.t('filters.offer'),
+    [Interaction.ACCEPTED_OFFER]: $i18n.t('filters.acceptedOffer'),
+  }
+
+  return nampMap[key]
 }
 
 export const useNotification = (account: string) => {
@@ -18,15 +30,11 @@ export const useNotification = (account: string) => {
       account,
     },
   })
-  const { data: eventsData } = useGraphql({
-    queryName: 'eventListByAccount',
+
+  const { data: eventData } = useGraphql({
+    queryName: 'notificationsByAccount',
     variables: {
       account,
-      interaction: [
-        Interaction.SALE,
-        Interaction.OFFER,
-        Interaction.ACCEPTED_OFFER,
-      ],
     },
   })
 
@@ -34,8 +42,18 @@ export const useNotification = (account: string) => {
     collections.value = result.collectionEntities ?? []
   })
 
-  watch(eventsData, (result) => {
-    events.value = result.events ?? []
+  watch(eventData, (result) => {
+    const offerEvents = result.offerEvents.map((event) => ({
+      ...event,
+      nft: {
+        ...event.offer.nft,
+        price: event.offer.price,
+      },
+    }))
+    events.value = sortedEventByDate(
+      [...result.events, ...offerEvents],
+      'ASC'
+    ) as unknown as Event[]
   })
 
   return {
diff --git a/queries/subsquid/general/eventListByAccount.graphql b/queries/subsquid/general/eventListByAccount.graphql
deleted file mode 100644
index 24b2b70f9d..0000000000
--- a/queries/subsquid/general/eventListByAccount.graphql
+++ /dev/null
@@ -1,25 +0,0 @@
-query eventListByAccount($account: String!, $interaction: [Interaction!]) {
-  events(
-    where: { caller_eq: $account, interaction_in: $interaction }
-    orderBy: timestamp_DESC
-    limit: 30
-  ) {
-    id
-    interaction
-    timestamp
-    caller
-    nft {
-      name
-      id
-      metadata
-      price
-      meta {
-        id
-        image
-      }
-      collection {
-        id
-      }
-    }
-  }
-}
diff --git a/queries/subsquid/general/notificationsByAccount.graphql b/queries/subsquid/general/notificationsByAccount.graphql
new file mode 100644
index 0000000000..40d2b6eafe
--- /dev/null
+++ b/queries/subsquid/general/notificationsByAccount.graphql
@@ -0,0 +1,57 @@
+query notificationsByAccount($account: String!, $limit: Int = 30) {
+  # get sale event
+  events(
+    limit: $limit
+    where: { currentOwner_eq: $account, interaction_eq: BUY }
+    orderBy: timestamp_DESC
+  ) {
+    id
+    interaction
+    timestamp
+    currentOwner
+    nft {
+      name
+      id
+      metadata
+      price
+      meta {
+        id
+        image
+      }
+      collection {
+        id
+      }
+    }
+  }
+  # get offer and offer_accept events
+  offerEvents(
+    limit: $limit
+    where: {
+      currentOwner_eq: $account
+      AND: { interaction_eq: CREATE, AND: { offer: { status_eq: ACTIVE } } }
+      OR: { interaction_eq: ACCEPT, AND: { offer: { status_eq: ACCEPTED } } }
+    }
+    orderBy: timestamp_DESC
+  ) {
+    id
+    interaction
+    timestamp
+    currentOwner
+    offer {
+      price
+      nft {
+        name
+        id
+        metadata
+        price
+        meta {
+          id
+          image
+        }
+        collection {
+          id
+        }
+      }
+    }
+  }
+}

From 3d7816e3f758562162b9570616494982915f7cea Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Thu, 6 Apr 2023 23:23:31 +0800
Subject: [PATCH 48/65] feat: add url watch

---
 .../NotificationBox/NotificationBoxModal.vue       | 14 +++++++++++---
 .../common/NotificationBox/useNotification.ts      |  2 --
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/components/common/NotificationBox/NotificationBoxModal.vue b/components/common/NotificationBox/NotificationBoxModal.vue
index d82bd250d8..ec70586240 100644
--- a/components/common/NotificationBox/NotificationBoxModal.vue
+++ b/components/common/NotificationBox/NotificationBoxModal.vue
@@ -119,9 +119,8 @@ const eventTypes = ref<string[]>([
   Interaction.ACCEPTED_OFFER,
 ])
 
-const { collections, events: allEvents } = useNotification(
-  $store.getters.getAuthAddress
-)
+const collections = ref<FilterOption[]>([])
+const allEvents = ref<Event[]>([])
 
 const collectionFilter = ref<FilterOption | null>(null)
 const toggleCollectionFilter = (target: FilterOption) => {
@@ -159,6 +158,13 @@ const doSearch = () => {
   )
 }
 
+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,
 })
@@ -166,6 +172,8 @@ watch(allEvents, doSearch, {
 watch(collectionFilter, doSearch, { deep: true })
 watch(eventFilter, doSearch, { deep: true })
 
+const { urlPrefix } = usePrefix()
+watch(urlPrefix, getNotifications, { immediate: true })
 const emit = defineEmits(['close'])
 </script>
 
diff --git a/components/common/NotificationBox/useNotification.ts b/components/common/NotificationBox/useNotification.ts
index 13ed72720d..a669a607bb 100644
--- a/components/common/NotificationBox/useNotification.ts
+++ b/components/common/NotificationBox/useNotification.ts
@@ -22,7 +22,6 @@ export const getInteractionName = (key: string) => {
 export const useNotification = (account: string) => {
   const collections = ref<FilterOption[]>([])
   const events = ref<Event[]>([])
-  const nfts = ref([])
 
   const { data: collectionData } = useGraphql({
     queryName: 'collectionByAccount',
@@ -59,6 +58,5 @@ export const useNotification = (account: string) => {
   return {
     collections,
     events,
-    nfts,
   }
 }

From a8f701e6d5783174ff7354b20c02b24e4cc8245d Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Thu, 6 Apr 2023 23:31:33 +0800
Subject: [PATCH 49/65] fix(deepsource): remove v-html

---
 components/common/NotificationBox/NotificationBoxModal.vue | 3 ++-
 locales/en.json                                            | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/common/NotificationBox/NotificationBoxModal.vue b/components/common/NotificationBox/NotificationBoxModal.vue
index ec70586240..1d9ea59f62 100644
--- a/components/common/NotificationBox/NotificationBoxModal.vue
+++ b/components/common/NotificationBox/NotificationBoxModal.vue
@@ -87,7 +87,8 @@
         </div>
       </div>
       <div v-if="displayedEvents.length === 0" class="empty-tip">
-        <p v-html="$t('notification.emptyTip')"></p>
+        <p>{{ $t('notification.emptyTipLine1') }}</p>
+        <p>{{ $t('notification.emptyTipLine2') }}</p>
       </div>
       <div v-else class="is-flex is-flex-direction-column">
         <NotificationItem
diff --git a/locales/en.json b/locales/en.json
index d40e79e3c5..0eb1f4cefc 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1310,6 +1310,7 @@
     "done": "Done",
     "byCollection": "By collection",
     "byEvent": "By event",
-    "emptyTip": "Don't wait for notifications, <br/>make your own buzz with your art."
+    "emptyTipLine1": "Don't wait for notifications,",
+    "emptyTipLine2": "make your own buzz with your art."
   }
 }

From 1c1399ff04ee79ef8887b8fd829eafdbd3149796 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Thu, 6 Apr 2023 23:36:59 +0800
Subject: [PATCH 50/65] Merge commit '6b2be2e4c4da60f4278f3b9ee5f02e62a6c0dcbc'

---
 libs/static/src/chains.ts    | 19 +++++++++++--------
 libs/static/src/endpoints.ts |  8 ++++----
 libs/static/src/indexers.ts  |  4 ++--
 libs/static/src/names.ts     |  4 ++--
 libs/static/src/services.ts  |  8 ++++----
 libs/static/src/types.ts     |  4 ++--
 middleware/prefix.ts         |  2 +-
 utils/chain.ts               |  6 ++++--
 utils/config/chain.config.ts | 18 ++++++++----------
 9 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/libs/static/src/chains.ts b/libs/static/src/chains.ts
index 9c4cc761e2..3e6c7fa2f8 100644
--- a/libs/static/src/chains.ts
+++ b/libs/static/src/chains.ts
@@ -29,8 +29,8 @@ const DEFAULT_CHAIN_PROPERTIES: ChainProperties = toChainProperty(
 )
 
 export const CHAINS: Config<ChainProperties> = {
+  rmrk: DEFAULT_CHAIN_PROPERTIES,
   ksm: DEFAULT_CHAIN_PROPERTIES,
-  rmrk2: DEFAULT_CHAIN_PROPERTIES,
   bsx: toChainProperty(10_041, 12, 'BSX', 'https://basilisk.subscan.io/'),
   snek: toChainProperty(
     10_041,
@@ -44,29 +44,32 @@ export const CHAINS: Config<ChainProperties> = {
 
 export const chainPrefixes: Prefix[] = [
   'bsx',
-  'ksm',
+  'rmrk',
   'snek',
   'movr',
   'glmr',
-  'rmrk2',
+  'ksm',
 ]
 
 export const chainInfo = {
   bsx: 'basilisk',
-  ksm: 'kusama',
+  rmrk: 'kusama',
   snek: 'snek',
   movr: 'moonriver',
   glmr: 'moonbeam',
-  rmrk2: 'rmrk',
+  ksm: 'rmrk',
 }
 
 export const chainList = (): Option[] => {
   return chainPrefixes.map((prefix) => ({
     info: chainInfo[prefix],
     text: NAMES[prefix],
-    value: prefix === 'ksm' ? 'rmrk' : prefix,
+    value: prefix === 'ksm' ? 'rmrk2' : prefix,
   }))
 }
 
-export const oldKsm = (prefix: BackwardPrefix): Prefix =>
-  prefix === 'rmrk' ? 'ksm' : prefix
+// TODO: our url prefix still rmrk2
+// e.g: https://kodadot.xyz/rmrk2/explore/items
+export const rmrk2ToKsm = (prefix: BackwardPrefix): Prefix => {
+  return prefix === 'rmrk2' ? 'ksm' : prefix
+}
diff --git a/libs/static/src/endpoints.ts b/libs/static/src/endpoints.ts
index a45333d5e6..d71b402d65 100644
--- a/libs/static/src/endpoints.ts
+++ b/libs/static/src/endpoints.ts
@@ -5,9 +5,9 @@ type WS_URL = `wss://${string}` | `ws://${string}`
 export const ENDPOINT_MAP: Config<WS_URL> = {
   bsx: 'wss://basilisk-rpc.dwellir.com',
   glmr: 'wss://public-rpc.pinknode.io/moonbeam',
-  ksm: 'wss://kusama-rpc.dwellir.com',
+  rmrk: 'wss://kusama-rpc.dwellir.com',
   movr: 'wss://wss.api.moonriver.moonbeam.network',
-  rmrk2: 'wss://kusama-rpc.dwellir.com',
+  ksm: 'wss://kusama-rpc.dwellir.com',
   snek: 'wss://rococo-basilisk-rpc.hydration.dev',
 }
 
@@ -15,13 +15,13 @@ export const ENDPOINT_MAP: Config<WS_URL> = {
 export const ALTERNATIVE_ENDPOINT_MAP: Config<WS_URL[]> = {
   bsx: ['wss://basilisk-rpc.dwellir.com', 'wss://rpc.basilisk.cloud'],
   glmr: ['wss://public-rpc.pinknode.io/moonbeam'],
-  ksm: [
+  rmrk: [
     'wss://kusama-rpc.dwellir.com',
     'wss://kusama.elara.patract.io',
     'wss://kusama-rpc.polkadot.io',
   ],
   movr: ['wss://wss.api.moonriver.moonbeam.network'],
-  rmrk2: [
+  ksm: [
     'wss://kusama-rpc.dwellir.com',
     'wss://kusama.elara.patract.io',
     'wss://kusama-rpc.polkadot.io',
diff --git a/libs/static/src/indexers.ts b/libs/static/src/indexers.ts
index f86a6400e9..204d53bf7c 100644
--- a/libs/static/src/indexers.ts
+++ b/libs/static/src/indexers.ts
@@ -7,9 +7,9 @@ type SquidEndpoint =
 export const INDEXERS: Config<SquidEndpoint> = {
   bsx: 'https://squid.subsquid.io/snekk/graphql',
   glmr: 'https://squid.subsquid.io/click/v/002/graphql',
-  ksm: 'https://squid.subsquid.io/rubick/graphql',
+  rmrk: 'https://squid.subsquid.io/rubick/graphql',
   movr: 'https://squid.subsquid.io/antick/v/001-rc0/graphql',
-  rmrk2: 'https://squid.subsquid.io/marck/graphql',
+  ksm: 'https://squid.subsquid.io/marck/graphql',
   snek: 'https://squid.subsquid.io/snekk/v/004/graphql',
 }
 
diff --git a/libs/static/src/names.ts b/libs/static/src/names.ts
index 19a259817f..45b56015fa 100644
--- a/libs/static/src/names.ts
+++ b/libs/static/src/names.ts
@@ -3,8 +3,8 @@ import { Config } from './types'
 export const NAMES: Config<string> = {
   bsx: 'Basilisk',
   glmr: 'Moonbeam [Beta]',
-  ksm: 'Kusama',
+  rmrk: 'Kusama',
   movr: 'Moonriver [Beta]',
-  rmrk2: 'RMRK 2.0 [Beta]',
+  ksm: 'RMRK 2.0 [Beta]',
   snek: 'Snek [Rococo]',
 }
diff --git a/libs/static/src/services.ts b/libs/static/src/services.ts
index ac47b66621..2fd142f315 100644
--- a/libs/static/src/services.ts
+++ b/libs/static/src/services.ts
@@ -1,4 +1,4 @@
-import { oldKsm } from './chains'
+import { rmrk2ToKsm } from './chains'
 import type { BackwardPrefix, Prefix } from './types'
 
 export const SERVICES: Record<string, string> = {
@@ -11,8 +11,8 @@ export const SERVICES: Record<string, string> = {
 }
 
 export const EXPLORERS: Record<Prefix, string> = {
+  rmrk: 'https://kusama.subscan.io/account/',
   ksm: 'https://kusama.subscan.io/account/',
-  rmrk2: 'https://kusama.subscan.io/account/',
   bsx: 'https://basilisk.subscan.io/account/',
   snek: 'https://calamar.play.hydration.cloud/rococo%20basilisk/search?query=',
   movr: 'https://moonriver.subscan.io/account/',
@@ -20,9 +20,9 @@ export const EXPLORERS: Record<Prefix, string> = {
 }
 
 export const hasExplorer = (prefix: BackwardPrefix): boolean => {
-  return EXPLORERS[oldKsm(prefix)] !== undefined
+  return EXPLORERS[rmrk2ToKsm(prefix)] !== undefined
 }
 
 export const getExplorer = (prefix: BackwardPrefix, id: string) => {
-  return EXPLORERS[oldKsm(prefix)] + id
+  return EXPLORERS[rmrk2ToKsm(prefix)] + id
 }
diff --git a/libs/static/src/types.ts b/libs/static/src/types.ts
index 12ea0da13d..f1e9fbf402 100644
--- a/libs/static/src/types.ts
+++ b/libs/static/src/types.ts
@@ -1,8 +1,8 @@
-export type Prefix = 'bsx' | 'glmr' | 'ksm' | 'movr' | 'rmrk2' | 'snek'
+export type Prefix = 'bsx' | 'glmr' | 'rmrk' | 'movr' | 'ksm' | 'snek'
 // | 'statemine'
 // | 'westmint'
 
-export type BackwardPrefix = 'rmrk' & Prefix
+export type BackwardPrefix = 'rmrk2' & Prefix
 
 export type Squid = 'rubick' | 'snekk' | 'click' | 'antick' | 'marck'
 
diff --git a/middleware/prefix.ts b/middleware/prefix.ts
index a60b398ea6..62d34af088 100644
--- a/middleware/prefix.ts
+++ b/middleware/prefix.ts
@@ -2,7 +2,7 @@ import { chainPrefixes } from '@kodadot1/static'
 
 export default function ({ store, route }): void {
   const prefix = route.params.prefix || route.path.split('/')[1]
-  const chains = ['rmrk', ...chainPrefixes]
+  const chains = ['rmrk2', ...chainPrefixes]
   const isAnyChainPrefixInPath = chains.some((prefix) =>
     route.path.includes(prefix)
   )
diff --git a/utils/chain.ts b/utils/chain.ts
index 8fa32a7eea..79aac166b8 100644
--- a/utils/chain.ts
+++ b/utils/chain.ts
@@ -86,12 +86,14 @@ export const getChainNameByPrefix = (prefix: string) => {
   return prefix
 }
 
-export const isProduction = window.location.host === 'kodadot.xyz'
+export const isProduction =
+  window.location.host === 'kodadot.xyz' ||
+  window.location.host === 'beta.kodadot.xyz'
 
 export const availablePrefixes = (): Option[] => {
   const chains = chainList()
 
-  if (window.location.hostname === 'kodadot.xyz') {
+  if (isProduction) {
     return chains.filter(
       (chain) => !disableChainListOnProductionEnv.includes(String(chain.value))
     )
diff --git a/utils/config/chain.config.ts b/utils/config/chain.config.ts
index eb117243d8..96404570bc 100644
--- a/utils/config/chain.config.ts
+++ b/utils/config/chain.config.ts
@@ -1,26 +1,24 @@
-import { CHAINS } from '@kodadot1/static'
+import { CHAINS, rmrk2ToKsm } from '@kodadot1/static'
 import { AssetItem } from '@/components/bsx/Asset/types'
 import { ChainProperties } from '../api/Query'
-import { Prefix } from './types'
+
+import type { BackwardPrefix } from '@kodadot1/static'
 
 export const BLOCK_EXPLORER_WITH_QUERY = ['snek']
 
-export const chainPropListOf = (prefix: Prefix | string): ChainProperties => {
-  const oldPrefix = prefix === 'rmrk' ? 'ksm' : prefix
-  return CHAINS[oldPrefix]
+export const chainPropListOf = (prefix: BackwardPrefix): ChainProperties => {
+  return CHAINS[rmrk2ToKsm(prefix)]
 }
 
-export const ss58Of = (prefix: Prefix | string): number => {
+export const ss58Of = (prefix: BackwardPrefix): number => {
   return chainPropListOf(prefix).ss58Format
 }
 
-export const blockExplorerOf = (
-  prefix: Prefix | string
-): string | undefined => {
+export const blockExplorerOf = (prefix: BackwardPrefix): string | undefined => {
   return chainPropListOf(prefix).blockExplorer
 }
 
-export const chainAssetOf = (prefix: Prefix | string): AssetItem => {
+export const chainAssetOf = (prefix: BackwardPrefix): AssetItem => {
   const { tokenDecimals: decimals, tokenSymbol: symbol } =
     chainPropListOf(prefix)
   return {

From 75d9be560985168752b95867d7f5a9fe7ab7ae49 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Fri, 7 Apr 2023 13:54:23 +0800
Subject: [PATCH 51/65] fix(ui): update color

---
 .../common/NotificationBox/NotificationItem.vue    | 13 ++++++++-----
 .../common/NotificationBox/useNotification.ts      | 14 ++++++++++++--
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/components/common/NotificationBox/NotificationItem.vue b/components/common/NotificationBox/NotificationItem.vue
index 23feb6a857..04794afdf1 100644
--- a/components/common/NotificationBox/NotificationItem.vue
+++ b/components/common/NotificationBox/NotificationItem.vue
@@ -44,14 +44,11 @@
 
 <script setup lang="ts">
 import { Event } from './types'
-import { getInteractionName } from './useNotification'
+import { getInteractionColor, getInteractionName } from './useNotification'
 import { InteractionWithNFT } from '@/composables/collectionActivity/types'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import { formatToNow } from '@/utils/format/time'
-import {
-  getInteractionColor,
-  getNFTAvatar,
-} from '@/components/collection/activity/events/eventRow/common'
+import { getNFTAvatar } from '@/components/collection/activity/events/eventRow/common'
 const { urlPrefix } = usePrefix()
 const props = defineProps<{
   event: Event
@@ -80,6 +77,11 @@ const getAvatar = async () => {
       background-color: theme('k-accentlight2');
     }
   }
+  img.image-size {
+    height: 50px;
+    width: 50px;
+    object-fit: contain;
+  }
 }
 .notify-content {
   flex: 1;
@@ -95,5 +97,6 @@ const getAvatar = async () => {
 .event-type {
   line-height: 0.75rem;
   border-radius: 2rem;
+  white-space: nowrap;
 }
 </style>
diff --git a/components/common/NotificationBox/useNotification.ts b/components/common/NotificationBox/useNotification.ts
index a669a607bb..3a0ed8c50b 100644
--- a/components/common/NotificationBox/useNotification.ts
+++ b/components/common/NotificationBox/useNotification.ts
@@ -10,13 +10,23 @@ export const Interaction = {
 
 export const getInteractionName = (key: string) => {
   const { $i18n } = useNuxtApp()
-  const nampMap = {
+  const nameMap = {
     [Interaction.SALE]: $i18n.t('filters.sale'),
     [Interaction.OFFER]: $i18n.t('filters.offer'),
     [Interaction.ACCEPTED_OFFER]: $i18n.t('filters.acceptedOffer'),
   }
 
-  return nampMap[key]
+  return nameMap[key]
+}
+
+export const getInteractionColor = (key: string) => {
+  const colorMap = {
+    [Interaction.SALE]: 'k-pink',
+    [Interaction.OFFER]: 'k-greenaccent',
+    [Interaction.ACCEPTED_OFFER]: 'k-blueaccent',
+  }
+
+  return colorMap[key]
 }
 
 export const useNotification = (account: string) => {

From c1ae90bb3a65dc0fd4e234736e239a307bf36570 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Fri, 7 Apr 2023 15:07:35 +0800
Subject: [PATCH 52/65] fix: update when change network

---
 components/common/NotificationBox/NotificationBoxModal.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/common/NotificationBox/NotificationBoxModal.vue b/components/common/NotificationBox/NotificationBoxModal.vue
index 1d9ea59f62..59578baabd 100644
--- a/components/common/NotificationBox/NotificationBoxModal.vue
+++ b/components/common/NotificationBox/NotificationBoxModal.vue
@@ -173,8 +173,9 @@ watch(allEvents, doSearch, {
 watch(collectionFilter, doSearch, { deep: true })
 watch(eventFilter, doSearch, { deep: true })
 
-const { urlPrefix } = usePrefix()
-watch(urlPrefix, getNotifications, { immediate: true })
+watch(() => $store.getters.currentUrlPrefix, getNotifications, {
+  immediate: true,
+})
 const emit = defineEmits(['close'])
 </script>
 

From b6fc81cca9868b62e1f00a4cdee8221bbd1f0fc7 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Fri, 7 Apr 2023 15:34:04 +0800
Subject: [PATCH 53/65] refactor: use fragments

---
 .../NotificationBox/NotificationItem.vue      |  2 +-
 components/common/NotificationBox/types.ts    | 18 ++----------
 .../general/notificationsByAccount.graphql    | 29 +++++--------------
 3 files changed, 11 insertions(+), 38 deletions(-)

diff --git a/components/common/NotificationBox/NotificationItem.vue b/components/common/NotificationBox/NotificationItem.vue
index 04794afdf1..73ae3407ac 100644
--- a/components/common/NotificationBox/NotificationItem.vue
+++ b/components/common/NotificationBox/NotificationItem.vue
@@ -18,7 +18,7 @@
     <div class="notify-content ml-5 is-flex is-flex-direction-column">
       <div class="is-flex is-justify-content-space-between">
         <div class="nft-name mr-4 has-text-weight-bold is-ellipsis">
-          {{ event.nft.name }}
+          {{ event.nft.name || event.nft.id }}
         </div>
         <div class="nft-price is-ellipsis">
           <Money :value="event.nft.price" />
diff --git a/components/common/NotificationBox/types.ts b/components/common/NotificationBox/types.ts
index 1959963295..040d5b6462 100644
--- a/components/common/NotificationBox/types.ts
+++ b/components/common/NotificationBox/types.ts
@@ -1,26 +1,14 @@
+import type { CarouselNFT } from '@/components/base/types'
+
 export type FilterOption = {
   id: string
   name: string
 }
 
-interface NFT {
-  name: string
-  id: string
-  price: string
-  metadata: string
-  meta: {
-    id: string
-    image: string
-  }
-  collection: {
-    id: string
-  }
-}
-
 export type Event = {
   id: string
   interaction: string
   timestamp: string
   caller: string
-  nft: NFT
+  nft: CarouselNFT
 }
diff --git a/queries/subsquid/general/notificationsByAccount.graphql b/queries/subsquid/general/notificationsByAccount.graphql
index 40d2b6eafe..bf21f81887 100644
--- a/queries/subsquid/general/notificationsByAccount.graphql
+++ b/queries/subsquid/general/notificationsByAccount.graphql
@@ -1,3 +1,6 @@
+#import "../../fragments/subsquidNft.graphql"
+#import "../../fragments/nftDetails.graphql"
+
 query notificationsByAccount($account: String!, $limit: Int = 30) {
   # get sale event
   events(
@@ -10,17 +13,8 @@ query notificationsByAccount($account: String!, $limit: Int = 30) {
     timestamp
     currentOwner
     nft {
-      name
-      id
-      metadata
-      price
-      meta {
-        id
-        image
-      }
-      collection {
-        id
-      }
+      ...subsquidNft
+      ...nftDetails
     }
   }
   # get offer and offer_accept events
@@ -40,17 +34,8 @@ query notificationsByAccount($account: String!, $limit: Int = 30) {
     offer {
       price
       nft {
-        name
-        id
-        metadata
-        price
-        meta {
-          id
-          image
-        }
-        collection {
-          id
-        }
+        ...subsquidNft
+        ...nftDetails
       }
     }
   }

From aa60c13c7358d89898648b234a0c81db55022b74 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Fri, 7 Apr 2023 15:37:47 +0800
Subject: [PATCH 54/65] feat(ui): update notification item

---
 .../NotificationBox/NotificationItem.vue       | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/components/common/NotificationBox/NotificationItem.vue b/components/common/NotificationBox/NotificationItem.vue
index 73ae3407ac..01a79b5815 100644
--- a/components/common/NotificationBox/NotificationItem.vue
+++ b/components/common/NotificationBox/NotificationItem.vue
@@ -5,20 +5,17 @@
     <img
       v-if="avatar"
       :src="avatar"
-      :alt="event.nft.name"
-      width="50"
-      height="50"
-      class="border image-size" />
+      :alt="displayName"
+      class="border image is-48x48" />
     <img
       v-else
       src="/placeholder.webp"
-      width="50"
-      height="50"
-      class="border image-size" />
+      :alt="displayName"
+      class="border image is-48x48" />
     <div class="notify-content ml-5 is-flex is-flex-direction-column">
       <div class="is-flex is-justify-content-space-between">
         <div class="nft-name mr-4 has-text-weight-bold is-ellipsis">
-          {{ event.nft.name || event.nft.id }}
+          {{ displayName }}
         </div>
         <div class="nft-price is-ellipsis">
           <Money :value="event.nft.price" />
@@ -64,6 +61,7 @@ const getAvatar = async () => {
     )
   }
 }
+const displayName = computed(() => props.event.nft.name || props.event.nft.id)
 </script>
 
 <style scoped lang="scss">
@@ -77,9 +75,7 @@ const getAvatar = async () => {
       background-color: theme('k-accentlight2');
     }
   }
-  img.image-size {
-    height: 50px;
-    width: 50px;
+  img {
     object-fit: contain;
   }
 }

From 855d966edd43d5623fc93dde81aade4cfa79edfe Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Fri, 7 Apr 2023 16:08:35 +0800
Subject: [PATCH 55/65] fix: query not correct

---
 queries/subsquid/general/notificationsByAccount.graphql | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/queries/subsquid/general/notificationsByAccount.graphql b/queries/subsquid/general/notificationsByAccount.graphql
index bf21f81887..787868b0aa 100644
--- a/queries/subsquid/general/notificationsByAccount.graphql
+++ b/queries/subsquid/general/notificationsByAccount.graphql
@@ -22,8 +22,11 @@ query notificationsByAccount($account: String!, $limit: Int = 30) {
     limit: $limit
     where: {
       currentOwner_eq: $account
-      AND: { interaction_eq: CREATE, AND: { offer: { status_eq: ACTIVE } } }
-      OR: { interaction_eq: ACCEPT, AND: { offer: { status_eq: ACCEPTED } } }
+      AND: {
+        interaction_eq: CREATE
+        offer: { status_eq: ACTIVE }
+        OR: { interaction_eq: ACCEPT, offer: { status_eq: ACCEPTED } }
+      }
     }
     orderBy: timestamp_DESC
   ) {

From 1fe073fc262098fa4b08b87e446d38df2809d4b8 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Fri, 7 Apr 2023 16:14:58 +0800
Subject: [PATCH 56/65] fix: remove unexpected line

---
 components/common/NotificationBox/NotificationBoxModal.vue | 3 ++-
 components/common/NotificationBox/useNotificationBox.ts    | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/common/NotificationBox/NotificationBoxModal.vue b/components/common/NotificationBox/NotificationBoxModal.vue
index 59578baabd..1536f48704 100644
--- a/components/common/NotificationBox/NotificationBoxModal.vue
+++ b/components/common/NotificationBox/NotificationBoxModal.vue
@@ -153,7 +153,7 @@ const doSearch = () => {
   displayedEvents.value = allEvents.value.filter(
     (item) =>
       (!collectionFilter.value ||
-        collectionFilter.value.id === item.nft.collection.id) &&
+        collectionFilter.value.id === item.nft.collection?.id) &&
       (eventFilter.value.length === 0 ||
         eventFilter.value.some((x) => x === item.interaction))
   )
@@ -273,6 +273,7 @@ const emit = defineEmits(['close'])
 .notification-box-modal {
   .modal-content {
     border: none !important;
+    box-shadow: none !important;
   }
   .modal-background {
     background-color: rgba(0, 0, 0, 0.17) !important;
diff --git a/components/common/NotificationBox/useNotificationBox.ts b/components/common/NotificationBox/useNotificationBox.ts
index 45a9a6f47f..b4bb2a2e16 100644
--- a/components/common/NotificationBox/useNotificationBox.ts
+++ b/components/common/NotificationBox/useNotificationBox.ts
@@ -2,6 +2,6 @@ import NotificationBoxModal from './NotificationBoxModal.vue'
 
 export const NotificationBoxModalConfig = {
   component: NotificationBoxModal,
-  canCancel: true,
+  canCancel: 'outside',
   customClass: 'notification-box-modal',
 }

From 7bd6a455b566b1d8b40c143ed8276d48366b062c Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Fri, 7 Apr 2023 16:21:56 +0800
Subject: [PATCH 57/65] fix: rounded style

---
 .../NotificationBox/NotificationBoxModal.vue     | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/components/common/NotificationBox/NotificationBoxModal.vue b/components/common/NotificationBox/NotificationBoxModal.vue
index 1536f48704..361686b65b 100644
--- a/components/common/NotificationBox/NotificationBoxModal.vue
+++ b/components/common/NotificationBox/NotificationBoxModal.vue
@@ -41,7 +41,7 @@
               <div
                 v-for="(item, index) in collections"
                 :key="`${item}-${index}`"
-                class="filter-item button-rounded px-3 py-1 mb-1 no-wrap"
+                class="filter-item rounded px-3 py-1 mb-1 no-wrap"
                 :class="{
                   activated: collectionFilter?.id === item.id,
                 }"
@@ -58,7 +58,7 @@
               <div
                 v-for="event in eventTypes"
                 :key="event"
-                class="filter-item button-rounded px-3 py-1 no-wrap"
+                class="filter-item rounded px-3 py-1 no-wrap"
                 :class="{
                   activated: eventFilter.includes(event),
                 }"
@@ -72,14 +72,14 @@
           <div class="is-flex filter-display-list pb-3 is-flex-wrap-wrap">
             <NeoTag
               v-if="collectionFilter"
-              class="no-wrap mr-1 mb-1"
+              class="no-wrap mr-1 mb-1 rounded"
               @close="collectionFilter = null">
               {{ collectionFilter.name }}
             </NeoTag>
             <NeoTag
               v-for="event in eventFilter"
               :key="event"
-              class="no-wrap mb-1 mr-1"
+              class="no-wrap mb-1 mr-1 rounded"
               @close="toggleEventFilter(event)">
               {{ getInteractionName(event) }}
             </NeoTag>
@@ -184,6 +184,10 @@ const emit = defineEmits(['close'])
 .no-wrap {
   white-space: nowrap;
 }
+.rounded {
+  border-radius: 2rem;
+  overflow: hidden;
+}
 .notification-box-modal {
   .notification-modal-container {
     position: fixed;
@@ -235,9 +239,7 @@ const emit = defineEmits(['close'])
           border-bottom: 1px solid theme('k-grey');
         }
       }
-      .button-rounded {
-        border-radius: 2rem;
-      }
+
       .filter-item {
         cursor: pointer;
         margin-right: 0.25rem;

From 9461ab27b9172192b554dcdba9927bf14c48fe8b Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Fri, 7 Apr 2023 16:41:47 +0800
Subject: [PATCH 58/65] feat: item image size

---
 components/common/NotificationBox/NotificationItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/common/NotificationBox/NotificationItem.vue b/components/common/NotificationBox/NotificationItem.vue
index 01a79b5815..f457dc7578 100644
--- a/components/common/NotificationBox/NotificationItem.vue
+++ b/components/common/NotificationBox/NotificationItem.vue
@@ -76,7 +76,7 @@ const displayName = computed(() => props.event.nft.name || props.event.nft.id)
     }
   }
   img {
-    object-fit: contain;
+    object-fit: cover;
   }
 }
 .notify-content {

From fb45be2d83ecda5a4525d3d8159540a4a2010378 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Fri, 7 Apr 2023 20:55:07 +0800
Subject: [PATCH 59/65] fix: offer accepted event

---
 queries/subsquid/general/notificationsByAccount.graphql | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/queries/subsquid/general/notificationsByAccount.graphql b/queries/subsquid/general/notificationsByAccount.graphql
index 787868b0aa..f465f686a5 100644
--- a/queries/subsquid/general/notificationsByAccount.graphql
+++ b/queries/subsquid/general/notificationsByAccount.graphql
@@ -22,10 +22,10 @@ query notificationsByAccount($account: String!, $limit: Int = 30) {
     limit: $limit
     where: {
       currentOwner_eq: $account
-      AND: {
-        interaction_eq: CREATE
-        offer: { status_eq: ACTIVE }
-        OR: { interaction_eq: ACCEPT, offer: { status_eq: ACCEPTED } }
+      AND: { interaction_eq: CREATE, offer: { status_eq: ACTIVE } }
+      OR: {
+        caller_eq: $account
+        AND: { interaction_eq: ACCEPT, offer: { status_eq: ACCEPTED } }
       }
     }
     orderBy: timestamp_DESC

From 2496c87195eb5899a93449b43f5a718fad7e6e05 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Fri, 7 Apr 2023 22:16:29 +0800
Subject: [PATCH 60/65] fix: type waring

---
 components/common/NotificationBox/useNotificationBox.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/common/NotificationBox/useNotificationBox.ts b/components/common/NotificationBox/useNotificationBox.ts
index b4bb2a2e16..2cd3f05155 100644
--- a/components/common/NotificationBox/useNotificationBox.ts
+++ b/components/common/NotificationBox/useNotificationBox.ts
@@ -2,6 +2,6 @@ import NotificationBoxModal from './NotificationBoxModal.vue'
 
 export const NotificationBoxModalConfig = {
   component: NotificationBoxModal,
-  canCancel: 'outside',
+  canCancel: ['outside'],
   customClass: 'notification-box-modal',
 }

From e94b76499252b2d56a79f18a9b6abc455abf35e5 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Fri, 7 Apr 2023 22:16:54 +0800
Subject: [PATCH 61/65] feat: add tooltip

---
 .../NotificationBox/NotificationBoxModal.vue  |  1 +
 .../NotificationBox/NotificationItem.vue      | 29 ++++++++++++++-----
 styles/abstracts/_variables.scss              |  2 ++
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/components/common/NotificationBox/NotificationBoxModal.vue b/components/common/NotificationBox/NotificationBoxModal.vue
index 361686b65b..855dc317fb 100644
--- a/components/common/NotificationBox/NotificationBoxModal.vue
+++ b/components/common/NotificationBox/NotificationBoxModal.vue
@@ -231,6 +231,7 @@ const emit = defineEmits(['close'])
       top: 0;
       padding-right: 2rem;
       padding-left: 2rem;
+      z-index: 1;
       @include ktheme() {
         background-color: theme('background-color');
       }
diff --git a/components/common/NotificationBox/NotificationItem.vue b/components/common/NotificationBox/NotificationItem.vue
index f457dc7578..ef35db9b25 100644
--- a/components/common/NotificationBox/NotificationItem.vue
+++ b/components/common/NotificationBox/NotificationItem.vue
@@ -14,9 +14,14 @@
       class="border image is-48x48" />
     <div class="notify-content ml-5 is-flex is-flex-direction-column">
       <div class="is-flex is-justify-content-space-between">
-        <div class="nft-name mr-4 has-text-weight-bold is-ellipsis">
-          {{ displayName }}
-        </div>
+        <NeoTooltip
+          :label="displayName"
+          :append-to-body="false"
+          class="nft-name mr-4 has-text-weight-bold">
+          <div class="is-ellipsis">
+            {{ displayName }}
+          </div>
+        </NeoTooltip>
         <div class="nft-price is-ellipsis">
           <Money :value="event.nft.price" />
         </div>
@@ -25,8 +30,13 @@
         <div>
           <div class="height-50px is-flex is-align-items-center">
             <div
-              class="event-type mr-4 border is-size-7 is-justify-content-center px-4 py-1 is-flex is-align-items-center"
-              :class="getInteractionColor(event.interaction)">
+              class="event-type mr-4 border is-size-7 is-justify-content-center py-1 is-flex is-align-items-center"
+              :class="[
+                getInteractionColor(event.interaction),
+                event.interaction === Interaction.ACCEPTED_OFFER
+                  ? 'px-2'
+                  : 'px-4',
+              ]">
               {{ getInteractionName(event.interaction) }}
             </div>
           </div>
@@ -41,7 +51,12 @@
 
 <script setup lang="ts">
 import { Event } from './types'
-import { getInteractionColor, getInteractionName } from './useNotification'
+import { NeoTooltip } from '@kodadot1/brick'
+import {
+  Interaction,
+  getInteractionColor,
+  getInteractionName,
+} from './useNotification'
 import { InteractionWithNFT } from '@/composables/collectionActivity/types'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import { formatToNow } from '@/utils/format/time'
@@ -81,7 +96,7 @@ const displayName = computed(() => props.event.nft.name || props.event.nft.id)
 }
 .notify-content {
   flex: 1;
-  overflow: auto;
+  overflow: visible;
 }
 .nft-price {
   overflow: auto;
diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss
index 2e3e3015fe..07e6191444 100644
--- a/styles/abstracts/_variables.scss
+++ b/styles/abstracts/_variables.scss
@@ -180,3 +180,5 @@ $body-family: $family-primary;
 
 $fluid-container-padding: 2.5rem;
 $fluid-container-padding-mobile: 1.25rem;
+
+$tooltip-content-zindex: 999;
\ No newline at end of file

From 4131996d8ce632462f30a44240ef917506363046 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Fri, 7 Apr 2023 22:27:35 +0800
Subject: [PATCH 62/65] fix: money field error

---
 components/common/NotificationBox/NotificationItem.vue  | 2 +-
 components/common/NotificationBox/types.ts              | 1 +
 queries/subsquid/general/notificationsByAccount.graphql | 3 ++-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/common/NotificationBox/NotificationItem.vue b/components/common/NotificationBox/NotificationItem.vue
index ef35db9b25..543992219c 100644
--- a/components/common/NotificationBox/NotificationItem.vue
+++ b/components/common/NotificationBox/NotificationItem.vue
@@ -23,7 +23,7 @@
           </div>
         </NeoTooltip>
         <div class="nft-price is-ellipsis">
-          <Money :value="event.nft.price" />
+          <Money :value="event.meta" />
         </div>
       </div>
       <div class="is-flex is-justify-content-space-between">
diff --git a/components/common/NotificationBox/types.ts b/components/common/NotificationBox/types.ts
index 040d5b6462..bf9e5eb20f 100644
--- a/components/common/NotificationBox/types.ts
+++ b/components/common/NotificationBox/types.ts
@@ -10,5 +10,6 @@ export type Event = {
   interaction: string
   timestamp: string
   caller: string
+  meta: number
   nft: CarouselNFT
 }
diff --git a/queries/subsquid/general/notificationsByAccount.graphql b/queries/subsquid/general/notificationsByAccount.graphql
index f465f686a5..1d7b06ba26 100644
--- a/queries/subsquid/general/notificationsByAccount.graphql
+++ b/queries/subsquid/general/notificationsByAccount.graphql
@@ -12,6 +12,7 @@ query notificationsByAccount($account: String!, $limit: Int = 30) {
     interaction
     timestamp
     currentOwner
+    meta
     nft {
       ...subsquidNft
       ...nftDetails
@@ -34,8 +35,8 @@ query notificationsByAccount($account: String!, $limit: Int = 30) {
     interaction
     timestamp
     currentOwner
+    meta
     offer {
-      price
       nft {
         ...subsquidNft
         ...nftDetails

From 0657a4c3227d90d3c94722ffa020a6d83ca50881 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Fri, 7 Apr 2023 23:16:10 +0800
Subject: [PATCH 63/65] feat: filter expired offer

---
 .../NotificationBox/NotificationItem.vue      |  4 ++-
 components/common/NotificationBox/types.ts    |  6 +++-
 .../common/NotificationBox/useNotification.ts | 29 ++++++++++++++-----
 .../general/notificationsByAccount.graphql    |  4 +--
 4 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/components/common/NotificationBox/NotificationItem.vue b/components/common/NotificationBox/NotificationItem.vue
index 543992219c..ea48f7918a 100644
--- a/components/common/NotificationBox/NotificationItem.vue
+++ b/components/common/NotificationBox/NotificationItem.vue
@@ -76,7 +76,9 @@ const getAvatar = async () => {
     )
   }
 }
-const displayName = computed(() => props.event.nft.name || props.event.nft.id)
+const displayName = computed(
+  () => props.event.nft.meta.name || props.event.nft.id
+)
 </script>
 
 <style scoped lang="scss">
diff --git a/components/common/NotificationBox/types.ts b/components/common/NotificationBox/types.ts
index bf9e5eb20f..29d5e303e9 100644
--- a/components/common/NotificationBox/types.ts
+++ b/components/common/NotificationBox/types.ts
@@ -11,5 +11,9 @@ export type Event = {
   timestamp: string
   caller: string
   meta: number
-  nft: CarouselNFT
+  nft: CarouselNFT & {
+    meta: {
+      name: string
+    }
+  }
 }
diff --git a/components/common/NotificationBox/useNotification.ts b/components/common/NotificationBox/useNotification.ts
index 3a0ed8c50b..f56698121c 100644
--- a/components/common/NotificationBox/useNotification.ts
+++ b/components/common/NotificationBox/useNotification.ts
@@ -30,9 +30,16 @@ export const getInteractionColor = (key: string) => {
 }
 
 export const useNotification = (account: string) => {
+  const { apiInstance } = useApi()
   const collections = ref<FilterOption[]>([])
   const events = ref<Event[]>([])
 
+  async function currentBlock() {
+    const api = await apiInstance.value
+    const block = await api.rpc.chain.getHeader()
+    return block.number.toNumber()
+  }
+
   const { data: collectionData } = useGraphql({
     queryName: 'collectionByAccount',
     variables: {
@@ -51,14 +58,20 @@ export const useNotification = (account: string) => {
     collections.value = result.collectionEntities ?? []
   })
 
-  watch(eventData, (result) => {
-    const offerEvents = result.offerEvents.map((event) => ({
-      ...event,
-      nft: {
-        ...event.offer.nft,
-        price: event.offer.price,
-      },
-    }))
+  watch(eventData, async (result) => {
+    const currentBlockNumber = await currentBlock()
+    const offerEvents = result.offerEvents
+      .map((event) => ({
+        ...event,
+        nft: {
+          ...event.offer.nft,
+        },
+      }))
+      .filter(
+        (event) =>
+          event.interaction === Interaction.OFFER &&
+          Number(event.offer.expiration) < Number(currentBlockNumber)
+      )
     events.value = sortedEventByDate(
       [...result.events, ...offerEvents],
       'ASC'
diff --git a/queries/subsquid/general/notificationsByAccount.graphql b/queries/subsquid/general/notificationsByAccount.graphql
index 1d7b06ba26..f5c1a94649 100644
--- a/queries/subsquid/general/notificationsByAccount.graphql
+++ b/queries/subsquid/general/notificationsByAccount.graphql
@@ -1,5 +1,4 @@
 #import "../../fragments/subsquidNft.graphql"
-#import "../../fragments/nftDetails.graphql"
 
 query notificationsByAccount($account: String!, $limit: Int = 30) {
   # get sale event
@@ -15,7 +14,6 @@ query notificationsByAccount($account: String!, $limit: Int = 30) {
     meta
     nft {
       ...subsquidNft
-      ...nftDetails
     }
   }
   # get offer and offer_accept events
@@ -37,9 +35,9 @@ query notificationsByAccount($account: String!, $limit: Int = 30) {
     currentOwner
     meta
     offer {
+      expiration
       nft {
         ...subsquidNft
-        ...nftDetails
       }
     }
   }

From 4170ac43b9182ac21e9c49ed59d8edd32c30b812 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Sat, 8 Apr 2023 00:17:21 +0800
Subject: [PATCH 64/65] fix: review suggestions

---
 .../common/NotificationBox/NotificationBoxModal.vue      | 3 ---
 components/common/NotificationBox/types.ts               | 9 ++-------
 components/navbar/NotificationBoxButton.vue              | 2 --
 3 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/components/common/NotificationBox/NotificationBoxModal.vue b/components/common/NotificationBox/NotificationBoxModal.vue
index 855dc317fb..577ba1ce54 100644
--- a/components/common/NotificationBox/NotificationBoxModal.vue
+++ b/components/common/NotificationBox/NotificationBoxModal.vue
@@ -181,9 +181,6 @@ const emit = defineEmits(['close'])
 
 <style scoped lang="scss">
 @import '@/styles/abstracts/variables';
-.no-wrap {
-  white-space: nowrap;
-}
 .rounded {
   border-radius: 2rem;
   overflow: hidden;
diff --git a/components/common/NotificationBox/types.ts b/components/common/NotificationBox/types.ts
index 29d5e303e9..50362a088e 100644
--- a/components/common/NotificationBox/types.ts
+++ b/components/common/NotificationBox/types.ts
@@ -1,16 +1,11 @@
 import type { CarouselNFT } from '@/components/base/types'
-
+import type { Interaction } from '@/components/rmrk/service/scheme'
 export type FilterOption = {
   id: string
   name: string
 }
 
-export type Event = {
-  id: string
-  interaction: string
-  timestamp: string
-  caller: string
-  meta: number
+export declare interface Event extends Interaction {
   nft: CarouselNFT & {
     meta: {
       name: string
diff --git a/components/navbar/NotificationBoxButton.vue b/components/navbar/NotificationBoxButton.vue
index b76a31e287..e731b61a6f 100644
--- a/components/navbar/NotificationBoxButton.vue
+++ b/components/navbar/NotificationBoxButton.vue
@@ -33,5 +33,3 @@ function toggleNotificationModal() {
   }
 }
 </script>
-
-<style scoped></style>

From c4a8b3a1cb1d7f77dac8461059feeee20e6f8991 Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Sat, 8 Apr 2023 14:27:24 +0800
Subject: [PATCH 65/65] fix: code review suggestions

---
 .../NotificationBox/NotificationBoxModal.vue  | 53 +++++++------------
 styles/global.scss                            |  5 ++
 2 files changed, 24 insertions(+), 34 deletions(-)

diff --git a/components/common/NotificationBox/NotificationBoxModal.vue b/components/common/NotificationBox/NotificationBoxModal.vue
index 577ba1ce54..69c829ee2a 100644
--- a/components/common/NotificationBox/NotificationBoxModal.vue
+++ b/components/common/NotificationBox/NotificationBoxModal.vue
@@ -1,15 +1,17 @@
 <template>
-  <div class="notification-modal-container is-flex is-flex-direction-column">
-    <header class="modal-card-head mb-4">
-      <span class="modal-card-title is-size-6 has-text-weight-bold">
+  <div
+    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')">
         <NeoIcon icon="close" />
       </a>
     </header>
-    <div class="modal-card-body">
-      <div class="notification-filter pb-5">
+    <div class="px-0 pt-0 pb-3 theme-background-color">
+      <div class="notification-filter theme-background-color px-2rem pb-5">
         <div
           class="is-flex is-justify-content-space-between is-align-items-center pb-4">
           <span> {{ $t('notification.filters') }} </span>
@@ -41,7 +43,7 @@
               <div
                 v-for="(item, index) in collections"
                 :key="`${item}-${index}`"
-                class="filter-item rounded px-3 py-1 mb-1 no-wrap"
+                class="filter-item rounded is-clickable px-3 mr-1 py-1 mb-1 no-wrap"
                 :class="{
                   activated: collectionFilter?.id === item.id,
                 }"
@@ -58,7 +60,7 @@
               <div
                 v-for="event in eventTypes"
                 :key="event"
-                class="filter-item rounded px-3 py-1 no-wrap"
+                class="filter-item rounded is-clickable px-3 mr-1 py-1 no-wrap"
                 :class="{
                   activated: eventFilter.includes(event),
                 }"
@@ -181,6 +183,14 @@ const emit = defineEmits(['close'])
 
 <style scoped lang="scss">
 @import '@/styles/abstracts/variables';
+.py-2rem {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+.px-2rem {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
 .rounded {
   border-radius: 2rem;
   overflow: hidden;
@@ -198,40 +208,17 @@ const emit = defineEmits(['close'])
       padding-top: 58px;
       max-width: 100vw;
     }
-    @include ktheme() {
-      background: theme('background-color');
-      border-left: 1px solid theme('border-color');
-    }
-    .modal-card-title {
-      @include ktheme() {
-        color: theme('text-color');
-      }
-    }
+
     .modal-card-head {
       background: unset;
-      padding: 1rem 2rem;
-      @include ktheme() {
-        border-bottom: 1px solid theme('border-color');
-      }
-    }
-    .modal-card-body {
-      padding: 0rem 0rem 1rem 0rem;
-      display: block;
-      @include ktheme() {
-        background-color: theme('background-color');
-      }
     }
+
     .notification-filter {
       flex-shrink: 0;
       flex-grow: 0;
       position: sticky;
       top: 0;
-      padding-right: 2rem;
-      padding-left: 2rem;
       z-index: 1;
-      @include ktheme() {
-        background-color: theme('background-color');
-      }
       & > div:last-child {
         @include ktheme() {
           border-bottom: 1px solid theme('k-grey');
@@ -239,8 +226,6 @@ const emit = defineEmits(['close'])
       }
 
       .filter-item {
-        cursor: pointer;
-        margin-right: 0.25rem;
         &:last-child {
           margin-right: 0;
         }
diff --git a/styles/global.scss b/styles/global.scss
index a962919cc3..d7f6484c88 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -304,6 +304,11 @@ hr {
     border-top: 1px solid theme('border-color');
   }
 }
+.border-left {
+  @include ktheme() {
+    border-left: 1px solid theme('border-color');
+  }
+}
 .border {
   @include ktheme() {
     border: 1px solid theme('border-color');