From 2c74c2aa30b30093273645cdbc1c1c7ccf149133 Mon Sep 17 00:00:00 2001
From: Anthony Laibe <anthony@laibe.cc>
Date: Thu, 18 Oct 2018 14:46:01 +0100
Subject: [PATCH] Add identicon

---
 embark-ui/package-lock.json                   |  8 +++
 embark-ui/package.json                        |  1 +
 embark-ui/src/components/Account.js           | 19 ++++--
 embark-ui/src/components/Accounts.js          | 56 +++++++++--------
 embark-ui/src/components/Block.js             | 49 ++++++++-------
 embark-ui/src/components/Blocks.js            | 60 ++++++++++--------
 .../src/components/CardTitleIdenticon.js      |  9 +++
 embark-ui/src/components/Description.js       |  4 +-
 embark-ui/src/components/Transaction.js       | 31 +++++----
 embark-ui/src/components/Transactions.js      | 63 +++++++++++--------
 embark-ui/src/index.css                       |  4 --
 11 files changed, 181 insertions(+), 123 deletions(-)
 create mode 100644 embark-ui/src/components/CardTitleIdenticon.js

diff --git a/embark-ui/package-lock.json b/embark-ui/package-lock.json
index 2acd79381..a1a53b974 100644
--- a/embark-ui/package-lock.json
+++ b/embark-ui/package-lock.json
@@ -10143,6 +10143,14 @@
         "pure-color": "^1.2.0"
       }
     },
+    "react-blockies": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/react-blockies/-/react-blockies-1.4.0.tgz",
+      "integrity": "sha512-AQe8oLnb5TabDrIJJ4XzoH2djapuLtEockB+Fcx/5hLAFzFmbsRsv8tJL3p+LOb3gK0hLJlJfd1JMtjSAJpcNA==",
+      "requires": {
+        "prop-types": "^15.5.10"
+      }
+    },
     "react-bootstrap-typeahead": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/react-bootstrap-typeahead/-/react-bootstrap-typeahead-3.2.4.tgz",
diff --git a/embark-ui/package.json b/embark-ui/package.json
index cd3f73937..cd6330d7b 100644
--- a/embark-ui/package.json
+++ b/embark-ui/package.json
@@ -51,6 +51,7 @@
     "qs": "^6.5.2",
     "raf": "3.4.0",
     "react": "^16.4.2",
+    "react-blockies": "^1.4.0",
     "react-bootstrap-typeahead": "^3.2.4",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dev-utils": "^5.0.1",
diff --git a/embark-ui/src/components/Account.js b/embark-ui/src/components/Account.js
index a8f6353b0..14496459f 100644
--- a/embark-ui/src/components/Account.js
+++ b/embark-ui/src/components/Account.js
@@ -1,17 +1,24 @@
 import React from 'react';
-import {Row, Col} from 'reactstrap';
+import {Row, Col, Card, CardHeader, CardBody, CardTitle} from 'reactstrap';
 import PropTypes from 'prop-types';
 
 import Description from './Description';
+import CardTitleIdenticon from './CardTitleIdenticon';
 
 const Account = ({account}) => (
   <Row>
     <Col>
-      <h1>Account {account.address}</h1>
-      <dl class="row">
-        <Description label="Balance" value={account.balance} />
-        <Description label="Transaction count" value={account.transactionCount} />
-      </dl>
+      <Card>
+        <CardHeader>
+          <CardTitleIdenticon id={account.address}>Account {account.address}</CardTitleIdenticon>
+        </CardHeader>
+        <CardBody>
+          <dl class="row">
+            <Description label="Balance" value={account.balance} />
+            <Description label="Transaction count" value={account.transactionCount} />
+          </dl>
+        </CardBody>
+      </Card>
     </Col>
   </Row>
 );
diff --git a/embark-ui/src/components/Accounts.js b/embark-ui/src/components/Accounts.js
index b02b1aa85..e7c0cfa1c 100644
--- a/embark-ui/src/components/Accounts.js
+++ b/embark-ui/src/components/Accounts.js
@@ -1,36 +1,42 @@
 import React from 'react';
-import {Row, Col, Table} from 'reactstrap';
+import {Row, Col, Card, CardHeader, CardTitle, CardBody} from 'reactstrap';
 import {Link} from 'react-router-dom';
 import PropTypes from 'prop-types';
 
