From 28b8eff45a3d9eeccd0b922f4fdedc2e39a94647 Mon Sep 17 00:00:00 2001 From: Richard Ramos Date: Mon, 23 Apr 2018 16:42:52 -0400 Subject: [PATCH 1/6] Migrating demo to react Blockchain tab complete Whisper tab complete (requires status indicator yet) --- templates/demo/app/components/blockchain.js | 96 ++++++++++ templates/demo/app/components/whisper.js | 113 ++++++++++++ templates/demo/app/dapp.js | 187 +++++--------------- templates/demo/app/index.html | 103 +---------- templates/demo/package.json | 7 +- 5 files changed, 257 insertions(+), 249 deletions(-) create mode 100644 templates/demo/app/components/blockchain.js create mode 100644 templates/demo/app/components/whisper.js diff --git a/templates/demo/app/components/blockchain.js b/templates/demo/app/components/blockchain.js new file mode 100644 index 00000000..b4b91b12 --- /dev/null +++ b/templates/demo/app/components/blockchain.js @@ -0,0 +1,96 @@ +import EmbarkJS from 'Embark/EmbarkJS'; +import SimpleStorage from 'Embark/contracts/SimpleStorage'; +import React from 'react'; +import { Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap'; + +class Blockchain extends React.Component { + + constructor(props) { + super(props); + + this.setValue = this.setValue.bind(this); + this.getValue = this.getValue.bind(this); + this.handleChange = this.handleChange.bind(this); + + this.state = { + valueSet: 10, + valueGet: "", + logs: [] + } + } + + handleChange(e){ + this.setState({valueSet: e.target.value}); + } + + setValue(e){ + e.preventDefault(); + + var value = parseInt(this.state.valueSet, 10); + + // If web3.js 1.0 is being used + if (EmbarkJS.isNewWeb3()) { + SimpleStorage.methods.set(value).send({from: web3.eth.defaultAccount}); + this._addToLog("SimpleStorage.methods.set(value).send({from: web3.eth.defaultAccount})"); + } else { + SimpleStorage.set(value); + this._addToLog("#blockchain", "SimpleStorage.set(" + value + ")"); + } + } + + getValue(e){ + e.preventDefault(); + + if (EmbarkJS.isNewWeb3()) { + SimpleStorage.methods.get().call() + .then(_value => this.setState({valueGet: _value})) + this._addToLog("SimpleStorage.methods.get(console.log)"); + } else { + SimpleStorage.get() + .then(_value => this.setState({valueGet: _value})); + this._addToLog("SimpleStorage.get()"); + } + } + + _addToLog(txt){ + this.state.logs.push(txt); + this.setState({logs: this.state.logs}); + } + + render(){ + return ( +

1. Set the value in the blockchain

+
+ + + {' '} + + Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain. + +
+ +

2. Get the current value

+
+ + current value is {this.state.valueGet} + + Click the button to get the current value. The initial value is 100. + +
+ +

3. Contract Calls

+

Javascript calls being made:

+
+ { + this.state.logs.map((item, i) =>

{item}

) + } +
+ + ); + } + } + + export default Blockchain; \ No newline at end of file diff --git a/templates/demo/app/components/whisper.js b/templates/demo/app/components/whisper.js new file mode 100644 index 00000000..bc1795cb --- /dev/null +++ b/templates/demo/app/components/whisper.js @@ -0,0 +1,113 @@ +import EmbarkJS from 'Embark/EmbarkJS'; +import React from 'react'; +import { Alert, Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap'; + +class Whisper extends React.Component { + + constructor(props) { + super(props); + + this.sendMessage = this.sendMessage.bind(this); + this.listenToChannel = this.listenToChannel.bind(this); + + this.state = { + listenTo: '', + channel: '', + message: '', + subscribedChannels: [], + messageList: [], + logs: [] + } + } + + handleChange(e, name){ + this.state[name] = e.target.value; + this.setState(this.state); + } + + sendMessage(e){ + e.preventDefault(); + EmbarkJS.Messages.sendMessage({topic: this.state.channel, data: this.state.message}); + this._addToLog("EmbarkJS.Messages.sendMessage({topic: '" + this.state.channel + "', data: '" + this.state.message + "'})"); + } + + listenToChannel(e){ + e.preventDefault(); + + let listenTo = this.state.listenTo; + + this.state.subscribedChannels.push(`subscribed to ${listenTo} now try sending a message`); + + EmbarkJS.Messages.listenTo({topic: [listenTo]}) + .then(message => this.state.messageList.push(`channel: ${listenTo} message: ${message}`)) + + this._addToLog("EmbarkJS.Messages.listenTo({topic: ['" + this.state.channel + "']}).then(function(message) {})"); + } + + _addToLog(txt){ + this.state.logs.push(txt); + this.setState({logs: this.state.logs}); + } + + render(){ + return ( + + { + !this.state.enabled ? + + The node you are using does not support Whisper + The node uses an unsupported version of Whisper + : '' + } +

Listen To channel

+
+ + this.handleChange(e, 'listenTo')} /> + {' '} + +
+ { this.state.subscribedChannels.map((item, i) =>

{item}

) } +
+

