connect Reader mode to the graph and IPFS

public/manifest.json

@@ -26,7 +26,8 @@
     "run_at": "document_end"
   }],
   "permissions": [
-    "activeTab"
+    "activeTab",
+    "https://api.thegraph.com"
   ],
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
   "web_accessible_resources": [

src/Components/Reader.js

@@ -1,12 +1,30 @@
 import React, { useEffect, useState } from 'react';
 import { connectMetamask, signV4 } from '../services/ethereum'
 
+import Annotation from '../Models/Annotation'
+//getAnnotationCIDsByReference(first, skip, reference) {
 import Logo from '../images/logo'
 import { ModalContext } from '../Contexts/ModalProvider';
+import { getAnnotationCIDs } from '../services/publisher'
+import { getAnnotationCIDsByReference } from '../services/graph'
+import { getAnnotationData } from '../services/ipfs'
+import { getTweetData } from '../helpers'
 
-const Reader = ({setPage}) => {
+const Reader = ({ setPage }) => {
   const [web3Enabled, setWeb3Enabled] = useState(false)
   const [title, setTitle] = useState("nothing...")
+  const [tweetAnnotations, setTweetAnnotations] = useState([])
+
+  useEffect(async () => {
+    const { tweetId, tweetAuthor } = getTweetData()
+    const annotationCIDs = await getAnnotationCIDsByReference({ reference: tweetId })
+    const annotations = (await Promise.all(annotationCIDs.map(cid => {
+      return getAnnotationData(cid)
+    })))
+      .map(payload => new Annotation({ payload }))
+
+    setTweetAnnotations(annotations)
+  }, [])
 
   return (
     <ModalContext.Consumer>
@@ -19,56 +37,22 @@ const Reader = ({setPage}) => {
                 <h3>{`Reading comments`}</h3>
               </div>
               <div className="modal-content__comments">
-                <Comment
-                  user="Joe cool"
-                  date="July 12"
-                  commentText="Do you know what this is? It's the world's smallest violin playing just for the waitresses."
-                />
-
-                <Comment
-                  user="Everyone, ever"
-                  date="July 13"
-                  commentText="May the Force be with you."
-                />
-                <Comment
-                  user="Punk"
-                  date="July 13"
-                  commentText="Go ahead, make my day."
-                />
-                <Comment
-                  user="Car Salesperson"
-                  date="July 13"
-                  commentText="I'm going to make him an offer he can't refuse."
-                />
-                <Comment
-                  user="Jane Doe"
-                  date="July 13"
-                  commentText="There's no place like home."
-                />
-                <Comment
-                  user="John Doe"
-                  date="July 13"
-                  commentText="You talking to me?"
-                />
-                <Comment
-                  user="Journalist"
-                  date="July 13"
-                  commentText="What we've got here is failure to communicate."
-                />
-                <Comment
-                  user="Billy boy"
-                  date="July 13"
-                  commentText="D-J-A-N-G-O. The D is silent."
-                />
+                {tweetAnnotations.length > 0 && tweetAnnotations.map(a => {
+                  return (<Comment
+                    user={a.getShortAuthor()}
+                    date={a.getShortDate()}
+                    commentText={a.getContent()}
+                  />)
+                })}
               </div>
               <div className="modal-content__confirm">
                 <TerciaryButton
                   label="Load more"
-                  onClick={()=> {}}
+                  onClick={() => { }}
                 />
                 <PrimaryButton
                   label="Create a comment"
-                  onClick={()=>setPage('writer')}
+                  onClick={() => setPage('writer')}
                 />
               </div>
 

src/Components/Writer.js

@@ -4,6 +4,7 @@ import { connectMetamask, signV4 } from '../services/ethereum'
 import Annotation from '../Models/Annotation'
 import Logo from '../images/logo'
 import { ModalContext } from '../Contexts/ModalProvider';
+import {getTweetData} from '../helpers'
 
 const Reader = ({ setPage }) => {
   const [web3Enabled, setWeb3Enabled] = useState(false)
@@ -16,12 +17,12 @@ const Reader = ({ setPage }) => {
       alert('This only works on Tweet pages')
     }
 
-    const tweetAuthor = tweetInfo[3]
-    const tweetId = tweetInfo[5]
+    const {tweetId, tweetAuthor} = getTweetData()
 
     let annotation = new Annotation({content: commentContent, issuerEthAddress:"0x123", tweetAuthor, tweetId})
     await annotation.sign()
     alert(JSON.stringify(annotation))
+    console.log(JSON.stringify(annotation))
   }
 
 

src/Models/Annotation.js

@@ -14,7 +14,7 @@ class Annotation {
                     content: `uri:tweet:${tweetAuthor}/${tweetId}`
                 },
                 proof: {
-                    created: this.issuanceDate,
+                    created: new Date().toJSON(),
                     proofPurpose: "PANSubmission",
                     type: "EthereumECDSA",
                     verificationMethod: "urn:ethereum:messageHash"
@@ -36,15 +36,23 @@ class Annotation {
     }
 
     getContent() {
-        return this.payload.credentialSubject.annotation
+        return JSON.stringify(this.payload.credentialSubject.annotation)
     }
 
     getAuthor() {
         return this.payload.issuer
     }
 
+    getShortAuthor() {
+        return this.payload.issuer.split(':')[2].slice(0,8)+"..."
+    }
+
     getDate() {
-        return new Date(this.payload.issuanceDate)
+        return JSON.stringify(new Date(this.payload.issuanceDate))
+    }
+
+    getShortDate() {
+        return new Date(this.payload.issuanceDate).toLocaleDateString()
     }
 }
 

src/helpers/index.js

@@ -0,0 +1,13 @@
+export const getTweetData = (url = undefined) => {
+
+    const tweetInfo = url ? url.split('/') : window.location.href.split('/')
+
+    if (tweetInfo[2] !== 'twitter.com' && tweetInfo[4] !== 'status') {
+        alert('This only works on Tweet pages')
+    }
+
+    const tweetAuthor = tweetInfo[3]
+    const tweetId = tweetInfo[5]
+
+    return { tweetAuthor, tweetId }
+}

src/services/graph.js

@@ -3,7 +3,7 @@ import fetch from 'cross-fetch';
 const SUBGRAPH_URL = 'https://api.thegraph.com/subgraphs/name/public-annotation-network/subgraph';
 
 
-async function sendQuery (query) {
+async function sendQuery(query) {
     try {
         const response = await fetch(
             SUBGRAPH_URL,
@@ -40,7 +40,7 @@ export async function getAnnotationBatchCIDs(first, skip) {
     return result.data.annotationBatches.map(({ cid }) => cid);
 }
 
-export async function getAnnotationCIDs(first, skip) {
+export async function getAnnotationCIDs({ first = 10, skip = 0 }) {
     const result = await sendQuery(
         `
             {
@@ -59,7 +59,7 @@ export async function getAnnotationCIDs(first, skip) {
     return result.data.annotations.map(({ cid }) => cid);
 }
 
-export  async function getAnnotationCIDsByReference(first, skip, reference) {
+export async function getAnnotationCIDsByReference({ first = 10, skip = 0, reference }) {
     const result = await sendQuery(
         `
             {

src/services/publisher.js

@@ -1,30 +1,32 @@
 import fetch from 'cross-fetch';
 
-const PUBLISHER_URL = 'https://pan.network/annotation/v1';
+// const PUBLISHER_URL = 'https://pan.network/annotation/v1';
+const PUBLISHER_URL = 'http://134.122.90.29:8000';
 
 
 async function get(params) {
-		const query = Object.keys(params)
-			.map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
-			.join('&');
-	
-		const response = await fetch(PUBLISHER_URL + '?' + query);
-	
-		if (response.status !== 200) {
-			throw new Error(response);
-		}
-	
-		try {
-			return await response.json();
-		} catch (error) {
-			throw error;
-		}
+	const query = Object.keys(params)
+		.map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
+		.join('&');
+
+	const response = await fetch(PUBLISHER_URL + '?' + query);
+
+	if (response.status !== 200) {
+		throw new Error(response);
+	}
+
+	try {
+		return await response.json();
+	} catch (error) {
+		throw error;
+	}
 }
 
 export async function post(route, body) {
 	const response = await fetch(route, {
 		method: 'POST',
-		headers: { 'Content-Type': 'application/json', Authorization: TOKEN },
+		// headers: { 'Content-Type': 'application/json', Authorization: TOKEN },
+		headers: { 'Content-Type': 'application/json' },
 		body: JSON.stringify(body)
 	});
 
@@ -39,13 +41,19 @@ export async function post(route, body) {
 	}
 }
 
-export async function getAnnotationCIDs(first, skip) {
-		const result = await get({ limit: first, offset: skip });
+// export async function getAnnotationCIDs( {first=10, skip=0} ) {
+// 		const result = await get({ limit: first, offset: skip });
+
+// 		return result;
+// }
+
+export const getAnnotationCIDs = async ({ first = 10, skip = 0 }) => {
+	const result = await get({ limit: first, offset: skip });
 
-		return result;
+	return result;
 }
 
-export async function getAnnotationCIDsByReference(first, skip, reference) {
+export async function getAnnotationCIDsByReference({ first, skip, reference }) {
 	return;
 }