Merge pull request #6453 from roiLeo/chore/prefix/create

kodadot · Aug 2, 2023 · 7ce5bf3 · 7ce5bf3
2 parents 2a3c35a + 99241f2
commit 7ce5bf3
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 138 deletions.
diff --git a/composables/useCreate.ts b/composables/useCreate.ts
@@ -6,37 +6,30 @@ 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
  }
 
- 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
- }
- })
-
  return {
  activeTab,
  showExplainerText,

diff --git a/pages/bsx/create.vue b/pages/bsx/create.vue
@@ -1,20 +1,17 @@
 <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>
  </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 = () =>
@@ -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
@@ -1,32 +1,56 @@
 <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')
 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
@@ -1,38 +1,56 @@
 <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>
  </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')
 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
@@ -1,23 +1,17 @@
 <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>
  </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 = () =>
@@ -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
@@ -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>