Skip to content

Instantly share code, notes, and snippets.

@Uberi

Uberi/index.html

Last active September 15, 2018 06:16
Show Gist options
  • Save Uberi/43e5bea1444d42762db06f1ebe19d5db to your computer and use it in GitHub Desktop.
Save Uberi/43e5bea1444d42762db06f1ebe19d5db to your computer and use it in GitHub Desktop.
Download ZIP
Introduction to Web3 talk - sample dApp for setting/getting the value of a variable. https://hypotenuse.ca/intro-to-web3/
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<title>Storage Smart Contract</title>
</head>
<body>
<h1>Demo dApp for <a href="https://docs.google.com/presentation/d/1i46KNJPlP_Big-DsWeZGQ-2QJIpjpAPIAzfP-Q-HOrs/edit?usp=sharing">Intro to Web3</a></h1>
<p>by <a href="https://hypotenuse.ca">Hypotenuse Labs</a>.</p>
<div>
<p>to use this dApp, please ensure you have <a href="https://metamask.io/">Metamask</a> installed and set to the Rinkeby test network.</p>
<p><label>Contract Address: <input type="text" id="contract-address" value="0xf2602221b9dd5146ea95110d71b7adba82e59104" /></label></p>
<p><input type="text" id="set-value" value="12345" /> <button id="set">set value</button></p>
<p><input type="text" readonly="readonly" disabled="disabled" id="get-value" value="(not retrieved yet)" /> <button id="get">get value</button></p>
</div>
<ul>
<li><a href="https://docs.google.com/presentation/d/1i46KNJPlP_Big-DsWeZGQ-2QJIpjpAPIAzfP-Q-HOrs/edit?usp=sharing">talk slides (extended version)</a></li>
<li><a href="https://metamask.io/">metamask</a></li>
<li><a href="https://faucet.rinkeby.io/">ether faucet (rinkeby test network)</a></li>
<li><a href="https://gist.github.com/Uberi/37f0964938dc15662686edad1f240a8e">code for demo smart contract</a></li>
<li><a href="https://rinkeby.etherscan.io/tx/0x72661f0ce131206666d2f513e9eb87014b88b7318b7ae4de173bdef14eb6e081">demo smart contract deployment</a></li>
<li><a href="https://gist.github.com/Uberi/43e5bea1444d42762db06f1ebe19d5db">code for this dApp</a></li>
</ul>
</body>
</html>
Raw
index.js
var CONTRACT_ABI = [
{
"constant": false,
"inputs": [{"name": "newValue", "type": "uint256"}],
"name": "set",
"outputs": [],
"payable": false,
"stateMutability": "nonpayable",
"type": "function"
},
{
"constant": true,
"inputs": [],
"name": "get",
"outputs": [{"name": "", "type": "uint256"}],
"payable": false,
"stateMutability": "view",
"type": "function"
}
];
window.addEventListener('load', function() {
web3js = new Web3(web3.currentProvider);
document.getElementById('set').addEventListener('click', function() {
var contractAddress = document.getElementById('contract-address').value;
var newValue = document.getElementById('set-value').value;
var account = web3js.eth.accounts[0];
var contract = web3js.eth.contract(CONTRACT_ABI).at(contractAddress);
contract.set(newValue, {value: 0, from: account, to: contractAddress}, function(err, result) {
if (err) {
console.error(err);
return;
}
});
});
document.getElementById('get').addEventListener('click', function() {
var contractAddress = document.getElementById('contract-address').value;
var contract = web3js.eth.contract(CONTRACT_ABI).at(contractAddress);
contract.get(function(err, result) {
if (err) {
console.error(err);
return;
}
document.getElementById('get-value').setAttribute('value', result);
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment