|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<title>Connect to Proxy</title> |
|
|
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> |
|
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script> |
|
</head> |
|
<body> |
|
<div class="container mt-5"> |
|
<div class="row"> |
|
<div class="col-6 offset-3"> |
|
<div id="beforeconnect"> |
|
<button class="btn btn-primary mt-3" id="connect">connect</button> |
|
</div> |
|
<div id="afterconnect"> |
|
<div> |
|
<button class="btn btn-primary mt-3" id="increment">increment</button> |
|
</div> |
|
|
|
<div> |
|
<button class="btn btn-primary mt-3" id="current">Get Current Value</button> |
|
<h3>Current Value: <span id="currentVal"></span></h3> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script type="text/javascript"> |
|
document.getElementById('afterconnect').hidden = true |
|
var account = null; |
|
var contract = null; |
|
const connect = async () => { |
|
if (window.ethereum) { |
|
await window.ethereum.send('eth_requestAccounts'); |
|
window.web3 = new Web3(window.ethereum); |
|
|
|
var accounts = await web3.eth.getAccounts(); |
|
account = accounts[0]; |
|
contract = new web3.eth.Contract(ABI, ADDRESS); |
|
|
|
document.getElementById('beforeconnect').hidden = true |
|
document.getElementById('afterconnect').hidden = false |
|
|
|
document.getElementById('current').onclick = current; |
|
document.getElementById('increment').onclick = increment; |
|
|
|
await current() |
|
} else { |
|
alert('Metamask not detected') |
|
} |
|
} |
|
|
|
const increment = async () => { |
|
if (contract) { |
|
await contract.methods.increment().send({ from: account }); |
|
await current() |
|
} |
|
} |
|
|
|
const current = async () => { |
|
if (contract) { |
|
var count = await contract.methods.count().call() |
|
document.getElementById('currentVal').innerHTML = count; |
|
} |
|
} |
|
|
|
document.getElementById('connect').onclick = connect; |
|
|
|
var ADDRESS = '0xf54B9DccD560E20b89CfF60B92ce339c9E3d866D' |
|
|
|
var ABI = [{"inputs":[],"name":"count","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"decrement","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"increment","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"initalized","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"initialize","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"owner","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"proxiableUUID","outputs":[{"internalType":"bytes32","name":"","type":"bytes32"}],"stateMutability":"pure","type":"function"},{"inputs":[{"internalType":"address","name":"newCode","type":"address"}],"name":"updateCode","outputs":[],"stateMutability":"nonpayable","type":"function"}] |
|
</script> |
|
<style type="text/css"> |
|
|
|
</style> |
|
</body> |
|
</html> |