Adding blocks explorer

embark-ui/package.json

@@ -6,6 +6,7 @@
     "axios": "^0.18.0",
     "connected-react-router": "^4.3.0",
     "history": "^4.7.2",
+    "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-redux": "^5.0.7",

embark-ui/src/actions/index.js

@@ -6,6 +6,10 @@ export const RECEIVE_ACCOUNTS_ERROR = 'RECEIVE_ACCOUNTS_ERROR';
 export const FETCH_PROCESSES = 'FETCH_PROCESSES';
 export const RECEIVE_PROCESSES = 'RECEIVE_PROCESSES';
 export const RECEIVE_PROCESSES_ERROR = 'RECEIVE_PROCESSES_ERROR';
+// Blocks
+export const FETCH_BLOCKS = 'FETCH_BLOCKS';
+export const RECEIVE_BLOCKS = 'RECEIVE_BLOCKS';
+export const RECEIVE_BLOCKS_ERROR = 'RECEIVE_BLOCKS_ERROR';
 
 export function fetchAccounts() {
   return {
@@ -44,3 +48,22 @@ export function receiveProcessesError() {
     type: RECEIVE_PROCESSES_ERROR
   };
 }
+
+export function fetchBlocks() {
+  return {
+    type: FETCH_BLOCKS
+  };
+}
+
+export function receiveBlocks(blocks) {
+  return {
+    type: RECEIVE_BLOCKS,
+    blocks
+  };
+}
+
+export function receiveBlocksError() {
+  return {
+    type: RECEIVE_BLOCKS_ERROR
+  };
+}

embark-ui/src/api/index.js

@@ -1,9 +1,15 @@
 import axios from "axios";
 
+const BASE_URL = 'http://localhost:8000/embark-api';
+
 export function fetchAccounts() {
-  return axios.get('http://localhost:8000/embark-api/blockchain/accounts');
+  return axios.get(`${BASE_URL}/blockchain/accounts`);
+}
+
+export function fetchBlocks() {
+  return axios.get(`${BASE_URL}/blockchain/blocks`);
 }
 
 export function fetchProcesses() {
-  return axios.get('http://localhost:8000/embark-api/processes');
+  return axios.get(`${BASE_URL}/processes`);
 }

embark-ui/src/components/Accounts.js

@@ -1,31 +1,46 @@
 import React from 'react';
+import {
+  Page,
+  Grid,
+  Card,
+  Table
+} from "tabler-react";
+import PropTypes from 'prop-types';
+
 
 const Accounts = ({accounts}) => (
-  <React.Fragment>
-    <h1>Accounts</h1>
-    <table>
-      <thead>
-        <tr>
-          <th>Address</th>
-          <th>Balance</th>
-          <th>TX count</th>
-          <th>Index</th>
-        </tr>
-      </thead>
-      <tbody>
-        {accounts.map((account) => {
-          return (
-            <tr>
-              <td>{account.address}</td>
-              <td>{account.balance} ETH</td>
-              <td>{account.transactionCount}</td>
-              <td>{account.index}</td>
-            </tr>
-          )
-        })}
-      </tbody>
-    </table>
-  </React.Fragment>
+  <Page.Content title="Accounts">
+    <Grid.Row>
+      <Grid.Col>
+        <Card>
+          <Table
+            responsive
+            className="card-table table-vcenter text-nowrap"
+            headerItems={[
+              {content: "Address"},
+              {content: "Balance"},
+              {content: "TX count"},
+              {content: "Index"}
+            ]}
+            bodyItems={
+              accounts.map((account) => {
+                return ([
+                  {content: account.address},
+                  {content: account.balance},
+                  {content: account.transactionCount},
+                  {content: account.index}
+                ]);
+              })
+            }
+          />
+        </Card>
+      </Grid.Col>
+    </Grid.Row>
+  </Page.Content>
 );
 
+Accounts.propTypes = {
+  accounts: PropTypes.object
+};
+
 export default Accounts;

embark-ui/src/components/Blocks.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import {
+  Page,
+  Grid,
+  Card,
+  Table
+} from "tabler-react";
+import PropTypes from 'prop-types';
+
+
+const Blocks = ({blocks}) => (
+  <Page.Content title="Blocks">
+    <Grid.Row>
+      <Grid.Col>
+        <Card>
+          <Table
+            responsive
+            className="card-table table-vcenter text-nowrap"
+            headerItems={[{content: "Number"}, {content: "Mined On"}, {content: "Gas Used"}, {content: "TX Count"}]}
+            bodyItems={
+              blocks.map((block) => {
+                return ([
+                  {content: block.number},
+                  {content: new Date(block.timestamp * 1000).toLocaleString()},
+                  {content: block.gasUsed},
+                  {content: block.transactions.length}
+                ]);
+              })
+            }
+          />
+        </Card>
+      </Grid.Col>
+    </Grid.Row>
+  </Page.Content>
+);
+
+Blocks.propTypes = {
+  blocks: [PropTypes.object]
+};
+
+export default Blocks;

embark-ui/src/components/ExplorerLayout.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import {NavLink, Route, Switch, withRouter} from 'react-router-dom';
+import {
+  Page,
+  Grid,
+  List,
+} from "tabler-react";
+
+import AccountsContainer from '../containers/AccountsContainer';
+import BlocksContainer from '../containers/BlocksContainer';
+
+const ExplorerLayout = () => (
+  <Grid.Row>
+    <Grid.Col md={3}>
+      <Page.Title className="my-5">Explorer</Page.Title>
+      <div>
+        <List.Group transparent={true}>
+          <List.GroupItem
+            className="d-flex align-items-center"
+            to="/embark/explorer/accounts"
+            icon="users"
+            RootComponent={withRouter(NavLink)}
+          >
+            Accounts
+          </List.GroupItem>
+          <List.GroupItem
+            className="d-flex align-items-center"
+            to="/embark/explorer/blocks"
+            icon="book-open"
+            RootComponent={withRouter(NavLink)}
+          >
+            Blocks
+          </List.GroupItem>
+        </List.Group>
+      </div>
+    </Grid.Col>
+    <Grid.Col md={9}>
+      <Switch>
+        <Route exact path="/embark/explorer/accounts" component={AccountsContainer} />
+        <Route exact path="/embark/explorer/blocks" component={BlocksContainer} />
+      </Switch>
+    </Grid.Col>
+  </Grid.Row>
+);
+
+export default ExplorerLayout;

embark-ui/src/components/Loading.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import {Grid, Loader} from 'tabler-react';
+
+const Loading = () => (
+  <Grid.Row className="align-items-center h-100 mt-5">
+    <Grid.Col>
+      <Loader className="mx-auto" />
+    </Grid.Col>
+  </Grid.Row>
+);
+
+export default Loading;

embark-ui/src/containers/AccountsContainer.js

@@ -1,21 +1,20 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { fetchAccounts } from '../actions';
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+
+import {fetchAccounts} from '../actions';
 import Accounts from '../components/Accounts';
+import Loading from '../components/Loading';
 
 class AccountsContainer extends Component {
-  componentWillMount() {
+  componentDidMount() {
     this.props.fetchAccounts();
   }
 
   render() {
-    const { accounts } = this.props;
+    const {accounts} = this.props;
     if (!accounts.data) {
-      return (
-        <h1>
-          <i>Loading accounts...</i>
-        </h1>
-      )
+      return <Loading />;
     }
 
     if (accounts.error) {
@@ -23,22 +22,27 @@ class AccountsContainer extends Component {
         <h1>
           <i>Error API...</i>
         </h1>
-      )
+      );
     }
 
     return (
       <Accounts accounts={accounts.data} />
     );
   }
-};
+}
 
 function mapStateToProps(state) {
-  return { accounts: state.accounts }
+  return {accounts: state.accounts};
 }
 