+import CardTitleIdenticon from './CardTitleIdenticon';
+
 const Accounts = ({accounts}) => (
   <Row>
     <Col>
       <h1>Accounts</h1>
-      <Table responsive className="text-nowrap">
-        <thead>
-          <tr>
-            <th>Address</th>
-            <th>Balance</th>
-            <th>TX count</th>
-            <th>Index</th>
-          </tr>
-        </thead>
-        <tbody>
-          {
-            accounts.map((account) => {
-              return (
-                <tr key={account.address}>
-                  <td><Link to={`/embark/explorer/accounts/${account.address}`}>{account.address}</Link></td>
-                  <td>{account.balance}</td>
-                  <td>{account.transactionCount}</td>
-                  <td>{account.index}</td>
-                </tr>
-              );
-            })
-          }
-        </tbody>
-      </Table>
+      {accounts.map(account => (
+        <Card>
+          <CardHeader>
+            <Link to={`/embark/explorer/accounts/${account.address}`}>
+              <CardTitleIdenticon id={account.address}>Account {account.address}</CardTitleIdenticon>
+            </Link>
+          </CardHeader>
+          <CardBody>
+            <Row>
+              <Col>
+                <strong>Balance</strong>
+                <br/>
+                {account.balance} Wei
+              </Col>
+              <Col>
+                <strong>Tx Count</strong>
+                <br/>
+                {account.transactionCount}
+              </Col>
+              <Col>
+                <strong>Index</strong>
+                <br/>
+                {account.index}
+              </Col>
+            </Row>
+          </CardBody>
+        </Card>
+      ))}
     </Col>
   </Row>
 );
diff --git a/embark-ui/src/components/Block.js b/embark-ui/src/components/Block.js
index 0ab326395..0f03ce4f8 100644
--- a/embark-ui/src/components/Block.js
+++ b/embark-ui/src/components/Block.js
@@ -1,32 +1,39 @@
 import React from 'react';
-import {Row, Col} from 'reactstrap';
+import {Row, Col, Card, CardHeader, CardBody, CardTitle} from 'reactstrap';
 import PropTypes from 'prop-types';
 
 import Description from './Description';
+import CardTitleIdenticon from './CardTitleIdenticon';
 
 const Block = ({block}) => (
   <Row>
     <Col>
-      <h1>Block {block.number}</h1>
-      <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>
+      <Card>
+        <CardHeader>
+          <CardTitleIdenticon id={block.hash}>Block {block.number}</CardTitleIdenticon>
+        </CardHeader>
+        <CardBody>
+          <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>
+        </CardBody>
+      </Card>
     </Col>
   </Row>
 );
diff --git a/embark-ui/src/components/Blocks.js b/embark-ui/src/components/Blocks.js
index 72f850772..74d252486 100644
--- a/embark-ui/src/components/Blocks.js
+++ b/embark-ui/src/components/Blocks.js
@@ -1,37 +1,45 @@
 import React from 'react';
 import {Link} from "react-router-dom";
-import {Row, Col, Table} from 'reactstrap';
-
+import {Row, Col, Card, CardHeader, CardTitle, CardBody} from 'reactstrap';
 import PropTypes from 'prop-types';
 
+import CardTitleIdenticon from './CardTitleIdenticon';
+
 const Blocks = ({blocks}) => (
   <Row>
     <Col>
       <h1>Blocks</h1>
-      <Table responsive className="text-nowrap">
-        <thead>
-          <tr>
-            <th>Number</th>
-            <th>Mined On</th>
-            <th>Gas Used</th>
-            <th>TX Count</th>
-          </tr>
-        </thead>  
-        <tbody>
-          {
-            blocks.map((block) => {
-              return (
-                <tr key={block.number}>
-                  <td><Link to={`/embark/explorer/blocks/${block.number}`}>{block.number}</Link></td>
-                  <td>{new Date(block.timestamp * 1000).toLocaleString()}</td>
-                  <td>{block.gasUsed}</td>
-                  <td>{block.transactions.length}</td>
-                </tr>
-              );
-            })
-          }
-        </tbody>
-      </Table>
+      {blocks.map(block => (
+        <Card>
+          <CardHeader>
+            <Link to={`/embark/explorer/blocks/${block.number}`}> <CardTitleIdenticon id={block.hash}>Block {block.number}</CardTitleIdenticon></Link>
+          </CardHeader>
+          <CardBody>
+            <Row>
+              <Col>
+                <strong>Number</strong>
+                <br/>
+                {block.number}
+              </Col>
+              <Col>
+                <strong>Mined On</strong>
+                <br/>
+                {new Date(block.timestamp * 1000).toLocaleString()}
+              </Col>
+              <Col>
+                <strong>Gas Used</strong>
+                <br/>
+                {block.gasUsed}
+              </Col>
+              <Col>
+                <strong>TX Count</strong>
+                <br/>
+                {block.transactions.length}
+              </Col>
+            </Row>
+          </CardBody>
+        </Card>
+      ))}
     </Col>
   </Row>
 );
