refactor: Ipfs lab side

src/components/Dialog/ServiceDialog.vue

@@ -48,7 +48,7 @@
 
 <script>
 import Button from "@/components/Button";
-import { downloadDecryptedFromIPFS } from "@/lib/ipfs";
+import { downloadFile, decryptFile, downloadDocumentFile } from "@/lib/pinata-proxy"
 import { hexToU8a } from "@polkadot/util";
 import { mapState } from "vuex";
 
@@ -87,17 +87,14 @@ export default {
       this.$emit("close");
     },
     async downloadFile() {
-      const publicKey = hexToU8a(this.mnemonicData.publicKey);
-      const privateKey = hexToU8a(this.mnemonicData.privateKey);
-      const baseUrl = "https://ipfs.io/ipfs/";
-      const path = this.downloadPath.replace(baseUrl, "")
-      await downloadDecryptedFromIPFS(
-        path,
-        privateKey,
-        publicKey,
-        this.serviceId + ".pdf",
-        "application/pdf"
-      );
+      const type = "application/pdf"
+      const pair = {
+        publicKey: hexToU8a(this.mnemonicData.publicKey),
+        secretKey: hexToU8a(this.mnemonicData.privateKey)
+      }
+      const { data } = await downloadFile(this.downloadPath)
+      const decryptedFile = decryptFile(data, pair, type)
+      await downloadDocumentFile(decryptedFile, this.downloadPath.split("/").pop(), type)
     },
     onSubmit() {
       this.$router.push({ name: "request-test-checkout" });

src/lib/pinata-proxy.js

@@ -0,0 +1,84 @@
+import Kilt from "@kiltprotocol/sdk-js"
+import axios from "axios"
+import {
+  getIpfsMetaData as pinataIpfsGetIpfsMetadata,
+  uploadFile as pinataIpfsUploadFile,
+  downloadDocumentFileInBrowser,
+  downloadJson
+} from "@debionetwork/pinata-ipfs"
+
+const pinataJwtKey = process.env.VUE_APP_PINATA_JWT_KEY
+
+export const uploadFile = val => {
+  const options = {
+    pinataMetadata: {
+      name: val.title,
+      keyvalues: {
+        type: val.type,
+        date: +new Date()
+      }
+    },
+    pinataOptions: { cidVersion: 0 }
+  }
+
+  const CancelToken = axios.CancelToken
+  const source = CancelToken.source()
+
+  return pinataIpfsUploadFile(
+    options,
+    val.file,
+    pinataJwtKey,
+    source.token
+  )
+}
+
+export const getFileUrl = cid => {
+  return `https://ipfs.debio.network/ipfs/${cid}`
+}
+
+export const downloadFile = async (ipfsLink, withMetaData = false) => {
+  console.log("Downloading...")
+  const result = await downloadJson(
+    ipfsLink,
+    withMetaData,
+    pinataJwtKey
+  )
+  console.log("Success Downloaded!")
+
+  return result
+}
+
+export const getIpfsMetaData = async (cid) => {
+  return await pinataIpfsGetIpfsMetadata(
+    cid,
+    pinataJwtKey
+  )
+}
+
+export const decryptFile = (obj, pair) => {
+  const box = Object.values(obj[0].data.box)
+  const nonce = Object.values(obj[0].data.nonce)
+  let decryptedFile
+
+  const toDecrypt = {
+    box: Uint8Array.from(box),
+    nonce: Uint8Array.from(nonce)
+  }
+
+  decryptedFile = Kilt.Utils.Crypto.decryptAsymmetric(toDecrypt, pair.publicKey, pair.secretKey)
+
+  if (!decryptedFile) console.log("Undefined File", decryptedFile)
+  else return decryptedFile
+}
+
+export const downloadDocumentFile = (data, fileName, type) => {
+  try {
+    downloadDocumentFileInBrowser(
+      data,
+      fileName,
+      type
+    )
+  } catch (error) {
+    console.error(error)
+  }
+}

src/views/Dashboard/Lab/Account/Certification.vue

@@ -159,7 +159,7 @@ import { createCertification, updateCertification, deleteCertification } from "@
 import serviceHandler from "@/mixins/serviceHandler"
 import Dialog from "@/components/Dialog"
 import Button from "@/components/Button"
-import { upload } from "@/lib/ipfs"
+import { uploadFile, getFileUrl } from "@/lib/pinata-proxy"
 
 const englishAlphabet = val => (val && /^[A-Za-z0-9!@#$%^&*\\(\\)\-_=+:;"',.\\/? ]+$/.test(val)) || "This field can only contain English alphabet"
 
@@ -317,36 +317,43 @@ export default {
       await this.dispatch(deleteCertification, this.api, this.pair, cert.id)
       this.showDeletePrompt = false
     },
-    fileUploadEventListener(file) {
+    async fileUploadEventListener(file) {
       this.certSupportingDocumentsUrl = ""
-      if (!this.$refs.certificationForm.validate()) {
-        return
-      }
       if (file && file.name) {
         if (file.name.lastIndexOf(".") <= 0) {
           return
         }
         this.isUploading = true
         this.isLoading = true
+        const dataFile = await this.setupFileReader(file)
 
-        const fr = new FileReader()
-        fr.readAsArrayBuffer(file)
+        const result = await uploadFile({
+          title: dataFile.name,
+          type: dataFile.type,
+          file: dataFile
+        })
 
-        const context = this
-        fr.addEventListener("load", async () => {
-          // Upload
-          const uploaded = await upload({
-            fileChunk: fr.result,
-            fileType: file.type,
-            fileName: file.name
-          })
-          const computeLink = `${uploaded.ipfsPath[0].data.ipfsFilePath}/${uploaded.fileName}`
+        const link = getFileUrl(result.IpfsHash)
 
-          context.certSupportingDocumentsUrl = `https://ipfs.io/ipfs/${computeLink}` // this is an image file that can be sent to server...
-          context.isUploading = false
-          context.isLoading = false
-        })
+        this.certSupportingDocumentsUrl = link
+        this.isUploading = false
+        this.isLoading = false
       }
+    },
+
+    setupFileReader(value) {
+      return new Promise((resolve, reject) => {
+        const file = value
+        const fr = new FileReader()
+
+        fr.onload = async function () {
+          resolve(value)
+        }
+
+        fr.onerror = reject
+
+        fr.readAsArrayBuffer(file)
+      })
     }
   }
 }

src/views/Dashboard/Lab/Account/index.vue

@@ -160,7 +160,7 @@ import { getLocations, getStates, getCities } from "@/lib/api"
 import Kilt from "@kiltprotocol/sdk-js"
 import { u8aToHex } from "@polkadot/util"
 import Certification from "./Certification"
-import { upload } from "@/lib/ipfs"
+import { uploadFile, getFileUrl } from "@/lib/pinata-proxy"
 import serviceHandler from "@/lib/metamask/mixins/serviceHandler"
 
 const englishAlphabet = val => (val && /^[A-Za-z0-9!@#$%^&*\\(\\)\-_=+:;"',.\\/? ]+$/.test(val)) || "This field can only contain English alphabet"
@@ -373,7 +373,7 @@ export default {
       }
     },
 
-    fileUploadEventListener(file) {
+    async fileUploadEventListener(file) {
       this.imageUrl = ""
       if (!this.$refs.form.validate()) {
         return
@@ -385,30 +385,41 @@ export default {
         this.isUploading = true
         this.isLoading = true
 
-        const fr = new FileReader()
-        fr.readAsArrayBuffer(file)
+        const dataFile = await this.setupFileReader(file)
 
-        const context = this
-        fr.addEventListener("load", async () => {
-          // Upload
-          const uploaded = await upload({
-            fileChunk: fr.result,
-            fileType: file.type,
-            fileName: file.name
-          })
-          const computeLink = `${uploaded.ipfsPath[0].data.ipfsFilePath}/${uploaded.fileName}`
-
-          context.imageUrl = `https://ipfs.io/ipfs/${computeLink}` // this is an image file that can be sent to server...
-          context.isUploading = false
-          context.isLoading = false
+        const result = await uploadFile({
+          title: dataFile.name,
+          type: dataFile.type,
+          file: dataFile
         })
+
+        const link = getFileUrl(result.IpfsHash)
+
+        this.imageUrl = link
+        this.isUploading = false
+        this.isLoading = false
       }
       else {
         this.files = []
         this.imageUrl = ""
       }
     },
 
+    setupFileReader(value) {
+      return new Promise((resolve, reject) => {
+        const file = value
+        const fr = new FileReader()
+
+        fr.onload = async function () {
+          resolve(value)
+        }
+
+        fr.onerror = reject
+
+        fr.readAsArrayBuffer(file)
+      })
+    },
+
     checkVerify() {
       if (this.verificationStatus == "Verified") {
         return this.isVerify = true

src/views/Dashboard/Lab/Registration/Certification.vue

@@ -149,7 +149,7 @@ import { createCertification, updateCertification, deleteCertification } from "@
 import serviceHandler from "@/mixins/serviceHandler"
 import Dialog from "@/components/Dialog"
 import Button from "@/components/Button"
-import { upload } from "@/lib/ipfs"
+import { uploadFile, getFileUrl } from "@/lib/pinata-proxy"
 
 const englishAlphabet = val => (val && /^[A-Za-z0-9!@#$%^&*\\(\\)\-_=+:;"',.\\/? ]+$/.test(val)) || "This field can only contain English alphabet"
 
@@ -325,38 +325,45 @@ export default {
       this.confirmDeleteDialog = false
     },
 
-    fileUploadEventListener(file) {
+    async fileUploadEventListener(file) {
       this.certSupportingDocumentsUrl = ""
-      if (!this.$refs.certificationForm.validate()) {
-        return
-      }
       if (file && file.name) {
         if (file.name.lastIndexOf(".") <= 0) {
           return
         }
         this.isUploading = true
         this.isLoading = true
 
-        const fr = new FileReader()
-        fr.readAsArrayBuffer(file)
+        const dataFile = await this.setupFileReader(file)
 
-        const context = this
-        fr.addEventListener("load", async () => {
-          // Upload
-          const uploaded = await upload({
-            fileChunk: fr.result,
-            fileType: file.type,
-            fileName: file.name
-          })
-          const computeLink = `${uploaded.ipfsPath[0].data.ipfsFilePath}/${uploaded.fileName}`
-
-          context.certSupportingDocumentsUrl = `https://ipfs.io/ipfs/${computeLink}` // this is an image file that can be sent to server...
-          context.isUploading = false
-          context.isLoading = false
+        const result = await uploadFile({
+          title: dataFile.name,
+          type: dataFile.type,
+          file: dataFile
         })
+
+        const link = getFileUrl(result.IpfsHash)
+
+        this.certSupportingDocumentsUrl = link
+        this.isUploading = false
+        this.isLoading = false
       }
-    }
+    },
 
+    setupFileReader(value) {
+      return new Promise((resolve, reject) => {
+        const file = value
+        const fr = new FileReader()
+
+        fr.onload = async function () {
+          resolve(value)
+        }
+
+        fr.onerror = reject
+
+        fr.readAsArrayBuffer(file)
+      })
+    }
   }
 }
 </script>