+AccountsContainer.propTypes = {
+  accounts: PropTypes.object,
+  fetchAccounts: PropTypes.func
+};
+
 export default connect(
   mapStateToProps,
   {
     fetchAccounts
   },
-)(AccountsContainer)
+)(AccountsContainer);

embark-ui/src/containers/BlocksContainer.js

@@ -0,0 +1,48 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+
+import {fetchBlocks} from '../actions';
+import Blocks from '../components/Blocks';
+import Loading from '../components/Loading';
+
+class BlocksContainer extends Component {
+  componentDidMount() {
+    this.props.fetchBlocks();
+  }
+
+  render() {
+    const {blocks} = this.props;
+    if (!blocks.data) {
+      return <Loading />;
+    }
+
+    if (blocks.error) {
+      return (
+        <h1>
+          <i>Error API...</i>
+        </h1>
+      );
+    }
+
+    return (
+      <Blocks blocks={blocks.data} />
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {blocks: state.blocks};
+}
+
+BlocksContainer.propTypes = {
+  blocks: PropTypes.object,
+  fetchBlocks: PropTypes.func
+};
+
+export default connect(
+  mapStateToProps,
+  {
+    fetchBlocks
+  },
+)(BlocksContainer);

embark-ui/src/containers/ProcessesContainer.js

@@ -1,9 +1,11 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
-import {fetchProcesses} from '../actions';
 import {Tabs, Tab} from 'tabler-react';
 import PropTypes from 'prop-types';
 
+import {fetchProcesses} from '../actions';
+import Loading from '../components/Loading';
+
 import "./css/processContainer.css";
 
 class ProcessesContainer extends Component {
@@ -14,11 +16,7 @@ class ProcessesContainer extends Component {
   render() {
     const {processes} = this.props;
     if (!processes.data) {
-      return (
-        <h1>
-          <i>Loading processes...</i>
-        </h1>
-      );
+      return <Loading />;
     }
 
     if (processes.error) {

embark-ui/src/reducers/accountsReducer.js

@@ -0,0 +1,12 @@
+import {RECEIVE_ACCOUNTS, RECEIVE_ACCOUNTS_ERROR} from "../actions";
+
+export default function accounts(state = {}, action) {
+  switch (action.type) {
+    case RECEIVE_ACCOUNTS:
+      return Object.assign({}, state, {data: action.accounts.data});
+    case RECEIVE_ACCOUNTS_ERROR:
+      return Object.assign({}, state, {error: true});
+    default:
+      return state;
+  }
+}

embark-ui/src/reducers/blocksReducer.js

@@ -0,0 +1,12 @@
+import {RECEIVE_BLOCKS, RECEIVE_BLOCKS_ERROR} from "../actions";
+
+export default function accounts(state = {}, action) {
+  switch (action.type) {
+    case RECEIVE_BLOCKS:
+      return Object.assign({}, state, {data: action.blocks.data});
+    case RECEIVE_BLOCKS_ERROR:
+      return Object.assign({}, state, {error: true});
+    default:
+      return state;
+  }
+}

embark-ui/src/reducers/index.js

@@ -1,17 +1,12 @@
 import {combineReducers} from 'redux';
-import {RECEIVE_ACCOUNTS, RECEIVE_ACCOUNTS_ERROR} from "../actions";
 import processesReducer from './processesReducer';
+import accountsReducer from './accountsReducer';
+import blocksReducer from './blocksReducer';
 
-function accounts(state = {}, action) {
-  switch (action.type) {
-    case RECEIVE_ACCOUNTS:
-      return Object.assign({}, state, {data: action.accounts.data});
-    case RECEIVE_ACCOUNTS_ERROR:
-      return Object.assign({}, state, {error: true});
-    default:
-      return state;
-  }
-}
+const rootReducer = combineReducers({
+  accounts: accountsReducer,
+  processes: processesReducer,
+  blocks: blocksReducer
+});
 
-const rootReducer = combineReducers({accounts, processes: processesReducer});
 export default rootReducer;

embark-ui/src/routes.js

@@ -1,16 +1,18 @@
 import React from 'react';
-import {Route, Switch} from 'react-router';
+import {Route, Switch} from 'react-router-dom';
+
 import Home from './components/Home';
-import AccountsContainer from './containers/AccountsContainer';
-import ProcessesContainer from './containers/ProcessesContainer';
 import NoMatch from './components/NoMatch';
+import ExplorerLayout from './components/ExplorerLayout';
+
+import ProcessesContainer from './containers/ProcessesContainer';
 
 const routes = (
   <React.Fragment>
     <Switch>
-      <Route exact path="/embark" component={Home} />
-      <Route path="/embark/explorer/accounts" component={AccountsContainer} />
-      <Route path="/embark/processes" component={ProcessesContainer} />
+      <Route exact path="/embark/" component={Home} />
+      <Route path="/embark/explorer/" component={ExplorerLayout} />
+      <Route path="/embark/processes/" component={ProcessesContainer} />
       <Route component={NoMatch} />
     </Switch>
   </React.Fragment>

embark-ui/src/sagas/index.js

@@ -2,6 +2,19 @@ import * as actions from '../actions';
 import * as api from '../api';
 import {all, call, fork, put, takeEvery} from 'redux-saga/effects';
 
+export function *fetchBlocks() {
+  try {
+    const blocks = yield call(api.fetchBlocks);
+    yield put(actions.receiveBlocks(blocks));
+  } catch (e) {
+    yield put(actions.receiveBlocksError());
+  }
+}
+
+export function *watchFetchBlocks() {
+  yield takeEvery(actions.FETCH_BLOCKS, fetchBlocks);
+}
+
 export function *fetchAccounts() {
   try {
     const accounts = yield call(api.fetchAccounts);
@@ -29,5 +42,5 @@ export function *watchFetchProcesses() {
 }
 
 export default function *root() {
-  yield all([fork(watchFetchAccounts), fork(watchFetchProcesses)]);
+  yield all([fork(watchFetchAccounts), fork(watchFetchProcesses), fork(watchFetchBlocks)]);
 }

embark-ui/src/store/configureStore.js

@@ -6,12 +6,14 @@ import history from '../history';
 import rootReducer from '../reducers';
 import saga from '../sagas';
 
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
 export default function configureStore() {
   const sagaMiddleware = createSagaMiddleware();
 
   const store = createStore(
     connectRouter(history)(rootReducer),
-    compose(
+    composeEnhancers(
       applyMiddleware(
         routerMiddleware(history),
         sagaMiddleware

lib/modules/blockchain_connector/index.js

@@ -327,6 +327,46 @@ class BlockchainConnector {
         });
       }
     );
+
+    plugin.registerAPICall(
+      'get',
+      '/embark-api/blockchain/blocks',
+      (req, res) => {
+        let from = req.query.from;
+        let limit = req.query.limit || 10;
+        let results = [];
+        async.waterfall([
+          function(callback) {
+            if (from) {
+              return callback();
+            }
+            self.getBlockNumber((err, blockNumber) => {
+              if (err) {
+                from = 0;
+              } else {
+                from = blockNumber;
+              }
+              callback();
+            });
+          },
+          function(callback) {
+            async.times(limit, function(n, next) {
+              self.web3.eth.getBlock(from - n, function(err, block) {
+                if (err){
+                  return next();
+                }
+                results.push(block);
+                next();
+              });
+            }, function() {
+              callback();
+            });
+          }
+        ], function () {
+          res.send(results);
+        });
+      }
+    );
   }
 
 
@@ -334,6 +374,10 @@ class BlockchainConnector {
     return this.web3.eth.defaultAccount;
   }
 
+  getBlockNumber(cb) {
+    return this.web3.eth.getBlockNumber(cb);
+  }
+
   setDefaultAccount(account) {
     this.web3.eth.defaultAccount = account;
   }