-
-
Save BunsDev/62985a9aeaeb1cfc7910c856c778dc7b to your computer and use it in GitHub Desktop.
Access a Smart Contract from your web application
This file contains hidden or 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 hidden or 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