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

Merge pull request #153 from status-im/restyle-explorer 

Restyle explorer
This commit is contained in:
Iuri Matias 2018-10-24 14:13:11 -04:00 committed by GitHub
parent 1862848105 991066a1f5
commit 7175bc506c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 135 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,32 +8,34 @@ import CardTitleIdenticon from './CardTitleIdenticon';
const Accounts = ({accounts}) => (
<Row>
<Col>
<h1>Accounts</h1>
{accounts.map(account => (
<Card key={account.address}>
<CardHeader>
<Card>
<CardHeader>
<h2>Accounts</h2>
</CardHeader>
<CardBody>
{accounts.map(account => (
<div className="explorer-row border-top" key={account.address}>
<CardTitleIdenticon id={account.address}>Account&nbsp;
<Link to={`/embark/explorer/accounts/${account.address}`}>{account.address}</Link>
</CardTitleIdenticon>
</CardHeader>
<CardBody>
<Row>
<Col>
<strong>Balance</strong>
<div>{account.balance} Ether</div>
</Col>
<Col>
<strong>Tx Count</strong>
<div>{account.transactionCount}</div>
</Col>
<Col>
<strong>Index</strong>
<div>{account.index}</div>
</Col>
</Row>
</CardBody>
</Card>
))}
<Row>
<Col>
<strong>Balance</strong>
<div>{account.balance} Ether</div>
</Col>
<Col>
<strong>Tx Count</strong>
<div>{account.transactionCount}</div>
</Col>
<Col>
<strong>Index</strong>
<div>{account.index}</div>
</Col>
</Row>
</div>
))}
</CardBody>
</Card>
</Col>
</Row>
);

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

@ -4,48 +4,50 @@ import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
import PropTypes from 'prop-types';
import CardTitleIdenticon from './CardTitleIdenticon';
import LoadMore from "./LoadMore";
const Blocks = ({blocks}) => (
const Blocks = ({blocks, showLoadMore, loadMore}) => (
<Row>
<Col>
<h1>Blocks</h1>
{blocks.map(block => (
<Card key={block.number}>
<CardHeader>
<CardTitleIdenticon id={block.hash}>Block&nbsp;
<Link to={`/embark/explorer/blocks/${block.number}`}>
{block.number}
</Link>
</CardTitleIdenticon>
</CardHeader>
<CardBody>
<Row>
<Col>
<strong>Number</strong>
<div>{block.number}</div>
</Col>
<Col>
<strong>Mined On</strong>
<div>{new Date(block.timestamp * 1000).toLocaleString()}</div>
</Col>
<Col>
<strong>Gas Used</strong>
<div>{block.gasUsed}</div>
</Col>
<Col>
<strong>TX Count</strong>
<div>{block.transactions.length}</div>
</Col>
</Row>
</CardBody>
</Card>
))}
<Card>
<CardHeader>
<h2>Blocks</h2>
</CardHeader>
<CardBody>
{blocks.map(block => (
<div className="explorer-row border-top" key={block.number}>
<CardTitleIdenticon id={block.hash}>Block&nbsp;
<Link to={`/embark/explorer/blocks/${block.number}`}>
{block.number}
</Link>
</CardTitleIdenticon>
<Row>
<Col>
<strong>Mined On</strong>
<div>{new Date(block.timestamp * 1000).toLocaleString()}</div>
</Col>
<Col>
<strong>Gas Used</strong>
<div>{block.gasUsed}</div>
</Col>
<Col>
<strong>TX Count</strong>
<div>{block.transactions.length}</div>
</Col>
</Row>
</div>
))}
{showLoadMore && <LoadMore loadMore={() => loadMore()}/>}
</CardBody>
</Card>
</Col>
</Row>
);
Blocks.propTypes = {
blocks: PropTypes.arrayOf(PropTypes.object)
blocks: PropTypes.arrayOf(PropTypes.object),
showLoadMore: PropTypes.bool,
loadMore: PropTypes.func
};
export default Blocks;

17
embark-ui/src/components/CardTitleIdenticon.js
View File

@ -1,9 +1,20 @@
import PropTypes from "prop-types";
import React from 'react';
import {CardTitle} from 'reactstrap';
import Blockies from 'react-blockies';
const CardTitleIdenticon = ({id, children}) => (
<CardTitle><Blockies seed={id} className="rounded"/><span className="ml-2 align-top">{children}</span></CardTitle>
)
<CardTitle>
<Blockies seed={id} className="rounded"/><span className="ml-2 align-top text-truncate">{children}</span>
</CardTitle>
);
export default CardTitleIdenticon
CardTitleIdenticon.propTypes = {
id: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.object,
PropTypes.array
])
};
export default CardTitleIdenticon;

14
embark-ui/src/components/Explorer.css Normal file
View File

@ -0,0 +1,14 @@
.explorer-row {
border-top-width: 0 !important; /*Bootstrap uses important, so we need to override it*/
}
.explorer-row + .explorer-row {
margin-top: 5px;
padding-top: 20px;
border-top-width: 1px !important;
}
.explorer-row .text-truncate {
width: 90%;
display: inline-block;
}

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

