Merge pull request #9799 from kodadot/upgrade-nuxt

chore: upgrade nuxt & fix some warnings

components/MessageNotify.vue

@@ -7,7 +7,9 @@
     :duration="realDuration"
     :auto-close="autoClose"
     @close="$emit('close')">
-    <img src="/congrats-message-header.svg" class="congrats-message" />
+    <img
+      src="~/assets/svg/congrats-message-header.svg"
+      class="congrats-message" />
     <div class="flex flex-col">
       <div class="title is-3 mb-4">
         {{ title }}

components/carousel/utils/useCarouselEvents.ts

@@ -18,21 +18,21 @@ const nftEventVariables = {
   newestList: { interaction_eq: 'LIST' },
 }
 
-const fetchLatestEvents = async (chain, type, where = {}, limit = 20) => {
+const fetchLatestEvents = (chain, type, where = {}, limit = 20) => {
   const query = chain === 'ksm' ? latestEventsRmrkv2 : latestEvents
 
-  return await useAsyncQuery({
+  return useQuery(
     query,
-    clientId: chain,
-    variables: {
+    {
       limit,
       orderBy: 'timestamp_DESC',
       where: {
         ...nftEventVariables[type],
         ...where,
       },
     },
-  })
+    { clientId: chain },
+  )
 }
 
 const createEventQuery = (
@@ -73,14 +73,15 @@ const useEvents = (chain, type, limit = 10, collectionIds = []) => {
     return items.value.some((item) => item.id === nft.id)
   }
 
+  const where = createEventQuery(
+    type,
+    excludeNfts,
+    excludeCollections,
+    collectionIds,
+  )
+  const { result: data } = fetchLatestEvents(chain, type, where)
+
   const constructNfts = async () => {
-    const where = createEventQuery(
-      type,
-      excludeNfts,
-      excludeCollections,
-      collectionIds,
-    )
-    const { data } = await fetchLatestEvents(chain, type, where)
     const events = (
       data.value as {
         events: { meta: string; nft: NFTWithMetadata; timestamp: string }[]
@@ -117,7 +118,7 @@ const useEvents = (chain, type, limit = 10, collectionIds = []) => {
   }
 
   watchEffect(async () => {
-    if (items.value.length < limit) {
+    if (items.value.length < limit && data.value) {
       await constructNfts()
     }
   })

components/collection/CollectionHeader/CollectionBanner.vue

@@ -31,7 +31,7 @@
               <img
                 width="42"
                 height="42"
-                src="/migrate/state-ready.svg"
+                src="~/assets/svg/migrate/state-ready.svg"
                 alt="unlockable icon" />
               <span> {{ $t('migrate.ready.title') }} </span>
             </div>

components/collection/unlockable/UnlockableItemInfo.vue

@@ -28,7 +28,7 @@
         </NeoButton>
       </div>
       <div class="flex-1">
-        <img src="/unlockable-introduce.svg" alt="Unlockable" />
+        <img src="~/assets/svg/unlockable-introduce.svg" alt="Unlockable" />
       </div>
     </div>
   </div>

components/collectionDetailsPopover/CollectionDetailsPopover.vue

@@ -36,7 +36,7 @@ const { urlPrefix } = usePrefix()
 
 const props = withDefaults(
   defineProps<{
-    collection: Collection
+    collection?: Collection
     nft?: CarouselNFT
     showDelay?: number
     hideDelay?: number
@@ -47,6 +47,7 @@ const props = withDefaults(
     hideDelay: 0,
     className: '',
     nft: undefined,
+    collection: undefined,
   },
 )
 

components/common/autoTeleport/AutoTeleportActionButton.vue

@@ -9,7 +9,7 @@
             <img :src="autoTeleportIcon" class="mr-2" alt="teleport arrow" />
             <img
               v-if="isTelportIconActive"
-              src="/accent-blur.svg"
+              src="~/assets/svg/accent-blur.svg"
               alt="blur"
               class="blur autotelport-blur" />
           </div>

components/common/autoTeleport/AutoTeleportWelcomeModal.vue

@@ -30,7 +30,10 @@
                 :icon="reasonsIcons[index]"
                 size="large"
                 class="text-k-primary mb-3" />
-              <img src="/accent-blur.svg" class="blur icon-blur" alt="blur" />
+              <img
+                src="~/assets/svg/accent-blur.svg"
+                class="blur icon-blur"
+                alt="blur" />
             </div>
 
             <p class="font-bold text-xl mb-3">

components/identity/module/IdentityChain.vue

@@ -11,7 +11,7 @@
       {{ shortenedAddress }}
       <img
         v-if="isFetchingIdentity"
-        src="/infinity.svg"
+        src="~/assets/svg/infinity.svg"
         class="ml-1 infinity-loader" />
       <template v-else>
         <span v-if="identity?.display" class="ml-1">

components/landing/HeroBanner.vue

@@ -2,7 +2,7 @@
   <section class="pt-6 md:!pt-[3.5rem]">
     <div class="relative">
       <img
-        src="/landing-blur.svg"
+        src="~/assets/svg/landing-blur.svg"
         alt="Hero banner background blur"
         class="-z-10 absolute -translate-x-2/4 left-2/4 top-[-9rem] scale-120 md:scale-125 md:top-[-14rem] pointer-events-none" />
 

components/landing/SignupBanner.vue

@@ -9,7 +9,7 @@
         <div class="ml-4 relative signup-banner-voucher flex-shrink-0">
           <img :src="signUpVoucherIcon" alt="signup voucher" />
           <img
-            src="/signup-voucher-blur.svg"
+            src="~/assets/svg/signup-voucher-blur.svg"
             alt="signup voucher blur"
             class="blur" />
         </div>

components/landing/topCollections/TopCollectionsCard.vue

@@ -78,7 +78,7 @@
           <div
             class="flex flex-row justify-between items-center md:flex-col md:items-end">
             <p class="capitalize text-k-grey text-end text-xs">
-              <span v-if="collection">{{ $t('volume') }}</span>
+              <span v-if="collection">{{ $t('series.volume') }}</span>
               <NeoSkeleton
                 v-else
                 no-margin

components/landing/topCollections/utils/useTopCollections.ts

@@ -77,32 +77,30 @@ export const useTopCollections = (limit: number, immediate = true) => {
     },
   )
 
-  watch([topCollections], async () => {
+  watchEffect(async () => {
     if (topCollections.value) {
       const ids = topCollections.value.collectionEntities.map((c) => c.id)
 
-      const { data } = await useAsyncQuery<CollectionsSalesResult>({
-        query: collectionsSales,
-        variables: { ids },
-        clientId: client.value,
-      })
+      const { result: data } = useQuery(
+        collectionsSales,
+        { ids },
+        { clientId: client.value },
+      )
 
       topCollectionWithVolumeList.value = []
       collectionsSalesResults.value = data.value
-    }
-  })
 
-  watch(collectionsSalesResults, () => {
-    if (
-      collectionsSalesResults.value &&
-      topCollections.value?.collectionEntities.length
-    ) {
-      topCollectionWithVolumeList.value = proccessData(
-        topCollections.value.collectionEntities,
-        collectionsSalesResults.value.collectionsSales,
-      )
+      if (
+        collectionsSalesResults.value &&
+        topCollections.value?.collectionEntities.length
+      ) {
+        topCollectionWithVolumeList.value = proccessData(
+          topCollections.value.collectionEntities,
+          collectionsSalesResults.value.collectionsSales,
+        )
 
-      loading.value = false
+        loading.value = false
+      }
     }
   })
 

components/massmint/modals/MintingModal.vue

@@ -5,7 +5,7 @@
     @close="emit('close')">
     <div class="p-7">
       <div v-if="loading" class="flex flex-col items-center">
-        <img src="/preloader.svg" width="200" />
+        <img src="~/assets/svg/preloader.svg" width="200" />
         <span class="mt-6">{{ $t('massmint.mintingYourNFTs') }}</span>
       </div>
       <div v-else class="flex flex-col items-center">

components/migrate/landing/content/Ready.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="mt-8 pt-4">
     <div class="flex relative section-title">
-      <img src="/migrate/state-ready.svg" alt="Ready" />
+      <img src="~/assets/svg/migrate/state-ready.svg" alt="Ready" />
       <p>{{ $t('migrate.ready.title') }}</p>
     </div>
 

components/migrate/landing/content/Waiting.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="mt-8 pt-4">
     <div class="flex relative section-title">
-      <img src="/migrate/state-waiting.svg" alt="Ready" />
+      <img src="~/assets/svg/migrate/state-waiting.svg" alt="Ready" />
       <p>{{ $t('migrate.waiting.title') }}</p>
     </div>
 

components/migrate/landing/header/Index.vue

@@ -4,7 +4,9 @@
       <div class="flex flex-col justify-between h-full">
         <div>
           <div class="migrate-title">
-            <img src="/migrate/title-arrow.svg" alt="Migrate Your Art" />
+            <img
+              src="~/assets/svg/migrate/title-arrow.svg"
+              alt="Migrate Your Art" />
             <h1 class="title">{{ $t('migrate.heading') }}</h1>
           </div>
           <p>{{ $t('migrate.subHeading') }}</p>

components/search/SearchBar.vue

@@ -54,13 +54,13 @@
       v-if="!isTouchDevice"
       class="search-bar-keyboard-icon"
       :class="{ 'is-invisible': name || inputFocused }"
-      src="/search-k-keyboard.svg"
+      src="~/assets/svg/search-k-keyboard.svg"
       alt="press k to focus search input" />
     <img
       v-if="!isTouchDevice"
       class="search-bar-keyboard-icon"
       :class="{ 'is-invisible': !name && !inputFocused }"
-      src="/k-search-enter.svg"
+      src="~/assets/svg/k-search-enter.svg"
       alt="press enter to start search" />
   </div>
 </template>

components/series/SeriesTable.vue

@@ -330,7 +330,7 @@ const { client, urlPrefix } = usePrefix()
 const nbRows = ref('50')
 const nbDays = ref('7')
 const isLoading = ref(false)
-const sortBy = reactive<SortType>({ field: 'volume', value: 'DESC' })
+const sortBy = reactive<SortType>({ field: 'series.volume', value: 'DESC' })
 
 const data = ref<RowSeries[]>([])
 

components/shared/DragDrop.vue

@@ -22,7 +22,7 @@
             {{ subtitle }}
           </p>
         </div>
-        <img v-else-if="loading" src="/preloader.svg" width="200" />
+        <img v-else-if="loading" src="~/assets/svg/preloader.svg" width="200" />
         <div v-else class="flex items-center">
           <div class="flex flex-col justify-between">
             <NeoIcon icon="circle-check" class="check-icon text-k-green" />

components/shared/Loader.vue

@@ -47,7 +47,7 @@ const props = withDefaults(
 )
 
 const { $i18n } = useNuxtApp()
-const placeholder = '/preloader.svg'
+const placeholder = '~/assets/svg/preloader.svg'
 const randomNumber = ref(randomIntegerBetween(1, 35))
 const interval = ref()
 

components/shared/TransactionLoader.vue

@@ -148,8 +148,8 @@ const steps = [
   },
 ]
 
-const loading = '/preloader.svg'
-const congrats = '/congrats-message-header.svg'
+const loading = '~/assets/svg/preloader.svg'
+const congrats = '~/assets/svg/congrats-message-header.svg'
 
 const isFinalStep = computed(() => activeStep.value === steps.length)
 

nuxt.config.ts

@@ -1,7 +1,6 @@
 import { pwa } from './utils/config/pwa'
 import { URLS, apolloClientConfig } from './utils/constants'
 import * as fs from 'fs'
-import { sentryVitePlugin } from '@sentry/vite-plugin'
 import svgLoader from 'vite-svg-loader'
 
 const baseUrl = process.env.BASE_URL || 'http://localhost:9090'
@@ -34,13 +33,6 @@ export default defineNuxtConfig({
       sourcemap: true,
     },
     plugins: [
-      process.env.NODE_ENV === 'development'
-        ? null
-        : sentryVitePlugin({
-            org: 'kodadot',
-            project: 'nft-gallery',
-            authToken: process.env.SENTRY_AUTH_TOKEN,
-          }),
       svgLoader({
         defaultImport: 'url',
       }),
@@ -267,7 +259,6 @@ export default defineNuxtConfig({
     '@nuxt/image',
     '@nuxtjs/apollo',
     '@nuxtjs/i18n',
-    // '@nuxtjs/sentry',
     '@vite-pwa/nuxt',
     '@nuxtjs/color-mode',
     '@vueuse/nuxt',

package.json

@@ -69,7 +69,6 @@
     "@kodadot1/sub-api": "0.3.0-rc.0",
     "@nuxt/image": "^1.4.0",
     "@nuxtjs/apollo": "5.0.0-alpha.6",
-    "@nuxtjs/i18n": "8.0.0-rc.3",
     "@paraspell/sdk": "^4.1.1",
     "@pinia/nuxt": "^0.5.1",
     "@polkadot/api": "^10.11.2",
@@ -121,9 +120,9 @@
     "@nuxtjs/color-mode": "^3.3.2",
     "@nuxtjs/device": "^3.1.1",
     "@nuxtjs/google-fonts": "^3.1.3",
+    "@nuxtjs/i18n": "^8.2.0",
     "@nuxtjs/sitemap": "^5.1.2",
     "@playwright/test": "^1.42.1",
-    "@sentry/vite-plugin": "^2.14.3",
     "@types/jest": "^27.5.2",
     "@types/lodash": "^4.17.0",
     "@types/markdown-it": "^13.0.7",
@@ -147,7 +146,7 @@
     "husky": "^7.0.4",
     "jsdom": "^19.0.0",
     "lint-staged": "^12.5.0",
-    "nuxt": "^3.10.3",
+    "nuxt": "^3.11.0",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",
     "sass": "^1.71.1",