Update the Console dapp (#5602)

* Init Console Dapp structure

* Watches and status

* First REPL and display

* Attaching console

* Selectable autocomplete

* working console // Display objects nicely

* Multilines in Console Dapps

* Better UI

* Eval on window object

* Save console gistory

* Adding views

* Add settings to the console dapp

* Add / remove Watches

* Add Snippets Cmponent

* Semi Working Snippets

* Working Snippets

* Adding CodeMirror features

* Removing old Console

* Add Static folder

js/package.json

@@ -196,11 +196,13 @@
     "react": "15.4.2",
     "react-ace": "4.1.0",
     "react-addons-css-transition-group": "15.4.2",
+    "react-codemirror": "^0.3.0",
     "react-copy-to-clipboard": "4.2.3",
     "react-dom": "15.4.2",
     "react-dropzone": "3.7.3",
     "react-element-to-jsx-string": "6.0.0",
     "react-event-listener": "0.4.1",
+    "react-inspector": "paritytech/react-inspector",
     "react-intl": "2.1.5",
     "react-markdown": "2.4.4",
     "react-portal": "3.0.0",

js/src/dapps/console.js

@@ -0,0 +1,59 @@
+// 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 from 'react';
+import ReactDOM from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
+
+import 'codemirror/addon/dialog/dialog';
+import 'codemirror/addon/dialog/dialog.css';
+import 'codemirror/addon/hint/javascript-hint';
+import 'codemirror/addon/hint/show-hint';
+import 'codemirror/addon/hint/show-hint.css';
+import 'codemirror/addon/search/match-highlighter';
+import 'codemirror/addon/search/search';
+import 'codemirror/addon/search/searchcursor';
+import 'codemirror/keymap/sublime';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/mode/javascript/javascript';
+// Custom codemirror style
+import './console/codemirror.css';
+
+import Application from './console/Application';
+
+import '../../assets/fonts/Roboto/font.css';
+import '../../assets/fonts/RobotoMono/font.css';
+import './style.css';
+
+ReactDOM.render(
+  <AppContainer>
+    <Application />
+  </AppContainer>,
+  document.querySelector('#container')
+);
+
+if (module.hot) {
+  module.hot.accept('./console/Application/index.js', () => {
+    require('./console/Application/index.js');
+
+    ReactDOM.render(
+      <AppContainer>
+        <Application />
+      </AppContainer>,
+      document.querySelector('#container')
+    );
+  });
+}

js/src/dapps/console/Application/application.css

@@ -0,0 +1,65 @@
+/* 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/>.
+*/
+
+.app {
+  display: flex;
+  flex-direction: column;
+  font-family: Arial, sans-serif;
+  font-size: 11px;
+  height: 100vh;
+  overflow: hidden;
+}
+
+textarea,
+input {
+  font-family: dejavu sans mono, monospace;
+  outline: none;
+}
+
+code,
+pre {
+  font-family: dejavu sans mono, monospace;
+  font-size: 11px;
+}
+
+.header {
+  flex: 0 0 auto;
+}
+
+.view {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.eval {
+  flex: 0 1 auto;
+  font-family: dejavu sans mono, monospace;
+  overflow: auto;
+}
+
+.input {
+  border-top: 1px solid #eee;
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 50px;
+}
+
+.status {
+  flex: 0 0 auto;
+  font-family: dejavu sans mono, monospace;
+}

js/src/dapps/console/Application/application.js

@@ -0,0 +1,94 @@
+// 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 { observer } from 'mobx-react';
+import React, { Component } from 'react';
+
+import { api } from '../parity';
+
+import Console from '../Console';
+import Header from '../Header';
+import Input from '../Input';
+import Settings from '../Settings';
+import Snippets from '../Snippets';
+import Watches from '../Watches';
+
+import ApplicationStore from './application.store';
+import WatchesStore from '../Watches/watches.store';
+
+import styles from './application.css';
+
+@observer
+export default class Application extends Component {
+  application = ApplicationStore.get();
+  watches = WatchesStore.get();
+
+  componentWillMount () {
+    this.watches.add('time', () => new Date());
+    this.watches.add('blockNumber', api.eth.blockNumber, api);
+  }
+
+  render () {
+    return (
+      <div className={ styles.app }>
+        <div className={ styles.header }>
+          <Header />
+        </div>
+
+        { this.renderView() }
+
+        <div className={ styles.status }>
+          <Watches />
+        </div>
+      </div>
+    );
+  }
+
+  renderView () {
+    const { view } = this.application;
+
+    if (view === 'console') {
+      return (
+        <div className={ styles.view }>
+          <div className={ styles.eval }>
+            <Console />
+          </div>
+          <div className={ styles.input }>
+            <Input />
+          </div>
+        </div>
+      );
+    }
+
+    if (view === 'settings') {
+      return (
+        <div className={ styles.view }>
+          <Settings />
+        </div>
+      );
+    }
+
+    if (view === 'snippets') {
+      return (
+        <div className={ styles.view }>
+          <Snippets />
+        </div>
+      );
+    }
+
+    return null;
+  }
+}

js/src/dapps/console/Application/application.store.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 { action, observable } from 'mobx';
+
+let instance;
+
+export default class ApplicationStore {
+  @observable view = this.views[0].id;
+
+  views = [
+    { label: 'Console', id: 'console' },
+    { label: 'Snippets', id: 'snippets' },
+    { label: 'Settings', id: 'settings' }
+  ];
+
+  static get () {
+    if (!instance) {
+      instance = new ApplicationStore();
+    }
+
+    return instance;
+  }
+
+  @action
+  setView (view) {
+    this.view = view;
+  }
+}

js/src/dapps/console/Application/index.js

@@ -0,0 +1,17 @@
+// 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/>.
+
+export default from './application';

js/src/dapps/console/Autocomplete/autocomplete.css

@@ -0,0 +1,55 @@
+/* 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/>.
+*/
+
+.container {
+  background: #f8f8f8;
+  box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.5);
+  font-family: dejavu sans mono, monospace;
+  left: 20px;
+  position: absolute;
+  max-height: 300px;
+  overflow: auto;
+}
+
+.item {
+  background-color: white;
+  padding: 0.25em 0.25em 0.25em 0.35em;
+  display: flex;
+  justify-content: space-between;
+
+  &.selected {
+    background-color: rgb(64, 115, 244);
+
+    &,
+    .proto {
+      color: white;
+    }
+  }
+
+  &:hover {
+    cursor: default;
+  }
+
+  &:hover:not(.selected) {
+    background-color: rgb(230, 236, 255);
+  }
+
+  .proto {
+    color: gray;
+    margin-left: 1em;
+  }
+}