messages received:

+
+ { this.state.messageList.map((item, i) =>

{item}

) } +
+ +
+ +

Send Message

+
+ + this.handleChange(e, 'channel')} /> + {' '} + this.handleChange(e, 'message')} /> + {' '} + + +
+ +

Javascript calls being made:

+
+

EmbarkJS.Messages.setProvider('whisper')

+ { + this.state.logs.map((item, i) =>

{item}

) + } +
+ + ); + } +} + +export default Whisper; diff --git a/templates/demo/app/dapp.js b/templates/demo/app/dapp.js index a815d5fa..d2e70b09 100644 --- a/templates/demo/app/dapp.js +++ b/templates/demo/app/dapp.js @@ -1,161 +1,54 @@ -/*globals $, SimpleStorage, document*/ +import React from 'react'; +import ReactDOM from 'react-dom'; +import { Tabs, Tab } from 'react-bootstrap'; -import $ from 'jquery'; -import 'bootstrap'; -import 'bootstrap/dist/css/bootstrap.min.css'; import EmbarkJS from 'Embark/EmbarkJS'; -import SimpleStorage from 'Embark/contracts/SimpleStorage'; +import Blockchain from './components/blockchain'; +import Whisper from './components/whisper'; import './dapp.css'; -var addToLog = function(id, txt) { - $(id + " .logs").append("
" + txt); -}; +class App extends React.Component { -// =========================== -// Blockchain example -// =========================== -$(document).ready(function() { + constructor(props) { + super(props); - $("#blockchain button.set").click(function() { - var value = parseInt($("#blockchain input.text").val(), 10); - - // If web3.js 1.0 is being used - if (EmbarkJS.isNewWeb3()) { - SimpleStorage.methods.set(value).send({from: web3.eth.defaultAccount}); - addToLog("#blockchain", "SimpleStorage.methods.set(value).send({from: web3.eth.defaultAccount})"); - } else { - SimpleStorage.set(value); - addToLog("#blockchain", "SimpleStorage.set(" + value + ")"); + this.state = { + whisperEnabled: false } + } - }); - - $("#blockchain button.get").click(function() { - // If web3.js 1.0 is being used - if (EmbarkJS.isNewWeb3()) { - SimpleStorage.methods.get().call(function(err, value) { - $("#blockchain .value").html(value); - }); - addToLog("#blockchain", "SimpleStorage.methods.get(console.log)"); - } else { - SimpleStorage.get().then(function(value) { - $("#blockchain .value").html(value.toNumber()); - }); - addToLog("#blockchain", "SimpleStorage.get()"); - } - }); - -}); - -// =========================== -// Storage (IPFS) example -// =========================== -$(document).ready(function() { - // automatic set if config/storage.json has "enabled": true and "provider": "ipfs" - //EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'}); - - $("#storage .error").hide(); - //EmbarkJS.Storage.ipfsConnection.version() - // .then(function(){ - $("#status-storage").addClass('status-online'); - $("#storage-controls").show(); - // }) - // .catch(function(err) { - // if(err){ - // console.log("IPFS Connection Error => " + err.message); - // $("#storage .error").show(); - // $("#status-storage").addClass('status-offline'); - // $("#storage-controls").hide(); - // } - // }); - - $("#storage button.setIpfsText").click(function() { - var value = $("#storage input.ipfsText").val(); - EmbarkJS.Storage.saveText(value).then(function(hash) { - $("span.textHash").html(hash); - $("input.textHash").val(hash); - addToLog("#storage", "EmbarkJS.Storage.saveText('" + value + "').then(function(hash) { })"); - }) - .catch(function(err) { - if(err){ - console.log("IPFS saveText Error => " + err.message); - } - }); - }); - - $("#storage button.loadIpfsHash").click(function() { - var value = $("#storage input.textHash").val(); - EmbarkJS.Storage.get(value).then(function(content) { - $("span.ipfsText").html(content); - addToLog("#storage", "EmbarkJS.Storage.get('" + value + "').then(function(content) { })"); - }) - .catch(function(err) { - if(err){ - console.log("IPFS get Error => " + err.message); - } - }); - }); - - $("#storage button.uploadFile").click(function() { - var input = $("#storage input[type=file]"); - EmbarkJS.Storage.uploadFile(input).then(function(hash) { - $("span.fileIpfsHash").html(hash); - $("input.fileIpfsHash").val(hash); - addToLog("#storage", "EmbarkJS.Storage.uploadFile($('input[type=file]')).then(function(hash) { })"); - }) - .catch(function(err) { - if(err){ - console.log("IPFS uploadFile Error => " + err.message); - } - }); - }); - - $("#storage button.loadIpfsFile").click(function() { - var hash = $("#storage input.fileIpfsHash").val(); - var url = EmbarkJS.Storage.getUrl(hash); - var link = '' + url + ''; - $("span.ipfsFileUrl").html(link); - $(".ipfsImage").attr('src', url); - addToLog("#storage", "EmbarkJS.Storage.getUrl('" + hash + "')"); - }); - -}); - -// =========================== -// Communication (Whisper) example -// =========================== -$(document).ready(function() { - - $("#communication .error").hide(); - $("#communication .errorVersion").hide(); - if (EmbarkJS.Messages.providerName === 'whisper') { - EmbarkJS.Messages.getWhisperVersion(function(err, version) { - if (err) { - $("#communication .error").show(); - $("#communication-controls").hide(); - $("#status-communication").addClass('status-offline'); - } else { - EmbarkJS.Messages.setProvider('whisper'); - $("#status-communication").addClass('status-online'); - } + componentDidMount(){ + // TODO Verify if whisper & swarm are available + this.setState({ + whisperEnabled: false }); } - $("#communication button.listenToChannel").click(function() { - var channel = $("#communication .listen input.channel").val(); - $("#communication #subscribeList").append("
subscribed to " + channel + " now try sending a message"); - EmbarkJS.Messages.listenTo({topic: [channel]}).then(function(message) { - $("#communication #messagesList").append("
channel: " + channel + " message: " + message); - }); - addToLog("#communication", "EmbarkJS.Messages.listenTo({topic: ['" + channel + "']}).then(function(message) {})"); - }); - $("#communication button.sendMessage").click(function() { - var channel = $("#communication .send input.channel").val(); - var message = $("#communication .send input.message").val(); - EmbarkJS.Messages.sendMessage({topic: channel, data: message}); - addToLog("#communication", "EmbarkJS.Messages.sendMessage({topic: '" + channel + "', data: '" + message + "'})"); - }); + _renderStatus(title, available){ + let className = available ? 'pull-right status-online' : 'pull-right status-offline'; + return + {title} + + ; + } -}); + render(){ + return (

Embark - Usage Example

+ + + + + + Tab 2 content + + + + + +
); + } +} + +ReactDOM.render(, document.getElementById('app')); diff --git a/templates/demo/app/index.html b/templates/demo/app/index.html index 0b17e193..55521af6 100644 --- a/templates/demo/app/index.html +++ b/templates/demo/app/index.html @@ -1,107 +1,12 @@ Embark - SimpleStorage Demo - - + + -

