🚸 Provide additional information for sameAs

components/IscnRegisterForm.vue

@@ -594,6 +594,7 @@
           <SameAsFieldList
             :name="name"
             :url-options="contentFingerprintLinks"
+            :file-records="fileRecords"
             :current-list="sameAsList"
             @onConfirm="confirmSameAsChange"
           />
@@ -1005,7 +1006,7 @@ export default class IscnRegisterForm extends Vue {
       authorDescriptions: this.authorDescriptions,
       contentFingerprints: this.customContentFingerprints,
       inLanguage: this.language,
-      thumbnail: this.epubMetadata.thumbnail,
+      thumbnailUrl: this.epubMetadata?.thumbnailUrl,
     }
   }
 

components/IscnUploadForm.vue

@@ -264,7 +264,7 @@ import ePub from 'epubjs';
 
 import { OfflineSigner } from '@cosmjs/proto-signing'
 
-import { IS_CHAIN_UPGRADING, UPLOAD_FILESIZE_MAX, IPFS_VIEW_GATEWAY_URL } from '~/constant'
+import { IS_CHAIN_UPGRADING, UPLOAD_FILESIZE_MAX } from '~/constant'
 import { logTrackerEvent } from '~/utils/logger'
 import { estimateBundlrFilePrice, uploadSingleFileToBundlr } from '~/utils/arweave/v2'
 import {
@@ -566,13 +566,6 @@ export default class UploadForm extends Vue {
           }
 
           epubMetadata.ipfsHash = ipfsHash
-          epubMetadata.thumbnail = {
-            "@type": "ImageObject",
-            url: `${IPFS_VIEW_GATEWAY_URL}${ipfsHash}`,
-            name: `${file.name}_cover`,
-            description: `${file.name}_cover`,
-            encodingFormat: "image/jpeg",
-          };
 
           const reader = new FileReader()
           reader.onload = (e) => {
@@ -670,7 +663,7 @@ export default class UploadForm extends Vue {
           this.sentArweaveTransactionHashes.set(ipfsHash, { transactionHash: '', arweaveId });
           const metadata = this.epubMetadataList.find((data: any) => data.ipfsHash === ipfsHash)
           if (metadata) {
-            metadata.thumbnail.contentUrl = `https://arweave.net/${arweaveId}`;
+            metadata.thumbnailUrl = `ar://${arweaveId}`;
           }
         }
         if (!this.arweaveFeeTargetAddress) {
@@ -748,8 +741,8 @@ export default class UploadForm extends Vue {
         const uploadedData = this.sentArweaveTransactionHashes.get(records.ipfsHash) || {};
         this.sentArweaveTransactionHashes.set(records.ipfsHash, { ...uploadedData, arweaveId });
         if (tempRecord.fileName === 'cover.jpeg') {
-          const metadata = this.epubMetadataList.find((file: any) => file.ipfsHash === records.thumbnail.url)
-          metadata.thumbnail.contentUrl = `https://arweave.net/${arweaveId}`
+          const metadata = this.epubMetadataList.find((file: any) => file.ipfsHash === records.ipfsHash)
+          metadata.thumbnailUrl = `ar://${arweaveId}`
         }
         this.$emit('arweaveUploaded', { arweaveId })
         this.isOpenSignDialog = false
@@ -805,6 +798,16 @@ export default class UploadForm extends Vue {
     }
 
     const uploadArweaveIdList = Array.from(this.sentArweaveTransactionHashes.values()).map(entry => entry.arweaveId);
+    this.fileRecords.forEach((record: any, index:number) => {
+      if (this.sentArweaveTransactionHashes.has(record.ipfsHash)) {
+        const arweaveId = this.sentArweaveTransactionHashes.get(
+          record.ipfsHash,
+        )?.arweaveId
+        if (arweaveId) {
+          this.fileRecords[index].arweaveId = `ar://${arweaveId}`
+        }
+      }
+    })
     this.$emit('submit', { fileRecords: this.fileRecords, arweaveIds: uploadArweaveIdList, epubMetadata: this.epubMetadataList[0] })
   }
 

components/SameAsFieldList.vue

@@ -16,20 +16,27 @@
         </FormField>
 
         <div class="flex items-center justify-start gap-[8px]">
-          <FormField :label="$t('IscnRegisterForm.label.fileName')">
+          <FormField class="w-[200px]" :label="$t('IscnRegisterForm.label.fileName')">
             <TextField
               v-model="item.filename"
               :placeholder="$t('IscnRegisterForm.placeholder.fileName')"
             />
           </FormField>
-          <FormField :label="$t('IscnRegisterForm.label.fileType')">
+          <FormField class="w-min" :label="$t('IscnRegisterForm.label.fileType')">
             <Selector
               class="h-[40px] w-[80px]"
               :options="sameAsFiletypeOptions"
               :placeholder="item.filetype || sameAsFiletypeOptions[0]"
               @input="(value) => handleSelectValue({ value, index: i })"
             />
           </FormField>
+          <Label
+            v-if="item.originFileName"
+            class="text-medium-gray"
+            preset="h6"
+          >
+            {{ $t('IscnRegisterForm.label.originFile', { name: item.originFileName }) }}
+          </Label>
         </div>
       </div>
       <div
@@ -77,6 +84,7 @@ export default class WalletFieldList extends Vue {
   readonly urlOptions!: Array<any>
 
   @Prop({ default: () => [] }) readonly currentList!: Array<any>
+  @Prop({ default: () => [] }) readonly fileRecords!: Array<any>
   @Prop(String) readonly name!: string | undefined
 
   sameAsList: any = [{
@@ -112,20 +120,27 @@ export default class WalletFieldList extends Vue {
         id: `${list.url}-${list.filename}`,
         filename: list.filename,
         filetype: list.filetype || SAME_AS_FILE_TYPES[0],
+        originFileName: list.originFileName,
       }))
     } else if (this.formatUrlOptions.length) {
-      this.sameAsList = this.formatUrlOptions.map((url, index) => ({
-        url,
-        id: `${url}-${index}`,
-        filename: this.formatName,
-        filetype: SAME_AS_FILE_TYPES[0],
-      }))
+      this.sameAsList = this.formatUrlOptions.map((url, index) =>{
+        const originFile = this.fileRecords.find((file) => (file.arweaveId === url))
+        const formattedFileType = this.formatFileType(originFile.fileType);
+        return{
+          url,
+          id: `${url}-${index}`,
+          filename: this.formatName,
+          filetype: formattedFileType || SAME_AS_FILE_TYPES[0],
+          originFileName: originFile.fileName,
+        }
+      })
     } else {
       this.sameAsList = [{
           url: '',
           id: 1,
           filename: this.formatName,
           filetype: SAME_AS_FILE_TYPES[0],
+          originFileName:'',
         }]
     }
   }
@@ -159,5 +174,34 @@ export default class WalletFieldList extends Vue {
     this.deleteEmptyField()
     this.$emit('onConfirm', this.sameAsList)
   }
+
+  // eslint-disable-next-line class-methods-use-this
+  formatFileType(fileType: string) {
+    let formattedFileType = ''
+    if (fileType) {
+      switch (true) {
+        case fileType.includes('jpg'):
+        case fileType.includes('jpeg'):
+          formattedFileType = 'jpg'
+          break
+        case fileType.includes('png'):
+          formattedFileType = 'png'
+          break
+        case fileType.includes('audio'):
+          formattedFileType = 'mp3'
+          break
+        case fileType.includes('pdf'):
+          formattedFileType = 'pdf'
+          break
+        case fileType.includes('epub'):
+          formattedFileType = 'epub'
+          break
+        default:
+          formattedFileType = ''
+          break
+      }
+    }
+    return formattedFileType
+  }
 }
 </script>

locales/en.json

@@ -216,6 +216,7 @@
   "IscnRegisterForm.label.name": "Name",
   "IscnRegisterForm.label.fileName": "File name",
   "IscnRegisterForm.label.fileType": "File type",
+  "IscnRegisterForm.label.originFile": "origin file: {name}",
   "IscnRegisterForm.label.numbersProtocol": "Numbers Protocol",
   "IscnRegisterForm.label.numbersProtocol.details": "Register your image asset in {link}",
   "IscnRegisterForm.label.numbersProtocol.details.link": "Numbers Protocol",

utils/cosmos/iscn/iscn.type.ts

@@ -25,7 +25,7 @@ export interface ISCNRegisterPayload {
   recordNotes?: string;
   memo?: string;
   inLanguage?: string;
-  thumbnail?: any;
+  thumbnailUrl?: string;
 }
 export interface ISCNRecordWithID extends ISCNRecord {
   id: string;