first data output in table

src/components/pages/History/PoolTransactions.tsx

@@ -1,42 +1,50 @@
 import { PoolTransaction } from '@oceanprotocol/lib/dist/node/balancer/OceanPool'
 import { useOcean } from '@oceanprotocol/react'
+import { Link } from 'gatsby'
 import React, { ReactElement, useEffect, useState } from 'react'
 import DataTable from 'react-data-table-component'
-
-const data: PoolTransaction[] = [
-  {
-    poolAddress: '0xxxxx',
-    dtAddress: '0xxxxx',
-    caller: '0xxxxx',
-    transactionHash: '0xxxxx',
-    blockNumber: 2,
-    timestamp: 1,
-    tokenIn: 'OCEAN',
-    tokenAmountIn: '10',
-    type: 'join'
-  }
-]
-
-const columns = [
-  {
-    name: 'Title',
-    selector: (row: PoolTransaction) =>
-      `Add ${row.tokenAmountIn} ${row.tokenIn}`
-  },
-  {
-    name: 'Pool',
-    selector: 'poolAddress'
-  },
-  {
-    name: 'Account',
-    selector: 'caller'
-  }
-]
+import EtherscanLink from '../../atoms/EtherscanLink'
+import Time from '../../atoms/Time'
 
 export default function PoolTransactions(): ReactElement {
   const { ocean, accountId } = useOcean()
   const [logs, setLogs] = useState<PoolTransaction[]>()
 
+  const columns = [
+    {
+      name: 'Title',
+      selector: function getTitleRow(row: PoolTransaction) {
+        // TODO: replace hardcoded symbol with symbol fetching based
+        // on row.tonenIn & row.tokenOut
+        const title = row.tokenAmountIn
+          ? `Add ${row.tokenAmountIn} OCEAN`
+          : `Remove ${row.tokenAmountOut} OCEAN`
+
+        return (
+          <EtherscanLink network="rinkeby" path={`/tx/${row.transactionHash}`}>
+            {title}
+          </EtherscanLink>
+        )
+      }
+    },
+    {
+      name: 'Asset',
+      selector: function getAssetRow(row: PoolTransaction) {
+        const did = row.dtAddress.replace('0x', 'did:op:')
+        return <Link to={`/asset/${did}`}>{did}</Link>
+      }
+    },
+
+    {
+      name: 'Time',
+      selector: function getTimeRow(row: PoolTransaction) {
+        return (
+          <Time date={new Date(row.timestamp * 1000).toUTCString()} relative />
+        )
+      }
+    }
+  ]
+
   useEffect(() => {
     async function getLogs() {
       if (!ocean || !accountId) return
@@ -49,7 +57,7 @@ export default function PoolTransactions(): ReactElement {
 
   return (
     <div>
-      <DataTable columns={columns} data={data} />
+      <DataTable columns={columns} data={logs} />
       <pre>
         <code>{JSON.stringify(logs, null, 2)}</code>
       </pre>