Auf Events reagieren

Published by Mario Oettler on 7. September 20237. September 2023

Blockchain Autumn School Lesson 6: Event Auf Events reagieren

Eine Anwendung kann auf Events eines Smart Contracts reagieren, indem Sie ein bestimmtes Event bei einem Full-Node abonniert.

Mit der Bibliothek Ethers.js funktioniert das wiefolgt:

                contract.on("Hier-Event-Name", (logText)=>{
                    console.log("Event: " + logText);
                });

Aufgabe

Passen Sie Ihre Webseite so an, dass sie auf das Event in dem vorhin deployten Smart Contract reagiet und den Wert entweder auf der Konsole oder auf der Webseite ausgibt.

Lösung

Lösung

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"
        type="application/javascript"></script>   
 <script>
        // We use the library Ethers.js. Documentation can be found here: https://docs.ethers.org/v5/getting-started/


        var contractAddress = "";  // Contract-Adresse hier einfügen
        var sender          = "";  // Account-Adresse hier einfügen [{}]
        var abi             =  //[{}] ABI einfügen

window.addEventListener(“load”,(event) =>{
if(window.ethereum) {
connect();
}
});

async function connect(){

const provider = new ethers.providers.Web3Provider(window.ethereum)

await provider.send(“eth_requestAccounts”, []);

const signer = provider.getSigner()
console.log(signer);
bn = await provider.getBlockNumber()
console.log(bn);
document.getElementById(“writeButton”).addEventListener(“click”,()=>interact(provider, signer));
document.getElementById(“readButton”).addEventListener(“click”,()=>readFromSC(provider));

}

async function interact(provider, signer){
var text = document.getElementById(“text”).value;
console.log(text);

const contract = new ethers.Contract(contractAddress, abi, provider);
contract.on(“Write”, (logText)=>{
console.log(“Event: ” + logText);
});

const contractWithSigner = contract.connect(signer);
const options = {value: 100000000000000};
const tx = await contractWithSigner.writeText(text, options);
console.log(tx);

}

async function readFromSC(provider, signer){
const contract = new ethers.Contract(contractAddress, abi, provider);
res = await contract.text();
console.log(res);
}

</script>
</head>
<body>
<h1>My First Dapp</h1>
<label for = “text”>Text: </label>
<input type = “text” id = “text”>
<br>
<button type = “button” id = “writeButton”>In Smart Contract schreiben</button>
<br>
<button type = “button” id = “readButton”>Aus Smart Contract auslesen</button>

</body>

</html>

Sie können den Code auch in der Datei index_s4_Dapp2_03.html finden.

Categories: