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}) => ( - - - - - {credentials.authenticated && - - Connected on {credentials.host} - - } - - - - - ) - }} - navProps={{itemsObjects: navBarItems(tabs)}} - > - - {children} - - +const Layout = ({children, logout, credentials, location}) => ( +
+ + + + + + +
+ + + + + + + +
+ + {children} + +
+ + +
+ + + Embark  + Documentation +  |  + Github + + +
); Layout.propTypes = { diff --git a/embark-ui/src/containers/AppContainer.js b/embark-ui/src/containers/AppContainer.js index 12cd7150..a8b934a6 100644 --- a/embark-ui/src/containers/AppContainer.js +++ b/embark-ui/src/containers/AppContainer.js @@ -13,7 +13,7 @@ import { plugins as pluginsAction } from '../actions'; -import { getTabs, getCredentials, getAuthenticationError, getVersions } from '../reducers/selectors'; +import { getCredentials, getAuthenticationError, getVersions } from '../reducers/selectors'; const qs = require('qs'); @@ -62,7 +62,7 @@ class AppContainer extends Component { render() { return ( - + {this.shouldRenderUnauthenticated() ? : {routes}} @@ -73,7 +73,6 @@ class AppContainer extends Component { AppContainer.propTypes = { credentials: PropTypes.object, - tabs: PropTypes.arrayOf(PropTypes.object), initialized: PropTypes.bool, authenticationError: PropTypes.string, authenticate: PropTypes.func, @@ -90,7 +89,6 @@ function mapStateToProps(state) { return { initialized: getVersions(state).length > 0, credentials: getCredentials(state), - tabs: getTabs(state), authenticationError: getAuthenticationError(state) }; } diff --git a/embark-ui/src/index.js b/embark-ui/src/index.js index 3b41ef57..4f5325cb 100644 --- a/embark-ui/src/index.js +++ b/embark-ui/src/index.js @@ -3,9 +3,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; import {Provider} from 'react-redux'; -import "tabler-react/dist/Tabler.css"; -import "./general.css"; -import "./slider.css"; +import 'font-awesome/css/font-awesome.min.css'; +import '@coreui/coreui/dist/css/coreui.min.css'; import AppContainer from './containers/AppContainer'; import history from "./history"; diff --git a/embark-ui/src/reducers/index.js b/embark-ui/src/reducers/index.js index 52170116..c76dcf06 100644 --- a/embark-ui/src/reducers/index.js +++ b/embark-ui/src/reducers/index.js @@ -191,28 +191,6 @@ function baseEther(state = '1', action) { return state; } -const DEFAULT_TABS = [ - {value: "Contracts", to: "/embark/contracts", icon: "box", base: '/embark/contracts'}, - {value: "Explorer", to: "/embark/explorer/accounts", icon: "activity", base: '/embark/explorer'}, - {value: "Fiddle", to: "/embark/fiddle", icon: "codepen", base: '/embark/fiddle'}, - {value: "Documentation", to: "/embark/documentation", icon: "file-text", base: '/embark/documentation'}, - {value: "Utils", to: "/embark/utilities/converter", icon: "settings", base: '/embark/utilities'} -]; - -function tabs(state = DEFAULT_TABS, action) { - if (action.type === '@@router/LOCATION_CHANGE'){ - const newState = [...state]; - const activeTab = newState.find(tab => action.payload.location.pathname.startsWith(tab.base)); - if (activeTab) { - activeTab.to = action.payload.location.pathname; - return newState; - } - - return state; - } - return state; -} - const rootReducer = combineReducers({ entities, loading, @@ -220,8 +198,7 @@ const rootReducer = combineReducers({ errorMessage, errorEntities, credentials, - baseEther, - tabs + baseEther }); export default rootReducer; diff --git a/embark-ui/src/reducers/selectors.js b/embark-ui/src/reducers/selectors.js index e3d965e0..dad78cfd 100644 --- a/embark-ui/src/reducers/selectors.js +++ b/embark-ui/src/reducers/selectors.js @@ -159,8 +159,4 @@ export function getCurrentFile(state) { export function getBaseEther(state) { return state.baseEther; -} - -export function getTabs(state) { - return state.tabs; -} +} \ No newline at end of file