Skip to content

Instantly share code, notes, and snippets.

@promentol

promentol/index.html

Last active February 10, 2018 13:47
Show Gist options
  • Save promentol/ba4ba1dc2251e282d7debe80e07b0641 to your computer and use it in GitHub Desktop.
Save promentol/ba4ba1dc2251e282d7debe80e07b0641 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Dapp interacting with web3.js
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World DApp</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
</head>
<body class="container">
<h1>A Simple Message Board</h1>
<div id="login-area">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" id="name" class="form-control" />
</div>
<button type="submit" id="login_button" class="btn btn-primary">Send</button>
</div>
<div id="message-area" style="display: none">
<ul id="message-list">
<li>
First MEssage
</li>
<li>
Other Message
</li>
<li>
Crazy
</li>
</ul>
<div>
<div class="form-group">
<label for="usr">Message:</label>
<input type="text" id="message" class="form-control" />
</div>
<button type="submit" id="send_button" class="btn btn-primary">Send</button>
</div>
</div>
</body>
<script src="./web3.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="./index.js"></script>
</html>
Raw
index.js
"use strict";
var web3 = new Web3(new Web3.providers.WebsocketProvider("ws://localhost:8545"));
var abi = [{ "constant": true, "inputs": [{ "name": "userAddress", "type": "address" }], "name": "userExists", "outputs": [{ "name": "", "type": "bool" }], "payable": false, "stateMutability": "view", "type": "function", "signature": "0x0e666e49" }, { "constant": true, "inputs": [], "name": "messageCount", "outputs": [{ "name": "", "type": "uint8" }], "payable": false, "stateMutability": "view", "type": "function", "signature": "0x3dbcc8d1" }, { "constant": false, "inputs": [{ "name": "text", "type": "string" }], "name": "sendMessage", "outputs": [{ "name": "", "type": "bool" }], "payable": false, "stateMutability": "nonpayable", "type": "function", "signature": "0x469c8110" }, { "constant": false, "inputs": [{ "name": "name", "type": "string" }], "name": "setUsername", "outputs": [{ "name": "", "type": "bool" }], "payable": false, "stateMutability": "nonpayable", "type": "function", "signature": "0xed59313a" }, { "inputs": [], "payable": false, "stateMutability": "nonpayable", "type": "constructor", "signature": "constructor" }, { "anonymous": false, "inputs": [{ "components": [{ "name": "text", "type": "string" }, { "components": [{ "name": "_address", "type": "address" }, { "name": "name", "type": "string" }, { "name": "isValue", "type": "bool" }], "name": "_user", "type": "tuple" }], "indexed": false, "name": "message", "type": "tuple" }], "name": "MessageCreated", "type": "event", "signature": "0x484e7944baf24ca283ea85d19ec54db40cf6988d5c04d0b423017bc83ec6eae8" }]
var $page = {};
//Use the address you've copied before, e.g newContractInstance.options.address
$page.user_address = '0xd43c85773274dad673ae2e34c94423199a920efb'
$page.contract_address = '0x7bebaf8b9a5030304fe5f22a27b20eafeccb54c1'
var MessageContract = new web3.eth.Contract(abi, $page.contract_address, {
from: $page.user_address,
gasPrice: 4700
});
$page.sendMessage = function () {
var message = $("#message").val()
$("#message").val('')
return MessageContract.methods.sendMessage(message).send()
}
$page.writeName = function (name) {
return MessageContract.methods.setUsername(name).send()
}
$(document).ready(function () {
$("#login_button").click(function(){
$page.writeName($("#name").val()).then(function(){
$("#login-area").hide();
$("#message-area").show();
})
})
$("#send_button").click(function () {
$page.sendMessage().then((x)=>{
console.log(x)
})
})
MessageContract.events.MessageCreated({
filter: {},
fromBlock: 0,
toBlock: 'latest'
}).on("data", (message) => {
$("#message-list").append(
`<li>
${message.args.message.text}
</li>`
)
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment