diff --git a/test/embark-test/.gitignore b/examples/embark-dapp/.gitignore
similarity index 100%
rename from test/embark-test/.gitignore
rename to examples/embark-dapp/.gitignore
diff --git a/test/embark-test/LICENSE b/examples/embark-dapp/LICENSE
similarity index 100%
rename from test/embark-test/LICENSE
rename to examples/embark-dapp/LICENSE
diff --git a/examples/embark-dapp/README.md b/examples/embark-dapp/README.md
new file mode 100644
index 0000000..014433e
--- /dev/null
+++ b/examples/embark-dapp/README.md
@@ -0,0 +1,34 @@
+phoenix - react example
+===
+Simple application using a react observable component to receive a stream of emitted events. This app will deploy a test contract to **Ganache**.
+
+## Requirements
+- `ganache-cli`
+- `yarn` or `npm` installed.
+
+## Install
+In the parent folder, link the package with `yarn` or `npm`
+```
+yarn link
+```
+Then in the current folder link `phoenix`, and install the packages
+```
+yarn link phoenix
+yarn
+```
+
+## Usage
+In a terminal execute
+```
+ganache-cli
+```
+
+In a different session, execute
+```
+yarn run start
+```
+
+Browse the DApp in [http://localhost:3000](http://localhost:3000)
+
+
+*Note*: this is a simple example application that does not include error handling for the web3 connection. Be sure `ganache-cli` is running in `localhost:8545` before browsing the dapp.
\ No newline at end of file
diff --git a/test/embark-test/app/app.js b/examples/embark-dapp/app/App.js
similarity index 62%
rename from test/embark-test/app/app.js
rename to examples/embark-dapp/app/App.js
index 6c89e1b..8a034e9 100644
--- a/test/embark-test/app/app.js
+++ b/examples/embark-dapp/app/App.js
@@ -1,29 +1,13 @@
/* global web3 */
import React from 'react';
-import ReactDOM from 'react-dom';
import EmbarkJS from 'Embark/EmbarkJS';
-import Ranking from '../embarkArtifacts/contracts/Ranking';
-
import Phoenix from 'phoenix';
-import withObservables from '@nozbe/with-observables'
-
-const { scan, map } = require('rxjs/operators');
-import { of } from 'rxjs';
+import Ranking from '../embarkArtifacts/contracts/Ranking';
+import { scan, map } from 'rxjs/operators';
+import RankItem from './RankItem';
const phoenix = new Phoenix(web3.currentProvider);
-const RankItem = ({items, onUpvote, onDownvote}) => {
- return items.map((item, i) =>
- {i+1} - {item.addr}Upvote | Downvote
-
);
-};
-
-
-const enhance = withObservables(['items'], ({ items }) => ({items: items || of({ /* default empty object */ })}));
-const EnhancedRankItem = enhance(RankItem)
-
const observables = {};
class App extends React.Component {
@@ -32,7 +16,6 @@ class App extends React.Component {
}
componentDidMount(){
- //(async () => {
EmbarkJS.onReady(async (err) => {
if(err){
console.error(err);
@@ -63,7 +46,6 @@ class App extends React.Component {
this.setState({ready: true});
});
- //})();
}
upvote = address => () => {
@@ -77,9 +59,8 @@ class App extends React.Component {
render() {
const {ready} = this.state;
if(!ready) return Loading... ;
- return
+ {i + 1} - {item.addr}
+ Upvote |{" "}
+ Downvote
+
+ ));
+};
+
+export default observe(RankItem);
diff --git a/test/embark-test/app/index.html b/examples/embark-dapp/app/index.html
similarity index 100%
rename from test/embark-test/app/index.html
rename to examples/embark-dapp/app/index.html
diff --git a/examples/embark-dapp/app/index.js b/examples/embark-dapp/app/index.js
new file mode 100644
index 0000000..2b4e92c
--- /dev/null
+++ b/examples/embark-dapp/app/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(