diff --git a/embark-ui/src/components/Fiddle.js b/embark-ui/src/components/Fiddle.js
new file mode 100644
index 00000000..f57fcdcc
--- /dev/null
+++ b/embark-ui/src/components/Fiddle.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Fiddle = () => (
+
+ Fiddle
+ Play around with contract code and deploy against your running node.
+
+
+);
+
+export default Fiddle;
diff --git a/embark-ui/src/components/Layout.js b/embark-ui/src/components/Layout.js
index 62e4385a..eb6fe588 100644
--- a/embark-ui/src/components/Layout.js
+++ b/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) => (
diff --git a/embark-ui/src/containers/FiddleContainer.js b/embark-ui/src/containers/FiddleContainer.js
new file mode 100644
index 00000000..8ab5a6e7
--- /dev/null
+++ b/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 (
+
+ Loading accounts...
+
+ )
+ }
+
+ if (accounts.error) {
+ return (
+
+ Error API...
+
+ )
+ }
+
+ return (
+
+ );
+ }
+};
+
+function mapStateToProps(state) {
+ return { accounts: state.accounts }
+}
+
+export default connect(
+ mapStateToProps,
+ {
+ fetchAccounts
+ },
+)(FiddleContainer)
diff --git a/embark-ui/src/routes.js b/embark-ui/src/routes.js
index 8cba97f2..8b3158b5 100644
--- a/embark-ui/src/routes.js
+++ b/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 = (
@@ -18,6 +18,7 @@ const routes = (
+