Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Access a Smart Contract from your web application
pragma solidity ^0.6.6;
contract CoolNumberContract {
uint public coolNumber = 10;
function setCoolNumber(uint _coolNumber) public {
coolNumber = _coolNumber;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Web 3 Demo</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='node_modules/web3/dist/web3.min.js'></script>
</head>
<body>
Web 3 Demo
<br >
<button onclick="printCoolNumber();">Print Cool Number</button>
<button onclick="changeCoolNumber();">Change Cool Number</button>
<br /><br />
Status: <span id="status">Loading...</span>
<script type="text/javascript">
async function loadWeb3() {
if (window.ethereum) {
window.web3 = new Web3(window.ethereum);
window.ethereum.enable();
}
}
async function loadContract() {
return await new window.web3.eth.Contract([
{
"inputs": [],
"name": "coolNumber",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "_coolNumber",
"type": "uint256"
}
],
"name": "setCoolNumber",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
}
], '0x5F4a8C71AFB0c01BA741106d418E78888607Ee63');
}
async function printCoolNumber() {
updateStatus('fetching Cool Number...');
const coolNumber = await window.contract.methods.coolNumber().call();
updateStatus(`coolNumber: ${coolNumber}`);
}
async function getCurrentAccount() {
const accounts = await window.web3.eth.getAccounts();
return accounts[0];r
}
async function changeCoolNumber() {
const value = Math.floor(Math.random() * 100);
updateStatus(`Updating coolNumber with ${value}`);
const account = await getCurrentAccount();
const coolNumber = await window.contract.methods.setCoolNumber(value).send({ from: account });
updateStatus('Updated.');
}
async function load() {
await loadWeb3();
window.contract = await loadContract();
updateStatus('Ready!');
}
function updateStatus(status) {
const statusEl = document.getElementById('status');
statusEl.innerHTML = status;
console.log(status);
}
load();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment