Add identicon
This commit is contained in:
Anthony Laibe
Pascal Precht
parent
98fc1ab51e
commit
2c74c2aa30
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -16,8 +16,4 @@
|
|||
|
||||
.text-wrap {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.table {
|
||||
background: #ffffff;
|
||||
}
|
||||
Loading…
Reference in New Issue