From 43ae51bb8c193055c2873932a233356b4992dea3 Mon Sep 17 00:00:00 2001
From: Richard Ramos <info@richardramos.me>
Date: Wed, 4 Sep 2019 15:50:28 -0400
Subject: [PATCH] fix: react pt-3.

---
 examples/react/src/App.js                     | 29 +++++-------
 .../src/{ethService.js => MyContract.js}      | 47 +++++--------------
 examples/react/src/web3.js                    |  5 ++
 3 files changed, 30 insertions(+), 51 deletions(-)
 rename examples/react/src/{ethService.js => MyContract.js} (53%)
 create mode 100644 examples/react/src/web3.js

diff --git a/examples/react/src/App.js b/examples/react/src/App.js
index 735167f..7ca7ba6 100644
--- a/examples/react/src/App.js
+++ b/examples/react/src/App.js
@@ -1,9 +1,9 @@
 import React from "react";
 import Phoenix from "phoenix";
-import { web3, MyContract, onWeb3Available } from "./ethService";
 import { scan } from 'rxjs/operators';
-
 import MyComponentObserver from "./MyComponentObserver";
+import web3 from './web3';
+import MyContract from './MyContract';
 
 let MyContractInstance;
 
@@ -12,23 +12,20 @@ class App extends React.Component {
     myEventObservable$: null
   };
 
-  componentDidMount() {
-    // Verify if web3 connection is available
-    onWeb3Available(async () => {
-      MyContractInstance = await MyContract.deploy().send({ from: web3.eth.defaultAccount });
+  async componentDidMount() {
+    MyContractInstance = await MyContract.getInstance(); //
 
-      const eventSyncer = new Phoenix(web3.currentProvider);
-      eventSyncer.init().then(() => {
-        const myEventObservable$ = eventSyncer.trackEvent(MyContractInstance, "MyEvent", {filter: {}, fromBlock: 1 });
+    const eventSyncer = new Phoenix(web3.currentProvider);
+    await eventSyncer.init();
+    
+    const myEventObservable$ = eventSyncer.trackEvent(MyContractInstance, "MyEvent", {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$ = eventSyncer.trackEvent(MyContractInstance, "MyEvent", {filter: {}, fromBlock: 1 })
-        //                                      .pipe(scan((accum, val) => [...accum, val], []));
-        // Your observable component would receive the eventData as an array instead of an object
+    // If you want to return all the events in an array, you can pipe the scan operator to the observable
+    // const myEventObservable$ = eventSyncer.trackEvent(MyContractInstance, "MyEvent", {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$ });
-      });
-    });
+    this.setState({ myEventObservable$ });
   }
 
   createTrx = () => {
diff --git a/examples/react/src/ethService.js b/examples/react/src/MyContract.js
similarity index 53%
rename from examples/react/src/ethService.js
rename to examples/react/src/MyContract.js
index f19b5e1..a033e44 100644
--- a/examples/react/src/ethService.js
+++ b/examples/react/src/MyContract.js
@@ -1,37 +1,4 @@
-import Web3 from 'web3';
-
-export const web3 = new Web3("ws://localhost:8545");
-
-let web3AvailableCB;
-export const onWeb3Available = (cb) => {
-  web3AvailableCB = cb;
-}
-
-web3.eth.getAccounts().then(async accounts => {
-  web3.eth.defaultAccount = accounts[0];
-  if(web3AvailableCB){
-    web3AvailableCB();
-  }
-  /*SimpleStorageContract.deploy().send({ from: web3.eth.defaultAccount }).then(instance => {
-    SimpleStorage = instance;
-  });*/
-});
-
-
-
-// pragma solidity ^0.5.0;
-//
-// contract MyContract {
-//     event MyEvent(uint someValue, bytes32 anotherValue);
-//    
-//     function myFunction() public {
-//         uint a = block.timestamp * block.number; // Just to have a pseudo random value
-//         bytes32 b = keccak256(abi.encodePacked(a));
-//        
-//         emit MyEvent(a, b);
-//     }
-// }
-
+import web3 from './web3';
 
 const abi = [
 	{
@@ -64,4 +31,14 @@ const abi = [
 
 const data = "0x6080604052348015600f57600080fd5b5060f38061001e6000396000f3fe6080604052600436106039576000357c010000000000000000000000000000000000000000000000000000000090048063c3780a3a14603e575b600080fd5b348015604957600080fd5b5060506052565b005b60004342029050600081604051602001808281526020019150506040516020818303038152906040528051906020012090507fc3d6130248b5b68a864c047b2f68d895d420924130388d02d64b648005fe9ac78282604051808381526020018281526020019250505060405180910390a1505056fea165627a7a72305820613e35c5d1e8684ef5b31a7d993a139f1b5bbb409039d92db0fe78ed571d2ce20029";
 
-export const MyContract = new web3.eth.Contract(abi, {data, gas: "470000"});
+const MyContract = new web3.eth.Contract(abi, {data, gas: "470000"});
+
+MyContract.getInstance = async() => {
+	if(!web3.eth.defaultAccount){
+		const accounts = await web3.eth.getAccounts();
+		web3.eth.defaultAccount = accounts[0];
+	}
+	return MyContract.deploy().send({from: web3.eth.defaultAccount});
+}
+
+export default MyContract;
diff --git a/examples/react/src/web3.js b/examples/react/src/web3.js
new file mode 100644
index 0000000..43e3ca3
--- /dev/null
+++ b/examples/react/src/web3.js
@@ -0,0 +1,5 @@
+import Web3 from 'web3';
+
+const web3 = new Web3("ws://localhost:8545");
+
+export default web3;