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

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 } />
         <Events
-          accounts={ accounts } />
+          accountsInfo={ accountsInfo } />
       </div>
     );
   }
@@ -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,

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 <http://www.gnu.org/licenses/>.
 
+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 (
       <tr className={ cls }>
-        { 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 (
       <td className={ styles.blocknumber }>
-        { formatBlockNumber(blockNumber) }
+        { !block ? ' ' : moment(block.timestamp).fromNow() }
       </td>
     );
   }
@@ -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 (
       <div className={ styles.address }>
-        { address }
+        { formatHash(address) }
       </div>
     );
   }
@@ -126,4 +137,19 @@ export default class Event extends Component {
       </td>
     );
   }
+
+  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 });
+      });
+  }
 }

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,

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 () {

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)}`;
+}