chore: graph migration

Author: jaybuidl

developer/light-curate.md

@@ -32,139 +32,53 @@ Since we use `@graphprotocol/graph-ts` we must submit items to its ipfs endpoint
 Full example [here](https://github.com/kleros/gtcr/blob/5e313ced24f5e3fc3a54f812e07fb1f86a6b2621/src/utils/ipfs-publish.js)
 
 ```text
-REACT_APP_IPFS_GATEWAY=https://ipfs.kleros.io
+REACT_APP_IPFS_GATEWAY=https://cdn.kleros.link
 REACT_APP_HOSTED_GRAPH_IPFS_ENDPOINT=https://api.thegraph.com/ipfs
 ```
 
 #### Upload and Transaction
 
-```text
-// ipfs-publish.js
-
-import deepEqual from 'fast-deep-equal/es6'
-
-const mirroredExtensions = ['.json']
-
-/**
- * Send file to IPFS network.
- * @param {string} fileName - The name that will be used to store the file. This is useful to preserve extension type.
- * @param {ArrayBuffer} data - The raw data from the file to upload.
- * @returns {object} ipfs response. Should include the hash and path of the stored item.
- */
-export default async function ipfsPublish(fileName, data) {
-  if (!mirroredExtensions.some(ext => fileName.endsWith(ext)))
-    return publishToKlerosNode(fileName, data)
-
-  const [klerosResult, theGraphResult] = await Promise.all([
-    publishToKlerosNode(fileName, data),
-    publishToTheGraphNode(fileName, data),
-    // Pin to your own ipfs node here as well.
-  ])
-
-  if (!deepEqual(klerosResult, theGraphResult)) {
-    console.warn('IPFS upload result is different:', {
-      kleros: klerosResult,
-      theGraph: theGraphResult
-    })
-    throw new Error('IPFS upload result is different.')
-  }
-
-  return klerosResult
-}
+```typescript
+const pinFiles = async (
+  data: FormData,
+  pinToGraph: boolean
+): Promise<
+  [Array<string>, Array<{ filebaseCid: string; graphCid: string }>]
+> => {
+  const cids = new Array<string>();
+  // keep track in case some cids are inconsistent
+  const inconsistentCids = new Array<{
+    filebaseCid: string;
+    graphCid: string;
+  }>();
+
+  for (const [_, dataElement] of Object.entries(data)) {
+    if (dataElement.isFile) {
+      const { filename, mimeType, content } = dataElement;
+      const path = `${filename}`;
+      const cid = await filebase.storeDirectory([
+        new File([content], path, { type: mimeType }),
+      ]);
+
+      if (pinToGraph) {
+        const graphResult = await publishToGraph(filename, content);
+        if (!areCidsConsistent(cid, graphResult)) {
+          console.warn("Inconsistent cids from Filebase and Graph Node :", {
+            filebaseCid: cid,
+            graphCid: graphResult[1].hash,
+          });
+          inconsistentCids.push({
+            filebaseCid: cid,
+            graphCid: graphResult[1].hash,
+          });
+        }
+      }
 
-/**
- * Send file to IPFS network via the Kleros IPFS node
- * @param {string} fileName - The name that will be used to store the file. This is useful to preserve extension type.
- * @param {ArrayBuffer} data - The raw data from the file to upload.
- * @returns {object} ipfs response. Should include the hash and path of the stored item.
- */
-async function publishToKlerosNode(fileName, data) {
-  const buffer = await Buffer.from(data)
-  const url = `${process.env.REACT_APP_IPFS_GATEWAY}/add`
-
-  const response = await fetch(url, {
-    method: 'POST',
-    body: JSON.stringify({
-      fileName,
-      buffer
-    }),
-    headers: {
-      'content-type': 'application/json'
+      cids.push(`/ipfs/${cid}/${path}`);
     }
-  })
-
-  const body = await response.json()
-
-  return body.data
-}
-
-/**
- * Send file to IPFS network via The Graph hosted IPFS node
- * @param {string} fileName - The name that will be used to store the file. This is useful to preserve extension type.
- * @param {ArrayBuffer} data - The raw data from the file to upload.
- * @returns {object} ipfs response. Should include the hash and path of the stored item.
- */
-async function publishToTheGraphNode(fileName, data) {
-  const url = `${process.env.REACT_APP_HOSTED_GRAPH_IPFS_ENDPOINT}/api/v0/add?wrap-with-directory=true`
-
-  const payload = new FormData()
-  payload.append('file', new Blob([data]), fileName)
-
-  const response = await fetch(url, {
-    method: 'POST',
-    body: payload
-  })
-
-  const result = await jsonStreamToPromise(response.body)
-
-  return result.map(({ Name, Hash }) => ({
-    hash: Hash,
-    path: `/${Name}`
-  }))
-}
-
-/**
- * Accumulates a JSON stream body into an array of JSON objects.
- * @param {ReadableStream} stream The stream to read from.
- * @returns {Promise<any>} An array of all JSON objects emitted by the stream.
- */
-async function jsonStreamToPromise(stream) {
-  const reader = stream.getReader()
-  const decoder = new TextDecoder('utf-8')
-
-  const deferred = {
-    resolve: undefined,
-    reject: undefined
-  }
-
-  const result = new Promise((resolve, reject) => {
-    deferred.resolve = resolve
-    deferred.reject = reject
-  })
-
-  const acc = []
-  const start = async () => {
-    reader
-      .read()
-      .then(({ done, value }) => {
-        if (done) return deferred.resolve(acc)
-
-        // Each `read` can produce one or more lines...
-        const lines = decoder.decode(value).split(/\n/)
-        const objects = lines
-          .filter(line => line.trim() !== '')
-          .map(line => JSON.parse(line))
-        acc.push(...objects)
-
-        return start()
-      })
-      .catch(err => deferred.reject(err))
   }
-
-  start()
-
-  return result
-}
+  return [cids, inconsistentCids];
+};
 ```
 
 The JSON file for the object is composed of the its metadata and fields.
@@ -258,7 +172,7 @@ See [this react example](https://github.com/kleros/gtcr/blob/5e313ced24f5e3fc3a5
 
 A standard query for the first page of a given list, ordered by the most recent requests, looks like this.
 
-```javascript
+```typescript
 const ITEMS_PER_PAGE = 40
 const orderDirection = 'asc'
 const page = 1
@@ -314,7 +228,7 @@ const query = {
 
 If you want, you can also use apollo to cache queries and make the app load faster.
 
-```text
+```typescript
 const ITEM_DETAILS_QUERY = gql`
   query itemDetailsQuery($id: String!) {
     item(id: $id) {