Merge branch 'nuxt' of github.com:kodadot/nft-gallery into fix/use-ga…

…llery-item

.eslintrc.js

@@ -5,9 +5,9 @@ module.exports = {
     node: true,
   },
   extends: [
-    // 'plugin:vue/recommended',
+    'plugin:vue/vue3-recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:vue-scoped-css/recommended',
+    'plugin:vue-scoped-css/vue3-recommended',
     'prettier',
   ],
   parser: 'vue-eslint-parser',
@@ -18,6 +18,7 @@ module.exports = {
   },
   plugins: ['prettier', '@typescript-eslint', 'unicorn'],
   rules: {
+    'prettier/prettier': 'error',
     'no-empty-function': 'warn',
     'no-trailing-spaces': 'error',
     'unicorn/no-for-loop': 'error',
@@ -49,6 +50,7 @@ module.exports = {
     ],
     'vue/multi-word-component-names': 'off',
     '@typescript-eslint/no-unused-vars': 'error',
+    '@typescript-eslint/no-explicit-any': 'warn',
     'vue-scoped-css/v-deep-pseudo-style': ['error', ':deep'],
     'vue-scoped-css/no-deprecated-deep-combinator': 'error',
     'vue-scoped-css/require-v-deep-argument': 'error',

components/CookieBanner.vue

@@ -37,7 +37,7 @@ import { NeoButton } from '@kodadot1/brick'
 
 // const { isEnabled } = useState()
 const hasDisplayedCookieBanner = ref(
-  localStorage.getItem('cookies_enabled') !== null || false
+  localStorage.getItem('cookies_enabled') !== null || false,
 )
 const acceptCookies = () => {
   // if (isEnabled) {

components/Error.vue

@@ -27,7 +27,7 @@ const props = withDefaults(
     hasImg: true,
     errorTitle: 'Indexer Error',
     errorSubtitle: 'Indexer is not working properly.',
-  }
+  },
 )
 
 const imgSrc = computed(() => `https://http.cat/${props.errorCode}`)

components/Navbar.vue

@@ -228,14 +228,17 @@ const route = useRoute()
 const account = computed(() => identityStore.getAuthAddress)
 
 const isCreateVisible = computed(() => createVisible(urlPrefix.value))
