🔧 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/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">
@@ -160,11 +160,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/Create/CreateCollection.vue

@@ -1,204 +1 @@
-<template>
-  <div>
-    <Loader v-model="isLoading" :status="status" />
-    <BaseCollectionForm ref="collectionForm" v-bind.sync="base">
-      <template #main>
-        <NeoField class="mb-5" />
-      </template>
-      <template #footer>
-        <!-- Hidden as of 11.July.2022 due to lack of convenience #3407 -->
-        <!-- <CustomAttributeInput
-          :max="10"
-          v-model="attributes"
-          class="mb-3"
-          visible="collapse.collection.attributes.show"
-          hidden="collapse.collection.attributes.hide" /> -->
-        <NeoField>
-          <p class="has-text-weight-medium is-size-6 has-text-info">
-            {{ $t('mint.deposit') }}:
-            <Money :value="collectionDeposit" :token-id="tokenId" inline />
-          </p>
-        </NeoField>
-        <NeoField>
-          <AccountBalance />
-        </NeoField>
-        <NeoField>
-          <MultiPaymentFeeButton :account-id="accountId" :prefix="urlPrefix" />
-        </NeoField>
-        <NeoField variant="danger" :message="balanceNotEnoughMessage">
-          <SubmitButton
-            expanded
-            label="create collection"
-            :loading="isLoading"
-            @click="submit" />
-        </NeoField>
-      </template>
-    </BaseCollectionForm>
-  </div>
-</template>
-
-<script lang="ts">
-import { Attribute } from '@/components/rmrk/types'
-import {
-  getMetadataDeposit,
-  getclassDeposit,
-} from '@/components/unique/apiConstants'
-import { hasEnoughToken } from '@/components/unique/utils'
-import formatBalance from '@/utils/format/balance'
-import AuthMixin from '@/utils/mixins/authMixin'
-import ChainMixin from '@/utils/mixins/chainMixin'
-import MetaTransactionMixin from '@/utils/mixins/metaMixin'
-import PrefixMixin from '@/utils/mixins/prefixMixin'
-import ApiUrlMixin from '@/utils/mixins/apiUrlMixin'
-import { notificationTypes, showNotification } from '@/utils/notification'
-import { estimate } from '@/utils/transactionExecutor'
-import { Interaction } from '@kodadot1/minimark/v1'
-import { Component, Ref, Watch, mixins } from 'nuxt-property-decorator'
-import { ApiFactory, onApiConnect } from '@kodadot1/sub-api'
-import { dummyIpfsCid } from '@/utils/ipfs'
-import { createArgs } from '@/composables/transaction/mintCollection/utils'
-import { BaseCollectionType } from '@/composables/transaction/types'
-import shouldUpdate from '@/utils/shouldUpdate'
-import { Token, getBalance, getDeposit, getFeesToken } from './utils'
-import { NeoField } from '@kodadot1/brick'
-
-const components = {
-  Loader: () => import('@/components/shared/Loader.vue'),
-  BasicInput: () => import('@/components/shared/form/BasicInput.vue'),
-  BaseCollectionForm: () => import('@/components/base/BaseCollectionForm.vue'),
-  BasicSwitch: () => import('@/components/shared/form/BasicSwitch.vue'),
-  SubmitButton: () => import('@/components/base/SubmitButton.vue'),
-  Money: () => import('@/components/bsx/format/TokenMoney.vue'),
-  AccountBalance: () => import('@/components/shared/AccountBalance.vue'),
-  MultiPaymentFeeButton: () =>
-    import('@/components/bsx/specific/MultiPaymentFeeButton.vue'),
-  NeoField,
-}
-
-@Component({ components })
-export default class CreateCollection extends mixins(
-  MetaTransactionMixin,
-  ChainMixin,
-  AuthMixin,
-  PrefixMixin,
-  ApiUrlMixin
-) {
-  public base: BaseCollectionType = {
-    name: '',
-    file: null,
-    description: '',
-  }
-  public collectionDeposit = ''
-  protected id = '0'
-  protected attributes: Attribute[] = []
-  protected balanceNotEnough = false
-  public feesToken: Token = 'BSX'
-  @Ref('collectionForm') readonly collectionForm
-
-  public checkValidity() {
-    return this.collectionForm.checkValidity()
-  }
-
-  get balanceNotEnoughMessage() {
-    if (this.balanceNotEnough) {
-      return this.$t('tooltip.notEnoughBalance')
-    }
-    return ''
-  }
-
-  @Watch('accountId', { immediate: true })
-  async onAccountIdChange(val: string, oldVal: string) {
-    if (shouldUpdate(val, oldVal)) {
-      this.feesToken = await getFeesToken()
-    }
-  }
-
-  public async created() {
-    onApiConnect(this.apiUrl, (api) => {
-      const classDeposit = getclassDeposit(api)
-      const metadataDeposit = getMetadataDeposit(api)
-      this.collectionDeposit = (classDeposit + metadataDeposit).toString()
-    })
-  }
-  get balanceOfToken() {
-    return getBalance(this.feesToken)
-  }
-
-  get depositOfToken() {
-    return getDeposit(this.feesToken, parseFloat(this.collectionDeposit))
-  }
-
-  protected async tryToEstimateTx(): Promise<string> {
-    const api = await ApiFactory.useApiInstance(this.apiUrl)
-    const cb = api.tx.utility.batchAll
-    const metadata = dummyIpfsCid()
-    const randomId = 0
-    const args = [createArgs(randomId, metadata)]
-    return estimate(this.accountId, cb, args)
-  }
-
-  protected async checkBalanceBeforeTx(): Promise<void> {
-    const estimated = await this.tryToEstimateTx()
-    const deposit = this.collectionDeposit
-    const hasTokens = hasEnoughToken(this.balance, estimated, deposit)
-    this.$consola.log('hasTokens', hasTokens)
-    if (!hasTokens) {
-      throw new Error(
-        `Not enough tokens: Currently have ${formatBalance(
-          this.balance,
-          this.decimals,
-          this.unit
-        )} tokens`
-      )
-    }
-  }
-
-  public async submit(): Promise<void> {
-    // check fields
-    if (!this.checkValidity()) {
-      return
-    }
-    // check balance
-    if (!!this.collectionDeposit && this.balanceOfToken < this.depositOfToken) {
-      this.balanceNotEnough = true
-      return
-    }
-    this.isLoading = true
-    this.status = 'loader.checkBalance'
-
-    const { transaction, status, isLoading, blockNumber } = useTransaction()
-    watch([isLoading, status], () => {
-      this.isLoading = isLoading.value
-      if (Boolean(status.value)) {
-        this.status = status.value
-      }
-    })
-    watch(blockNumber, (block) => {
-      if (block) {
-        this.$emit('created')
-      }
-    })
-
-    try {
-      // await this.checkBalanceBeforeTx()
-      showNotification(
-        this.$t('mint.creatingCollection', { name: this.base.name }),
-        notificationTypes.info
-      )
-      this.status = 'loader.ipfs'
-      transaction({
-        interaction: Interaction.MINT,
-        urlPrefix: usePrefix().urlPrefix.value,
-        collection: {
-          ...this.base,
-          tags: this.attributes,
-        },
-      })
-    } catch (e: any) {
-      showNotification(`[ERR] ${e}`, notificationTypes.warn)
-      this.$consola.error(e)
-      this.isLoading = false
-    }
-  }
-}
-</script>
+<template></template>

components/bsx/Create/CreateToken.vue

@@ -1,4 +1,5 @@
-<template>
+<template></template>
+<!-- <template>
   <div>
     <Loader v-model="isLoading" :status="status" can-cancel />
     <BaseTokenForm
@@ -320,4 +321,4 @@ export default class CreateToken extends mixins(
     setTimeout(go, DETAIL_TIMEOUT)
   }
 }
-</script>
+</script> -->

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>