diff --git a/embark-ui/package-lock.json b/embark-ui/package-lock.json
index 632b2112..435d31b3 100644
--- a/embark-ui/package-lock.json
+++ b/embark-ui/package-lock.json
@@ -4,6 +4,48 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
+ "@coreui/coreui": {
+ "version": "2.0.15",
+ "resolved": "https://registry.npmjs.org/@coreui/coreui/-/coreui-2.0.15.tgz",
+ "integrity": "sha512-hCXFnwNxfMlD/z6hhdvgUgDb2ySqGKEjhvNqqXE7jIhhNHJ5UDKT5AdvIJaZIenCSL4W6og6Q0rK1RkuLQOlYg==",
+ "requires": {
+ "@coreui/coreui-plugin-npm-postinstall": "^1.0.2",
+ "bootstrap": "^4.1.3"
+ }
+ },
+ "@coreui/coreui-plugin-npm-postinstall": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/@coreui/coreui-plugin-npm-postinstall/-/coreui-plugin-npm-postinstall-1.0.2.tgz",
+ "integrity": "sha512-yeeoWp+bNS84nP1977Y8UCiQ9pssO+f4QuVj3i0/gYZFjjvOgxx0dnyWhtowD5sLYnCRMPlPpqyjwXze3SlkYg=="
+ },
+ "@coreui/icons": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/@coreui/icons/-/icons-0.3.0.tgz",
+ "integrity": "sha512-RbBi5K5hUA8LUI9mM/i1BTaLjlyoS6kHwKbxWsH62+/j9L9WF8gAiJUhrNjMt1br8TY9RLeolyQys0E9480fIg=="
+ },
+ "@coreui/react": {
+ "version": "2.0.9",
+ "resolved": "https://registry.npmjs.org/@coreui/react/-/react-2.0.9.tgz",
+ "integrity": "sha512-vNURaDHxoc4RyuAMZYPoXHQ7iS4piyTJjyJeAVIHfn7sbqdLjoD5AuKiESnigWDsTteWNbLbVIL3BoxvM0l+Kw==",
+ "requires": {
+ "@coreui/icons": "0.3.0",
+ "classnames": "^2.2.6",
+ "core-js": "^2.5.7",
+ "element-closest": "^2.0.2",
+ "prop-types": "^15.6.2",
+ "react-onclickout": "^2.0.8",
+ "react-perfect-scrollbar": "^1.2.2",
+ "react-router-dom": "^4.3.1",
+ "reactstrap": "^6.5.0"
+ },
+ "dependencies": {
+ "core-js": {
+ "version": "2.5.7",
+ "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
+ "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw=="
+ }
+ }
+ },
"abab": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz",
@@ -1432,6 +1474,11 @@
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
+ "bootstrap": {
+ "version": "4.1.3",
+ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.3.tgz",
+ "integrity": "sha512-rDFIzgXcof0jDyjNosjv4Sno77X4KuPeFxG2XZZv1/Kc8DRVGVADdoQyyOVDwPqL36DDmtCQbrpMCqvpPLJQ0w=="
+ },
"bowser": {
"version": "1.9.4",
"resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
@@ -2922,6 +2969,11 @@
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.52.tgz",
"integrity": "sha1-0tnxJwuko7lnuDHEDvcftNmrXOA="
},
+ "element-closest": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/element-closest/-/element-closest-2.0.2.tgz",
+ "integrity": "sha1-cqdAoQdFM4LijfnOXbtajfD5Zuw="
+ },
"elliptic": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.0.tgz",
@@ -3968,6 +4020,11 @@
}
}
},
+ "font-awesome": {
+ "version": "4.7.0",
+ "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+ "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+ },
"for-in": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -6652,6 +6709,16 @@
"resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
"integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
},
+ "lodash.isfunction": {
+ "version": "3.0.9",
+ "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
+ "integrity": "sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw=="
+ },
+ "lodash.isobject": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
+ "integrity": "sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0="
+ },
"lodash.keys": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
@@ -6684,6 +6751,11 @@
"lodash._reinterpolate": "~3.0.0"
}
},
+ "lodash.tonumber": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/lodash.tonumber/-/lodash.tonumber-4.0.3.tgz",
+ "integrity": "sha1-C5azGzVnJ5Prf1pj7nkfG56QJdk="
+ },
"lodash.uniq": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -7546,6 +7618,11 @@
"sha.js": "^2.4.8"
}
},
+ "perfect-scrollbar": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.4.0.tgz",
+ "integrity": "sha512-/2Sk/khljhdrsamjJYS5NjrH+GKEHEwh7zFSiYyxROyYKagkE4kSn2zDQDRTOMo8mpT2jikxx6yI1dG7lNP/hw=="
+ },
"performance-now": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -9101,6 +9178,20 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
+ "react-onclickout": {
+ "version": "2.0.8",
+ "resolved": "https://registry.npmjs.org/react-onclickout/-/react-onclickout-2.0.8.tgz",
+ "integrity": "sha1-0XixP7h6SBNWdhtFSqYN9wabLaQ="
+ },
+ "react-perfect-scrollbar": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/react-perfect-scrollbar/-/react-perfect-scrollbar-1.2.2.tgz",
+ "integrity": "sha512-G+gRBZUXU5wORhtHd3rGH3zlMMejiHbNmYwGwxT1GedjCImEW5w2IJqrZS8JofNdiazYW7a5wA1niui1U6KDxA==",
+ "requires": {
+ "perfect-scrollbar": "^1.3.0",
+ "prop-types": "^15.6.1"
+ }
+ },
"react-popper": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.0.0.tgz",
@@ -9204,6 +9295,32 @@
"velocity-react": "^1.3.1"
}
},
+ "reactstrap": {
+ "version": "6.5.0",
+ "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-6.5.0.tgz",
+ "integrity": "sha512-dWb3fB/wBAiQloteKlf+j9Nl2VLe6BMZgTEt6hpeTt0t9TwtkeU+2v2NBYONZaF4FZATfMiIKozhWpc2HmLW1g==",
+ "requires": {
+ "classnames": "^2.2.3",
+ "lodash.isfunction": "^3.0.9",
+ "lodash.isobject": "^3.0.2",
+ "lodash.tonumber": "^4.0.3",
+ "prop-types": "^15.5.8",
+ "react-lifecycles-compat": "^3.0.4",
+ "react-popper": "^0.10.4",
+ "react-transition-group": "^2.3.1"
+ },
+ "dependencies": {
+ "react-popper": {
+ "version": "0.10.4",
+ "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.10.4.tgz",
+ "integrity": "sha1-rypBXqIike3VBGeNev2opu4ylao=",
+ "requires": {
+ "popper.js": "^1.14.1",
+ "prop-types": "^15.6.1"
+ }
+ }
+ }
+ },
"read-pkg": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
diff --git a/embark-ui/package.json b/embark-ui/package.json
index fd286802..f61590f6 100644
--- a/embark-ui/package.json
+++ b/embark-ui/package.json
@@ -3,6 +3,8 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "@coreui/coreui": "^2.0.15",
+ "@coreui/react": "^2.0.9",
"ansi-to-html": "^0.6.6",
"autoprefixer": "7.1.6",
"autoscroll-react": "^3.2.0",
@@ -30,6 +32,7 @@
"ethereumjs-units": "0.2.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
+ "font-awesome": "^4.7.0",
"fs-extra": "3.0.1",
"history": "^4.7.2",
"html-webpack-plugin": "2.29.0",
diff --git a/embark-ui/src/components/Layout.js b/embark-ui/src/components/Layout.js
index 61439dfc..9c33977a 100644
--- a/embark-ui/src/components/Layout.js
+++ b/embark-ui/src/components/Layout.js
@@ -1,63 +1,86 @@
import React from 'react';
-import {NavLink} from "react-router-dom";
-import {Site, Nav, Button, Container} from "tabler-react";
import PropTypes from 'prop-types';
+import { DropdownItem, DropdownMenu, DropdownToggle, Nav, Container } from 'reactstrap';
+
+import {
+ AppAside,
+ AppFooter,
+ AppHeader,
+ AppSidebar,
+ AppSidebarFooter,
+ AppSidebarForm,
+ AppSidebarHeader,
+ AppSidebarMinimizer,
+ AppSidebarNav,
+ AppSidebarToggler,
+ AppNavbarBrand,
+ AppHeaderDropdown
+} from '@coreui/react';
import logo from '../images/logo.png';
-const navBarItems = (tabs) => {
- const homeTab = {value: "Home", to: "/embark", icon: "home", LinkComponent: NavLink};
+const sidebarNavItems = {items: [
+ {name: "Dashboard", url: "/embark", icon: 'fa fa-tachometer'},
+ {name: "Contracts", url: "/embark/contracts", icon: "fa fa-file-text"},
+ {name: "Explorer", url: "/embark/explorer/accounts", icon: "fa fa-signal", children: [
+ {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"},
+ {url: "/embark/explorer/communication", icon: "fa fa-phone", name: "Communication"},
+ {url: "/embark/explorer/ens", icon: "fa fa-circle", name: "ENS"}
+ ]},
+ {name: "Fiddle", url: "/embark/fiddle", icon: "fa fa-codepen"},
+ {name: "Documentation", url: "/embark/documentation", icon: "fa fa-book"},
+ {name: "Utils", url: "/embark/utilities/converter", icon: "fa fa-cog", children: [
+ {url: "/embark/utilities/converter", icon: "fa fa-plug", name: "Converter"}
+ ]},
+]};
- const generatedTabs = tabs.map(tab => (
- {LinkComponent: NavLink, ...tab}
- ));
-
- return [homeTab, ...generatedTabs];
-}
-
-const Layout = ({children, logout, credentials, tabs}) => (
-