Ui 2 shell (#5510)

* Split application into ~/shell

* reset.css back to index

js/src/config/dappsViews.json

@@ -90,6 +90,18 @@
     "visible": true,
     "secure": true
   },
+  {
+    "id": "playground",
+    "url": "playground",
+    "src": "Playground",
+    "name": "Playground",
+    "description": "Playground for Parity UI components",
+    "author": "Parity Team <admin@ethcore.io>",
+    "version": "2.0.0",
+    "visible": true,
+    "secure": true,
+    "noselect": true
+  },
   {
     "id": "requests",
     "url": "requests",
@@ -145,5 +157,17 @@
     "visible": true,
     "secure": true,
     "noselect": true
+  },
+  {
+    "id": "web",
+    "url": "web",
+    "src": "Web",
+    "name": "Web",
+    "description": "Embed dapps loaded from the web into the Parity shell",
+    "author": "Parity Team <admin@ethcore.io>",
+    "version": "2.0.0",
+    "visible": true,
+    "secure": true,
+    "noselect": true
   }
 ]

js/src/redux/providers/requestsActions.js

@@ -19,7 +19,7 @@ import BigNumber from 'bignumber.js';
 import { outTransaction } from '@parity/api/format/output';
 
 import { trackRequest as trackRequestUtil, parseTransactionReceipt } from '~/util/tx';
-import SavedRequests from '~/views/Application/Requests/savedRequests';
+import SavedRequests from '~/shell/Application/Requests/savedRequests';
 
 const savedRequests = new SavedRequests();
 

js/src/routes.js

@@ -1,78 +0,0 @@
-// 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 HistoryStore from '~/mobx/historyStore';
-import { Application, Dapp, Dapps, Web } from '~/views';
-import builtinDapps from '~/config/dappsBuiltin.json';
-import viewsDapps from '~/config/dappsViews.json';
-
-const dapps = [].concat(viewsDapps, builtinDapps);
-
-// const accountsHistory = HistoryStore.get('accounts');
-const dappsHistory = HistoryStore.get('dapps');
-
-function redirectTo (path) {
-  return (nextState, replace) => {
-    replace(path);
-  };
-}
-
-const routes = [
-  { path: '/', onEnter: redirectTo('/apps') },
-  { path: '/auth', onEnter: redirectTo('/apps') }
-];
-
-const childRoutes = [
-  {
-    path: 'app/:id',
-    component: Dapp,
-    onEnter: ({ params }) => {
-      if (!dapps[params.id] || !dapps[params.id].skipHistory) {
-        dappsHistory.add(params.id);
-      }
-    }
-  },
-  {
-    path: 'app/:id/:details',
-    component: Dapp,
-    onEnter: ({ params }) => {
-      if (!dapps[params.id] || !dapps[params.id].skipHistory) {
-        dappsHistory.add(params.id);
-      }
-    }
-  },
-  { path: 'apps', component: Dapps },
-  { path: 'web', component: Web },
-  { path: 'web/:url', component: Web }
-];
-
-// TODO: use ES6 imports when supported
-if (process.env.NODE_ENV !== 'production') {
-  const Playground = require('./views/Playground').default;
-
-  childRoutes.push({
-    path: 'playground',
-    component: Playground
-  });
-}
-
-routes.push({
-  path: '/',
-  component: Application,
-  childRoutes
-});
-
-export default routes;

js/src/shell/ParityBar/parityBar.js

@@ -26,8 +26,9 @@ import store from 'store';
 import imagesEthcoreBlock from '~/../assets/images/parity-logo-white-no-text.svg';
 import { AccountCard, Badge, Button, ContainerTitle, IdentityIcon, SelectionList } from '~/ui';
 import { CancelIcon, FingerprintIcon } from '~/ui/Icons';
-import DappsStore from '~/views/Dapps/dappsStore';
+
-import Signer from '~/views/Signer/Embedded';
+import DappsStore from '~/shell/Dapps/dappsStore';
+import Signer from '~/shell/Signer/Embedded';
 
 import AccountStore from './accountStore';
 import styles from './parityBar.css';

js/src/shell/embed.js

@@ -22,7 +22,6 @@ es6Promise.polyfill();
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { AppContainer } from 'react-hot-loader';
 
 import injectTapEventPlugin from 'react-tap-event-plugin';
 