diff --git a/embark-ui/src/components/CardTitleIdenticon.js b/embark-ui/src/components/CardTitleIdenticon.js
new file mode 100644
index 000000000..8d3bb850a
--- /dev/null
+++ b/embark-ui/src/components/CardTitleIdenticon.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import {CardTitle} from 'reactstrap';
+import Blockies from 'react-blockies';
+
+const CardTitleIdenticon = ({id, children}) => (
+  <CardTitle><Blockies seed={id}/><span className="ml-2 align-top">{children}</span></CardTitle>
+)
+
+export default CardTitleIdenticon
\ No newline at end of file
diff --git a/embark-ui/src/components/Description.js b/embark-ui/src/components/Description.js
index 9ba8cec4b..36953f2dc 100644
--- a/embark-ui/src/components/Description.js
+++ b/embark-ui/src/components/Description.js
@@ -2,8 +2,8 @@ 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>
+    <dt className="col-sm-3">{label}</dt>
+    <dd className="col-sm-9 text-wrap">{value}</dd>
   </React.Fragment>
 );
 
diff --git a/embark-ui/src/components/Transaction.js b/embark-ui/src/components/Transaction.js
index 3a2e776ec..f4909d2ba 100644
--- a/embark-ui/src/components/Transaction.js
+++ b/embark-ui/src/components/Transaction.js
@@ -1,24 +1,31 @@
 import React from 'react';
 import {Link} from 'react-router-dom';
-import {Row, Col} from 'reactstrap';
+import {Row, Col, Card, CardHeader, CardBody, CardTitle} from 'reactstrap';
 import PropTypes from 'prop-types';
 
 import Description from './Description';
+import CardTitleIdenticon from './CardTitleIdenticon';
 
 const Transaction = ({transaction}) => (
   <Row>
     <Col>
-      <h1>Transaction {transaction.hash}</h1>
-      <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>
+      <Card>
+        <CardHeader>
+          <CardTitleIdenticon id={transaction.hash}>Transaction {transaction.hash}</CardTitleIdenticon>
+        </CardHeader>
+        <CardBody>
+          <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>
+        </CardBody>
+      </Card>
     </Col>
   </Row>
 );
diff --git a/embark-ui/src/components/Transactions.js b/embark-ui/src/components/Transactions.js
index 6c40440e7..d80d86bd8 100644
--- a/embark-ui/src/components/Transactions.js
+++ b/embark-ui/src/components/Transactions.js
@@ -1,38 +1,47 @@
 import React from 'react';
 import {Link} from "react-router-dom";
-import {Row, Col, Table} from 'reactstrap';
+import {Row, Col, Card, CardHeader, CardTitle, CardBody} from 'reactstrap';
 import PropTypes from 'prop-types';
 
+import CardTitleIdenticon from './CardTitleIdenticon';
+
 const Transactions = ({transactions}) => (
   <Row>
     <Col>
       <h1>Transactions</h1>
-      <Table responsive className="text-nowrap">
-        <thead>
-          <tr>
-            <th>Hash</th>
-            <th>Block Number</th>
-            <th>From</th>
-            <th>To</th>
-            <th>Type</th>
-          </tr>
-        </thead>
-      <tbody>
-        {
-          transactions.map((transaction) => {
-            return (
-              <tr key={transaction.hash}>
-                <td><Link to={`/embark/explorer/transactions/${transaction.hash}`}>{transaction.hash}</Link></td>
-                <td>{transaction.blockNumber}</td>
-                <td>{transaction.from}</td>
-                <td>{transaction.to}</td>
-                <td>{transaction.to ? "Contract Call" : "Contract Creation"}</td>
-              </tr>
-            );
-          })
-        }
-      </tbody>
-    </Table>
+      {transactions.map(transaction => (
+        <Card>
+          <CardHeader>
+            <Link to={`/embark/explorer/transactions/${transaction.hash}`}>
+              <CardTitleIdenticon id={transaction.hash}>Transaction {transaction.hash}</CardTitleIdenticon>
+            </Link>
+          </CardHeader>
+          <CardBody>
+            <Row>
+              <Col>
+                <strong>Block number</strong>
+                <br/>
+                {transaction.blockNumber}
+              </Col>
+              <Col>
+                <strong>From</strong>
+                <br/>
+                {transaction.from}
+              </Col>
+              <Col>
+                <strong>To</strong>
+                <br/>
+                {transaction.to}
+              </Col>
+              <Col>
+                <strong>Type</strong>
+                <br/>
+                {transaction.to ? "Contract Call" : "Contract Creation"}
+              </Col>
+            </Row>
+          </CardBody>
+        </Card>
+      ))}
     </Col>
   </Row>
 );
diff --git a/embark-ui/src/index.css b/embark-ui/src/index.css
index 85d826733..df15d2d81 100644
--- a/embark-ui/src/index.css
+++ b/embark-ui/src/index.css
@@ -16,8 +16,4 @@
 
 .text-wrap {
   word-wrap: break-word; 
-}
-
-.table {
-  background: #ffffff;
 }
\ No newline at end of file