Skip to content

Instantly share code, notes, and snippets.

@JonnyFox

JonnyFox/index.html

Last active August 12, 2022 13:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JonnyFox/37655ceae3c644d57c24ede2d9df8535 to your computer and use it in GitHub Desktop.
Save JonnyFox/37655ceae3c644d57c24ede2d9df8535 to your computer and use it in GitHub Desktop.
Download ZIP
Solidity web3 tutorial - Index.html + invokeContract.js
Raw
index.html
<!DOCTYPE html>
<html lang="en" class="h-100 no-touch">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="http://fonts.cdnfonts.com/css/roboto" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.7.5/web3.min.js" integrity="sha512-/T7YwzOsNeoNkuTfYKXn3CrJCGc5cnC8T4QW46Hy+3Xjdjrxzokmbx8M8Xavjq1K7dN4958kIRGy4J03VRIlSg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
body {
font-family: 'Roboto Thin', sans-serif;
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
</style>
</head>
<body class="d-flex h-100 text-center text-bg-dark" cz-shortcut-listen="true">
<noscript>
<strong>We're sorry but our contract doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto"></header>
<main class="px-3">
<h1 id="status" >Connecting to contract...</h1>
</main>
<footer class="mt-auto"></footer>
</div>
<script type="module" src="invokeContract.js"></script>
</body>
</html>
Raw
invokeContract.js
import { CONTRACT_ABI, CONTRACT_ADDRESS } from './constants.js';
function connect() {
// Create a new web3 instance specifying the local "Ganache provider"
const web3 = new Web3(new Web3.providers.HttpProvider('http://127.0.0.1:8545'))
// Take the first account
web3.eth.defaultAccount = web3.eth.accounts[0]
// Create a new contract instance using the ABI and the address
window.contract = new web3.eth.Contract(CONTRACT_ABI, CONTRACT_ADDRESS)
}
function invokeContract() {
window.contract.methods.getOwner()
.call()
.then(result => {
document.getElementById('status').innerHTML = `Result <br/><br/><pre>${JSON.stringify(result)}</pre>`
})
}
setTimeout(() => {
connect()
document.getElementById('status').innerHTML = 'Invoking contract method...'
// Add some suspense to the demo before invoking the contract
setTimeout(() => invokeContract(), Math.random() * 10000)
}, 2000)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment