Created
December 31, 2021 09:56
-
-
Save dacre-denny/6004fd68fb1465c1779a64d2b24d93d5 to your computer and use it in GitHub Desktop.
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> | |
| <title>SmartContract client: DacreSays</title> | |
| <meta charset="utf-8" /> | |
| <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script> | |
| <style> | |
| label { | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <label>Status</label> | |
| <div id="status"></div> | |
| <br /> | |
| <label>Dacre said:</label> | |
| <div id="message"></div> | |
| <br /> | |
| <label>Instruct Dacre</label> | |
| <br /> | |
| <input type="text" /> | |
| <button>Speak</button> | |
| <script> | |
| (() => { | |
| const ABI = [ | |
| { | |
| "inputs": [], | |
| "name": "get", | |
| "outputs": [ | |
| { | |
| "internalType": "string", | |
| "name": "", | |
| "type": "string" | |
| } | |
| ], | |
| "stateMutability": "view", | |
| "type": "function" | |
| }, | |
| { | |
| "inputs": [ | |
| { | |
| "internalType": "string", | |
| "name": "name", | |
| "type": "string" | |
| } | |
| ], | |
| "name": "set", | |
| "outputs": [], | |
| "stateMutability": "nonpayable", | |
| "type": "function" | |
| } | |
| ]; | |
| const ContractAddress = '0x36cb227f10d7Ac8b27A68AbF085625796eB10f0E' | |
| const web3 = new Web3(Web3.givenProvider) | |
| const contract = new web3.eth.Contract(ABI, ContractAddress) | |
| if (typeof ethereum === 'undefined') { | |
| alert('ethereum not found. Please ensure the MetaMask browser extension is present.') | |
| return | |
| } | |
| const status = (text) => { | |
| document.getElementById("status").innerText = text | |
| } | |
| const display = (text) => { | |
| document.getElementById("message").innerText = text ?? '' | |
| } | |
| const load = async () => { | |
| try { | |
| status('Calling..') | |
| const message = await contract.methods.get().call() | |
| status('Ready') | |
| display(message) | |
| } | |
| catch (err) { | |
| status(`Error: ${err?.message ?? 'Something went wrong'}`) | |
| } | |
| } | |
| const save = async (message) => { | |
| try { | |
| status('Sending..') | |
| const [accountAddress] = await ethereum.enable() | |
| await contract.methods.set(message).send({ | |
| from: accountAddress, | |
| gas: 100000 | |
| }) | |
| status('Ready') | |
| } | |
| catch (err) { | |
| status(`Error: ${err?.message ?? 'Something went wrong'}`) | |
| } | |
| } | |
| const button = document.querySelector('button') | |
| button?.addEventListener('click', (event) => { | |
| event.preventDefault() | |
| button?.toggleAttribute('disabled', true) | |
| const { value } = document.querySelector('input') | |
| save(value).then(() => { | |
| return load() | |
| }).then(() => { | |
| button?.toggleAttribute('disabled', false) | |
| }) | |
| }) | |
| load() | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment