From 78e9d3257db288e95e82560d0a1d758ec8c56694 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 24 Oct 2018 11:33:33 -0400
Subject: [PATCH 1/8] conflict in explorer

---
 embark-ui/src/components/Explorer.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/embark-ui/src/components/Explorer.css b/embark-ui/src/components/Explorer.css
index 80964c1f8..67fcfb9b8 100644
--- a/embark-ui/src/components/Explorer.css
+++ b/embark-ui/src/components/Explorer.css
@@ -12,3 +12,8 @@
   width: 90%;
   display: inline-block;
 }
+
+.explorer-row .text-truncate {
+  width: 90%;
+  display: inline-block;
+}

From 09e21f3386b294a9c86b491b286d16521aaa7938 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 24 Oct 2018 11:41:05 -0400
Subject: [PATCH 2/8] conflict in layout

---
 embark-ui/src/components/Blocks.js          | 10 +++---
 embark-ui/src/components/Layout.js          |  2 +-
 embark-ui/src/components/Pagination.js      | 37 +++++++++++++++++++++
 embark-ui/src/containers/BlocksContainer.js | 13 +++++++-
 4 files changed, 55 insertions(+), 7 deletions(-)
 create mode 100644 embark-ui/src/components/Pagination.js

diff --git a/embark-ui/src/components/Blocks.js b/embark-ui/src/components/Blocks.js
index ba27fbd0f..405fa0fcb 100644
--- a/embark-ui/src/components/Blocks.js
+++ b/embark-ui/src/components/Blocks.js
@@ -2,11 +2,11 @@ import React from 'react';
 import {Link} from "react-router-dom";
 import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
 import PropTypes from 'prop-types';
+import Pages from './Pagination';
 
 import CardTitleIdenticon from './CardTitleIdenticon';
-import LoadMore from "./LoadMore";
 
-const Blocks = ({blocks, showLoadMore, loadMore}) => (
+const Blocks = ({blocks, changePage, currentPage}) => (
   <Row>
     <Col>
       <Card>
@@ -37,7 +37,7 @@ const Blocks = ({blocks, showLoadMore, loadMore}) => (
               </Row>
             </div>
           ))}
-          {showLoadMore && <LoadMore loadMore={() => loadMore()}/>}
+          <Pages changePage={changePage} currentPage={currentPage} numberOfPages={5}/>
         </CardBody>
       </Card>
     </Col>
