Skip to content

Instantly share code, notes, and snippets.

@mik-laj

mik-laj/index.html

Created May 10, 2018 16:26
Show Gist options
  • Save mik-laj/dcaafb3a14951af3335c7de023aef055 to your computer and use it in GitHub Desktop.
Save mik-laj/dcaafb3a14951af3335c7de023aef055 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Page Title</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="form-group mb-5">
<label>Address</label>
<div class="input-group mb-3" data-action="contract-address">
<input id="contractAddress" type="text" class="form-control" readonly="">
<div class="input-group-append">
<a class="btn btn-primary" target="_blank">Look</a>
</div>
</div>
</div>
<div class="card mb-5" data-action="check-owners">
<div class="card-header">
Check owners
</div>
<div class="card-body">
<div class="form-group">
<label>LandId</label>
<input type="text" class="form-control" name="landId">
</div>
<button class="btn btn-block btn-primary" type="submit">Send</button>
</div>
</div>
<div class="card mb-5" data-action="assign-land">
<div class="card-header">
Assign land
</div>
<div class="card-body">
<div class="form-group">
<label>LandId</label>
<input type="text" class="form-control" name="landId">
</div>
<div class="form-group">
<label>To</label>
<input type="text" class="form-control" name="to">
</div>
<button class="btn btn-block btn-primary" type="submit">Send</button>
</div>
</div>
<div class="card mb-5" data-action="transfer">
<div class="card-header">
Transfer
</div>
<div class="card-body">
<div class="form-group">
<label>LandId</label>
<input type="text" class="form-control" name="landId">
</div>
<div class="form-group">
<label>To</label>
<input type="text" class="form-control" name="to">
</div>
<button class="btn btn-block btn-primary" type="submit">Send</button>
</div>
</div>
</div>
<div class="col-md-6">
<pre id="log"></pre>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>
Raw
package.json
{
"name": "02",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"browser-sync": "^2.24.3",
"browsersync": "0.0.1-security",
"web3": "^1.0.0-beta.34",
"webpack": "^4.6.0",
"webpack-cli": "^2.1.2",
"webpack-dev-server": "^3.1.4"
}
}
Raw
src-abi.json
[
{
"constant": false,
"inputs": [
{
"name": "_to",
"type": "address"
},
{
"name": "_tokenId",
"type": "uint256"
}
],
"name": "assign",
"outputs": [],
"payable": false,
"stateMutability": "nonpayable",
"type": "function"
},
{
"constant": false,
"inputs": [
{
"name": "_to",
"type": "address"
},
{
"name": "_tokenId",
"type": "uint256"
}
],
"name": "transferFrom",
"outputs": [],
"payable": false,
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"payable": false,
"stateMutability": "nonpayable",
"type": "constructor"
},
{
"constant": true,
"inputs": [],
"name": "lord",
"outputs": [
{
"name": "",
"type": "address"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
},
{
"constant": true,
"inputs": [
{
"name": "",
"type": "uint256"
}
],
"name": "owners",
"outputs": [
{
"name": "",
"type": "address"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
}
]
Raw
src-index.js
(async function() {
var abi = require('./abi.json');
console.log(abi);
var Web3 = require('web3');
var $log = $('#log');
function log(action, ...args) {
var json = JSON.stringify(Array.from(args), null, '\t');
$("<div>").text(`${action}: ${json}`).appendTo($log);
console.log(action, ...args);
};
log("Started");
if (typeof web3 !== 'undefined') {
window.web3 = new Web3(web3.currentProvider);
} else {
alert("Install MetaMask");
return;
}
var contractAddress = '0x9Bb8A0aE27BC9f5caF0f968133790D32771C88f9';
$('[data-action=contract-address] input').val(contractAddress);
$('[data-action=contract-address] a').attr('href', `https://ropsten.etherscan.io/address/${contractAddress}`);
var account;
web3.eth.getAccounts(function(error, accounts) {
account = accounts[0];
log("Account", account);
});
var contract = new web3.eth.Contract(abi, contractAddress);
$('[data-action=check-owners]').each(function(i, el) {
var $this= $(el);
var $submit = $this.find('[type=submit]');
var $landId = $this.find('[name=landId]');
$submit.click(async function() {
let landId = $landId.val()
console.log({landId});
var owner = await contract.methods.owners(landId).call({from: account})
log("Check owner: ", owner);
});
});
$('[data-action=assign-land]').each(function(i, el) {
var $this= $(el);
var $submit = $this.find('[type=submit]');
var $to = $this.find('[name=to]');
var $landId = $this.find('[name=landId]');
$submit.click(async function() {
var lord = await contract.methods.lord().call({from: account})
if(account != lord) {
log("Assign land", "You are not the lord.");
return;
}
let to = $to.val();
let landId = $landId.val()
let result = await contract.methods.assign(to, landId).send({from: account})
log("Assign land: ", result);
});
});
$('[data-action=transfer]').each(function(i, el) {
var $this= $(el);
var $submit = $this.find('[type="submit"]');
var $to = $this.find('[name=to]');
var $landId = $this.find('[name=landId]');
$submit.click(async function() {
let to = $to.val();
let landId = $landId.val()
var owner = await contract.methods.owners(landId).call({from: account})
if(account != owner) {
log("Transfer", "You are not the owner.");
return;
}
let result = await contract.methods.transferFrom(to, landId).send({from: account})
log("Transfer: ", result);
});
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment