Load only 100 txns at a time

app/components/Common.module.css

@@ -81,6 +81,7 @@
 .primarybutton {
   background-color: #c3921f;
   color: #000;
+  text-align: center;
   font-weight: bold;
   font-size: 14px;
   padding-top: 8px;

app/components/Transactions.js

@@ -248,14 +248,15 @@ type Props = {
 
 type State = {
   clickedTx: Transaction | null,
-  modalIsOpen: boolean
+  modalIsOpen: boolean,
+  numTxnsToShow: number
 };
 
 export default class Transactions extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
 
-    this.state = { clickedTx: null, modalIsOpen: false };
+    this.state = { clickedTx: null, modalIsOpen: false, numTxnsToShow: 100 };
   }
 
   txClicked = (tx: Transaction) => {
@@ -268,9 +269,17 @@ export default class Transactions extends Component<Props, State> {
     this.setState({ clickedTx: null, modalIsOpen: false });
   };
 
+  show100MoreTxns = () => {
+    const { numTxnsToShow } = this.state;
+
+    this.setState({ numTxnsToShow: numTxnsToShow + 100 });
+  };
+
   render() {
     const { transactions, info, addressBook, setSendTo } = this.props;
-    const { clickedTx, modalIsOpen } = this.state;
+    const { clickedTx, modalIsOpen, numTxnsToShow } = this.state;
+
+    const isLoadMoreEnabled = numTxnsToShow < transactions.length;
 
     const addressBookMap = addressBook.reduce((map, obj) => {
       // eslint-disable-next-line no-param-reassign
@@ -291,7 +300,7 @@ export default class Transactions extends Component<Props, State> {
             <div className={[cstyles.center, cstyles.margintoplarge].join(' ')}>No Transactions Yet</div>
           )}
           {transactions &&
-            transactions.map(t => {
+            transactions.slice(0, numTxnsToShow).map(t => {
               const key = t.type + t.txid + t.address;
               return (
                 <TxItemBlock
@@ -304,6 +313,16 @@ export default class Transactions extends Component<Props, State> {
                 />
               );
             })}
+
+          {isLoadMoreEnabled && (
+            <div
+              style={{ marginLeft: '45%', width: '100px' }}
+              className={cstyles.primarybutton}
+              onClick={this.show100MoreTxns}
+            >
+              Load more
+            </div>
+          )}
         </ScrollPane>
 
         <TxModal