@@ -46,8 +46,8 @@ const Blocks = ({blocks, showLoadMore, loadMore}) => (
 
 Blocks.propTypes = {
   blocks: PropTypes.arrayOf(PropTypes.object),
-  showLoadMore: PropTypes.bool,
-  loadMore: PropTypes.func
+  changePage: PropTypes.func,
+  currentPage: PropTypes.number
 };
 
 export default Blocks;
diff --git a/embark-ui/src/components/Layout.js b/embark-ui/src/components/Layout.js
index 37d5e6b7e..f7ba5b299 100644
--- a/embark-ui/src/components/Layout.js
+++ b/embark-ui/src/components/Layout.js
@@ -129,7 +129,7 @@ class Layout extends React.Component {
         </Nav>
         <AppHeaderDropdown className="list-unstyled d-xl-none" direction="down">
           <DropdownToggle nav>
-            <FontAwesome name='bars'/>
+            <FontAwesome name="bars"/>
           </DropdownToggle>
           <DropdownMenu>
             {HEADER_NAV_ITEMS.map((item) => (
diff --git a/embark-ui/src/components/Pagination.js b/embark-ui/src/components/Pagination.js
new file mode 100644
index 000000000..bc3ed83ff
--- /dev/null
+++ b/embark-ui/src/components/Pagination.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import {Pagination, PaginationItem, PaginationLink} from 'reactstrap';
+import PropTypes from 'prop-types';
+
+const Pages = ({currentPage, numberOfPages, changePage}) => {
+  const paginationItems = [];
+  for (let i = 1; i <= numberOfPages; i++) {
+    paginationItems.push(<PaginationItem active={currentPage === i} key={'page-' + i}>
+      <PaginationLink href="#" onClick={(e) => {
+        e.preventDefault();
+        changePage(i);
+      }}>
+        {i}
+      </PaginationLink>
+    </PaginationItem>);
+  }
+
+  return (
+    <Pagination aria-label="Page navigation example">
+      <PaginationItem>
+        <PaginationLink previous href="#"/>
+      </PaginationItem>
+      {paginationItems}
+      <PaginationItem>
+        <PaginationLink next href="#"/>
+      </PaginationItem>
+    </Pagination>
+  );
+};
+
+Pages.propTypes = {
+  numberOfPages: PropTypes.number,
+  currentPage: PropTypes.number,
+  changePage: PropTypes.func
+};
+
+export default Pages;
diff --git a/embark-ui/src/containers/BlocksContainer.js b/embark-ui/src/containers/BlocksContainer.js
index 1163214f5..c5038dab1 100644
--- a/embark-ui/src/containers/BlocksContainer.js
+++ b/embark-ui/src/containers/BlocksContainer.js
@@ -8,6 +8,12 @@ import DataWrapper from "../components/DataWrapper";
 import {getBlocks} from "../reducers/selectors";
 
 class BlocksContainer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {currentPage: 1};
+  }
+
   componentDidMount() {
     this.props.fetchBlocks();
     this.props.initBlockHeader();
@@ -29,11 +35,16 @@ class BlocksContainer extends Component {
     return blocks[blocks.length - 1].number - 1;
   }
 
+  changePage(newPage) {
+    this.setState({currentPage: newPage});
+  }
+
   render() {
     return (
       <React.Fragment>
         <DataWrapper shouldRender={this.props.blocks.length > 0} {...this.props} render={({blocks}) => (
-          <Blocks blocks={blocks} showLoadMore={(this.loadMoreFrom() >= 0)} loadMore={() => this.loadMore()} />
+          <Blocks blocks={blocks} showLoadMore={(this.loadMoreFrom() >= 0)}
+                  changePage={(newPage) => this.changePage(newPage)} currentPage={this.state.currentPage} />
         )} />
       </React.Fragment>
     );

From 6c92e7b24d5e5e21d90f86387b45130970a6c0f4 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 24 Oct 2018 10:35:27 -0400
Subject: [PATCH 3/8] display correct pagination whatever the page

---
 embark-ui/src/components/Blocks.js          |  7 ++--
 embark-ui/src/components/Pagination.js      | 46 ++++++++++++++-------
 embark-ui/src/containers/BlocksContainer.js |  8 +++-
 3 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/embark-ui/src/components/Blocks.js b/embark-ui/src/components/Blocks.js
index 405fa0fcb..1f311de87 100644
--- a/embark-ui/src/components/Blocks.js
+++ b/embark-ui/src/components/Blocks.js
@@ -6,7 +6,7 @@ import Pages from './Pagination';
 
 import CardTitleIdenticon from './CardTitleIdenticon';
 
-const Blocks = ({blocks, changePage, currentPage}) => (
+const Blocks = ({blocks, changePage, currentPage, numberOfPages}) => (
   <Row>
     <Col>
       <Card>
@@ -37,7 +37,7 @@ const Blocks = ({blocks, changePage, currentPage}) => (
               </Row>
             </div>
           ))}
-          <Pages changePage={changePage} currentPage={currentPage} numberOfPages={5}/>
+          <Pages changePage={changePage} currentPage={currentPage} numberOfPages={numberOfPages}/>
         </CardBody>
       </Card>
     </Col>
@@ -47,7 +47,8 @@ const Blocks = ({blocks, changePage, currentPage}) => (
 Blocks.propTypes = {
   blocks: PropTypes.arrayOf(PropTypes.object),
   changePage: PropTypes.func,
-  currentPage: PropTypes.number
+  currentPage: PropTypes.number,
+  numberOfPages: PropTypes.number
 };
 
 export default Blocks;
diff --git a/embark-ui/src/components/Pagination.js b/embark-ui/src/components/Pagination.js
index bc3ed83ff..4a62c377a 100644
--- a/embark-ui/src/components/Pagination.js
+++ b/embark-ui/src/components/Pagination.js
@@ -2,27 +2,43 @@ import React from 'react';
 import {Pagination, PaginationItem, PaginationLink} from 'reactstrap';
 import PropTypes from 'prop-types';
 
+const NB_PAGES_MAX = 14;
+
 const Pages = ({currentPage, numberOfPages, changePage}) => {
-  const paginationItems = [];
-  for (let i = 1; i <= numberOfPages; i++) {
-    paginationItems.push(<PaginationItem active={currentPage === i} key={'page-' + i}>
-      <PaginationLink href="#" onClick={(e) => {
-        e.preventDefault();
-        changePage(i);
-      }}>
-        {i}
-      </PaginationLink>
-    </PaginationItem>);
+  let i = currentPage - NB_PAGES_MAX / 2;
+  if (i < 1) {
+    i = 1;
+  }
+  let max = i + NB_PAGES_MAX;
+  if (max > numberOfPages) {
+    max = numberOfPages;
+  }
+  const pageNumbers = [];
+  for (i; i <= max; i++) {
+    pageNumbers.push(i);
   }
 
   return (
     <Pagination aria-label="Page navigation example">
-      <PaginationItem>
-        <PaginationLink previous href="#"/>
+      <PaginationItem disabled={currentPage <= 1}>
+        <PaginationLink previous href="#" onClick={(e) => {
+          e.preventDefault();
+          changePage(currentPage - 1);
+        }}/>
       </PaginationItem>
-      {paginationItems}
-      <PaginationItem>
-        <PaginationLink next href="#"/>
+      {pageNumbers.map(number => (<PaginationItem active={currentPage === number} key={'page-' + number}>
+        <PaginationLink href="#" onClick={(e) => {
+          e.preventDefault();
+          changePage(number);
+        }}>
+          {number}
+        </PaginationLink>
+      </PaginationItem>))}
+      <PaginationItem disabled={currentPage >= numberOfPages}>
+        <PaginationLink next href="#" onClick={(e) => {
+          e.preventDefault();
+          changePage(currentPage + 1);
+        }}/>
       </PaginationItem>
     </Pagination>
   );
diff --git a/embark-ui/src/containers/BlocksContainer.js b/embark-ui/src/containers/BlocksContainer.js
index c5038dab1..3e2dbe4bc 100644
--- a/embark-ui/src/containers/BlocksContainer.js
+++ b/embark-ui/src/containers/BlocksContainer.js
@@ -7,6 +7,8 @@ import Blocks from '../components/Blocks';
 import DataWrapper from "../components/DataWrapper";
 import {getBlocks} from "../reducers/selectors";
 
+const MAX_BLOCKS = 10; // TODO use same constant as API
+
 class BlocksContainer extends Component {
   constructor(props) {
     super(props);
@@ -27,6 +29,10 @@ class BlocksContainer extends Component {
     this.props.fetchBlocks(this.loadMoreFrom());
   }
 
+  getNumberOfPages() {
+    return Math.ceil(this.loadMoreFrom() / MAX_BLOCKS);
+  }
+
   loadMoreFrom() {
     let blocks = this.props.blocks;
     if (blocks.length === 0) {
@@ -43,7 +49,7 @@ class BlocksContainer extends Component {
     return (
       <React.Fragment>
         <DataWrapper shouldRender={this.props.blocks.length > 0} {...this.props} render={({blocks}) => (
-          <Blocks blocks={blocks} showLoadMore={(this.loadMoreFrom() >= 0)}
+          <Blocks blocks={blocks} numberOfPages={this.getNumberOfPages()}
                   changePage={(newPage) => this.changePage(newPage)} currentPage={this.state.currentPage} />
         )} />
       </React.Fragment>

From a1b18b74f8b61a5f0ccd12d219bc6259b4cc2b62 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 24 Oct 2018 14:50:07 -0400
Subject: [PATCH 4/8] conflict in css

---
 embark-ui/src/components/Explorer.css               | 6 +++++-
 embark-ui/src/components/ExplorerDashboardLayout.js | 8 ++++----
 embark-ui/src/components/Pagination.js              | 6 +++---
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/embark-ui/src/components/Explorer.css b/embark-ui/src/components/Explorer.css
index 67fcfb9b8..69bd17a36 100644
--- a/embark-ui/src/components/Explorer.css
+++ b/embark-ui/src/components/Explorer.css
@@ -1,5 +1,9 @@
 .explorer-row {
-  border-top-width: 0 !important; /*Bootstrap uses important, so we need to override it*/
+  border-top-width: 0 !important; /*Bootstrap uses important, so we need to override it*/ 
+}
+
+.explorer-overview .card-body {
+  overflow: hidden;
 }
 
 .explorer-row + .explorer-row {
diff --git a/embark-ui/src/components/ExplorerDashboardLayout.js b/embark-ui/src/components/ExplorerDashboardLayout.js
index e510c1de9..ee49bd109 100644
--- a/embark-ui/src/components/ExplorerDashboardLayout.js
+++ b/embark-ui/src/components/ExplorerDashboardLayout.js
@@ -11,21 +11,21 @@ import TransactionsContainer from '../containers/TransactionsContainer';
 import './Explorer.css';
 
 const ExplorerDashboardLayout = () => (
-  <React.Fragment>
+  <div className="explorer-overview">
     <Row className="mt-4">
       <Col>
         <AccountsContainer />
       </Col>
     </Row>
     <Row>
-      <Col md={6}>
+      <Col xl={6}>
         <BlocksContainer />
       </Col>
-      <Col md={6}>
+      <Col xl={6}>
         <TransactionsContainer />
       </Col>
     </Row>
-  </React.Fragment>
+  </div>
 );
 
 export default ExplorerDashboardLayout;
diff --git a/embark-ui/src/components/Pagination.js b/embark-ui/src/components/Pagination.js
index 4a62c377a..ca8e003c9 100644
--- a/embark-ui/src/components/Pagination.js
+++ b/embark-ui/src/components/Pagination.js
@@ -2,14 +2,14 @@ import React from 'react';
 import {Pagination, PaginationItem, PaginationLink} from 'reactstrap';
 import PropTypes from 'prop-types';
 
-const NB_PAGES_MAX = 14;
+const NB_PAGES_MAX = 8;
 
 const Pages = ({currentPage, numberOfPages, changePage}) => {
   let i = currentPage - NB_PAGES_MAX / 2;
   if (i < 1) {
     i = 1;
   }
-  let max = i + NB_PAGES_MAX;
+  let max = i + NB_PAGES_MAX - 1;
   if (max > numberOfPages) {
     max = numberOfPages;
   }
@@ -19,7 +19,7 @@ const Pages = ({currentPage, numberOfPages, changePage}) => {
   }
 
   return (
-    <Pagination aria-label="Page navigation example">
+    <Pagination aria-label="Page navigation example" className="mt-4 mb-0 float-right">
       <PaginationItem disabled={currentPage <= 1}>
         <PaginationLink previous href="#" onClick={(e) => {
           e.preventDefault();

From 8bdc8d41d4b19458f7dc5ca9ba8f03a3b718ef0f Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 24 Oct 2018 13:53:11 -0400
Subject: [PATCH 5/8] start pagination at the end

---
 embark-ui/src/components/Pagination.js      | 11 +++++++----
 embark-ui/src/containers/BlocksContainer.js |  5 +++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/embark-ui/src/components/Pagination.js b/embark-ui/src/components/Pagination.js
index ca8e003c9..2d566115c 100644
--- a/embark-ui/src/components/Pagination.js
+++ b/embark-ui/src/components/Pagination.js
@@ -5,13 +5,16 @@ import PropTypes from 'prop-types';
 const NB_PAGES_MAX = 8;
 
 const Pages = ({currentPage, numberOfPages, changePage}) => {
-  let i = currentPage - NB_PAGES_MAX / 2;
+  let max = currentPage + NB_PAGES_MAX / 2;
+  if (max >= numberOfPages) {
+    max = numberOfPages;
+  }
+  let i = max - NB_PAGES_MAX;
   if (i < 1) {
     i = 1;
   }
-  let max = i + NB_PAGES_MAX - 1;
-  if (max > numberOfPages) {
-    max = numberOfPages;
+  if (max - i < NB_PAGES_MAX) {
+    max += NB_PAGES_MAX - max + 1;
   }
   const pageNumbers = [];
   for (i; i <= max; i++) {
diff --git a/embark-ui/src/containers/BlocksContainer.js b/embark-ui/src/containers/BlocksContainer.js
index 3e2dbe4bc..c580d70b7 100644
--- a/embark-ui/src/containers/BlocksContainer.js
+++ b/embark-ui/src/containers/BlocksContainer.js
@@ -13,7 +13,7 @@ class BlocksContainer extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {currentPage: 1};
+    this.state = {currentPage: 0};
   }
 
   componentDidMount() {
@@ -50,7 +50,8 @@ class BlocksContainer extends Component {
       <React.Fragment>
         <DataWrapper shouldRender={this.props.blocks.length > 0} {...this.props} render={({blocks}) => (
           <Blocks blocks={blocks} numberOfPages={this.getNumberOfPages()}
-                  changePage={(newPage) => this.changePage(newPage)} currentPage={this.state.currentPage} />
+                  changePage={(newPage) => this.changePage(newPage)}
+                  currentPage={this.state.currentPage || this.getNumberOfPages()} />
         )} />
       </React.Fragment>
     );

From ab3fa97592f812cb88aefe9177f2433960e1942b Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 24 Oct 2018 14:27:01 -0400
Subject: [PATCH 6/8] change page when clicking on it for blocks

---
 embark-ui/src/components/Pagination.js      |  2 +-
 embark-ui/src/containers/BlocksContainer.js | 34 ++++++++++++---------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/embark-ui/src/components/Pagination.js b/embark-ui/src/components/Pagination.js
index 2d566115c..d8b1f1dcc 100644
--- a/embark-ui/src/components/Pagination.js
+++ b/embark-ui/src/components/Pagination.js
@@ -6,7 +6,7 @@ const NB_PAGES_MAX = 8;
 
 const Pages = ({currentPage, numberOfPages, changePage}) => {
   let max = currentPage + NB_PAGES_MAX / 2;
-  if (max >= numberOfPages) {
+  if (max > numberOfPages) {
     max = numberOfPages;
   }
   let i = max - NB_PAGES_MAX;
diff --git a/embark-ui/src/containers/BlocksContainer.js b/embark-ui/src/containers/BlocksContainer.js
index c580d70b7..398f038a4 100644
--- a/embark-ui/src/containers/BlocksContainer.js
+++ b/embark-ui/src/containers/BlocksContainer.js
@@ -14,6 +14,7 @@ class BlocksContainer extends Component {
     super(props);
 
     this.state = {currentPage: 0};
+    this.numberOfBlocks = 0;
   }
 
   componentDidMount() {
@@ -25,31 +26,36 @@ class BlocksContainer extends Component {
     this.props.stopBlockHeader();
   }
 
-  loadMore() {
-    this.props.fetchBlocks(this.loadMoreFrom());
-  }
-
   getNumberOfPages() {
-    return Math.ceil(this.loadMoreFrom() / MAX_BLOCKS);
-  }
-
-  loadMoreFrom() {
-    let blocks = this.props.blocks;
-    if (blocks.length === 0) {
-      return 0;
+    if (!this.numberOfBlocks) {
+      let blocks = this.props.blocks;
+      if (blocks.length === 0) {
+        this.numberOfBlocks = 0;
+      } else {
+        this.numberOfBlocks = blocks[blocks.length - 1].number - 1;
+      }
     }
-    return blocks[blocks.length - 1].number - 1;
+    return Math.ceil(this.numberOfBlocks / MAX_BLOCKS);
   }
 
   changePage(newPage) {
     this.setState({currentPage: newPage});
+
+    this.props.fetchBlocks((newPage * MAX_BLOCKS) + MAX_BLOCKS);
+  }
+
+  getCurrentBlocks() {
+    const currentPage = this.state.currentPage || this.getNumberOfPages();
+    return this.props.blocks.filter(block => block.number <= (currentPage * MAX_BLOCKS) + MAX_BLOCKS &&
+      block.number > currentPage * MAX_BLOCKS);
   }
 
   render() {
+    const currentBlocks = this.getCurrentBlocks();
     return (
       <React.Fragment>
-        <DataWrapper shouldRender={this.props.blocks.length > 0} {...this.props} render={({blocks}) => (
-          <Blocks blocks={blocks} numberOfPages={this.getNumberOfPages()}
+        <DataWrapper shouldRender={currentBlocks.length > 0} {...this.props} render={() => (
+          <Blocks blocks={currentBlocks} numberOfPages={this.getNumberOfPages()}
                   changePage={(newPage) => this.changePage(newPage)}
                   currentPage={this.state.currentPage || this.getNumberOfPages()} />
         )} />

From 3d3ce559e94cb68fc74b0063d834f490de2774a4 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 24 Oct 2018 14:47:06 -0400
Subject: [PATCH 7/8] add pagination to transactions too

---
 embark-ui/src/components/Transactions.js      | 11 +++--
 embark-ui/src/containers/BlocksContainer.js   | 10 ++--
 .../src/containers/TransactionsContainer.js   | 49 ++++++++++++++-----
 3 files changed, 51 insertions(+), 19 deletions(-)

diff --git a/embark-ui/src/components/Transactions.js b/embark-ui/src/components/Transactions.js
index 1a80121fe..6c062f188 100644
--- a/embark-ui/src/components/Transactions.js
+++ b/embark-ui/src/components/Transactions.js
@@ -4,9 +4,9 @@ import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
 import PropTypes from 'prop-types';
 
 import CardTitleIdenticon from './CardTitleIdenticon';
-import LoadMore from "./LoadMore";
+import Pages from "./Pagination";
 
-const Transactions = ({transactions, showLoadMore, loadMore}) => (
+const Transactions = ({transactions, changePage, currentPage, numberOfPages}) => (
   <Row>
     <Col>
       <Card>
@@ -41,7 +41,7 @@ const Transactions = ({transactions, showLoadMore, loadMore}) => (
               </Row>
             </div>
           ))}
-          {showLoadMore && <LoadMore loadMore={() => loadMore()}/>}
+          <Pages changePage={changePage} currentPage={currentPage} numberOfPages={numberOfPages}/>
         </CardBody>
       </Card>
     </Col>
@@ -50,8 +50,9 @@ const Transactions = ({transactions, showLoadMore, loadMore}) => (
 
 Transactions.propTypes = {
   transactions: PropTypes.arrayOf(PropTypes.object),
-  showLoadMore: PropTypes.bool,
-  loadMore: PropTypes.func
+  changePage: PropTypes.func,
+  currentPage: PropTypes.number,
+  numberOfPages: PropTypes.number
 };
 
 export default Transactions;
diff --git a/embark-ui/src/containers/BlocksContainer.js b/embark-ui/src/containers/BlocksContainer.js
index 398f038a4..cf1b36036 100644
--- a/embark-ui/src/containers/BlocksContainer.js
+++ b/embark-ui/src/containers/BlocksContainer.js
@@ -15,6 +15,7 @@ class BlocksContainer extends Component {
 
     this.state = {currentPage: 0};
     this.numberOfBlocks = 0;
+    this.currentBlocks = [];
   }
 
   componentDidMount() {
@@ -51,11 +52,14 @@ class BlocksContainer extends Component {
   }
 
   render() {
-    const currentBlocks = this.getCurrentBlocks();
+    const newBlocks = this.getCurrentBlocks();
+    if (newBlocks.length) {
+      this.currentBlocks = newBlocks;
+    }
     return (
       <React.Fragment>
-        <DataWrapper shouldRender={currentBlocks.length > 0} {...this.props} render={() => (
-          <Blocks blocks={currentBlocks} numberOfPages={this.getNumberOfPages()}
+        <DataWrapper shouldRender={this.currentBlocks.length > 0} {...this.props} render={() => (
+          <Blocks blocks={this.currentBlocks} numberOfPages={this.getNumberOfPages()}
                   changePage={(newPage) => this.changePage(newPage)}
                   currentPage={this.state.currentPage || this.getNumberOfPages()} />
         )} />
diff --git a/embark-ui/src/containers/TransactionsContainer.js b/embark-ui/src/containers/TransactionsContainer.js
index 861709b1c..d03e72446 100644
--- a/embark-ui/src/containers/TransactionsContainer.js
+++ b/embark-ui/src/containers/TransactionsContainer.js
@@ -7,7 +7,17 @@ import Transactions from '../components/Transactions';
 import DataWrapper from "../components/DataWrapper";
 import {getTransactions} from "../reducers/selectors";
 
+const MAX_TXS = 10; // TODO use same constant as API
+
 class TransactionsContainer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {currentPage: 0};
+    this.numberOfTxs = 0;
+    this.currentTxs = [];
+  }
+
   componentDidMount() {
     this.props.fetchTransactions();
     this.props.initBlockHeader();
@@ -17,24 +27,41 @@ class TransactionsContainer extends Component {
     this.props.stopBlockHeader();
   }
 
-  loadMore() {
-    this.props.fetchTransactions(this.loadMoreFrom());
+  getNumberOfPages() {
+    if (!this.numberOfTxs) {
+      let transactions = this.props.transactions;
+      if (transactions.length === 0) {
+        this.numberOfTxs = 0;
+      } else {
+        this.numberOfTxs = transactions[transactions.length - 1].blockNumber - 1;
+      }
+    }
+    return Math.ceil(this.numberOfTxs / MAX_TXS);
   }
 
-  loadMoreFrom() {
-    let transactions = this.props.transactions;
-    if (transactions.length === 0) {
-      return 0;
-    }
-    return transactions[transactions.length - 1].blockNumber - 1;
+  changePage(newPage) {
+    this.setState({currentPage: newPage});
+
+    this.props.fetchTransactions((newPage * MAX_TXS) + MAX_TXS);
+  }
+
+  getCurrentTransactions() {
+    const currentPage = this.state.currentPage || this.getNumberOfPages();
+    return this.props.transactions.filter(tx => tx.blockNumber <= (currentPage * MAX_TXS) + MAX_TXS &&
+      tx.blockNumber > currentPage * MAX_TXS);
   }
 
   render() {
+    const newTxs = this.getCurrentTransactions();
+    if (newTxs.length) {
+      this.currentTxs = newTxs;
+    }
     return (
       <React.Fragment>
-        <DataWrapper shouldRender={this.props.transactions.length > 0} {...this.props} render={({transactions}) => (
-          <Transactions transactions={transactions}
-                        showLoadMore={(this.loadMoreFrom() >= 0)} loadMore={() => this.loadMore()} />
+        <DataWrapper shouldRender={this.currentTxs.length > 0} {...this.props} render={() => (
+          <Transactions transactions={this.currentTxs} numberOfPages={this.getNumberOfPages()}
+                        changePage={(newPage) => this.changePage(newPage)}
+                        currentPage={this.state.currentPage || this.getNumberOfPages()} />
         )} />
       </React.Fragment>
     );

From 60c07072cf4b3596bebfff264cf9f9ba40110cb2 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 24 Oct 2018 16:41:05 -0400
Subject: [PATCH 8/8] review comments

---
 embark-ui/src/components/Blocks.js       |  4 ++--
 embark-ui/src/components/LoadMore.js     | 17 -----------------
 embark-ui/src/components/Pagination.js   | 12 ++++++------
 embark-ui/src/components/Transactions.js |  4 ++--
 4 files changed, 10 insertions(+), 27 deletions(-)
 delete mode 100644 embark-ui/src/components/LoadMore.js

diff --git a/embark-ui/src/components/Blocks.js b/embark-ui/src/components/Blocks.js
index 1f311de87..757730256 100644
--- a/embark-ui/src/components/Blocks.js
+++ b/embark-ui/src/components/Blocks.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {Link} from "react-router-dom";
 import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
 import PropTypes from 'prop-types';
-import Pages from './Pagination';
+import Pagination from './Pagination';
 
 import CardTitleIdenticon from './CardTitleIdenticon';
 
@@ -37,7 +37,7 @@ const Blocks = ({blocks, changePage, currentPage, numberOfPages}) => (
               </Row>
             </div>
           ))}
-          <Pages changePage={changePage} currentPage={currentPage} numberOfPages={numberOfPages}/>
+          <Pagination changePage={changePage} currentPage={currentPage} numberOfPages={numberOfPages}/>
         </CardBody>
       </Card>
     </Col>
diff --git a/embark-ui/src/components/LoadMore.js b/embark-ui/src/components/LoadMore.js
deleted file mode 100644
index 3475686e7..000000000
--- a/embark-ui/src/components/LoadMore.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import {Row, Col, Button} from 'reactstrap';
-import PropTypes from 'prop-types';
-
-const LoadMore = ({loadMore}) => (
-  <Row className="my-3">
-    <Col className="text-center">
-      <Button onClick={loadMore} icon="plus" outline color="primary">Load More</Button>
-    </Col>
-  </Row>
-);
-
-LoadMore.propTypes = {
-  loadMore: PropTypes.func
-};
-
-export default LoadMore;
diff --git a/embark-ui/src/components/Pagination.js b/embark-ui/src/components/Pagination.js
index d8b1f1dcc..a7244b0e5 100644
--- a/embark-ui/src/components/Pagination.js
+++ b/embark-ui/src/components/Pagination.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import {Pagination, PaginationItem, PaginationLink} from 'reactstrap';
+import {Pagination as RPagination, PaginationItem, PaginationLink} from 'reactstrap';
 import PropTypes from 'prop-types';
 
 const NB_PAGES_MAX = 8;
 
-const Pages = ({currentPage, numberOfPages, changePage}) => {
+const Pagination = ({currentPage, numberOfPages, changePage}) => {
   let max = currentPage + NB_PAGES_MAX / 2;
   if (max > numberOfPages) {
     max = numberOfPages;
@@ -22,7 +22,7 @@ const Pages = ({currentPage, numberOfPages, changePage}) => {
   }
 
   return (
-    <Pagination aria-label="Page navigation example" className="mt-4 mb-0 float-right">
+    <RPagination aria-label="Explorer navigation" className="mt-4 mb-0 float-right">
       <PaginationItem disabled={currentPage <= 1}>
         <PaginationLink previous href="#" onClick={(e) => {
           e.preventDefault();
@@ -43,14 +43,14 @@ const Pages = ({currentPage, numberOfPages, changePage}) => {
           changePage(currentPage + 1);
         }}/>
       </PaginationItem>
-    </Pagination>
+    </RPagination>
   );
 };
 
-Pages.propTypes = {
+Pagination.propTypes = {
   numberOfPages: PropTypes.number,
   currentPage: PropTypes.number,
   changePage: PropTypes.func
 };
 
-export default Pages;
+export default Pagination;
diff --git a/embark-ui/src/components/Transactions.js b/embark-ui/src/components/Transactions.js
index 6c062f188..5396fdb8f 100644
--- a/embark-ui/src/components/Transactions.js
+++ b/embark-ui/src/components/Transactions.js
@@ -4,7 +4,7 @@ import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
 import PropTypes from 'prop-types';
 
 import CardTitleIdenticon from './CardTitleIdenticon';
-import Pages from "./Pagination";
+import Pagination from "./Pagination";
 
 const Transactions = ({transactions, changePage, currentPage, numberOfPages}) => (
   <Row>
@@ -41,7 +41,7 @@ const Transactions = ({transactions, changePage, currentPage, numberOfPages}) =>
               </Row>
             </div>
           ))}
-          <Pages changePage={changePage} currentPage={currentPage} numberOfPages={numberOfPages}/>
+          <Pagination changePage={changePage} currentPage={currentPage} numberOfPages={numberOfPages}/>
         </CardBody>
       </Card>
     </Col>