Better format element of explorer

embark-ui/src/components/Account.js

@@ -2,12 +2,16 @@ import React from 'react';
 import {Row, Col} from 'reactstrap';
 import PropTypes from 'prop-types';
 
+import Description from './Description';
+
 const Account = ({account}) => (
   <Row>
     <Col>
-      <h1>{account.address}</h1>
+      <h1>Account {account.address}</h1>
-      <p>Balance: {account.balance}</p>
+      <dl class="row">
-      <p>Tx count: {account.transactionCount}</p>
+        <Description label="Balance" value={account.balance} />
+        <Description label="Transaction count" value={account.transactionCount} />
+      </dl>
     </Col>
   </Row>
 );

embark-ui/src/components/Block.js

@@ -2,12 +2,31 @@ import React from 'react';
 import {Row, Col} from 'reactstrap';
 import PropTypes from 'prop-types';
 
+import Description from './Description';
+
 const Block = ({block}) => (
   <Row>
     <Col>
       <h1>Block {block.number}</h1>
-      <p>Timestamp: {block.timestamp}</p>
+      <dl class="row">
-      <p>Gas used: {block.gasUsed}</p>
+        <Description label="Hash" value={block.hash} />
+        <Description label="Timestamp" value={block.timestamp} />
+        <Description label="Difficulty" value={block.difficulty} />
+        <Description label="Gas used" value={block.gasUsed} />
+        <Description label="Gas limit" value={block.gasLimit} />
+        <Description label="Miner" value={block.miner} />
+        <Description label="Mix hash" value={block.mixHash} />
+        <Description label="Nonce" value={block.nonce} />
+        <Description label="Parent hash" value={block.parentHash} />
+        <Description label="Transaction root" value={block.transactionsRoot} />
+        <Description label="Receipts root" value={block.receiptsRoot} />
+        <Description label="State root" value={block.stateRoot} />
+        <Description label="SHA3 uncles" value={block.sha3Uncles} />
+        <Description label="Size" value={block.size} />
+        <Description label="Total difficulty" value={block.totalDifficulty} />
+        <Description label="Extra data" value={block.extraData} />
+        <Description label="Logs bloom" value={block.logsBloom} />
+      </dl>
     </Col>
   </Row>
 );

embark-ui/src/components/Description.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const Description = ({label, value}) => (
+  <React.Fragment>
+    <dt class="col-sm-3">{label}</dt>
+    <dd class="col-sm-9 text-wrap">{value}</dd>
+  </React.Fragment>
+);
+
+export default Description

embark-ui/src/components/Logs.css

@@ -8,20 +8,4 @@
   border-radius: 8px;
   max-height: 350px;
   overflow: auto;
-}
-
-.logs .error {
-  color: #dc3546;
-}
-
-.logs .warn {
-  color: #fec107;
-}
-
-.logs .debug {
-  color: #b7c1cc;
-}
-
-.logs .trace {
-  color: #8f98a2;
 }

embark-ui/src/components/Transaction.js

@@ -3,17 +3,22 @@ import {Link} from 'react-router-dom';
 import {Row, Col} from 'reactstrap';
 import PropTypes from 'prop-types';
 
+import Description from './Description';
+
 const Transaction = ({transaction}) => (
   <Row>
     <Col>
       <h1>Transaction {transaction.hash}</h1>
-      <p>Block: <Link to={`/embark/explorer/blocks/${transaction.blockNumber}`}>{transaction.blockNumber}</Link></p>
+      <dl class="row">
-      <p>From: {transaction.from}</p>
+        <Description label="Block" value={<Link to={`/embark/explorer/blocks/${transaction.blockNumber}`}>{transaction.blockNumber}</Link>} />
-      <p>To: {transaction.to}</p>
+        <Description label="From" value={transaction.from} />
-      <p>Input: {transaction.input}</p>
+        <Description label="To" value={transaction.to} />
-      <p>Gas: {transaction.gas}</p>
+        <Description label="Value" value={`${transaction.value} Wei`}/>
-      <p>Gas Price: {transaction.gasPrice}</p>
+        <Description label="Input" value={transaction.input} />
-      <p>Nonce: {transaction.nonce}</p>
+        <Description label="Gas" value={transaction.gas} />
+        <Description label="Gas price" value={`${transaction.gasPrice} Wei`} />
+        <Description label="Nonce" value={transaction.nonce} />
+      </dl>
     </Col>
   </Row>
 );