Working HOT RELOAD !!

js/src/index.js

@@ -22,17 +22,20 @@ 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 { createHashHistory } from 'history';
-import { Redirect, Router, Route, useRouterHistory } from 'react-router';
+import { useRouterHistory } from 'react-router';
 import qs from 'querystring';
 
 import SecureApi from './secureApi';
 import ContractInstances from './contracts';
 
 import { initStore } from './redux';
-import { ContextProvider, muiTheme } from './ui';
-import { Accounts, Account, Addresses, Address, Application, Contract, Contracts, WriteContract, Dapp, Dapps, Settings, SettingsBackground, SettingsParity, SettingsProxy, SettingsViews, Signer, Status } from './views';
+import ContextProvider from './ui/ContextProvider';
+import muiTheme from './ui/Theme';
+import MainApplication from './main';
 
 import { setApi } from './redux/providers/apiActions';
 
@@ -41,8 +44,6 @@ import './environment';
 import '../assets/fonts/Roboto/font.css';
 import '../assets/fonts/RobotoMono/font.css';
 
-import styles from './reset.css';
-
 injectTapEventPlugin();
 
 if (process.env.NODE_ENV === 'development') {
@@ -76,32 +77,47 @@ window.secureApi = api;
 const routerHistory = useRouterHistory(createHashHistory)({});
 
 ReactDOM.render(
-  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
-    <Router className={ styles.reset } history={ routerHistory }>
-      <Redirect from='/' to='/accounts' />
-      <Redirect from='/auth' to='/accounts' query={ {} } />
-      <Redirect from='/settings' to='/settings/views' />
-      <Route path='/' component={ Application }>
-        <Route path='accounts' component={ Accounts } />
-        <Route path='account/:address' component={ Account } />
-        <Route path='addresses' component={ Addresses } />
-        <Route path='address/:address' component={ Address } />
-        <Route path='apps' component={ Dapps } />
-        <Route path='app/:id' component={ Dapp } />
-        <Route path='contracts' component={ Contracts } />
-        <Route path='contracts/write' component={ WriteContract } />
-        <Route path='contract/:address' component={ Contract } />
-        <Route path='settings' component={ Settings }>
-          <Route path='background' component={ SettingsBackground } />
-          <Route path='proxy' component={ SettingsProxy } />
-          <Route path='views' component={ SettingsViews } />
-          <Route path='parity' component={ SettingsParity } />
-        </Route>
-        <Route path='signer' component={ Signer } />
-        <Route path='status' component={ Status } />
-        <Route path='status/:subpage' component={ Status } />
-      </Route>
-    </Router>
-  </ContextProvider>,
+  <AppContainer>
+    <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+      <MainApplication
+        routerHistory={ routerHistory }
+      />
+    </ContextProvider>
+  </AppContainer>,
   document.querySelector('#container')
 );
+
+if (module.hot) {
+  // module.hot.accept('./redux', () => {
+  //   // redux store has a method replaceReducer
+  //   // const newStore = initStore(api);
+  //   console.warn('REDUX UPDATE');
+  //   // store.replaceReducer(appReducer);
+
+  //   // ReactDOM.render(
+  //   //   <AppContainer>
+  //   //     <ContextProvider api={ api } muiTheme={ muiTheme } store={ newStore }>
+  //   //       <MainApplication
+  //   //         routerHistory={ routerHistory }
+  //   //       />
+  //   //     </ContextProvider>
+  //   //   </AppContainer>,
+  //   //   document.querySelector('#container')
+  //   // );
+  // });
+
+  module.hot.accept('./main.js', () => {
+    require('./main.js');
+
+    ReactDOM.render(
+      <AppContainer>
+        <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+          <MainApplication
+            routerHistory={ routerHistory }
+          />
+        </ContextProvider>
+      </AppContainer>,
+      document.querySelector('#container')
+    );
+  });
+}

js/src/main.js

@@ -0,0 +1,60 @@
+// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
+import { Redirect, Router, Route } from 'react-router';
+
+import { Accounts, Account, Addresses, Address, Application, Contract, Contracts, WriteContract, Dapp, Dapps, Settings, SettingsBackground, SettingsParity, SettingsProxy, SettingsViews, Signer, Status } from './views';
+
+import styles from './reset.css';
+
+export default class MainApplication extends Component {
+  static propTypes = {
+    routerHistory: PropTypes.any.isRequired
+  };
+
+  render () {
+    const { routerHistory } = this.props;
+
+    return (
+      <Router className={ styles.reset } history={ routerHistory }>
+        <Redirect from='/' to='/accounts' />
+        <Redirect from='/auth' to='/accounts' query={ {} } />
+        <Redirect from='/settings' to='/settings/views' />
+        <Route path='/' component={ Application }>
+          <Route path='accounts' component={ Accounts } />
+          <Route path='account/:address' component={ Account } />
+          <Route path='addresses' component={ Addresses } />
+          <Route path='address/:address' component={ Address } />
+          <Route path='apps' component={ Dapps } />
+          <Route path='app/:id' component={ Dapp } />
+          <Route path='contracts' component={ Contracts } />
+          <Route path='contracts/write' component={ WriteContract } />
+          <Route path='contract/:address' component={ Contract } />
+          <Route path='settings' component={ Settings }>
+            <Route path='background' component={ SettingsBackground } />
+            <Route path='proxy' component={ SettingsProxy } />
+            <Route path='views' component={ SettingsViews } />
+            <Route path='parity' component={ SettingsParity } />
+          </Route>
+          <Route path='signer' component={ Signer } />
+          <Route path='status' component={ Status } />
+          <Route path='status/:subpage' component={ Status } />
+        </Route>
+      </Router>
+    );
+  }
+}

js/src/redux/actions.js

@@ -17,7 +17,7 @@
 import { newError } from '../ui/Errors/actions';
 import { setAddressImage } from './providers/imagesActions';
 import { clearStatusLogs, toggleStatusLogs, toggleStatusRefresh } from './providers/statusActions';
-import { toggleView } from '../views/Settings';
+import { toggleView } from '../views/Settings/actions';
 
 export {
   newError,

js/src/redux/reducers.js

@@ -19,9 +19,9 @@ import { routerReducer } from 'react-router-redux';
 
 import { apiReducer, balancesReducer, blockchainReducer, compilerReducer, imagesReducer, personalReducer, signerReducer, statusReducer as nodeStatusReducer } from './providers';
 
-import { errorReducer } from '../ui/Errors';
-import { settingsReducer } from '../views/Settings';
-import { tooltipReducer } from '../ui/Tooltips';
+import errorReducer from '../ui/Errors/reducers';
+import settingsReducer from '../views/Settings/reducers';
+import tooltipReducer from '../ui/Tooltips/reducers';
 
 export default function () {
   return combineReducers({