conflict in blocks

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}) => (
   <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>
+          <h1>Blocks</h1>
+        </CardHeader>
+        <CardBody>
+          {blocks.map(block => (
+            <div className="explorer-row" key={block.number}>
+              <CardTitleIdenticon id={block.hash}>Block&nbsp;
+                <Link className="align-top" 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;

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;
+}

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 = () => (
   <React.Fragment>
     <Row>

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 (
       <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>
     );
   }