table styling

package-lock.json

@@ -3387,9 +3387,9 @@
       "integrity": "sha512-0+Tp6UdoDTBJZp4yX3kkSrV+CcOS/hJ3SJ4HuWiL5FE5Nlj3JCeV86iuWPkFuXzIdgri00DaGvQhP58knzJ2Uw=="
     },
     "@oceanprotocol/lib": {
-      "version": "0.3.2",
+      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.4.0.tgz",
-      "integrity": "sha512-pdgY+PqDlLt64C/ZzxzZtUwN+f+pBTyBzSgXeS0j1D79BChnCtyZAeAR4JyMB/bJSarsWNv1oVUxxVPx9SJ5hw==",
+      "integrity": "sha512-0tMvRXqV7I4Jz9MhoLv5Zd8RcVfuPWa33VCFElodXCNOcZZWayV0hFrZsz779cKZByahbvWZGLEE8Z9WVfiFQw==",
       "requires": {
         "@ethereum-navigator/navigator": "^0.5.0",
         "@oceanprotocol/contracts": "^0.4.4",
@@ -3598,6 +3598,208 @@
         "decimal.js": "^10.2.1",
         "web3": "^1.3.0",
         "web3modal": "^1.9.0"
+      },
+      "dependencies": {
+        "@oceanprotocol/lib": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.3.2.tgz",
+          "integrity": "sha512-pdgY+PqDlLt64C/ZzxzZtUwN+f+pBTyBzSgXeS0j1D79BChnCtyZAeAR4JyMB/bJSarsWNv1oVUxxVPx9SJ5hw==",
+          "requires": {
+            "@ethereum-navigator/navigator": "^0.5.0",
+            "@oceanprotocol/contracts": "^0.4.4",
+            "decimal.js": "^10.2.0",
+            "fs": "0.0.1-security",
+            "lzma": "^2.3.2",
+            "node-fetch": "^2.6.1",
+            "save-file": "^2.3.1",
+            "uuid": "^8.3.0",
+            "web3": "^1.3.0",
+            "web3-eth-contract": "^1.3.0"
+          }
+        },
+        "@types/node": {
+          "version": "12.12.62",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.62.tgz",
+          "integrity": "sha512-qAfo81CsD7yQIM9mVyh6B/U47li5g7cfpVQEDMfQeF8pSZVwzbhwU3crc0qG4DmpsebpJPR49AKOExQyJ05Cpg=="
+        },
+        "eth-lib": {
+          "version": "0.2.8",
+          "resolved": "https://registry.npmjs.org/eth-lib/-/eth-lib-0.2.8.tgz",
+          "integrity": "sha512-ArJ7x1WcWOlSpzdoTBX8vkwlkSQ85CjjifSZtV4co64vWxSV8geWfPI9x4SVYu3DSxnX4yWFVTtGL+j9DUFLNw==",
+          "requires": {
+            "bn.js": "^4.11.6",
+            "elliptic": "^6.4.0",
+            "xhr-request-promise": "^0.1.2"
+          }
+        },
+        "oboe": {
+          "version": "2.1.5",
+          "resolved": "https://registry.npmjs.org/oboe/-/oboe-2.1.5.tgz",
+          "integrity": "sha1-VVQoTFQ6ImbXo48X4HOCH73jk80=",
+          "requires": {
+            "http-https": "^1.0.0"
+          }
+        },
+        "web3-core": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/web3-core/-/web3-core-1.3.0.tgz",
+          "integrity": "sha512-BwWvAaKJf4KFG9QsKRi3MNoNgzjI6szyUlgme1qNPxUdCkaS3Rdpa0VKYNHP7M/YTk82/59kNE66mH5vmoaXjA==",
+          "requires": {
+            "@types/bn.js": "^4.11.5",
+            "@types/node": "^12.12.6",
+            "bignumber.js": "^9.0.0",
+            "web3-core-helpers": "1.3.0",
+            "web3-core-method": "1.3.0",
+            "web3-core-requestmanager": "1.3.0",
+            "web3-utils": "1.3.0"
+          }
+        },
+        "web3-core-helpers": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/web3-core-helpers/-/web3-core-helpers-1.3.0.tgz",
+          "integrity": "sha512-+MFb1kZCrRctf7UYE7NCG4rGhSXaQJ/KF07di9GVK1pxy1K0+rFi61ZobuV1ky9uQp+uhhSPts4Zp55kRDB5sw==",
+          "requires": {
+            "underscore": "1.9.1",
+            "web3-eth-iban": "1.3.0",
+            "web3-utils": "1.3.0"
+          }
+        },
+        "web3-core-method": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/web3-core-method/-/web3-core-method-1.3.0.tgz",
+          "integrity": "sha512-h0yFDrYVzy5WkLxC/C3q+hiMnzxdWm9p1T1rslnuHgOp6nYfqzu/6mUIXrsS4h/OWiGJt+BZ0xVZmtC31HDWtg==",
+          "requires": {
+            "@ethersproject/transactions": "^5.0.0-beta.135",
+            "underscore": "1.9.1",
+            "web3-core-helpers": "1.3.0",
+            "web3-core-promievent": "1.3.0",
+            "web3-core-subscriptions": "1.3.0",
+            "web3-utils": "1.3.0"
+          }
+        },
+        "web3-core-promievent": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/web3-core-promievent/-/web3-core-promievent-1.3.0.tgz",
+          "integrity": "sha512-blv69wrXw447TP3iPvYJpllkhW6B18nfuEbrfcr3n2Y0v1Jx8VJacNZFDFsFIcgXcgUIVCtOpimU7w9v4+rtaw==",
+          "requires": {
+            "eventemitter3": "4.0.4"
+          }
+        },
+        "web3-core-requestmanager": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/web3-core-requestmanager/-/web3-core-requestmanager-1.3.0.tgz",
+          "integrity": "sha512-3yMbuGcomtzlmvTVqNRydxsx7oPlw3ioRL6ReF9PeNYDkUsZaUib+6Dp5eBt7UXh5X+SIn/xa1smhDHz5/HpAw==",
+          "requires": {
+            "underscore": "1.9.1",
+            "web3-core-helpers": "1.3.0",
+            "web3-providers-http": "1.3.0",
+            "web3-providers-ipc": "1.3.0",
+            "web3-providers-ws": "1.3.0"
+          }
+        },
+        "web3-core-subscriptions": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/web3-core-subscriptions/-/web3-core-subscriptions-1.3.0.tgz",
+          "integrity": "sha512-MUUQUAhJDb+Nz3S97ExVWveH4utoUnsbPWP+q1HJH437hEGb4vunIb9KvN3hFHLB+aHJfPeStM/4yYTz5PeuyQ==",
+          "requires": {
+            "eventemitter3": "4.0.4",
+            "underscore": "1.9.1",
+            "web3-core-helpers": "1.3.0"
+          }
+        },
+        "web3-eth-abi": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/web3-eth-abi/-/web3-eth-abi-1.3.0.tgz",
+          "integrity": "sha512-1OrZ9+KGrBeBRd3lO8upkpNua9+7cBsQAgor9wbA25UrcUYSyL8teV66JNRu9gFxaTbkpdrGqM7J/LXpraXWrg==",
+          "requires": {
+            "@ethersproject/abi": "5.0.0-beta.153",
+            "underscore": "1.9.1",
+            "web3-utils": "1.3.0"
+          }
+        },
+        "web3-eth-contract": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/web3-eth-contract/-/web3-eth-contract-1.3.0.tgz",
+          "integrity": "sha512-3SCge4SRNCnzLxf0R+sXk6vyTOl05g80Z5+9/B5pERwtPpPWaQGw8w01vqYqsYBKC7zH+dxhMaUgVzU2Dgf7bQ==",
+          "requires": {
+            "@types/bn.js": "^4.11.5",
+            "underscore": "1.9.1",
+            "web3-core": "1.3.0",
+            "web3-core-helpers": "1.3.0",
+            "web3-core-method": "1.3.0",
+            "web3-core-promievent": "1.3.0",
+            "web3-core-subscriptions": "1.3.0",
+            "web3-eth-abi": "1.3.0",
+            "web3-utils": "1.3.0"
+          }
+        },
+        "web3-eth-iban": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/web3-eth-iban/-/web3-eth-iban-1.3.0.tgz",
+          "integrity": "sha512-v9mZWhR4fPF17/KhHLiWir4YHWLe09O3B/NTdhWqw3fdAMJNztzMHGzgHxA/4fU+rhrs/FhDzc4yt32zMEXBZw==",
+          "requires": {
+            "bn.js": "^4.11.9",
+            "web3-utils": "1.3.0"
+          }
+        },
+        "web3-providers-http": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/web3-providers-http/-/web3-providers-http-1.3.0.tgz",
+          "integrity": "sha512-cMKhUI6PqlY/EC+ZDacAxajySBu8AzW8jOjt1Pe/mbRQgS0rcZyvLePGTTuoyaA8C21F8UW+EE5jj7YsNgOuqA==",
+          "requires": {
+            "web3-core-helpers": "1.3.0",
+            "xhr2-cookies": "1.1.0"
+          }
+        },
+        "web3-providers-ipc": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/web3-providers-ipc/-/web3-providers-ipc-1.3.0.tgz",
+          "integrity": "sha512-0CrLuRofR+1J38nEj4WsId/oolwQEM6Yl1sOt41S/6bNI7htdkwgVhSloFIMJMDFHtRw229QIJ6wIaKQz0X1Og==",
+          "requires": {
+            "oboe": "2.1.5",
+            "underscore": "1.9.1",
+            "web3-core-helpers": "1.3.0"
+          }
+        },
+        "web3-providers-ws": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/web3-providers-ws/-/web3-providers-ws-1.3.0.tgz",
+          "integrity": "sha512-Im5MthhJnJst8nSoq0TgbyOdaiFQFa5r6sHPOVllhgIgViDqzbnlAFW9sNzQ0Q8VXPNfPIQKi9cOrHlSRNPjRw==",
+          "requires": {
+            "eventemitter3": "4.0.4",
+            "underscore": "1.9.1",
+            "web3-core-helpers": "1.3.0",
+            "websocket": "^1.0.32"
+          }
+        },
+        "web3-utils": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/web3-utils/-/web3-utils-1.3.0.tgz",
+          "integrity": "sha512-2mS5axFCbkhicmoDRuJeuo0TVGQDgC2sPi/5dblfVC+PMtX0efrb8Xlttv/eGkq7X4E83Pds34FH98TP2WOUZA==",
+          "requires": {
+            "bn.js": "^4.11.9",
+            "eth-lib": "0.2.8",
+            "ethereum-bloom-filters": "^1.0.6",
+            "ethjs-unit": "0.1.6",
+            "number-to-bn": "1.7.0",
+            "randombytes": "^2.1.0",
+            "underscore": "1.9.1",
+            "utf8": "3.0.0"
+          }
+        },
+        "websocket": {
+          "version": "1.0.32",
+          "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.32.tgz",
+          "integrity": "sha512-i4yhcllSP4wrpoPMU2N0TQ/q0O94LRG/eUQjEAamRltjQ1oT1PFFKOG4i877OlJgCG8rw6LrrowJp+TYCEWF7Q==",
+          "requires": {
+            "bufferutil": "^4.0.1",
+            "debug": "^2.2.0",
+            "es5-ext": "^0.10.50",
+            "typedarray-to-buffer": "^3.1.5",
+            "utf-8-validate": "^5.0.2",
+            "yaeti": "^0.0.6"
+          }
+        }
       }
     },
     "@oceanprotocol/typographies": {
@@ -15329,9 +15531,9 @@
       "dev": true
     },
     "formik": {
-      "version": "2.1.5",
+      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/formik/-/formik-2.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.1.6.tgz",
-      "integrity": "sha512-bWpo3PiqVDYslvrRjTq0Isrm0mFXHiO33D8MS6t6dWcqSFGeYF52nlpCM2xwOJ6tRVRznDkL+zz/iHPL4LDuvQ==",
+      "integrity": "sha512-m9DcxlZw/58p4xuhH3dzUzQWaC4dig0RKX7yNQOJt4VRhXn7p+YRrs3o17r3YwzvOLua3zC53VMbfupLsDwO5w==",
       "requires": {
         "deepmerge": "^2.1.1",
         "hoist-non-react-statics": "^3.3.0",

package.json

@@ -22,7 +22,7 @@
     "@coingecko/cryptoformat": "^0.4.2",
     "@loadable/component": "5.13.1",
     "@oceanprotocol/art": "^3.0.0",
-    "@oceanprotocol/lib": "^0.3.2",
+    "@oceanprotocol/lib": "^0.4.0",
     "@oceanprotocol/react": "^0.0.48",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
@@ -38,7 +38,7 @@
     "dotenv": "^8.2.0",
     "ethereum-blockies": "github:MyEtherWallet/blockies",
     "filesize": "^6.1.0",
-    "formik": "^2.1.5",
+    "formik": "^2.1.6",
     "gatsby": "^2.24.66",
     "gatsby-image": "^2.4.20",
     "gatsby-plugin-manifest": "^2.4.32",

src/components/pages/History/PoolTransactions.module.css

@@ -0,0 +1,10 @@
+.table {
+}
+
+.table div {
+  background-color: transparent !important;
+}
+
+.table [role='columnheader'] {
+  font-weight: var(--font-weight-bold);
+}

src/components/pages/History/PoolTransactions.tsx

@@ -5,6 +5,7 @@ import React, { ReactElement, useEffect, useState } from 'react'
 import DataTable from 'react-data-table-component'
 import EtherscanLink from '../../atoms/EtherscanLink'
 import Time from '../../atoms/Time'
+import styles from './PoolTransactions.module.css'
 
 export default function PoolTransactions(): ReactElement {
   const { ocean, accountId } = useOcean()
@@ -49,18 +50,24 @@ export default function PoolTransactions(): ReactElement {
     async function getLogs() {
       if (!ocean || !accountId) return
 
-      const logs = await ocean.pool.getAllPoolLogs(accountId)
+      const logs = await ocean.pool.getAllPoolLogs(
-      setLogs(logs)
+        '0xe08A1dAe983BC701D05E492DB80e0144f8f4b909'
+      )
+      // limit to 20 latest transactions for now
+      setLogs(logs.slice(0, 19))
     }
     getLogs()
   }, [ocean, accountId])
 
   return (
     <div>
-      <DataTable columns={columns} data={logs} />
+      <DataTable
-      <pre>
+        columns={columns}
-        <code>{JSON.stringify(logs, null, 2)}</code>
+        data={logs}
-      </pre>
+        className={styles.table}
+        noHeader
+        pagination
+      />
     </div>
   )
 }

src/components/pages/History/index.module.css

@@ -21,7 +21,7 @@
 }
 
 .section {
-  margin-bottom: var(--spacer);
+  margin-top: calc(var(--spacer) * 1.5);
 }
 
 .section:last-child {