Feature/consume history (#363)

* populate table

* added OrdersData interfaces

* set consumer

* populate table


added OrdersData interfaces


set consumer

* query updated, logs removed

* removed "Title", added "Datatoken" column

* main branch merged

* table renamed and replaced

* unused css file removed

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

src/components/pages/History/Downloads.tsx

@@ -0,0 +1,72 @@
+import React, { ReactElement, useEffect, useState } from 'react'
+import { useOcean } from '@oceanprotocol/react'
+import Table from '../../atoms/Table'
+import { gql, useQuery } from '@apollo/client'
+import Time from '../../atoms/Time'
+import { OrdersData_tokenOrders as OrdersDataTokenOrders } from '../../../@types/apollo/OrdersData'
+import web3 from 'web3'
+import AssetTitle from '../../molecules/AssetListTitle'
+
+const getTokenOrders = gql`
+  query OrdersData($user: String!) {
+    tokenOrders(
+      orderBy: timestamp
+      orderDirection: desc
+      where: { consumer: $user }
+    ) {
+      datatokenId {
+        address
+        symbol
+      }
+      timestamp
+      tx
+    }
+  }
+`
+
+const columns = [
+  {
+    name: 'Data Set',
+    selector: function getAssetRow(row: OrdersDataTokenOrders) {
+      const did = web3.utils
+        .toChecksumAddress(row.datatokenId.address)
+        .replace('0x', 'did:op:')
+
+      return <AssetTitle did={did} />
+    }
+  },
+  {
+    name: 'Datatoken',
+    selector: function getTitleRow(row: OrdersDataTokenOrders) {
+      return row.datatokenId.symbol
+    }
+  },
+  {
+    name: 'Time',
+    selector: function getTimeRow(row: OrdersDataTokenOrders) {
+      return <Time date={row.timestamp.toString()} relative isUnix />
+    }
+  }
+]
+
+export default function ComputeDownloads(): ReactElement {
+  const { accountId } = useOcean()
+  const [orders, setOrders] = useState<OrdersDataTokenOrders[]>()
+  const { data } = useQuery(getTokenOrders, {
+    variables: { user: accountId?.toLowerCase() }
+  })
+
+  useEffect(() => {
+    if (!data) return
+    setOrders(data.tokenOrders)
+  }, [data])
+
+  return (
+    <Table
+      columns={columns}
+      data={orders}
+      paginationPerPage={10}
+      emptyMessage="Your downloads will show up here"
+    />
+  )
+}

src/components/pages/History/index.tsx

@@ -4,6 +4,7 @@ import styles from './index.module.css'
 import PoolShares from './PoolShares'
 import PoolTransactions from '../../molecules/PoolTransactions'
 import PublishedList from './PublishedList'
+import Downloads from './Downloads'
 
 const sections = [
   {
@@ -18,6 +19,10 @@ const sections = [
     title: 'Pool Transactions',
     component: <PoolTransactions />
   },
+  {
+    title: 'Downloads',
+    component: <Downloads />
+  },
   {
     title: 'Compute Jobs',
     component: <ComputeJobs />