From a25966ee37e9e75907ce5849a00b4b0e25b91d6b Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 25 Oct 2023 09:58:25 +0800
Subject: [PATCH 01/12] =?UTF-8?q?=E2=9C=A8=20Support=20uploading=20multipl?=
 =?UTF-8?q?e=20files=20in=20Step1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnUploadForm.vue | 358 +++++++++++++++++-----------------
 components/Previewer.vue      |   9 +-
 locales/en.json               |   2 +-
 pages/new/index.vue           |  89 ++++-----
 4 files changed, 224 insertions(+), 234 deletions(-)

diff --git a/components/IscnUploadForm.vue b/components/IscnUploadForm.vue
index c15a222f..70964c17 100644
--- a/components/IscnUploadForm.vue
+++ b/components/IscnUploadForm.vue
@@ -1,17 +1,17 @@
 <template>
   <div>
-      <Card class="p-[32px]" :has-padding="false">
-        <!-- header -->
-        <IscnFormHeader :step="step" :total-step="4"/>
-        <!-- guide text -->
-        <Label
-          :text="$t('UploadForm.guide.selectFile')"
-          class="text-medium-gray my-[12px]"
-        />
-        <!-- upload field__upload -->
-        <form @submit.prevent="onSubmit">
+    <Card class="p-[32px]" :has-padding="false">
+      <!-- header -->
+      <IscnFormHeader :step="step" :total-step="4" />
+      <!-- guide text -->
+      <Label
+        :text="$t('UploadForm.guide.selectFile')"
+        class="text-medium-gray my-[12px]"
+      />
+      <!-- upload field__upload -->
+      <form @submit.prevent="onSubmit">
+        <div class="flex gap-[12px]">
           <form
-            v-if="!ipfsHash"
             :class="formClasses"
             @drop.prevent="onFileUpload"
             @dragover.prevent="
@@ -38,114 +38,110 @@
               ref="imageFile"
               class="hidden"
               type="file"
+              multiple
               @change="onFileUpload"
             />
           </form>
-          <!-- upload field__Submit  -->
-          <div v-else :class="formClasses">
-            <div class="flex">
-              <Previewer
-                :is-image="isImage"
-                :file-data="fileData"
-              />
-              <div
-                :class="[
-                  'flex',
-                  'flex-col',
-                  'items-stretch',
-                  'justify-start',
-                ]"
-              >
-                <Label
-                  :text="fileName"
-                  :class="[
-                    'font-semibold',
-                    'text-dark-gray',
-                  ]"
-                />
-                <Label
-                  :text="size"
-                  :class="[
-                    'font-normal',
-                    'text-medium-gray',
-                    'my-[8px]',
-                  ]"
-                />
-                <Button
-                  v-if="exifInfo"
-                  class="w-min"
-                  type="button"
-                  :text="$t('UploadForm.view.file.button')"
-                  preset="outline"
-                  @click="isOpenFileInfoDialog = true"
+          <!-- uploaded file list -->
+          <div v-if="fileRecords.length" class="flex flex-col items-center w-full">
+            <table class="w-full">
+              <tbody class="w-full">
+                <tr
+                  v-for="(
+                    { isFileImage, fileData, fileName, fileSize },
+                    index
+                  ) of fileRecords"
+                  :key="fileName"
+                  class="border-b-shade-gray border-b-[1px] text-dark-gray hover:bg-light-gray transition-colors w-full"
                 >
-                  <template #prepend>
-                    <IconInfo />
-                  </template>
-                </Button>
-              </div>
-            </div>
-            <div
-              :class="[
-                'mr-[24px]',
-                'cursor-pointer',
-              ]"
-              @click="handleInitFile"
-            >
-              <IconDelete />
-            </div>
-          </div>
-          <div class="flex gap-[8px] justify-end text-medium-gray">
-            <NuxtLink
-              :class="[
-                'text-[12px]',
-                'underline',
-              ]"
-              :to="localeLocation({ name: 'nft-url' })"
-            >
-              {{ $t('UploadForm.button.mintUrl') }}
-            </NuxtLink>
-          </div>
-          <!-- Publish btn -->
-          <div class="flex gap-[8px] justify-end pt-[24px] text-medium-gray">
-            <Button
-              :preset="submitBtnClasses"
-              @click="onSkipUpload"
-              >{{ $t('UploadForm.button.skip') }}
-            </Button>
-            <Button
-              type="submit"
-              :preset="submitBtnClasses"
-              :is-disabled="!ipfsHash"
-              >{{ $t('UploadForm.button') }}
-              <template #append>
-                <IconArrowRight />
-              </template>
-            </Button>
+                  <td class="py-[4px]">
+                    <Previewer
+                      :is-image="isFileImage"
+                      :file-data="fileData"
+                      size="small"
+                    />
+                  </td>
+                  <td class="py-[4px]">
+                    <div
+                      :class="[
+                        'flex',
+                        'flex-col',
+                        'items-stretch',
+                        'justify-start',
+                      ]"
+                    >
+                      <Label
+                        :text="fileName"
+                        preset="h5"
+                        :class="['font-semibold', 'text-dark-gray']"
+                      />
+                      <Label
+                        :text="`${Math.round(fileSize * 0.001)} KB`"
+                        preset="h6"
+                        :class="['font-normal', 'text-medium-gray', 'mt-[8px]']"
+                      />
+                    </div>
+                  </td>
+                  <td class="py-[4px]">
+                    <div
+                      :class="['mr-[8px]', 'cursor-pointer']"
+                      @click="handleDeleteFile(index)"
+                    >
+                      <IconDelete />
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
-        </form>
-        <!-- Dialog -->
-        <Dialog
-          v-model="isOpenFileInfoDialog"
-          :has-padding="false"
-          preset="custom"
-        >
-          <MetadataCard
-            :class="[
-              'w-[616px]',
-              'max-h-[75vh]',
-              'overflow-y-scroll',
-              'scrollbar-hidden',
-            ]"
-            :img-src="fileData"
-            :all-exif="exifInfo"
-          />
-        </Dialog>
-      </Card>
+        </div>
+        <!-- upload field__Submit  -->
+        <div class="flex gap-[8px] justify-end text-medium-gray mt-[24px]">
+          <NuxtLink
+            :class="['text-[12px]', 'underline']"
+            :to="localeLocation({ name: 'nft-url' })"
+          >
+            {{ $t('UploadForm.button.mintUrl') }}
+          </NuxtLink>
+        </div>
+        <!-- Publish btn -->
+        <div class="flex gap-[8px] justify-end mt-[12px] text-medium-gray">
+          <Button preset="outline" @click="onSkipUpload"
+            >{{ $t('UploadForm.button.skip') }}
+          </Button>
+          <Button
+            type="submit"
+            :preset="submitBtnClasses"
+            :is-disabled="!fileRecords.length || isSizeExceeded"
+            >{{ $t('UploadForm.button') }}
+            <template #append>
+              <IconArrowRight />
+            </template>
+          </Button>
+        </div>
+      </form>
+      <!-- Dialog -->
+      <Dialog
+        v-model="isOpenFileInfoDialog"
+        :has-padding="false"
+        preset="custom"
+      >
+        <MetadataCard
+          :class="[
+            'w-[616px]',
+            'max-h-[75vh]',
+            'overflow-y-scroll',
+            'scrollbar-hidden',
+          ]"
+          :img-src="fileData"
+          :all-exif="exifInfo"
+        />
+      </Dialog>
+    </Card>
     <AttentionsLedger />
     <Snackbar
       v-model="isSizeExceeded"
-      :text="$t('UploadForm.warning')"
+      :text="$t('UploadForm.warning',{ size: Math.round(uploadSizeLimit / (1024*1024)) })"
       preset="warn"
     />
   </div>
