From ad5798f4d30bcfdb89e1db80439dc91d045ac294 Mon Sep 17 00:00:00 2001
From: William Chong <me@williamchong.cloud>
Date: Thu, 31 Oct 2024 00:47:30 +0800
Subject: [PATCH 1/7] =?UTF-8?q?=E2=9C=A8=20Add=20arweave=20link=20DRM=20op?=
 =?UTF-8?q?tion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnRegisterForm.vue | 70 ++++++++++++++++++++++-----------
 components/IscnUploadForm.vue   | 37 +++++++++++------
 components/SameAsFieldList.vue  | 21 ++++++++--
 constant/api.ts                 |  2 +-
 locales/en.json                 |  2 +
 pages/new/index.vue             |  9 ++++-
 pages/nft/iscn/_iscnId.vue      |  2 +-
 utils/arweave/v2.ts             | 13 ++++--
 8 files changed, 111 insertions(+), 45 deletions(-)

diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index 5814e2d4..675d48c7 100644
--- 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,7 +279,7 @@
           <!-- fingerPrint -->
           <FormField
             :label="$t('IscnRegisterForm.label.fingerprints')"
-            class="mb-[12px]"
+            class="mb-[12px] max-w-[100%]"
           >
             <ContentFingerprintLink
               v-for="ipfs of ipfsHashList"
@@ -278,9 +287,9 @@
               :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,12 +921,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)))
@@ -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
index 480c3ecd..e6b2fded 100644
--- 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
index 688be92a..46905d1d 100644
--- 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
index 89223dfd..85687cea 100644
--- 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
index 13ed7349..8529bf30 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -224,6 +224,8 @@
   "IscnRegisterForm.label.stakeholder": "Stakeholders",
   "IscnRegisterForm.label.datePublished": "Original Date Published",
   "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",
diff --git a/pages/new/index.vue b/pages/new/index.vue
index 979b539d..d09eb215 100644
--- a/pages/new/index.vue
+++ b/pages/new/index.vue
@@ -40,7 +40,8 @@
 
       :ipfs-hash="urlIpfsHash"
       :arweave-id="urlArweaveId"
-      :upload-arweave-list=uploadArweaveList
+      :upload-arweave-id-list=uploadArweaveList
+      :upload-arweave-link-list=uploadArweaveLinkList
       :epub-metadata="epubMetadata"
 
       :step="step"
