Add identicon

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",

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",

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

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>
 );

embark-ui/src/components/Block.js

@@ -1,13 +1,18 @@
 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>
+      <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} />
@@ -27,6 +32,8 @@ const Block = ({block}) => (
             <Description label="Extra data" value={block.extraData} />
             <Description label="Logs bloom" value={block.logsBloom} />
           </dl>
+        </CardBody>
+      </Card>
     </Col>
   </Row>
 );

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>
 );

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

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>
 );
 

embark-ui/src/components/Transaction.js

@@ -1,14 +1,19 @@
 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>
+      <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} />
@@ -19,6 +24,8 @@ const Transaction = ({transaction}) => (
             <Description label="Gas price" value={`${transaction.gasPrice} Wei`} />
             <Description label="Nonce" value={transaction.nonce} />
           </dl>
+        </CardBody>
+      </Card>
     </Col>
   </Row>
 );

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>
 );

embark-ui/src/index.css

@@ -17,7 +17,3 @@
 .text-wrap {
   word-wrap: break-word; 
 }
-
-.table {
-  background: #ffffff;
-}