Last active
January 5, 2023 19:16
-
-
Save bajcmartinez/45bb7bb39fea940cd45a5e88759f58a5 to your computer and use it in GitHub Desktop.
Access a Smart Contract from your web application
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| pragma solidity ^0.6.6; | |
| contract CoolNumberContract { | |
| uint public coolNumber = 10; | |
| function setCoolNumber(uint _coolNumber) public { | |
| coolNumber = _coolNumber; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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