Add explorer overview page

Explorer “dashboard” or overview page has been added to give an overview of what can be seen on the individual explorer pages.

Needs work for exact routes not highlighting the overview page.

embark-ui/src/components/ExplorerDashboardLayout.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import {
+  Page,
+  Grid
+} from "tabler-react";
+
+import AccountsContainer from '../containers/AccountsContainer';
+import BlocksContainer from '../containers/BlocksContainer';
+import TransactionsContainer from '../containers/TransactionsContainer';
+
+const ExplorerDashboardLayout = () => (
+  <React.Fragment>
+    <Grid.Row md={12}>
+      <Grid.Col>
+        <Page.Title className="my-5">Explorer</Page.Title>
+      </Grid.Col>
+    </Grid.Row>
+    <Grid.Row>
+      <Grid.Col className="pl-md-0 pr-md-0 ml-md-0 mr-md-0 pr-lg-3 mr-lg-3 pl-lg-2 ml-lg-2">
+        <AccountsContainer />
+      </Grid.Col>
+    </Grid.Row>
+    <Grid.Row>
+      <Grid.Col md={6}>
+        <BlocksContainer />
+      </Grid.Col>
+      <Grid.Col md={6}>
+        <TransactionsContainer />
+      </Grid.Col>
+    </Grid.Row>
+  </React.Fragment>
+);
+
+export default ExplorerDashboardLayout;

embark-ui/src/components/ExplorerLayout.js

@@ -1,5 +1,10 @@
 import React from 'react';
-import {Route, Switch} from 'react-router-dom';
+import {NavLink, Route, Switch} from 'react-router-dom';
+import {
+  Page,
+  Grid,
+  List
+} from "tabler-react";
 
 import AccountsContainer from '../containers/AccountsContainer';
 import AccountContainer from '../containers/AccountContainer';
@@ -8,15 +13,47 @@ import BlockContainer from '../containers/BlockContainer';
 import TransactionsContainer from '../containers/TransactionsContainer';
 import TransactionContainer from '../containers/TransactionContainer';
 
+const groupItems = [
+  {to: "/embark/explorer", icon: "compass", value: "Overview", exact: true},
+  {to: "/embark/explorer/accounts", icon: "users", value: "Accounts"},
+  {to: "/embark/explorer/blocks", icon: "book-open", value: "Blocks"},
+  {to: "/embark/explorer/transactions", icon: "activity", value: "Transactions"}
+];
+
+const className = "d-flex align-items-center";
+
 const ExplorerLayout = () => (
-  <Switch>
+  <Grid.Row>
-    <Route exact path="/embark/explorer/accounts" component={AccountsContainer} />
+    <Grid.Col md={3}>
-    <Route exact path="/embark/explorer/accounts/:address" component={AccountContainer} />
+      <Page.Title className="my-5">Explorer</Page.Title>
-    <Route exact path="/embark/explorer/blocks" component={BlocksContainer} />
+      <div>
-    <Route exact path="/embark/explorer/blocks/:blockNumber" component={BlockContainer} />
+        <List.Group transparent={true}>
-    <Route exact path="/embark/explorer/transactions" component={TransactionsContainer} />
+          {groupItems.map((groupItem) => (
-    <Route exact path="/embark/explorer/transactions/:hash" component={TransactionContainer} />
+            <List.GroupItem
-  </Switch>
+              key={groupItem.value}
+              className={className}
+              to={groupItem.to}
+              icon={groupItem.icon}
+              RootComponent={NavLink}
+              exact={groupItem.exact || false}
+            >
+              {groupItem.value}
+            </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/accounts/:address" component={AccountContainer} />
+        <Route exact path="/embark/explorer/blocks" component={BlocksContainer} />
+        <Route exact path="/embark/explorer/blocks/:blockNumber" component={BlockContainer} />
+        <Route exact path="/embark/explorer/transactions" component={TransactionsContainer} />
+        <Route exact path="/embark/explorer/transactions/:hash" component={TransactionContainer} />
+      </Switch>
+    </Grid.Col>
+  </Grid.Row>
 );
 
 export default ExplorerLayout;

embark-ui/src/components/Layout.js

@@ -23,7 +23,8 @@ const sidebarNavItems = {items: [
   {name: "Dashboard", url: "/embark", icon: 'fa fa-tachometer'},
   {name: "Deployment", url: "/embark/deployment", icon: "fa fa-arrow-up"},
   {name: "Contracts", url: "/embark/contracts", icon: "fa fa-file-text"},
-  {name: "Explorer", url: "/embark/explorer/accounts", icon: "fa fa-signal", children: [
+  {name: "Explorer", url: "/embark/explorer", icon: "fa fa-signal", children: [
+    {url: "/embark/explorer", icon: "fa fa-compass", name: "Overview", exact: true},
     {url: "/embark/explorer/accounts", icon: "fa fa-users", name: "Accounts"},
     {url: "/embark/explorer/blocks", icon: "fa fa-stop", name: "Blocks"},
     {url: "/embark/explorer/transactions", icon: "fa fa-tree", name: "Transactions"},

embark-ui/src/routes.js

@@ -6,6 +6,7 @@ import ContractsContainer from './containers/ContractsContainer';
 import ContractLayoutContainer from './containers/ContractLayoutContainer';
 import DeploymentContainer from './containers/DeploymentContainer';
 import NoMatch from './components/NoMatch';
+import ExplorerDashboardLayout from './components/ExplorerDashboardLayout';
 import ExplorerLayout from './components/ExplorerLayout';
 import FiddleLayout from './components/FiddleLayout';
 import UtilsLayout from './components/UtilsLayout';
@@ -14,7 +15,8 @@ const routes = (
   <React.Fragment>
     <Switch>
       <Route exact path="/embark/" component={HomeContainer} />
-      <Route path="/embark/explorer/" component={ExplorerLayout} />
+      <Route exact path="/embark/explorer" component={ExplorerDashboardLayout} />
+      <Route path="/embark/explorer" component={ExplorerLayout} />
       <Route path="/embark/deployment/" component={DeploymentContainer} />
       <Route path="/embark/contracts/:contractName" component={ContractLayoutContainer} />
       <Route path="/embark/contracts" component={ContractsContainer} />