Ether senden
Bisher haben wir nur Informationen abgefragt. Jetzt wollen wir über ein kleines, selbstgebautes Webinterface ein paar Ether schicken.
- Legen Sie eine Datei namens index_s4_Dapp2_01.html an und fügen Sie folgenden Code ein. Sie können den Code auch in der Datei index_s4_Dapp2_01.html finden
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script>
window.addEventListener("load",(event) => {
if(window.ethereum){
console.log("Ethereum ist da");
// https://docs.metamask.io/guide/rpc-api.html#permissions
ethereum.request({method:'eth_requestAccounts'}).then(function(res){
console.log(res);
window.web3 = new Web3(window.ethereum);
document.getElementById("sendButton").addEventListener("click", (e) => {
var amount = document.getElementById("amount").value; // Mit "." z. B. 1.4 als String
var recipient = document.getElementById("recipient").value;
var sender = document.getElementById("sender").value;
console.log(web3.utils.fromDecimal(web3.utils.toWei(amount, "ether")));
console.log(amount);
console.log(web3.utils.toWei(amount, "ether"));
var parameter = [{
"from": sender,
"to": recipient,
"value": web3.utils.fromDecimal(web3.utils.toWei(amount, "ether")),
"data": ""
}];
ethereum.request({method:"eth_sendTransaction", params: parameter}).then(function(tx){
console.log(tx);
document.getElementById("transaction").innerHTML = tx;
});
});
});
}else{
return false;
}
})
</script>
</head>
<body>
<h1>My First Dapp</h1>
<label for = "text">Betrag in ETH: </label>
<input type = "text" id = "amount">
<br>
<label for = "text">Empfänger: (Account 2)</label>
<input type = "text" id = "recipient">
<br>
<label for = "text">Sender: (Account 1)</label>
<input type = "text" id = "sender">
<br>
<button type = "button" id = "sendButton">Senden</button>
<br>
<div>Transaction-Hash: </div>
<div id = "transaction"></div>
</body>
</html>
- Wählen Sie in MetaMask Ihr Hardhat-Netzwerk und schicken Sie sich selbst einen Betrag an ETH.
Aufgabe
Bisher mussten wir die Adresse des Senders immer manuell eingeben. Das ist problematisch, wenn wir zwischendurch in MetaMask den Account wechseln und den neuen Account nutzen wollen.
Ändern Sie die Datei so, dass der Sender stets automatisch angegeben wird.
Ethereum.request({method:'eth_requestAccounts'})Die obere Zeitle liefert ein Array mit Accounts zurück. Hieraus kann ein Account für den ersten Sender ausgewählt werden.
Nutzen Sie bei einem Accountwechsel das folgende Event
window.ethereum.on('accountsChanged', function(accounts){
// Code here
})Lösung
Sie können den Code auch in der Datei index_s4_Dapp2_01a.html finden.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script>
window.addEventListener("load",(event) => {
if(window.ethereum){
// https://docs.metamask.io/guide/rpc-api.html#permissions
ethereum.request({method:'eth_requestAccounts'}).then(function(res){
var sender = res[0];
document.getElementById("sender").innerHTML = sender;
window.web3 = new Web3(window.ethereum);
document.getElementById("sender").innerHTML = sender;
window.ethereum.on('accountsChanged', function (accounts) {
sender = accounts[0];
document.getElementById("sender").innerHTML = sender;
});
document.getElementById("sendButton").addEventListener("click", (e) => {
var amount = document.getElementById("amount").value; // Mit "." z. B. 1.4 als String
var recipient = document.getElementById("recipient").value;
document.getElementById("sender").innerHTML = sender;
var parameter = [{
"from": sender,
"to": recipient,
"value": web3.utils.fromDecimal(web3.utils.toWei(amount, "ether")),
"data": ""
}];
ethereum.request({method:"eth_sendTransaction", params: parameter}).then(function(tx){
document.getElementById("transaction").innerHTML = tx;
});
});
});
}else{
return false;
}
})
</script>
</head>
<body>
<h1>My First Dapp 1a</h1>
<label for = "text">Betrag in ETH: </label>
<input type = "text" id = "amount">
<br>
<label for = "text">Empfänger: (Account 2)</label>
<input type = "text" id = "recipient">
<br>
<div>Sender: </div>
<div id = "sender"></div>
<br>
<button type = "button" id = "sendButton">Senden</button>
<br>
<div>Transaction-Hash: </div>
<div id = "transaction"></div>
</body>
</html>
