I'm having trouble properly understanding Meteor's reactivity and it's relation to contracts.
I've included the Ethereum Meteor packages ethereum:web3
and ethereum:blocks
and read that EthBlocks.latest
is reactive but my question is, how do I make a contract's function return reactive also? Am I suppose to hook into EthBlocks.latest
somehow to run custom callbacks?
In the following DAPP I have a basic getter/setter contract (pingpong.sol), a Meteor template and associated template helpers and events.
Example:
pingpong.sol
contract pingpong {
string public pong;
// accessor function:
// function pong() { return pong; }
function ping (string val) {
pong = val;
}
}
main.html
<head>
<title>pingpong</title>
</head>
<body>
<h1>Ethereum DAPP Reactivity</h1>
{{> pingpong}}
</body>
<Template name="pingpong">
<h2>PONG - {{pong}}</h2>
<form class="set-pong">
<input type="text" name="text" placeholder="Type new pong value"/>
</form>
</Template>
main.js
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import './main.html';
// private chain
web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8546'));
contract = web3.eth.contract([{"constant":false,"inputs":[{"name":"val","type":"string"}],"name":"ping","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"pong","outputs":[{"name":"","type":"string"}],"payable":false,"type":"function"}]);
ppInst = contract.at("0x8c3d23c31de790ac60a483ba47ea1b7fea08d67e");
EthBlocks.init();
Template.pingpong.onCreated(function pongCreated() {
this.pong = new ReactiveVar(ppInst.pong());
})
Template.pingpong.helpers({
pong() {
return Template.instance().pong.get();
}
})
Template.pingpong.events({
'submit .set-pong'(event) {
// Prevent default browser form submit
event.preventDefault();
ppInst.ping(event.target.text.value, {from:web3.eth.accounts[0]});
//clear form
event.target.text.value = '';
},
})