In case someone’s interested in the Vanilla JS version…
const web3 = new Web3(Web3.givenProvider);
let contractInstance;
window.addEventListener('DOMContentLoaded', () => {
window.ethereum.enable().then(accounts => {
const truffleMigratePeopleAddress = '0x97e0f06EF61f0eC93538EFb8811Cb5dD646C66b5';
contractInstance = new web3.eth.Contract(abi, truffleMigratePeopleAddress, { from: accounts[0] });
});
document.getElementById('add_data_button').addEventListener('click', addData);
document.getElementById('get_data_button').addEventListener('click', displayData);
});
const addData = () => {
const name = document.getElementById('name_input').value;
const age = document.getElementById('age_input').value;
const height = document.getElementById('height_input').value;
const config = {
value: web3.utils.toWei('1', 'ether')
}
contractInstance.methods.createPerson(name, age, height).send(config)
.on('transactionHash', hash => console.log('Transaction hash: ', hash))
.on('confirmation', confirmationNumber => console.log('Confirmations: ', confirmationNumber))
.on('receipt', receipt => console.log('Receipt: ', receipt));
}
const displayData = () => {
contractInstance.methods.getPerson().call()
.then(response => {
document.getElementById('name_output').textContent = response.name;
document.getElementById('age_output').textContent = response.age;
document.getElementById('height_output').textContent = response.height;
})
}