feat: add lerna and update react example

.gitignore

@@ -4,9 +4,9 @@ phoenix.db
 subspace.db
 TODO
 test.js
-/dist/
-/react/
-/lib/
-/module/
+dist/
+lib/
+module/
 /examples/react-example1/src/contract.json
-/coverage/
+coverage/
+lerna-debug.log

README.md

@@ -12,7 +12,7 @@ https://subspace.status.im
 ### Install
 Subspace can be used in browser, node and native script environments. You can install it through `npm` or `yarn`:
 ```
-npm install --save @embarklabs/subspace
+npm install --save @embarklabs/subspace web3 rxjs
 ```
 
 ### Usage

examples/react/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

examples/react/config-overrides.js

@@ -0,0 +1,12 @@
+const {
+    override,
+    addWebpackAlias,
+  } = require("customize-cra");
+
+const path = require('path'); 
+
+module.exports = override( 
+    addWebpackAlias({
+        react: path.resolve('./node_modules/react')
+    })
+)

examples/react/package.json

@@ -5,14 +5,14 @@
   "dependencies": {
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-scripts": "3.1.1",
+    "react-scripts": "^3.4.0",
     "rxjs": "^6.5.2",
-    "web3": "^1.0.0-beta.37"
+    "web3": "^1.2.6"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -29,5 +29,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "customize-cra": "^0.9.1",
+    "react-app-rewired": "^2.1.5"
   }
 }

examples/react/src/App.js

@@ -1,47 +1,54 @@
-import React from "react";
-import Subspace from "@embarklabs/subspace";
-import { scan } from 'rxjs/operators';
+import React, {useState, useEffect} from "react";
+import Web3 from "web3";
+import { SubspaceProvider, useSubspace } from "@embarklabs/subspace-react";
 import MyComponentObserver from "./MyComponentObserver";
-import web3 from './web3';
-import MyContract from './MyContract';
+import getInstance from "./ContractDeployer";
 
-let MyContractInstance;
+const Form = () => {
+  const subspace = useSubspace();
+  const [MyContractInstance, setContractInstance] = useState();
+  const [myObservable$, setObservable] = useState();
 
-class App extends React.Component {
-  state = {
-    myEventObservable$: null
-  };
-
-  async componentDidMount() {
-    MyContractInstance = await MyContract.getInstance(); //
+  useEffect(() => {
+    getInstance(subspace.web3).then(instance => {
+      setContractInstance(subspace.contract(instance));
+    });
+  }, [subspace]);
 
-    const subspace = new Subspace(web3.currentProvider);
-    await subspace.init();
-
-    const myEventObservable$ = subspace.trackEvent(MyContractInstance, "MyEvent", {filter: {}, fromBlock: 1 });
+  useEffect(() => {
+    if (!MyContractInstance) return;
+    const observable = MyContractInstance.events.MyEvent.track({filter: {}, fromBlock: 1});
 
     // If you want to return all the events in an array, you can pipe the scan operator to the observable
-    // const myEventObservable$ = subspace.trackEvent(MyContractInstance, "MyEvent", {filter: {}, fromBlock: 1 })
-    //                                      .pipe(scan((accum, val) => [...accum, val], []));
+    // const observable = MyContractInstance.events.MyEvent.track({filter: {}, fromBlock: 1})
+    //                                                     .pipe(scan((accum, val) => [...accum, val], []));
+    //                                      
     // Your observable component would receive the eventData as an array instead of an object
 
-    this.setState({ myEventObservable$ });
-  }
+    setObservable(observable);
+  }, [subspace, MyContractInstance]);
 
-  createTrx = () => {
-    MyContractInstance.methods
-      .myFunction()
-      .send({ from: web3.eth.defaultAccount });
+  const createTrx = () => {
+    if(!MyContractInstance) return;
+      MyContractInstance.methods.myFunction().send({from: subspace.web3.eth.defaultAccount});
   };
-
-  render() {
-    return (
-      <div>
-        <button onClick={this.createTrx}>Create a Transaction</button>
-        <MyComponentObserver eventData={this.state.myEventObservable$} />
-      </div>
-    );
-  }
+
+  return (
+    <div>
+      <button onClick={createTrx} disabled={!MyContractInstance}>Create a Transaction</button>
+      <MyComponentObserver eventData={myObservable$} />
+    </div>
+  );
 }
 
+
+const App = () => {
+  const web3 = new Web3("ws://localhost:8545");
+  return (
+    <SubspaceProvider web3={web3}>
+      <Form />
+    </SubspaceProvider>
+  );
+};
+
 export default App;

examples/react/src/MyContract.js → examples/react/src/ContractDeployer.js

@@ -1,5 +1,3 @@
-import web3 from './web3';
-
 const abi = [
 	{
 		"constant": false,
@@ -31,14 +29,14 @@ const abi = [
 
 const data = "0x6080604052348015600f57600080fd5b5060f38061001e6000396000f3fe6080604052600436106039576000357c010000000000000000000000000000000000000000000000000000000090048063c3780a3a14603e575b600080fd5b348015604957600080fd5b5060506052565b005b60004342029050600081604051602001808281526020019150506040516020818303038152906040528051906020012090507fc3d6130248b5b68a864c047b2f68d895d420924130388d02d64b648005fe9ac78282604051808381526020018281526020019250505060405180910390a1505056fea165627a7a72305820613e35c5d1e8684ef5b31a7d993a139f1b5bbb409039d92db0fe78ed571d2ce20029";
 
-const MyContract = new web3.eth.Contract(abi, {data, gas: "470000"});
-
-MyContract.getInstance = async() => {
+const getInstance = async web3 => {
 	if(!web3.eth.defaultAccount){
 		const accounts = await web3.eth.getAccounts();
 		web3.eth.defaultAccount = accounts[0];
 	}
-	return MyContract.deploy().send({from: web3.eth.defaultAccount});
+
+	const MyContract = new web3.eth.Contract(abi, {data, gas: "470000"});
+  return MyContract.deploy().send({from: web3.eth.defaultAccount});
 }
 
-export default MyContract;
+export default getInstance;

examples/react/src/MyComponentObserver.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { observe } from "@embarklabs/subspace/react";
+import { observe } from "@embarklabs/subspace-react";
 
 const MyComponent = ({ eventData }) => {
   // Handle initial state when no data is available

examples/react/src/index.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById("root"));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.