status-im
/
embark-area-51
mirror of https://github.com/status-im/embark-area-51.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add identicon

This commit is contained in:
Anthony Laibe 2018-10-18 14:46:01 +01:00 committed by Pascal Precht
parent 98fc1ab51e
commit 2c74c2aa30
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
11 changed files with 181 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
embark-ui/package-lock.json generated
View File

@ -10143,6 +10143,14 @@
"pure-color": "^1.2.0" "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": { "react-bootstrap-typeahead": {
"version": "3.2.4", "version": "3.2.4",
"resolved": "https://registry.npmjs.org/react-bootstrap-typeahead/-/react-bootstrap-typeahead-3.2.4.tgz", "resolved": "https://registry.npmjs.org/react-bootstrap-typeahead/-/react-bootstrap-typeahead-3.2.4.tgz",

1
embark-ui/package.json
View File

@ -51,6 +51,7 @@
"qs": "^6.5.2", "qs": "^6.5.2",
"raf": "3.4.0", "raf": "3.4.0",
"react": "^16.4.2", "react": "^16.4.2",
"react-blockies": "^1.4.0",
"react-bootstrap-typeahead": "^3.2.4", "react-bootstrap-typeahead": "^3.2.4",
"react-copy-to-clipboard": "^5.0.1", "react-copy-to-clipboard": "^5.0.1",
"react-dev-utils": "^5.0.1", "react-dev-utils": "^5.0.1",

11
embark-ui/src/components/Account.js
View File

@ -1,17 +1,24 @@
import React from 'react'; import React from 'react';
import {Row, Col} from 'reactstrap'; import {Row, Col, Card, CardHeader, CardBody, CardTitle} from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Description from './Description'; import Description from './Description';
import CardTitleIdenticon from './CardTitleIdenticon';
const Account = ({account}) => ( const Account = ({account}) => (
<Row> <Row>
<Col> <Col>
<h1>Account {account.address}</h1> <Card>
<CardHeader>
<CardTitleIdenticon id={account.address}>Account {account.address}</CardTitleIdenticon>
</CardHeader>
<CardBody>
<dl class="row"> <dl class="row">
<Description label="Balance" value={account.balance} /> <Description label="Balance" value={account.balance} />
<Description label="Transaction count" value={account.transactionCount} /> <Description label="Transaction count" value={account.transactionCount} />
</dl> </dl>
</CardBody>
</Card>
</Col> </Col>
</Row> </Row>
); );

56
embark-ui/src/components/Accounts.js
View File

@ -1,36 +1,42 @@
import React from 'react'; 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 {Link} from 'react-router-dom';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import CardTitleIdenticon from './CardTitleIdenticon';
const Accounts = ({accounts}) => ( const Accounts = ({accounts}) => (
<Row> <Row>
<Col> <Col>
<h1>Accounts</h1> <h1>Accounts</h1>
<Table responsive className="text-nowrap"> {accounts.map(account => (
<thead> <Card>
<tr> <CardHeader>
<th>Address</th> <Link to={`/embark/explorer/accounts/${account.address}`}>
<th>Balance</th> <CardTitleIdenticon id={account.address}>Account {account.address}</CardTitleIdenticon>
<th>TX count</th> </Link>
<th>Index</th> </CardHeader>
</tr> <CardBody>
</thead> <Row>
<tbody> <Col>
{ <strong>Balance</strong>
accounts.map((account) => { <br/>
return ( {account.balance} Wei
<tr key={account.address}> </Col>
<td><Link to={`/embark/explorer/accounts/${account.address}`}>{account.address}</Link></td> <Col>
<td>{account.balance}</td> <strong>Tx Count</strong>
<td>{account.transactionCount}</td> <br/>
<td>{account.index}</td> {account.transactionCount}
</tr> </Col>
); <Col>
}) <strong>Index</strong>
} <br/>
</tbody> {account.index}
</Table> </Col>
</Row>
</CardBody>
</Card>
))}
</Col> </Col>
</Row> </Row>
); );

11
embark-ui/src/components/Block.js
View File

@ -1,13 +1,18 @@
import React from 'react'; import React from 'react';
import {Row, Col} from 'reactstrap'; import {Row, Col, Card, CardHeader, CardBody, CardTitle} from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Description from './Description'; import Description from './Description';
import CardTitleIdenticon from './CardTitleIdenticon';
const Block = ({block}) => ( const Block = ({block}) => (
<Row> <Row>
<Col> <Col>
<h1>Block {block.number}</h1> <Card>
<CardHeader>
<CardTitleIdenticon id={block.hash}>Block {block.number}</CardTitleIdenticon>
</CardHeader>
<CardBody>
<dl class="row"> <dl class="row">
<Description label="Hash" value={block.hash} /> <Description label="Hash" value={block.hash} />
<Description label="Timestamp" value={block.timestamp} /> <Description label="Timestamp" value={block.timestamp} />
@ -27,6 +32,8 @@ const Block = ({block}) => (
<Description label="Extra data" value={block.extraData} /> <Description label="Extra data" value={block.extraData} />
<Description label="Logs bloom" value={block.logsBloom} /> <Description label="Logs bloom" value={block.logsBloom} />
</dl> </dl>
</CardBody>
</Card>
</Col> </Col>
</Row> </Row>
); );

60
embark-ui/src/components/Blocks.js
View File

@ -1,37 +1,45 @@
import React from 'react'; import React from 'react';
import {Link} from "react-router-dom"; 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 PropTypes from 'prop-types';
import CardTitleIdenticon from './CardTitleIdenticon';
const Blocks = ({blocks}) => ( const Blocks = ({blocks}) => (
<Row> <Row>
<Col> <Col>
<h1>Blocks</h1> <h1>Blocks</h1>
<Table responsive className="text-nowrap"> {blocks.map(block => (
<thead> <Card>
<tr> <CardHeader>
<th>Number</th> <Link to={`/embark/explorer/blocks/${block.number}`}> <CardTitleIdenticon id={block.hash}>Block {block.number}</CardTitleIdenticon></Link>
<th>Mined On</th> </CardHeader>
<th>Gas Used</th> <CardBody>
<th>TX Count</th> <Row>
</tr> <Col>
</thead> <strong>Number</strong>
<tbody> <br/>
{ {block.number}
blocks.map((block) => { </Col>
return ( <Col>
<tr key={block.number}> <strong>Mined On</strong>
<td><Link to={`/embark/explorer/blocks/${block.number}`}>{block.number}</Link></td> <br/>
<td>{new Date(block.timestamp * 1000).toLocaleString()}</td> {new Date(block.timestamp * 1000).toLocaleString()}
<td>{block.gasUsed}</td> </Col>
<td>{block.transactions.length}</td> <Col>
</tr> <strong>Gas Used</strong>
); <br/>
}) {block.gasUsed}
} </Col>
</tbody> <Col>
</Table> <strong>TX Count</strong>
<br/>
{block.transactions.length}
</Col>
</Row>
</CardBody>
</Card>
))}
</Col> </Col>
</Row> </Row>
); );

9
embark-ui/src/components/CardTitleIdenticon.js Normal file
View File

@ -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

4
embark-ui/src/components/Description.js
View File

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

11
embark-ui/src/components/Transaction.js
View File

@ -1,14 +1,19 @@
import React from 'react'; import React from 'react';
import {Link} from 'react-router-dom'; 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 PropTypes from 'prop-types';
import Description from './Description'; import Description from './Description';
import CardTitleIdenticon from './CardTitleIdenticon';
const Transaction = ({transaction}) => ( const Transaction = ({transaction}) => (
<Row> <Row>
<Col> <Col>
<h1>Transaction {transaction.hash}</h1> <Card>
<CardHeader>
<CardTitleIdenticon id={transaction.hash}>Transaction {transaction.hash}</CardTitleIdenticon>
</CardHeader>
<CardBody>
<dl class="row"> <dl class="row">
<Description label="Block" value={<Link to={`/embark/explorer/blocks/${transaction.blockNumber}`}>{transaction.blockNumber}</Link>} /> <Description label="Block" value={<Link to={`/embark/explorer/blocks/${transaction.blockNumber}`}>{transaction.blockNumber}</Link>} />
<Description label="From" value={transaction.from} /> <Description label="From" value={transaction.from} />
@ -19,6 +24,8 @@ const Transaction = ({transaction}) => (
<Description label="Gas price" value={`${transaction.gasPrice} Wei`} /> <Description label="Gas price" value={`${transaction.gasPrice} Wei`} />
<Description label="Nonce" value={transaction.nonce} /> <Description label="Nonce" value={transaction.nonce} />
</dl> </dl>
</CardBody>
</Card>
</Col> </Col>
</Row> </Row>
); );

63
embark-ui/src/components/Transactions.js
View File

@ -1,38 +1,47 @@
import React from 'react'; import React from 'react';
import {Link} from "react-router-dom"; 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 PropTypes from 'prop-types';
import CardTitleIdenticon from './CardTitleIdenticon';
const Transactions = ({transactions}) => ( const Transactions = ({transactions}) => (
<Row> <Row>
<Col> <Col>
<h1>Transactions</h1> <h1>Transactions</h1>
<Table responsive className="text-nowrap"> {transactions.map(transaction => (
<thead> <Card>
<tr> <CardHeader>
<th>Hash</th> <Link to={`/embark/explorer/transactions/${transaction.hash}`}>
<th>Block Number</th> <CardTitleIdenticon id={transaction.hash}>Transaction {transaction.hash}</CardTitleIdenticon>
<th>From</th> </Link>
<th>To</th> </CardHeader>
<th>Type</th> <CardBody>
</tr> <Row>
</thead> <Col>
<tbody> <strong>Block number</strong>
{ <br/>
transactions.map((transaction) => { {transaction.blockNumber}
return ( </Col>
<tr key={transaction.hash}> <Col>
<td><Link to={`/embark/explorer/transactions/${transaction.hash}`}>{transaction.hash}</Link></td> <strong>From</strong>
<td>{transaction.blockNumber}</td> <br/>
<td>{transaction.from}</td> {transaction.from}
<td>{transaction.to}</td> </Col>
<td>{transaction.to ? "Contract Call" : "Contract Creation"}</td> <Col>
</tr> <strong>To</strong>
); <br/>
}) {transaction.to}
} </Col>
</tbody> <Col>
</Table> <strong>Type</strong>
<br/>
{transaction.to ? "Contract Call" : "Contract Creation"}
</Col>
</Row>
</CardBody>
</Card>
))}
</Col> </Col>
</Row> </Row>
); );

4
embark-ui/src/index.css
View File

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