Embark - Usage Example

- - - -
-
-

1. Set the value in the blockchain

-
- - -

Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain.

-
- -

2. Get the current value

-
-
- current value is -
- -

Click the button to get the current value. The initial value is 100.

-
- -

3. Contract Calls

-

Javascript calls being made:

-
-
+
-
- -
- -

Save text to IPFS

-
- - -

generated Hash:

-
- -

Load text from IPFS given an hash

-
- - -

result:

-
- -

upload file to ipfs

-
- - -

generated hash:

-
- -

Get file or image from ipfs

-
- - -

file available at:

-

-
- -

Javascript calls being made:

-
-
EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'}) -
-
-
-
- - -
-

Listen To channel

-
- - -
-

messages received:

-

-
- -

Send Message

-
- - - -
- -

Javascript calls being made:

-
-
EmbarkJS.Messages.setProvider('whisper') -
-
-
-
- + diff --git a/templates/demo/package.json b/templates/demo/package.json index c3224ae9..c60b7143 100644 --- a/templates/demo/package.json +++ b/templates/demo/package.json @@ -9,8 +9,9 @@ "author": "", "license": "ISC", "homepage": "", - "devDependencies": { - "bootstrap": "^3.3.6", - "jquery": "^1.11.3" + "dependencies": { + "react": "^16.3.2", + "react-bootstrap": "^0.32.1", + "react-dom": "^16.3.2" } } From baffdb8f3b0ecbd299c2a854ec221dc023b0cc96 Mon Sep 17 00:00:00 2001 From: Richard Ramos Date: Tue, 24 Apr 2018 16:21:33 -0400 Subject: [PATCH 2/6] Added storage section --- templates/demo/app/components/storage.js | 174 +++++++++++++++++++++++ templates/demo/app/dapp.js | 13 +- 2 files changed, 182 insertions(+), 5 deletions(-) create mode 100644 templates/demo/app/components/storage.js diff --git a/templates/demo/app/components/storage.js b/templates/demo/app/components/storage.js new file mode 100644 index 00000000..d800868b --- /dev/null +++ b/templates/demo/app/components/storage.js @@ -0,0 +1,174 @@ +import EmbarkJS from 'Embark/EmbarkJS'; +import React from 'react'; +import { Alert, Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap'; + +class Storage extends React.Component { + + constructor(props) { + super(props); + + this.state = { + textToSave: 'hello world!', + generatedHash: '', + loadText: '', + storedText: '', + fileToUpload: null, + fileHash: '', + imageToDownload: '', + url: '', + logs: [] + }; + + this.setText = this.setText.bind(this); + this.loadHash = this.loadHash.bind(this); + this.uploadFile = this.uploadFile.bind(this); + this.handleFileUpload = this.handleFileUpload.bind(this); + this.loadFile = this.loadFile.bind(this); + } + + handleChange(e, name){ + this.state[name] = e.target.value; + this.setState(this.state); + } + + handleFileUpload(e){ + this.setState({ fileToUpload: [e.target] }); + } + + _addToLog(txt){ + this.state.logs.push(txt); + this.setState({logs: this.state.logs}); + } + + setText(e){ + e.preventDefault(); + + let _this = this; + + EmbarkJS.Storage.saveText(this.state.textToSave) + .then(function(hash) { + _this.setState({ + generatedHash: hash, + loadText: hash + }); + _this._addToLog("EmbarkJS.Storage.saveText('" + _this.state.textToSave + "').then(function(hash) { })"); + }) + .catch(function(err) { + if(err){ + console.log("Storage saveText Error => " + err.message); + } + }); + } + + loadHash(e){ + e.preventDefault(); + + let _this = this; + + EmbarkJS.Storage.get(this.state.loadText) + .then(function(content) { + _this.setState({storedText: content}); + _this._addToLog("EmbarkJS.Storage.get('" + _this.state.loadText + "').then(function(content) { })"); + }) + .catch(function(err) { + if(err){ + console.log("Storage get Error => " + err.message); + } + }); + } + + uploadFile(e){ + e.preventDefault(); + + let _this = this; + + EmbarkJS.Storage.uploadFile(this.state.fileToUpload) + .then(function(hash) { + _this.setState({ + fileHash: hash, + imageToDownload: hash + }); + _this._addToLog("EmbarkJS.Storage.uploadFile(this.state.fileToUpload).then(function(hash) { })"); + }) + .catch(function(err) { + if(err){ + console.log("Storage uploadFile Error => " + err.message); + } + }); + } + + loadFile(e){ + let _url = EmbarkJS.Storage.getUrl(this.state.imageToDownload); + this.setState({url: _url}) + this._addToLog("EmbarkJS.Storage.getUrl('" + this.state.imageToDownload + "')"); + } + + render(){ + return + { + !this.props.enabled ? + + The node you are using does not support IPFS. Please ensure CORS is setup for the IPFS node. + : '' + } + +

Save text to storage

+
+ + this.handleChange(e, 'textToSave')} /> + + generated Hash: {this.state.generatedHash} + +
+ +

