En la parte superior de CreateEvent, justo debajo de export default function CreateEvent() { configuramos nuestra variable account con useAccount:
const { data: account } =useAccount();
También podemos configurar variables state para realizar un seguimiento de nuestros mensajes de alerta, con el fin de que nuestros usuarios puedan ver si su evento se creó con éxito o no. Agregue las siguientes líneas justo debajo de la línea useAccount que aparece arriba:
En nuestra función createEvent, justo antes de ejecutar el registro en la consola del "Minting..." y el hash de la transacción, podemos establecer el estado de loading como verdadero. Una vez que la transacción se ha realizado exitosamente, podemos establecer nuestra variable exitosa como verdadera, establecer "cargando" como falso y configurar nuestro mensaje de confirmación exitosa.
setLoading(true);console.log("Minting...",txn.hash);console.log("Minted -- ",txn.hash);let wait =awaittxn.wait();setEventID(wait.events[0].args[0]);setSuccess(true);setLoading(false);setMessage("Your event has been created successfully.");
Si detectamos un error, podemos configurar el mensaje para mostrar el error.
setSuccess(false);setMessage(`There was an error creating your event: ${error.message}`);setLoading(false);
Así es como su función createEvent debe verse ahora:
constcreateEvent=async (cid) => {try {constmemoryContract=connectContract();if (memoryContract) {let eventDateAndTime =newDate(`${eventDate}${eventTime}`);let eventTimestamp =eventDateAndTime.getTime();let eventDataCID = cid;consttxn=awaitmemoryContract.createNewMemory( eventDataCID, eventTimestamp, sPublic, friends, { gasLimit:900000 } );setLoading(true);console.log("Minting...",txn.hash);awaittxn.wait();console.log("Minted -- ",txn.hash);let wait =awaittxn.wait();setEventID(wait.events[0].args[0]);setSuccess(true);setLoading(false);setMessage("Your event has been created successfully."); } else {console.log("Error getting contract."); } } catch (error) {console.log(error);setSuccess(false);setMessage(`There was an error creating your event: ${error.message}`);setLoading(false); }};
Ahora podemos configurar el componente Alert para que se muestre en función del de la operación y del estado de carga. Podemos agregar esto dentro de la sección.
También podemos empaquetar nuestro formulario y encabezado en una declaración condicional para que no se muestre si el usuario crea un evento exitosamente.
También podemos ocultar el formulario si el usuario no ha conectado su billetera.
{ account &&!success && <form>...</form>;}
Podemos descomentar la sección que le pide al usuario que conecte su billetera, y solo mostrar esto si el usuario aún no ha conectado su billetera.
{!account && ( <sectionclassName="flex flex-col items-start py-8"> <pclassName="mb-4">Please connect your wallet to create events.</p> <ConnectButton /> </section> );}
Si el evento es creado exitosamente, podemos mostrarle al usuario un mensaje de confirmación y un enlace a la página de su evento. Podemos agregar esto en la parte inferior de la sección.
{ success && eventID && ( <div> Success! Please wait a few minutes, then check out your event page{" "} <spanclassName="font-bold"> <Linkhref={`/event/${eventID}`}>here</Link> </span> </div> );}
¡Y eso es todo! Pruebe la página para ver si puede crear correctamente un nuevo evento.
Si encuentra algún error, puede ver una copia completa de esta página aquí: https://github.com/womenbuildweb3/Web3RSVP-frontend/blob/main/pages/create-event.js