@@ -179,17 +175,23 @@ export default class UploadForm extends Vue {
   fileSize: number = 0
   fileType: string = ''
 
+  fileRecords: any[] = []
+
   isOpenFileInfoDialog = false
   isSizeExceeded = false
 
+  uploadSizeLimit: number = UPLOAD_FILESIZE_MAX
+
   get formClasses() {
     return [
       'flex',
-      'w-[584px]',
+      'w-full',
+      'h-[196px]',
+      { 'max-w-[320px]': this.fileRecords.length},
+      'flex-col',
+      'justify-center',
       {
-        'flex-row justify-start': this.ipfsHash,
-        'h-[196px] flex-col justify-center': !this.ipfsHash,
-        'bg-transparent' : this.isSizeExceeded,
+        'bg-transparent': this.isSizeExceeded,
       },
       'items-center',
       'justify-between',
@@ -203,10 +205,8 @@ export default class UploadForm extends Vue {
     ]
   }
 
-  // eslint-disable-next-line class-methods-use-this
-
   get submitBtnClasses() {
-    return this.ipfsHash ? 'secondary' : 'outline'
+    return this.fileRecords.length ? 'secondary' : 'outline'
   }
 
   get size() {
@@ -214,56 +214,73 @@ export default class UploadForm extends Vue {
   }
 
   async onFileUpload(event: DragEvent) {
-    logTrackerEvent(this, 'ISCNCreate', 'SelectFile', '', 1);
+    logTrackerEvent(this, 'ISCNCreate', 'SelectFile', '', 1)
+    this.isSizeExceeded = false
     let files = null
     if (event.dataTransfer) {
       ;({ files } = event.dataTransfer)
     } else if (event.target) {
       ;({ files } = event.target as HTMLInputElement)
     }
+    if (event.currentTarget instanceof HTMLElement) {
+      event.currentTarget.classList.remove('bg-shade-gray')
+    }
 
-    if (files && files[0]) {
-      const reader = new FileReader()
-      if (files[0].size < UPLOAD_FILESIZE_MAX) {
-        this.fileName = files[0].name
-        this.fileSize = files[0].size
-        this.fileType = `${files[0].type}`
-        reader.onload = (e) => {
-          if (!e.target) return
-          this.fileData = e.target.result as string
-        }
-        reader.readAsDataURL(files[0])
-        const fileBytes = (await fileToArrayBuffer(files[0])) as ArrayBuffer
-        if (fileBytes) {
-          const [
-            fileSHA256,
-            imageType,
-            ipfsHash,
-          ] = await Promise.all([
-            digestFileSHA256(fileBytes),
-            readImageType(fileBytes),
-            Hash.of(Buffer.from(fileBytes)),
-          ])
-          this.ipfsHash = ipfsHash
-          this.fileSHA256 = fileSHA256
-          this.isImage = !!imageType
-          // eslint-disable-next-line prefer-destructuring
-          this.fileBlob = files[0]
-          if (this.isImage) {
-            try {
-              this.exifInfo = await exifr.parse(files[0])
-            } catch (err) {
-              // eslint-disable-next-line no-console
-              console.error(err)
-              this.exifInfo = null
+    if (files && files.length) {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const file of Array.from(files)) {
+        const reader = new FileReader()
+        let fileRecord: any = {}
+
+        if (file.size < UPLOAD_FILESIZE_MAX) {
+          reader.onload = (e) => {
+            if (!e.target) return
+            fileRecord.fileData = e.target.result as string
+          }
+          reader.readAsDataURL(file)
+
+          // eslint-disable-next-line no-await-in-loop
+          const fileBytes = (await fileToArrayBuffer(
+            file,
+          )) as unknown as ArrayBuffer
+          if (fileBytes) {
+            const [
+              fileSHA256,
+              imageType,
+              ipfsHash,
+              // eslint-disable-next-line no-await-in-loop
+            ] = await Promise.all([
+              digestFileSHA256(fileBytes),
+              readImageType(fileBytes),
+              Hash.of(Buffer.from(fileBytes)),
+            ])
+
+            fileRecord = {
+              ...fileRecord,
+              fileName: file.name,
+              fileSize: file.size,
+              fileType: file.type,
+              ipfsHash,
+              fileSHA256,
+              isFileImage: !!imageType,
+              fileBlob: file,
+              exifInfo: null, // default value, to be potentially updated below
+            }
+
+            if (imageType) {
+              try {
+                // eslint-disable-next-line no-await-in-loop
+                fileRecord.exifInfo = await exifr.parse(file)
+              } catch (err) {
+                // eslint-disable-next-line no-console
+                console.error(err)
+              }
             }
-          } else {
-            this.exifInfo = null
           }
+        } else {
+          this.isSizeExceeded = true
         }
-      } else {
-        this.isSizeExceeded = true
-        this.handleInitFile()
+        this.fileRecords.push(fileRecord)
       }
     }
   }
@@ -289,29 +306,12 @@ export default class UploadForm extends Vue {
   }
 
   onSubmit() {
-    if (IS_CHAIN_UPGRADING) return;
-    this.$emit('submit', {
-      ipfsHash: this.ipfsHash,
-      fileData: this.fileData,
-      fileSHA256: this.fileSHA256,
-      fileBlob: this.fileBlob,
-      fileSize: this.size,
-      fileType: this.fileType,
-      isImage: this.isImage,
-      exifInfo: this.exifInfo,
-    })
+    if (IS_CHAIN_UPGRADING) return
+    this.$emit('submit', this.fileRecords)
   }
 
-  handleInitFile() {
-    this.isImage = false
-    this.ipfsURL = ''
-    this.ipfsHash = ''
-    this.fileData = ''
-    this.fileSHA256 = ''
-    this.fileBlob = null
-    this.exifInfo = null
-    this.fileName = ''
-    this.fileSize = 0
+  handleDeleteFile(index: number) {
+    this.fileRecords.splice(index, 1)
   }
 }
 </script>
diff --git a/components/Previewer.vue b/components/Previewer.vue
index d1a69804..b493ebbf 100644
--- a/components/Previewer.vue
+++ b/components/Previewer.vue
@@ -3,16 +3,18 @@
     :class="[
       'flex',
       'justify-center',
-      'w-[138px]',
+      { 'w-[138px]': size === 'large' },
+      { 'w-[48px]': size === 'small' },
       'mr-[16px]',
+      'overflow-hidden'
     ]"
   >
     <img
       v-if="isImage"
       :class="[
         'w-full',
-        'max-h-[150px]',
-        'object-cover',
+        'h-auto',
+        'object-contain',
         'rounded-[8px]',
       ]"
       :src="fileData"
@@ -28,5 +30,6 @@ import { Vue, Component, Prop } from 'vue-property-decorator'
 export default class Previewer extends Vue {
   @Prop({ default: false }) readonly isImage!: boolean
   @Prop(String) readonly fileData: string | undefined
+  @Prop({ default: 'large' }) readonly size: string | undefined
 }
 </script>
diff --git a/locales/en.json b/locales/en.json
index 0cedbeb2..98ea197a 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -360,7 +360,7 @@
   "UploadForm.title.registerISCN": "Register ISCN",
   "UploadForm.url.placeholder": "Use existing IPFS content",
   "UploadForm.view.file.button": "View File Info",
-  "UploadForm.warning": "Oops, file is too large. The file size should not exceed 100MB",
+  "UploadForm.warning": "Oops, file is too large. The file size should not exceed {size}MB",
   "WorksPage.empty.label": "No works",
   "WorksPage.label.search.result": "Search result for :",
   "WorksPage.label.portfolio": "View my Writing NFT Portfolio",
diff --git a/pages/new/index.vue b/pages/new/index.vue
index e361c055..d2bb633e 100644
--- a/pages/new/index.vue
+++ b/pages/new/index.vue
@@ -35,20 +35,16 @@
     />
     <IscnRegisterForm
       v-else-if="state === 'iscn'"
-      :ipfs-hash="ipfsHash"
+      :file-records="formattedFileRecords"
+
+      :ipfs-hash="urlIpfsHash"
       :arweave-id="arweaveId"
-      :file-data="fileData"
-      :file-type="fileType"
-      :file-size="fileSize"
-      :file-s-h-a256="fileSHA256"
-      :file-blob="fileBlob"
-      :is-image="isImage"
+
       :is-upload-only="isUploadOnly"
-      :exif-info="exifInfo"
       :step="step"
       @arweaveUploaded="onArweaveIdUpdate"
       @txBroadcasted="onISCNTxInfo"
-      @fileUploaded="onFileOnlyUpload"
+      @fileUploaded="fileUploaded"
       @handleSubmit="isSubmit = true"
       @handleQuit="isSubmit = false"
     />
@@ -121,7 +117,7 @@ export default class NewIndexPage extends Vue {
   ) => ISCNRecordWithID[] | PromiseLike<ISCNRecordWithID[]>
 
   state = 'init'
-  ipfsHash = this.$route.query.ipfs_hash || ''
+  urlIpfsHash = this.$route.query.ipfs_hash || ''
   arweaveId = this.$route.query.arweave_id || ''
   isUploadOnly = this.$route.query.upload_only === '1'
   fileSHA256 = ''
@@ -131,12 +127,15 @@ export default class NewIndexPage extends Vue {
   iscnId = ''
   iscnTxHash = ''
   iscnTimestamp = ''
-  isImage = false
+  isFileImage = false
   fileBlob: Blob | null = null
   exifInfo: any | null = null
   isSubmit = false
   record: ISCNRecordWithID | null = null
 
+  uploadFileRecords: any[] = []
+  urlFileRecords: any[] = []
+
   get shouldSkipToMintNFT(): boolean {
     return this.$route.query.mint === '1'
   }
@@ -157,55 +156,43 @@ export default class NewIndexPage extends Vue {
     }
   }
 
+  get formattedFileRecords() {
+     if (this.uploadFileRecords.length) {
+      return this.uploadFileRecords
+     }
+     if (this.urlFileRecords.length) {
+      return this.urlFileRecords
+     }
+     return[]
+  }
+
   async mounted() {
-    if ((this.ipfsHash || this.arweaveId) && this.shouldSkipToMintNFT) {
+    if ((this.urlIpfsHash || this.arweaveId) && this.shouldSkipToMintNFT) {
       this.state = 'iscn';
       let url;
       if (this.arweaveId) url = `https://arweave.net/${this.arweaveId}`;
-      else if (this.ipfsHash) url = `https://ipfs.io/ipfs/${this.ipfsHash}`;
+      else if (this.urlIpfsHash) url = `https://ipfs.io/ipfs/${this.urlIpfsHash}`;
       if (url) {
         const { data, headers } = await this.$axios.get(url, { responseType: 'blob' })
-        this.fileBlob = data as Blob
-        this.isImage = headers['content-type'].startsWith('image')
-        this.fileType = headers['content-type']
-        this.fileSize = headers['content-length']
-        this.fileData = `data:${this.fileType};base64,${Buffer.from(await data.arrayBuffer(), 'binary').toString('base64')}`
+        this.urlFileRecords.push({
+        fileBlob:data as Blob,
+        ipfsHash:this.urlIpfsHash,
+        arweaveId: this.arweaveId,
+        isFileImage:headers['content-type'].startsWith('image'),
+        fileType:headers['content-type'],
+        fileSize:headers['content-length'],
+        fileData:`data:${this.fileType};base64,${Buffer.from(await data.arrayBuffer(), 'binary').toString('base64')}`,
+        })
       }
     }
   }
 
-  onSubmitUpload({
-    ipfsHash,
-    arweaveId,
-    fileData,
-    fileSHA256,
-    isImage,
-    fileBlob,
-    exifInfo,
-    fileType,
-    fileSize,
-  }: {
-    ipfsHash: string
-    arweaveId: string
-    fileData: string
-    fileSHA256: string
-    isImage: boolean
-    fileBlob: Blob | null
-    exifInfo: any
-    fileType: string
-    fileSize: string
-  }) {
-    this.ipfsHash = ipfsHash
-    this.arweaveId = arweaveId
-    this.fileData = fileData
-    this.fileSHA256 = fileSHA256
-    this.isImage = isImage
-    this.fileBlob = fileBlob
-    this.exifInfo = exifInfo
-    this.fileType = fileType
-    this.fileSize = fileSize
+  onSubmitUpload(fileRecords: any[] | []) {
+    if (fileRecords && fileRecords.length) {
+      this.uploadFileRecords.push(...fileRecords)
+    }
     this.state = 'iscn'
-    logTrackerEvent(this, 'ISCNCreate', 'ISCNConfirmFile', this.fileType, 1);
+    logTrackerEvent(this, 'ISCNCreate', 'ISCNConfirmFile', '', 1);
   }
 
   onArweaveIdUpdate({ arweaveId }: { arweaveId: string }) {
@@ -245,7 +232,7 @@ export default class NewIndexPage extends Vue {
 
   handleCreateAnotherButtonClick() {
     this.state = 'init'
-    this.ipfsHash = ''
+    this.urlIpfsHash = ''
     this.arweaveId = ''
     this.fileSHA256 = ''
     this.fileData = ''
@@ -254,7 +241,7 @@ export default class NewIndexPage extends Vue {
     this.iscnId = ''
     this.iscnTxHash = ''
     this.iscnTimestamp = ''
-    this.isImage = false
+    this.isFileImage = false
     this.fileBlob = null
     this.exifInfo = null
     this.isSubmit = false

From 1aae8ebd9b14e9cd8929cc38977ac5e45409a4b9 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 25 Oct 2023 10:39:46 +0800
Subject: [PATCH 02/12] =?UTF-8?q?=E2=9C=A8=20Support=20uploading=20multipl?=
 =?UTF-8?q?e=20Arweave=20hash=20to=20ISCN=20in=20Step=202?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnRegisterForm.vue | 384 +++++++++++++++++++-------------
 pages/nft/url/index.vue         |   2 +-
 utils/cosmos/iscn/iscn.type.ts  |   6 +-
 utils/cosmos/iscn/sign.ts       |  15 +-
 4 files changed, 246 insertions(+), 161 deletions(-)

diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index 3a0b53cd..52f6bfa7 100644
--- a/components/IscnRegisterForm.vue
+++ b/components/IscnRegisterForm.vue
@@ -34,20 +34,60 @@
           'text-medium-gray',
         ]"
       >
-        <template v-if="fileData">
-          <Previewer :is-image="isImage" :file-data="fileData" />
+        <template v-if="fileRecords.length">
           <div
-            :class="[
-              'flex',
-              'flex-col',
-            ]"
+            v-if="fileRecords.length"
+            class="flex flex-col items-center w-full"
           >
+            <table class="w-full">
+              <tbody class="w-full">
+                <tr
+                  v-for="{
+                    isFileImage,
+                    fileData,
+                    fileName,
+                    fileSize,
+                  } of fileRecords"
+                  :key="fileName"
+                  class="border-b-shade-gray border-b-[1px] text-dark-gray hover:bg-light-gray transition-colors w-full"
+                >
+                  <td class="py-[4px]">
+                    <Previewer
+                      :is-image="isFileImage"
+                      :file-data="fileData"
+                      size="small"
+                    />
+                  </td>
+                  <td class="py-[4px]">
+                    <div
+                      :class="[
+                        'flex',
+                        'flex-col',
+                        'items-stretch',
+                        'justify-start',
+                      ]"
+                    >
+                      <Label
+                        :text="fileName"
+                        preset="h5"
+                        :class="['font-semibold', 'text-dark-gray']"
+                      />
+                      <Label
+                        :text="`${Math.round(fileSize * 0.001)} KB`"
+                        preset="h6"
+                        :class="['font-normal', 'text-medium-gray', 'mt-[8px]']"
+                      />
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
             <div
               v-if="uploadStatus === 'loading'"
               :class="[
                 'flex',
                 'items-center',
-                'mb-[24px]',
+                'mt-[32px]',
               ]"
             >
               <ProgressIndicator />
@@ -60,7 +100,7 @@
               v-else
               :class="[
                 'w-min',
-                'mb-[16px]',
+                'mt-[32px]',
               ]"
               :text="$t('IscnRegisterForm.title.ready')"
               tag="div"
@@ -73,18 +113,6 @@
                 <IconDone />
               </template>
             </Label>
-            <Button
-              v-if="exifInfo"
-              class="w-min"
-              type="button"
-              :text="$t('UploadForm.view.file.button')"
-              preset="outline"
-              @click="isOpenFileInfoDialog = true"
-            >
-              <template #prepend>
-                <IconInfo />
-              </template>
-            </Button>
           </div>
         </template>
         <div v-else>
@@ -96,11 +124,11 @@
         :label="$t('IscnRegisterForm.label.fingerprints')"
         class="mb-[12px]"
       >
-        <ContentFingerprintLink v-if="ipfsHash"  :item="formattedIpfs" />
-        <ContentFingerprintLink v-if="uploadArweaveId" :item="formattedArweave" />
+        <ContentFingerprintLink v-for="ipfs of ipfsHashList" :key="ipfs" :item="formattedIpfs(ipfs)" />
+        <ContentFingerprintLink v-for="ar of uploadArweaveIdList" :key="ar" :item="formattedArweave(ar)" />
         <ContentFingerprintLink v-for="f, i in customContentFingerprints" :key="f + i" :item="f" />
         <div
-          v-if="!fileData"
+          v-if="shouldShowContentFingerprintInput"
           :class="[
             'flex',
             { 'mt-[12px]': customContentFingerprints.length },
@@ -121,7 +149,7 @@
         </div>
       </FormField>
       <!-- Numbers Protocol -->
-      <FormField
+      <!-- <FormField
         v-if="!showUploadOnly && (isPhoto || isImage)"
         :label="$t('IscnRegisterForm.label.numbersProtocol')"
         class="mb-[12px]"
@@ -135,9 +163,9 @@
             >{{ $t('IscnRegisterForm.label.numbersProtocol.details.link') }}</Link>
           </i18n>
         </CheckBox>
-      </FormField>
+      </FormField> -->
       <!-- Dialog -->
-      <Dialog
+      <!-- <Dialog
         v-model="isOpenFileInfoDialog"
         :has-padding="false"
         preset="custom"
@@ -152,7 +180,7 @@
           :img-src="fileData"
           :all-exif="exifInfo"
         />
-      </Dialog>
+      </Dialog> -->
       <div v-if="showUploadOnly" :class="[
         'flex',
         'flex-col',
@@ -699,7 +727,7 @@ import { DEFAULT_TRANSFER_FEE, sendLIKE } from '~/utils/cosmos/sign';
 import { estimateISCNTxGasAndFee, formatISCNTxPayload } from '~/utils/cosmos/iscn/sign';
 import {
   getLikerIdMinApi,
-  API_POST_NUMBERS_PROTOCOL_ASSETS,
+  // API_POST_NUMBERS_PROTOCOL_ASSETS,
   } from '~/constant/api';
 import { getAccountBalance } from '~/utils/cosmos'
 import { logTrackerEvent } from '~/utils/logger'
@@ -726,17 +754,10 @@ export enum AuthorDialogType {
 
 @Component
 export default class IscnRegisterForm extends Vue {
-  @Prop({ default: false }) readonly isImage!: boolean
-  @Prop({ default: null }) readonly exifInfo: any | null | undefined
-  @Prop({ default: null }) readonly fileBlob: Blob | null | undefined
-  @Prop({ default: null }) readonly fileData: string | null | undefined
-  @Prop({ default: null }) readonly fileType: string | null | undefined
-  @Prop({ default: null }) readonly fileSize: string | null | undefined
-  @Prop(String) readonly fileSHA256!: string
-  @Prop({ default: false }) readonly isIPFSLink!: boolean
-  @Prop({ default: false }) readonly isUploadOnly!: boolean
+  @Prop({ default: [] }) readonly fileRecords!: any[]
   @Prop(String) readonly ipfsHash!: string
   @Prop(String) readonly arweaveId!: string
+  @Prop({ default: false }) readonly isUploadOnly!: boolean
   @Prop(Number) readonly step: number | undefined
 
   @walletModule.Getter('getWalletAddress') address!: string
@@ -784,8 +805,7 @@ export default class IscnRegisterForm extends Vue {
   authorUrl: string[] = []
   authorWalletAddress: string[] = []
   uploadStatus: string = ''
-  uploadIpfsHash: string = this.ipfsHash || ''
-  uploadArweaveId: string = this.arweaveId || ''
+  uploadArweaveIdList: string[] = []
   error: string = ''
   likerId: string = ''
   likerIdsAddresses: (string | void)[] = []
@@ -826,6 +846,19 @@ export default class IscnRegisterForm extends Vue {
   currentAuthorDialogType: AuthorDialogType = AuthorDialogType.stakeholder
   sameAsList: any = []
 
+  get ipfsHashList() {
+    const list = []
+    if (this.ipfsHash) {
+      list.push(this.ipfsHash)
+    }
+    list.push(...this.fileRecords.map((file) => file.ipfsHash))
+    return list
+  }
+
+  get shouldShowContentFingerprintInput() {
+    return !this.fileRecords.some((file) => file.fileData)
+  }
+
   get tagsString(): string {
     return this.tags.join(',')
   }
@@ -852,14 +885,10 @@ export default class IscnRegisterForm extends Vue {
     return this.authors.map((a) => a.authorDescription)
   }
 
-  get isPhoto() {
-    return this.exifInfo && this.exifInfo.ExifImageWidth
-  }
-
   get defaultType() {
-    if (this.isPhoto) return 'Photo'
-    if (this.isImage) return 'Image'
-    if (this.fileType === 'application/pdf' || this.fileType === 'application/epub+zip') return 'Book'
+    if (this.fileRecords.some(file => file.fileType === 'application/pdf' || file.fileType === 'application/epub+zip')) return 'Book'
+    if (this.fileRecords.some(file => file.exifInfo && file.exifInfo.ExifImageWidth)) return 'Photo'
+    if (this.fileRecords.some(file => file.isFileImage)) return 'Image'
     return 'CreativeWork'
   }
 
@@ -869,21 +898,13 @@ export default class IscnRegisterForm extends Vue {
       : this.$t('IscnRegisterForm.title.editStakeholder')
   }
 
-  get formattedIpfs() {
-    return this.$t('IscnRegisterForm.ipfs.link', { hash: this.ipfsHash })
-  }
-
-  get formattedArweave() {
-    return this.$t('IscnRegisterForm.arweave.link', { arweaveId: this.uploadArweaveId })
-  }
-
   get contentFingerprintLinks() {
     const array=[]
-    if (this.uploadArweaveId) {
-      array.push(this.formattedArweave)
+    if (this.uploadArweaveIdList) {
+      array.push(...this.uploadArweaveIdList.map(id => this.formattedArweave(id)))
     }
-    if (this.ipfsHash){
-      array.push(this.formattedIpfs)
+    if (this.ipfsHashList.length) {
+      array.push(...this.ipfsHashList.map(ipfs => this.formattedIpfs(ipfs)))
     }
     if (this.customContentFingerprints.length){
       array.push(...this.customContentFingerprints)
@@ -943,32 +964,30 @@ export default class IscnRegisterForm extends Vue {
   }
 
   get exif() {
-    const extension = this.fileType?.split('/')
-    if (this.exifInfo) {
-      return {
-          ...this.exifInfo,
-          Format: this.fileType,
+    return this.fileRecords.map((file) => {
+      const extension = file.fileType?.split('/')
+      if (file.exifInfo) {
+        return {
+          ...file.exifInfo,
+          Format: file.fileType,
           Size:
-            this.exifInfo.ExifImageHeight && this.exifInfo.ExifImageWidth
-              ? `${this.exifInfo.ExifImageHeight} x ${
-                  this.exifInfo.ExifImageWidth
+            file.exifInfo.ExifImageHeight && file.exifInfo.ExifImageWidth
+              ? `${file.exifInfo.ExifImageHeight} x ${
+                  file.exifInfo.ExifImageWidth
                 } ${extension?.[extension.length - 1].toUpperCase()} (${
-                  this.fileSize
+                  file.fileSize
                 })`
-              : this.fileSize,
+              : file.fileSize,
         }
-    }
-    if (this.isImage || this.isPhoto) {
-      return {
-          Format: this.fileType,
-          Size: this.fileSize,
+      }
+      if (file.isFileImage || (file.exifInfo && file.exifInfo.ExifImageWidth)) {
+        return {
+          Format: file.fileType,
+          Size: file.fileSize,
         }
-  }
-    return undefined
-  }
-
-  get fileByteSize() {
-    return this.fileBlob?.size || 0
+      }
+      return undefined
+    })
   }
 
   get payload() {
@@ -979,12 +998,12 @@ export default class IscnRegisterForm extends Vue {
       tagsString: this.tagsString,
       sameAs: this.formattedSameAsList,
       url: this.url,
-      exifInfo: this.exif,
+      exifInfo: this.exif.filter(file => file),
       license: this.formattedLicense,
-      ipfsHash: this.uploadIpfsHash || this.ipfsHash,
-      arweaveId: this.uploadArweaveId || this.arweaveId,
+      ipfsHash: this.ipfsHashList,
+      arweaveId: this.uploadArweaveIdList,
       numbersProtocolAssetId: this.numbersProtocolAssetId,
-      fileSHA256: this.fileSHA256,
+      fileSHA256: this.fileRecords.map(file => file.fileSHA256),
       author: this.author.name,
       authorNames: this.authorNames,
       authorUrls: this.authorUrls,
@@ -1010,11 +1029,11 @@ export default class IscnRegisterForm extends Vue {
     if (this.arweaveFee.lte(0)) {
       return 1;
     }
-    return this.uploadArweaveId ? 2 : 1;
+    return this.uploadArweaveIdList.length ? 2 : 1;
   }
 
   get totalSignStep() {
-    if (this.uploadArweaveId && this.arweaveFee.lte(0)) return 1
+    if (this.uploadArweaveIdList.length && this.arweaveFee.lte(0)) return 1
     return 2;
   }
 
@@ -1027,14 +1046,14 @@ export default class IscnRegisterForm extends Vue {
     if (this.isUploadingArweave) {
       return this.$t('IscnRegisterForm.signDialog.closeWarning')
     }
-    if (this.uploadArweaveId) {
+    if (this.uploadArweaveIdList.length) {
       return this.$t('IscnRegisterForm.signDialog.sign.iscn.register');
     }
     return this.$t('IscnRegisterForm.signDialog.sign.arweave.upload');
   }
 
   get signDialogFee() {
-    if (this.uploadArweaveId) return this.iscnFee;
+    if (this.uploadArweaveIdList.length) return this.iscnFee;
     return this.arweaveFeePlusGas;
   }
 
@@ -1068,6 +1087,9 @@ export default class IscnRegisterForm extends Vue {
   }
 
   async mounted() {
+    if (this.arweaveId) {
+      this.uploadArweaveIdList.push(this.arweaveId)
+    }
     this.uploadStatus = 'loading'
     await this.estimateArweaveFee();
     // ISCN Fee needs Arweave fee to calculate
@@ -1193,6 +1215,14 @@ export default class IscnRegisterForm extends Vue {
     this.license = value
   }
 
+  formattedIpfs(ipfsHash: string) {
+    return this.$t('IscnRegisterForm.ipfs.link', { hash: ipfsHash })
+  }
+
+  formattedArweave(arweaveId: string) {
+    return this.$t('IscnRegisterForm.arweave.link', { arweaveId })
+  }
+
   handleOpenSameAsDialog() {
     this.isOpenSameAsDialog = true
   }
@@ -1306,17 +1336,33 @@ export default class IscnRegisterForm extends Vue {
       this.uploadStatus = ''
       return
     }
-    if (!this.fileBlob) {
+    if (!this.fileRecords.some(file => file.fileBlob)) {
       this.error = 'NO_FILE_TO_UPLOAD'
       this.isOpenWarningSnackbar = true
       this.uploadStatus = ''
       return
     }
-    await this.submitToArweave();
-    if (this.uploadArweaveId) {
+    try {
+      this.isUploadingArweave = true;
+      this.uploadStatus = 'uploading';
+
+      // eslint-disable-next-line no-restricted-syntax
+      for (const record of this.fileRecords) {
+        // eslint-disable-next-line no-await-in-loop
+        await this.submitToArweave(record);
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    } finally {
+      this.isUploadingArweave = false;
+      this.uploadStatus = '';
+    }
+
+    if (this.uploadArweaveIdList.length) {
       this.$emit('fileUploaded', {
-        ipfsHash: this.ipfsHash,
-        arweaveId: this.uploadArweaveId,
+        ipfsHash: this.ipfsHashList,
+        arweaveId: this.uploadArweaveIdList,
       })
     }
   }
@@ -1335,26 +1381,61 @@ export default class IscnRegisterForm extends Vue {
       this.uploadStatus = ''
       return
     }
-    if (this.fileBlob) {
-    await this.submitToArweave();
-    if (this.isRegisterNumbersProtocolAsset && !this.numbersProtocolAssetId) {
-      await this.submitToNumbers();
-    }
+    if (this.fileRecords.some(file => file.fileBlob)) {
+      try {
+        this.isUploadingArweave = true;
+        this.uploadStatus = 'uploading';
+        // eslint-disable-next-line no-restricted-syntax
+        for (const record of this.fileRecords) {
+          // eslint-disable-next-line no-await-in-loop
+          await this.submitToArweave(record);
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error)
+      } finally {
+        this.isUploadingArweave = false;
+        this.uploadStatus = '';
+      }
     }
-    if (!this.fileBlob || this.uploadArweaveId) await this.submitToISCN()
+    if (!this.fileRecords.some(file => file.fileBlob) || this.uploadArweaveIdList.length) await this.submitToISCN()
   }
 
   async estimateArweaveFee(): Promise<void> {
     try {
-      const { address, arweaveId, LIKE } = await estimateBundlrFilePrice({
-        fileSize: this.fileByteSize, ipfsHash: this.ipfsHash,
-      })
-      this.uploadArweaveId = arweaveId;
-      if (arweaveId) {
-        this.$emit('arweaveUploaded', { arweaveId })
+      const pricePromises = this.fileRecords.map(record =>
+        estimateBundlrFilePrice({
+          fileSize: record.fileBlob?.size || 0,
+          ipfsHash: record.ipfsHash,
+        }),
+      );
+
+      const results = await Promise.all(pricePromises);
+      let totalFee = new BigNumber(0);
+      const arweaveIds: string[] = [];
+
+      results.forEach(result => {
+        const { address, arweaveId, LIKE } = result;
+        if (LIKE) {
+          totalFee = totalFee.plus(new BigNumber(LIKE));
+        }
+        if (arweaveId) {
+          arweaveIds.push(arweaveId);
+        }
+        if (!this.arweaveFeeTargetAddress) {
+          this.arweaveFeeTargetAddress = address;
+        }
+      });
+
+      this.arweaveFee = totalFee;
+      if (arweaveIds.length) {
+        this.uploadArweaveIdList = [
+          ...this.uploadArweaveIdList,
+          ...arweaveIds,
+          ];
+        this.$emit('arweaveUploaded', { arweaveId: arweaveIds[0] });
       }
-      if (LIKE) this.arweaveFee = new BigNumber(LIKE);
-      this.arweaveFeeTargetAddress = address;
+
     } catch (err) {
       // TODO: Handle error
       // eslint-disable-next-line no-console
@@ -1362,13 +1443,13 @@ export default class IscnRegisterForm extends Vue {
     }
   }
 
-  async sendArweaveFeeTx(): Promise<string> {
+  async sendArweaveFeeTx(records: any): Promise<string> {
     logTrackerEvent(this, 'ISCNCreate', 'SendArFeeTx', '', 1);
     await this.initIfNecessary()
     if (!this.signer) throw new Error('SIGNER_NOT_INITED');
     if (!this.arweaveFeeTargetAddress) throw new Error('TARGET_ADDRESS_NOT_SET');
     this.uploadStatus = 'signing';
-    const memo = JSON.stringify({ ipfs: this.ipfsHash, fileSize: this.fileByteSize });
+    const memo = JSON.stringify({ ipfs: records.ipfsHash, fileSize: records.fileBlob?.size || 0 });
     try {
       const { transactionHash } = await sendLIKE(this.address, this.arweaveFeeTargetAddress, this.arweaveFee.toFixed(), this.signer, memo);
       return transactionHash;
@@ -1383,31 +1464,29 @@ export default class IscnRegisterForm extends Vue {
     return '';
   }
 
-  async submitToArweave(): Promise<void> {
+  async submitToArweave(records: any): Promise<void> {
+    const tempRecord = {...records}
     logTrackerEvent(this, 'ISCNCreate', 'SubmitToArweave', '', 1);
-    if (this.uploadArweaveId) return;
-    if (!this.fileBlob) return;
+    if (!tempRecord.fileBlob) return;
     this.isOpenSignDialog = true;
     this.onOpenKeplr();
-    const transactionHash = await this.sendArweaveFeeTx();
-
+    tempRecord.transactionHash = await this.sendArweaveFeeTx(tempRecord);
     // Register Numbers Protocol assets along with Arweave
     if (this.isRegisterNumbersProtocolAsset) {
       logTrackerEvent(this, 'ISCNCreate', 'SubmitToNumbers', '', 1);
     }
-    this.isUploadingArweave = true;
-    this.uploadStatus = 'uploading';
+
     try {
-      const arrayBuffer = await this.fileBlob.arrayBuffer();
+      const arrayBuffer = await tempRecord.fileBlob.arrayBuffer();
       const buffer = Buffer.from(arrayBuffer);
       const arweaveId = await uploadSingleFileToBundlr(buffer, {
-        fileSize: this.fileByteSize,
-        ipfsHash: this.ipfsHash,
-        fileType: this.fileType as string,
-        txHash: transactionHash,
+        fileSize: tempRecord.fileBlob?.size || 0,
+        ipfsHash: tempRecord.ipfsHash,
+        fileType: tempRecord.fileType as string,
+        txHash: tempRecord.transactionHash,
       });
       if (arweaveId) {
-        this.uploadArweaveId = arweaveId
+        this.uploadArweaveIdList.push(arweaveId)
         this.$emit('arweaveUploaded', { arweaveId })
         this.isOpenSignDialog = false
       } else {
@@ -1421,42 +1500,39 @@ export default class IscnRegisterForm extends Vue {
       console.error(err)
       this.shouldShowAlert = true
       this.errorMessage = (err as Error).toString()
-    } finally {
-      this.isUploadingArweave = false;
-      this.uploadStatus = '';
     }
   }
 
-  async submitToNumbers(): Promise<void> {
-    logTrackerEvent(this, 'ISCNCreate', 'SubmitToNumbers', '', 1);
-    this.isOpenSignDialog = true;
-    try {
-      this.uploadStatus = 'loading';
-      const formData = new FormData();
-      if (this.fileBlob) formData.append('file', this.fileBlob);
-      const {
-        numAssetIds: [numbersProtocolAssetId],
-      } = await this.$axios.$post(
-        `${API_POST_NUMBERS_PROTOCOL_ASSETS}`,
-        formData,
-        {
-          headers: {
-            'Content-Type': 'multipart/form-data',
-          },
-        },
-      )
-      this.numbersProtocolAssetId = numbersProtocolAssetId
-      this.$emit('numbers-protocol-registed', { numbersProtocolAssetId })
-      this.isOpenSignDialog = false;
-    } catch (error) {
-      this.shouldShowAlert = true;
-      this.errorMessage = (error as Error).toString()
-      // eslint-disable-next-line no-console
-      console.error(error)
-    } finally {
-      this.uploadStatus = '';
-    }
-  }
+  // async submitToNumbers(): Promise<void> {
+  //   logTrackerEvent(this, 'ISCNCreate', 'SubmitToNumbers', '', 1);
+  //   this.isOpenSignDialog = true;
+  //   try {
+  //     this.uploadStatus = 'loading';
+  //     const formData = new FormData();
+  //     if (this.fileBlob) formData.append('file', this.fileBlob);
+  //     const {
+  //       numAssetIds: [numbersProtocolAssetId],
+  //     } = await this.$axios.$post(
+  //       `${API_POST_NUMBERS_PROTOCOL_ASSETS}`,
+  //       formData,
+  //       {
+  //         headers: {
+  //           'Content-Type': 'multipart/form-data',
+  //         },
+  //       },
+  //     )
+  //     this.numbersProtocolAssetId = numbersProtocolAssetId
+  //     this.$emit('numbers-protocol-registed', { numbersProtocolAssetId })
+  //     this.isOpenSignDialog = false;
+  //   } catch (error) {
+  //     this.shouldShowAlert = true;
+  //     this.errorMessage = (error as Error).toString()
+  //     // eslint-disable-next-line no-console
+  //     console.error(error)
+  //   } finally {
+  //     this.uploadStatus = '';
+  //   }
+  // }
 
   async submitToISCN(): Promise<void> {
     logTrackerEvent(this, 'ISCNCreate', 'SubmitToISCN', '', 1);
diff --git a/pages/nft/url/index.vue b/pages/nft/url/index.vue
index 98d25eb7..e1207939 100644
--- a/pages/nft/url/index.vue
+++ b/pages/nft/url/index.vue
@@ -291,7 +291,7 @@ export default class FetchIndex extends Vue {
       description,
       tagsString: keywords,
       url: this.iscnData.url || this.url,
-      exifInfo: {},
+      exifInfo: [],
       license,
       publisher,
       ipfsHash: this.ipfsHash,
diff --git a/utils/cosmos/iscn/iscn.type.ts b/utils/cosmos/iscn/iscn.type.ts
index 50abb4f9..a7d16dfc 100644
--- a/utils/cosmos/iscn/iscn.type.ts
+++ b/utils/cosmos/iscn/iscn.type.ts
@@ -7,10 +7,10 @@ export interface ISCNRegisterPayload {
   url: string;
   exifInfo: any;
   license: string;
-  ipfsHash: string;
-  arweaveId: string;
+  ipfsHash: any;
+  arweaveId: any;
   numbersProtocolAssetId: string;
-  fileSHA256: string;
+  fileSHA256: any;
   type: string;
   publisher?: string,
   author: string;
diff --git a/utils/cosmos/iscn/sign.ts b/utils/cosmos/iscn/sign.ts
index ba43299e..d260954d 100644
--- a/utils/cosmos/iscn/sign.ts
+++ b/utils/cosmos/iscn/sign.ts
@@ -72,9 +72,18 @@ export function formatISCNTxPayload(payload: ISCNRegisterPayload): ISCNSignPaylo
       rewardProportion = Math.max(0, rewardProportion);
     }
   }
-  if (fileSHA256) contentFingerprints.push(`hash://sha256/${fileSHA256}`)
-  if (ipfsHash) contentFingerprints.push(`ipfs://${ipfsHash}`)
-  if (arweaveId) contentFingerprints.push(`ar://${arweaveId}`);
+
+  const pushContentFingerprint = (value: any, prefix:string) => {
+    if (Array.isArray(value)) {
+      value.forEach(item => contentFingerprints.push(`${prefix}${item}`));
+    } else if (typeof value === 'string' && value.length) {
+      contentFingerprints.push(`${prefix}${value}`);
+    }
+  };
+  pushContentFingerprint(fileSHA256, 'hash://sha256/');
+  pushContentFingerprint(ipfsHash, 'ipfs://');
+  pushContentFingerprint(arweaveId, 'ar://');
+
   if (numbersProtocolAssetId) contentFingerprints.push(`num://${numbersProtocolAssetId}`);
   if (authorNames.length) {
     for (let i = 0; i < authorNames.length; i += 1) {

From 34456dcf5032c111f89616379cd69e375b595e13 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Thu, 26 Oct 2023 16:05:34 +0800
Subject: [PATCH 03/12] =?UTF-8?q?=F0=9F=9A=B8=20Store=20arweave=20payment?=
 =?UTF-8?q?=20tx=20hashes=20in=20Map?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnRegisterForm.vue | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index ec8d4aa1..2714610a 100644
--- a/components/IscnRegisterForm.vue
+++ b/components/IscnRegisterForm.vue
@@ -804,7 +804,7 @@ export default class IscnRegisterForm extends Vue {
   authorName: string = ''
   authorUrl: string[] = []
   authorWalletAddress: string[] = []
-  arweavePaymentTransactionHash: string = ''
+  sentArweaveTransactionHashes = new Map<string, string>()
   uploadStatus: string = ''
   uploadArweaveIdList: string[] = []
   error: string = ''
@@ -1446,7 +1446,12 @@ export default class IscnRegisterForm extends Vue {
 
   async sendArweaveFeeTx(records: any): Promise<string> {
     logTrackerEvent(this, 'ISCNCreate', 'SendArFeeTx', '', 1);
-    if (this.arweavePaymentTransactionHash) return this.arweavePaymentTransactionHash;
+    if (this.sentArweaveTransactionHashes.has(records.ipfsHash)) {
+      const transactionHash = this.sentArweaveTransactionHashes.get(records.ipfsHash);
+      if (transactionHash) {
+        return transactionHash;
+      }
+    }
     await this.initIfNecessary()
     if (!this.signer) throw new Error('SIGNER_NOT_INITED');
     if (!this.arweaveFeeTargetAddress) throw new Error('TARGET_ADDRESS_NOT_SET');
@@ -1454,8 +1459,10 @@ export default class IscnRegisterForm extends Vue {
     const memo = JSON.stringify({ ipfs: records.ipfsHash, fileSize: records.fileBlob?.size || 0 });
     try {
       const { transactionHash } = await sendLIKE(this.address, this.arweaveFeeTargetAddress, this.arweaveFee.toFixed(), this.signer, memo);
-      if (transactionHash) this.arweavePaymentTransactionHash = transactionHash;
-      return transactionHash;
+      if (transactionHash) {
+        this.sentArweaveTransactionHashes.set(records.ipfsHash, transactionHash);
+        return transactionHash;
+      }
     } catch (err) {
       this.signDialogError = (err as Error).toString()
       // TODO: Handle error
@@ -1473,11 +1480,10 @@ export default class IscnRegisterForm extends Vue {
     if (!tempRecord.fileBlob) return;
     this.isOpenSignDialog = true;
     this.onOpenKeplr();
-    let transactionHash = this.arweavePaymentTransactionHash
-    if (!transactionHash) {
-       transactionHash = await this.sendArweaveFeeTx();
+    tempRecord.transactionHash = this.sentArweaveTransactionHashes.get(tempRecord.ipfsHash)
+    if (!tempRecord.transactionHash) {
+     tempRecord.transactionHash = await this.sendArweaveFeeTx(tempRecord);
     }
-
     // Register Numbers Protocol assets along with Arweave
     if (this.isRegisterNumbersProtocolAsset) {
       logTrackerEvent(this, 'ISCNCreate', 'SubmitToNumbers', '', 1);

From 849831aaebd83650cb3af426c42783397a0ac5fb Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Sun, 29 Oct 2023 14:28:53 +0800
Subject: [PATCH 04/12] =?UTF-8?q?=F0=9F=92=84=20Add=20Info=20button=20to?=
 =?UTF-8?q?=20display=20Exif=20info?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnRegisterForm.vue | 33 +++++++++++++++++++++-----
 components/IscnUploadForm.vue   | 41 +++++++++++++++++++++++++--------
 2 files changed, 58 insertions(+), 16 deletions(-)

diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index 2714610a..537158da 100644
--- a/components/IscnRegisterForm.vue
+++ b/components/IscnRegisterForm.vue
@@ -42,12 +42,13 @@
             <table class="w-full">
               <tbody class="w-full">
                 <tr
-                  v-for="{
+                  v-for="({
                     isFileImage,
                     fileData,
                     fileName,
                     fileSize,
-                  } of fileRecords"
+                    exifInfo,
+                  }, index) of fileRecords"
                   :key="fileName"
                   class="border-b-shade-gray border-b-[1px] text-dark-gray hover:bg-light-gray transition-colors w-full"
                 >
@@ -79,6 +80,17 @@
                       />
                     </div>
                   </td>
+                  <td class="py-[4px]">
+                    <div class="flex gap-[4px] items-end ml-[4px]">
+                      <div
+                        v-if="exifInfo"
+                        :class="['cursor-pointer']"
+                        @click="handleClickExifInfo(index)"
+                      >
+                        <IconInfo />
+                      </div>
+                    </div>
+                  </td>
                 </tr>
               </tbody>
             </table>
@@ -165,7 +177,7 @@
         </CheckBox>
       </FormField> -->
       <!-- Dialog -->
-      <!-- <Dialog
+      <Dialog
         v-model="isOpenFileInfoDialog"
         :has-padding="false"
         preset="custom"
@@ -177,10 +189,10 @@
             'overflow-y-scroll',
             'scrollbar-hidden',
           ]"
-          :img-src="fileData"
-          :all-exif="exifInfo"
+          :img-src="displayImageSrc"
+          :all-exif="displayExifInfo"
         />
-      </Dialog> -->
+      </Dialog>
       <div v-if="showUploadOnly" :class="[
         'flex',
         'flex-col',
@@ -815,6 +827,9 @@ export default class IscnRegisterForm extends Vue {
   customContentFingerprints: string[] = []
   type: string = this.defaultType
 
+  displayImageSrc: string = ''
+  displayExifInfo: any = null
+
   arweaveFeeTargetAddress: string = ''
   arweaveFee = new BigNumber(0)
   iscnFee = new BigNumber(0)
@@ -1580,5 +1595,11 @@ export default class IscnRegisterForm extends Vue {
       this.isOpenQuitAlertDialog = false;
     }
   }
+
+  handleClickExifInfo(index: number) {
+    this.isOpenFileInfoDialog = true
+    this.displayImageSrc = this.fileRecords[index].fileData
+    this.displayExifInfo = this.fileRecords[index].exifInfo
+  }
 }
 </script>
diff --git a/components/IscnUploadForm.vue b/components/IscnUploadForm.vue
index 70964c17..2e254666 100644
--- a/components/IscnUploadForm.vue
+++ b/components/IscnUploadForm.vue
@@ -48,7 +48,7 @@
               <tbody class="w-full">
                 <tr
                   v-for="(
-                    { isFileImage, fileData, fileName, fileSize },
+                    { isFileImage, fileData, fileName, fileSize, exifInfo},
                     index
                   ) of fileRecords"
                   :key="fileName"
@@ -72,7 +72,7 @@
                     >
                       <Label
                         :text="fileName"
-                        preset="h5"
+                        preset="h6"
                         :class="['font-semibold', 'text-dark-gray']"
                       />
                       <Label
@@ -83,11 +83,20 @@
                     </div>
                   </td>
                   <td class="py-[4px]">
-                    <div
-                      :class="['mr-[8px]', 'cursor-pointer']"
-                      @click="handleDeleteFile(index)"
-                    >
-                      <IconDelete />
+                    <div class="flex gap-[4px] items-end ml-[4px]">
+                      <div
+                        v-if="exifInfo"
+                        :class="['cursor-pointer']"
+                        @click="handleClickExifInfo(index)"
+                      >
+                        <IconInfo />
+                      </div>
+                      <div
+                        :class="['ml-auto', 'cursor-pointer']"
+                        @click="handleDeleteFile(index)"
+                      >
+                        <IconDelete />
+                      </div>
                     </div>
                   </td>
                 </tr>
@@ -133,8 +142,8 @@
             'overflow-y-scroll',
             'scrollbar-hidden',
           ]"
-          :img-src="fileData"
-          :all-exif="exifInfo"
+          :img-src="displayImageSrc"
+          :all-exif="displayExifInfo"
         />
       </Dialog>
     </Card>
@@ -175,6 +184,9 @@ export default class UploadForm extends Vue {
   fileSize: number = 0
   fileType: string = ''
 
+  displayImageSrc: string = ''
+  displayExifInfo: any = null
+
   fileRecords: any[] = []
 
   isOpenFileInfoDialog = false
@@ -270,7 +282,10 @@ export default class UploadForm extends Vue {
             if (imageType) {
               try {
                 // eslint-disable-next-line no-await-in-loop
-                fileRecord.exifInfo = await exifr.parse(file)
+                const exif = await exifr.parse(file)
+                if (exif) {
+                  fileRecord.exifInfo = exif
+                }
               } catch (err) {
                 // eslint-disable-next-line no-console
                 console.error(err)
@@ -313,5 +328,11 @@ export default class UploadForm extends Vue {
   handleDeleteFile(index: number) {
     this.fileRecords.splice(index, 1)
   }
+
+  handleClickExifInfo(index: number) {
+    this.isOpenFileInfoDialog = true
+    this.displayImageSrc = this.fileRecords[index].fileData
+    this.displayExifInfo = this.fileRecords[index].exifInfo
+  }
 }
 </script>

From 975651b34e838db64844bfb540f17c446846966f Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Sun, 29 Oct 2023 15:07:30 +0800
Subject: [PATCH 05/12] =?UTF-8?q?=F0=9F=8E=A8=20Support=20upload=20mutiple?=
 =?UTF-8?q?=20files=20to=20numbers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnRegisterForm.vue | 92 ++++++++++++++++++++-------------
 components/IscnUploadForm.vue   |  4 +-
 locales/en.json                 |  2 +-
 pages/nft/url/index.vue         |  2 +-
 utils/cosmos/iscn/iscn.type.ts  |  2 +-
 utils/cosmos/iscn/sign.ts       |  2 +-
 6 files changed, 61 insertions(+), 43 deletions(-)

diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index 537158da..9dc70424 100644
--- a/components/IscnRegisterForm.vue
+++ b/components/IscnRegisterForm.vue
@@ -81,7 +81,7 @@
                     </div>
                   </td>
                   <td class="py-[4px]">
-                    <div class="flex gap-[4px] items-end ml-[4px]">
+                    <div class="flex gap-[8px] items-center justify-end ml-[4px]">
                       <div
                         v-if="exifInfo"
                         :class="['cursor-pointer']"
@@ -89,6 +89,16 @@
                       >
                         <IconInfo />
                       </div>
+                      <div
+                        v-if="exifInfo || isFileImage"
+                      >
+                        <input
+                          v-model="isRegisterNumbersProtocolAsset"
+                          type="checkbox"
+                          name="numbers"
+                          disabled
+                        >
+                      </div>
                     </div>
                   </td>
                 </tr>
@@ -161,8 +171,8 @@
         </div>
       </FormField>
       <!-- Numbers Protocol -->
-      <!-- <FormField
-        v-if="!showUploadOnly && (isPhoto || isImage)"
+      <FormField
+        v-if="shouldShowUploadToNumbers"
         :label="$t('IscnRegisterForm.label.numbersProtocol')"
         class="mb-[12px]"
       >
@@ -175,7 +185,7 @@
             >{{ $t('IscnRegisterForm.label.numbersProtocol.details.link') }}</Link>
           </i18n>
         </CheckBox>
-      </FormField> -->
+      </FormField>
       <!-- Dialog -->
       <Dialog
         v-model="isOpenFileInfoDialog"
@@ -739,7 +749,7 @@ import { DEFAULT_TRANSFER_FEE, sendLIKE } from '~/utils/cosmos/sign';
 import { estimateISCNTxGasAndFee, formatISCNTxPayload } from '~/utils/cosmos/iscn/sign';
 import {
   getLikerIdMinApi,
-  // API_POST_NUMBERS_PROTOCOL_ASSETS,
+  API_POST_NUMBERS_PROTOCOL_ASSETS,
   } from '~/constant/api';
 import { getAccountBalance } from '~/utils/cosmos'
 import { logTrackerEvent } from '~/utils/logger'
@@ -837,7 +847,7 @@ export default class IscnRegisterForm extends Vue {
   debouncedCalculateISCNFee = debounce(this.calculateISCNFee, 400)
 
   isRegisterNumbersProtocolAsset = false
-  numbersProtocolAssetId = ''
+  numbersProtocolAssetIds = new Map<string, string>()
 
   isOpenFileInfoDialog = false
   isOpenAuthorDialog = false
@@ -1018,7 +1028,7 @@ export default class IscnRegisterForm extends Vue {
       license: this.formattedLicense,
       ipfsHash: this.ipfsHashList,
       arweaveId: this.uploadArweaveIdList,
-      numbersProtocolAssetId: this.numbersProtocolAssetId,
+      numbersProtocolAssetId: [...this.numbersProtocolAssetIds.values()],
       fileSHA256: this.fileRecords.map(file => file.fileSHA256),
       author: this.author.name,
       authorNames: this.authorNames,
@@ -1092,6 +1102,10 @@ export default class IscnRegisterForm extends Vue {
     )
   }
 
+  get shouldShowUploadToNumbers() {
+    return this.fileRecords.some(file => file.isFileImage || file.exifInfo)
+  }
+
   @Watch('payload', { immediate: true, deep: true })
   change() {
     this.debouncedCalculateISCNFee()
@@ -1405,6 +1419,10 @@ export default class IscnRegisterForm extends Vue {
         for (const record of this.fileRecords) {
           // eslint-disable-next-line no-await-in-loop
           await this.submitToArweave(record);
+          if (this.isRegisterNumbersProtocolAsset && !this.numbersProtocolAssetIds.has(record.ipfsHash)) {
+          // eslint-disable-next-line no-await-in-loop
+            await this.submitToNumbers(record);
+          }
         }
       } catch (error) {
         // eslint-disable-next-line no-console
@@ -1531,36 +1549,36 @@ export default class IscnRegisterForm extends Vue {
     }
   }
 
-  // async submitToNumbers(): Promise<void> {
-  //   logTrackerEvent(this, 'ISCNCreate', 'SubmitToNumbers', '', 1);
-  //   this.isOpenSignDialog = true;
-  //   try {
-  //     this.uploadStatus = 'loading';
-  //     const formData = new FormData();
-  //     if (this.fileBlob) formData.append('file', this.fileBlob);
-  //     const {
-  //       numAssetIds: [numbersProtocolAssetId],
-  //     } = await this.$axios.$post(
-  //       `${API_POST_NUMBERS_PROTOCOL_ASSETS}`,
-  //       formData,
-  //       {
-  //         headers: {
-  //           'Content-Type': 'multipart/form-data',
-  //         },
-  //       },
-  //     )
-  //     this.numbersProtocolAssetId = numbersProtocolAssetId
-  //     this.$emit('numbers-protocol-registed', { numbersProtocolAssetId })
-  //     this.isOpenSignDialog = false;
-  //   } catch (error) {
-  //     this.shouldShowAlert = true;
-  //     this.errorMessage = (error as Error).toString()
-  //     // eslint-disable-next-line no-console
-  //     console.error(error)
-  //   } finally {
-  //     this.uploadStatus = '';
-  //   }
-  // }
+  async submitToNumbers(record: any): Promise<void> {
+    logTrackerEvent(this, 'ISCNCreate', 'SubmitToNumbers', '', 1);
+    this.isOpenSignDialog = true;
+    try {
+      this.uploadStatus = 'loading';
+      const formData = new FormData();
+      if (record.fileBlob) formData.append('file', record.fileBlob);
+      const {
+        numAssetIds: [numbersProtocolAssetId],
+      } = await this.$axios.$post(
+        `${API_POST_NUMBERS_PROTOCOL_ASSETS}`,
+        formData,
+        {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+        },
+      )
+      this.numbersProtocolAssetIds.set(record.ipfsHash, numbersProtocolAssetId)
+      this.$emit('numbers-protocol-registed', { numbersProtocolAssetId })
+      this.isOpenSignDialog = false;
+    } catch (error) {
+      this.shouldShowAlert = true;
+      this.errorMessage = (error as Error).toString()
+      // eslint-disable-next-line no-console
+      console.error(error)
+    } finally {
+      this.uploadStatus = '';
+    }
+  }
 
   async submitToISCN(): Promise<void> {
     logTrackerEvent(this, 'ISCNCreate', 'SubmitToISCN', '', 1);
diff --git a/components/IscnUploadForm.vue b/components/IscnUploadForm.vue
index 2e254666..193b4e4d 100644
--- a/components/IscnUploadForm.vue
+++ b/components/IscnUploadForm.vue
@@ -83,7 +83,7 @@
                     </div>
                   </td>
                   <td class="py-[4px]">
-                    <div class="flex gap-[4px] items-end ml-[4px]">
+                    <div class="flex gap-[4px] items-center justify-end ml-[4px]">
                       <div
                         v-if="exifInfo"
                         :class="['cursor-pointer']"
@@ -92,7 +92,7 @@
                         <IconInfo />
                       </div>
                       <div
-                        :class="['ml-auto', 'cursor-pointer']"
+                        :class="['cursor-pointer']"
                         @click="handleDeleteFile(index)"
                       >
                         <IconDelete />
diff --git a/locales/en.json b/locales/en.json
index 98ea197a..50e5bc5f 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -217,7 +217,7 @@
   "IscnRegisterForm.label.fileName": "File name",
   "IscnRegisterForm.label.fileType": "File type",
   "IscnRegisterForm.label.numbersProtocol": "Numbers Protocol",
-  "IscnRegisterForm.label.numbersProtocol.details": "Register your asset in {link}",
+  "IscnRegisterForm.label.numbersProtocol.details": "Register your image asset in {link}",
   "IscnRegisterForm.label.numbersProtocol.details.link": "Numbers Protocol",
   "IscnRegisterForm.label.registrant": "Registrant",
   "IscnRegisterForm.label.tags": "Tags",
diff --git a/pages/nft/url/index.vue b/pages/nft/url/index.vue
index e1207939..4784d12c 100644
--- a/pages/nft/url/index.vue
+++ b/pages/nft/url/index.vue
@@ -307,7 +307,7 @@ export default class FetchIndex extends Vue {
       likerIds: [],
       likerIdsAddresses: [],
       authorDescriptions: [authorDescription],
-      numbersProtocolAssetId: '',
+      numbersProtocolAssetId: [],
       contentFingerprints,
       stakeholders,
       recordNotes,
diff --git a/utils/cosmos/iscn/iscn.type.ts b/utils/cosmos/iscn/iscn.type.ts
index a7d16dfc..2732e480 100644
--- a/utils/cosmos/iscn/iscn.type.ts
+++ b/utils/cosmos/iscn/iscn.type.ts
@@ -9,7 +9,7 @@ export interface ISCNRegisterPayload {
   license: string;
   ipfsHash: any;
   arweaveId: any;
-  numbersProtocolAssetId: string;
+  numbersProtocolAssetId: string[];
   fileSHA256: any;
   type: string;
   publisher?: string,
diff --git a/utils/cosmos/iscn/sign.ts b/utils/cosmos/iscn/sign.ts
index d260954d..6ba8678d 100644
--- a/utils/cosmos/iscn/sign.ts
+++ b/utils/cosmos/iscn/sign.ts
@@ -83,8 +83,8 @@ export function formatISCNTxPayload(payload: ISCNRegisterPayload): ISCNSignPaylo
   pushContentFingerprint(fileSHA256, 'hash://sha256/');
   pushContentFingerprint(ipfsHash, 'ipfs://');
   pushContentFingerprint(arweaveId, 'ar://');
+  pushContentFingerprint(numbersProtocolAssetId, 'num://');
 
-  if (numbersProtocolAssetId) contentFingerprints.push(`num://${numbersProtocolAssetId}`);
   if (authorNames.length) {
     for (let i = 0; i < authorNames.length; i += 1) {
       const authorName: string = authorNames[i]

From 8d7a0bb84ec8d44fc985899f3207f15b85c9f019 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Sun, 29 Oct 2023 15:13:59 +0800
Subject: [PATCH 06/12] =?UTF-8?q?=F0=9F=A9=B9=20Change=20exinfo=20default?=
 =?UTF-8?q?=20type=20to=20object?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/nft/url/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/nft/url/index.vue b/pages/nft/url/index.vue
index 4784d12c..f9141d5a 100644
--- a/pages/nft/url/index.vue
+++ b/pages/nft/url/index.vue
@@ -291,7 +291,7 @@ export default class FetchIndex extends Vue {
       description,
       tagsString: keywords,
       url: this.iscnData.url || this.url,
-      exifInfo: [],
+      exifInfo: {},
       license,
       publisher,
       ipfsHash: this.ipfsHash,

From 0003f3f8bb9e58d2654755cd14e73042233bdfbe Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Sun, 29 Oct 2023 15:52:21 +0800
Subject: [PATCH 07/12] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20Improve=20formatting?=
 =?UTF-8?q?=20&=20naming?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnRegisterForm.vue | 12 ++++++------
 pages/new/index.vue             | 14 +++++++-------
 pages/nft/url/index.vue         |  2 +-
 utils/cosmos/iscn/iscn.type.ts  |  4 ++--
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index 9dc70424..31d29059 100644
--- a/components/IscnRegisterForm.vue
+++ b/components/IscnRegisterForm.vue
@@ -146,8 +146,8 @@
         :label="$t('IscnRegisterForm.label.fingerprints')"
         class="mb-[12px]"
       >
-        <ContentFingerprintLink v-for="ipfs of ipfsHashList" :key="ipfs" :item="formattedIpfs(ipfs)" />
-        <ContentFingerprintLink v-for="ar of uploadArweaveIdList" :key="ar" :item="formattedArweave(ar)" />
+        <ContentFingerprintLink v-for="ipfs of ipfsHashList" :key="ipfs" :item="formatIpfs(ipfs)" />
+        <ContentFingerprintLink v-for="ar of uploadArweaveIdList" :key="ar" :item="formatArweave(ar)" />
         <ContentFingerprintLink v-for="f, i in customContentFingerprints" :key="f + i" :item="f" />
         <div
           v-if="shouldShowContentFingerprintInput"
@@ -927,10 +927,10 @@ export default class IscnRegisterForm extends Vue {
   get contentFingerprintLinks() {
     const array=[]
     if (this.uploadArweaveIdList) {
-      array.push(...this.uploadArweaveIdList.map(id => this.formattedArweave(id)))
+      array.push(...this.uploadArweaveIdList.map(id => this.formatArweave(id)))
     }
     if (this.ipfsHashList.length) {
-      array.push(...this.ipfsHashList.map(ipfs => this.formattedIpfs(ipfs)))
+      array.push(...this.ipfsHashList.map(ipfs => this.formatIpfs(ipfs)))
     }
     if (this.customContentFingerprints.length){
       array.push(...this.customContentFingerprints)
@@ -1245,11 +1245,11 @@ export default class IscnRegisterForm extends Vue {
     this.license = value
   }
 
-  formattedIpfs(ipfsHash: string) {
+  formatIpfs(ipfsHash: string) {
     return this.$t('IscnRegisterForm.ipfs.link', { hash: ipfsHash })
   }
 
-  formattedArweave(arweaveId: string) {
+  formatArweave(arweaveId: string) {
     return this.$t('IscnRegisterForm.arweave.link', { arweaveId })
   }
 
diff --git a/pages/new/index.vue b/pages/new/index.vue
index d2bb633e..f78ba8d1 100644
--- a/pages/new/index.vue
+++ b/pages/new/index.vue
@@ -175,13 +175,13 @@ export default class NewIndexPage extends Vue {
       if (url) {
         const { data, headers } = await this.$axios.get(url, { responseType: 'blob' })
         this.urlFileRecords.push({
-        fileBlob:data as Blob,
-        ipfsHash:this.urlIpfsHash,
-        arweaveId: this.arweaveId,
-        isFileImage:headers['content-type'].startsWith('image'),
-        fileType:headers['content-type'],
-        fileSize:headers['content-length'],
-        fileData:`data:${this.fileType};base64,${Buffer.from(await data.arrayBuffer(), 'binary').toString('base64')}`,
+          fileBlob: data as Blob,
+          ipfsHash: this.urlIpfsHash,
+          arweaveId: this.arweaveId,
+          isFileImage:  headers['content-type'].startsWith('image'),
+          fileType: headers['content-type'],
+          fileSize: headers['content-length'],
+          fileData: `data:${this.fileType};base64,${Buffer.from(await data.arrayBuffer(), 'binary').toString('base64')}`,
         })
       }
     }
diff --git a/pages/nft/url/index.vue b/pages/nft/url/index.vue
index f9141d5a..98d25eb7 100644
--- a/pages/nft/url/index.vue
+++ b/pages/nft/url/index.vue
@@ -307,7 +307,7 @@ export default class FetchIndex extends Vue {
       likerIds: [],
       likerIdsAddresses: [],
       authorDescriptions: [authorDescription],
-      numbersProtocolAssetId: [],
+      numbersProtocolAssetId: '',
       contentFingerprints,
       stakeholders,
       recordNotes,
diff --git a/utils/cosmos/iscn/iscn.type.ts b/utils/cosmos/iscn/iscn.type.ts
index 2732e480..4b26a666 100644
--- a/utils/cosmos/iscn/iscn.type.ts
+++ b/utils/cosmos/iscn/iscn.type.ts
@@ -9,8 +9,8 @@ export interface ISCNRegisterPayload {
   license: string;
   ipfsHash: any;
   arweaveId: any;
-  numbersProtocolAssetId: string[];
-  fileSHA256: any;
+  numbersProtocolAssetId: string | string[];
+  fileSHA256: string | string[];
   type: string;
   publisher?: string,
   author: string;

From 29d03b889d5237bf70239d8c235e7014a5255376 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Sun, 29 Oct 2023 16:00:49 +0800
Subject: [PATCH 08/12] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20Reset=20data=20array?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnRegisterForm.vue | 2 +-
 pages/new/index.vue             | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index 31d29059..755d296d 100644
--- a/components/IscnRegisterForm.vue
+++ b/components/IscnRegisterForm.vue
@@ -1118,7 +1118,7 @@ export default class IscnRegisterForm extends Vue {
 
   async mounted() {
     if (this.arweaveId) {
-      this.uploadArweaveIdList.push(this.arweaveId)
+      this.uploadArweaveIdList = [this.arweaveId];
     }
     this.uploadStatus = 'loading'
     await this.estimateArweaveFee();
diff --git a/pages/new/index.vue b/pages/new/index.vue
index f78ba8d1..f592ea60 100644
--- a/pages/new/index.vue
+++ b/pages/new/index.vue
@@ -174,7 +174,7 @@ export default class NewIndexPage extends Vue {
       else if (this.urlIpfsHash) url = `https://ipfs.io/ipfs/${this.urlIpfsHash}`;
       if (url) {
         const { data, headers } = await this.$axios.get(url, { responseType: 'blob' })
-        this.urlFileRecords.push({
+        this.urlFileRecords = [{
           fileBlob: data as Blob,
           ipfsHash: this.urlIpfsHash,
           arweaveId: this.arweaveId,
@@ -182,14 +182,14 @@ export default class NewIndexPage extends Vue {
           fileType: headers['content-type'],
           fileSize: headers['content-length'],
           fileData: `data:${this.fileType};base64,${Buffer.from(await data.arrayBuffer(), 'binary').toString('base64')}`,
-        })
+        }]
       }
     }
   }
 
   onSubmitUpload(fileRecords: any[] | []) {
     if (fileRecords && fileRecords.length) {
-      this.uploadFileRecords.push(...fileRecords)
+      this.uploadFileRecords = [...fileRecords]
     }
     this.state = 'iscn'
     logTrackerEvent(this, 'ISCNCreate', 'ISCNConfirmFile', '', 1);

From 19849b072950f311ea5b7bd87222f0be03d3a685 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Sun, 29 Oct 2023 16:47:30 +0800
Subject: [PATCH 09/12] =?UTF-8?q?=F0=9F=90=9B=20Prevent=20duplicate=20Arwe?=
 =?UTF-8?q?ave=20uploads?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnRegisterForm.vue | 62 +++++++++++++++++++--------------
 1 file changed, 35 insertions(+), 27 deletions(-)

diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index 755d296d..634e5d30 100644
--- a/components/IscnRegisterForm.vue
+++ b/components/IscnRegisterForm.vue
@@ -826,7 +826,7 @@ export default class IscnRegisterForm extends Vue {
   authorName: string = ''
   authorUrl: string[] = []
   authorWalletAddress: string[] = []
-  sentArweaveTransactionHashes = new Map<string, string>()
+  sentArweaveTransactionHashes = new Map<string, any>()
   uploadStatus: string = ''
   uploadArweaveIdList: string[] = []
   error: string = ''
@@ -1480,7 +1480,7 @@ export default class IscnRegisterForm extends Vue {
   async sendArweaveFeeTx(records: any): Promise<string> {
     logTrackerEvent(this, 'ISCNCreate', 'SendArFeeTx', '', 1);
     if (this.sentArweaveTransactionHashes.has(records.ipfsHash)) {
-      const transactionHash = this.sentArweaveTransactionHashes.get(records.ipfsHash);
+      const { transactionHash } = this.sentArweaveTransactionHashes.get(records.ipfsHash);
       if (transactionHash) {
         return transactionHash;
       }
@@ -1493,7 +1493,8 @@ export default class IscnRegisterForm extends Vue {
     try {
       const { transactionHash } = await sendLIKE(this.address, this.arweaveFeeTargetAddress, this.arweaveFee.toFixed(), this.signer, memo);
       if (transactionHash) {
-        this.sentArweaveTransactionHashes.set(records.ipfsHash, transactionHash);
+        const existingData = this.sentArweaveTransactionHashes.get(records.ipfsHash) || {};
+        this.sentArweaveTransactionHashes.set(records.ipfsHash, { ...existingData, transactionHash });
         return transactionHash;
       }
     } catch (err) {
@@ -1508,44 +1509,51 @@ export default class IscnRegisterForm extends Vue {
   }
 
   async submitToArweave(records: any): Promise<void> {
+    const existingData = this.sentArweaveTransactionHashes.get(records.ipfsHash) || {};
+    const { transactionHash, arweaveId: uploadArweaveId } = existingData;
+    if (transactionHash && uploadArweaveId) return
     const tempRecord = {...records}
     logTrackerEvent(this, 'ISCNCreate', 'SubmitToArweave', '', 1);
     if (!tempRecord.fileBlob) return;
     this.isOpenSignDialog = true;
     this.onOpenKeplr();
-    tempRecord.transactionHash = this.sentArweaveTransactionHashes.get(tempRecord.ipfsHash)
+    tempRecord.transactionHash = transactionHash
     if (!tempRecord.transactionHash) {
-     tempRecord.transactionHash = await this.sendArweaveFeeTx(tempRecord);
+      tempRecord.transactionHash = await this.sendArweaveFeeTx(tempRecord);
     }
     // Register Numbers Protocol assets along with Arweave
     if (this.isRegisterNumbersProtocolAsset) {
       logTrackerEvent(this, 'ISCNCreate', 'SubmitToNumbers', '', 1);
     }
 
-    try {
-      const arrayBuffer = await tempRecord.fileBlob.arrayBuffer();
-      const buffer = Buffer.from(arrayBuffer);
-      const arweaveId = await uploadSingleFileToBundlr(buffer, {
-        fileSize: tempRecord.fileBlob?.size || 0,
-        ipfsHash: tempRecord.ipfsHash,
-        fileType: tempRecord.fileType as string,
-        txHash: tempRecord.transactionHash,
-      });
-      if (arweaveId) {
-        this.uploadArweaveIdList.push(arweaveId)
-        this.$emit('arweaveUploaded', { arweaveId })
-        this.isOpenSignDialog = false
-      } else {
+    if (tempRecord.transactionHash && !uploadArweaveId) {
+      try {
+        const arrayBuffer = await tempRecord.fileBlob.arrayBuffer();
+        const buffer = Buffer.from(arrayBuffer);
+        const arweaveId = await uploadSingleFileToBundlr(buffer, {
+          fileSize: tempRecord.fileBlob?.size || 0,
+          ipfsHash: tempRecord.ipfsHash,
+          fileType: tempRecord.fileType as string,
+          txHash: tempRecord.transactionHash,
+        });
+        if (arweaveId) {
+          const uploadedData = this.sentArweaveTransactionHashes.get(records.ipfsHash) || {};
+          this.sentArweaveTransactionHashes.set(records.ipfsHash, { ...uploadedData, arweaveId });
+          this.uploadArweaveIdList.push(arweaveId)
+          this.$emit('arweaveUploaded', { arweaveId })
+          this.isOpenSignDialog = false
+        } else {
+          this.shouldShowAlert = true
+          this.errorMessage = this.$t('IscnRegisterForm.error.arweave') as string
+          this.$emit('handleContinue')
+        }
+      } catch (err) {
+        // TODO: Handle error
+        // eslint-disable-next-line no-console
+        console.error(err)
         this.shouldShowAlert = true
-        this.errorMessage = this.$t('IscnRegisterForm.error.arweave') as string
-        this.$emit('handleContinue')
+        this.errorMessage = (err as Error).toString()
       }
-    } catch (err) {
-      // TODO: Handle error
-      // eslint-disable-next-line no-console
-      console.error(err)
-      this.shouldShowAlert = true
-      this.errorMessage = (err as Error).toString()
     }
   }
 

From cd4dcbe7a6964107b2f0192940ccb1d532f2403d Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Mon, 30 Oct 2023 07:38:04 +0800
Subject: [PATCH 10/12] =?UTF-8?q?=F0=9F=8E=A8=20Increase=20ISCN=20gas=20fe?=
 =?UTF-8?q?e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnRegisterForm.vue | 12 ++++++++--
 constant/index.ts               |  1 +
 utils/cosmos/iscn/index.ts      |  4 ++--
 utils/cosmos/iscn/sign.ts       | 41 +++++++++++++++++++++++++--------
 4 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index 634e5d30..809a4fba 100644
--- a/components/IscnRegisterForm.vue
+++ b/components/IscnRegisterForm.vue
@@ -747,6 +747,7 @@ import { estimateBundlrFilePrice, uploadSingleFileToBundlr } from '~/utils/arwea
 import { signISCNTx } from '~/utils/cosmos/iscn';
 import { DEFAULT_TRANSFER_FEE, sendLIKE } from '~/utils/cosmos/sign';
 import { estimateISCNTxGasAndFee, formatISCNTxPayload } from '~/utils/cosmos/iscn/sign';
+import { ISCN_GAS_MULTIPLIER } from '~/constant';
 import {
   getLikerIdMinApi,
   API_POST_NUMBERS_PROTOCOL_ASSETS,
@@ -843,6 +844,7 @@ export default class IscnRegisterForm extends Vue {
   arweaveFeeTargetAddress: string = ''
   arweaveFee = new BigNumber(0)
   iscnFee = new BigNumber(0)
+  iscnGasFee = ''
   balance = new BigNumber(0)
   debouncedCalculateISCNFee = debounce(this.calculateISCNFee, 400)
 
@@ -1288,11 +1290,12 @@ export default class IscnRegisterForm extends Vue {
     ])
     this.balance = new BigNumber(balance);
     const { iscnFee, gas: iscnGasEstimation } = estimation;
-    const iscnGasNanolike = iscnGasEstimation.fee.amount[0].amount
+    const iscnGasNanolike = new BigNumber(iscnGasEstimation.fee.amount[0].amount).times(ISCN_GAS_MULTIPLIER)
     const iscnFeeNanolike = iscnFee.amount
     this.iscnFee =  new BigNumber(iscnFeeNanolike)
       .plus(iscnGasNanolike)
       .shiftedBy(-9);
+    this.iscnGasFee = iscnGasNanolike.integerValue().toString();
   }
 
   handleSignDialogClose() {
@@ -1607,7 +1610,12 @@ export default class IscnRegisterForm extends Vue {
     }
     try {
       this.uploadStatus = 'signing'
-      const res = await signISCNTx(formatISCNTxPayload(this.payload), this.signer, this.address)
+      const res = await signISCNTx(
+        formatISCNTxPayload(this.payload),
+        this.signer,
+        this.address,
+        { gas: this.iscnGasFee },
+      )
       this.uploadStatus = 'success'
       this.$emit('txBroadcasted', res)
       this.isOpenSignDialog = false;
diff --git a/constant/index.ts b/constant/index.ts
index 4ea9e079..a09ffea7 100644
--- a/constant/index.ts
+++ b/constant/index.ts
@@ -17,6 +17,7 @@ export const IPFS_VIEW_GATEWAY_URL = 'https://ipfs.io/ipfs';
 export const ISCN_MIN_BALANCE = 0.01;
 
 export const ISCN_GAS_FEE = 200000;
+export const ISCN_GAS_MULTIPLIER = 1.5;
 
 export const ISCN_REGISTRY_NAME = 'likecoin-chain';
 
diff --git a/utils/cosmos/iscn/index.ts b/utils/cosmos/iscn/index.ts
index 9c9ed0eb..6cb1b42c 100644
--- a/utils/cosmos/iscn/index.ts
+++ b/utils/cosmos/iscn/index.ts
@@ -9,10 +9,10 @@ export async function signISCNTx(
   tx: ISCNSignPayload,
   signer: OfflineSigner,
   address: string,
-  { iscnId, memo }: { iscnId?: string, memo?: string } = {},
+  { iscnId, memo, gas}: { iscnId?: string, memo?: string, gas?: string } = {},
 ) {
   const client = await getQueryClient();
-  const res = await sign(tx, signer, address, { memo, iscnId });
+  const res = await sign(tx, signer, address, { memo, iscnId, gas });
   const [newIscnId] = await client.queryISCNIdsByTx(res.transactionHash);
   return {
     iscnId: newIscnId,
diff --git a/utils/cosmos/iscn/sign.ts b/utils/cosmos/iscn/sign.ts
index 6ba8678d..b297003d 100644
--- a/utils/cosmos/iscn/sign.ts
+++ b/utils/cosmos/iscn/sign.ts
@@ -4,7 +4,7 @@ import { ISCNSignPayload, ISCNSigningClient } from '@likecoin/iscn-js';
 import network from '@/constant/network';
 import { DeliverTxResponse } from '@cosmjs/stargate';
 import { ISCNRegisterPayload } from './iscn.type';
-import { WALLET_TYPE_REPLACER } from '~/constant'
+import { WALLET_TYPE_REPLACER, ISCN_GAS_FEE, DEFAULT_GAS_PRICE } from '~/constant'
 import { getPublisherISCNPayload } from '.';
 import { ISCN_PUBLISHERS } from '~/constant/iscn';
 
@@ -155,13 +155,36 @@ export async function signISCN(
   tx: ISCNSignPayload,
   signer: OfflineSigner,
   address: string,
-  { iscnId, memo }: { iscnId?: string, memo?: string } = {},
+  {
+    iscnId,
+    memo,
+    gas = ISCN_GAS_FEE.toString(),
+  }: { iscnId?: string, memo?: string, gas?: string } = {},
 ) {
-  const isUpdate = !!iscnId;
-  const signingClient = await getSigningClient();
-  await signingClient.connectWithSigner(network.rpcURL, signer);
-  const signingPromise = isUpdate ? signingClient.updateISCNRecord(address, iscnId as string, tx, { memo: memo || 'app.like.co' })
-    : signingClient.createISCNRecord(address, tx, { memo: memo || 'app.like.co' });
-  const res = await signingPromise;
-  return res as DeliverTxResponse;
+  const isUpdate = !!iscnId
+  const signingClient = await getSigningClient()
+  await signingClient.connectWithSigner(network.rpcURL, signer)
+  const signingPromise = isUpdate
+    ? signingClient.updateISCNRecord(address, iscnId as string, tx, {
+        memo: memo || 'app.like.co',
+        fee: {
+          gas,
+          amount: [{
+              denom: DEFAULT_GAS_PRICE[0].denom,
+              amount: DEFAULT_GAS_PRICE[0].amount.toString(),
+            }],
+        },
+      })
+    : signingClient.createISCNRecord(address, tx, {
+        memo: memo || 'app.like.co',
+        fee: {
+          gas,
+          amount: [{
+              denom: DEFAULT_GAS_PRICE[0].denom,
+              amount: DEFAULT_GAS_PRICE[0].amount.toString(),
+            }],
+        },
+      })
+  const res = await signingPromise
+  return res as DeliverTxResponse
 }

From e98f8bcfd6a4f5e4c17328eb9334f523df033369 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Mon, 30 Oct 2023 11:47:17 +0800
Subject: [PATCH 11/12] =?UTF-8?q?=F0=9F=8E=A8=20Update=20ipfsHash=20and=20?=
 =?UTF-8?q?arweaveId=20types?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 utils/cosmos/iscn/iscn.type.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/utils/cosmos/iscn/iscn.type.ts b/utils/cosmos/iscn/iscn.type.ts
index 4b26a666..d450ead7 100644
--- a/utils/cosmos/iscn/iscn.type.ts
+++ b/utils/cosmos/iscn/iscn.type.ts
@@ -7,8 +7,8 @@ export interface ISCNRegisterPayload {
   url: string;
   exifInfo: any;
   license: string;
-  ipfsHash: any;
-  arweaveId: any;
+  ipfsHash: string | string[];
+  arweaveId: string | string[];
   numbersProtocolAssetId: string | string[];
   fileSHA256: string | string[];
   type: string;

From fad4de79c0bdd8f98dcd0a1dc771c149efdd625b Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Mon, 30 Oct 2023 12:00:17 +0800
Subject: [PATCH 12/12] =?UTF-8?q?=F0=9F=8E=A8=20Update=20sentArweaveTransa?=
 =?UTF-8?q?ctionHashes=20types?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnRegisterForm.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index 809a4fba..233d17f9 100644
--- a/components/IscnRegisterForm.vue
+++ b/components/IscnRegisterForm.vue
@@ -827,7 +827,10 @@ export default class IscnRegisterForm extends Vue {
   authorName: string = ''
   authorUrl: string[] = []
   authorWalletAddress: string[] = []
-  sentArweaveTransactionHashes = new Map<string, any>()
+  sentArweaveTransactionHashes = new Map<
+    string, { transactionHash?: string, arweaveId?: string }
+  >()
+
   uploadStatus: string = ''
   uploadArweaveIdList: string[] = []
   error: string = ''
@@ -1483,9 +1486,9 @@ export default class IscnRegisterForm extends Vue {
   async sendArweaveFeeTx(records: any): Promise<string> {
     logTrackerEvent(this, 'ISCNCreate', 'SendArFeeTx', '', 1);
     if (this.sentArweaveTransactionHashes.has(records.ipfsHash)) {
-      const { transactionHash } = this.sentArweaveTransactionHashes.get(records.ipfsHash);
-      if (transactionHash) {
-        return transactionHash;
+      const transactionInfo = this.sentArweaveTransactionHashes.get(records.ipfsHash);
+      if (transactionInfo && transactionInfo.transactionHash) {
+        return transactionInfo.transactionHash;
       }
     }
     await this.initIfNecessary()