Home as dapp

js/src/config/dappsViews.json

@@ -0,0 +1,13 @@
+[
+  {
+    "id": "viewHome",
+    "url": "viewHome",
+    "src": "Home",
+    "name": "Home",
+    "description": "Display a status of the node, recently accessed applications, accounts and news",
+    "author": "Parity Team <admin@ethcore.io>",
+    "version": "2.0.0",
+    "visible": true,
+    "secure": true
+  }
+]

js/src/contracts/contracts.js

@@ -69,15 +69,11 @@ export default class Contracts {
     return verification;
   }
 
-  static create (api) {
+  static get (api) {
-    if (instance) {
+    if (!instance) {
-      return instance;
+      instance = new Contracts(api);
     }
 
-    return new Contracts(api);
-  }
-
-  static get () {
     return instance;
   }
 }

js/src/dapps/chaindeploy/_dapps.js

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import builtinsJson from '~/views/Dapps/builtin.json';
+import builtinsJson from '~/config/dappsBuiltin.json';
 
 const REGISTER_URLS = {
   console: 'https://raw.githubusercontent.com/paritytech/console/3ea0dbfefded359ccdbea37bc4cf350c0aa16948/console.jpeg',

js/src/dapps/chaindeploy/dapps/console.js

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import builtins from '~/views/Dapps/builtin.json';
+import builtins from '~/config/dappsBuiltin.json';
 
 const id = 'console';
 const app = builtins.find((app) => app.url === id);

js/src/dapps/chaindeploy/dapps/dappreg.js

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import builtins from '~/views/Dapps/builtin.json';
+import builtins from '~/config/dappsBuiltin.json';
 
 const id = 'dappreg';
 const app = builtins.find((app) => app.url === id);

js/src/dapps/chaindeploy/dapps/githubhint.js

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import builtins from '~/views/Dapps/builtin.json';
+import builtins from '~/config/dappsBuiltin.json';
 
 const id = 'githubhint';
 const app = builtins.find((app) => app.url === id);

js/src/dapps/chaindeploy/dapps/localtx.js

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import builtins from '~/views/Dapps/builtin.json';
+import builtins from '~/config/dappsBuiltin.json';
 
 const id = 'localtx';
 const app = builtins.find((app) => app.url === id);

js/src/dapps/chaindeploy/dapps/registry.js

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import builtins from '~/views/Dapps/builtin.json';
+import builtins from '~/config/dappsBuiltin.json';
 
 const id = 'registry';
 const app = builtins.find((app) => app.url === id);

js/src/dapps/chaindeploy/dapps/signaturereg.js

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import builtins from '~/views/Dapps/builtin.json';
+import builtins from '~/config/dappsBuiltin.json';
 
 const id = 'signaturereg';
 const app = builtins.find((app) => app.url === id);

js/src/dapps/chaindeploy/dapps/tokendeploy.js

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import builtins from '~/views/Dapps/builtin.json';
+import builtins from '~/config/dappsBuiltin.json';
 
 const id = 'tokendeploy';
 const app = builtins.find((app) => app.url === id);

js/src/dapps/chaindeploy/dapps/tokenreg.js

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import builtins from '~/views/Dapps/builtin.json';
+import builtins from '~/config/dappsBuiltin.json';
 
 const id = 'tokenreg';
 const app = builtins.find((app) => app.url === id);

js/src/dapps/chaindeploy/dapps/web.js

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import builtins from '~/views/Dapps/builtin.json';
+import builtins from '~/config/dappsBuiltin.json';
 
 const id = 'web';
 const app = builtins.find((app) => app.url === id);

js/src/dapps/dappreg/dappsStore.js

@@ -20,7 +20,7 @@ import { flatten } from 'lodash';
 
 import * as abis from '~/contracts/abi';
 import Contracts from '~/contracts';
-import builtinJson from '~/views/Dapps/builtin.json';
+import builtinJson from '~/config/dappsBuiltin.json';
 
 import Dapp from './dappStore.js';
 import { deleteDapp, registerDapp, updateDapp } from './utils';
@@ -489,7 +489,7 @@ export default class DappsStore {
   }
 
   _loadRegistry () {
-    return Contracts.create(api).registry
+    return Contracts.get(api).registry
       .fetchContract()
       .then((contract) => {
         this._registry = contract.instance;

js/src/dapps/registry/actions.js

@@ -44,7 +44,7 @@ export const fetchIsTestnet = () => (dispatch) =>
 export const setContract = (contract) => ({ type: 'set contract', contract });
 
 export const fetchContract = () => (dispatch) => {
-  return Contracts.create(api).registry
+  return Contracts.get(api).registry
     .fetchContract()
     .then((contract) => {
       dispatch(setContract(contract));

js/src/embed.js

@@ -92,7 +92,7 @@ class FrameSecureApi extends SecureApi {
 const api = new FrameSecureApi(window.secureTransport || new FakeTransport());
 
 patchApi(api);
-ContractInstances.create(api);
+ContractInstances.get(api);
 
 const store = initStore(api, null, true);
 

js/src/index.js

@@ -66,7 +66,7 @@ if (window.location.hash && window.location.hash.indexOf(AUTH_HASH) === 0) {
 const api = new SecureApi(`${urlScheme}${parityUrl}`, token);
 
 patchApi(api);
-ContractInstances.create(api);
+ContractInstances.get(api);
 
 const store = initStore(api, hashHistory);
 

js/src/modals/Verification/store.js

@@ -51,12 +51,12 @@ export default class VerificationStore {
   @observable confirmationTx = null;
 
   constructor (api, abi, certifierName, account, isTestnet) {
-    this.api = api;
+    this._api = api;
     this.account = account;
     this.isTestnet = isTestnet;
 
     this.step = LOADING;
-    Contracts.get().badgeReg.fetchCertifierByName(certifierName)
+    Contracts.get(this._api).badgeReg.fetchCertifierByName(certifierName)
       .then(({ address }) => {
         this.contract = new Contract(api, abi).at(address);
         this.load();

js/src/redux/middleware.js

@@ -37,7 +37,7 @@ export default function (api, browserHistory, forEmbed = false) {
   ];
 
   if (!forEmbed) {
-    const certifications = new CertificationsMiddleware().toMiddleware();
+    const certifications = new CertificationsMiddleware().toMiddleware(api);
     const registry = new RegistryMiddleware(api);
 
     middleware.push(certifications, registry);

js/src/redux/providers/balances.js

@@ -270,7 +270,7 @@ export default class Balances {
   }
 
   getTokenRegistry () {
-    return Contracts.get().tokenReg.getContract();
+    return Contracts.get(this._api).tokenReg.getContract();
   }
 
   _loadTokens (options = {}) {

js/src/redux/providers/certifications/middleware.js

@@ -59,9 +59,8 @@ const updatableFilter = (api, onFilter) => {
 };
 
 export default class CertificationsMiddleware {
-  toMiddleware () {
+  toMiddleware (api) {
-    const api = Contracts.get()._api;
+    const badgeReg = Contracts.get(api).badgeReg;
-    const badgeReg = Contracts.get().badgeReg;
 
     const contract = new Contract(api, CertifierABI);
     const Confirmed = contract.events.find((e) => e.name === 'Confirmed');

js/src/redux/providers/chainMiddleware.spec.js

@@ -28,7 +28,7 @@ let clock;
 
 const api = createWsApi();
 
-Contracts.create(api);
+Contracts.get(api);
 
 function stubGlobals () {
   clock = sinon.useFakeTimers();

js/src/redux/providers/registry/middleware.js

@@ -90,7 +90,7 @@ export default (api) => (store) => {
         break;
 
       case 'startCachingReverses':
-        const { registry } = Contracts.get();
+        const { registry } = Contracts.get(api);
         const cached = read(store.getState().nodeStatus.netChain);
 
         if (cached) {

js/src/routes.js

@@ -17,12 +17,15 @@
 import HistoryStore from '~/mobx/historyStore';
 import {
   Accounts, Account, Addresses, Address, Application,
-  Contract, Contracts, Dapp, Dapps, Home,
+  Contract, Contracts, Dapp, Dapps,
   Settings, SettingsBackground, SettingsParity, SettingsProxy,
   SettingsViews, Signer, Status,
   Vaults, Wallet, Web, WriteContract
 } from '~/views';
-import builtinDapps from '~/views/Dapps/builtin.json';
+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');
@@ -129,13 +132,12 @@ const childRoutes = [
     path: 'app/:id',
     component: Dapp,
     onEnter: ({ params }) => {
-      if (!builtinDapps[params.id] || !builtinDapps[params.id].skipHistory) {
+      if (!dapps[params.id] || !dapps[params.id].skipHistory) {
         dappsHistory.add(params.id);
       }
     }
   },
   { path: 'apps', component: Dapps },
-  { path: 'home', component: Home },
   { path: 'web', component: Web },
   { path: 'web/:url', component: Web },
   { path: 'signer', component: Signer }

js/src/ui/Form/AddressSelect/addressSelectStore.js

@@ -78,7 +78,7 @@ export default class AddressSelectStore {
   constructor (api) {
     this.api = api;
 
-    const { registry } = Contracts.create(api);
+    const { registry } = Contracts.get(api);
 
     registry
       .getContract('emailverification')

js/src/util/dapps.js

@@ -22,9 +22,10 @@ import { bytesToHex } from '@parity/api/util/format';
 import Contracts from '~/contracts';
 import { hashToImageUrl } from '~/redux/util';
 
-import builtinJson from '~/views/Dapps/builtin.json';
+import builtinJson from '~/config/dappsBuiltin.json';
+import viewsJson from '~/config/dappsViews.json';
 
-const builtinApps = builtinJson.filter((app) => app.id);
+const builtinApps = [].concat(viewsJson, builtinJson).filter((app) => app.id);
 
 function getHost (api) {
   const host = process.env.DAPPS_URL ||

js/src/views/Dapps/dappsStore.js

@@ -66,7 +66,7 @@ export default class DappsStore extends EventEmitter {
    * apps, else fetch from the node
    */
   loadApp (id) {
-    const { dappReg } = Contracts.get();
+    const { dappReg } = Contracts.get(this._api);
 
     return this
       .loadLocalApps()
@@ -94,7 +94,7 @@ export default class DappsStore extends EventEmitter {
   }
 
   loadAllApps () {
-    const { dappReg } = Contracts.get();
+    const { dappReg } = Contracts.get(this._api);
 
     return Promise
       .all([
@@ -105,7 +105,7 @@ export default class DappsStore extends EventEmitter {
   }
 
   subscribeToChanges () {
-    const { dappReg } = Contracts.get();
+    const { dappReg } = Contracts.get(this._api);
 
     // Unsubscribe from previous subscriptions, if any
     if (this._subscriptions.block) {

js/src/views/Home/index.js

@@ -14,4 +14,35 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-export default from './home';
+import ReactDOM from 'react-dom';
+import React from 'react';
+import { hashHistory } from 'react-router';
+
+import injectTapEventPlugin from 'react-tap-event-plugin';
+injectTapEventPlugin();
+
+import { api } from './parity';
+
+import { initStore } from '~/redux';
+import { setApi } from '~/redux/providers/apiActions';
+import ContextProvider from '~/ui/ContextProvider';
+import muiTheme from '~/ui/Theme';
+
+import Home from './home';
+
+import '~/../assets/fonts/Roboto/font.css';
+import '~/../assets/fonts/RobotoMono/font.css';
+
+import './home.css';
+
+const store = initStore(api, hashHistory);
+
+store.dispatch({ type: 'initAll', api });
+store.dispatch(setApi(api));
+
+ReactDOM.render(
+  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+    <Home />
+  </ContextProvider>,
+  document.querySelector('#container')
+);

js/src/views/Home/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/Views/defaults.js

@@ -16,25 +16,9 @@
 
 import React from 'react';
 
-import imagesEthcoreBlock from '~/../assets/images/parity-logo-white-no-text.svg';
 import { AccountsIcon, AddressesIcon, AppsIcon, ContactsIcon, FingerprintIcon, SettingsIcon, StatusIcon } from '~/ui/Icons';
 
-import styles from './views.css';
-
 const defaultViews = {
-  home: {
-    active: true,
-    fixed: true,
-    icon: (
-      <img
-        className={ styles.logoIcon }
-        src={ imagesEthcoreBlock }
-      />
-    ),
-    route: '/home',
-    value: 'home'
-  },
-
   accounts: {
     active: true,
     fixed: true,

js/src/views/index.ejs

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <style>
+      html, body, #container {
+        width: 100%;
+        min-height: 100%;
+        margin: 0;
+        padding: 0;
+        background: white;
+        font-family: 'Roboto', sans-serif;
+        font-size: 16px;
+        font-weight: 300;
+      }
+
+      .loading {
+        text-align: center;
+        padding-top: 5em;
+        font-size: 2em;
+        color: #999;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div class="loading">Loading</div>
+    </div>
+    <script src="vendor.js"></script>
+    <% if (!htmlWebpackPlugin.options.secure) { %>
+      <script src="/parity-utils/parity.js"></script>
+    <% } %>
+  </body>
+</html>

js/src/views/index.js

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

js/webpack/app.js

@@ -28,7 +28,15 @@ const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
 const rulesEs6 = require('./rules/es6');
 const rulesParity = require('./rules/parity');
 const Shared = require('./shared');
-const DAPPS = require('../src/views/Dapps/builtin.json');
+
+const DAPPS_BUILTIN = require('../src/config/dappsBuiltin.json').map((dapp) => {
+  dapp.srcPath = './dapps';
+  return dapp;
+});
+const DAPPS_VIEWS = require('../src/config/dappsViews.json').map((dapp) => {
+  dapp.srcPath = './views';
+  return dapp;
+});
 
 const FAVICON = path.resolve(__dirname, '../assets/images/parity-logo-black-no-text.png');
 
@@ -149,16 +157,19 @@ module.exports = {
   },
 
   plugins: (function () {
-    const DappsHTMLInjection = DAPPS.filter((dapp) => !dapp.skipBuild).map((dapp) => {
+    const DappsHTMLInjection = []
-      return new HtmlWebpackPlugin({
+      .concat(DAPPS_BUILTIN, DAPPS_VIEWS)
-        title: dapp.name,
+      .filter((dapp) => !dapp.skipBuild)
-        filename: dapp.url + '.html',
+      .map((dapp) => {
-        template: './dapps/index.ejs',
+        return new HtmlWebpackPlugin({
-        favicon: FAVICON,
+          title: dapp.name,
-        secure: dapp.secure,
+          filename: dapp.url + '.html',
-        chunks: [ isProd ? null : 'commons', dapp.url ]
+          template: dapp.srcPath + '/index.ejs',
+          favicon: FAVICON,
+          secure: dapp.secure,
+          chunks: [ isProd ? null : 'commons', dapp.url ]
+        });
       });
-    });
 
     let plugins = Shared.getPlugins().concat(
       new WebpackErrorNotificationPlugin()

js/webpack/shared.js

@@ -151,12 +151,19 @@ function getPlugins (_isProd = isProd) {
 }
 
 function getDappsEntry () {
-  const DAPPS = require('../src/views/Dapps/builtin.json');
+  const builtins = require('../src/config/dappsBuiltin.json');
+  const views = require('../src/config/dappsViews.json');
 
-  return DAPPS.filter((dapp) => !dapp.skipBuild).reduce((_entry, dapp) => {
+  return Object.assign(
-    _entry[dapp.url] = './dapps/' + dapp.url + '.js';
+    builtins.filter((dapp) => !dapp.skipBuild).reduce((_entry, dapp) => {
-    return _entry;
+      _entry[dapp.url] = './dapps/' + dapp.url + '.js';
-  }, {});
+      return _entry;
+    }, {}),
+    views.reduce((_entry, dapp) => {
+      _entry[dapp.url] = './views/' + dapp.src + '/index.js';
+      return _entry;
+    }, {})
+  );
 }
 
 function addProxies (app) {