✨ Add arweave link DRM option

likecoin · Oct 31, 2024 · 01ee4b8 · 01ee4b8
1 parent bd89814
commit 01ee4b8
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 45 deletions.
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-[100%]"
           >
             <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"
@@ -690,7 +699,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
@@ -781,6 +791,7 @@ export default class IscnRegisterForm extends Vue {
   isRegisterNumbersProtocolAsset = false
   numbersProtocolAssetIds = new Map<string, string>()
 
+  isUseArweaveLink= false
   isOpenFileInfoDialog = false
   isOpenAuthorDialog = false
   isOpenWarningSnackbar = false
@@ -816,6 +827,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(',')
   }
@@ -886,12 +901,21 @@ 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) {
       array.push(...this.ipfsHashList.map((ipfs) => this.formatIpfs(ipfs)))
@@ -993,8 +1017,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,
@@ -1004,7 +1028,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,
     }
@@ -1018,11 +1042,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
   }
 
@@ -1036,7 +1060,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')
@@ -1072,10 +1096,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)
@@ -1293,11 +1317,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() {
@@ -1434,7 +1458,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() {

diff --git a/components/SameAsFieldList.vue b/components/SameAsFieldList.vue
@@ -81,6 +81,7 @@
 <script lang="ts">
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 import { SAME_AS_FILE_TYPES } from '~/constant'
+import { LIKE_CO_API_ROOT } from '~/constant/api'
 
 const FILE_TYPES = [
 'epub',
@@ -111,6 +112,12 @@ export default class SameAsFieldList extends Vue {
     this.$emit('on-update', newValue)
   }
 
+  @Watch('urlOptions', { deep: true })
+  onUrlOptionsChanged(newValue: Array<any>) {
+    console.log('urlOptions', newValue)
+    this.setUrlList()
+  }
+
   // eslint-disable-next-line class-methods-use-this
   get sameAsFiletypeOptions() {
     return SAME_AS_FILE_TYPES
@@ -130,7 +137,7 @@ export default class SameAsFieldList extends Vue {
   }
 
   get filteredUrlOptions() {
-    return this.urlOptions?.filter((url) => url.startsWith('ar://'))
+    return this.urlOptions?.filter((url) => url.startsWith('ar://') || url.startsWith(LIKE_CO_API_ROOT))
   }
 
   mounted() {
@@ -142,16 +149,22 @@ export default class SameAsFieldList extends Vue {
         filetype: list.filetype || SAME_AS_FILE_TYPES[0],
         shouldShowEditURL: !list.filename,
       }))
-    } else if (this.filteredUrlOptions.length) {
+    } else {
+      this.setUrlList();
+    }
+  }
+
+  setUrlList() {
+    if (this.filteredUrlOptions.length) {
       this.sameAsList = this.fileRecords
         ?.filter(
           (file) =>
             FILE_TYPES.includes(this.formatFileType(file.fileType)) &&
-            file.arweaveId,
+            (file.arweaveId || file.arweaveLink),
         )
         .map((file, index) => {
           const url = this.filteredUrlOptions.find((ar) =>
-            ar.includes(file.arweaveId),
+            ar.includes(file.arweaveId) || ar === file.arweaveLink,
           )
           const formattedFileType = this.formatFileType(file.fileType)
           return {

diff --git a/constant/api.ts b/constant/api.ts
@@ -3,7 +3,7 @@ import { IS_TESTNET } from ".";
 
 export const API_POST_NUMBERS_PROTOCOL_ASSETS = '/numbers-protocol/assets';
 
-const LIKE_CO_API_ROOT = IS_TESTNET ? 'https://api.rinkeby.like.co' : 'https://api.like.co'
+export const LIKE_CO_API_ROOT = IS_TESTNET ? 'https://api.rinkeby.like.co' : 'https://api.like.co'
 const LIKECOIN_CHAIN_API = IS_TESTNET ? 'https://node.testnet.like.co' : 'https://mainnet-node.like.co';
 export const LIKER_NFT_TARGET_ADDRESS = IS_TESTNET ? 'like1yney2cqn5qdrlc50yr5l53898ufdhxafqz9gxp' : 'like17m4vwrnhjmd20uu7tst7nv0kap6ee7js69jfrs';
 export const API_POST_ARWEAVE_ESTIMATE = `${LIKE_CO_API_ROOT}/arweave/estimate`;

diff --git a/locales/en.json b/locales/en.json
@@ -223,6 +223,8 @@
   "IscnRegisterForm.label.author": "Author",
   "IscnRegisterForm.label.stakeholder": "Stakeholders",
   "IscnRegisterForm.label.description": "Description",
+  "IscnRegisterForm.label.drm": "DRM Options",
+  "IscnRegisterForm.label.drm.details": "Use like.co API to protect Arweave link",
   "IscnRegisterForm.label.emptyFile": "No Content",
   "IscnRegisterForm.label.fingerprints": "Content Fingerprints",
   "IscnRegisterForm.label.iscn": "ISCN Title",