-const isLandingPage = computed(() => route.name === 'index')
+const isLandingPage = computed(
+  () => route.name === 'index' || route.name === 'prefix',
+)
 
 const logoSrc = computed(() =>
-  isDarkMode.value ? '/Koda_Beta_dark.svg' : '/Koda_Beta.svg'
+  isDarkMode.value ? '/Koda_Beta_dark.svg' : '/Koda_Beta.svg',
 )
 
 const showSearchOnNavbar = computed(
-  () => !isLandingPage.value || !showTopNavbar.value || isBurgerMenuOpened.value
+  () =>
+    !isLandingPage.value || !showTopNavbar.value || isBurgerMenuOpened.value,
 )
 
 const handleMobileChainSelect = () => {

components/accounts/utils.ts

@@ -41,7 +41,7 @@ export const parseBatchAddresses = (batchAddresses: string): string[] => {
 export const sendFunction = (
   parsedAddresses: string[],
   distribution: number,
-  random?: ShuffleFunction
+  random?: ShuffleFunction,
 ): ProcessFunction => {
   const randomFn = random ? random : notRandomFunction
   const slice = toDistribute(parsedAddresses.length, distribution)
@@ -51,7 +51,7 @@ export const sendFunction = (
     const lessTokensThanAdresses = nfts.length < subset.length
     const final = subset.slice(
       0,
-      lessTokensThanAdresses ? nfts.length : undefined
+      lessTokensThanAdresses ? nfts.length : undefined,
     )
     return final.map((addr, index) => {
       const id = justId(nfts[index])

components/balance/MultipleBalances.vue

@@ -94,7 +94,7 @@ const networkToPrefix = {
 }
 
 const isBalanceLoading = computed(
-  () => identityStore.getStatusMultiBalances === 'loading'
+  () => identityStore.getStatusMultiBalances === 'loading',
 )
 const filterEmptyBalanceChains = (chain: ChainToken = {}) => {
   const tokens = Object.keys(chain)
@@ -110,11 +110,11 @@ const isEmptyBalanceOnAllChains = computed(() => {
   const chains = Object.keys(multiBalances.value.chains)
   return !chains.some(
     (chain) =>
-      filterEmptyBalanceChains(multiBalances.value.chains[chain]).length !== 0
+      filterEmptyBalanceChains(multiBalances.value.chains[chain]).length !== 0,
   )
 })
 const currentNetwork = computed(() =>
-  isTestnet.value ? 'test-network' : 'main-network'
+  isTestnet.value ? 'test-network' : 'main-network',
 )
 
 const fiatStore = useFiatStore()
@@ -127,7 +127,7 @@ function calculateUsd(amount: string, token = 'KSM') {
 
   return calculateExactUsdFromToken(
     amountToNumber,
-    Number(fiatStore.getCurrentTokenValue(token))
+    Number(fiatStore.getCurrentTokenValue(token)),
   )
 }
 
@@ -152,7 +152,7 @@ async function getBalance(chainName: string, token = 'KSM', tokenId = 0) {
     nativeBalance = (
       (await api.query.tokens.accounts(
         prefixAddress,
-        tokenId
+        tokenId,
       )) as PalletBalancesAccountData
     ).free.toString()
     currentBalance = format(nativeBalance, chain.tokenDecimals, false)

components/base/CollectionSelect.vue

@@ -41,7 +41,7 @@ withDefaults(
   {
     collections: () => [],
     showExplainerText: false,
-  }
+  },
 )
 
 watch(selectedCollection, (value) => {

components/blog/BlogPost.vue

@@ -50,7 +50,7 @@ const route = useRoute()
 const slug = route.params.slug
 
 const { data: post } = await useAsyncData('post', () =>
-  queryContent(`/blog/${slug}`).findOne()
+  queryContent(`/blog/${slug}`).findOne(),
 )
 
 const openShareUrl = (platform: 'twitter' | 'linkedin') => {

components/bsx/Asset/AssetList.vue

@@ -44,7 +44,7 @@ const currentAsset = ref<string>('0')
 const { result: assets } = useQuery(
   assetListByIdList,
   { ids: ['0', getKusamaAssetId(client.value), '6'] },
-  { clientId: client.value }
+  { clientId: client.value },
 )
 
 const fetchAccountBalance = async () => {
@@ -77,7 +77,7 @@ const handleTokenSelect = async (id: string) => {
   howAboutToExecute(accountId.value, call, args, (blockNumber) => {
     showNotification(
       `[ASSET] Since block ${blockNumber}, you pay in different token`,
-      notificationTypes.success
+      notificationTypes.success,
     )
     fetchCurrentToken()
     fetchAccountBalance()
@@ -93,6 +93,6 @@ watch(
       await fetchCurrentToken()
     }
   },
-  { immediate: true }
+  { immediate: true },
 )
 </script>

components/bsx/Asset/AssetTable.vue

@@ -47,7 +47,7 @@ import { NeoButton, NeoTable, NeoTableColumn } from '@kodadot1/brick'
 import { AssetItem } from './types'
 
 const Money = defineAsyncComponent(
-  () => import('@/components/shared/format/Money.vue')
+  () => import('@/components/shared/format/Money.vue'),
 )
 const emit = defineEmits(['select'])
 defineProps({

components/bsx/Collection/ChartContainer.vue

@@ -51,15 +51,15 @@ const queryAllCollectionSaleEvents = ({ interaction_eq }) => {
         interaction_eq,
       },
     },
-    { clientId: client.value }
+    { clientId: client.value },
   )
 }
 
 const formatValue = (value: string): number => {
   return parseFloat(
     formatBalance(value, decimals.value, false)
       .replace(/,/g, '')
-      .replace('.0000', '')
+      .replace('.0000', ''),
   )
 }
 </script>

components/bsx/Create/CreateToken.vue

@@ -6,8 +6,8 @@
       can-cancel />
     <BaseTokenForm
       ref="baseTokenForm"
-      :show-explainer-text="showExplainerText"
       v-model="base"
+      :show-explainer-text="showExplainerText"
       :collections="collections"
       :has-edition="false">
       <template #main>
@@ -118,7 +118,7 @@ withDefaults(
   }>(),
   {
     showExplainerText: false,
-  }
+  },
 )
 
 const { $i18n, $consola } = useNuxtApp()
@@ -171,7 +171,7 @@ watch(price, (value) => {
 
 const balanceOfToken = computed(() => getBalance(feesToken.value))
 const depositOfToken = computed(() =>
-  getDeposit(feesToken.value, parseFloat(deposit.value))
+  getDeposit(feesToken.value, parseFloat(deposit.value)),
 )
 const balanceNotEnoughMessage = computed(() => {
   if (balanceNotEnough.value) {
@@ -233,7 +233,7 @@ const checkValidity = () => {
 
 const navigateToDetail = (collection: string, id: string): void => {
   showNotification(
-    `You will go to the detail in ${DETAIL_TIMEOUT / 1000} seconds`
+    `You will go to the detail in ${DETAIL_TIMEOUT / 1000} seconds`,
   )
   const go = () =>
     router.push({
@@ -317,6 +317,6 @@ watch(
       feesToken.value = await getFeesToken()
     }
   },
-  { immediate: true }
+  { immediate: true },
 )
 </script>

components/bsx/Create/GenerativeMint.vue

@@ -60,19 +60,19 @@ import {
 } from '@/components/generative/promptBuilder'
 
 const GenerativeMint = defineAsyncComponent(
-  () => import('@/components/generative/GenerativeMintForm.vue')
+  () => import('@/components/generative/GenerativeMintForm.vue'),
 )
 
 const ImageSelectGrid = defineAsyncComponent(
-  () => import('@/components/generative/ImageSelectGrid.vue')
+  () => import('@/components/generative/ImageSelectGrid.vue'),
 )
 
 const ContactForm = defineAsyncComponent(
-  () => import('@/components/generative/ContactForm.vue')
+  () => import('@/components/generative/ContactForm.vue'),
 )
 
 const CongratsView = defineAsyncComponent(
-  () => import('@/components/generative/CongratsView.vue')
+  () => import('@/components/generative/CongratsView.vue'),
 )
 
 const isStepsClickable = ref(false)
@@ -111,7 +111,7 @@ const submitAll = async () => {
     const metadata = await buildMetadata(
       image.value,
       builder.value,
-      predicion.value
+      predicion.value,
     )
     status.value = 'loader.generative.send'
     await doWaifu(
@@ -120,13 +120,13 @@ const submitAll = async () => {
         metadata,
         image: image.value,
       },
-      CAMPAIGN
+      CAMPAIGN,
     )
     goToStep(4)
   } catch (error) {
     showNotification(
       'Error: ' + (error as Error).message,
-      notificationTypes.warn
+      notificationTypes.warn,
     )
   } finally {
     isLoading.value = false

components/bsx/Offer/MyOffer.vue

@@ -120,11 +120,11 @@ withDefaults(
   {
     address: '',
     hideHeading: false,
-  }
+  },
 )
 
 const targetAddress = computed(
-  () => destinationAddress.value || accountId.value
+  () => destinationAddress.value || accountId.value,
 )
 
 const getUniqType = () => {
@@ -165,7 +165,7 @@ const submit = async (
   nftId: string,
   collectionId: string,
   withdraw: boolean,
-  onSuccess?: () => void
+  onSuccess?: () => void,
 ) => {
   try {
     const { apiInstance } = useApi()
@@ -182,7 +182,7 @@ const submit = async (
         : $i18n.t('offer.withdraw')
       showNotification(
         `[OFFER] Since block ${blockNumber}, ${msg}`,
-        notificationTypes.success
+        notificationTypes.success,
       )
       onSuccess && onSuccess()
     })
@@ -206,7 +206,7 @@ const displayOffers = (offers: Offer[]) => {
     filterOffers = offers.concat()
   } else {
     filterOffers = offers.filter(
-      (offer) => offer.status === selectedStatus.value
+      (offer) => offer.status === selectedStatus.value,
     )
   }
 

components/bsx/Offer/OfferTable.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="offer-table-container">
     <NeoTable
+      v-model:current-page="currentPage"
       :data="displayOffers(offers)"
       :paginated="displayOffers(offers).length > itemsPerPage"
       :per-page="itemsPerPage"
       :class="{ scrollable: offers.length > 0 }"
-      :current-page.sync="currentPage"
       td-class="is-vcentered is-narrow"
       pagination-position="top">
       <div v-if="headerText" class="has-text-centered offer-title mb-2">
@@ -171,7 +171,7 @@ withDefaults(
   {
     headerText: '',
     displayCollection: false,
-  }
+  },
 )
 
 const route = useRoute()

components/bsx/Offer/OffersUserTable.vue

@@ -115,7 +115,7 @@ const prop = withDefaults(
   {
     ownerId: '',
     hideToggle: false,
-  }
+  },
 )
 
 const timestampOffer = (date) => {
@@ -128,7 +128,7 @@ const displayOffers = (offers: Offer[]) => {
     filterOffers = offers.concat()
   } else {
     filterOffers = offers.filter(
-      (offer) => offer.status === selectedStatus.value
+      (offer) => offer.status === selectedStatus.value,
     )
   }
 
@@ -152,7 +152,7 @@ const withdrawOffer = async (offer) => {
       const msg = 'your offer has been withdrawn'
       showNotification(
         `[OFFER] Since block ${blockNumber} ${msg}`,
-        notificationTypes.success
+        notificationTypes.success,
       )
     })
   } catch (e: any) {