Quiero enviar una transacción del cliente a Ethereum blockchain, recuperar un hash de transacción y luego enviar este hash a mi backend.
En el front-end tengo un formulario como este:
<form id="formConfirm" method="POST" action="/step2" onSubmit="processStep1"> <input id="textWalletAddress" name="walletAddress" type="text" readonly /> <input id="textEncodedFunctionCall" th:value="${encodedFunctionCall}" readonly /> <input type="text" id="textTxHash" readonly /> <input type="submit" value="Submit" /> </form>Dentro de la función, quiero enviar la transacción, recuperar el hash correspondiente y completar un campo con él para poder enviarlo a mi backend.
async function processStep1(e) { // edit1: trying out preventDefault alert('Before preventDefault'); e.preventDefault(); alert('After preventDefault'); let efc = document.getElementById('textEncodedFunctionCall').value; let walletAddress = document.getElementById('textWalletAddress').value; const txParams = { to: CONTRACT, from: walletAddress, 'data': efc }; if (window.ethereum) { try { const txHash = await window.ethereum.request({ method: "eth_sendTransaction", params: [txParams] }); document.getElementById('textTxHash').value = txHash; // how/where do I preventDefault()? } catch (err) { alert('ERROR! ' + err); } } else { alert('MetaMask is not installed!'); } }El problema que encuentro es que el formulario continúa con el envío sin el hash. La transacción se realiza (con indicaciones de MetaMask y todo) pero en mi backend aparece un error.
Leí que se supone que debo preventDefault() pero no estoy seguro de cómo aplicarlo. ¿Alguien puede guiarme sobre cómo hacer esto? JavaScript simple sería lo más ideal, ya que estoy tratando de reducir las dependencias de bibliotecas externas.
Edit1: Probé preventDefault al principio pero ni siquiera veo ninguna alerta.
Edit2: Agregué los campos que faltaban en mi pregunta
Bueno, yo iría con:
onSubmit="processStep1()" y reemplazándolo con javascript: document.getElementById('formConfirm').onsubmit = processStep1; . Tenga en cuenta la falta de () aquí! EDITAR: como alguien ya señaló, eliminar () en onSubmit="processStep1()" también debería funcionarasync function processStep1(event) { ... }event.preventDefault() en algún lugar al principio. Recuerde que está impidiendo la acción predeterminada, por lo que no está enviando el formulario; probablemente desee usar fetch() para enviar el formulario manualmente. Aparte de eso, puede reemplazar input type="submit" con un botón personalizado con su función al hacer clic, para que no tenga que llamar a event.preventDefault() . Pero no hay gran diferencia.
Algunos errores:
onSubmit toma una función y no una llamada de función, por lo que debería ser: <form ... onSubmit="processStep1"> ...preventDefault del evento, que impide que el navegador se comunique con la acción del formulario en primer lugar: async function processStep1(event) { // I suggest as first row so you are sure // the form will stop before any other operation/error // made by this function event.preventDefault(); ...XHR (XMLHttpRequest - MDN) porque detuvo la llamada normal que habría hecho su navegador (al evitar el valor predeterminado del evento): function sendForm(form) { var formData = new FormData(); var inputs = form.querySelectorAll('input'); inputs.forEach(function(input) { var data; // simplified version for files (since it seems you don't need it) if (input.type === 'file') { data = input.files[0]; } else { data = input.value; } formData.append(input.name, data); }); return new Promise(function(y, n) { var xhr= new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === XMLHttpRequest.DONE) { if (status === 0 || (status >= 200 && status < 400)) { y(xhr.responseText); } else { n(xhr); } }; xhr.open(form.method, form.action); xhr.send(formData); }); } async function processStep1(event) { ... // at the end of your function try { var response = await sendForm(this); // threat response } catch(ex) { /// threat exceptions } } Para obtener más información sobre FormData Object (MDN) , le sugiero que siga el enlace para una mejor lectura.
Aquí. Acabo de poner el código completo.
<!DOCTYPE html> <html lang="en"> <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" /> <title>Document</title> </head> <body> <form id="formConfirm"> <input id="textWalletAddress" name="walletAddress" type="text" /> <input id="textEncodedFunctionCall" th:value="${encodedFunctionCall}" /> <input type="text" id="textTxHash" readonly /> <input type="submit" value="Submit" /> </form> <script> const form = document.getElementById("formConfirm") async function processStep1(e) { // let efc = document.getElementById("textEncodedFunctionCall").value // let walletAddress = document.getElementById("textWalletAddress").value // const txParams = { // to: CONTRACT, // from: walletAddress, // data: efc, // } // if (window.ethereum) { // try { // const txHash = await window.ethereum.request({ // method: "eth_sendTransaction", // params: [txParams], // }) // document.getElementById("textTxHash").value = txHash // // how/where do I preventDefault()? // } catch (err) { // alert("ERROR! " + err) // } // } else { // alert("MetaMask is not installed!") // } document.getElementById("textTxHash").value = "HASH" } form.addEventListener("submit", async function (e) { e.preventDefault() await processStep1() }) </script> </body> </html>