feat: mass mint with attributes

components/massmint/EditPanel.vue

@@ -10,7 +10,7 @@
     :on-cancel="closePanel"
   >
     <div
-      class="border-l bg-background-color navbar-margin p-5 flex flex-col items-center justify-between h-full"
+      class="border-l bg-background-color navbar-margin p-5 flex flex-col items-center justify-between"
     >
       <div class="flex w-full flex-col justify-between items-center">
         <div class="flex w-full">
@@ -58,6 +58,12 @@
               height="10rem"
             />
           </NeoField>
+          <NeoField :label="`${$t('nft.properties.label')}`">
+            <CustomAttributeInput
+              v-model="tags"
+              :max="10"
+            />
+          </NeoField>
           <NeoField
             :label="$t('massmint.price')"
             class="w-full"
@@ -100,6 +106,7 @@ import {
   NeoSidebar,
 } from '@kodadot1/brick'
 import type { NFT } from './types'
+import CustomAttributeInput from '@/components/rmrk/Create/CustomAttributeInput.vue'
 
 const props = defineProps<{
   nft?: NFT
@@ -112,14 +119,14 @@ const { placeholder } = useTheme()
 const { unit } = useChain()
 
 const internalNfT = ref<Partial<NFT>>({})
-const dirty = ref({ name: false, description: false, price: false })
+const dirty = ref({ name: false, description: false, price: false, tags: false })
 
-const createField = fieldName =>
+const createField = (fieldName: string, defaultValue: string | unknown = '') =>
   computed({
     get: () =>
       dirty.value[fieldName]
         ? internalNfT.value[fieldName]
-        : props.nft?.[fieldName] || '',
+        : props.nft?.[fieldName] || defaultValue,
     set: (value) => {
       internalNfT.value = {
         ...internalNfT.value,
@@ -133,12 +140,13 @@ const createField = fieldName =>
 const name = createField('name')
 const description = createField('description')
 const price = createField('price')
+const tags = createField('tags', [])
 
 const emit = defineEmits(['close', 'save'])
 
 const closePanel = () => {
   internalNfT.value = {}
-  dirty.value = { name: false, description: false, price: false }
+  dirty.value = { name: false, description: false, price: false, tags: false }
   emit('close')
 }
 
@@ -154,7 +162,7 @@ const save = () => {
 
 <style lang="scss" scoped>
 .navbar-margin {
-  margin-top: 83px;
+  margin-top: 80px;
 }
 
 .cover {

components/massmint/OverviewTable.vue

@@ -21,6 +21,9 @@
             <div class="column is-3 text-k-grey">
               {{ $t('massmint.description') }}
             </div>
+            <div class="column is-3 text-k-grey">
+              {{ $t('nft.properties.label') }}
+            </div>
             <div class="column text-k-grey">
               {{ $t('massmint.price') }}
             </div>
@@ -70,6 +73,17 @@
                 {{ nft.description || $t('massmint.descriptionMissing') }}
               </div>
             </div>
+            <div class="column is-3 flex items-center">
+              <div
+                class="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap max-w-[90%]"
+                :class="{
+                  'text-k-orange': !nft.tags?.length,
+                }"
+                @click="openSideBarWith(nft)"
+              >
+                {{ getNftAttributesOverview(nft) || $t('massmint.attributesMissing') }}
+              </div>
+            </div>
             <div class="column flex items-center">
               <div
                 class="cursor-pointer"
@@ -198,5 +212,8 @@ const handleIntersection = (entries: IntersectionObserverEntry[]) => {
 const getNativeNftPrice = (nft: NFT): string =>
   String((nft?.price || 0) * Math.pow(10, decimals.value))
 
+const getNftAttributesOverview = (nft: NFT): string | undefined =>
+  nft.tags?.map(tag => tag.value).join(', ')
+
 useIntersectionObserver(sentinel, handleIntersection, { threshold: 0.66 })
 </script>

components/massmint/descriptionTabs.ts

@@ -8,11 +8,25 @@ export const descriptionTabs = {
           "file": "file1.jpg",
           "name": "Image1",
           "description": "This is an image",
+          "attributes": [{
+            "value": "white",
+            "trait_type": "color"
+          }, {
+            "value": "happy",
+            "trait_type": "expression"
+          }],
           "price": 2.45
       },
       {
           "file": "file2.jpg",
           "name": "Image2",
+          "attributes": [{
+            "value": "blue",
+            "trait_type": "color"
+          }, {
+            "value": "shy",
+            "trait_type": "expression"
+          }],
           "price": 200
       },
       {

components/massmint/types.ts

@@ -16,7 +16,7 @@ export type NFT = {
   description?: string
   price?: number
   status?: Status
-  attributes?: OpenSeaAttribute[]
+  tags?: OpenSeaAttribute[]
 }
 
 export type NFTToMint = {

components/rmrk/Create/AttributeInput.vue

@@ -3,6 +3,7 @@
     <NeoButton
       v-if="!disabled"
       no-shadow
+      class="self-center"
       size="medium"
       icon-left="times"
       data-testid="attribute-button-remove"

components/rmrk/Create/CustomAttributeInput.vue

@@ -2,6 +2,7 @@
   <CollapseWrapper
     :visible="visible"
     :hidden="hidden"
+    :default-open="defaultOpen"
   >
     <div
       v-for="(attribute, index) in attributes"
@@ -40,12 +41,14 @@ const props = withDefaults(
     max: number
     visible?: string
     hidden?: string
+    defaultOpen?: boolean
   }>(),
   {
     max: 0,
     visible: 'collapse.collection.attributes.show',
     hidden: 'collapse.collection.attributes.hide',
     modelValue: () => [],
+    defaultOpen: false,
   },
 )
 

components/shared/collapse/CollapseWrapper.vue

@@ -32,14 +32,16 @@ const cprops = withDefaults(
     hidden: string
     bottom?: boolean
     isSelectable?: boolean
+    defaultOpen?: boolean
   }>(),
   {
     visible: 'Show',
     hidden: 'Hide',
     bottom: false,
     isSelectable: false,
+    defaultOpen: false,
   },
 )
-const isOpen = ref(false)
+const isOpen = ref(cprops.defaultOpen)
 const position = computed(() => (cprops.bottom ? 'bottom' : 'top'))
 </script>

composables/massmint/parsers/common.ts

@@ -6,6 +6,7 @@ export type Entry = {
   name?: string
   description?: string
   price?: number
+  tags?: OpenSeaAttribute[]
   valid: boolean
   currency?: string
   attributes?: OpenSeaAttribute[]
@@ -25,6 +26,10 @@ export const isValidEntry = (entry: Partial<Entry>): boolean => {
     return false
   }
 
+  if (entry.attributes && !Array.isArray(entry.attributes)) {
+    return false
+  }
+
   return true
 }
 

composables/massmint/parsers/parseJson.ts

@@ -19,7 +19,7 @@ export function parseJson(jsonData: string): Record<string, Entry> {
         name: item.name || undefined,
         description: item.description || undefined,
         price: item.price !== undefined ? parseFloat(item.price) : undefined,
-        attributes: item.attributes || [],
+        tags: item.attributes,
       }
 
       if (!entry.file) {

locales/en.json

@@ -1058,6 +1058,7 @@
   "markdownSupported": "Markdown supported",
   "massmint": {
     "areYouSureDelete": "Are you sure you want to delete",
+    "attributesMissing": "Attributes Missing",
     "backToOnbaording": "Back To Onboarding",
     "cancel": "Cancel",
     "cantMintNote": "NOTE: You cannot mint unless you fill in the required information or delete incomplete files.",

public/massmint/template.json

@@ -3,13 +3,29 @@
       "file": "art1.png",
       "name": "Art #1",
       "description": "Description for the Art #1",
+      "attributes": [{
+        "value": "white",
+        "trait_type": "color"
+      }, {
+        "value": "happy",
+        "trait_type": "expression"
+      }],
       "price": 1
+
   },
   {
       "file": "art2.png",
       "name": "Art #2",
       "description": "Description for the Art #2",
+      "attributes": [{
+        "value": "blue",
+        "trait_type": "color"
+      }, {
+        "value": "shy",
+        "trait_type": "expression"
+      }],
       "price": 1
+
   },
   {
       "file": "art3.png",