Added monaco editor via react-monaco-editor

Needs to pull version from package.json

embark-ui/public/index.html

@@ -37,5 +37,20 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.13.1/min/vs/loader.js"></script>
+    <script>
+      require.config({
+        paths: {
+          'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.13.1/min/vs'
+        }
+      });
+      window.MonacoEnvironment = {
+        getWorkerUrl: function (workerId, label) {
+          return '/monaco-editor-worker-loader-proxy.js';
+        }
+      };
+      require(["vs/editor/editor.main"], function () { })
+    </script>
   </body>
+
 </html>

embark-ui/public/monaco-editor-worker-loader-proxy.js

@@ -0,0 +1,5 @@
+self.MonacoEnvironment = {
+  baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.13.1/min/'
+};
+
+importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.13.1/min/vs/base/worker/workerMain.js'); // eslint-disable-line

embark-ui/src/actions/index.js

@@ -20,6 +20,8 @@ export const accounts = {
   failure: (error) => action(ACCOUNTS[FAILURE], {error})
 };
 
+// Fiddle
+export const FIDDLE_CODE_CHANGE = 'FIDDLE_CODE_CHANGE';
 export const ACCOUNT = createRequestTypes('ACCOUNT');
 export const account = {
   request: (address) => action(ACCOUNT[REQUEST], {address}),
@@ -143,8 +145,8 @@ export function listenToContractLogs() {
   };
 }
 
-export function initBlockHeader(){
+export function fiddleCodeChange(){
   return {
-    type: INIT_BLOCK_HEADER
+    type: FIDDLE_CODE_CHANGE
   };
 }

embark-ui/src/components/Fiddle.js

@@ -1,11 +1,26 @@
 import React from 'react';
+import MonacoEditor from 'react-monaco-editor';
 
-const Fiddle = () => (
-  <React.Fragment>
-    <h1>Fiddle</h1>
-    <p>Play around with contract code and deploy against your running node.</p>
-    <div id="fiddle-container"/>
+const Fiddle = ({code, options, editorDidMount, onChange}) => {
+  options = options || {
+    selectOnLineNumbers: true
+  };
+  return (
+    <React.Fragment>
+      <h1>Fiddle</h1>
+      <p>Play around with contract code and deploy against your running node.</p>
+      <MonacoEditor
+        height="1200"
+        language="sol"
+        theme="vs-dark"
+        value={code}
+        options={options}
+        onChange={onChange}
+        editorDidMount={editorDidMount}
+/>
   </React.Fragment>
-);
+  );
+};
+
 
 export default Fiddle;

embark-ui/src/containers/FiddleContainer.js

@@ -1,44 +1,54 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { fetchAccounts } from '../actions';
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {fiddleCodeChange} from '../actions';
 import Fiddle from '../components/Fiddle';
 
 class FiddleContainer extends Component {
   componentWillMount() {
-    this.props.fetchAccounts();
+    //this.props.fetchAccounts();
   }
 
   render() {
-    const { accounts } = this.props;
-    if (!accounts.data) {
-      return (
-        <h1>
-          <i>Loading accounts...</i>
-        </h1>
-      )
-    }
+    // const { accounts } = this.props;
+    // if (!accounts.data) {
+    //   return (
+    //     <h1>
+    //       <i>Loading accounts...</i>
+    //     </h1>
+    //   )
+    // }
 
-    if (accounts.error) {
-      return (
-        <h1>
-          <i>Error API...</i>
-        </h1>
-      )
-    }
+    // if (accounts.error) {
+    //   return (
+    //     <h1>
+    //       <i>Error API...</i>
+    //     </h1>
+    //   )
+    // }
+    const options = {
+      selectOnLineNumbers: true,
+      roundedSelection: false,
+      readOnly: false,
+      cursorStyle: 'line',
+      automaticLayout: false,
+    };
+    const code = 'hello world';
 
     return (
-      <Fiddle />
+      <Fiddle options={options} code={code} />
     );
   }
-};
-
+}
 function mapStateToProps(state) {
-  return { accounts: state.accounts }
+  return { 
+    code: state.code,
+    options: state.options
+  };
 }
 
 export default connect(
   mapStateToProps,
   {
-    fetchAccounts
+    fiddleCodeChange
   },
-)(FiddleContainer)
+)(FiddleContainer);

package-lock.json

@@ -756,6 +756,15 @@
         "@types/node": "*"
       }
     },
+    "@types/react": {
+      "version": "16.4.7",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.4.7.tgz",
+      "integrity": "sha512-tHpSs7HMyjnpyfzka1G0pYh7rBNdpwGgcIDT4vfV6jUaR69yOHo/vNH2H+d9iYHo9xnX4qDe7UalPe9HiGRkLw==",
+      "dev": true,
+      "requires": {
+        "csstype": "^2.2.0"
+      }
+    },
     "@types/semver": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-5.5.0.tgz",
@@ -6735,6 +6744,12 @@
       "resolved": "https://registry.npmjs.org/mock-fs/-/mock-fs-4.7.0.tgz",
       "integrity": "sha512-WlQNtUlzMRpvLHf8dqeUmNqfdPjGY29KrJF50Ldb4AcL+vQeR8QH3wQcFMgrhTwb1gHjZn9xggho+84tBskLgA=="
     },
+    "monaco-editor": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.13.1.tgz",
+      "integrity": "sha512-0Kssg/O3cl1tXP0qAIxhrtMbRnzusFUEvFyt5/fpUbmuVeY3z+TnUx13+3kW16pgacFPXGUTEO/hOPlDeFU/dw==",
+      "dev": true
+    },
     "mout": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/mout/-/mout-1.1.0.tgz",

package.json

@@ -119,7 +119,8 @@
     "webpack": "4.19.0",
     "websocket": "1.0.28",
     "window-size": "1.1.1",
-    "webpack-bundle-analyzer": "^2.13.1"
+    "webpack-bundle-analyzer": "^2.13.1",
+    "react-scripts": "^1.1.4"
   },
   "author": "Iuri Matias <iuri.matias@gmail.com>",
   "contributors": [],