@ -8,9 +8,11 @@ import AccountsContainer from '../containers/AccountsContainer';
import BlocksContainer from '../containers/BlocksContainer';
import TransactionsContainer from '../containers/TransactionsContainer';
import './Explorer.css';
const ExplorerDashboardLayout = () => (
<React.Fragment>
<Row>
<Row className="mt-4">
<Col>
<AccountsContainer />
</Col>

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

@ -4,48 +4,54 @@ import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
import PropTypes from 'prop-types';
import CardTitleIdenticon from './CardTitleIdenticon';
import LoadMore from "./LoadMore";
const Transactions = ({transactions}) => (
const Transactions = ({transactions, showLoadMore, loadMore}) => (
<Row>
<Col>
<h1>Transactions</h1>
{transactions.map(transaction => (
<Card key={transaction.hash}>
<CardHeader>
<CardTitleIdenticon id={transaction.hash}>Transaction&nbsp;
<Link to={`/embark/explorer/transactions/${transaction.hash}`}>
{transaction.hash}
</Link>
</CardTitleIdenticon>
</CardHeader>
<CardBody>
<Row>
<Col>
<strong>Block number</strong>
<div>{transaction.blockNumber}</div>
</Col>
<Col>
<strong>From</strong>
<div>{transaction.from}</div>
</Col>
<Col>
<strong>To</strong>
<div>{transaction.to}</div>
</Col>
<Col>
<strong>Type</strong>
<div>{transaction.to ? "Contract Call" : "Contract Creation"}</div>
</Col>
</Row>
</CardBody>
</Card>
))}
<Card>
<CardHeader>
<h2>Transactions</h2>
</CardHeader>
<CardBody>
{transactions.map(transaction => (
<div className="explorer-row border-top" key={transaction.hash}>
<CardTitleIdenticon id={transaction.hash}>Transaction&nbsp;
<Link to={`/embark/explorer/transactions/${transaction.hash}`}>
{transaction.hash}
</Link>
</CardTitleIdenticon>
<Row>
<Col md={6}>
<strong>Block number</strong>
<div>{transaction.blockNumber}</div>
</Col>
<Col md={6}>
<strong>From</strong>
<div>{transaction.from}</div>
</Col>
<Col md={6}>
<strong>To</strong>
<div>{transaction.to}</div>
</Col>
<Col md={6}>
<strong>Type</strong>
<div>{transaction.to ? "Contract Call" : "Contract Creation"}</div>
</Col>
</Row>
</div>
))}
{showLoadMore && <LoadMore loadMore={() => loadMore()}/>}
</CardBody>
</Card>
</Col>
</Row>
);
Transactions.propTypes = {
transactions: PropTypes.arrayOf(PropTypes.object)
transactions: PropTypes.arrayOf(PropTypes.object),
showLoadMore: PropTypes.bool,
loadMore: PropTypes.func
};
export default Transactions;

4
embark-ui/src/containers/BlocksContainer.js
View File

@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
import {blocks as blocksAction, initBlockHeader, stopBlockHeader} from '../actions';
import Blocks from '../components/Blocks';
import DataWrapper from "../components/DataWrapper";
import LoadMore from "../components/LoadMore";
import {getBlocks} from "../reducers/selectors";
class BlocksContainer extends Component {
@ -34,9 +33,8 @@ class BlocksContainer extends Component {
return (
<React.Fragment>
<DataWrapper shouldRender={this.props.blocks.length > 0} {...this.props} render={({blocks}) => (
<Blocks blocks={blocks} />
<Blocks blocks={blocks} showLoadMore={(this.loadMoreFrom() >= 0)} loadMore={() => this.loadMore()} />
)} />
{(this.loadMoreFrom() >= 0) ? <LoadMore loadMore={() => this.loadMore()} /> : <React.Fragment />}
</React.Fragment>
);
}

5
embark-ui/src/containers/TransactionsContainer.js
View File

@ -3,7 +3,6 @@ import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {transactions as transactionsAction, initBlockHeader, stopBlockHeader} from '../actions';
import LoadMore from "../components/LoadMore";
import Transactions from '../components/Transactions';
import DataWrapper from "../components/DataWrapper";
import {getTransactions} from "../reducers/selectors";
@ -34,9 +33,9 @@ class TransactionsContainer extends Component {
return (
<React.Fragment>
<DataWrapper shouldRender={this.props.transactions.length > 0} {...this.props} render={({transactions}) => (
<Transactions transactions={transactions} />
<Transactions transactions={transactions}
showLoadMore={(this.loadMoreFrom() >= 0)} loadMore={() => this.loadMore()} />
)} />
{(this.loadMoreFrom() > 0) ? <LoadMore loadMore={() => this.loadMore()} /> : <React.Fragment />}
</React.Fragment>
);
}