From fcc8bc28968e228e1ac0e1dce4eb9e7949e5a619 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 30 Sep 2020 18:16:47 +0200 Subject: [PATCH] table styling --- package-lock.json | 214 +++++++++++++++++- package.json | 4 +- .../pages/History/PoolTransactions.module.css | 10 + .../pages/History/PoolTransactions.tsx | 19 +- src/components/pages/History/index.module.css | 2 +- 5 files changed, 234 insertions(+), 15 deletions(-) create mode 100644 src/components/pages/History/PoolTransactions.module.css diff --git a/package-lock.json b/package-lock.json index 228ee0ad6..c644be2b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3387,9 +3387,9 @@ "integrity": "sha512-0+Tp6UdoDTBJZp4yX3kkSrV+CcOS/hJ3SJ4HuWiL5FE5Nlj3JCeV86iuWPkFuXzIdgri00DaGvQhP58knzJ2Uw==" }, "@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==", + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.4.0.tgz", + "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", - "resolved": "https://registry.npmjs.org/formik/-/formik-2.1.5.tgz", - "integrity": "sha512-bWpo3PiqVDYslvrRjTq0Isrm0mFXHiO33D8MS6t6dWcqSFGeYF52nlpCM2xwOJ6tRVRznDkL+zz/iHPL4LDuvQ==", + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/formik/-/formik-2.1.6.tgz", + "integrity": "sha512-m9DcxlZw/58p4xuhH3dzUzQWaC4dig0RKX7yNQOJt4VRhXn7p+YRrs3o17r3YwzvOLua3zC53VMbfupLsDwO5w==", "requires": { "deepmerge": "^2.1.1", "hoist-non-react-statics": "^3.3.0", diff --git a/package.json b/package.json index 02b7ef0bf..c848639d0 100644 --- a/package.json +++ b/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", diff --git a/src/components/pages/History/PoolTransactions.module.css b/src/components/pages/History/PoolTransactions.module.css new file mode 100644 index 000000000..606b56345 --- /dev/null +++ b/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); +} diff --git a/src/components/pages/History/PoolTransactions.tsx b/src/components/pages/History/PoolTransactions.tsx index 1da27c429..623fc45c3 100644 --- a/src/components/pages/History/PoolTransactions.tsx +++ b/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) - setLogs(logs) + const logs = await ocean.pool.getAllPoolLogs( + '0xe08A1dAe983BC701D05E492DB80e0144f8f4b909' + ) + // limit to 20 latest transactions for now + setLogs(logs.slice(0, 19)) } getLogs() }, [ocean, accountId]) return (
- - 
-        {JSON.stringify(logs, null, 2)}
-
+
) } diff --git a/src/components/pages/History/index.module.css b/src/components/pages/History/index.module.css index 6a2b60f8a..31ae95eeb 100644 --- a/src/components/pages/History/index.module.css +++ b/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 {