status-im/embark-area-51
2
0
Fork 0
mirror of https://github.com/status-im/embark-area-51.git synced 2025-02-17 01:37:26 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Restyle explorer
This commit is contained in:
Iuri Matias 2018-10-24 14:13:11 -04:00 committed by GitHub
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}) => ( const Accounts = ({accounts}) => (
<Row> <Row>
<Col> <Col>
<h1>Accounts</h1> <Card>
{accounts.map(account => ( <CardHeader>
<Card key={account.address}> <h2>Accounts</h2>
<CardHeader> </CardHeader>
<CardBody>
{accounts.map(account => (
<div className="explorer-row border-top" key={account.address}>
<CardTitleIdenticon id={account.address}>Account&nbsp; <CardTitleIdenticon id={account.address}>Account&nbsp;
<Link to={`/embark/explorer/accounts/${account.address}`}>{account.address}</Link> <Link to={`/embark/explorer/accounts/${account.address}`}>{account.address}</Link>
</CardTitleIdenticon> </CardTitleIdenticon>
</CardHeader> <Row>
<CardBody> <Col>
<Row> <strong>Balance</strong>
<Col> <div>{account.balance} Ether</div>
<strong>Balance</strong> </Col>
<div>{account.balance} Ether</div> <Col>
</Col> <strong>Tx Count</strong>
<Col> <div>{account.transactionCount}</div>
<strong>Tx Count</strong> </Col>
<div>{account.transactionCount}</div> <Col>
</Col> <strong>Index</strong>
<Col> <div>{account.index}</div>
<strong>Index</strong> </Col>
<div>{account.index}</div> </Row>
</Col> </div>
</Row> ))}
</CardBody> </CardBody>
</Card> </Card>
))}
</Col> </Col>
</Row> </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 PropTypes from 'prop-types';
import CardTitleIdenticon from './CardTitleIdenticon'; import CardTitleIdenticon from './CardTitleIdenticon';
import LoadMore from "./LoadMore";
const Blocks = ({blocks}) => ( const Blocks = ({blocks, showLoadMore, loadMore}) => (
<Row> <Row>
<Col> <Col>
<h1>Blocks</h1> <Card>
{blocks.map(block => ( <CardHeader>
<Card key={block.number}> <h2>Blocks</h2>
<CardHeader> </CardHeader>
<CardTitleIdenticon id={block.hash}>Block&nbsp; <CardBody>
<Link to={`/embark/explorer/blocks/${block.number}`}> {blocks.map(block => (
{block.number} <div className="explorer-row border-top" key={block.number}>
</Link> <CardTitleIdenticon id={block.hash}>Block&nbsp;
</CardTitleIdenticon> <Link to={`/embark/explorer/blocks/${block.number}`}>
</CardHeader> {block.number}
<CardBody> </Link>
<Row> </CardTitleIdenticon>
<Col> <Row>
<strong>Number</strong> <Col>
<div>{block.number}</div> <strong>Mined On</strong>
</Col> <div>{new Date(block.timestamp * 1000).toLocaleString()}</div>
<Col> </Col>
<strong>Mined On</strong> <Col>
<div>{new Date(block.timestamp * 1000).toLocaleString()}</div> <strong>Gas Used</strong>
</Col> <div>{block.gasUsed}</div>
<Col> </Col>
<strong>Gas Used</strong> <Col>
<div>{block.gasUsed}</div> <strong>TX Count</strong>
</Col> <div>{block.transactions.length}</div>
<Col> </Col>
<strong>TX Count</strong> </Row>
<div>{block.transactions.length}</div> </div>
</Col> ))}
</Row> {showLoadMore && <LoadMore loadMore={() => loadMore()}/>}
</CardBody> </CardBody>
</Card> </Card>
))}
</Col> </Col>
</Row> </Row>
); );
Blocks.propTypes = { Blocks.propTypes = {
blocks: PropTypes.arrayOf(PropTypes.object) blocks: PropTypes.arrayOf(PropTypes.object),
showLoadMore: PropTypes.bool,
loadMore: PropTypes.func
}; };
export default Blocks; 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 React from 'react';
import {CardTitle} from 'reactstrap'; import {CardTitle} from 'reactstrap';
import Blockies from 'react-blockies'; import Blockies from 'react-blockies';
const CardTitleIdenticon = ({id, children}) => ( 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 BlocksContainer from '../containers/BlocksContainer';
import TransactionsContainer from '../containers/TransactionsContainer'; import TransactionsContainer from '../containers/TransactionsContainer';
import './Explorer.css';
const ExplorerDashboardLayout = () => ( const ExplorerDashboardLayout = () => (
<React.Fragment> <React.Fragment>
<Row> <Row className="mt-4">
<Col> <Col>
<AccountsContainer /> <AccountsContainer />
</Col> </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 PropTypes from 'prop-types';
import CardTitleIdenticon from './CardTitleIdenticon'; import CardTitleIdenticon from './CardTitleIdenticon';
import LoadMore from "./LoadMore";
const Transactions = ({transactions}) => ( const Transactions = ({transactions, showLoadMore, loadMore}) => (
<Row> <Row>
<Col> <Col>
<h1>Transactions</h1> <Card>
{transactions.map(transaction => ( <CardHeader>
<Card key={transaction.hash}> <h2>Transactions</h2>
<CardHeader> </CardHeader>
<CardTitleIdenticon id={transaction.hash}>Transaction&nbsp; <CardBody>
<Link to={`/embark/explorer/transactions/${transaction.hash}`}> {transactions.map(transaction => (
{transaction.hash} <div className="explorer-row border-top" key={transaction.hash}>
</Link> <CardTitleIdenticon id={transaction.hash}>Transaction&nbsp;
</CardTitleIdenticon> <Link to={`/embark/explorer/transactions/${transaction.hash}`}>
</CardHeader> {transaction.hash}
<CardBody> </Link>
<Row> </CardTitleIdenticon>
<Col> <Row>
<strong>Block number</strong> <Col md={6}>
<div>{transaction.blockNumber}</div> <strong>Block number</strong>
</Col> <div>{transaction.blockNumber}</div>
<Col> </Col>
<strong>From</strong> <Col md={6}>
<div>{transaction.from}</div> <strong>From</strong>
</Col> <div>{transaction.from}</div>
<Col> </Col>
<strong>To</strong> <Col md={6}>
<div>{transaction.to}</div> <strong>To</strong>
</Col> <div>{transaction.to}</div>
<Col> </Col>
<strong>Type</strong> <Col md={6}>
<div>{transaction.to ? "Contract Call" : "Contract Creation"}</div> <strong>Type</strong>
</Col> <div>{transaction.to ? "Contract Call" : "Contract Creation"}</div>
</Row> </Col>
</CardBody> </Row>
</Card> </div>
))} ))}
{showLoadMore && <LoadMore loadMore={() => loadMore()}/>}
</CardBody>
</Card>
</Col> </Col>
</Row> </Row>
); );
Transactions.propTypes = { Transactions.propTypes = {
transactions: PropTypes.arrayOf(PropTypes.object) transactions: PropTypes.arrayOf(PropTypes.object),
showLoadMore: PropTypes.bool,
loadMore: PropTypes.func
}; };
export default Transactions; 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 as blocksAction, initBlockHeader, stopBlockHeader} from '../actions';
import Blocks from '../components/Blocks'; import Blocks from '../components/Blocks';
import DataWrapper from "../components/DataWrapper"; import DataWrapper from "../components/DataWrapper";
import LoadMore from "../components/LoadMore";
import {getBlocks} from "../reducers/selectors"; import {getBlocks} from "../reducers/selectors";
class BlocksContainer extends Component { class BlocksContainer extends Component {
@ -34,9 +33,8 @@ class BlocksContainer extends Component {
return ( return (
<React.Fragment> <React.Fragment>
<DataWrapper shouldRender={this.props.blocks.length > 0} {...this.props} render={({blocks}) => ( <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> </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 PropTypes from 'prop-types';
import {transactions as transactionsAction, initBlockHeader, stopBlockHeader} from '../actions'; import {transactions as transactionsAction, initBlockHeader, stopBlockHeader} from '../actions';
import LoadMore from "../components/LoadMore";
import Transactions from '../components/Transactions'; import Transactions from '../components/Transactions';
import DataWrapper from "../components/DataWrapper"; import DataWrapper from "../components/DataWrapper";
import {getTransactions} from "../reducers/selectors"; import {getTransactions} from "../reducers/selectors";
@ -34,9 +33,9 @@ class TransactionsContainer extends Component {
return ( return (
<React.Fragment> <React.Fragment>
<DataWrapper shouldRender={this.props.transactions.length > 0} {...this.props} render={({transactions}) => ( <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> </React.Fragment>
); );
} }