Merge pull request #3910 from ethereum/develop

Bringing layered nodes to the surface

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2016-node5"]
+  "presets": ["react", "es2016-node5"]
 }

.gitignore

@@ -11,4 +11,5 @@ nodes/geth/
 config.json
 mist.log
 npm-debug.log
-/yarn.lock
+yarn-debug.log
+yarn-error.log

.prettierignore

@@ -1,2 +1,3 @@
 interface/.meteor
 tests/mocha-in-browser/lib
+dist_mist

.prettierrc

@@ -1 +1 @@
-singleQuote: true
+singleQuote: true

MISTAPI.md

@@ -2,29 +2,26 @@
 
 Mist provides an API for dapp developers to use special features only available in Mist.
 
-## Note for dapp developers
+---
 
-To make your dapp compatible with other browsers, it is recommended that you check the `mist` object before you use it:
+You can check for the `mist` object in your dapp:
 
 ```js
-if(typeof mist !== 'undefined') {
+if (typeof mist !== 'undefined') {
     ...
 }
 ```
 
-You have three different possibilities to use `web3`:
-
-```js
-// 1. simply use it: web3 comes already defined
-web3;
+---
 
-// 2. optionally use web3 from Mist or load if outside of Mist
-if (typeof web3 === 'undefined')
-  web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));
+We recommend initializing your web3 library with our provider:
 
-// 3. always use web3 provided by the dapp ("Web3" won't be supplied by Mist), but the provider from Mist
-if (typeof web3 !== 'undefined') web3 = new Web3(web3.currentProvider);
-else web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));
+```js
+if (typeof web3 !== 'undefined') {
+  web3 = new Web3(web3.currentProvider);
+} else {
+  web3 = new Web3('ws://localhost:8546');
+}
 ```
 
 ## API
@@ -64,7 +61,7 @@ Asks the user to provide, or create a new account.
 #### Example
 
 ```js
