Settings running as dapp

js/src/config/dappsViews.json

@@ -31,5 +31,16 @@
     "version": "2.0.0",
     "visible": true,
     "secure": true
+  },
+  {
+    "id": "settings",
+    "url": "settings",
+    "src": "Settings",
+    "name": "Settings",
+    "description": "Allows the configuraion of all Parity & Parity-UI related options",
+    "author": "Parity Team <admin@ethcore.io>",
+    "version": "2.0.0",
+    "visible": true,
+    "secure": true
   }
 ]

js/src/redux/actions.js

@@ -15,10 +15,11 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import { newError } from '~/ui/Errors/actions';
+
 import { setAddressImage } from './providers/imagesActions';
 import { openSnackbar, showSnackbar } from './providers/snackbarActions';
 import { toggleStatusRefresh } from './providers/statusActions';
-import { toggleView } from '~/views/Settings/actions';
+import { toggleView } from './providers/settings/actions';
 
 export {
   newError,

js/src/redux/middleware.js

@@ -17,7 +17,7 @@ import thunk from 'redux-thunk';
 import { routerMiddleware } from 'react-router-redux';
 
 import ErrorsMiddleware from '~/ui/Errors/middleware';
-import SettingsMiddleware from '~/views/Settings/middleware';
+import SettingsMiddleware from './providers/settings/middleware';
 import SignerMiddleware from './providers/signerMiddleware';
 
 import CertificationsMiddleware from './providers/certifications/middleware';

js/src/redux/providers/index.js

@@ -25,6 +25,7 @@ export workerReducer from './workerReducer';
 export imagesReducer from './imagesReducer';
 export personalReducer from './personalReducer';
 export requestsReducer from './requestsReducer';
+export settingsReducer from './settings/reducers';
 export signerReducer from './signerReducer';
 export snackbarReducer from './snackbarReducer';
 export statusReducer from './statusReducer';

js/src/redux/providers/settings/middleware.js

@@ -16,7 +16,7 @@
 
 import store from 'store';
 
-import defaultViews from './Views/defaults';
+import defaultViews from '~/views/Settings/Views/defaults';
 
 function initBackground (store, api) {
   const backgroundSeed = loadBackground() || api.util.sha3(`${Date.now()}`);

js/src/redux/providers/settings/reducers.js

@@ -16,7 +16,7 @@
 
 import { handleActions } from 'redux-actions';
 
-import views from './Views/defaults';
+import views from '~/views/Settings/Views/defaults';
 
 const initialState = {
   views,

js/src/redux/reducers.js

@@ -20,14 +20,13 @@ import { routerReducer } from 'react-router-redux';
 import {
   apiReducer, balancesReducer,
   workerReducer, imagesReducer, personalReducer, requestsReducer,
-  signerReducer, statusReducer as nodeStatusReducer,
+  settingsReducer, signerReducer, statusReducer as nodeStatusReducer,
   snackbarReducer, tokensReducer, walletReducer
 } from './providers';
 import certificationsReducer from './providers/certifications/reducer';
 import registryReducer from './providers/registry/reducer';
 
 import errorReducer from '~/ui/Errors/reducers';
-import settingsReducer from '~/views/Settings/reducers';
 import tooltipReducer from '~/ui/Tooltips/reducers';
 
 export default function () {

js/src/routes.js

@@ -15,13 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import HistoryStore from '~/mobx/historyStore';
-import {
-  Accounts, Account, Addresses, Address, Application,
-  Contract, Contracts, Dapp, Dapps,
-  Settings, SettingsBackground, SettingsParity, SettingsProxy,
-  SettingsViews, Signer,
-  Wallet, Web, WriteContract
-} from '~/views';
+import { Accounts, Account, Addresses, Address, Application, Contract, Contracts, Dapp, Dapps, Signer, Wallet, Web, WriteContract } from '~/views';
 import builtinDapps from '~/config/dappsBuiltin.json';
 import viewsDapps from '~/config/dappsViews.json';
 
@@ -79,13 +73,6 @@ const contractsRoutes = [
   { path: ':address', component: Contract }
 ];
 
-const settingsRoutes = [
-  { path: 'background', component: SettingsBackground },
-  { path: 'proxy', component: SettingsProxy },
-  { path: 'views', component: SettingsViews },
-  { path: 'parity', component: SettingsParity }
-];
-
 const routes = [
   // Backward Compatible routes
   { path: '/account/:address', onEnter: handleDeprecatedRoute },
@@ -113,11 +100,6 @@ const childRoutes = [
     indexRoute: { component: Contracts },
     childRoutes: contractsRoutes
   },
-  {
-    path: 'settings',
-    component: Settings,
-    childRoutes: settingsRoutes
-  },
   {
     path: 'app/:id',
     component: Dapp,

js/src/views/Settings/Background/background.js

@@ -22,7 +22,7 @@ import NavigationRefresh from 'material-ui/svg-icons/navigation/refresh';
 
 import { Button, Container, ParityBackground } from '~/ui';
 
-import { updateBackground } from '../actions';
+import { updateBackground } from '~/redux/providers/settings/actions';
 
 import layout from '../layout.css';
 import styles from './background.css';

js/src/views/Settings/Views/defaults.js

@@ -16,7 +16,7 @@
 
 import React from 'react';
 
-import { AccountsIcon, AddressesIcon, AppsIcon, ContactsIcon, FingerprintIcon, SettingsIcon } from '~/ui/Icons';
+import { AccountsIcon, AddressesIcon, AppsIcon, ContactsIcon, FingerprintIcon } from '~/ui/Icons';
 
 const defaultViews = {
   accounts: {
@@ -42,7 +42,7 @@ const defaultViews = {
   },
 
   contracts: {
-    active: false,
+    active: true,
     icon: <ContactsIcon />,
     route: '/contracts',
     value: 'contract'
@@ -54,14 +54,6 @@ const defaultViews = {
     icon: <FingerprintIcon />,
     route: '/signer',
     value: 'signer'
-  },
-
-  settings: {
-    active: true,
-    fixed: true,
-    icon: <SettingsIcon />,
-    route: '/settings',
-    value: 'settings'
   }
 };
 

js/src/views/Settings/Views/views.js

@@ -22,7 +22,7 @@ import { Checkbox } from 'material-ui';
 
 import { Container } from '~/ui';
 
-import { toggleView } from '../actions';
+import { toggleView } from '~/redux/providers/settings/actions';
 
 import layout from '../layout.css';
 import styles from './views.css';
@@ -123,17 +123,6 @@ class Views extends Component {
                 />
               )
             }
-            {
-              this.renderView('settings',
-                <FormattedMessage
-                  id='settings.views.settings.label'
-                />,
-                <FormattedMessage
-                  id='settings.views.settings.description'
-                  defaultMessage='This view. Allows you to customize the application in term of options, operation and look and feel.'
-                />
-              )
-            }
           </div>
         </div>
       </Container>

js/src/views/Settings/index.js

@@ -14,22 +14,33 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import settingsReducer from './reducers';
-import { toggleView, updateBackground } from './actions';
+import ReactDOM from 'react-dom';
+import React from 'react';
+import { IndexRedirect, Route, Router, hashHistory } from 'react-router';
+
+import injectTapEventPlugin from 'react-tap-event-plugin';
+injectTapEventPlugin();
+
 import SettingsBackground from './Background';
-import SettingsParity from './Parity';
+import SettingsParity from './Node';
 import SettingsProxy from './Proxy';
-import SettingsViews, { defaultViews } from './Views';
+import SettingsViews from './Views';
+import Main from './main';
 
-export default from './settings';
+import '~/../assets/fonts/Roboto/font.css';
+import '~/../assets/fonts/RobotoMono/font.css';
 
-export {
-  SettingsBackground,
-  SettingsParity,
-  SettingsProxy,
-  SettingsViews,
-  defaultViews,
-  settingsReducer,
-  toggleView,
-  updateBackground
-};
+import './settings.css';
+
+ReactDOM.render(
+  <Router history={ hashHistory }>
+    <Route path='/' component={ Main }>
+      <Route path='/background' component={ SettingsBackground } />
+      <Route path='/parity' component={ SettingsParity } />
+      <Route path='/proxy' component={ SettingsProxy } />
+      <Route path='/views' component={ SettingsViews } />
+      <IndexRedirect to='/views' />
+    </Route>
+  </Router>,
+  document.querySelector('#container')
+);

js/src/views/Settings/main.js

@@ -0,0 +1,42 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { PropTypes } from 'react';
+import { hashHistory } from 'react-router';
+
+import { api } from './parity';
+
+import { initStore } from '~/redux';
+import ContextProvider from '~/ui/ContextProvider';
+import muiTheme from '~/ui/Theme';
+
+import Settings from './settings';
+
+const store = initStore(api, hashHistory);
+
+export default function Main ({ children }) {
+  return (
+    <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+      <Settings>
+        { children }
+      </Settings>
+    </ContextProvider>
+  );
+}
+
+Main.propTypes = {
+  children: PropTypes.node
+};

js/src/views/Settings/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@parity/view-settings",
+  "description": "Parity settings view",
+  "version": "0.0.0",
+  "main": "index.js",
+  "author": "Parity Team <admin@parity.io>",
+  "maintainers": [],
+  "contributors": [],
+  "license": "GPL-3.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/paritytech/parity.git"
+  },
+  "keywords": [],
+  "scripts": {},
+  "devDependencies": {},
+  "dependencies": {},
+  "peerDependencies": {}
+}

js/src/views/Settings/parity.js

@@ -0,0 +1,21 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const api = window.parent.secureApi;
+
+export {
+  api
+};

js/src/views/Settings/settings.js

@@ -22,7 +22,7 @@ import ImageBlurOn from 'material-ui/svg-icons/image/blur-on';
 import ImageRemoveRedEye from 'material-ui/svg-icons/image/remove-red-eye';
 
 import { Actionbar, Page } from '~/ui';
-import imagesEthcoreBlock from '../../../assets/images/parity-logo-white-no-text.svg';
+import imagesEthcoreBlock from '~/../assets/images/parity-logo-white-no-text.svg';
 
 import styles from './settings.css';
 
@@ -92,7 +92,7 @@ export default class Settings extends Component {
     const { router } = this.context;
 
     return (event) => {
-      router.push(`/settings/${section}`);
+      router.push(`/${section}`);
     };
   }
 }

js/src/views/index.js

@@ -24,7 +24,6 @@ export Contracts from './Contracts';
 export Dapp from './Dapp';
 export Dapps from './Dapps';
 export ParityBar from './ParityBar';
-export Settings, { SettingsBackground, SettingsParity, SettingsProxy, SettingsViews } from './Settings';
 export Signer from './Signer';
 export Wallet from './Wallet';
 export Web from './Web';