From 53a9f3b3abe0099134a6abaf8345a9e2571ad145 Mon Sep 17 00:00:00 2001 From: Barry Gitarts Date: Wed, 25 Jul 2018 15:57:22 -0400 Subject: [PATCH] save and retrieve drawing data from sidechain --- app/components/draw/DrawField.js | 66 +++++++++++++++++++++----------- app/contract_client.js | 35 +++++++++++++++++ app/dapp.js | 34 ++++++++++++++-- embark.json | 3 ++ package.json | 1 + 5 files changed, 113 insertions(+), 26 deletions(-) diff --git a/app/components/draw/DrawField.js b/app/components/draw/DrawField.js index c62a2cf..c449c21 100644 --- a/app/components/draw/DrawField.js +++ b/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 (
@@ -309,6 +330,7 @@ class SketchFieldDemo extends React.Component { onChange={(color) => this.setState({lineColor: color.hex})}/> +
diff --git a/app/contract_client.js b/app/contract_client.js index 8dd0fe7..80272e1 100644 --- a/app/contract_client.js +++ b/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) { diff --git a/app/dapp.js b/app/dapp.js index d64aeb6..18b9d9b 100644 --- a/app/dapp.js +++ b/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 ( - + ); } diff --git a/embark.json b/embark.json index dbe7f91..927e5b1 100644 --- a/embark.json +++ b/embark.json @@ -15,5 +15,8 @@ "ipfs-api": "17.2.4" }, "plugins": { + "embark-solc": { + "outputBinary": true + } } } diff --git a/package.json b/package.json index d4d8f04..6c8e523 100644 --- a/package.json +++ b/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",