Load text from storage given an hash

+
+ + this.handleChange(e, 'loadText')} /> + + result: {this.state.storedText} + +
+ +

Upload file to storage

+
+ + + + generated hash: {this.state.fileHash} + +
+ +

Get file or image from storage

+
+ + this.handleChange(e, 'imageToDownload')} /> + + file available at: {this.state.url} + + +
+ +

Javascript calls being made:

+
+

EmbarkJS.Storage.setProvider('ipfs',{'{'}server: 'localhost', port: '5001'{'}'})

+ { + this.state.logs.map((item, i) =>

{item}

) + } +
+ ; + } +} + +export default Storage; \ No newline at end of file diff --git a/templates/demo/app/dapp.js b/templates/demo/app/dapp.js index d2e70b09..de6b4084 100644 --- a/templates/demo/app/dapp.js +++ b/templates/demo/app/dapp.js @@ -5,6 +5,7 @@ import { Tabs, Tab } from 'react-bootstrap'; import EmbarkJS from 'Embark/EmbarkJS'; import Blockchain from './components/blockchain'; import Whisper from './components/whisper'; +import Storage from './components/storage'; import './dapp.css'; @@ -14,14 +15,16 @@ class App extends React.Component { super(props); this.state = { - whisperEnabled: false + whisperEnabled: false, + storageEnabled: false } } componentDidMount(){ - // TODO Verify if whisper & swarm are available + // TODO Verify if whisper & swarm/ipfs are available this.setState({ - whisperEnabled: false + whisperEnabled: false, + storageEnabled: false }); } @@ -40,8 +43,8 @@ class App extends React.Component { - - Tab 2 content + + From 3b13a2c80cc50da4ce662bc2376d40185b65947e Mon Sep 17 00:00:00 2001 From: Richard Ramos Date: Wed, 25 Apr 2018 20:11:15 -0400 Subject: [PATCH 3/6] Added whisper status indicator --- templates/demo/app/dapp.js | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/templates/demo/app/dapp.js b/templates/demo/app/dapp.js index de6b4084..fdc43687 100644 --- a/templates/demo/app/dapp.js +++ b/templates/demo/app/dapp.js @@ -21,10 +21,30 @@ class App extends React.Component { } componentDidMount(){ - // TODO Verify if whisper & swarm/ipfs are available + let _this = this; + + setTimeout(() => { + if (EmbarkJS.isNewWeb3()) { + EmbarkJS.Messages.Providers.whisper.getWhisperVersion(function(err, version){ + if(!err) + _this.setState({whisperEnabled: true}) + else + console.log(err); + }); + } else { + if (EmbarkJS.Messages.providerName === 'whisper') { + EmbarkJS.Messages.getWhisperVersion(function(err, version) { + if(!err) + _this.setState({whisperEnabled: true}) + else + console.log(err); + }); + } + } + }, 500); + this.setState({ - whisperEnabled: false, - storageEnabled: false + storageEnabled: true }); } From c8effb7dcb81101d4e04b8bc2c9cf041aa475db9 Mon Sep 17 00:00:00 2001 From: Richard Ramos Date: Fri, 27 Apr 2018 09:04:34 -0400 Subject: [PATCH 4/6] Updated code based on code review --- templates/demo/app/components/blockchain.js | 10 +-- templates/demo/app/components/storage.js | 70 ++++++++++----------- templates/demo/app/components/whisper.js | 26 +++----- templates/demo/app/dapp.css | 4 ++ templates/demo/app/dapp.js | 2 +- 5 files changed, 51 insertions(+), 61 deletions(-) diff --git a/templates/demo/app/components/blockchain.js b/templates/demo/app/components/blockchain.js index b4b91b12..e6e3dfce 100644 --- a/templates/demo/app/components/blockchain.js +++ b/templates/demo/app/components/blockchain.js @@ -8,10 +8,6 @@ class Blockchain extends React.Component { constructor(props) { super(props); - this.setValue = this.setValue.bind(this); - this.getValue = this.getValue.bind(this); - this.handleChange = this.handleChange.bind(this); - this.state = { valueSet: 10, valueGet: "", @@ -65,9 +61,9 @@ class Blockchain extends React.Component { + onChange={(e) => this.handleChange(e)} /> {' '} - + Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain. @@ -76,7 +72,7 @@ class Blockchain extends React.Component {
current value is {this.state.valueGet} - + Click the button to get the current value. The initial value is 100.
diff --git a/templates/demo/app/components/storage.js b/templates/demo/app/components/storage.js index d800868b..f6721453 100644 --- a/templates/demo/app/components/storage.js +++ b/templates/demo/app/components/storage.js @@ -16,14 +16,9 @@ class Storage extends React.Component { fileHash: '', imageToDownload: '', url: '', - logs: [] + logs: [], + storageError: '' }; - - this.setText = this.setText.bind(this); - this.loadHash = this.loadHash.bind(this); - this.uploadFile = this.uploadFile.bind(this); - this.handleFileUpload = this.handleFileUpload.bind(this); - this.loadFile = this.loadFile.bind(this); } handleChange(e, name){ @@ -35,7 +30,7 @@ class Storage extends React.Component { this.setState({ fileToUpload: [e.target] }); } - _addToLog(txt){ + addToLog(txt){ this.state.logs.push(txt); this.setState({logs: this.state.logs}); } @@ -43,18 +38,18 @@ class Storage extends React.Component { setText(e){ e.preventDefault(); - let _this = this; - EmbarkJS.Storage.saveText(this.state.textToSave) - .then(function(hash) { - _this.setState({ + .then((hash) => { + this.setState({ generatedHash: hash, - loadText: hash + loadText: hash, + storageError: '' }); - _this._addToLog("EmbarkJS.Storage.saveText('" + _this.state.textToSave + "').then(function(hash) { })"); + this.addToLog("EmbarkJS.Storage.saveText('" + this.state.textToSave + "').then(function(hash) { })"); }) - .catch(function(err) { + .catch((err) => { if(err){ + this.setState({storageError: err.message}); console.log("Storage saveText Error => " + err.message); } }); @@ -63,15 +58,14 @@ class Storage extends React.Component { loadHash(e){ e.preventDefault(); - let _this = this; - EmbarkJS.Storage.get(this.state.loadText) - .then(function(content) { - _this.setState({storedText: content}); - _this._addToLog("EmbarkJS.Storage.get('" + _this.state.loadText + "').then(function(content) { })"); + .then((content) => { + this.setState({storedText: content, storageError: ''}); + this.addToLog("EmbarkJS.Storage.get('" + this.state.loadText + "').then(function(content) { })"); }) - .catch(function(err) { + .catch((err) => { if(err){ + this.setState({storageError: err.message}) console.log("Storage get Error => " + err.message); } }); @@ -80,18 +74,18 @@ class Storage extends React.Component { uploadFile(e){ e.preventDefault(); - let _this = this; - EmbarkJS.Storage.uploadFile(this.state.fileToUpload) - .then(function(hash) { - _this.setState({ + .then((hash) => { + this.setState({ fileHash: hash, - imageToDownload: hash + imageToDownload: hash, + storageError: '' }); - _this._addToLog("EmbarkJS.Storage.uploadFile(this.state.fileToUpload).then(function(hash) { })"); + this.addToLog("EmbarkJS.Storage.uploadFile(this.state.fileToUpload).then(function(hash) { })"); }) - .catch(function(err) { + .catch((err) => { if(err){ + this.setState({storageError: err.message}); console.log("Storage uploadFile Error => " + err.message); } }); @@ -100,7 +94,7 @@ class Storage extends React.Component { loadFile(e){ let _url = EmbarkJS.Storage.getUrl(this.state.imageToDownload); this.setState({url: _url}) - this._addToLog("EmbarkJS.Storage.getUrl('" + this.state.imageToDownload + "')"); + this.addToLog("EmbarkJS.Storage.getUrl('" + this.state.imageToDownload + "')"); } render(){ @@ -111,7 +105,11 @@ class Storage extends React.Component { The node you are using does not support IPFS. Please ensure CORS is setup for the IPFS node. : '' } - + { + this.state.storageError !== '' ? + {this.state.storageError} + : '' + }

Save text to storage

@@ -119,11 +117,11 @@ class Storage extends React.Component { type="text" defaultValue={this.state.textToSave} onChange={e => this.handleChange(e, 'textToSave')} /> - + generated Hash: {this.state.generatedHash}
- +

Load text from storage given an hash

@@ -131,7 +129,7 @@ class Storage extends React.Component { type="text" value={this.state.loadText} onChange={e => this.handleChange(e, 'loadText')} /> - + result: {this.state.storedText}
@@ -141,8 +139,8 @@ class Storage extends React.Component { - + onChange={(e) => this.handleFileUpload(e)} /> + generated hash: {this.state.fileHash} @@ -154,7 +152,7 @@ class Storage extends React.Component { type="text" value={this.state.imageToDownload} onChange={e => this.handleChange(e, 'imageToDownload')} /> - + file available at: {this.state.url} diff --git a/templates/demo/app/components/whisper.js b/templates/demo/app/components/whisper.js index bc1795cb..be78c62e 100644 --- a/templates/demo/app/components/whisper.js +++ b/templates/demo/app/components/whisper.js @@ -6,9 +6,6 @@ class Whisper extends React.Component { constructor(props) { super(props); - - this.sendMessage = this.sendMessage.bind(this); - this.listenToChannel = this.listenToChannel.bind(this); this.state = { listenTo: '', @@ -28,23 +25,21 @@ class Whisper extends React.Component { sendMessage(e){ e.preventDefault(); EmbarkJS.Messages.sendMessage({topic: this.state.channel, data: this.state.message}); - this._addToLog("EmbarkJS.Messages.sendMessage({topic: '" + this.state.channel + "', data: '" + this.state.message + "'})"); + this.addToLog("EmbarkJS.Messages.sendMessage({topic: '" + this.state.channel + "', data: '" + this.state.message + "'})"); } listenToChannel(e){ e.preventDefault(); - let listenTo = this.state.listenTo; + this.state.subscribedChannels.push(`subscribed to ${this.state.listenTo} now try sending a message`); - this.state.subscribedChannels.push(`subscribed to ${listenTo} now try sending a message`); + EmbarkJS.Messages.listenTo({topic: [this.state.listenTo]}) + .then(message => this.state.messageList.push(`channel: ${this.state.listenTo} message: ${message}`)) - EmbarkJS.Messages.listenTo({topic: [listenTo]}) - .then(message => this.state.messageList.push(`channel: ${listenTo} message: ${message}`)) - - this._addToLog("EmbarkJS.Messages.listenTo({topic: ['" + this.state.channel + "']}).then(function(message) {})"); + this.addToLog("EmbarkJS.Messages.listenTo({topic: ['" + this.state.listenTo + "']}).then(function(message) {})"); } - _addToLog(txt){ + addToLog(txt){ this.state.logs.push(txt); this.setState({logs: this.state.logs}); } @@ -53,7 +48,7 @@ class Whisper extends React.Component { return ( { - !this.state.enabled ? + !this.props.enabled ? The node you are using does not support Whisper The node uses an unsupported version of Whisper @@ -67,8 +62,7 @@ class Whisper extends React.Component { defaultValue={this.state.listenTo} placeholder="channel" onChange={e => this.handleChange(e, 'listenTo')} /> - {' '} - +
{ this.state.subscribedChannels.map((item, i) =>

{item}

) }
@@ -87,14 +81,12 @@ class Whisper extends React.Component { defaultValue={this.state.channel} placeholder="channel" onChange={e => this.handleChange(e, 'channel')} /> - {' '} this.handleChange(e, 'message')} /> - {' '} - + diff --git a/templates/demo/app/dapp.css b/templates/demo/app/dapp.css index e0043e37..3d355697 100644 --- a/templates/demo/app/dapp.css +++ b/templates/demo/app/dapp.css @@ -47,3 +47,7 @@ div { -webkit-border-radius: 10px; border-radius: 10px; } + +input.form-control { + margin-right: 5px; +} \ No newline at end of file diff --git a/templates/demo/app/dapp.js b/templates/demo/app/dapp.js index fdc43687..ddd6b0fa 100644 --- a/templates/demo/app/dapp.js +++ b/templates/demo/app/dapp.js @@ -64,7 +64,7 @@ class App extends React.Component { - + From dbb640642bdad515eaa8ee1fb41ae4b74f7753e1 Mon Sep 17 00:00:00 2001 From: Richard Ramos Date: Fri, 27 Apr 2018 11:47:35 -0400 Subject: [PATCH 5/6] Removed timeout --- templates/demo/app/dapp.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/templates/demo/app/dapp.js b/templates/demo/app/dapp.js index ddd6b0fa..5c5f121a 100644 --- a/templates/demo/app/dapp.js +++ b/templates/demo/app/dapp.js @@ -21,30 +21,28 @@ class App extends React.Component { } componentDidMount(){ - let _this = this; - - setTimeout(() => { + __embarkContext.execWhenReady(() => { if (EmbarkJS.isNewWeb3()) { - EmbarkJS.Messages.Providers.whisper.getWhisperVersion(function(err, version){ + EmbarkJS.Messages.Providers.whisper.getWhisperVersion((err, version) => { if(!err) - _this.setState({whisperEnabled: true}) + this.setState({whisperEnabled: true}) else console.log(err); }); } else { if (EmbarkJS.Messages.providerName === 'whisper') { - EmbarkJS.Messages.getWhisperVersion(function(err, version) { + EmbarkJS.Messages.getWhisperVersion((err, version) => { if(!err) - _this.setState({whisperEnabled: true}) + this.setState({whisperEnabled: true}) else console.log(err); }); } } - }, 500); - this.setState({ - storageEnabled: true + this.setState({ + storageEnabled: true + }); }); } From 57428a65c65a2e35a8e327cf2220abbcc6acb92a Mon Sep 17 00:00:00 2001 From: Richard Ramos Date: Fri, 27 Apr 2018 11:48:44 -0400 Subject: [PATCH 6/6] Removed spacer --- templates/demo/app/components/blockchain.js | 1 - 1 file changed, 1 deletion(-) diff --git a/templates/demo/app/components/blockchain.js b/templates/demo/app/components/blockchain.js index e6e3dfce..b9e5e313 100644 --- a/templates/demo/app/components/blockchain.js +++ b/templates/demo/app/components/blockchain.js @@ -62,7 +62,6 @@ class Blockchain extends React.Component { type="text" defaultValue={this.state.valueSet} onChange={(e) => this.handleChange(e)} /> - {' '} Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain.