🔀 Merge #400 to deploy/rinkeby

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>

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",

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

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,

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;

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) {