Update react-redux example

examples/react-redux/.env

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

examples/react-redux/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-redux/package.json

@@ -10,10 +10,14 @@
     "redux": "^4.0.4",
     "web3": "^1.2.1"
   },
+  "devDependencies": {
+    "customize-cra": "^0.9.1",
+    "react-app-rewired": "^2.1.5"
+  },
   "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": {

examples/react-redux/src/App.js

@@ -1,55 +1,61 @@
-import React from "react";
-import Subspace from "@embarklabs/subspace";
-import web3 from './web3';
-import MyContract from './MyContract';
+import React, {useState, useEffect} from "react";
+import {SubspaceProvider, useSubspace} from "@embarklabs/subspace-react";
+import Web3 from "web3";
 import {connect} from "react-redux";
-import { myAction } from './actions';
-import PropTypes from 'prop-types';
+import {myAction} from "./actions";
+import getInstance from "./ContractDeployer";
 
-let MyContractInstance;
-let eventSubscription;
+const FormComponent = ({data, myAction}) => {
+  const subspace = useSubspace();
+  const [MyContractInstance, setContractInstance] = useState();
 
-class App extends React.Component {
-  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();
-    eventSubscription = subspace.trackEvent(MyContractInstance, "MyEvent", { filter: {}, fromBlock: 1 })
-                                   .subscribe(this.props.myAction);
-  }
+  useEffect(() => {
+    if (!MyContractInstance) return;
+    const subscription = MyContractInstance.events.MyEvent.track({filter: {}, fromBlock: 1}).subscribe(myAction);
 
-  componentWillUnmount(){
-    eventSubscription.unsubscribe();
-  }
-
-  createTrx = () => {
-    MyContractInstance.methods
-      .myFunction()
-      .send({ from: web3.eth.defaultAccount });
+    return () => {
+      // Clean up the subscription
+      subscription.unsubscribe();
     };
+  }, [subspace, MyContractInstance, myAction]);
 
-  render() {
-    const { data } = this.props;
+  const createTrx = () => {
+    if (!MyContractInstance) return;
+    MyContractInstance.methods.myFunction().send({from: subspace.web3.eth.defaultAccount});
+  };
 
   return (
     <div>
-        <button onClick={this.createTrx}>Create a Transaction</button>
+      <button onClick={createTrx} disabled={!MyContractInstance}>
+        Create a Transaction
+      </button>
       <ul>
-          <li><b>someValue: </b> {data.someValue}</li>
-          <li><b>anotherValue: </b> {data.anotherValue}</li>
+        <li>
+          <b>someValue: </b> {data.someValue}
+        </li>
+        <li>
+          <b>anotherValue: </b> {data.anotherValue}
+        </li>
       </ul>
     </div>
   );
-  }
-}
-
-App.propTypes = {
-  data: PropTypes.object,
-  myAction: PropTypes.func
 };
 
-export default connect(
-  ({ data }) => ({ data }),
-  { myAction }
-)(App);
+const Form = connect(({data}) => ({data}), {myAction})(FormComponent);
+
+const App = () => {
+  const web3 = new Web3("ws://localhost:8545");
+  return (
+    <SubspaceProvider web3={web3}>
+      <Form />
+    </SubspaceProvider>
+  );
+};
+
+export default App;

examples/react-redux/src/ContractDeployer.js

@@ -1,5 +1,3 @@
-import web3 from './web3';
-
 const abi = [
 	{
 		"constant": false,
@@ -31,14 +29,15 @@ 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];
 	}
+
+	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-redux/src/web3.js

@@ -1,5 +0,0 @@
-import Web3 from 'web3';
-
-const web3 = new Web3("ws://localhost:8545");
-
-export default web3;

examples/react/src/web3.js

@@ -1,5 +0,0 @@
-import Web3 from 'web3';
-
-const web3 = new Web3("ws://localhost:8545");
-
-export default web3;