✨ Add Arweave link DRM option (#495)

* ✨ Add arweave link DRM option * 💬 Change DRM toggle description * ✨ Also hide ipfs hash when arweave link is swapped * ✨ View arweave link with owner token * 💄 Hide overflow text in SameAsFieldList * 💄 Fix text overflow issue * 🎨 Fix syntax Co-authored-by: Ng Wing Tat, David <[email protected]> --------- Co-authored-by: AuroraHuang22 <[email protected]> Co-authored-by: Ng Wing Tat, David <[email protected]>
likecoin · Nov 11, 2024 · e0a50b7 · e0a50b7
1 parent 92e6369
commit e0a50b7
Show file tree

Hide file tree

Showing 10 changed files with 145 additions and 50 deletions.
diff --git a/components/ContentFingerprintLink.vue b/components/ContentFingerprintLink.vue
@@ -1,5 +1,5 @@
 <template>
-  <Link v-if="href" :href="href" :nofollow="true">
+  <Link v-if="href" :href="href" :nofollow="true" @click.native="onClick">
     {{ item }}
   </Link>
   <div v-else>
@@ -9,7 +9,11 @@
 
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator'
+import { namespace } from 'vuex-class'
 import { ARWEAVE_ENDPOINT, IPFS_VIEW_GATEWAY_URL } from '~/constant'; 
+import { LIKE_CO_API_ROOT } from '~/constant/api';
+
+const bookApiModule = namespace('book-api')
 
 export enum ContentFirgerprints {
   arweave = 'ar',
@@ -22,10 +26,16 @@ export enum ContentFirgerprints {
 export default class ContentFingerprintLink extends Vue {
   @Prop(String) readonly item: string | undefined
 
+  @bookApiModule.Getter('getToken') getToken!: string
+
   get prefix() {
     return this.item && this.item.substr(0, this.item.indexOf(':'))
   }
 
+  get isArweaveApiLink() {
+    return this.item?.startsWith(LIKE_CO_API_ROOT)
+  }
+
   get href() {
     if (!this.item) return null
     switch (this.prefix) {
@@ -45,5 +55,24 @@ export default class ContentFingerprintLink extends Vue {
         return this.item
     }
   }
+
+  async onClick(e: Event) {
+    if (this.item && this.isArweaveApiLink) {
+      e.stopPropagation()
+      e.preventDefault()
+      let link = this.item
+      try {
+        const { data } = await this.$axios.get(this.item, {
+          headers: {
+            Authorization: `Bearer ${this.getToken}`,
+          },
+        })
+        link = data.link
+      } catch (error) {
+        console.error(error)
+      }
+      window.open(link, '_blank')
+    }
+  }
 }
 </script>
diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="['flex', 'flex-col']">
+  <div :class="['flex', 'flex-col', 'w-full']">
     <Card class="p-[32px]" :has-padding="false">
       <!-- header -->
       <IscnFormHeader :step="step" :total-step="4" />
@@ -237,6 +237,15 @@
             />
           </FormField>
           <Divider class="my-[12px]" />
+          <FormField
+              v-if="shouldShowDRMOption"
+              :label="$t('IscnRegisterForm.label.drm')"
+              class="mb-[12px]"
+            >
+              <CheckBox v-model="isUseArweaveLink">
+                {{ $t('IscnRegisterForm.label.drm.details') }}
+              </CheckBox>
+            </FormField>
           <FormField
             v-if="type === 'Book'"
             :label="$t('IscnRegisterForm.label.sameAs')"
@@ -270,17 +279,17 @@
           <!-- fingerPrint -->
           <FormField
             :label="$t('IscnRegisterForm.label.fingerprints')"
-            class="mb-[12px]"
+            class="mb-[12px] max-w-full"
           >
             <ContentFingerprintLink
               v-for="ipfs of ipfsHashList"
               :key="ipfs"
               :item="formatIpfs(ipfs)"
             />
             <ContentFingerprintLink
-              v-for="ar of uploadArweaveIdList"
-              :key="ar"
-              :item="formatArweave(ar)"
+              v-for="link of combinedArweaveLinks"
+              :key="link"
+              :item="link"
             />
             <ContentFingerprintLink
               v-for="(f, i) in customContentFingerprints"
@@ -708,7 +717,8 @@ export enum AuthorDialogType {
 @Component
 export default class IscnRegisterForm extends Vue {
   @Prop({ default: [] }) readonly fileRecords!: any[]
-  @Prop({ default: [] }) readonly uploadArweaveList!: string[]
+  @Prop({ default: [] }) readonly uploadArweaveIdList!: string[]
+  @Prop({ default: [] }) readonly uploadArweaveLinkList!: string[]
   @Prop() readonly epubMetadata!: any | null
 
   @Prop(String) readonly ipfsHash!: string
@@ -801,6 +811,7 @@ export default class IscnRegisterForm extends Vue {
   isRegisterNumbersProtocolAsset = false
   numbersProtocolAssetIds = new Map<string, string>()
 
+  isUseArweaveLink= false
   isOpenFileInfoDialog = false
   isOpenAuthorDialog = false
   isOpenWarningSnackbar = false
@@ -836,6 +847,10 @@ export default class IscnRegisterForm extends Vue {
     return !this.fileRecords.some((file) => file.fileData)
   }
 
+  get shouldShowDRMOption() {
+    return this.uploadArweaveLinkList.filter(Boolean).length
+  }
+
   get tagsString(): string {
     return this.tags.join(',')
   }
@@ -906,14 +921,23 @@ export default class IscnRegisterForm extends Vue {
       : this.$t('IscnRegisterForm.title.editStakeholder')
   }
 
+  get combinedArweaveLinks() {
+    if (this.isUseArweaveLink) {
+      const list = [...this.uploadArweaveLinkList]
+      if (this.arweaveId) {
+        list.push(this.formatArweave(this.arweaveId) as string)
+      }
+      return list;
+    }
+    return this.combinedArweaveIdList.map((link) => this.formatArweave(link))
+  }
+
   get contentFingerprintLinks() {
-    const array = []
-    if (this.uploadArweaveIdList) {
-      array.push(
-        ...this.uploadArweaveIdList.map((id: string) => this.formatArweave(id)),
-      )
+    const array: string[] = []
+    if (this.combinedArweaveLinks.length) {
+      array.push(...this.combinedArweaveLinks)
     }
-    if (this.ipfsHashList.length) {
+    if (!this.isUseArweaveLink && this.ipfsHashList.length) {
       array.push(...this.ipfsHashList.map((ipfs) => this.formatIpfs(ipfs)))
     }
     if (this.customContentFingerprints.length) {
@@ -1013,8 +1037,8 @@ export default class IscnRegisterForm extends Vue {
       isbn: this.isbn,
       exifInfo: this.exif.filter((file) => file),
       license: this.formattedLicense,
-      ipfsHash: this.ipfsHashList,
-      arweaveId: this.uploadArweaveIdList,
+      ipfsHash: '',
+      arweaveId: '',
       numbersProtocolAssetId: [...this.numbersProtocolAssetIds.values()],
       fileSHA256: this.fileRecords.map((file) => file.fileSHA256),
       author: this.author.name,
@@ -1024,7 +1048,7 @@ export default class IscnRegisterForm extends Vue {
       likerIds: this.likerIds,
       likerIdsAddresses: this.likerIdsAddresses,
       authorDescriptions: this.authorDescriptions,
-      contentFingerprints: this.customContentFingerprints,
+      contentFingerprints: this.contentFingerprintLinks,
       inLanguage: this.language,
       thumbnailUrl: this.thumbnailUrl,
       publisher: this.publisher,
@@ -1040,11 +1064,11 @@ export default class IscnRegisterForm extends Vue {
     if (this.arweaveFee.lte(0)) {
       return 1
     }
-    return this.uploadArweaveIdList.length ? 2 : 1
+    return this.combinedArweaveIdList.length ? 2 : 1
   }
 
   get totalSignStep() {
-    if (this.uploadArweaveIdList.length && this.arweaveFee.lte(0)) return 1
+    if (this.combinedArweaveIdList.length && this.arweaveFee.lte(0)) return 1
     return 2
   }
 
@@ -1058,7 +1082,7 @@ export default class IscnRegisterForm extends Vue {
     if (this.isUploadingArweave) {
       return this.$t('IscnRegisterForm.signDialog.closeWarning')
     }
-    if (this.uploadArweaveIdList.length) {
+    if (this.combinedArweaveIdList.length) {
       return this.$t('IscnRegisterForm.signDialog.sign.iscn.register')
     }
     return this.$t('IscnRegisterForm.signDialog.sign.arweave.upload')
@@ -1094,10 +1118,10 @@ export default class IscnRegisterForm extends Vue {
     )
   }
 
-  get uploadArweaveIdList() {
+  get combinedArweaveIdList() {
     let arweaveIdList: string[] = []
-    if (this.uploadArweaveList && this.uploadArweaveList.length) {
-      arweaveIdList = [...this.uploadArweaveList]
+    if (this.uploadArweaveIdList && this.uploadArweaveIdList.length) {
+      arweaveIdList = [...this.uploadArweaveIdList]
     }
     if (this.arweaveId) {
       arweaveIdList.push(this.arweaveId)
@@ -1315,11 +1339,11 @@ export default class IscnRegisterForm extends Vue {
   }
 
   formatIpfs(ipfsHash: string) {
-    return this.$t('IscnRegisterForm.ipfs.link', { hash: ipfsHash })
+    return this.$t('IscnRegisterForm.ipfs.link', { hash: ipfsHash }) as string
   }
 
   formatArweave(arweaveId: string) {
-    return this.$t('IscnRegisterForm.arweave.link', { arweaveId })
+    return this.$t('IscnRegisterForm.arweave.link', { arweaveId }) as string
   }
 
   async getLikerIdsAddresses() {
@@ -1456,7 +1480,7 @@ estimation,
     }
     if (
       !this.fileRecords.some((file) => file.fileBlob) ||
-      this.uploadArweaveIdList.length
+      this.combinedArweaveIdList.length
     )
       await this.submitToISCN()
   }

diff --git a/components/IscnUploadForm.vue b/components/IscnUploadForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="w-full">
     <Card class="p-[32px]" :has-padding="false">
       <!-- header -->
       <IscnFormHeader v-if="mode === 'register'" :step="step" :total-step="4" />
@@ -317,7 +317,7 @@ export default class IscnUploadForm extends Vue {
   arweaveFee = new BigNumber(0)
   arweaveFeeMap: Record<string, string> = {}
   sentArweaveTransactionInfo = new Map<
-    string, { transactionHash?: string, arweaveId?: string }
+    string, { transactionHash?: string, arweaveId?: string, arweaveLink?: string }
   >()
 
   likerId: string = ''
@@ -845,7 +845,7 @@ export default class IscnUploadForm extends Vue {
     try {
       const arrayBuffer = await tempRecord.fileBlob.arrayBuffer();
       const buffer = Buffer.from(arrayBuffer);
-      const arweaveId = await uploadSingleFileToBundlr(buffer, {
+      const { arweaveId, arweaveLink } = await uploadSingleFileToBundlr(buffer, {
         fileSize: tempRecord.fileBlob?.size || 0,
         ipfsHash: tempRecord.ipfsHash,
         fileType: tempRecord.fileType as string,
@@ -854,14 +854,14 @@ export default class IscnUploadForm extends Vue {
       });
       if (arweaveId) {
         const uploadedData = this.sentArweaveTransactionInfo.get(record.ipfsHash) || {};
-        this.sentArweaveTransactionInfo.set(record.ipfsHash, { ...uploadedData, arweaveId });
+        this.sentArweaveTransactionInfo.set(record.ipfsHash, { ...uploadedData, arweaveId, arweaveLink });
         if (tempRecord.fileName.includes('cover.jpeg')) {
           const metadata = this.epubMetadataList.find((file: any) => file.thumbnailIpfsHash === record.ipfsHash)
           if (metadata) {
             metadata.thumbnailArweaveId = arweaveId
           }
         }
-        this.$emit('arweaveUploaded', { arweaveId })
+        this.$emit('arweaveUploaded', { arweaveId, arweaveLink })
         this.isOpenSignDialog = false
       } else {
         this.isOpenWarningSnackbar = true
@@ -879,13 +879,14 @@ export default class IscnUploadForm extends Vue {
   async uploadFileAndGetArweaveId(file: any, txHash: string) {
     const arrayBuffer = await file.fileBlob.arrayBuffer()
     const buffer = Buffer.from(arrayBuffer)
-    return uploadSingleFileToBundlr(buffer, {
+    const { arweaveId, arweaveLink } = await uploadSingleFileToBundlr(buffer, {
       fileSize: file.fileBlob?.size || 0,
       ipfsHash: file.ipfsHash,
       fileType: file.fileType,
       txHash,
       token: this.getToken,
     })
+    return { arweaveId, arweaveLink };
   }
 
   async setEbookCoverFromImages() {
@@ -911,7 +912,7 @@ export default class IscnUploadForm extends Vue {
           transactionHash = await this.sendArweaveFeeTx(file)
         }
         // eslint-disable-next-line no-await-in-loop
-        const arweaveId = await this.uploadFileAndGetArweaveId(
+        const { arweaveId, arweaveLink } = await this.uploadFileAndGetArweaveId(
           file,
           transactionHash,
         )
@@ -924,6 +925,7 @@ export default class IscnUploadForm extends Vue {
           this.sentArweaveTransactionInfo.set(file.ipfsHash, {
             transactionHash,
             arweaveId,
+            arweaveLink,
           })
           break
         }
@@ -984,17 +986,28 @@ export default class IscnUploadForm extends Vue {
     }
 
     const uploadArweaveIdList = Array.from(this.sentArweaveTransactionInfo.values()).map(entry => entry.arweaveId);
+    const uploadArweaveLinkList = Array.from(this.sentArweaveTransactionInfo.values()).map(entry => entry.arweaveLink);
     this.modifiedFileRecords.forEach((record: any, index:number) => {
       if (this.sentArweaveTransactionInfo.has(record.ipfsHash)) {
-        const arweaveId = this.sentArweaveTransactionInfo.get(
+        const info = this.sentArweaveTransactionInfo.get(
           record.ipfsHash,
-        )?.arweaveId
-        if (arweaveId) {
-          this.modifiedFileRecords[index].arweaveId = arweaveId
+        )
+        if (info) {
+          const {
+            arweaveId,
+            arweaveLink,
+          } = info;
+          if (arweaveId) this.modifiedFileRecords[index].arweaveId = arweaveId
+          if (arweaveLink) this.modifiedFileRecords[index].arweaveLink = arweaveLink
         }
       }
     })
-    this.$emit('submit', { fileRecords: this.modifiedFileRecords, arweaveIds: uploadArweaveIdList, epubMetadata: this.epubMetadataList[0] })
+    this.$emit('submit', {
+      fileRecords: this.modifiedFileRecords,
+      arweaveIds: uploadArweaveIdList,
+      epubMetadata: this.epubMetadataList[0],
+      arweaveLinks: uploadArweaveLinkList,
+    })
   }
 
   handleSignDialogClose() {