save and retrieve drawing data from sidechain

app/components/draw/DrawField.js

@@ -101,28 +101,41 @@ function eventFire(el, etype) {
 }
 
 class SketchFieldDemo extends React.Component {
-  state = {
-    lineColor: 'black',
-    lineWidth: 1,
-    fillColor: '#68CCCA',
-    backgroundColor: 'transparent',
-    shadowWidth: 0,
-    shadowOffset: 0,
-    tool: Tools.Line,
-    fillWithColor: false,
-    fillWithBackgroundColor: false,
-    drawings: [],
-    canUndo: false,
-    canRedo: false,
-    controlledSize: false,
-    sketchWidth: 600,
-    sketchHeight: 600,
-    stretched: true,
-    stretchedX: false,
-    stretchedY: false,
-    originX: 'left',
-    originY: 'top'
-  };
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      lineColor: 'black',
+      lineWidth: 1,
+      fillColor: '#68CCCA',
+      backgroundColor: 'transparent',
+      controlledValue: props.canvasState,
+      shadowWidth: 0,
+      shadowOffset: 0,
+      tool: Tools.Line,
+      fillWithColor: false,
+      fillWithBackgroundColor: false,
+      drawings: [],
+      canUndo: false,
+      canRedo: false,
+      controlledSize: false,
+      sketchWidth: 600,
+      sketchHeight: 600,
+      stretched: true,
+      stretchedX: false,
+      stretchedY: false,
+      originX: 'left',
+      originY: 'top'
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const { canvasState } = this.props;
+    if (canvasState && canvasState !== prevProps.canvasState) {
+      this.setState({ controlledValue: canvasState });
+    }
+  }
+
   _selectTool = event => {
     this.setState({
       tool: event.target.value
@@ -133,6 +146,13 @@ class SketchFieldDemo extends React.Component {
     drawings.push(this._sketch.toDataURL());
     this.setState({drawings: drawings});
   };
+
+  _saveToChain = () => {
+    const { setTileMapState } = this.props;
+    const current = JSON.stringify(this._sketch.toJSON());
+    setTileMapState(current);
+  }
+
   _download = () => {
     /*eslint-disable no-console*/
 
@@ -245,6 +265,7 @@ class SketchFieldDemo extends React.Component {
   };
   render = () => {
     const { controlledValue } = this.state;
+    const { canvasState } = this.props;
     console.log(this._sketch && this._sketch.toJSON())
     return (
       <div className='container'>
@@ -309,6 +330,7 @@ class SketchFieldDemo extends React.Component {
                     onChange={(color) => this.setState({lineColor: color.hex})}/>
                 </CardContent>
               </Card>
+              <Button variant="outlined" color="primary" onClick={this._saveToChain}>Save to chain</Button>
             </div>
           </div>
         </div>

app/contract_client.js

@@ -4,6 +4,39 @@ import {
 } from 'loom-js'
 
 import Web3 from 'web3'
+import EmbarkJS from 'Embark/EmbarkJS';
+
+export const createContract = async () => {
+  const privateKey = CryptoUtils.generatePrivateKey()
+  const publicKey = CryptoUtils.publicKeyFromPrivateKey(privateKey)
+
+  const client = new Client(
+    'default',
+    'ws://127.0.0.1:46657/websocket',
+    'ws://127.0.0.1:9999/queryws',
+  )
+
+  const from = LocalAddress.fromPublicKey(publicKey).toString()
+  const web3 = new Web3(new LoomProvider(client, privateKey))
+  const ABI = [{"constant":false,"inputs":[{"name":"_tileState","type":"string"}],"name":"SetTileMapState","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"GetTileMapState","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"anonymous":false,"inputs":[{"indexed":false,"name":"state","type":"string"}],"name":"OnTileMapStateUpdate","type":"event"}]
+
+  const loomContractAddress = await client.getContractAddressAsync('TilesChain')
+  const contractAddress = CryptoUtils.bytesToHexAddr(loomContractAddress.local.bytes)
+
+  const contract = new web3.eth.Contract(ABI, contractAddress, {from})
+
+
+  contract.events.OnTileMapStateUpdate({}, (err, event) => {
+    if (err) return;
+    if (this.onEvent) {
+      this.onEvent(event)
+    }
+  })
+
+  return contract;
+}
+
+
 
 export default class ContractClient {
   constructor() {}
@@ -33,6 +66,8 @@ export default class ContractClient {
         this.onEvent(event)
       }
     })
+
+    return this.contract;
   }
 
   async setTileMapState(data) {

app/dapp.js

@@ -5,7 +5,7 @@ import EmbarkJS from 'Embark/EmbarkJS';
 import SNT from  'Embark/contracts/SNT';
 import Web3Render from './components/standard/Web3Render';
 import DrawField from './components/draw/DrawField';
-import ContractClient from './contract_client'
+import ContractClient, { createContract } from './contract_client'
 window['SNT'] = SNT;
 
 import './dapp.css';
@@ -23,7 +23,7 @@ class App extends React.Component {
     EmbarkJS.onReady((err) => {
       if (err) this.setState({ web3Provider: false });
       else {
-        //this.contractClient = new ContractClient()
+        this.createContract();
         this._setAccounts();
       }
       web3.eth.net.getId((err, netId) => {
@@ -32,6 +32,31 @@ class App extends React.Component {
     })
   }
 
+  async createContract() {
+    this.contractClient = await createContract();
+    this.createContractEventListener();
+    this.requestUpdateTilesOnCanvas();
+  }
+
+  createContractEventListener = async () => {
+    // THIS CURRENTLY DOES NOT WORK DUE POSSIBLE LOOM PROVIDER BUG
+    this.contractClient.onEvent = tileData => {
+      console.log('tiledata', tileData)
+    }
+  }
+
+  async requestUpdateTilesOnCanvas() {
+    const tileMapState = await this.contractClient.methods.GetTileMapState().call()
+    if (tileMapState) {
+      const canvasState = JSON.parse(tileMapState);
+      this.setState({ canvasState });
+    }
+  }
+
+  setTileMapState = async (data) => {
+    await this.contractClient.methods.SetTileMapState(data).send()
+  }
+
   setAccount(_account){
     this.setState({account: _account});
   }
@@ -45,10 +70,11 @@ class App extends React.Component {
   }
 
   render(){
-    const { web3Provider, loading } = this.state;
+    const { setTileMapState } = this;
+    const { web3Provider, loading, canvasState } = this.state;
     return (
       <Web3Render ready={web3Provider}>
-        <DrawField />
+        <DrawField setTileMapState={setTileMapState} canvasState={canvasState} />
       </Web3Render>
     );
   }

embark.json

@@ -15,5 +15,8 @@
     "ipfs-api": "17.2.4"
   },
   "plugins": {
+    "embark-solc": {
+      "outputBinary": true
+    }
   }
 }

package.json

@@ -26,6 +26,7 @@
     "bignumber.js": "^5.0.0",
     "bootstrap": "^3.3.7",
     "flexboxgrid": "^6.3.1",
+    "embark-solc": "^0.2.2",
     "formik": "^0.11.11",
     "jquery": "^3.3.1",
     "lodash": "^4.17.10",