@@ -34,16 +33,15 @@ import ContextProvider from '~/ui/ContextProvider';
 import muiTheme from '~/ui/Theme';
 
 import { patchApi } from '~/util/tx';
-import { setApi } from '~/redux/providers/apiActions';
 
 import '~/environment';
 
-import '../assets/fonts/Roboto/font.css';
+import '~/../assets/fonts/Roboto/font.css';
-import '../assets/fonts/RobotoMono/font.css';
+import '~/../assets/fonts/RobotoMono/font.css';
 
 injectTapEventPlugin();
 
-import ParityBar from '~/views/ParityBar';
+import ParityBar from '~/shell/ParityBar';
 
 // Test transport (std transport should be provided as global object)
 class FakeTransport {
@@ -96,25 +94,15 @@ ContractInstances.get(api);
 
 const store = initStore(api, null, true);
 
-store.dispatch({ type: 'initAll', api });
-store.dispatch(setApi(api));
-
 window.secureApi = api;
 
-const app = (
-  <ParityBar dapp externalLink={ 'http://127.0.0.1:8180' } />
-);
-const container = document.querySelector('#container');
-
 ReactDOM.render(
-  <AppContainer>
   <ContextProvider
     api={ api }
     muiTheme={ muiTheme }
     store={ store }
   >
-      { app }
+    <ParityBar dapp externalLink={ 'http://127.0.0.1:8180' } />
-    </ContextProvider>
+  </ContextProvider>,
-  </AppContainer>,
+  document.querySelector('#container')
-  container
 );

js/src/shell/index.js

@@ -22,26 +22,29 @@ es6Promise.polyfill();
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { AppContainer } from 'react-hot-loader';
 
 import injectTapEventPlugin from 'react-tap-event-plugin';
-import { hashHistory } from 'react-router';
+import { IndexRoute, Redirect, Route, Router, hashHistory } from 'react-router';
 import qs from 'querystring';
 
-import SecureApi from './secureApi';
+import SecureApi from '~/secureApi';
 import ContractInstances from '~/contracts';
 
-import { initStore } from './redux';
+import { initStore } from '~/redux';
 import ContextProvider from '~/ui/ContextProvider';
 import muiTheme from '~/ui/Theme';
-import MainApplication from './main';
-
 import { patchApi } from '~/util/tx';
 
-import './environment';
+import Application from './Application';
+import Dapp from './Dapp';
+import Dapps from './Dapps';
 
-import '../assets/fonts/Roboto/font.css';
+import styles from '~/reset.css';
-import '../assets/fonts/RobotoMono/font.css';
+
+import '~/environment';
+
+import '~/../assets/fonts/Roboto/font.css';
+import '~/../assets/fonts/RobotoMono/font.css';
 
 injectTapEventPlugin();
 
@@ -71,26 +74,30 @@ const store = initStore(api, hashHistory);
 
 window.secureApi = api;
 
+import HistoryStore from '~/mobx/historyStore';
+import builtinDapps from '~/config/dappsBuiltin.json';
+import viewsDapps from '~/config/dappsViews.json';
+
+const dapps = [].concat(viewsDapps, builtinDapps);
+
+const dappsHistory = HistoryStore.get('dapps');
+
+function onEnterDapp ({ params }) {
+  if (!dapps[params.id] || !dapps[params.id].skipHistory) {
+    dappsHistory.add(params.id);
+  }
+}
+
 ReactDOM.render(
-  <AppContainer>
   <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
-      <MainApplication routerHistory={ hashHistory } />
+    <Router className={ styles.reset } history={ hashHistory }>
-    </ContextProvider>
+      <Route path='/' component={ Application }>
-  </AppContainer>,
+        <Redirect from='/auth' to='/' />
+        <Route path='/:id' component={ Dapp } onEnter={ onEnterDapp } />
+        <Route path='/:id/:details' component={ Dapp } onEnter={ onEnterDapp } />
+        <IndexRoute component={ Dapps } />
+      </Route>
+    </Router>
+  </ContextProvider>,
   document.querySelector('#container')
 );
-
-if (module.hot) {
-  module.hot.accept('./main.js', () => {
-    require('./main.js');
-
-    ReactDOM.render(
-      <AppContainer>
-        <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
-          <MainApplication routerHistory={ hashHistory } />
-        </ContextProvider>
-      </AppContainer>,
-      document.querySelector('#container')
-    );
-  });
-}