Use trait_type instead of name for attribute keys

mintgarden-io · Sep 7, 2022 · 1c69ea7 · 1c69ea7
1 parent 415bb1a
commit 1c69ea7
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 22 deletions.
diff --git a/src/pages/Minting.vue b/src/pages/Minting.vue
@@ -141,18 +141,18 @@ const isMintingEnabled = computed(() => {
   return confirmLegal.value && (!progress.value || progress.value === 'done' || someError.value);
 });
 
-const setAttributeValue = (name: string, e) => {
+const setAttributeValue = (trait_type: string, e) => {
   const value = e.target.value;
 
-  const existingAttributeIndex = metadata.attributes.findIndex((attribute: any) => attribute.name === name);
+  const existingAttributeIndex = metadata.attributes.findIndex((attribute: any) => attribute.trait_type === trait_type);
   if (existingAttributeIndex >= 0) {
     if (value) {
       metadata.attributes[existingAttributeIndex].value = value;
     } else {
       metadata.attributes.splice(existingAttributeIndex, 1);
     }
   } else {
-    metadata.attributes.push({ name, value: e.target.value });
+    metadata.attributes.push({ trait_type, value: e.target.value });
   }
 };
 
@@ -521,13 +521,13 @@ const openFilePicker = () => {
                   <span
                     class="min-w-[8rem] inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm"
                   >
-                    {{ attribute.name }}
+                    {{ attribute.trait_type }}
                   </span>
                   <input
                     type="text"
-                    @change="setAttributeValue(attribute.name, $event)"
-                    :name="`${attribute.name}-value`"
-                    :id="`${attribute.name}-value`"
+                    @change="setAttributeValue(attribute.trait_type, $event)"
+                    :name="`${attribute.trait_type}-value`"
+                    :id="`${attribute.trait_type}-value`"
                     class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm border-gray-300"
                   />
                 </div>

diff --git a/src/pages/collection/CollectionDetails.vue b/src/pages/collection/CollectionDetails.vue
@@ -63,17 +63,17 @@ watchDebounced(
   { debounce: 500 }
 );
 
-const newAttributeName = ref('');
+const newAttributeTraitType = ref('');
 const addAttribute = () => {
-  const existingName = collection.attributes.find(({ name }) => name === newAttributeName.value);
-  if (!existingName) {
-    collection.attributes.push({ name: newAttributeName.value });
-    newAttributeName.value = '';
+  const existingTraitType = collection.attributes.find(({ trait_type }) => trait_type === newAttributeTraitType.value);
+  if (!existingTraitType) {
+    collection.attributes.push({ trait_type: newAttributeTraitType.value });
+    newAttributeTraitType.value = '';
   }
 };
 
-const deleteAttribute = (nameToDelete: string) => {
-  const existingAttributeIndex = collection.attributes.findIndex(({ name }) => name === nameToDelete);
+const deleteAttribute = (traitTypeToDelete: string) => {
+  const existingAttributeIndex = collection.attributes.findIndex(({ trait_type }) => trait_type === traitTypeToDelete);
   if (existingAttributeIndex >= 0) {
     collection.attributes.splice(existingAttributeIndex, 1);
   }
@@ -154,17 +154,17 @@ const deleteCollection = () => {
                 <div class="flex-grow">
                   <input
                     type="text"
-                    :value="attribute.name"
+                    :value="attribute.trait_type"
                     disabled
-                    name="attribute-name"
-                    id="attribute-name"
+                    name="attribute-trait_type"
+                    id="attribute-trait_type"
                     class="corsor-not-allowed bg-gray-100 block w-full shadow-sm focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm border-gray-300 rounded-md"
                   />
                 </div>
                 <span class="ml-3">
                   <button
                     type="button"
-                    @click="deleteAttribute(attribute.name)"
+                    @click="deleteAttribute(attribute.trait_type)"
                     class="bg-white inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"
                   >
                     <TrashIcon class="-ml-2 mr-1 h-5 w-5 text-gray-400" aria-hidden="true" />
@@ -176,9 +176,9 @@ const deleteCollection = () => {
                 <div class="flex-grow">
                   <input
                     type="text"
-                    v-model="newAttributeName"
-                    name="new-attribute-name"
-                    id="new-attribute-name"
+                    v-model="newAttributeTraitType"
+                    name="new-attribute-trait_type"
+                    id="new-attribute-trait_type"
                     class="block w-full shadow-sm focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm border-gray-300 rounded-md"
                     placeholder="Attribute name"
                   />

diff --git a/src/state/store.ts b/src/state/store.ts
@@ -11,9 +11,21 @@ export interface Collection {
   website?: string;
   licenseUrl?: string;
   licenseHash?: string;
-  attributes: { name: string }[];
+  attributes: { trait_type: string }[];
 }
 
 export const store = new Store<{ CHIA_ROOT: string; collections: { [id: string]: Collection } }>({
   defaults: { CHIA_ROOT: chiaRoot, collections: {} },
+  migrations: {
+    '0.1.6': (store) => {
+      const collections = store.get('collections');
+
+      for (const key of Object.keys(collections)) {
+        collections[key].attributes = collections[key].attributes.map((oldAttribute: any) => ({
+          trait_type: oldAttribute.name,
+        }));
+      }
+      store.set('collections', collections);
+    },
+  },
 });