Initial commit of fiddle tab

Not any functionality yet

embark-ui/src/components/Fiddle.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Fiddle = () => (
+  <React.Fragment>
+    <h1>Fiddle</h1>
+    <p>Play around with contract code and deploy against your running node.</p>
+    <div id="fiddle-container"/>
+  </React.Fragment>
+);
+
+export default Fiddle;

embark-ui/src/components/Layout.js

@@ -10,7 +10,8 @@ const navBarItems = [
   {value: "Contracts", to: "/embark/contracts", icon: "box", LinkComponent: withRouter(NavLink)},
   {value: "Explorer", to: "/embark/explorer/accounts", icon: "activity", LinkComponent: withRouter(NavLink)},
   {value: "Processes", to: "/embark/processes", icon: "cpu", LinkComponent: withRouter(NavLink)},
-  {value: "Documentation", to: "/embark/documentation", icon: "file-text", LinkComponent: withRouter(NavLink)}
+  {value: "Documentation", to: "/embark/documentation", icon: "file-text", LinkComponent: withRouter(NavLink)},
+  {value: "Fiddle", to: "/embark/fiddle", icon: "codepen", LinkComponent: withRouter(NavLink)}
 ];
 
 const Layout = (props) => (

embark-ui/src/containers/FiddleContainer.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { fetchAccounts } from '../actions';
+import Fiddle from '../components/Fiddle';
+
+class FiddleContainer extends Component {
+  componentWillMount() {
+    this.props.fetchAccounts();
+  }
+
+  render() {
+    const { accounts } = this.props;
+    if (!accounts.data) {
+      return (
+        <h1>
+          <i>Loading accounts...</i>
+        </h1>
+      )
+    }
+
+    if (accounts.error) {
+      return (
+        <h1>
+          <i>Error API...</i>
+        </h1>
+      )
+    }
+
+    return (
+      <Fiddle />
+    );
+  }
+};
+
+function mapStateToProps(state) {
+  return { accounts: state.accounts }
+}
+
+export default connect(
+  mapStateToProps,
+  {
+    fetchAccounts
+  },
+)(FiddleContainer)

embark-ui/src/routes.js

@@ -2,12 +2,12 @@ import React from 'react';
 import {Route, Switch} from 'react-router-dom';
 
 import HomeContainer from './containers/HomeContainer';
-import AccountsContainer from './containers/AccountsContainer';
 import ContractsContainer from './containers/ContractsContainer';
 import NoMatch from './components/NoMatch';
 import ExplorerLayout from './components/ExplorerLayout';
 import ProcessesLayout from './components/ProcessesLayout';
 import ContractLayout from './components/ContractLayout';
+import FiddleContainer from './containers/FiddleContainer';
 
 const routes = (
   <React.Fragment>
@@ -18,6 +18,7 @@ const routes = (
       <Route path="/embark/explorer/accounts" component={AccountsContainer} />
       <Route path="/embark/contracts/:contractName" component={ContractLayout} />
       <Route path="/embark/contracts" component={ContractsContainer} />
+      <Route path="/embark/fiddle" component={FiddleContainer} />
       <Route component={NoMatch} />
     </Switch>
   </React.Fragment>

package.json

@@ -64,6 +64,7 @@
     "live-plugin-manager-git-fix": "^0.12.1",
     "merge": "^1.2.0",
     "mocha": "^5.2.0",
+    "monaco-editor": "^0.13.1",
     "neo-blessed": "^0.2.0",
     "netcat": "^1.3.5",
     "node-ipc": "^9.1.1",
@@ -107,6 +108,7 @@
     "eslint": "4.13.1",
     "eslint-plugin-react": "^7.10.0",
     "mocha-sinon": "^1.1.4",
+    "monaco-editor-webpack-plugin": "^1.4.0",
     "sinon": "^4.5.0"
   }
 }