From 777b7b7ffb45210618fcd493b1cd577130f5aa4a Mon Sep 17 00:00:00 2001
From: roiLeo <medina.leo42@gmail.com>
Date: Fri, 21 Jul 2023 15:14:57 +0200
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=94=A7=20vue=203=20composition=20crea?=
 =?UTF-8?q?te=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 composables/useCreate.ts    |  6 ++---
 pages/bsx/create.vue        | 33 +++++++++++++-----------
 pages/ksm/create.vue        | 50 +++++++++++++++++++++++++++----------
 pages/rmrk/create.vue       | 50 +++++++++++++++++++++++++------------
 pages/snek/create.vue       | 33 ++++++++++--------------
 pages/stmn/create.vue       | 46 ++++++++++++++++++++++++----------
 utils/mixins/createMixin.ts | 44 --------------------------------
 7 files changed, 138 insertions(+), 124 deletions(-)
 delete mode 100644 utils/mixins/createMixin.ts

diff --git a/composables/useCreate.ts b/composables/useCreate.ts
index 0ea0f94f8d..94b424c5df 100644
--- a/composables/useCreate.ts
+++ b/composables/useCreate.ts
@@ -24,16 +24,16 @@ export default function useCreate() {
     showExplainerText.value = true
   }
 
-  watch(activeTab, (newTab) => {
+  watch(activeTab, (newTab: number) => {
     replaceUrl({
-      tab: newTab === 1 ? CreateComponent.NFT : CreateComponent.Collection,
+      tab: newTab === 2 ? CreateComponent.NFT : CreateComponent.Collection,
     })
   })
 
   onMounted(() => {
     const tab = route.query.tab
     if (tab) {
-      activeTab.value = tab === CreateComponent.NFT ? 1 : 0
+      activeTab.value = tab === CreateComponent.NFT ? 2 : 1
     }
   })
 
diff --git a/pages/bsx/create.vue b/pages/bsx/create.vue
index fd42bf146d..7e75b771c1 100644
--- a/pages/bsx/create.vue
+++ b/pages/bsx/create.vue
@@ -1,11 +1,10 @@
 <template>
   <section>
-    <br />
     <NeoTabs v-model="activeTab" expanded>
       <NeoTabItem v-for="x in components" :key="x" :label="x">
         <component
           :is="x"
-          :show-explainer-text="showExplainerText"
+          :show-explainer-text="false"
           @navigateToCreateNftTab="switchToNft" />
       </NeoTabItem>
     </NeoTabs>
@@ -13,8 +12,6 @@
 </template>
 
 <script lang="ts">
-import { Component, mixins } from 'nuxt-property-decorator'
-import CreateMixin from '@/utils/mixins/createMixin'
 import { NeoTabItem, NeoTabs } from '@kodadot1/brick'
 
 const Collection = () =>
@@ -23,10 +20,17 @@ const NFT = () => import('@/components/bsx/Create/CreateToken.vue')
 
 const components = { Collection, NFT, NeoTabItem, NeoTabs }
 
-@Component<BsxCreatePage>({
+export default {
+  name: 'BsxCreatePage',
   components,
-  layout() {
-    return 'centered-half-layout'
+  layout: 'centered-half-layout',
+  setup() {
+    const { activeTab, components, switchToNft } = useCreate()
+    return {
+      activeTab,
+      components,
+      switchToNft,
+    }
   },
   head() {
     const title = 'KodaDot | Low fees and low carbon minting'
@@ -39,16 +43,15 @@ const components = { Collection, NFT, NeoTabItem, NeoTabs }
     }
     return {
       title,
+      link: [
+        {
+          hid: 'canonical',
+          rel: 'canonical',
+          href: this.$root.$config.public.baseUrl + this.$route.path,
+        },
+      ],
       meta: [...this.$seoMeta(metaData)],
     }
   },
-})
-export default class BsxCreatePage extends mixins(CreateMixin) {
-  public showExplainerText = false
-
-  public switchToNft() {
-    this.switchToCreateNFT()
-    this.showExplainerText = true
-  }
 }
 </script>
diff --git a/pages/ksm/create.vue b/pages/ksm/create.vue
index 3939f10c12..686e1509e9 100644
--- a/pages/ksm/create.vue
+++ b/pages/ksm/create.vue
@@ -1,17 +1,17 @@
 <template>
   <section>
-    <br />
     <NeoTabs v-model="activeTab" expanded>
       <NeoTabItem v-for="x in components" :key="x" :label="x">
-        <component :is="x" @navigateToCreateNftTab="switchToNft" />
+        <component
+          :is="x"
+          :show-explainer-text="false"
+          @navigateToCreateNftTab="switchToNft" />
       </NeoTabItem>
     </NeoTabs>
   </section>
 </template>
 
 <script lang="ts">
-import { Component, mixins } from 'nuxt-property-decorator'
-import CreateMixin from '@/utils/mixins/createMixin'
 import { NeoTabItem, NeoTabs } from '@kodadot1/brick'
 
 const Collection = () => import('@/components/rmrk/Create/Create.vue')
@@ -19,14 +19,38 @@ const NFT = () => import('@/components/rmrk/Create/CreateToken.vue')
 
 const components = { Collection, NFT, NeoTabItem, NeoTabs }
 
-@Component({ components })
-export default class RmrkCreatePage extends mixins(CreateMixin) {
-  layout() {
-    return 'centered-half-layout'
-  }
-
-  public switchToNft() {
-    this.switchToCreateNFT()
-  }
+export default {
+  name: 'KsmCreatePage',
+  components,
+  layout: 'centered-half-layout',
+  setup() {
+    const { activeTab, components, switchToNft } = useCreate()
+    return {
+      activeTab,
+      components,
+      switchToNft,
+    }
+  },
+  head() {
+    const title = 'KodaDot | Low fees and low carbon minting'
+    const metaData = {
+      title,
+      type: 'article',
+      description: 'Create carbonless NFTs with low on-chain fees',
+      url: '/ksm/create',
+      image: `${this.$config.public.baseUrl}/k_card.png`,
+    }
+    return {
+      title,
+      link: [
+        {
+          hid: 'canonical',
+          rel: 'canonical',
+          href: this.$root.$config.public.baseUrl + this.$route.path,
+        },
+      ],
+      meta: [...this.$seoMeta(metaData)],
+    }
+  },
 }
 </script>
diff --git a/pages/rmrk/create.vue b/pages/rmrk/create.vue
index f22d082b0c..b39daa7fe7 100644
--- a/pages/rmrk/create.vue
+++ b/pages/rmrk/create.vue
@@ -1,11 +1,10 @@
 <template>
   <section>
-    <br />
     <NeoTabs v-model="activeTab" expanded>
       <NeoTabItem v-for="x in components" :key="x" :label="x">
         <component
           :is="x"
-          :show-explainer-text="showExplainerText"
+          :show-explainer-text="false"
           @navigateToCreateNftTab="switchToNft" />
       </NeoTabItem>
     </NeoTabs>
@@ -13,8 +12,6 @@
 </template>
 
 <script lang="ts">
-import { Component, mixins } from 'nuxt-property-decorator'
-import CreateMixin from '@/utils/mixins/createMixin'
 import { NeoTabItem, NeoTabs } from '@kodadot1/brick'
 
 const Collection = () => import('@/components/rmrk/Create/Create.vue')
@@ -22,17 +19,38 @@ const NFT = () => import('@/components/rmrk/Create/CreateToken.vue')
 
 const components = { Collection, NFT, NeoTabItem, NeoTabs }
 
-@Component({ components })
-export default class RmrkCreatePage extends mixins(CreateMixin) {
-  layout() {
-    return 'centered-half-layout'
-  }
-
-  public showExplainerText = false
-
-  public switchToNft() {
-    this.switchToCreateNFT()
-    this.showExplainerText = true
-  }
+export default {
+  name: 'RmrkCreatePage',
+  components,
+  layout: 'centered-half-layout',
+  setup() {
+    const { activeTab, components, switchToNft } = useCreate()
+    return {
+      activeTab,
+      components,
+      switchToNft,
+    }
+  },
+  head() {
+    const title = 'KodaDot | Low fees and low carbon minting'
+    const metaData = {
+      title,
+      type: 'article',
+      description: 'Create carbonless NFTs with low on-chain fees',
+      url: '/rmrk/create',
+      image: `${this.$config.public.baseUrl}/k_card.png`,
+    }
+    return {
+      title,
+      link: [
+        {
+          hid: 'canonical',
+          rel: 'canonical',
+          href: this.$root.$config.public.baseUrl + this.$route.path,
+        },
+      ],
+      meta: [...this.$seoMeta(metaData)],
+    }
+  },
 }
 </script>
diff --git a/pages/snek/create.vue b/pages/snek/create.vue
index 997e7aea03..f9e356d35b 100644
--- a/pages/snek/create.vue
+++ b/pages/snek/create.vue
@@ -1,14 +1,10 @@
 <template>
   <section>
-    <br />
     <NeoTabs v-model="activeTab" expanded>
-      <NeoTabItem
-        v-for="component in components"
-        :key="component"
-        :label="component">
+      <NeoTabItem v-for="x in components" :key="x" :label="x">
         <component
-          :is="component"
-          :show-explainer-text="showExplainerText"
+          :is="x"
+          :show-explainer-text="false"
           @navigateToCreateNftTab="switchToNft" />
       </NeoTabItem>
     </NeoTabs>
@@ -16,8 +12,6 @@
 </template>
 
 <script lang="ts">
-import { Component, mixins } from 'nuxt-property-decorator'
-import CreateMixin from '@/utils/mixins/createMixin'
 import { NeoTabItem, NeoTabs } from '@kodadot1/brick'
 
 const Collection = () =>
@@ -26,10 +20,17 @@ const NFT = () => import('@/components/bsx/Create/CreateToken.vue')
 
 const components = { Collection, NFT, NeoTabItem, NeoTabs }
 
-@Component<BsxCreatePage>({
+export default {
+  name: 'SnekCreatePage',
   components,
-  layout() {
-    return 'centered-half-layout'
+  layout: 'centered-half-layout',
+  setup() {
+    const { activeTab, components, switchToNft } = useCreate()
+    return {
+      activeTab,
+      components,
+      switchToNft,
+    }
   },
   head() {
     const title = 'KodaDot | Low fees and low carbon minting'
@@ -52,13 +53,5 @@ const components = { Collection, NFT, NeoTabItem, NeoTabs }
       meta: [...this.$seoMeta(metaData)],
     }
   },
-})
-export default class BsxCreatePage extends mixins(CreateMixin) {
-  public showExplainerText = false
-
-  public switchToNft() {
-    this.switchToCreateNFT()
-    this.showExplainerText = true
-  }
 }
 </script>
diff --git a/pages/stmn/create.vue b/pages/stmn/create.vue
index 304b4b666a..88a84d2ff8 100644
--- a/pages/stmn/create.vue
+++ b/pages/stmn/create.vue
@@ -1,36 +1,56 @@
 <template>
   <section>
-    <b-tabs v-model="activeTab" destroy-on-hide expanded>
-      <b-tab-item v-for="x in components" :key="x" :label="x">
+    <NeoTabs v-model="activeTab" expanded>
+      <NeoTabItem v-for="x in components" :key="x" :label="x">
         <component
           :is="x"
-          v-if="components[activeTab] === x"
-          :show-explainer-text="showExplainerText"
+          :show-explainer-text="false"
           @navigateToCreateNftTab="switchToNft" />
-      </b-tab-item>
-    </b-tabs>
+      </NeoTabItem>
+    </NeoTabs>
   </section>
 </template>
 
 <script lang="ts">
+import { NeoTabItem, NeoTabs } from '@kodadot1/brick'
+
 const Collection = () => import('@/components/stmn/Create/CreateCollection.vue')
 const NFT = () => import('@/components/stmn/Create/CreateToken.vue')
 
+const components = { Collection, NFT, NeoTabItem, NeoTabs }
+
 export default {
-  components: {
-    Collection,
-    NFT,
-  },
+  name: 'StmnCreatePage',
+  components,
   layout: 'centered-half-layout',
   setup() {
-    const { activeTab, showExplainerText, components, switchToNft } =
-      useCreate()
+    const { activeTab, components, switchToNft } = useCreate()
     return {
       activeTab,
-      showExplainerText,
       components,
       switchToNft,
     }
   },
+  head() {
+    const title = 'KodaDot | Low fees and low carbon minting'
+    const metaData = {
+      title,
+      type: 'article',
+      description: 'Create carbonless NFTs with low on-chain fees',
+      url: '/stmn/create',
+      image: `${this.$config.public.baseUrl}/k_card.png`,
+    }
+    return {
+      title,
+      link: [
+        {
+          hid: 'canonical',
+          rel: 'canonical',
+          href: this.$root.$config.public.baseUrl + this.$route.path,
+        },
+      ],
+      meta: [...this.$seoMeta(metaData)],
+    }
+  },
 }
 </script>
diff --git a/utils/mixins/createMixin.ts b/utils/mixins/createMixin.ts
deleted file mode 100644
index 0099da2bfa..0000000000
--- a/utils/mixins/createMixin.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Component, Vue, Watch } from 'nuxt-property-decorator'
-import { showNotification } from '@/utils/notification'
-
-export const enum CreateComponent {
-  Collection = 'Collection',
-  NFT = 'NFT',
-}
-
-@Component
-export default class CreateMixin extends Vue {
-  public activeTab = 1
-
-  public components: CreateComponent[] = [
-    CreateComponent.Collection,
-    CreateComponent.NFT,
-  ]
-
-  switchToCreateNFT() {
-    const targetIdx = this.components.findIndex(
-      (componentName) => componentName === CreateComponent.NFT
-    )
-    const delaySwitchFn = () =>
-      (this.activeTab = targetIdx > -1 ? targetIdx : 0)
-    showNotification('You will go to create nft in 2 seconds')
-    setTimeout(delaySwitchFn, 2000)
-  }
-
-  @Watch('activeTab', { immediate: true })
-  onTabChange(newTab: number) {
-    const { replaceUrl } = useReplaceUrl()
-
-    replaceUrl({
-      tab: newTab === 2 ? CreateComponent.NFT : CreateComponent.Collection,
-    })
-  }
-
-  created() {
-    const route = useRoute()
-    const tab = route.query.tab
-    if (tab) {
-      this.activeTab = tab === CreateComponent.NFT ? 2 : 1
-    }
-  }
-}

From c26c0c6fc9bbe0ace8e5cba5cf6bcbe0f600cbe3 Mon Sep 17 00:00:00 2001
From: roiLeo <medina.leo42@gmail.com>
Date: Fri, 21 Jul 2023 15:36:06 +0200
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=94=A7=20create=20tabs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 composables/useCreate.ts | 23 ++++++++---------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/composables/useCreate.ts b/composables/useCreate.ts
index 94b424c5df..a57467a592 100644
--- a/composables/useCreate.ts
+++ b/composables/useCreate.ts
@@ -6,21 +6,21 @@ export const enum CreateComponent {
 }
 
 export default function useCreate() {
-  const activeTab = ref(0)
   const showExplainerText = ref(false)
   const { replaceUrl } = useReplaceUrl()
   const route = useRoute()
-
   const components = [CreateComponent.Collection, CreateComponent.NFT]
+  const activeTab = computed({
+    get: () => (route.query.tab === CreateComponent.NFT ? 2 : 1),
+    set: (value) =>
+      replaceUrl({
+        tab: value === 2 ? CreateComponent.NFT : CreateComponent.Collection,
+      }),
+  })
 
   const switchToNft = () => {
-    const targetIdx = components.findIndex(
-      (componentName) => componentName === CreateComponent.NFT
-    )
-    const delaySwitchFn = () =>
-      (activeTab.value = targetIdx > -1 ? targetIdx : 0)
     showNotification('You will go to create nft in 2 seconds')
-    setTimeout(delaySwitchFn, 2000)
+    setTimeout(() => replaceUrl({ tab: CreateComponent.NFT }), 2000)
     showExplainerText.value = true
   }
 
@@ -30,13 +30,6 @@ export default function useCreate() {
     })
   })
 
-  onMounted(() => {
-    const tab = route.query.tab
-    if (tab) {
-      activeTab.value = tab === CreateComponent.NFT ? 2 : 1
-    }
-  })
-
   return {
     activeTab,
     showExplainerText,