Disable websocket and limit the number of record

embark-ui/src/actions/index.js

@@ -258,6 +258,7 @@ export const gasOracle = {
 export const WATCH_NEW_PROCESS_LOGS = 'WATCH_NEW_PROCESS_LOGS';
 export const WATCH_NEW_CONTRACT_LOGS = 'WATCH_NEW_CONTRACT_LOGS';
 export const INIT_BLOCK_HEADER = 'INIT_BLOCK_HEADER';
+export const STOP_BLOCK_HEADER = 'STOP_BLOCK_HEADER';
 export const WATCH_GAS_ORACLE = 'WATCH_GAS_ORACLE';
 
 export function listenToProcessLogs(processName) {
@@ -279,6 +280,12 @@ export function initBlockHeader(){
   };
 }
 
+export function stopBlockHeader(){
+  return {
+    type: STOP_BLOCK_HEADER
+  };
+}
+
 export function listenToGasOracle(){
   return {
     type: WATCH_GAS_ORACLE

embark-ui/src/containers/AppContainer.js

@@ -7,7 +7,6 @@ import Unauthenticated from '../components/Unauthenticated';
 import Layout from "../components/Layout";
 
 import {
-  initBlockHeader,
   authenticate, fetchCredentials, logout,
   processes as processesAction,
   versions as versionsAction,
@@ -51,7 +50,6 @@ class AppContainer extends Component {
     }
 
     if (this.props.credentials.authenticated && !this.props.initialized) {
-      this.props.initBlockHeader();
       this.props.fetchProcesses();
       this.props.fetchVersions();
       this.props.fetchPlugins();
@@ -98,7 +96,6 @@ function mapStateToProps(state) {
 export default withRouter(connect(
   mapStateToProps,
   {
-    initBlockHeader,
     authenticate: authenticate.request,
     logout: logout.request,
     fetchCredentials: fetchCredentials.request,

embark-ui/src/containers/BlocksContainer.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 
-import {blocks as blocksAction} from '../actions';
+import {blocks as blocksAction, initBlockHeader, stopBlockHeader} from '../actions';
 import Blocks from '../components/Blocks';
 import DataWrapper from "../components/DataWrapper";
 import LoadMore from "../components/LoadMore";
@@ -11,6 +11,11 @@ import {getBlocks} from "../reducers/selectors";
 class BlocksContainer extends Component {
   componentDidMount() {
     this.props.fetchBlocks();
+    this.props.initBlockHeader();
+  }
+
+  componentWillUnmount() {
+    this.props.stopBlockHeader();
   }
 
   loadMore() {
@@ -44,6 +49,8 @@ function mapStateToProps(state) {
 BlocksContainer.propTypes = {
   blocks: PropTypes.arrayOf(PropTypes.object),
   fetchBlocks: PropTypes.func,
+  initBlockHeader: PropTypes.func,
+  stopBlockHeader: PropTypes.func,
   error: PropTypes.string,
   loading: PropTypes.bool
 };
@@ -51,6 +58,8 @@ BlocksContainer.propTypes = {
 export default connect(
   mapStateToProps,
   {
-    fetchBlocks: blocksAction.request
+    fetchBlocks: blocksAction.request,
+    initBlockHeader,
+    stopBlockHeader
   },
 )(BlocksContainer);

embark-ui/src/containers/TransactionsContainer.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 
-import {transactions as transactionsAction} from '../actions';
+import {transactions as transactionsAction, initBlockHeader, stopBlockHeader} from '../actions';
 import LoadMore from "../components/LoadMore";
 import Transactions from '../components/Transactions';
 import DataWrapper from "../components/DataWrapper";
@@ -11,6 +11,11 @@ import {getTransactions} from "../reducers/selectors";
 class TransactionsContainer extends Component {
   componentDidMount() {
     this.props.fetchTransactions();
+    this.props.initBlockHeader();
+  }
+
+  componentWillUnmount() {
+    this.props.stopBlockHeader();
   }
 
   loadMore() {
@@ -44,6 +49,8 @@ function mapStateToProps(state) {
 TransactionsContainer.propTypes = {
   transactions: PropTypes.arrayOf(PropTypes.object),
   fetchTransactions: PropTypes.func,
+  initBlockHeader: PropTypes.func,
+  stopBlockHeader: PropTypes.func,
   error: PropTypes.string,
   loading: PropTypes.bool
 };
@@ -51,6 +58,8 @@ TransactionsContainer.propTypes = {
 export default connect(
   mapStateToProps,
   {
-    fetchTransactions: transactionsAction.request
+    fetchTransactions: transactionsAction.request,
+    initBlockHeader,
+    stopBlockHeader
   },
 )(TransactionsContainer);

embark-ui/src/reducers/index.js

@@ -4,6 +4,7 @@ import {REQUEST, SUCCESS, FAILURE, CONTRACT_COMPILE, FILES, LOGOUT, AUTHENTICATE
 const BN_FACTOR = 10000;
 const VOID_ADDRESS = '0x0000000000000000000000000000000000000000';
 const DEFAULT_HOST = 'localhost:8000';
+const MAX_ELEMENTS = 200;
 
 const entitiesDefaultState = {
   accounts: [],
@@ -65,9 +66,16 @@ const filtrer = {
     return index === self.findIndex((t) => t.address === account.address);
   },
   blocks: function(block, index, self) {
+    if (index > MAX_ELEMENTS) {
+      return false;
+    }
+
     return index === self.findIndex((t) => t.number === block.number);
   },
   transactions: function(tx, index, self) {
+    if (index > MAX_ELEMENTS) {
+      return false;
+    }
     return index === self.findIndex((t) => (
       t.blockNumber === tx.blockNumber && t.transactionIndex === tx.transactionIndex
     ));

embark-ui/src/sagas/index.js

@@ -2,7 +2,7 @@ import * as actions from '../actions';
 import * as api from '../services/api';
 import * as storage from '../services/storage';
 import {eventChannel} from 'redux-saga';
-import {all, call, fork, put, takeEvery, take, select} from 'redux-saga/effects';
+import {all, call, fork, put, takeEvery, take, select, race} from 'redux-saga/effects';
 import {getCredentials} from '../reducers/selectors';
 
 function *doRequest(entity, serviceFn, payload) {
@@ -208,9 +208,17 @@ export function *initBlockHeader() {
   const socket = api.webSocketBlockHeader(credentials);
   const channel = yield call(createChannel, socket);
   while (true) {
-    yield take(channel);
-    yield put({type: actions.BLOCKS[actions.REQUEST], noLoading: true});
-    yield put({type: actions.TRANSACTIONS[actions.REQUEST], noLoading: true});
+    const { cancel } = yield race({
+      task: take(channel),
+      cancel: take(actions.STOP_BLOCK_HEADER)
+    });
+
+    if (cancel) {
+      channel.close();
+      return;
+    }
+    yield put({type: actions.BLOCKS[actions.REQUEST]});
+    yield put({type: actions.TRANSACTIONS[actions.REQUEST]});
   }
 }