fix: update react-example1

examples/react-example1/.env

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

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

@@ -1,5 +1,5 @@
 {
-  "name": "observables",
+  "name": "react-example-1",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -10,12 +10,16 @@
     "rxjs": "^6.5.2",
     "web3": "^1.2.1"
   },
+  "devDependencies": {
+    "customize-cra": "^0.9.1",
+    "react-app-rewired": "^2.1.5"
+  },
   "scripts": {
-    "start": "react-scripts start",
-    "deploy": "node deploy.js",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-scripts eject",
+    "deploy": "node deploy.js"
   },
   "eslintConfig": {
     "extends": "react-app"

examples/react-example1/src/App.js

@@ -1,34 +1,37 @@
-import React from "react";
-import Subspace from "@embarklabs/subspace";
-import { $average, $max, $min, $latest } from "@embarklabs/subspace";
-import { map } from 'rxjs/operators';
+import React, {Component} from "react";
+import {$average, $max, $min, $latest} from "@embarklabs/subspace";
+import {map} from "rxjs/operators";
 import ProductComponent from "./ProductComponent";
-import web3 from './web3';
-
-import {abi, address} from './contract.json'
+import ContractInstance from "./ContractDeployer";
+import {abi, address} from "./contract.json";
+import {withSubspace, SubspaceProvider} from "@embarklabs/subspace-react";
+import Web3 from "web3";
 
 let Product;
 
-class App extends React.Component {
+class FormComponent extends Component {
   state = {
     userTitle: "",
     userRating: 0,
+
     minRating: 0,
     maxRating: 0,
     averageRating: 0
   };
 
   async componentDidMount() {
-    const subspace = new Subspace(web3.currentProvider);
-    await subspace.init();
+    // Product = subspace.contract(ContractInstance()); // would also work
+    Product = this.props.subspace.contract({abi, address});
 
-    // Product = subspace.contract(ContractInstance); // would also work
-    Product = subspace.contract({abi, address});
-
-    const rating$ = Product.events.Rating.track().map("rating").pipe(map(x => parseInt(x)));
+    const rating$ = Product.events.Rating.track()
+      .map("rating")
+      .pipe(map(x => parseInt(x)));
 
     this.setState({
-      title: Product.methods.products(0).track().map('title'),
+      title: Product.methods
+        .products(0)
+        .track()
+        .map("title"), 
       averageRating: rating$.pipe($average()),
       minRating: rating$.pipe($min()),
       maxRating: rating$.pipe($max()),
@@ -38,33 +41,49 @@ class App extends React.Component {
   }
 
   rateProduct = async () => {
-    let accounts = await web3.eth.getAccounts();
+    let accounts = await this.props.subspace.web3.eth.getAccounts();
     await Product.methods.rateProduct(0, this.state.userRating).send({from: accounts[0]});
   };
 
   updateTitle = async () => {
-    let accounts = await web3.eth.getAccounts();
+    let accounts = await this.props.subspace.web3.eth.getAccounts();
     await Product.methods.editProduct(0, this.state.userTitle).send({from: accounts[0]});
   };
 
   sendFunds = async () => {
-    let accounts = await web3.eth.getAccounts();
-    await web3.eth.sendTransaction({value: this.state.contractFunds, to: Product.options.address, from: accounts[0]});
+    let accounts = await this.props.subspace.web3.eth.getAccounts();
+    await this.props.subspace.web3.eth.sendTransaction({
+      value: this.state.contractFunds,
+      to: Product.options.address,
+      from: accounts[0]
+    });
   };
 
   render() {
     return (
       <div>
         <button onClick={this.rateProduct}>Rate Product</button>
-        <input type="number" value={this.state.userRating} onChange={(evt) => this.setState({userRating: parseInt(evt.target.value)}) } />
+        <input
+          type="number"
+          value={this.state.userRating}
+          onChange={evt => this.setState({userRating: parseInt(evt.target.value)})}
+        />
 
         <button onClick={this.updateTitle}>Update Title</button>
-        <input type="string" value={this.state.userTitle} onChange={(evt) => this.setState({userTitle: evt.target.value}) } />
+        <input
+          type="string"
+          value={this.state.userTitle}
+          onChange={evt => this.setState({userTitle: evt.target.value})}
+        />
 
         <button onClick={this.sendFunds}>Send Funds</button>
-        <input type="string" value={this.state.contractFunds} onChange={(evt) => this.setState({contractFunds: parseInt(evt.target.value)}) } />
+        <input
+          type="string"
+          value={this.state.contractFunds}
+          onChange={evt => this.setState({contractFunds: parseInt(evt.target.value)})}
+        />
 
-        <ProductComponent 
+        <ProductComponent
           title={this.state.title}
           maxRating={this.state.maxRating}
           minRating={this.state.minRating}
@@ -77,4 +96,15 @@ class App extends React.Component {
   }
 }
 
+const Form = withSubspace(FormComponent);
+
+const App = () => {
+  const web3 = new Web3("ws://localhost:8545");
+  return (
+    <SubspaceProvider web3={web3}>
+      <Form />
+    </SubspaceProvider>
+  );
+};
+
 export default App;

examples/react-example1/src/ContractDeployer.js

@@ -0,0 +1,18 @@
+import {abi, address} from './contract.json'
+
+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, {from: web3.eth.default,  gas: "800000"});
+  
+  MyContract.options.address = address;
+	MyContract.options.from = web3.eth.defaultAccount;
+  
+  return MyContract;
+}
+
+
+export default getInstance;

examples/react-example1/src/MyContract.js

@@ -1,16 +0,0 @@
-import web3 from './web3';
-import {abi, address} from './contract.json'
-
-const MyContract = new web3.eth.Contract(abi, {from: web3.eth.default,  gas: "800000"});
-MyContract.options.address = address;
-
-MyContract.getInstance = async () => {
-  if (!web3.eth.defaultAccount) {
-    const accounts = await web3.eth.getAccounts();
-    web3.eth.defaultAccount = accounts[0];
-  }
-  MyContract.options.from = web3.eth.defaultAccount;
-  return MyContract;
-}
-
-export default MyContract;

examples/react-example1/src/ProductComponent.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { observe } from "@embarklabs/subspace/react";
+import { observe } from "@embarklabs/subspace-react";
 
 const ProductComponent = ({ maxRating, minRating, averageRating, title, balance, last5Ratings }) => {
   // Handle initial state when no data is available
@@ -7,9 +7,6 @@ const ProductComponent = ({ maxRating, minRating, averageRating, title, balance,
     // return <p>No data</p>;
   // }
 
-  console.dir("last5Ratings")
-  console.dir(last5Ratings)
-
   return <ul>
     <li><b>title: </b> {title}</li>
     <li><b>minimum rating: </b> {minRating}</li>

examples/react-example1/src/web3.js

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