Merge pull request kodadot#10626 from hassnian/issue-revert-create

⚡ Create is back

assets/styles/pages/create.scss

@@ -0,0 +1,42 @@
+@import '@/assets/styles/abstracts/variables';
+
+:deep(.o-field__label) {
+  margin-bottom: 4px;
+}
+
+.o-field:not(:last-child) {
+  margin-bottom: 2rem;
+}
+
+.form-addons {
+  @apply text-center leading-[3rem] h-12 w-16 border-l-[none];
+  @include ktheme() {
+    border: 1px solid theme('card-border-color');
+  }
+}
+
+.sale :deep(.o-field__label) {
+  position: relative;
+  -webkit-text-stroke: 1px #000;
+  filter: drop-shadow(1px 1px #000);
+  font-weight: 700;
+  font-size: 18px;
+}
+
+.sale {
+  position: relative;
+}
+
+.hidden-sale-label {
+  @apply absolute pointer-events-none text-transparent bg-clip-text font-bold text-lg left-0 top-0;
+  background: linear-gradient(to right, white, white, white);
+  -webkit-text-stroke: 0;
+  -webkit-background-clip: text;
+}
+
+.sale.sale-on {
+  .hidden-sale-label {
+    background: linear-gradient(90deg, #ffffff 30%, #ff7ac3 100%);
+    background-clip: text;
+  }
+}

components/Navbar.vue

@@ -114,6 +114,12 @@
             data-testid="learn">
             {{ $t('learn') }}
           </a>
+          <CreateDropdown
+            v-show="isCreateVisible"
+            class="navbar-create custom-navbar-item ml-0"
+            data-testid="create"
+            :chain="urlPrefix"
+            @select="showMobileNavbar" />
 
           <MobileExpandableSection
             v-slot="{ onCloseMobileSubMenu }"
@@ -199,6 +205,7 @@ import { NeoButton, 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'
 import MobileExpandableSection from '@/components/navbar/MobileExpandableSection.vue'
 import MobileLanguageOption from '@/components/navbar/MobileLanguageOption.vue'
 import NavbarChainOptions from '@/components/navbar/NavbarChainOptions.vue'
@@ -208,6 +215,7 @@ import ConnectWalletButton from '@/components/shared/ConnectWalletButton.vue'
 
 import { useIdentityStore } from '@/stores/identity'
 import { getChainNameByPrefix } from '@/utils/chain'
+import { createVisible } from '@/utils/config/permission.config'
 import ShoppingCartButton from './navbar/ShoppingCartButton.vue'
 
 const { neoModal } = useProgrammatic()
@@ -225,6 +233,8 @@ const mobilSearchRef = ref<{ focusInput: () => void } | null>(null)
 
 const account = computed(() => identityStore.getAuthAddress)
 
+const isCreateVisible = computed(() => createVisible(urlPrefix.value))
+
 const logoSrc = computed(() => {
   const variant = isTouch ? 'Koda' : 'Koda_Beta'
   const color = isDarkMode.value ? '_dark' : ''

components/TheFooter.vue

@@ -207,11 +207,6 @@ const menuKodadot: Menu[] = [
     url: '/terms-of-use',
     external: false,
   },
-  {
-    name: $i18n.t('footer.create'),
-    url: '/create',
-    external: false,
-  },
 ]
 
 const socials = [

components/base/BaseCollectionForm.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <h2 class="title text-3xl">
+      {{ $t(label) }}
+    </h2>
+    <slot name="header"></slot>
+    <NeoField>
+      <Auth />
+    </NeoField>
+
+    <MetadataUpload
+      ref="collectionImage"
+      v-model="vFile"
+      required
+      :label="$t('mint.collection.drop')"
+      expanded
+      preview
+      accept="image/png, image/jpeg, image/gif, image/svg+xml, image/svg" />
+
+    <BasicInput
+      ref="collectionName"
+      v-model="vName"
+      :label="$t('mint.collection.name.label')"
+      :message="$t('mint.collection.name.message')"
+      :placeholder="$t('mint.collection.name.placeholder')"
+      expanded
+      required
+      spellcheck="true"
+      maxlength="60" />
+
+    <slot name="main"></slot>
+
+    <BasicInput
+      v-model="vDescription"
+      maxlength="500"
+      type="textarea"
+      spellcheck="true"
+      :label="$t('mint.collection.description.label')"
+      :message="$t('mint.collection.description.message')"
+      :placeholder="$t('mint.collection.description.placeholder')" />
+
+    <slot name="footer"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NeoField } from '@kodadot1/brick'
+import Auth from '@/components/shared/Auth.vue'
+import MetadataUpload from '@/components/shared/DropUpload.vue'
+import BasicInput from '@/components/shared/form/BasicInput.vue'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: 'mint.collection.create',
+  },
+  protectiveMargin: Boolean,
+  name: String,
+  description: String,
+  file: Blob,
+})
+const emit = defineEmits(['update:name', 'update:description', 'update:file'])
+
+const vName = useVModel(props, 'name', emit)
+
+const vDescription = useVModel(props, 'description', emit)
+
+const vFile = useVModel(props, 'file', emit)
+
+const collectionName = ref<InstanceType<typeof BasicInput>>()
+const collectionImage = ref<InstanceType<typeof MetadataUpload>>()
+
+const checkValidity = () => {
+  return (
+    collectionImage.value?.checkValidity() &&
+    collectionName.value?.checkValidity()
+  )
+}
+
+defineExpose({ checkValidity })
+</script>

components/base/BaseTokenForm.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <slot name="header"></slot>
+
+    <NeoField>
+      <Auth />
+    </NeoField>
+
+    <CollectionSelect
+      :collections="collections"
+      :show-explainer-text="showExplainerText"
+      @change-selected-collection="onCollectionSelected" />
+
+    <transition-group name="fade">
+      <template v-if="vSelectedCollection">
+        <MetadataUpload
+          ref="upload"
+          key="file"
+          v-model="vFile"
+          :required="true"
+          :label="$t('mint.nft.drop')"
+          expanded
+          preview />
+
+        <BasicInput
+          ref="nftName"
+          key="name"
+          v-model="vName"
+          required
+          :label="$t('mint.nft.name.label')"
+          :message="$t('mint.nft.name.message')"
+          :placeholder="$t('mint.nft.name.placeholder')"
+          expanded
+          spellcheck="true"
+          maxlength="60" />
+
+        <BasicInput
+          key="description"
+          v-model="vDescription"
+          maxlength="500"
+          class="my-5"
+          type="textarea"
+          spellcheck="true"
+          :label="$t('mint.nft.description.label')"
+          :message="$t('mint.nft.description.message')"
+          :placeholder="$t('mint.nft.description.placeholder')" />
+
+        <BasicNumberInput
+          v-if="hasCopies"
+          key="copies"
+          v-model="vCopies"
+          :label="$t('mint.nft.edition.label')"
+          :message="$t('mint.nft.edition.message')"
+          :placeholder="$t('mint.nft.edition.placeholder')"
+          expanded
+          :min="1"
+          :max="clickableMax" />
+
+        <MetadataUpload
+          v-if="secondaryFileVisible"
+          key="secondaryFile"
+          v-model="vSecondFile"
+          :label="$t('mint.nft.cover')"
+          icon="file-image"
+          preview
+          accept="image/png, image/jpeg, image/gif"
+          expanded />
+
+        <slot name="main"></slot>
+
+        <slot name="footer"></slot>
+      </template>
+    </transition-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MediaType } from '../rmrk/types'
+import { resolveMedia } from '../rmrk/utils'
+import { BaseMintedCollection as MintedCollection } from './types'
+import { NeoField } from '@kodadot1/brick'
+import Auth from '@/components/shared/Auth.vue'
+import MetadataUpload from '@/components/shared/DropUpload.vue'
+import BasicInput from '@/components/shared/form/BasicInput.vue'
+import BasicNumberInput from '@/components/shared/form/BasicNumberInput.vue'
+import CollectionSelect from '@/components/base/CollectionSelect.vue'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: 'context',
+  },
+  collections: {
+    type: Array,
+    default: () => [],
+  },
+  hasCopies: {
+    type: Boolean,
+    default: true,
+  },
+  showExplainerText: {
+    type: Boolean,
+    default: false,
+  },
+  name: String,
+  description: String,
+  file: Blob,
+  selectedCollection: Object,
+  copies: Number,
+  secondFile: Blob,
+})
+
+const emit = defineEmits([
+  'update:name',
+  'update:description',
+  'update:file',
+  'update:selectedCollection',
+  'update:copies',
+  'update:secondFile',
+])
+
+const nftName = ref<InstanceType<typeof BasicInput>>()
+const upload = ref<InstanceType<typeof MetadataUpload>>()
+
+const vName = useVModel(props, 'name', emit)
+
+const vDescription = useVModel(props, 'description', emit)
+
+const vFile = useVModel(props, 'file', emit)
+
+// const vSelectedCollection = useVModel(props, 'selectedCollection', emit)
+const vSelectedCollection = ref()
+
+const vCopies = useVModel(props, 'copies', emit)
+
+const vSecondFile = useVModel(props, 'secondFile', emit)
+
+const checkValidity = () => {
+  const nftNameValid = nftName.value?.checkValidity()
+  const uploadValid = upload.value?.checkValidity()
+  return nftNameValid && uploadValid
+}
+
+const onCollectionSelected = (collection: MintedCollection) => {
+  vSelectedCollection.value = collection
+}
+
+const clickableMax = ref(Infinity)
+
+const fileType = computed(() => resolveMedia(vFile.value?.type))
+
+const secondaryFileVisible = computed(() => {
+  const ft = fileType.value
+  return ![MediaType.UNKNOWN, MediaType.IMAGE].some((t) => t === ft)
+})
+
+defineExpose({ checkValidity })
+</script>