🔧 wip: nuxt3

.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
     node: true,
   },
   extends: [
-    'plugin:vue/recommended',
+    // 'plugin:vue/recommended',
     'plugin:@typescript-eslint/recommended',
     'prettier',
   ],
@@ -15,8 +15,9 @@ module.exports = {
     ecmaVersion: 2020,
     sourceType: 'module',
   },
-  plugins: ['vue', 'prettier', '@typescript-eslint', 'unicorn'],
+  plugins: ['prettier', '@typescript-eslint', 'unicorn'],
   rules: {
+    'no-empty-function': 'warn',
     'no-trailing-spaces': 'error',
     'unicorn/no-for-loop': 'error',
     'brace-style': ['error', '1tbs', { allowSingleLine: false }],

styles/components/_content-markdown.scss → assets/styles/components/_content-markdown.scss

@@ -1,5 +1,5 @@
 @import '~/node_modules/highlight.js/styles/github-dark.css';
-@import '@/styles/abstracts/variables';
+@import '@/assets/styles/abstracts/variables';
 
 .content-markdown {
   pre.hljs {

styles/index.scss → assets/styles/index.scss

@@ -6,7 +6,7 @@
 @import "abstracts/theme";
 
 // FRAMEWORK (note: don't move this on top)
-@import "~bulma";
+@import "bulma/bulma.sass";
 
 // GLOBAL
 @import "./global.scss";

components/CookieBanner.vue

@@ -14,14 +14,14 @@
           </div>
           <div class="bar ml-4 mr-4" />
           <div class="action is-success">
-            <NeoButton variant="text" no-shadow @click.native="declineCookies">
+            <NeoButton variant="text" no-shadow @click="declineCookies">
               {{ $t('cookies.decline') }}
             </NeoButton>
             <NeoButton
               variant="text"
               no-shadow
               class="has-text-weight-bold ml-3"
-              @click.native="acceptCookies">
+              @click="acceptCookies">
               {{ $t('cookies.accept') }}
             </NeoButton>
           </div>

components/Navbar.vue

@@ -188,7 +188,7 @@
 
 <script lang="ts" setup>
 import { NeoIcon } from '@kodadot1/brick'
-
+import { nextTick } from 'vue'
 import { ConnectWalletModalConfig } from '@/components/common/ConnectWallet/useConnectWallet'
 import ChainSelectDropdown from '@/components/navbar/ChainSelectDropdown.vue'
 import CreateDropdown from '@/components/navbar/CreateDropdown.vue'
@@ -208,7 +208,7 @@ import { getChainNameByPrefix } from '@/utils/chain'
 import { createVisible } from '@/utils/config/permission.config'
 import ShoppingCartButton from './navbar/ShoppingCartButton.vue'
 
-const { $nextTick, $neoModal } = useNuxtApp()
+const { $neoModal } = useNuxtApp()
 const instance = getCurrentInstance()
 const showTopNavbar = ref(true)
 const openMobileSearchBar = ref(false)
@@ -292,7 +292,7 @@ const onScroll = () => {
 }
 
 const setBodyScroll = (allowScroll: boolean) => {
-  $nextTick(() => {
+  nextTick(() => {
     const body = document.querySelector('body') as HTMLBodyElement
     if (allowScroll) {
       body.classList.remove('is-clipped')
@@ -304,7 +304,7 @@ const setBodyScroll = (allowScroll: boolean) => {
 
 const showMobileSearchBar = () => {
   openMobileSearchBar.value = true
-  $nextTick(() => {
+  nextTick(() => {
     mobilSearchRef.value?.focusInput()
   })
   setBodyScroll(false)

components/TheFooter.vue

@@ -9,7 +9,7 @@
         <div class="is-flex is-align-items-center footer-container-subs-items">
           <div id="custom-substack-embed"></div>
 
-          <script>
+          <!-- <script>
             window.CustomSubstackWidget = {
               substackUrl: 'kodadot.substack.com',
               placeholder: '[email protected]',
@@ -22,7 +22,7 @@
               },
             }
           </script>
-          <script src="https://substackapi.com/widget.js" async></script>
+          <script src="https://substackapi.com/widget.js" async></script> -->
         </div>
       </section>
       <section class="footer-container-info is-flex is-flex-direction-column">
@@ -145,7 +145,6 @@
                   </clipPath>
                 </defs>
               </svg>
-
               <NeoIcon
                 v-else
                 :pack="item.name == 'Swag' ? 'fas' : 'fab'"
@@ -160,11 +159,11 @@
 </template>
 
 <script lang="ts" setup>
-import { TranslateResult } from 'vue-i18n/types'
+// import { TranslateResult } from 'vue-i18n/types'
 import { NeoIcon } from '@kodadot1/brick'
 
 interface Menu {
-  name: TranslateResult
+  name: string
   url: string
   external?: boolean
 }

components/base/SubmitButton.vue

@@ -9,7 +9,7 @@
       :expanded="expanded"
       icon-pack="far"
       outlined
-      @click.native="$emit('click')">
+      @click="$emit('click')">
       <slot>
         {{ $t(label) }}
       </slot>

components/blog/BlogPost.vue

@@ -18,27 +18,32 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { format } from 'date-fns'
 import { convertMarkdownToText } from '@/utils/markdown'
-import { nextTick } from 'vue'
 import hljs from 'highlight.js'
 
-const { $seoMeta } = useNuxtApp()
+const { $nextTick, $seoMeta } = useNuxtApp()
 const route = useRoute()
 
 const slug = route.params.slug
 const attributes = ref({})
 const singlePostComponent = ref('')
 
 onMounted(async () => {
-  const post = await import(`~/content/blog/${slug}.md`)
+  // const post = await import(`~/content/blog/${slug}.md`)
+  const post = {
+    attributes: 'test',
+    vue: {
+      component: {},
+    },
+  }
 
   attributes.value = post.attributes
   singlePostComponent.value = post.vue.component
 
   // must wait the page finished render then highlight the code
-  await nextTick()
+  await $nextTick()
   hljs.highlightAll()
 })
 
@@ -54,15 +59,15 @@ const meta = computed(() => {
   ]
 })
 
-useNuxt2Meta({
+useHead({
   title,
   meta,
 })
 </script>
 
 <style lang="scss">
 @use 'sass:meta';
-@import '@/styles/abstracts/variables';
+@import '@/assets/styles/abstracts/variables';
 
 // dynamic load highlight syntax theme based on page theme
 html.light-mode {

components/bsx/Asset/AssetTable.vue

@@ -27,7 +27,7 @@
         <NeoButton
           v-else
           icon-left="money-bill"
-          @click.native="tellFrens(props.row.id)">
+          @click="tellFrens(props.row.id)">
           {{ $t('asset.action.default') }}
         </NeoButton>
       </NeoTableColumn>

components/bsx/Offer/MasterOfferTable.vue

@@ -12,7 +12,7 @@
         v-if="isLogIn"
         icon-left="paper-plane"
         class="fill-button mt-6"
-        @click.native="fillUpAddress">
+        @click="fillUpAddress">
         Fill My Address
       </NeoButton>
     </div>

components/bsx/Offer/MyOffer.vue

@@ -14,11 +14,7 @@
           {{ option.value }}
         </option>
       </NeoSelect>
-      <NeoButton
-        no-shadow
-        size="medium"
-        icon-left="refresh"
-        @click.native="refresh" />
+      <NeoButton no-shadow size="medium" icon-left="refresh" @click="refresh" />
     </div>
     <Loader v-model="isLoading" :status="status" />
     <NeoTable :data="displayOffers(offers)">
@@ -63,13 +59,13 @@
           v-if="props.row.caller === accountId"
           no-shadow
           icon-left="times"
-          @click.native="onClick(props.row, true)" />
+          @click="onClick(props.row, true)" />
         <NeoButton
           v-else
           variant="success"
           no-shadow
           icon-left="money-bill"
-          @click.native="onClick(props.row, false)" />
+          @click="onClick(props.row, false)" />
       </NeoTableColumn>
       <NeoTableColumn
         v-slot="props"

components/bsx/Offer/OffersUserTable.vue

@@ -71,7 +71,7 @@
           v-if="props.row.status === 'ACTIVE'"
           no-shadow
           icon-left="times"
-          @click.native="withdrawOffer(props.row)" />
+          @click="withdrawOffer(props.row)" />
       </NeoTableColumn>
     </NeoTable>
   </div>

components/carousel/module/CarouselAgnostic.vue

@@ -7,6 +7,9 @@
           :key="`${item.id}-${index}`"
           class="keen-slider__slide carousel-item">
           <div class="h-full is-flex is-flex-direction-column">
+            <nuxt-link :to="`/bsx/collection/${item.id}`">
+              {{ item.id }}
+            </nuxt-link>
             <CarouselMedia :item="item" :index="index" :length="nfts.length" />
             <CarouselInfo :item="item" />
           </div>
@@ -29,6 +32,8 @@
 </template>
 
 <script lang="ts" setup>
+const CarouselMedia = defineAsyncComponent(() => import('./CarouselMedia.vue'))
+const CarouselInfo = defineAsyncComponent(() => import('./CarouselInfo.vue'))
 import type { CarouselNFT } from '@/components/base/types'
 
 import 'keen-slider/keen-slider.min.css'

components/carousel/utils/useCarouselEvents.ts

@@ -19,25 +19,8 @@ const nftEventVariables = {
 
 const disableChainsOnBeta = ['snek']
 
-const fetchLatestEvents = (chain, type, where = {}) => {
-  const { $apollo } = useNuxtApp()
-  const query = chain === 'ksm' ? latestEventsRmrkv2 : latestEvents
-
-  return $apollo.query({
-    query,
-    client: chain,
-    variables: {
-      limit: limit,
-      orderBy: 'timestamp_DESC',
-      where: {
-        ...nftEventVariables[type],
-        ...where,
-      },
-    },
-  })
-}
-
 const useChainEvents = (chain, type) => {
+  const query = chain === 'ksm' ? latestEventsRmrkv2 : latestEvents
   const nfts = ref<{ nft: NFTWithMetadata; timestamp: string }[]>([])
   const uniqueNftId = ref<string[]>([])
   const totalCollection = reactive({})
@@ -75,25 +58,46 @@ const useChainEvents = (chain, type) => {
     pushNft(nft)
   }
 
-  const fetchEvents = () => {
-    fetchLatestEvents(chain, type, {
+  // const { result, refetch } = useQuery(query, {
+  //   limit: limit,
+  //   orderBy: 'timestamp_DESC',
+  //   where: {
+  //     ...nftEventVariables[type],
+  //     nft: {
+  //       ...(type === 'newestList' && { price_gt: 0 }),
+  //       id_not_in: [...new Set(excludeNftId.value)],
+  //       collection: {
+  //         id_not_in: [...new Set(excludeCollectionId.value)],
+  //       },
+  //     },
+  //   },
+  // })
+
+  const { onResult, refetch } = useQuery(query, {
+    limit: limit,
+    orderBy: 'timestamp_DESC',
+    where: {
+      ...nftEventVariables[type],
       nft: {
         ...(type === 'newestList' && { price_gt: 0 }),
         id_not_in: [...new Set(excludeNftId.value)],
         collection: {
           id_not_in: [...new Set(excludeCollectionId.value)],
         },
       },
-    }).then((response) => {
-      response.data.events.forEach((nft) => {
-        limitCollection(nft)
-      })
+    },
+  })
+
+  onResult((result) =>
+    result.data.events.forEach((nft) => {
+      console.log(nft)
+      limitCollection(nft)
     })
-  }
+  )
 
   watchEffect(() => {
     if (nfts.value.length < limit) {
-      fetchEvents()
+      refetch()
     }
   })
 

components/carousel/utils/useCarouselSpotlight.ts

@@ -3,6 +3,9 @@ import type { CarouselNFT } from '@/components/base/types'
 
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 
+import collectionCuratedList from '@/queries/subsquid/general/collectionCuratedList.graphql'
+import collectionLastList from '@/queries/subsquid/general/collectionLastList.graphql'
+
 const curatedCollection = {
   bsx: [
     '1865909717', // 'Berliner'
@@ -62,13 +65,10 @@ export default function useCarouselSpotlight() {
   const variables = curatedCollection[urlPrefix.value]?.length
     ? { list: curatedCollection[urlPrefix.value] }
     : undefined
-  const { data } = useGraphql({
-    queryName: curatedCollection[urlPrefix.value]?.length
-      ? 'collectionCuratedList'
-      : 'collectionLastList',
-    queryPrefix: urlPrefix.value,
-    variables,
-  })
+  const query = curatedCollection[urlPrefix.value]?.length
+    ? collectionCuratedList
+    : collectionLastList
+  const { result: data } = useQuery(query, { ...variables })
 
   watch(data, () => {
     updateCollections(data.value)

components/collection/CollectionHeader/CollectionBanner.vue

@@ -83,14 +83,14 @@ const meta = computed(() => {
     ),
   })
 })
-useNuxt2Meta({
+useHead({
   title: collectionName,
   meta,
 })
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/abstracts/variables';
+@import '@/assets/styles/abstracts/variables';
 
 .collection-banner {
   background-repeat: no-repeat;