Merge branch 'main' into feature/init/swapLanding

hassnian · Dec 5, 2024 · 27d3923 · 27d3923
2 parents 6d8dd9f + cb28193
commit 27d3923
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 28 deletions.
diff --git a/.github/diagram.svg b/.github/diagram.svg
diff --git a/components/collection/EditModal.vue b/components/collection/EditModal.vue
@@ -12,6 +12,29 @@
         class="flex flex-col gap-6"
         @submit.prevent
       >
+        <NeoField
+          :label="$t('mint.collection.name.label')"
+          required
+          :error="!name"
+        >
+          <NeoInput
+            v-model="name"
+            required
+            :placeholder="$t('mint.collection.name.placeholder')"
+          />
+        </NeoField>
+
+        <!-- collection description -->
+        <NeoField :label="$t('mint.collection.description.label')">
+          <NeoInput
+            v-model="description"
+            type="textarea"
+            has-counter
+            maxlength="1000"
+            height="10rem"
+            :placeholder="$t('mint.collection.description.placeholder')"
+          />
+        </NeoField>
         <CollectionEditSection :title="$t('edit.collection.image.label')">
           <FormLogoField
             v-model:file="image"
@@ -131,6 +154,8 @@ const props = defineProps<{
 
 const isModalActive = useVModel(props, 'modelValue')
 
+const name = ref<string>()
+const description = ref<string>()
 const image = ref<File>()
 const banner = ref<File>()
 const imageUrl = ref<string>()
@@ -142,18 +167,21 @@ const max = ref<number | null>(null)
 
 const disabled = computed(() => {
   const hasImage = imageUrl.value
+  const isNameFilled = Boolean(name.value)
 
-  const hasImagechanged = (!imageUrl.value && Boolean(props.collection?.image)) || Boolean(image.value)
-  const hasBannerChanged = (!bannerUrl.value && Boolean(props.collection?.banner)) || Boolean(banner.value)
-  const hasMaxChanged = max.value !== props.collection?.max
+  const nameChanged = props.collection.name !== name.value
+  const descriptionChanged = props.collection.description !== description.value
+  const hasImageChanged = (!imageUrl.value && Boolean(props.collection.image)) || Boolean(image.value)
+  const hasBannerChanged = (!bannerUrl.value && Boolean(props.collection.banner)) || Boolean(banner.value)
+  const hasMaxChanged = max.value !== props.collection.max
 
-  return !hasImage || (!hasImagechanged && !hasBannerChanged && !hasMaxChanged)
+  return !hasImage || !isNameFilled || (!nameChanged && !descriptionChanged && !hasImageChanged && !hasBannerChanged && !hasMaxChanged)
 })
 
 const editCollection = async () => {
   emit('submit', {
-    name: props.collection.name,
-    description: props.collection.description,
+    name: name.value,
+    description: description.value,
     image: image.value || props.collection.image,
     imageType: props.collection.imageType,
     banner: bannerUrl.value ? banner.value || props.collection.banner : undefined,
@@ -163,6 +191,8 @@ const editCollection = async () => {
 
 watch(isModalActive, (value) => {
   if (value && props.collection) {
+    name.value = props.collection.name
+    description.value = props.collection.description
     imageUrl.value = sanitizeIpfsUrl(props.collection.image)
     bannerUrl.value = props.collection.banner && sanitizeIpfsUrl(props.collection.banner)
     image.value = undefined

diff --git a/components/collection/HeroButtonEditCollection.vue b/components/collection/HeroButtonEditCollection.vue
@@ -13,9 +13,9 @@
   />
 
   <CollectionEditModal
-    v-if="collectinoMetadata"
+    v-if="collectionMetadata"
     v-model="isModalActive"
-    :collection="collectinoMetadata"
+    :collection="collectionMetadata"
     :min="collection.nftCount"
     @submit="editCollection"
   />
@@ -37,7 +37,7 @@ const route = useRoute()
 
 const isModalActive = ref(false)
 
-const collectinoMetadata = computed(() =>
+const collectionMetadata = computed(() =>
   props.collection
     ? {
         name: props.collection.meta.name,
@@ -61,7 +61,7 @@ const updateMetadata = (a: UpdateCollection, b: UpdateCollection) => {
 const editCollection = async (collection: UpdateCollection) => {
   isModalActive.value = false
 
-  if (!collectinoMetadata.value) {
+  if (!collectionMetadata.value) {
     return
   }
 
@@ -70,8 +70,8 @@ const editCollection = async (collection: UpdateCollection) => {
     collectionId: route.params.id.toString(),
     collection,
     update: {
-      metadata: updateMetadata(collection, collectinoMetadata.value),
-      max: collection.max !== collectinoMetadata.value.max,
+      metadata: updateMetadata(collection, collectionMetadata.value),
+      max: collection.max !== collectionMetadata.value.max,
     },
     urlPrefix: urlPrefix.value,
     successMessage: $i18n.t('edit.collection.success'),

diff --git a/components/common/EditNftModal.vue b/components/common/EditNftModal.vue
@@ -16,10 +16,15 @@
           :label="$t('mint.nft.art.label')"
           required
         >
-          <FormLogoField
-            v-model:file="image"
-            v-model:url="imageUrl"
-          />
+          <NonRecommendFieldNotification
+            :show="imageChanged"
+            @undo="initImage"
+          >
+            <FormLogoField
+              v-model:file="image"
+              v-model:url="imageUrl"
+            />
+          </NonRecommendFieldNotification>
         </NeoField>
 
         <!-- nft name -->
@@ -28,11 +33,16 @@
           required
           :error="!name"
         >
-          <NeoInput
-            v-model="name"
-            required
-            :placeholder="$t('mint.nft.name.placeholder')"
-          />
+          <NonRecommendFieldNotification
+            :show="name && nameChanged"
+            @undo="name = props.metadata?.name"
+          >
+            <NeoInput
+              v-model="name"
+              required
+              :placeholder="$t('mint.nft.name.placeholder')"
+            />
+          </NonRecommendFieldNotification>
         </NeoField>
 
         <!-- nft description -->
@@ -91,17 +101,24 @@ const image = ref<File>()
 const imageUrl = ref<string>()
 const attributes = ref<Attribute[]>([])
 
+const originalImageUrl = computed(() => sanitizeIpfsUrl(props.metadata?.image))
+
+const nameChanged = computed(() => props.metadata?.name !== name.value)
+const imageChanged = computed(() => originalImageUrl.value !== imageUrl.value)
+
+const initImage = () => {
+  imageUrl.value = originalImageUrl.value
+  image.value = undefined
+}
+
 const disabled = computed(() => {
   const hasImage = Boolean(imageUrl.value)
   const isNameFilled = Boolean(name.value)
-
-  const nameChanged = props.metadata?.name !== name.value
   const descriptionChanged = props.metadata?.description !== description.value
-  const imageChanged = Boolean(image.value)
   const attributesChanged = JSON.stringify(attributes.value) !== JSON.stringify(props.metadata?.attributes || [])
 
   return !hasImage || !isNameFilled
-    || (!nameChanged && !descriptionChanged && !imageChanged && !attributesChanged)
+    || (!nameChanged.value && !descriptionChanged && !imageChanged.value && !attributesChanged)
 })
 
 const editCollection = async () => {
@@ -118,8 +135,7 @@ const editCollection = async () => {
 
 watch(isModalActive, (value) => {
   if (value) {
-    imageUrl.value = sanitizeIpfsUrl(props.metadata?.image)
-    image.value = undefined
+    initImage()
     name.value = props.metadata?.name
     description.value = props.metadata?.description
     attributes.value = structuredClone(toRaw(props.metadata?.attributes || []))

diff --git a/components/common/NonRecommendFieldNotification.vue b/components/common/NonRecommendFieldNotification.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="flex flex-col w-full">
+    <slot />
+    <div
+      v-if="show"
+      class="flex items-center gap-2 bg-yellow-50 border border-yellow-200 rounded-md p-3 !mt-2"
+    >
+      <NeoIcon
+        icon="warning"
+        class="text-yellow-500"
+        size="small"
+      />
+
+      <div>
+        <p class="text-sm text-yellow-700">
+          {{ $t('mint.notRecommendedModify') }}
+        </p>
+        <div
+          v-if="!disabledUndo"
+          class="w-full flex justify-end"
+        >
+          <NeoButton
+            variant="text"
+            class="flex items-center gap-1 text-sm !text-yellow-600 hover:!text-yellow-700 capitalize"
+            @click="emit('undo')"
+          >
+            <NeoIcon
+              icon="undo"
+              size="small"
+            />
+            {{ $t('general.undo') }}
+          </NeoButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NeoButton, NeoIcon } from '@kodadot1/brick'
+
+defineProps<{
+  show: boolean
+  disabledUndo?: boolean
+}>()
+
+const emit = defineEmits(['undo'])
+</script>
diff --git a/locales/en.json b/locales/en.json
@@ -942,6 +942,7 @@
       "cancelled": "Transaction was cancelled",
       "feesPaidIn": "You are paying fees in {0}"
     },
+    "undo": "Undo",
     "updateOnWebsiteSoon": "Update on website visible soon",
     "usd": "USD",
     "using": "using"
@@ -1359,6 +1360,7 @@
         "message": "People will be able to buy your NFT."
       }
     },
+    "notRecommendedModify": "Please note that this field is not recommended to be modified as it may lead to misuse and confusion",
     "progress": "In Progress",
     "requiredDeposit": "A deposit of <strong>{0}</strong> is required to create a {1}. Please note, this initial deposit is refundable.",
     "royalty": {