From ff0d7d20dfb667f0695fbdfa62406c2d2f6d427b Mon Sep 17 00:00:00 2001
From: Anthony Laibe <anthony@laibe.cc>
Date: Wed, 17 Oct 2018 13:24:57 +0100
Subject: [PATCH] Better format element of explorer

---
 embark-ui/src/components/Account.js     | 10 +++++++---
 embark-ui/src/components/Block.js       | 23 +++++++++++++++++++++--
 embark-ui/src/components/Description.js | 10 ++++++++++
 embark-ui/src/components/Logs.css       | 16 ----------------
 embark-ui/src/components/Transaction.js | 19 ++++++++++++-------
 5 files changed, 50 insertions(+), 28 deletions(-)
 create mode 100644 embark-ui/src/components/Description.js

diff --git a/embark-ui/src/components/Account.js b/embark-ui/src/components/Account.js
index 77cff7343..a8f6353b0 100644
--- a/embark-ui/src/components/Account.js
+++ b/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>
-      <p>Balance: {account.balance}</p>
-      <p>Tx count: {account.transactionCount}</p>
+      <h1>Account {account.address}</h1>
+      <dl class="row">
+        <Description label="Balance" value={account.balance} />
+        <Description label="Transaction count" value={account.transactionCount} />
+      </dl>
     </Col>
   </Row>
 );
diff --git a/embark-ui/src/components/Block.js b/embark-ui/src/components/Block.js
index 785dc1599..0ab326395 100644
--- a/embark-ui/src/components/Block.js
+++ b/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>
-      <p>Gas used: {block.gasUsed}</p>
+      <dl class="row">
+        <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>
 );
diff --git a/embark-ui/src/components/Description.js b/embark-ui/src/components/Description.js
new file mode 100644
index 000000000..9ba8cec4b
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/embark-ui/src/components/Logs.css b/embark-ui/src/components/Logs.css
index 7843e5c26..57c1333db 100644
--- a/embark-ui/src/components/Logs.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/embark-ui/src/components/Transaction.js b/embark-ui/src/components/Transaction.js
index fbcd70ed6..3a2e776ec 100644
--- a/embark-ui/src/components/Transaction.js
+++ b/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>
-      <p>From: {transaction.from}</p>
-      <p>To: {transaction.to}</p>
-      <p>Input: {transaction.input}</p>
-      <p>Gas: {transaction.gas}</p>
-      <p>Gas Price: {transaction.gasPrice}</p>
-      <p>Nonce: {transaction.nonce}</p>
+      <dl class="row">
+        <Description label="Block" value={<Link to={`/embark/explorer/blocks/${transaction.blockNumber}`}>{transaction.blockNumber}</Link>} />
+        <Description label="From" value={transaction.from} />
+        <Description label="To" value={transaction.to} />
+        <Description label="Value" value={`${transaction.value} Wei`}/>
+        <Description label="Input" value={transaction.input} />
+        <Description label="Gas" value={transaction.gas} />
+        <Description label="Gas price" value={`${transaction.gasPrice} Wei`} />
+        <Description label="Nonce" value={transaction.nonce} />
+      </dl>
     </Col>
   </Row>
 );