@@ -121,6 +122,7 @@ export default class NewIndexPage extends Vue {
   urlIpfsHash = this.$route.query.ipfs_hash || ''
   urlArweaveId = this.$route.query.arweave_id || ''
   uploadArweaveList: string[] = []
+  uploadArweaveLinkList: string[] = []
   fileSHA256 = ''
   fileData = ''
   fileType = ''
@@ -192,10 +194,12 @@ export default class NewIndexPage extends Vue {
   onSubmitUpload({
     fileRecords,
     arweaveIds,
+    arweaveLinks,
     epubMetadata,
   }: {
     fileRecords: any[]
     arweaveIds: string[]
+    arweaveLinks: string[]
     epubMetadata: any
   }) {
     if (fileRecords && fileRecords.length) {
@@ -204,6 +208,9 @@ export default class NewIndexPage extends Vue {
     if (arweaveIds && arweaveIds.length) {
       this.uploadArweaveList = [...arweaveIds]
     }
+    if (arweaveLinks && arweaveLinks.length) {
+      this.uploadArweaveLinkList = [...arweaveLinks]
+    }
     if (epubMetadata) {
       this.epubMetadata = {...epubMetadata}
     }
diff --git a/pages/nft/iscn/_iscnId.vue b/pages/nft/iscn/_iscnId.vue
index 7abebfdf..011aac75 100644
--- a/pages/nft/iscn/_iscnId.vue
+++ b/pages/nft/iscn/_iscnId.vue
@@ -816,7 +816,7 @@ export default class NFTMintPage extends Vue {
       }
       const arrayBuffer = await this.ogImageBlob.arrayBuffer();
       const buffer = Buffer.from(arrayBuffer);
-      const arweaveId = await uploadSingleFileToBundlr(buffer, {
+      const { arweaveId } = await uploadSingleFileToBundlr(buffer, {
         fileSize: this.ogImageByteSize,
         ipfsHash: await this.getOgImageIpfsHash(),
         fileType: this.ogImageBlob.type,
diff --git a/utils/arweave/v2.ts b/utils/arweave/v2.ts
index 94421a40..54b3c513 100644
--- a/utils/arweave/v2.ts
+++ b/utils/arweave/v2.ts
@@ -1,6 +1,6 @@
 import axios from 'axios'
 
-import { IS_TESTNET } from '~/constant'
+import { ARWEAVE_ENDPOINT, IS_TESTNET } from '~/constant'
 import {
   API_POST_ARWEAVE_V2_SIGN,
   API_GET_ARWEAVE_V2_PUBLIC_KEY,
@@ -176,8 +176,9 @@ export async function uploadSingleFileToBundlr(
   if (fileType) tags.push({ name: 'Content-Type', value: fileType })
   const response = await bundler.upload(file, { tags })
   const arweaveId = response.id;
+  let arweaveLink = `${ARWEAVE_ENDPOINT}/${arweaveId}`;
   if (arweaveId) {
-    await axios.post(API_POST_ARWEAVE_V2_REGISTER, {
+    const { data } = await axios.post(API_POST_ARWEAVE_V2_REGISTER, {
       fileSize,
       ipfsHash,
       txHash,
@@ -185,6 +186,12 @@ export async function uploadSingleFileToBundlr(
     },{
       headers: { Authorization: token ? `Bearer ${token}` : '' },
     });
+    if (data.link) {
+      arweaveLink = data.link;
+    }
   }
-  return arweaveId;
+  return {
+    arweaveId,
+    arweaveLink,
+  };
 }

From aeba95f0fc877ed725da132fc76ad8d368dd102a Mon Sep 17 00:00:00 2001
From: William Chong <me@williamchong.cloud>
Date: Fri, 8 Nov 2024 16:48:09 +0800
Subject: [PATCH 2/7] =?UTF-8?q?=F0=9F=92=AC=20Change=20DRM=20toggle=20desc?=
 =?UTF-8?q?ription?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/locales/en.json b/locales/en.json
index 8529bf30..54813d56 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -225,7 +225,7 @@
   "IscnRegisterForm.label.datePublished": "Original Date Published",
   "IscnRegisterForm.label.description": "Description",
   "IscnRegisterForm.label.drm": "DRM Options",
-  "IscnRegisterForm.label.drm.details": "Use like.co API to protect Arweave link",
+  "IscnRegisterForm.label.drm.details": "Hide file storage link from public blockchain",
   "IscnRegisterForm.label.emptyFile": "No Content",
   "IscnRegisterForm.label.fingerprints": "Content Fingerprints",
   "IscnRegisterForm.label.iscn": "ISCN Title",

From 5444d6ec0252476f3b9e24ef8acd7449fa79874f Mon Sep 17 00:00:00 2001
From: William Chong <me@williamchong.cloud>
Date: Fri, 8 Nov 2024 16:48:31 +0800
Subject: [PATCH 3/7] =?UTF-8?q?=E2=9C=A8=20Also=20hide=20ipfs=20hash=20whe?=
 =?UTF-8?q?n=20arweave=20link=20is=20swapped?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnRegisterForm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index 675d48c7..e616671f 100644
--- a/components/IscnRegisterForm.vue
+++ b/components/IscnRegisterForm.vue
@@ -937,7 +937,7 @@ export default class IscnRegisterForm extends Vue {
     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) {

From 5406d4183219998b25d752685a817c611136694b Mon Sep 17 00:00:00 2001
From: William Chong <me@williamchong.cloud>
Date: Fri, 8 Nov 2024 17:27:17 +0800
Subject: [PATCH 4/7] =?UTF-8?q?=E2=9C=A8=20View=20arweave=20link=20with=20?=
 =?UTF-8?q?owner=20token?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ContentFingerprintLink.vue | 31 ++++++++++++++++++++++++++-
 pages/view/_iscnId/index.vue          |  4 ++--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/components/ContentFingerprintLink.vue b/components/ContentFingerprintLink.vue
index 1e98688f..15fa252b 100644
--- 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/pages/view/_iscnId/index.vue b/pages/view/_iscnId/index.vue
index dcb2a317..6d7d0cc0 100644
--- a/pages/view/_iscnId/index.vue
+++ b/pages/view/_iscnId/index.vue
@@ -465,7 +465,7 @@ import { namespace } from 'vuex-class'
 import qs from 'querystring'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { MetaInfo } from 'vue-meta'
-import { API_LIKER_NFT_MINT } from '~/constant/api'
+import { API_LIKER_NFT_MINT, LIKE_CO_API_ROOT } from '~/constant/api'
 import { isCosmosTransactionHash, getExistingClassCount } from '~/utils/cosmos'
 import { getIPFSUrlFromISCN } from '~/utils/cosmos/iscn'
 import { ISCNRecordWithID } from '~/utils/cosmos/iscn/iscn.type'
@@ -693,7 +693,7 @@ export default class ViewIscnIdPage extends Vue {
     if (arURL) return `${ARWEAVE_ENDPOINT}/${arURL.slice(5)}`
     const ipfsURL = this.recordData.contentFingerprints.find(a => a.startsWith('ipfs://'));
     if (ipfsURL) return `${IPFS_VIEW_GATEWAY_URL}/${ipfsURL.slice(7)}`
-    const httpsURL = this.recordData.contentFingerprints.find(a => a.startsWith('https://'));
+    const httpsURL = this.recordData.contentFingerprints.find(a => a.startsWith('https://') && !a.startsWith(LIKE_CO_API_ROOT));
     if (httpsURL) return httpsURL;
     return '';
   }

From 29808888cd45a562ae82786c1d8fb3f90882b787 Mon Sep 17 00:00:00 2001
From: William Chong <me@williamchong.cloud>
Date: Fri, 8 Nov 2024 17:33:58 +0800
Subject: [PATCH 5/7] =?UTF-8?q?=F0=9F=92=84=20Hide=20overflow=20text=20in?=
 =?UTF-8?q?=20SameAsFieldList?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SameAsFieldList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/SameAsFieldList.vue b/components/SameAsFieldList.vue
index 46905d1d..7916e688 100644
--- a/components/SameAsFieldList.vue
+++ b/components/SameAsFieldList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col w-full">
+  <div class="flex flex-col w-full overflow-hidden">
     <div
       v-for="(item, i) in sameAsList"
       :key="item.id"

From 58e407d83afb71b1a1c450cf865ad2b80c60497e Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Fri, 8 Nov 2024 18:21:06 +0800
Subject: [PATCH 6/7] =?UTF-8?q?=F0=9F=92=84=20Fix=20text=20overflow=20issu?=
 =?UTF-8?q?e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SameAsFieldList.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/SameAsFieldList.vue b/components/SameAsFieldList.vue
index 7916e688..9565a240 100644
--- a/components/SameAsFieldList.vue
+++ b/components/SameAsFieldList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col w-full overflow-hidden">
+  <div class="flex flex-col w-full">
     <div
       v-for="(item, i) in sameAsList"
       :key="item.id"
@@ -42,7 +42,7 @@
               />
             </div>
             <div v-else class="flex items-center justify-start">
-              <ContentFingerprintLink :item="item.url" />
+              <ContentFingerprintLink :item="item.url" class="!break-all" />
               <Button
                 preset="plain"
                 @click.prevent="() => (item.shouldShowEditURL = true)"

From 55aedfde5af094804242e54c91d413aeed0233e9 Mon Sep 17 00:00:00 2001
From: William Chong <6198816+williamchong@users.noreply.github.com>
Date: Fri, 8 Nov 2024 18:44:29 +0800
Subject: [PATCH 7/7] =?UTF-8?q?=F0=9F=8E=A8=20Fix=20syntax?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Ng Wing Tat, David <i@nwt.hk>
---
 components/IscnRegisterForm.vue | 2 +-
 pages/new/index.vue             | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index e616671f..f14bc812 100644
--- a/components/IscnRegisterForm.vue
+++ b/components/IscnRegisterForm.vue
@@ -279,7 +279,7 @@
           <!-- fingerPrint -->
           <FormField
             :label="$t('IscnRegisterForm.label.fingerprints')"
-            class="mb-[12px] max-w-[100%]"
+            class="mb-[12px] max-w-full"
           >
             <ContentFingerprintLink
               v-for="ipfs of ipfsHashList"
diff --git a/pages/new/index.vue b/pages/new/index.vue
index d09eb215..2d53ec7d 100644
--- a/pages/new/index.vue
+++ b/pages/new/index.vue
@@ -40,8 +40,8 @@
 
       :ipfs-hash="urlIpfsHash"
       :arweave-id="urlArweaveId"
-      :upload-arweave-id-list=uploadArweaveList
-      :upload-arweave-link-list=uploadArweaveLinkList
+      :upload-arweave-id-list="uploadArweaveList"
+      :upload-arweave-link-list="uploadArweaveLinkList"
       :epub-metadata="epubMetadata"
 
       :step="step"