From 65c985bef3a6d2ffa1523f3699f941940b79fafa Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Sat, 29 Oct 2016 13:04:47 +0200 Subject: [PATCH] Gavcoin event display updates (#2956) * Mapp all known addresses * Display timestamp in event log * Shorten addresses * Display "Pending" timestamps as well * Pending/Loading with empty timestamp --- .../dapps/gavcoin/Application/application.js | 12 ++--- js/src/dapps/gavcoin/Events/Event/event.js | 44 +++++++++++++++---- js/src/dapps/gavcoin/Events/events.css | 9 ++-- js/src/dapps/gavcoin/Events/events.js | 10 ++--- js/src/dapps/gavcoin/format/index.js | 4 ++ 5 files changed, 55 insertions(+), 24 deletions(-) diff --git a/js/src/dapps/gavcoin/Application/application.js b/js/src/dapps/gavcoin/Application/application.js index 1ae5d870a..c5eda9db8 100644 --- a/js/src/dapps/gavcoin/Application/application.js +++ b/js/src/dapps/gavcoin/Application/application.js @@ -53,6 +53,7 @@ export default class Application extends Component { action: null, address: null, accounts: [], + accountsInfo: {}, blockNumber: new BigNumber(-1), ethBalance: new BigNumber(0), gavBalance: new BigNumber(0), @@ -68,7 +69,7 @@ export default class Application extends Component { } render () { - const { accounts, address, blockNumber, gavBalance, loading, price, remaining, totalSupply } = this.state; + const { accounts, accountsInfo, address, blockNumber, gavBalance, loading, price, remaining, totalSupply } = this.state; if (loading) { return ( @@ -93,7 +94,7 @@ export default class Application extends Component { gavBalance={ gavBalance } onAction={ this.onAction } /> + accountsInfo={ accountsInfo } /> ); } @@ -216,8 +217,8 @@ export default class Application extends Component { api.personal.accountsInfo() ]); }) - .then(([address, addresses, infos]) => { - infos = infos || {}; + .then(([address, addresses, accountsInfo]) => { + accountsInfo = accountsInfo || {}; console.log(`gavcoin was found at ${address}`); const contract = api.newContract(abis.gavcoin, address); @@ -226,9 +227,10 @@ export default class Application extends Component { loading: false, address, contract, + accountsInfo, instance: contract.instance, accounts: addresses.map((address) => { - const info = infos[address] || {}; + const info = accountsInfo[address] || {}; return { address, diff --git a/js/src/dapps/gavcoin/Events/Event/event.js b/js/src/dapps/gavcoin/Events/Event/event.js index 0b4094ac0..c068454f0 100644 --- a/js/src/dapps/gavcoin/Events/Event/event.js +++ b/js/src/dapps/gavcoin/Events/Event/event.js @@ -14,10 +14,11 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . +import moment from 'moment'; import React, { Component, PropTypes } from 'react'; import IdentityIcon from '../../IdentityIcon'; -import { formatBlockNumber, formatCoins, formatEth } from '../../format'; +import { formatCoins, formatEth, formatHash } from '../../format'; import styles from '../events.css'; @@ -27,7 +28,8 @@ const EMPTY_COLUMN = ( export default class Event extends Component { static contextTypes = { - accounts: PropTypes.array.isRequired + accountsInfo: PropTypes.object.isRequired, + api: PropTypes.object.isRequired } static propTypes = { @@ -38,14 +40,23 @@ export default class Event extends Component { toAddress: PropTypes.string } + state = { + block: null + } + + componentDidMount () { + this.loadBlock(); + } + render () { const { event, fromAddress, toAddress, price, value } = this.props; - const { blockNumber, state, type } = event; + const { block } = this.state; + const { state, type } = event; const cls = `${styles.event} ${styles[state]} ${styles[type.toLowerCase()]}`; return ( - { this.renderBlockNumber(blockNumber) } + { this.renderTimestamp(block) } { this.renderType(type) } { this.renderValue(value) } { this.renderPrice(price) } @@ -55,10 +66,10 @@ export default class Event extends Component { ); } - renderBlockNumber (blockNumber) { + renderTimestamp (block) { return ( - { formatBlockNumber(blockNumber) } + { !block ? ' ' : moment(block.timestamp).fromNow() } ); } @@ -77,8 +88,8 @@ export default class Event extends Component { } renderAddressName (address) { - const { accounts } = this.context; - const account = accounts.find((_account) => _account.address === address); + const { accountsInfo } = this.context; + const account = accountsInfo[address]; if (account && account.name) { return ( @@ -90,7 +101,7 @@ export default class Event extends Component { return (
- { address } + { formatHash(address) }
); } @@ -126,4 +137,19 @@ export default class Event extends Component { ); } + + loadBlock () { + const { api } = this.context; + const { event } = this.props; + + if (!event || !event.blockNumber || event.blockNumber.eq(0)) { + return; + } + + api.eth + .getBlockByNumber(event.blockNumber) + .then((block) => { + this.setState({ block }); + }); + } } diff --git a/js/src/dapps/gavcoin/Events/events.css b/js/src/dapps/gavcoin/Events/events.css index 9be9b37af..cf9184744 100644 --- a/js/src/dapps/gavcoin/Events/events.css +++ b/js/src/dapps/gavcoin/Events/events.css @@ -16,18 +16,20 @@ */ .events { padding: 4em 2em; + text-align: center; } .list { - width: 100%; + margin: 0 auto; border: none; border-spacing: 0; + text-align: left; } .list td { vertical-align: top; - padding: 4px 0.5em; - max-height: 32px; + padding: 0.25em 1em; + max-height: 1.5em; } .event { @@ -38,7 +40,6 @@ .blocknumber, .ethvalue, .gavvalue { - font-family: 'Roboto Mono', monospace; } .blocknumber, diff --git a/js/src/dapps/gavcoin/Events/events.js b/js/src/dapps/gavcoin/Events/events.js index ba71d6541..97dac30bb 100644 --- a/js/src/dapps/gavcoin/Events/events.js +++ b/js/src/dapps/gavcoin/Events/events.js @@ -27,7 +27,7 @@ import styles from './events.css'; export default class Events extends Component { static childContextTypes = { - accounts: PropTypes.array + accountsInfo: PropTypes.object } static contextTypes = { @@ -36,7 +36,7 @@ export default class Events extends Component { } static propTypes = { - accounts: PropTypes.array + accountsInfo: PropTypes.object.isRequired } state = { @@ -84,11 +84,9 @@ export default class Events extends Component { } getChildContext () { - const { accounts } = this.props; + const { accountsInfo } = this.props; - return { - accounts - }; + return { accountsInfo }; } setupFilters () { diff --git a/js/src/dapps/gavcoin/format/index.js b/js/src/dapps/gavcoin/format/index.js index 5e32012d0..ee554bb60 100644 --- a/js/src/dapps/gavcoin/format/index.js +++ b/js/src/dapps/gavcoin/format/index.js @@ -50,3 +50,7 @@ export function formatCoins (amount, decimals = 6) { export function formatEth (eth, decimals = 3) { return api.util.fromWei(eth).toFormat(decimals); } + +export function formatHash (hash) { + return `${hash.substr(0, 10)}...${hash.substr(-8)}`; +}