Feature/edit history subgraph (#423)

* fetching Subgraph data

* updates ordered by timestamp

* comment removed

* comment removed

* apollo generated  typing used

* date converted to string

Co-authored-by: claudia.holhos <claudia.holhos@hpm.ro>

src/components/organisms/AssetContent/EditHistory.tsx

@@ -4,52 +4,53 @@ import { useAsset } from '../../../providers/Asset'
 import EtherscanLink from '../../atoms/EtherscanLink'
 import Time from '../../atoms/Time'
 import styles from './EditHistory.module.css'
+import { gql, useQuery } from '@apollo/client'
+import { ReceiptData_datatokens_updates as ReceiptData } from '../../../@types/apollo/ReceiptData'
 
-interface Receipt {
-  hash: string
-  timestamp: string
-}
-
-// TODO: fetch for real
-const fakeReceipts = [
-  {
-    hash: '0xxxxxxxxx',
-    timestamp: '1607460269'
-  },
-  {
-    hash: '0xxxxxxxxx',
-    timestamp: '1606460159'
-  },
-  {
-    hash: '0xxxxxxxxx',
-    timestamp: '1506460159'
+const getReceipts = gql`
+  query ReceiptData($address: String!) {
+    datatokens(where: { id: $address }) {
+      createTime
+      tx
+      updates(orderBy: timestamp, orderDirection: desc) {
+        id
+        tx
+        timestamp
       }
-]
+    }
+  }
+`
 
 export default function EditHistory(): ReactElement {
   const { networkId } = useOcean()
   const { ddo } = useAsset()
+  const { data } = useQuery(getReceipts, {
+    variables: { address: ddo?.dataToken.toLowerCase() }
+  })
 
-  const [receipts, setReceipts] = useState<Receipt[]>()
+  const [receipts, setReceipts] = useState<ReceiptData[]>()
+  const [creationTx, setCreationTx] = useState<string>()
 
   useEffect(() => {
-    setReceipts(fakeReceipts)
-  }, [])
+    if (!data) return
+    setReceipts(data.datatokens[0].updates)
+    setCreationTx(data.datatokens[0].tx)
+  }, [data])
 
   return (
     <>
       <h3 className={styles.title}>Metadata History</h3>
       <ul className={styles.history}>
         {receipts?.map((receipt) => (
-          <li key={receipt.hash} className={styles.item}>
-            <EtherscanLink networkId={networkId} path={`/tx/${receipt.hash}`}>
-              edited <Time date={receipt.timestamp} relative isUnix />
+          <li key={receipt.id} className={styles.item}>
+            <EtherscanLink networkId={networkId} path={`/tx/${receipt.tx}`}>
+              edited{' '}
+              <Time date={receipt.timestamp.toString()} relative isUnix />
             </EtherscanLink>
           </li>
         ))}
         <li className={styles.item}>
-          {/* TODO: get this initial metadata creation tx somehow */}
-          <EtherscanLink networkId={networkId} path="/tx/xxx">
+          <EtherscanLink networkId={networkId} path={`/tx/${creationTx}`}>
             published <Time date={ddo.created} relative />
           </EtherscanLink>
         </li>

src/components/organisms/AssetContent/MetaFull.tsx

@@ -17,16 +17,6 @@ export default function MetaFull(): ReactElement {
         title="Owner"
         content={<Publisher account={ddo?.publicKey[0].owner} />}
       />
-      {/* <MetaItem
-        title="Data Created"
-        content={<Time date={metadata?.main.dateCreated} />}
-      /> */}
-
-      {/* TODO: remove those 2 date items here when EditHistory component is ready */}
-      <MetaItem title="Published" content={<Time date={ddo?.created} />} />
-      {ddo?.created !== ddo?.updated && (
-        <MetaItem title="Updated" content={<Time date={ddo?.updated} />} />
-      )}
       <MetaItem title="DID" content={<code>{ddo?.id}</code>} />
     </div>
   )

src/components/organisms/AssetContent/index.tsx

@@ -15,7 +15,7 @@ import Button from '../../atoms/Button'
 import Edit from '../AssetActions/Edit'
 import DebugOutput from '../../atoms/DebugOutput'
 import MetaMain from './MetaMain'
-// import EditHistory from './EditHistory'
+import EditHistory from './EditHistory'
 
 export interface AssetContentProps {
   path?: string
@@ -97,7 +97,7 @@ export default function AssetContent(props: AssetContentProps): ReactElement {
           )}
 
           <MetaFull />
-          {/* <EditHistory /> */}
+          <EditHistory />
           {debug === true && <DebugOutput title="DDO" output={ddo} />}
         </div>
       </div>