-mist.requestAccount(function(e, address) {
+mist.requestAccount(function(error, address) {
   console.log('Added new account', address);
 });
 ```

README.md

@@ -23,7 +23,7 @@ In order to get help regarding Mist or Ethereum Wallet, please follow:
 
 ## How to contribute
 
-Contributions via Pull Requests are so welcome. You can see where to help looking for issues with the [Enhancement](https://github.com/ethereum/mist/issues?q=is%3Aopen+is%3Aissue+label%3A%22Type%3A+Enhancement%22) or [Bug](https://github.com/ethereum/mist/issues?q=is%3Aopen+is%3Aissue+label%3A%22Type%3A+Bug%22) labels. We can help guiding you towards the solution.
+Contributions via Pull Requests are welcome. You can see where to help looking for issues with the [Enhancement](https://github.com/ethereum/mist/issues?q=is%3Aopen+is%3Aissue+label%3A%22Type%3A+Enhancement%22) or [Bug](https://github.com/ethereum/mist/issues?q=is%3Aopen+is%3Aissue+label%3A%22Type%3A+Bug%22) labels. We can help guiding you towards the solution.
 
 You can also help by [responding to issues](https://github.com/ethereum/mist/issues?q=is%3Aissue+is%3Aopen+label%3A%22Status%3A+Triage%22). Sign up on [CodeTriage](https://www.codetriage.com/ethereum/mist) and it'll send you gentle notifications with a configurable frequency. It is a nice way to help while learning.
 

interface/.meteor/packages

@@ -19,7 +19,6 @@ sacha:spin
 chuangbo:cookie
 agnito:simptip
 mrt:jquery-ui-sortable
-ethereum:[email protected]
 ethereum:[email protected]
 ethereum:[email protected]
 ethereum:[email protected]

interface/.meteor/versions

@@ -34,7 +34,6 @@ [email protected]
 [email protected]
 [email protected]
 ethereum:[email protected]
-ethereum:[email protected]
 ethereum:[email protected]
 ethereum:[email protected]
 ethereum:[email protected]

interface/client/actions.js

@@ -3,6 +3,7 @@ exports.getLanguage = function getLanguage() {
     dispatch({ type: '[CLIENT]:GET_LANGUAGE:START' });
     try {
       const lang = ipc.sendSync('backendAction_getLanguage');
+      i18n.changeLanguage(lang);
       TAPi18n.setLanguage(lang);
       dispatch({
         type: '[CLIENT]:GET_LANGUAGE:SUCCESS',

interface/client/appStart.js

@@ -1,4 +1,10 @@
-const { getLanguage } = require('./actions.js');
+import React from 'react';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
+import { getLanguage } from './actions.js';
+import About from '../components/About';
+import RequestAccount from '../components/RequestAccount';
+import NodeInfo from '../components/NodeInfo';
 
 /**
 The init function of Mist
@@ -8,15 +14,6 @@ The init function of Mist
 mistInit = function() {
   console.info('Initialise Mist Interface');
 
-  EthBlocks.init();
-  const ethBlocksInterval = setInterval(() => {
-    if (_.isEmpty(EthBlocks.latest)) {
-      EthBlocks.init();
-    } else {
-      clearInterval(ethBlocksInterval);
-    }
-  }, 500);
-
   Tabs.onceSynced.then(function() {
     if (location.search.indexOf('reset-tabs') >= 0) {
       console.info('Resetting UI tabs');
@@ -67,14 +64,64 @@ mistInit = function() {
   });
 };
 
-Meteor.startup(function() {
-  console.info('Meteor starting up...');
+function renderReactComponentPopup(locationHash) {
+  // NOTE: when adding new React components, remember to skip meteor template in templates/index.js
+  // Example hash: '#about'. Manipulate string to return 'About'.
+  const componentName =
+    locationHash.charAt(1).toUpperCase() + locationHash.slice(2);
+
+  // JSX can't evaluate an expression or string, so map imported components here
+  const components = {
+    About,
+    RequestAccount
+  };
+
+  // Only render a component if it exists
+  if (!!components[componentName]) {
+    const Component = components[componentName];
+
+    render(<Component />, document.getElementById('react-entry'));
+  }
+}
 
+function renderReactComponentMain() {
+  render(
+    <Provider store={store}>
+      <NodeInfo />
+    </Provider>,
+    document.getElementById('react__node-info')
+  );
+}
+
+function handleLanguage() {
+  let currentLang = store.getState().settings.i18n;
+
+  store.subscribe(() => {
+    const newLang = store.getState().settings.i18n;
+    if (currentLang !== newLang) {
+      i18n.changeLanguage(newLang);
+      currentLang = newLang;
+    }
+  });
+}
+
+function renderReact() {
+  // handle main window:
   if (!location.hash) {
-    // Main window
+    handleLanguage();
     EthAccounts.init();
     mistInit();
+    renderReactComponentMain();
+  } else {
+    // handle popup windows:
+    renderReactComponentPopup(location.hash);
   }
+}
+
+Meteor.startup(function() {
+  console.info('Meteor starting up...');
+
+  renderReact();
 
   store.dispatch(getLanguage());
 

interface/client/collections.js

@@ -1,39 +1,18 @@
 /**
-
 @module Collections
 */
 
-// BROWSER RELATED
-// Contains the accounts
 Tabs = new Mongo.Collection('tabs', { connection: null });
+
 LastVisitedPages = new Mongo.Collection('last-visted-pages', {
   connection: null
 });
+
 History = new Mongo.Collection('history', { connection: null });
 
 // Sync collection from and to the backend loki.js
 if (typeof window.dbSync !== 'undefined') {
   Tabs = window.dbSync.frontendSyncInit(Tabs);
   LastVisitedPages = window.dbSync.frontendSyncInit(LastVisitedPages);
   History = window.dbSync.frontendSyncInit(History);
-}
-
-// ETHEREUM RELATED
-
-// Accounts collection is add by the ethereum:accounts package
-
-// LastBlock collection is add by the ethereum:accounts package
-
-// contains blockchain meta data
-// LastBlock = new Mongo.Collection('lastblock', {connection: null});
-// new PersistentMinimongo2(LastBlock, 'Mist');
-// if(!LastBlock.findOne('latest'))
-//     LastBlock.insert({
-//         _id: 'latest',
-//         blockNumber: 0,
-//         blockHash: 0,
-//         gasPrice: 0,
-//         checkpoint: 0
-//     });
-
-// Blockchain = new Mongo.Collection('blockchain', {connection: null});
+}

interface/client/styles/layout.import.less

@@ -195,3 +195,14 @@ aside.sidebar {
     }
   }
 }
+
+.layout_webviews-loadingIndicator {
+  width: 100%;
+  height: 100%;
+  span {
+    display: block;
+    text-align: center;
+    position: relative;
+    top: calc(~"50% + 30px");
+  }
+}

interface/client/styles/menu.import.less

@@ -29,6 +29,7 @@ aside.sidebar {
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
+  -webkit-app-region: drag;
 
   z-index: 4;
   position: absolute;
@@ -67,6 +68,7 @@ aside.sidebar {
         overflow: hidden;
         margin-bottom: 14px;
         transition-delay: 200ms;
+        -webkit-app-region: no-drag;
 
         // draggable LI
         &.ui-sortable-helper {
@@ -233,7 +235,7 @@ aside.sidebar {
       .sub-menu {
         margin: 6px 0;
         padding: 0;
-        border-top: 1px solid rgba(255, 255, 255, 0.2);
+        border-top: 1px solid rgba(255, 255, 255, 0.15);
         overflow-y: auto;
         overflow-x: hidden;
         padding-bottom: 0.1em;
@@ -322,6 +324,15 @@ aside.sidebar {
     .test-chain {
       flex: 1 100%;
       padding: 1px 5px 2px;
+      font-size: 90%;
+    }
+
+    .remote-indicator {
+      flex: 3;
+      font-size: 90%;
+      background: #e2e2e2;
+      border-radius: 3px;
+      padding: 5px;
     }
   }
 }