diff --git a/embark-ui/src/components/Blocks.js b/embark-ui/src/components/Blocks.js index 3ae9bb9e9..f57c1387a 100644 --- a/embark-ui/src/components/Blocks.js +++ b/embark-ui/src/components/Blocks.js @@ -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}) => ( - Blocks - {blocks.map(block => ( - - - Block - - {block.number} - - - - - - - Number - {block.number} - - - Mined On - {new Date(block.timestamp * 1000).toLocaleString()} - - - Gas Used - {block.gasUsed} - - - TX Count - {block.transactions.length} - - - - - ))} + + + Blocks + + + {blocks.map(block => ( + + Block + + {block.number} + + + + + Mined On + {new Date(block.timestamp * 1000).toLocaleString()} + + + Gas Used + {block.gasUsed} + + + TX Count + {block.transactions.length} + + + + ))} + {showLoadMore && loadMore()} />} + + ); Blocks.propTypes = { - blocks: PropTypes.arrayOf(PropTypes.object) + blocks: PropTypes.arrayOf(PropTypes.object), + showLoadMore: PropTypes.bool, + loadMore: PropTypes.func }; export default Blocks; diff --git a/embark-ui/src/components/Explorer.css b/embark-ui/src/components/Explorer.css new file mode 100644 index 000000000..29e9480df --- /dev/null +++ b/embark-ui/src/components/Explorer.css @@ -0,0 +1,9 @@ +.explorer-row { + margin-bottom: 20px; + padding-bottom: 5px; + border-bottom: 1px solid #c8ced3; +} + +.dark-theme .explorer-row { + border-bottom-color: #23282c; +} diff --git a/embark-ui/src/components/ExplorerDashboardLayout.js b/embark-ui/src/components/ExplorerDashboardLayout.js index 64a5e479a..4dcb3cf3d 100644 --- a/embark-ui/src/components/ExplorerDashboardLayout.js +++ b/embark-ui/src/components/ExplorerDashboardLayout.js @@ -8,6 +8,8 @@ import AccountsContainer from '../containers/AccountsContainer'; import BlocksContainer from '../containers/BlocksContainer'; import TransactionsContainer from '../containers/TransactionsContainer'; +import './Explorer.css'; + const ExplorerDashboardLayout = () => ( diff --git a/embark-ui/src/containers/BlocksContainer.js b/embark-ui/src/containers/BlocksContainer.js index 7420a01e5..1163214f5 100644 --- a/embark-ui/src/containers/BlocksContainer.js +++ b/embark-ui/src/containers/BlocksContainer.js @@ -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 ( 0} {...this.props} render={({blocks}) => ( - + = 0)} loadMore={() => this.loadMore()} /> )} /> - {(this.loadMoreFrom() >= 0) ? this.loadMore()} /> : } ); }