Here's how I solved it. I used the observer pattern.
<!DOCTYPE html>
<html>
<script type="text/javascript" src="./web3.min.js"></script>
<script type="text/javascript" src="./Web3Manager.js"></script>
<script type="text/javascript" src="./Hasher.js"></script>
<body>
<h1>Transaction Hash Fetcher.</h1>
<p>Here is the hash for "Transfer(address,address,uint256)"</p>
<script>
const manWeb3 = new Web3Manager();
const hashOutput = new Hasher("Transfer(address,address,uint256)");
manWeb3.subscribe(output);
manWeb3.connect();
</script>
<div id="output"></div>
</body>
</html>
Where Hasher
looks like this
class Hasher {
constructor(hashable) {
this.hashable = hashable;
}
run() {
console.log("Preparing to hash transaction.");
var hash = web3.utils.keccak256(this.hashable);
console.log("Hashed transaction ="+hash);
document.getElementById("output").innerHTML = hash;
}
}
And Web3Manager
alerts the hasher after it's connected.
class Web3Manager {
constructor() {
this.observers = []
this.isConnected = false;
}
connect() {
window.addEventListener('load', () => {
if (typeof web3 !== 'undefined') {
console.log('Web3 Detected! ' + web3.currentProvider.constructor.name)
this.setIsConnected(true);
} else {
console.log('No Web3 Detected... using HTTP Provider')
window.web3 = new Web3(new Web3.providers.HttpProvider("https://mainnet.infura.io/v3/<api>"));
this.setIsConnected(true);
}
})
}
subscribe(f) {
this.observers.push(f);
}
unsubscribe(f) {
this.observers = this.observers.filter(subscriber => subscriber !== f);
}
setIsConnected(status) {
this.web3 = status;
this.notify();
}
notify() {
this.observers.forEach(observer => observer.run())
}
}
Hope this helps someone in the future!