Cómo crear una aplicación de alquiler de bicicletas descentralizado en la cadena inteligente

1. Bienvenida y descripción del proyecto: Hola a todos y bienvenidos a mi curso. En este curso vamos a estar construyendo una aplicación descentralizada de alquiler de bicicletas en la red de pruebas de cadena inteligente de finanzas, vamos a empezar codificando un contrato inteligente y poniendo toda esa lógica juntos. Entonces vamos a desplegarlo a la cadena inteligente de finanzas probándola. A continuación construiremos nuestra interfaz de usuario. Así que vamos a estar usando React. Vamos a estar construyendo una página de inicio en una página de tablero. Y luego finalmente, vamos a conectar ese front-end con su contrato inteligente desplegado para que podamos interactuar con la blockchain en hacer transacciones y tirar datos en todas esas cosas buenas. Y a veces es mejor verlo en acción. Entonces aquí hay un vistazo a la aplicación final en una explicación de cómo funciona. De acuerdo, así que aquí está la aplicación. Así que imagina que tienes muchos senderos para bicicletas en la zona centro, y compras un poco de espacio de oficina y metes un montón de bicicletas en él y crea un negocio de alquiler de bicicletas. Pero en lugar de aceptar dinero en efectivo o tarjeta de débito o lo que sea, vas a aceptar B&B Así que si quisiera entrar ahí y alquilar una bicicleta, vendría a esta app. Si esta fuera mi primera vez, primero conectaría mi billetera. Así que haz clic en Conectar cartera y conecta tu billetera. Y luego pincharía a elegir mi bicicleta. Y aquí tenemos un formulario. Dice, Bienvenido, Por favor, introduzca su nombre y apellido para registrarse. Tienes que registrarte como arrendatario en el contrato inteligente para revisar las bicicletas. Así que sólo voy a poner prueba a Travis y golpear Enviar. Entonces confirmaré la transacción en MetaMask. Y por cierto, miro estas bajas tarifas de gas, esto es como $0.20. Así Confirmar. Una vez hecho esto, va a mostrar mi dashboard porque entonces seré arrendatario en el contrato inteligente. Por lo que dice bienvenido, Travis o lo que sea tu nombre. Aquí están sus estadísticas. Por lo que hay crédito B&B. Para que pueda agregar crédito a mi cuenta. Mi cantidad adeudada, mi cantidad de minutos de paseo, si compruebo una bicicleta fuera y mi estado de moto actualmente es roja, lo que significa que no tengo ninguna moto comprobada. Ahora tenemos dos formularios. Una para acreditar su cuenta, una para pagar sus cuotas, y tenemos tres bicicletas para elegir. Y puedo bajar aquí y echar un vistazo a una bicicleta y volver a chequear antibiótico. Entonces sigamos adelante y acreditemos nuestra cuenta. Voy a sumar en 0.2 B&B para acreditar mi cuenta. Entonces mi total es de 0.2 con algunas tarifas mínimas de gas. Por lo que golpeó Confirmar. Y cuando se complete esta transacción, voy a tener crédito de 0 a B y B. Por lo que ahora estoy listo para echar un vistazo a mi moto. Tengo algo de crédito aquí. Y quiero echarle un vistazo, digamos que quiero echar un vistazo a esta moto media. Así que haga clic en checkout y confirme eso. Y lo que va a pasar aquí es mi estado de bicicleta se va a poner verde, lo que significa que tengo una bicicleta comprobada actualmente. En mi paseo los minutos comenzarán a totalizar y podré sacar mi bicicleta a dar un paseo. Y todavía estamos pendientes. Ahí vamos. estado de mi bicicleta es verde. La bicicleta es libre de sacar a dar un paseo. Volveré en unos siete u ocho minutos y volveremos a revisar la moto y te mostraré el resto de la app. De acuerdo, así que han pasado unos ocho minutos, así que vamos a revisar la moto de nuevo. Así que voy a bajar aquí y hacer clic en check-in y confirmar la transacción. Ahora lo que va a pasar es que mi estado de bicicleta volverá a rojo, lo que significa que no está chequeado. Mi B & B do se totalizará en mi viaje minutos se totalizará también. Entonces mi estado de bicicleta es de color rojo. Mi B&B sí tengo 0.005 B & B en mis minutos de paseo o a las ocho. Por lo que ahora puedo pagar mi B&B, hacer 0.005 BNB. Y haga clic en enviar. Confirman eso. Ahora una vez que pague mi saldo, esto va a ir a 0. Mis minutos de paseo irán a 0 y mi estado de bicicleta volverá a entrar. En realidad podré revisar una bicicleta de nuevo. Porque si tienes un saldo, no eres capaz de revisar una bicicleta porque tienes que pagar tu saldo en ese tipo de mantiene libre al dueño de tener que perseguir a la gente. Esta es una forma en la que el propietario no tiene que estar súper involucrado con sus clientes. Sólo tiene que proporcionar la bicicleta. Porque si no pagas tu saldo, puedes echar un vistazo a otra bicicleta. Ahora, en nuestro contrato inteligente, también tenemos muchos cheques en su lugar para asegurarnos de que los inquilinos no hagan cosas que no les gustaría tratar pagar mi hacer cuando no tengo una cantidad adeudada. Entonces si hago clic en Enviar, debería arrojar un error. Debería tener una diapositiva de error aquí arriba, dándome algún tipo de mensaje de error. Sí, la ejecución se revertió. ¿ No tienes nada debido en este momento? Si trato de hacer algo más como chequear antibiótico que nunca revisé, también debería recibir un mensaje. Por favor, echa un vistazo a una bicicleta primero. Y eso es básicamente lo fundamental de la aplicación. Además de esto, al final del curso, hay una lección de bonificación donde construimos un tablero de mandos de propietario. Este tablero, va a mostrar el monto total del contrato, la cantidad que son los propietarios, el botón que da la posibilidad de el propietario retire su monto. Ahora puede que te estés preguntando, ¿cómo hace un propietario ganar dinero con esto? Entonces si alguien entra aquí y acredita a su cuenta con $10, realidad acredita el contrato inteligente con $10, pero esos 10 dólares se les asignan. Entonces cuando pagan su hacer, realidad sale de su crédito en esa cantidad que pagan en realidad se convierte en los dueños. Entonces cada vez que alguien paga su Mountain Dew, eso se traslada al dueño. Por lo que vamos a estar creando al final como un bono y tablero de propietarios donde realmente puedan ver esa cantidad y retirar esa cantidad. Así que me divertí mucho construyendo esto y sé que tú también lo harás. Entonces, ¿quién debería tomar este curso? Veremos si alguno de estos escenarios te atraen. Número uno, tal vez estás buscando un sólido proyecto Web tres para agregar a tu portafolio. Entonces tal vez estés aprendiendo desarrollo de blockchain y quieras aterrizar ese trabajo y entrar en esa industria, pero necesitas algunos proyectos sólidos para agregar a tu portafolio. Entonces este curso es para ti. Tal vez hayas hecho desarrollo de blockchain con un torio o en la Máquina Virtual Ethereum. Y te estás preguntando cómo funciona con B&B o cómo puedes usar BNB y remix, o cómo implementas en la red de pruebas BSC, entonces te resultará beneficioso este curso. O tal vez solo quieres todo el paquete. Quieres aprender a crear un contrato inteligente, cómo implementarlo y cómo interactuar con él desde una biblioteca como React. O tal vez te interesa ver cómo podemos mostrar errores de solidez en el front-end para que nuestro usuario sepa cuándo ha cometido un error. O tal vez solo te interesa cómo una aplicación como esta proporcionaría ingresos sustentables para el propietario. Si alguno de estos te apela, entonces creo que estás en el lugar correcto. Ahora hay un par de prerrequisitos. Número uno, usted debe tener conocimientos de desarrollo web base. Por lo que probablemente deberías haber aprendido HTML y CSS y haber construido un par de páginas web fáciles. Número dos, debe tener una comprensión base de JavaScript y reaccionar. Así que vamos a estar usando un reactante este curso y eso se va a esperar. No va a ser una locura como si no vamos a usar Redux y tener todas estas cosas elaboradas. Vamos a tratar de mantenerlo sencillo, pero aún debes tener ese conocimiento base. Y luego finalmente, deberías tener una comprensión de la blockchain y cómo funciona, lo cual supongo que lo haces o no estarías aquí. Y por lo que respecta a la solidez, no tienes que saber solidez para tomar este curso porque tengo una lección opcional con una cartilla de solidez para ponerte al día si no lo sabes. Creo que te divertirás tanto como yo construyendo esta app. Así que empecemos. 2. Creación de nuestro contrato inteligente: De acuerdo, entonces si vas a remix.ethereum.org, vamos a usar el IDE re-mix como deberíamos. Cambiar mi espacio de trabajo al espacio de trabajo predeterminado. Haga clic en los contratos y cree uno nuevo. Simplemente haga clic derecho en nuevo archivo. Y vamos a llamarlo cadena de bicicletas porque no soy muy bueno en hacer nombres, pero cadena de bicicletas, blockchain, un poco pegadizo. Entonces como siempre con solidez, lo vas a poner en tu identificador de licencia. Por lo que esto se comenta SPD identificador de licencia MIT, que significa cena de código abierto, declaración pragma, solidez pragma. Entonces sólo vamos a hacer 0 punto punto 0 porque ese es un buen número. Y diremos contrato y llamamos a esta cadena de bicicletas. Y aquí vamos. ¿ No es emocionante tener una pantalla fresca para codon? De todas formas, tuve algunas quejas y un video anterior que no era lo suficientemente grande. Puedo hacer que esta parte del código sea más grande, pero no realmente esto por aquí. Así que ten paciencia conmigo. Entonces como solemos hacer, vamos a empezar esto con algún pseudocódigo y va a ir algo como esto. Sumérgete como arrendatario porque tienes que agregarte como alguien que pueda alquilar una bicicleta, checkout bike. Irás y revisarás la moto. Check en una bicicleta. Así que echa un vistazo a la bicicleta, la montas por ahí y luego la revisas de nuevo. Obtener la duración total del uso de la bicicleta. Entonces, ¿cuánto tiempo estuviste en la bici? Y entonces queremos cosas como obtener saldo contractual solo porque es bueno tener esa información y específicamente conseguir el saldo de los inquilinos. Y luego con esta duración total, necesitamos poder fijar el monto adeudado, como cuánto la renta o las O's. Por lo que se establece el monto debido. Y creo que este es un buen comienzo. Empecemos con, esto irá desde aquí. Y estoy teniendo este error aquí abajo. Es porque no puse un punto y coma detrás de esto. He estado en JavaScript los últimos días, así que ten cuidado conmigo si olvido el punto y coma. Muy bien, agréguese como arrendatario. Y en realidad antes de que hagamos eso, una cosa que me gusta hacer es establecer un dueño. Entonces si quien despliega el contrato inteligente, ese es el dueño en caso de que quiera restringir las cosas solo a sí mismos. Entonces para hacer eso, acabaremos de poner una, una variable aquí arriba, una variable de almacenamiento de propietario de tipo dirección. Crearemos un constructor. Y vamos a configurar al propietario para enviar un mensaje de punto remitente. Y lo que esto hace es este constructor se ejecuta cuando se despliega por primera vez. Entonces cuando este contrato se desplegado por primera vez, el remitente que va a ser la persona que lo despliega se va a establecer como propietario. Ahora los contratos inteligentes son inmutables. Están en la blockchain, no se pueden cambiar. Entonces este constructor se ejecuta una vez y se establecerá el propietario. Entonces vamos a poner eso antes del pseudocódigo. Entonces aquí está el primero. Añádese como arrendatario. Entonces crearemos una estructura llamada arrendatario y estableceremos algunas propiedades. Entonces primero, dirección, dirección de cartera pagadero. Debido a que cada arrendatario tiene una dirección de billetera, todo en la Web tres es una dirección de billetera. Podemos identificar a la persona que podemos pagar a la persona, la persona puede pagar a otras personas. Y eso es un tipo de dirección y la configuramos como pagadero. Por cierto, si eres como, no tengo ni idea de qué es esto, este pragma en este pagadero. Creé un video de YouTube no hace mucho tiempo. Tiene una hora de duración. Se llama Aprender solidez en una hora. Si quieres ir y comprobar eso primero, te explicaré todos los tipos de datos no se dirigerían es lo que es pagadero. Y repasaremos cosas como funciones y bucles y en realidad crearemos un contrato inteligente bastante fácil para que pueda enseñarte cómo funciona la Solidez. Entonces si no tienes ni pista de lo que estoy haciendo, ve a ver eso, entonces vuelve a esto. Creo que será muy beneficioso para ti. Pondré un enlace a continuación a eso. Y de nuevo, es un video gratuito de YouTube. Por lo que tienen una dirección de billetera. A continuación, vamos a hacer String FirstName. Y por supuesto String LastName. Porque a pesar de que son una dirección de billetera, queremos algún tipo de personalidad detrás de ella. Entonces vamos a poner un par de booleanos que bool pueda rentar, pueden rentar, ¿se les permite rentar? No se les permite rentar. Verás cómo funciona esto en un minuto. Bool activo, ¿están activos? Actualmente están en la bicicleta cuando lo comprueban? Habrá activo cuando lo vuelvan a registrar , no estarán activos. Equilibrio. Pueden enviar dinero a su saldo para cubrir los honorarios. Y luego un par más de ONU. Por lo que el monto adeudado este es el monto que tienen que pagar. Por lo que sacan la moto y cuesta estos muchos minutos en un total hasta esta cantidad. Esto es lo que se debe. Y luego fuiste a iniciar un fin para que podamos hacer un seguimiento de la hora de inicio y fin para que podamos conseguir ese lapso de tiempo. Te acabaste. Y eso es todo. Eso es todo lo que quiero con mi inquilino. Y creamos eso en una estructura que es como un objeto. Si viste mi solidez de Learn en video de una hora, lo que hicimos ahí es que creamos una matriz de inquilinos, y luego acabamos de hacer un bucle para encontrar el índice que queríamos. Siempre que queríamos un arrendatario en particular, buscaríamos la dirección de la billetera, obtendríamos ese índice. Sabríamos que el arrendatario es. En este video, vamos a hacer algo diferente. No vamos a usar una matriz. Vamos a usar un mapa, que creo que lo hace mucho más fácil. Y no tienes que lidiar con los bucles, que a veces si hay demasiados o si hay una cantidad desconocida de bucles, podría causar altas tarifas de gas. Así que vamos a hacer una cosa llamada mapeo. Es como un diccionario, es un par key-value. Hacer mapeo, y la clave será la dirección. El valor va a ser el arrendatario. Lo hará público, y lo llamaremos inquilinos. Para que podamos mirar a un arrendatario por la dirección de su billetera. No tendremos que recorrer nada. Sólo podemos decir, aquí está la dirección de la billetera, dame el arrendatario. Y por último, podemos hacer que este anuncio renter funcione para parámetros de aire. Van a ser los parámetros del arrendatario. Así que vamos a decir dirección. En realidad, probablemente sea más fácil sólo copiar esto, pegarlo, porque vamos a poner exactamente lo mismo que los parámetros. Saca estos semiccolones y pon comas. Y por cierto, ese es el Comando D. Si seleccionas algo y haces el Comando D en un Mac, solo puedes seleccionar la siguiente instancia de la misma y luego cambiarlas todas a la vez. Y yo no cambié éste. Y luego puedo tomar como el espacio en blanco y golpear el retroceso. Y ahí vamos, ponemos un espacio entre ellos y todos están en una línea. Por lo que todos estos sólo corresponden a las propiedades y al arrendatario. Eso es todo lo que es. Después quítate esta coma final y pon mis corchetes rizados. Y luego a partir de aquí queremos agregar este arrendatario a nuestro mapeo. Y para sumar a un mapeo, solo hacéis inquilinos, ¿verdad? Porque están mapeando se llama inquilinos. Y entre paréntesis, pones dirección de billetera porque esa es nuestra clave. Las direcciones son clave. En esto, por cierto, es el tipo, el tipo es dirección. En nuestra billetera, la dirección va a ser la clave. El valor va a ser el arrendatario. Así que para agregar algo a un mapa, solo usas como la dirección de billetera de inquilinos es igual a uno o algo en él agrega una clave de dirección de billetera en un valor de uno. Pero en lugar de uno, queremos un arrendatario. Vamos a sumar un arrendatario con los mismos valores anteriores. Dirección de billetera, FirstName. Lastname puede rentar. Activo, equilibrio. Y déjame encenderme. ¿ Tienen una palabra wrap Word Wrap y editor no parece ser. Oh, ahí vamos. Tuve que cortarlo y recortarlo. Pero está aquí abajo en estas opciones. Equilibrio, empiece un fin. Estos son nuestros parámetros. Entonces vamos a utilizar este Agregar renta o función. Vamos a poner en todos los parámetros que queremos y nos va a crear un nuevo arrendatario. En este mapa. Sólo va a, Es como un empujón. En JavaScript. Simplemente estamos empujando a un arrendatario a este mapeo o diccionario o como quieras llamarlo. Ahora tengo un error. ¿ Qué está pasando aquí? No se especificó visibilidad. Y Yup, queremos hacer esto público. Tenemos otro error y la ubicación de los datos debe ser memoria se llaman datos. Entonces las cadenas tienen que ser memoria se llaman datos, que vamos a usar memoria. Y eso debería despejar el error. Impresionante. Entonces ese es nuestro anuncio de renta o función. Si abro la pestaña de despliegue por aquí, y solo elijo la VM de JavaScript. Haga clic en Desplegar. Podemos probar esto. Así que agrega arrendatario. Entonces permítanme poner aquí mis valores. Así que voy a elegir solo una dirección aquí arriba y dirección de cuenta que tienes un montón para elegir. Puedes usar uno como propietario y el otro es el no propietario, pero en este momento no importa. Entonces voy a copiar el primero, pegarlo aquí. Ahora FirstName, voy a poner Travis. Apellido. Pongamos prueba. Y luego se puede rentar. Tan cierto, todo el mundo puede rentar por adelantado activo, falso. Y luego los siguientes cuatro van a ser 0, así que 0000. Así que intentemos agregar un arrendatario. Aquí abajo. Parece que fue exitoso. Y si elijo inquilinos y pongo en mi dirección de billetera, que es nuestra clave, podemos buscarla haciendo clic en inquilinos. Y ahí estoy. Aquí están todos los valores del arrendatario que acabo de añadir, así que todo se ve bien. Ahora, cierra esto y continúa. Muy bien, así que el siguiente en el pseudocódigo es echar un vistazo a una bicicleta. Entonces hagamos una función llamada checkout. Y vamos a pasar en una dirección. Como dije, vas a estar viendo esto mucho porque voy a echar un vistazo a una bicicleta y cuando pase en la dirección de mi billetera para que pueda identificarse, ese soy yo revisando la moto. Y quiero hacerlo público. Y dentro de ella, quiero voltear algunas de mis propiedades de inquilino, dos valores diferentes. Entonces cuando compruebo algo, quiero ponerme activo a true, ¿verdad? Entonces. Dirección de billetera de inquilinos, punto activo. Entonces este es el ancho del arrendatario, esta dirección de billetera en el mapeo, punto activo es igual a verdadero. Entonces esto es, oye, acabo de revisar una bicicleta. Actualmente estoy activo. Lo siguiente que voy a hacer es que voy a grabar esa marca de tiempo. Entonces los inquilinos dot wallet address dot start iguala bloque, punto marca de tiempo. Ahora esto solía usarse para simplemente escribir ahora. Pero ahora en solidez usas bloque dot marca de tiempo. Entonces esto nos va a dar una marca y eso es en parte convertidor. Entonces es una marca de tiempo Unix no es como un mes, año tipo de cosa. Es un tiempo único Unix marca de tiempo, que es una uint8, que todas las fechas en Solidity RUN. Entonces vamos a fijar la hora de inicio. Y también queremos, si lo piensas, si te echan un vistazo a una bicicleta, tenemos que poner la renta de lata a falsa. Empieza, oye, puedo rentar. No hay restricciones en mí, pero una vez que me echa un vistazo a una bici, necesito establecer que pueda rentar a falso porque ya tengo una bicicleta fuera. Permítanme seleccionar esto, pegarlo y hacer puede rentar falsa, esta persona no puede rentar una bicicleta porque ya tienen una. Y creo que eso es bueno. Por lo que ahora podemos echar un vistazo a una bicicleta. Ahora, revisemos una función de bicicleta, check-in, dirección, billetera, domicilio, público. Y vamos a hacer algo parecido aquí. Tenemos que voltear activo de nuevo a falso porque ya no están en la bicicleta. Tenemos que fijar la hora de fin. Ahora, fijamos la hora de inicio, necesitamos establecer la hora de fin. Por lo que el fin está bloqueado marca de tiempo, esto nos dará la marca de tiempo para el check-in. Entonces, por último, queremos fijar el monto adeudado. Así que recuerden, tienen esta propiedad debida. Esto es lo mucho que deben en base a cuánto tiempo tenían la moto fuera. Haremos eso en unos minutos. Así que acabo de poner ponerlo a hacer aquí, para hacer establecer el monto adeudado. Y eso es revisar en una bicicleta para que podamos sumar un arrendatario, podemos revisar la bici hacia fuera y podemos revisar el backend de la bici. A continuación, obtener la duración total del uso de la bicicleta. Y vamos a crear una función para eso. Llamaremos a la función obtener duración total y dirección, dirección de billetera. Estamos pasando en la dirección de la billetera para un identificador. Public en esto devuelve una U, y así nos va a devolver un total, la duración total como un entero, una U, y un entero sin signo. Entonces lo primero que podemos hacer es restar la hora final desde la hora de inicio. Recuerda que está en una marca de tiempo Unix, así que sólo podemos restar los dos. Pero voy a crear otra función para hacer eso. Por lo que no tengo que tirar de muchos parámetros aquí. Voy a llamar a este arrendatario timespan. Tú hormiga empieza, te fuiste a terminar. Y voy a mantener esto interno al contrato. Y no hace nada de eso, no altera el contrato, realmente tocan ninguna variable fuera de esta función. Para que pueda etiquetarlo como puro. Si interactuara con algunas otras variables, podría hacerlo como vista, pero puro significa que no estoy tocando ninguna variable. Estoy haciendo todo mi trabajo aquí mismo en la función porque estoy pasando estos dos valores. Y esto devuelve un uint8. Y es tan fácil como decir retorno, final menos inicio. Así que volvamos a mi función aquí. Puedo decir que u y tiempo es igual a arrendatario, tiempo, dirección de billetera de inquilinos, dot start. Y veremos otro parámetro. Pondré mi hora de inicio en mi enzima. Entonces va a ser lo mismo. Pero la marca de tiempo final, la ND, eso debería obtener la diferencia entre los dos. Y así esto es en segundos. Por lo que quiero conseguir esto en minutos. Por lo que puedo hacer uint8 tiempo y minutos equivale a tiempo dividido por 60. 60 segundos en un minuto. Eso debería hacerlo. Y luego devuelva el tiempo y los minutos. Y tengo un error aquí dice que mutabilidad del estado de la función se puede restringir a la vista. Para que pueda poner aquí una vista. Entonces no es tan bajo como puro. Pure ni siquiera lee otras variables. Solo se ocupa de esta vista de función leerá otras variables pero no alterará la blockchain de ninguna manera. Entonces si necesitaba cambiar un valor o algo así, me diría que tengo que quitar vista. Eso es todo lo que es. Nuevamente, si quieres una inmersión profunda en estas cosas, echa un vistazo a esa solidez y 60 minutos donde voy a través de todas estas cosas en detalle. Vamos bien. Entonces tenemos la duración total de las colas por qué. Entonces tenemos el tiempo, la duración total en minutos, y podemos pasar a la siguiente pieza de pseudocódigo. Entonces estos son solo métodos simples que podemos hacer uso. Entonces como conseguir el saldo contractual, podemos hacer balance de función de vista retornos públicos, un uint8. En todo lo que hacemos es volver, dirección. Este balance de puntos. Ahora esto se ve feo y probablemente seas como, ¿para qué sirve esto? Bueno, esto se refiere al contrato devuelto, el saldo de contratos y esto es un poco convención. Lo verás en solidez. Simplemente aceptarlo, memorizarlo, y si alguna vez lo necesitas, úsalo. Para que pueda conseguir el saldo en cualquier momento que devuelvas el saldo de puntos de dirección de esto, es el contrato. Y luego para conseguir el saldo de los inquilinos, hagamos esa una función, saldo de arrendatario. Y queremos saber cuál Renner. Entonces vamos a abordar billetera, dirección. Regresa la vista pública. Acabas. Y solo queremos devolver el saldo de ese arrendatario en particular. Entonces inquilinos billetera dirección dot balance, punto y coma. Entonces tenemos a los inquilinos equilibrados, tenemos el saldo contractual, la duración total del uso de la bicicleta. Lo siguiente que queremos hacer es establecer, es fijar el monto adeudado. Ahora para esto, hay un montón de maneras en que podrías hacer esto. Lo que voy a hacer es que voy a decir cada cinco minutos que tienen la moto. Voy a cobrar 0.005 B&B. así B & B precio USD. Muy bien, entonces 0.05 son 2 dólares. Entonces cada cinco minutos vas a pagar 2 dólares. Entonces voy a usar ese 0.005 BNB. Y una cosa que podrías estar preguntando, si no lo has pedido ya es, oye, esto es remix.ethereum.org. ¿ Qué estamos haciendo con B y B? Bueno, la cadena inteligente binaria usa la misma cantidad de decimales que un teorema. El teorema tiene este sistema de 18 decimales para que sea capaz de tener pequeñas partes fraccionarias de un éter. Y es lo mismo en la cadena inteligente ByteDance. Son 18 decimales. En la cadena de bayonetas, es, creo ocho, pero la cadena inteligente de biomasa es 18. Entonces técnicamente podemos hacer cualquier cosa aquí en éter. Y se transferirá a la cadena financiera cuando vayamos a desplegar esto. En realidad estamos cuando vayamos a probarlo , lo verás aquí en un minuto. Entonces eso significa que puedo tomar este 0.005 y mover ese decimal lugar 18 y asumir que así es camino. ¿ Cuál camino es como diez a los 1800 de un éter? Es un número menor, lo que significa que tiene más ceros. Es una forma de dividir tu éter en cantidades fraccionarias. Podemos suponer que eso es lo mismo en BNB y lo mostraré. Todo esto te va a tener sentido aquí en un minuto. Así que vamos a escribir un conjunto de funciones. Hacerlo vamos a fijar el monto adeudado de una dirección en particular. Esto va a ser interno. Estamos configurando esto internamente. No queremos que nadie más se mete con esto. Vamos a poner tiempo, minutos iguales consiguen duración total. Entonces estamos, estamos llamando a esta función para obtener el tiempo total y los minutos. Vamos a conseguir eso. Entonces vamos a romper esto en incrementos de cinco minutos. Entonces si hay 20 minutos en la bicicleta, solo cuenta como cuatro minutos porque sólo estamos contando intervalos de cinco minutos. Así que cinco minutos Te van a cobrar 0.005 B&B Los segundos cinco minutos, 0.005 B&B Así que sólo voy a dividir que por incrementos de 555 minutos equivale minutos de tiempo dividido por cinco. Entonces eso significa que si vuelves a estar ahí por diez minutos, van a ser diez divididos por cinco, que son dos. Te van a cobrar punto O uno, O, B, y B. Ahora queremos establecer eso hacer propiedad. Por lo que los inquilinos dirección de billetera dot du equivale a incrementos de cinco minutos veces. Ahora aquí es lo que vamos a mover el decimal, 0.05 B&B por incrementos de cinco minutos. Sólo voy a decir empezar aquí mismo con mi decimal y decir 12345678910111213141516171818 espacios decimales. Entonces eso es cinco. Veamos. Déjame poner comas sólo para dejarlo claro. Coma ahí, coma ahí, coma ahí. Coma ahí, coma ahí. Entonces nos dieron 3691215 ceros, 515 ceros. Nuevamente, si volvemos esto hacia atrás, nos dieron 123456789101112131415161718. Y luego ponemos r dot Y tenemos 0.005. Eso es todo lo que es. Sólo estamos codificando duro esto en 0.05. Es posible que quieras tirar del último precio y hacer algún tipo de matemáticas. El asunto de la solidez es que no hacen fijo señalan la caja. Tienes que hacer algún tipo de matemáticas locas para obtener un decimal. Así que sólo voy a mantener los decimales fuera de ella y no tratar de ser como 0.005 dividido por el dólar estadounidense o algo loco como eso. Sólo vamos a poner en 0.05 cada cinco minutos. Algunos pusieron un punto y coma. Y tenemos un problema. Es porque pongo unidad en lugar de ti y que hago todo el tiempo. Y recuento de argumentos erróneos para la función llamada obtener duración total. Tenemos que pasar en la dirección de la billetera porque necesitamos saber de cuya duración. Y eso se fija la cantidad debida. Ahora podemos visitar eso para hacer tenemos aquí arriba. Entonces cuando vuelvan a revisar la moto, queremos fijar esa cantidad. Por lo que podemos simplemente llamar a set due en la dirección de la billetera. Y eso establecerá que hacen variable tan pronto como chequeen la moto. Y vamos a salvar eso. Creo que estamos cerca de poder probarlo. Sí necesitamos poner algunas declaraciones requeridas aquí, pero vamos a darle una prueba. En realidad antes de que hagamos, hay una cosa más que quiero agregar, y eso es sólo para comprobar algo que podamos usar, creo en el front-end. Y es sólo una función llamada puede alquilar una bicicleta. Esto es sólo una manera de decir, Hey, ¿ Pueden rentar una bicicleta sin tener que ir a mirar las propiedades de la struct. Podemos simplemente llamarlo aquí mismo y obtener una espalda verdadera o falsa. Entonces dirección, mientras que en domicilio. Vista pública devuelve bool, arrendatarios a su vez, dirección de billetera, dot puede rentar. Entonces es sólo decirnos verdaderos o falsos. ¿Qué significa este conjunto S? Eso es todo. Vamos a probar esto. Esto va a ser muy divertido. Creo que mientras hacemos esto, verás todas estas condiciones de cosas que queremos proteger. No deberían poder hacer esto. No deberían poder hacer eso. Y nos hará crear declaraciones require. Así que vamos a probarlo. Vamos a probarlo solo localmente primero antes hacer algo en la cadena ByteDance. Entonces vienes por aquí y vamos a elegir JavaScript VM. Nuevamente, como antes, solo voy a elegir la primera dirección y hacerlas dueñas porque la estamos desplegando y pulsamos, Desplegar y abrir esto. Entonces lo primero, agreguemos un arrendatario. Y hagamos que no sea el dueño. Vamos a elegir la segunda persona y copia. Entonces voy a poner la dirección. Aquí están todos mis parámetros. Y también los puedes encontrar aquí arriba con el arrendatario. Pero voy a poner mi dirección de billetera. Lo que Travis cofre puede rentar. ¿ Cierto? Porque puedo despotricar. No tengo una bicicleta fuera. Activo falso, y luego no hay equilibrio, nada se debe, no hay inicio y no los tiempos finales. Para agregar arrendatario. Y ven aquí abajo, elige mi dirección de billetera. Ven aquí abajo a ver que tengo un arrendatario aquí. Genial. ¿ Puedo alquilar una bicicleta? ¿ Cierto? Puedo rentar una bicicleta. Obtener duración total 0. Y para ser sinceros, no deberíamos poder comprobar eso si las motos salieron, así que pondremos una condición en eso en un minuto. Pero sigamos adelante y echemos un vistazo a la moto. Voy a comprobarlo. Y entonces cuando haga clic en inquilinos aquí, debería decir, se puede rentar falso porque no queremos poder rentar mientras nos hemos deschequeado. Debería decir activo, verdadero. Y debe haber una hora de inicio. Entonces voy a correr esto otra vez. Ahí lo tienes puede rentar falso, activo es cierto y aquí está mi hora de inicio. Ahora lo configuramos en incrementos de cinco minutos y podría ir a cambiar eso, pero sólo voy a esperar los cinco minutos y volver. Voy a pausar esto, volver después de cinco minutos y volveremos a revisar la moto , ver cómo funciona eso. Muy bien, ya han pasado unos cinco minutos. Por lo que voy a revisar la moto de vuelta adentro. Y así voy a elegir check-in, haga clic en check-in. Y ahora si compruebo, revisa mi arrendatario aquí debería tener un n tiempo. Activo debe ir a falso y puede rentar debe permanecer falso porque no han pagado y debemos tener una cantidad adeudada. Entonces vamos a hacer clic en inquilinos, y ahí vamos. Entonces tenemos una hora de inicio, tenemos un n tiempo. Ya no estamos activos y no podemos rentar. Genial. También tenemos un Mountain Dew, y van a ser cinco con todos los ceros, que va a ser algo un éter. Pero de nuevo, se va a traducir a B&B cuando lleguemos allí. Así que revisemos algunas de estas otras cosas. Puedo rentar una bicicleta que sea falsa. O el saldo del arrendatario, cuánto equilibrado tengo ahí. No he puesto nada en ella. Entonces debería decir 0. saldo del contrato es 0 y mi duración total debería ser ahora de seis minutos. Sí, es un seis. Por lo que se calculó correctamente. Teníamos la moto por seis minutos. Ahora lo siguiente que querríamos hacer es poder pagar nuestro saldo porque ahora mismo, ¿puedo revisar una bici ? No, no puedo. Porque tengo un debido equilibrado y acabo de darme cuenta de que no establecimos ninguna manera de hacer un pago. Por lo que necesitamos poder enviar dinero a nuestro saldo para pagar eso. Entonces vamos a cerrar el contrato y armar eso. Entonces esa es otra de la que me olvidé totalmente. Así que pongamos otro comentario pseudocódigo aquí abajo y solo digamos hacer un pago. Y en realidad antes de que hagamos esa función, me di cuenta de que tampoco establecimos ninguna forma de depositar dinero. Entonces el flujo es así. El arrendatario va a depositar dinero en su saldo. Entonces uno de los inmuebles aquí está equilibrado. Van a depositar dinero en el saldo para que ya haya dinero ahí dentro. Es un poco como prepagar. Pero el dinero, cuando lo deposites, va a ir a todo el contrato y luego la cantidad que pones va a ir a ti. Entonces, si diez personas ponen en $10, van a ser 100 dólares en el contrato, pero 10 dólares acreditados a cada persona. Y entonces a medida que estas personas hagan pagos, dinero se va a deducir de su saldo para que, ese dinero y el contrato total se conviertan en los dueños. Espero que tenga sentido. Creo que lo hará una vez que escribimos esto. Entonces hagamos esto. Depositar real rápido. Función compuesta, depósito, dirección, billetera, domicilio, pagadero, público, luego inquilinos. Y sólo para mostrarte esto, en realidad puedo cerrar esto y simplemente dejarlo adentro. Esto depositará dinero en el contrato porque es pagadero. Puedo llamar a esta función de depósito y enviar dinero. Y se lo va a depositar en el contrato. Eso va a hacer de todos modos. Pero también queremos añadirlo al saldo de inquilinos. Por lo que queremos hacer inquilinos saldo de dirección de billetera más equivale al valor del punto del mensaje. Ahora, el mensaje es una de esas variables globales, como teníamos aquí arriba, que no mencioné. Probablemente debería tener mensaje dot remitente, quien está enviando este mensaje dot remitente. También tenemos un valor de punto de mensaje. ¿ Cuál es el valor que estoy enviando? Entonces cuando llame a esta función de depósito, voy a enviarle un valor y se puede recoger en su mensaje global, variable, valor de punto de mensaje. Eso es todo lo que es. Entonces estamos depositando dinero en el contrato, pero también va a acreditar específicamente a esta persona. Entonces estamos depositando dinero en el contrato, pero también vamos a acreditar esta dirección de billetera o a esta persona. Ahora para hacer el pago, vamos a crear una función llamada hacer pago. Dirección, dirección de billetera. Esto es pagadero público. Y lo que vamos a hacer aquí es que vamos a hacer inquilinos, dirección de billetera, balance de puntos, y vamos a sacar el dinero del saldo. Entonces menos equivale al valor del punto del mensaje. Entonces di que eres el único inquilino, pones en $10 hacia tu saldo. Entonces hay 10 dólares en el contrato, pero ese $10 está en tu saldo. Entonces, lo que estás haciendo cuando haces un pago, solo estás sacando esa cantidad de tu saldo. Entonces hay 10 dólares en el contrato y todo está asignado a mí. Y monto mi bicicleta por $10. Cuando se saca ese $10 de mi saldo, ese $10 ya no es mío. No me queda equilibrio. Ese $10 pertenece al dueño. Y así es como se juega la cosa de la propiedad, cómo se paga a su dueño. Entonces no estamos enviando dinero al contrato, en realidad estamos eliminando dinero de nuestro saldo. Y también hay algunas otras cosas que queremos revisar, como vamos a verme sólo copiar esto. Y también hay algunas otras cosas que queremos hacer. Como queremos sentarnos, podemos rentar de nuevo a verdad. Porque ahora pueden volver a correr. Oye, hay saldos pagados, son libres de rentar de nuevo. Y sólo voy a copiar esto unas cuantas veces más. El monto adeudado va a ser 0 porque pagaron el monto adeudado. La hora de inicio va a ser 0. En el tiempo final va a estar de vuelta a las 0. Por lo que todo se vuelve a poner fresco. Tienes cosas pagadas, eres capaz de rentar. No tienes tiempo en el reloj. Ve a agarrar un bocado, y creo que eso es todo. Creo que eso es todo lo que necesitamos. Vamos a seguir adelante ahora antes de desplegarlo y ponerlo en algunas requieren declaraciones, algunos cheques para estar seguros de que no estamos permitiendo cosas que no deberíamos. Y la forma en que deberías hacer esto, ya lo he hecho, así que voy a agregarlas y explicarlas. Pero la forma en que normalmente haces esto es que llevas esto aquí y lo despliegas. Y luego vas haciendo clic botones y probando cosas y te vas, Oye, espera un minuto, tienen un equilibrio. No deberían poder chequear u oye, no deberían poder hacer un pago porque no tienen nada. ¿ Tienes que tener cheques como este? Así que como estás probando y haciendo clic en botones, te llegarás a las declaraciones require, pero voy a seguir adelante y ponerlas y explicarlas. Entonces vamos a subir primero a la función checkout, hay dos cosas que queremos comprobar. Uno, queremos asegurarnos de que no tengan un balance do. Si tienen un saldo adeudado cuando no deberían poder volver a salir, eso mantiene a la gente pagando sus facturas. De lo contrario, simplemente siguen revisando la moto fuera y no hacen ningún pago porque no la vamos a hacer cumplir. Estamos tratando de estar descentralizados aquí. Entonces lo que es es que simplemente no podrán salir a menos que paguen su saldo. Entonces tenemos que comprobar eso. Y también tenemos que comprobar que puedan rentar que puedan rentar la propiedad se establece en verdad. Entonces lo hacemos con require declaraciones. Y lo que es limpio de require declaraciones es que revertirán la transacción antes de que los gases se extiendan, lo cual es bastante ordenado. No vuelas el gas y luego lo fallar y luego pierdes tu dinero. Para hacer eso pones requieren y luego estableces tu condición de que estés requiriendo inquilinos dot wallet address dot do y queremos hacer para ser igual a 0. No queremos ninguna cantidad, ¿queremos que paguen su factura? Si eso no es cierto, podemos poner una coma y luego algún tipo de mensaje. Tienes un saldo pendiente de punto y coma y vamos a poner el otro. Hagamos una copia y en lugar de hacerlo, vamos a revisarla. ¿ Se puede rentar puede rentar debe igualar verdadero? Eso es lo que requerimos. Requerimos que sean capaces de rentar. Si no, vamos a poner un mensaje. No se puede rentar en este momento. Eso es todo por checkout. Ahora para check-in, queremos comprobar que están activos porque si no estás activo, no tienes bicicleta, ¿verdad? Por lo que si solo haces clic en check in y no tienes una moto que se haya retirado, debería arrojar un error. Por lo que voy a copiar esta declaración require. Voy a poner esto aquí y hacer activo. Tan activo debe ser cierto, lo que significa que tienen la moto chequeada activamente. De lo contrario los mensajes, por favor echa un vistazo primero a una bicicleta. Ahora vamos a bajar para conseguir duración total y queremos poner un cheque aquí. Queremos comprobar que el activo es falso, lo que significa que se han registrado en su bicicleta. No pueden obtener la duración a menos que hayan facturado la bicicleta. Y si eso no es cierto, entonces vamos a decir que la bicicleta está actualmente chequeada. Entonces finalmente, en esta función de hacer pago, ahora probablemente haya más que se podría poner aquí. Como dijo alguien en los comentarios de YouTube, Hey, olvidaste este cheque. Bueno, hay muchos cheques y cosas que podrías poner. Este va a la producción. Nos gustaría asegurarnos de que haya muchos cheques en su lugar. Pero lo último que quiero hacer es hacer el pago. Quiero asegurarme de que tengo un rocío de montaña que podría hacer es más de 0. Si estoy haciendo un pago, no tengo nada que pagar . ¿Cuál es el punto? También quiero comprobar que mi saldo es mayor que el monto estoy pagando al intentar pagar diez dólares y solo tener ocho, eso no va a funcionar. Por lo que necesito hacer ese cheque también. Para requerir declaraciones aquí. El primero va a comprobar que du es mayor que 0. Eso no es cierto. Te voy a poner, no tienes nada debido en este momento. El siguiente queremos comprobar que el saldo es mayor que el valor del punto del mensaje. Entonces recuerda que esto es un pagadero, la gente está enviando dinero. Queremos que nuestro saldo sea mayor que la cantidad de dinero que se envía. Aquí, vamos a poner, no tienes suficientes fondos para cubrir el pago. Por favor haga un depósito. No se puede pagar directamente, hay que depositar dinero y luego transferir ese dinero es pagos y ahorrar eso. Y creo que hemos terminado y estamos listos para hacer algunas pruebas. Entonces primero vamos a probarlo en esta VM JavaScript. Entonces lo vamos a desplegar a la cadena inteligente de finanzas. Una última cosa que debemos hacer para probar esto obtener duración total aquí. No nos hemos fijado en incrementos de cinco minutos. Así que recuerda la última vez que probamos, tuvimos que esperar cinco minutos para que pudiéramos conseguir un número para poblar. Bueno, vamos a cambiar eso solo por algo codificado, como regresa seis minutos, así que no tenemos que esperar de nuevo. Devuelve seis y vamos a tener que sacar estas porque no le gustan las variables no utilizadas. Así que guarde eso. Así que esta vez sólo vamos a conseguir seis minutos. No tenemos que esperar. Podemos hacer el check out, volver a entrar inmediato, y poder probar. Entonces vamos a desplegar eso. Alguien para elegir la primera dirección es mi dueño. Ve a copiar la dirección y desplegarla. En la segunda dirección va a ser uno de mis inquilinos. Entonces agrega la dirección. Nombre es Travis, apellido es prueba, que no es mi apellido por cierto, puedo despotricar es cierto. ¿ Y cuáles son los otros? Activo es falso. 0 saldo 0, hacer 00, tiempos de inicio y fin. Voy a añadir que el arrendatario debe poder bajar aquí, poner en la dirección, y ver al arrendatario. Genial. Ahora echemos un vistazo a alguien para echar un vistazo a una bicicleta. Haga clic en checkout. Y mis valores aquí abajo deberían cambiar en consecuencia. Haga clic en los inquilinos tienen una hora de inicio. Ahora activo y no puedo rentar porque tengo una bicicleta fuera. Genial. Hagamos algunos otros cheques. Por lo que se puede alquilar una bicicleta es falsa, obtener duración total debería darme un error. Por lo que si hago clic en eso, se revirtió y dice que la bicicleta está actualmente chequeada. Por lo que es esto requiere declaración aquí. Bike está actualmente retirado porque activa, el requisito es que activo es falso pero activista verdadero, por lo que arroja un error. Entonces eso funciona. Otro cheques sí tenemos comprobaremos ese. Así que echa un vistazo tienes un saldo pendiente. Puedes ejecutarlo esta vez. Revisaré todos esos en un minuto. Así que volvamos a chequear. Vuelve a chequear. Y si obtenemos nuestra duración, deben ser de seis minutos porque recuerda que lo configuramos manualmente. Así que aquí están seis minutos. Ahora que nos registramos, deberíamos poder bajar aquí a los inquilinos y ver los cambios. Por lo que haga clic en esto. Se puede rentar como falso, puedo echar un vistazo a otra bicicleta. ¿Por qué? Porque tengo una cantidad adeudada, esta cantidad y es de cinco a todos estos ceros. Pero recuerda, eso es a la milésima potencia. Realmente es 0.05. Porque solo nos registramos en incrementos de cinco minutos. Activo ahora es falso, lo cual es bueno. Ya no estamos en la bicicleta, pero no podemos rentar porque tenemos que pagar este saldo. Ahora lo que pas 3. Finalizar nuestro contrato inteligente: De acuerdo, así que antes de pasar a la siguiente sección, necesitamos agregar un par de otras funciones aquí en el contrato inteligente. Y lo sé porque seguí adelante y construí el frente y me di cuenta de que necesitábamos un par de cosas más para ayudarnos. Entonces vamos a añadir tres funciones aquí. El primero se va a llamar Get do en todo lo que hace es conseguir el montura dual para una dirección de arrendatario, dirección de billetera , una función pública, es una vista y te devuelve y y sólo vamos a volver la dirección de la billetera de los inquilinos, punto do. Entonces el monto que tiene que hacer el arrendador. A continuación, vamos a conseguir al arrendatario real. Entonces vamos a conseguir al arrendatario y nos va a devolver cuatro piezas de información sobre ese inquilinos. Entonces es básicamente como devolver la renta u objeto, pero sin la parte Uinta, partes de ella. Entonces va así. Función, consigue inquilino. Vamos a volver a pasar la dirección de la billetera. Es público para ver, y regresa por las cosas. Así memoria de cadena, FirstName, memoria de cadena, LastName. Toro puede rentar. En toro activo. Eso es todo lo que queremos saber en esta instancia. Por lo que aquí vamos a decir FirstName es igual a los inquilinos billetera dirección punto primer nombre. Whoops. Entonces voy a copiar esto tres veces más en un Mac, esa es Opción Turno. Y luego abajo para copiar la línea en la que estás. Y voy a usar el Comando D para seleccionar ambas instancias del FirstName y LastName. Y entonces voy a cambiar éste también, se puede rentar en éste demasiado activo. Y todo lo que estamos haciendo es simplemente devolver estas propiedades de ese arrendatario. Y luego finalmente, vamos a crear una función llamada arrendatario existe. Y va a devolver un bool, ya sea que exista o no ese alquiler. Por lo que necesitamos saber si ese arrendatario necesita sumarse al contrato inteligente o si ya están agregados. Por lo que podemos decir función renter existe dirección mientras que en domicilio, vista pública, y devuelve un bool. Aquí tenemos que comprobar si esa dirección de billetera existe o no. Por lo que podemos decir si los inquilinos mientras que en la dirección dot mientras que en la propiedad dirigida, si esa dirección de billetera no es igual a la dirección 0. Ahora podría ser como ¿cuál es la dirección 0? ¿ Qué se supone que es eso? Bueno, aquí hay una buena explicación. Entonces con mappings en Solidity, no hay forma de comprobar directamente si existe algo. Todo se establece en su valor predeterminado hasta que se cambie. Eso significa que cada entero comienza con 0, cada cadena comienza con una cotización. Cada matriz comienza como esto y la solidez no tiene concepto de null como otros idiomas. Entonces lo que están diciendo es que si recuerdas en re-mix, vamos, vamos a tirar esto hacia arriba. Simplemente comenta esto ya que no hemos terminado. Así que vamos a venir aquí y desplegar nuestro contrato. Voy a hacer clic en Desplegar y abrir esto. Entonces, ¿qué pasa si voy a los inquilinos y solo pongo en una dirección y haga clic en el botón. Bueno, verás que todo está en su estado predeterminado. hay nada que no, como el dicho postal no hay nada nulo y solidez. Va a tener estos, va a ser el valor de lo que sería básicamente, así que el saldo es 0, hacer es 0. Todos estos van a ser 0. Los toros van a ser falsos. Quiero decir, es solo el valor predeterminado, no es un nulo. Y verás aquí la dirección de la billetera es los ceros, ceros, ceros. Ahí está, estos están todo el camino a través. Y eso equivale a la dirección 0. Creo que también podríamos hacer dirección 000 o algo así. Pero la dirección 0 dice, hey, si esa persona está en los inquilinos en no tiene esto, entonces deben existir. Eso es todo lo que es. No quiero profundizar demasiado en esto. Ojalá eso tenga sentido, pero es una buena manera de comprobar si una clave está en un mapeo. Así que déjame cerrar eso y volver a esto. Si la dirección de billetera de los inquilinos dirección dot wallet address no es igual a una dirección en blanco, lo que significa que sí existen. Entonces vamos a volver verdad. De lo contrario devolver falso. Después hay un par de retoques que quiero hacer. Entonces si subimos para obtener duración total, quiero eliminar esta declaración require porque simplemente es innecesaria. Por lo que eliminamos que requieren declaración. Ahora quiero poner una condición. Entonces, si la hora de inicio de los inquilinos es 0 o si su hora de inicio es 0, lo que significa que han revisado la moto pero no la han revisado de nuevo. O si por alguna razón solo tienen una enzima que probablemente nunca va a suceder, quiero devolver 0 porque son, están revisados, el tiempo no está completo. Entonces si quieren obtener su duración total antes revisar la moto y no pueden hacer eso. Tienes que revisar la moto y primero hacer ese cálculo. Así que sólo voy a subir aquí y hacer si los inquilinos dirección de billetera dot start es igual a 0. O si voy a copiar y pegar esto solo porque es más rápido para mí. Si el tiempo de fin es igual a 0, entonces simplemente quiero devolver 0. Tienes 0 tiempo en minutos. De lo contrario. Vas a hacer todas estas cosas. Ya teníamos una copia que y pegarla en. Eso es todo. Tu contrato está listo para funcionar. Tenemos nuestro contrato y re-mix, y desde aquí podemos compilarlo, podemos desplegarlo, podemos conseguir el ABI y todas estas cosas importantes. Pero nadie realmente quiere hacer eso desde re-mix porque esto está basado en navegador. Creo que lo guarda en el navegador, pero podría perderse. Y quieres todo tu código normalmente juntos y quieres controlarlo de versiones en GitHub y cosas así. Entonces vamos a trasladar esto a un nuevo proyecto. Y te voy a mostrar cómo podemos usar algo llamado hardhat para arrancar todo este ecosistema para gestionar este contrato inteligente. Esto te va a encantar. Así que adelante y abre tu terminal y vamos a crear una carpeta para nuestra aplicación. Entonces voy a entrar en mi escritorio y voy a hacer un directorio MKDIR. Voy a llamarlo aplicación de alquiler de bicicletas. Golpea Enter. Y luego voy a cd dentro de ella. Y código dot para abrirlo en código VS. O puedes arrastrar la carpeta en, o bien puedes hacer clic derecho o hacer lo que quieras, solo ábrala en VS Code. Ahora, lo que voy a hacer es que voy a ir a hard hat.org. Entonces ve a hardhead.org. Y lo que es esto de nuevo, está en el entorno de desarrollo del teorema. Permite ejecutar solidez localmente, depurar, probar. Te da flexibilidad y todas estas otras cosas buenas. Pero lo que verás en un minuto, todas las grandes cosas que hace. Así que adelante en la parte superior aquí y haz clic en Empezar. Y vamos a seguir estos pasos porque están escritos muy bien. Entonces instalación, necesitamos hacer un NPM instalar hardhat. Así que asegúrate de no tener JS instalado. Si no lo haces, solo ve a NodeJS y Google y haz click en NodeJS y simplemente descarga la versión LTS. Una vez hecho eso, tendrás NPM, lo tendrás en Bx, tendrás nodo, todo lo que necesitas. Entonces vamos a usar este comando. Y vamos a empezar en realidad haciendo la creación de un directorio llamado contract. Voy a cd en ese directorio de contratos. Entonces voy a hacer npm en ella, y dash y. así npm init dash y Lo que esto hace es que esto crea un paquete JSON, para que podamos instalar paquetes npm en el dash y solo hace la instalación predeterminada. Entonces haz clic en Entrar y debe configurar todo para ti y deberías tener en tu carpeta de contrato un archivo package.json. Por lo que ahora podemos ejecutar nuestro comando, que es npm install save-dev hardhat. Por lo tanto haga clic Enter para instalar hardhead. Después de que eso haya hecho, vamos a hacer este Quickstart. Este quickstart va a hacer es arrancar un proyecto de muestra que vamos a utilizar. Para hacer eso. Acabas de correr en px sombrero duro. Entonces copia eso. Muy bien, así que voy a pegar eso en NP x hardhat, pulsa Enter. Y nos va a dar algunas opciones. Por lo que vamos a elegir crear una muestra básica de proyectos. Entonces el primero de aquí, hardhat project root va a ser la carpeta contractual, por lo que estamos bien ahí. Sí, quiero que me ignoren. Y dice, ¿ quieres instalar esta muestra proyecta dependencias con NPM las cuales necesitarás instalar. Así que haz clic, asegúrate de que haya una y y pulsa Enter. Se va a instalar un par de paquetes que nos ayuden con las pruebas y hablar con el contrato y todas esas cosas mientras está instalando. Veamos qué sigue. Entonces nos va a dar algunos ejemplos aquí de cómo ejecutar tareas. Para que puedas correr en px hardhat para ejecutar tareas. Para que puedas comprobar, puedes imprimir la lista de cuentas. Puedes compilar tu contrato. Puedes ejecutar un nodo, puedes hacer pruebas, muchas cosas buenas. Hay un hardhat config js que te permite configurar tus implementaciones. Entraremos en eso en un minuto. Puedes correr en cuentas de hardhat px para mostrar todas las cuentas con las que puedes trabajar. Es, casi crea 20 cuentas para que lo uses. Puedes compilar tus contratos ejecutando npm hardhead compile. Se puede probar ejecutando NPS Hall en prueba. Y un montón de cosas geniales. Vamos a pasar por esto. Muy bien, eso está hecho. Entonces si miras en nuestra carpeta ahora tenemos una carpeta Contracts, que nos dan una demo llamada Greeter dot soul. Por supuesto tenemos nuestros módulos de nodos scripts. Este va a ser nuestro script de despliegue. Entraremos en eso en un minuto. Se pueden realizar pruebas. No vamos a hacer muchas pruebas porque simplemente no queremos hacer este curso súper largo, así que probablemente nos saltemos las pruebas. Y aquí está nuestra config. Y por supuesto están empaquetados JSON. Primero vamos a copiar o contratar aquí. Así que vamos a hacer clic derecho en la carpeta del contrato. Crea un archivo llamado Bike Rental dot soul. En realidad creo que llamamos a esta cadena de bicicletas dot soul. Y voy a tomar mi contrato de solidez, resaltarlo todo y solo pegarlo aquí y guardarlo. Probablemente quieras instalar el, aunque no sé si es necesario, pero es posible que quieras instalar la extensión de solidez. Creo que tengo eso instalado. Sí, tengo la extensión de solidez. Entonces me está gritando porque no le gusta la versión. Nuestros compiladores actuales 0 dot phi dot 0. Para que pueda abrir mi piloto de comandos y elegir Cambiar versión del compilador de espacio de trabajo. Voy a cambiarlo a 080, que puedo seleccionar aquí, y por lo general toma como cinco segundos o refresco para limpiar. Sí, ahí vamos. Aclarado. Entonces mi contrato está aquí. Y en realidad podemos echar un vistazo a cómo funciona esto. Entonces si vamos a saludar o no al alma, ves que tenemos un contrato llamado Greeter. Tenemos nuestro constructor y tenemos dos funciones. Tenemos una función de saludo que devuelve un saludo, y luego tenemos una función de saludo conjunto que permite cambiar el saludo. Entonces aquí está el contrato. Y luego si vas a scripts y script de ejemplo, está configurado para desplegar esos contratos. Por lo que ven aquí todos los grandes comentarios que obtenemos el contrato para desplegar. Así que consiga la fábrica de contrato llamada greeter, que es el contrato. Y luego despliega esos objetos. Entonces este es el objeto más saludo que representa el contrato. Y luego despliega ese objeto con hello hard hat como parámetro. Entonces si vuelves a saludar, verás en el constructor que pasas en un saludo, lo que quieras que sea tu saludo predeterminado. El script de muestra desplegará esto y luego esperará greeter desplegado. Entonces imprime greeter desplegado a cualquier dirección de contrato a la que se lo implementa. Entonces ahí está el contrato de graduadora, es como se despliega el greeter. Pruebas de muestra. Entonces la, la única prueba que dan es que el saludo devuelva el nuevo saludo una vez que se cambie. En esto hace lo mismo, crea un objeto más salubre, objeto de contrato. Se burló de lo despliega con el parámetro HelloWorld y luego espera, no espera declaración, asegurándose de que ese contrato tenga HelloWorld como es saludo en, luego establece el saludo a algo diferente, y luego espera que sea algo diferente. Entonces esa es la prueba y debe pasar el saludo original y el saludo de cambio. Entonces en hardhat config, realmente no necesitas configurar nada para el despliegue local y lo veremos en un minuto. Entonces así es como funciona. Y ahora que sabemos cómo funciona, eliminemos este saludo, no alma en reproducir todo eso por nuestro contrato. Por lo que eliminar puntos más saludos alma. Entonces vamos a la muestra de guión y vamos a cambiar esto a bicicletas y conseguir cadena bicicleta de fábrica de contrato y saludos. Vamos a hacer cadena de bicicletas minúsculas. Y entonces queremos desplegar este objeto que ahora es cadena de bicicletas no más saludos. Cambia eso a cadena de bicicletas, despliega y no enviamos nada con su despliegue. Así que vamos a sacar eso. Cambia esto a cadena de bicicletas minúsculas. En la consola, la cadena de la bici del tronco desplegó a la dirección de punto de la cadena Ojalá eso tuviera sentido. Sólo estamos cambiando estas variables para desplegar nuestro contrato y no el saludos. Entonces eso debería ser bueno. Ir a pruebas de muestra. En realidad sólo vamos a comentar esto. Y eso es todo. Entonces ahora podemos hacer en px hardhat, compilar, compilar nuestro contrato. Y cuando hagamos esto, vamos a conseguir una nueva carpeta con sus artefactos compilados por aire. Por lo que ya verás tenemos una carpeta de artefactos. Si abres eso, hay algo de información de construcción. No necesitamos preocuparnos por eso. Y si abres la carpeta Contracts, hay otra carpeta llamada bike chain dots soul con dos archivos. En el archivo que nos interesa está la cadena de bici dot json. Y aquí tenemos alguna información clave que vamos a tener que usar para vincular nuestro front-end. Uno de ellos es el ABI. Ahora el ABI describe todas las funciones. Eso están disponibles en nuestro contrato para que llamemos. Nuestro contrato está ahí fuera en la blockchain y el ABI le dice a nuestra aplicación qué funciones puede llamar. Por lo que verás aquí el constructor, y verás saldo de función, sumar, agregar arrendatario, saldo de renta o todas las funciones que creamos. Eso es lo que es el ABI. Tendremos que poner esto en nuestro proyecto en un minuto. Entonces abajo que tenemos este código de aspecto encantador, y este es el bytecode. Este es el ejecutable que vive en la Máquina Virtual Ethereum. Así que cuando nos desplieguemos, Esta va a ser alguna información clave ahí. Pero no tenemos que hacer un seguimiento de esto. En cada vez que hagas un cambio en tu contrato, vas a tener que ejecutar esta compile hardhat de NPM. Y todo lo que va a hacer es que se vuelva a compilar, refrescar los artefactos. Hemos hablado de compilar nuestros contratos y probar los contratos. Ahora veamos el despliegue. Entonces lo que vamos a hacer en este curso es que lo vamos a desplegar a la cadena inteligente de finanzas. Pero digamos que no querías salir a una red de pruebas, pero solo quieres que lo haga todo localmente. Bueno, así es como harías eso. Por lo que podemos usar este script de ejemplo para desplegar. Así que aquí mismo verás en px hardhat ejecutar en el script R. Dirá desplegar un saludo con saludo, saludo desplegado a esta estafa, dirección del contrato. Pero ves aquí un sombrero duro siempre hará girar una instancia en memoria por defecto. Entonces esta va a ser una instancia en memoria. Pero también es posible correr hardhead de una manera independiente para que clientes externos como MetaMask puedan conectarse a ella. Esto puede ser MetaMask, tu front-end dapp, o un script. Para que puedas hacer esto en el nodo hardhat px. Y lo que esto hace es que esto crea un nodo independiente que se ejecuta en su computadora. Entonces si escribo en el nodo hardhat px, pulsa Enter, va a hacer un par de cosas geniales. Entonces uno, me va a dar esas 20 direcciones, pero me va a dar las llaves privadas esas direcciones a las que es realmente genial y me va a dar 10 mil. En. Lo que puedo hacer ahora es que puedo abrir un MetaMask. Y tomemos esta primera cuenta. Por lo que agarró la clave privada de esta primera cuenta e ir a MetaMask. Y en realidad antes de hacer eso, necesitarás agregar el punto final del host local 8545 a tu MetaMask. Entonces si vas a la red de anuncios y agregas una nueva red, en realidad ya la tengo. Pero tengo aquí localhost 8545. Entonces el nombre de la red va a ser localhost 8545. Nueva URL RPC va a ser HTTP dos puntos slash slash host local colon 854 o cinco. ID de cadena es 1337. Y por cierto, si no tienes el nodo funcionando, esto te va a dar un error. Pero de todos modos, es 1337. El símbolo de moneda va a ser IV. Y luego puedes dejar esta en blanco. Y luego golpeó Save. Y esto realmente va a guardar esta red de host local para que juegues con. Ahora puedo copiar esta clave privada y luego ir a Importar Cuenta y establecer la clave privada, presionar Importar. Y entonces ahora tengo 10 mil para jugar con una cuenta dos. Y en realidad puedo contabilizar detalles. Puedo cambiar esto a prueba de hardhat local o algo así. Lo que sea. Entonces quieres dejar este nodo en ejecución. Tengo que dejar esto corriendo. Si te detuviste, esto ya no va a funcionar. Por lo que quieres ir a otra terminal. Y vamos a ejecutar este siguiente comando, NPS hardhat run. Entonces vamos a desplegar este script, pero vamos a usar el host local de la red. Para que puedas decirle a la red de TI pista OB o lo que sea que lo pruebes que quieras usar. Solo tienes que configurarlo en tu configuración. Pero vamos a usar la red de host local. Y no lo sé. Creo que eso acaba de llegar por defecto. No lo veo aquí. Pero de todos modos, agarremos esto y lo desplieguemos. En otro término que recordaremos, deje esto corriendo en otra terminal, ejecute esto. Oh, eso no está bien. Asegúrate de estar en tu carpeta de contratos. Asegúrate de estar en tu carpeta de contrato porque cuando cambias de terminales, te vuelve a patear a la raíz. Así que corre eso otra vez. Y ahí está. Cadena de bicicletas desplegada a esta dirección de contrato. Este contrato inteligente se implementó en tu nodo que se está ejecutando aquí. Para que a medida que construyas tu aplicación front-end, solo puedes usar esta cuenta. Quiero decir, tendrás que poner en tu contrato para vestirte y cosas así, pero vas a usar esta cuenta y luego solo podrás probar todo localmente. Tienes mucha Eva. Es muy divertido. Pero en realidad queremos ir un paso más allá y usar la red de pruebas de cadena inteligente de finanzas. Por lo que eso estará en vivo en la red de pruebas. Y luego si por alguna razón querías llevarla en vivo y producción, o quieres saber cómo llegar a la producción. Desde ahí es muy sencillo. Así que hagamos eso ahora. Entonces voy a cerrar este navegador. Ya no necesito eso. No necesito que este nodo se ejecute. Y sólo voy a cerrar esta terminal y despejar esto. De acuerdo, entonces ese fue el escenario de desarrollarse en su entorno de acogida local. Por lo que hace girar un nodo independiente para que trabajes. Puedes desplegarlo en ese nodo y luego puedes hablar con él con clientes externos como MetaMask. Gran opción. Pero de nuevo, queremos salir a una red de prueba. Queremos hacer que esta cosa sea legítima y tener una sensación real al respecto, no un anfitrión local. Las cosas no están pasando realmente. Situación. Ahora hay una serie de formas en que podrías ir sobre conectarte a la cadena inteligente ByteDance. Pero muchos desarrolladores, usan un servicio de terceros para esto porque te permite un acceso rápido y te permite escalar si alguna vez has querido llevar tu app a producción. Entonces hay servicios como interferer, eso es popular. La alquimia es realmente popular, pero ambos se centran más en un teorema, no en las finanzas. Hoy vamos a utilizar un servicio llamado Morales. Morales nos va a permitir hablar directamente con la red de pruebas de cadena inteligente de Biodefense. Tiene muchas, muchas otras cosas en las que puedes profundizar también, pero te da acceso rápido. Permite escalar. Simplemente tiene una plataforma construida para este tipo de cosas. Entonces si vas a Morales.io y haces click en inscribirte de forma gratuita, es completamente gratis. Acaba de poner en su dirección de correo electrónico, crear una contraseña. Creo que te va a mandar un e-mail para confirmarte y estarás todo listo. Así que voy a ir a iniciar sesión y simplemente poner mi contraseña. Una vez que llegues aquí, quieres ir a nodos rápidos y hacer clic en la red BSC en puntos. Aquí tienes un conjunto de puntos finales. Tiene la red principal, el archivo neto principal, el conjunto de pruebas, y el archivo neto de prueba. Lo que queremos es la red de pruebas. Entonces copia eso. Y volvamos a nuestro proyecto y vamos a sumar a esto. Entonces pon aquí una coma. Y así es aquí donde podemos definir nuestras diferentes redes. Entonces podemos hacer pruebas en la red principal, anfitrión local, como lo que acabamos de hacer. Podemos poner algo de información allí, cualesquiera que sean las redes que queramos usar. Entonces vamos a llamar a esta red de prueba. Y hay dos propiedades que necesitamos, URL y cuentas. Para la URL, vamos a pegar exactamente en lo que copiamos de Morales. Entonces para cuentas, vamos a agarrar nuestra cuenta de MetaMask. Entonces si abres MetaMask y acudes a la red de pruebas BSC. Ahora si no tienes esto, haz click de nuevo, redes y red de anuncios. Y querrás agregar una nueva red para la red de pruebas BSC. Y esa información está justo aquí. Entonces el nombre de la red es BSC test net. El nuevo RPC URL es https dos puntos slash slash data. En realidad solo, solo ve y escribe por Nance Smart chain a MetaMask o algo así. Y dirá conectar MetaMask para financiar cadena inteligente. Aquí mismo, obtendrás los valores aquí, test net. Entonces aquí está la URL RPC. Aquí está el ID de la cadena, que es 97, símbolo es B&B en la URL del Explorador de Bloques es esta. Así que asegúrate de copiar estos N. Así que de nuevo, ve a Configuración de redes en una red, copia estos valores y pulsa Guardar. Y entonces deberías tener una opción llamada BSC test net. Y lo que quieres hacer es probablemente crear una nueva cuenta. No quieres usar una de tus cuentas normales. Tengo una llamada prueba de BSC. Para crear una nueva cuenta, solo tienes que hacer clic en este círculo y crear cuenta y luego darle un nombre y pulsa Crear y crea una para ti. Pero lo que quieres hacer ahora es asegurarte de que esta una cuenta que no vas a usar para nada más, claro. Pero lo que quieres hacer ahora es ir a los detalles de la cuenta. Y luego quieres exportar clave privada. Así que haz clic en Exportar clave privada. Y yo tengo, tienes que poner tu contraseña de MetaMask. Así que déjame agarrar eso. Entonces escribe tu contraseña de MetaMask y pulsa Confirmar, y te mostrará tu clave privada. Así que copia esto. Copia eso. Entonces vuelve al código VS y esas van a ser tus cuentas. Pero mira que es plural. El hecho de que sea plural significa que tienes que ponerlo en una matriz. Entonces voy a poner tus cotizaciones y luego pegarla así. Ahora, claro que no queremos esto en nuestro archivo de config. Queremos ponerlo en un archivo ENV. Entonces vamos a contratar y crear un nuevo archivo. Se va a llamar punto ENV. Y vamos a tener un valor llamado URL. Y vamos a agarrar esta URL. Y en realidad es igual y pega eso en. Y luego quieres, entonces otra llamada a los conteos es igual. Y luego aquí es donde quieres pegar tu clave privada. Así que adelante y pega aquí tu llave privada, y guárdala. Ahora volvamos al archivo de configuración y queremos usar un paquete llamado dot ENV. Entonces npm instalar dot ENV. Y siempre olvido cómo funciona esto. Dot ENV, ES6. Sí, así que vamos a importar punto ENV. Y luego una vez que hagamos eso, podemos usarlo como NodeJS utiliza estas variables de entorno que se procesa dot ENV nombre del entorno. Por lo que arriba arriba vamos a hacer importar dot ENV config, y luego deberíamos poder decir proceso dot ENV dot URL. Entonces aquí en la matriz, vamos a decir procesar dot ENV, dot cuentas y guardarlo. Y ahora deberíamos poder desplegarnos. Tenemos todo lo que necesitamos. Vamos a probarlo. En bx dot sombrero duro. En realidad tengo Auto Sugiere encendido. Entonces NPS hardhat ejecutar scripts slash sample script.js, dash, dash network. Ahora no queremos anfitrión local, queremos lo que tenemos aquí arriba, que es test net. Por lo que deberíamos poder borrar que en la red que queremos utilizar es test net. Si queríamos, si queríamos definir algo más, solo ponemos toda la red principal y el mismo tipo de cosa. Entonces podemos desplegar la red principal si queríamos, pero vamos a desplegar para probar net y golpear Enter. Y dice que no se puede utilizar declaración de importación fuera de un módulo. Eso está bien. Volvamos y agarremos el otro, que es la declaración require. Para poner requieren ahí e intentarlo de nuevo. Ahí vamos. Cadena de bicicletas desplegada a esta dirección de contrato. Y si vamos a pruebas de escaneo BSC, neto en, confirmarlo, vamos a perforar en nuestra dirección o dirección de contrato. Ahí está, edad como Treinta y cinco segundos o contrato. Aquí está nuestro bytecode. Ir a eventos. No creo que tengamos ningún evento. Transacciones, sin transacciones. Impresionante. Hemos desplegado nuestro contrato en la red de pruebas de cadena inteligente de finanzas. Entonces terminamos con la parte del contrato de ella. Si tenemos que hacer algún cambio de nuevo, simplemente lo recompilaremos y lo redistribuiremos. Nos dará una nueva dirección contractual y solo lo actualizaremos en el front-end. Así que felicitaciones, ya terminaste con tu contrato. Ahora es el momento de comenzar en el frente. 4. Configuración del proyecto y creación de la parte delantera: Muy bien, ahora nos vamos a centrar en el frente. Y lo que normalmente haríamos con la app React es que usaríamos la app Create React para arrancar un proyecto, pero vamos a usar algo diferente llamado vite. Ahora, vite es exactamente como la app Create React, pero es más rápida y tiene algunas otras personalizaciones, pero no vamos a preocuparnos por eso. Por lo que debería ser como uno por uno igual. Deberíamos poder usar esto y hacer todas las cosas que haríamos en la app Create React. Entonces si vas a vite, es un byte, js dot dev. Y haga clic en Empezar. Y luego bajar a, vamos a hacer hilo crear vite. Siéntete libre de hacer npm si quieres. Yo sólo prefiero el hilo. Y en tu carpeta raíz, solo pega eso y pulsa Enter yarn, crea mordida. Y va a arrancar un proyecto React. Entonces nombre del proyecto, llamémoslo cliente. Porque esta va a ser la parte delantera de nuestra aplicación. Y luego selecciona un marco. Por supuesto que vamos a elegir reaccionar. Entonces no quiero usar TypeScript. Así que solo elige reaccionar. Y ahí vamos. Hecho. Entonces si cierras tu contrato, verás que ahora tienes una carpeta de cliente. Y si lo miras, es casi exactamente lo mismo que la aplicación Create React. Entonces vamos a tomar la app CSS y eliminarla. Y el favicon y el logotipo, eliminarlos. Entonces en la aplicación JSX, solo vamos a eliminar todo este div de entrada. Hola sólo para ver que funciona. Y para ejecutar esto, si miramos el paquete JSON, es, el script es sordo. Entonces podemos hacer un yarn run dev o npm run dev. Cualquiera de las dos. Por supuesto que tengo que estar en la carpeta correcta. Así que asegúrate de ver el final de tu carpeta cliente. Ejecutar eso otra vez. Y por supuesto tenemos que hacer Yarn instalar o instalar NPM para instalar paquetes R. Muy bien, intentemos eso otra vez. No eres Yarn install Yarn run dev, y ve a localhost. 3 mil no lograron entrada. De acuerdo, entonces eliminamos un par de archivos. Tenemos que eliminar las importaciones también ir a la aplicación JSX, eliminar esta importante declaración de logotipo. No tenemos una app CSS, puedes eliminar eso, guardarlo. Y creo que eso es todo. Principal JS. Sí, eso está bien. Si abrimos nuestra app arriba. Ahí vamos. Sí, dice hola, así que nuestras aplicaciones funcionan bien. Entonces lo primero que voy a hacer, en realidad vamos a usar un pensamiento sobre qué marco CSS deberíamos usar con esto. En realidad vamos a usar la interfaz de usuario de chakra porque creo que realmente podemos conseguir esto hilado rápido con eso. Ahora no lo he usado mucho. Entonces, si tampoco lo has usado, estamos en el mismo barco, pero es realmente fácil. Así que vamos a visitar primero el sitio web. Chakra UI. Y estoy en Brave, no quiero estar en Brave. Déjame cerrar esto. Chakra UI.com. Chakra-ui.com, y luego haga clic en Empezar. Consideraría usar Tailwind, pero hice un tutorial de dos viento de cola una vez en el pasado y fue así, tantas clases para mantenerse al día. Creo que será mucho más fácil con esto. Por lo que vamos a empezar y llegamos a esta primera página de Pasos. Nos desplazaremos hacia abajo hasta la página de la aplicación Create React. Haga clic en eso. Y vemos aquí que si estamos usando la aplicación Create React, en realidad podemos ejecutar el comando que arranca este framework CSS con ella. No estamos utilizando la aplicación Create React aunque sea muy similar. Entonces tenemos que hacerlo manualmente. Entonces ven aquí abajo a la instalación manual. Haga clic en hilo o en VM, y vamos a instalarlo. Así que detiene su servidor y pega ese comando y vamos a instalar chakra UI. Hay algunos otros paquetes, emoción y marco o movimiento. Entonces vamos a querer hacer esta configuración del proveedor. Por lo que necesitamos agregar a este proveedor envolviendo nuestro componente de aplicación. Entonces voy a usar esta declaración de importación primero. Voy a copiarlo e ir a JS principal. Vamos a pegar eso aquí por encima de tu índice CSS. Entonces queremos envolver la app. Y sólo voy a tomar todo esto y simplemente reemplazarlo. También vamos a estar usando iconos. Entonces si vas a Componentes y en algún lugar hay iconos. Sólo busquémoslo. Medios e iconos buscan esta sección y da clic en el icono, querrá instalar este paquete de iconos para copiarlo e instalarlo. Entonces pega eso aquí e instala tu paquete de iconos. Y si bien eso es instalar lo que queremos hacer por el bien del tiempo, ya que esto no es realmente un curso CSS, es chakra UI tiene una gran cantidad de componentes que básicamente puedes copiar y pegar. Puedes copiarlo y luego ajustarlo a cómo lo deseas. No queremos hacer las cosas desde cero aquí. No queremos reinventar la rueda. Entonces si vas a chakra UI Navbar, eso te llevará a una página que tiene muchos componentes que están prefabricados. Entonces están las secciones de página, formularios de navegación, componentes, un montón de cosas que ya están juntas. Ahora esta página a veces por alguna razón no se carga, como este contenido no se carga. Entonces sí quiero esta primera barra de navegación porque es la más simple. Por lo que basta con hacer clic en esta flecha para abrirlo en una nueva página para obtener una vista previa de cómo se ve. Entonces sí, así es como se ve. Aquí tienes tu logo, Aquí tienes algunos artículos de navegación. Tienen sub menús y luego un inicio de sesión e inscribirse. Vamos a correr con eso. Así que volvamos a esta página y haga clic en el código. Vamos a utilizar la sub navegación de ancho y CTA. Da click en Código y pulsa Copiar. Y luego vamos a crear un nuevo componente. Así que vamos a la fuente, creamos una nueva carpeta llamada componentes, y creamos un nuevo archivo llamado nav bar dot js X. Y voy a pegar eso en todo esto. Y voy a encontrar la función principal con esto, que es con sub navegación. Voy a cambiarlo solo a navbar. Ya se exporta como predeterminado, por lo que no necesitamos agregar eso en la parte inferior. Y sí tenemos algunos errores. ¿Qué está pasando? Oh, esto parece que es TypeScript, así que sólo tenemos que ajustarnos para eso. Entonces bajemos al fondo y simplemente quitemos todo este tipo. Así que elimine eso de la matriz de elementos NAB. Y no necesitamos interconectar porque esto no es TypeScript. Encuentra el siguiente error. Quite ese tipo en elemento de navegación móvil. Sigue subiendo debajo de la subred de escritorio. Quita eso. Y creo que estamos en el claro. Por lo que deberíamos ser capaces de guardar eso y ejecutar el hilo del servidor aéreo, ejecutar dev. Y deberíamos ver esta navbar debería ser así de fácil. Por supuesto que no lo hacemos porque no lo agregamos a nuestro componente de app. Entonces eso es nav bar. Así que volvamos a la app. Entonces APA, JSX, y luego en la parte superior, vamos a importarlo, importar navbar desde componentes de barra de puntos slash barra navbar. Y entonces aquí sólo podemos cambiar este hola y reemplazarlo por navbar y guardarlo. Y deberíamos tener una navbar. Ahí vamos. Se ve genial. Ahora no necesitamos todas estas cosas, todo lo que vamos a mantener como la sección de logotipos. Vamos a poner cualquiera que sea el nombre de nuestra app. Y necesitamos no necesitamos iniciar sesión y registrarnos, solo necesitamos conectar billetera. Entonces hagamos algunos ajustes para que podamos deshacernos de. Vamos a ver, encontrar trabajo. Entonces aquí están los artículos navbar. Así que vamos a deshacernos de los diseñadores de contratación. Deshaznos de Learn Design y estas sub, sub navegaciones. Deshaznos del buen trabajo. Deshaznos de la etiqueta de inspiración. Y terminamos con una matriz vacía. Guárdalo y mira si eso está bien. Sí, deshazte de nuestros artículos de navegación. Muy bien, elemento de navegación móvil. Deshaznos de esto totalmente porque no tenemos ningún artículo de navegación. Se va a quedar bien de cualquier manera. Entonces voy a borrar eso. Voy a borrar nav móvil. Deshazte de eso. Y estoy seguro de que eso se hace referencia en alguna parte. Entonces vamos a encontrarlo. Nav móvil Ahí está. Así que voy a deshacerme de toda esa sección de ahí. Y creo que eso lo cubre. Vamos a guardarlo y asegurarnos de que esté bien. Todavía está bien. Encontremos el letrero aquí está. Inicia sesión y regístrate. Simplemente deshazte del letrero M. Y simplemente cambia el registro para conectar billetera. Realmente no queremos este rosa. Lo queremos hasta 500. Y el hover, vamos a hacer también verde azulado, pero un poco más ligero, así que sí, hagámoslo hasta 300. Y en lugar de logo, vamos a poner una cadena para bicicletas. Creo que eso es lo que llamamos la app bike chain. Y hagamos la derecha antes de esta etiqueta de cierre. Vamos a añadir un peso de fuente es igual a 900. Hagámoslo grande. Y tamaño de fuente. Va a ser X grande. Así que guarde eso y vea cómo se ve. Cadena para bicicletas. Entonces queremos que este fondo sea un poco más oscuro. Entonces aquí arriba donde se utiliza el valor del modo de color, se establece en blanco. Vamos a poner gris 200. Guarda eso y echa un vistazo. Y eso se ve genial. Y si lo reducimos para móvil, tenemos este pequeño ícono de hamburguesa, que en realidad no quiero. A ver si podemos averiguar dónde está eso. Botón de icono, probablemente eso. Deshaznos de eso por completo. Y ahorre. Es. Parece que nuestros botones desaparecen, así que todavía hay algo móvil pasando. Um, probablemente sea algo que ver con los subescritorios NAB. Deshaznos del sub nav. Y entonces realmente nos deshacemos del nav de escritorio porque no necesitamos ninguno de estos elementos de navegación. Así que vamos a deshacernos de eso también. Y eso caería aquí mismo escritorio. Ahora, vamos a deshacernos de eso y guardarlo y ver qué tenemos. Muy bien, y el botón sigue desapareciendo. Y parece ver este botón aquí mismo con esta pantalla base MD. Esto es receptivo como consultas de medios. Entonces en la base, que creo que es la más pequeña, dice ninguno. Saquemos eso y solo dejemos el medio. Tenerlo siempre flex en línea y eso debería arreglarlo. Sí, ahí vamos. Y esto se traslada, pero realidad no me preocupa. Podemos arreglarlo más tarde si es necesario. Eso se ve bien. Entonces cadena de bicicletas y tenemos nuestra billetera connect. Veo lo fácil que fue de configurar, solo pega en el ejemplo y ajustarlo como quieras. A continuación, vamos a poner aquí un gran héroe que nos apunte a la página del tablero. Entonces si volvemos a nuestras plantillas de chakras, hay alguna parte de héroe secciones de página héroe aquí mismo. Esto es lo que queremos. Voy a elegir este primero aquí. Hay algunas otras opciones si quieres ir con esas, voy a elegir esta primera, y lo siento, ve al código, copia. Y vamos a crear un componente para este llamado héroe dot JSX. Voy a pegarlo en igual que antes, y vamos a cambiar el nombre de la función principal , el héroe. Vamos a crear un componente más llamado hogar. Entonces home dot js X. Y esta va a ser nuestra página de inicio. Sólo vamos a tener dos páginas en esta app, así que lo vamos a hacer así. Y para el hogar, digamos const casa iguala regresar una casa. Vamos a poner a casa para devolver algo. En realidad. Vamos a tenerlo. Por supuesto, regresa a nuestro héroe. Héroe. Asegúrate de hacer tu declaración de importación en la parte superior. Y aquí abajo en la parte inferior, voy a exportar casa por defecto. Y volvamos a nuestro héroe y retocamos esto para que funcione. Y en realidad sólo vamos a poner a casa aquí por ahora. No lo quiero aquí, pero pongámoslo aquí para que podamos ver cómo se ve mientras lo construimos. Y de nuevo, asegúrate de importarte en la parte superior. Y no le gusta que no tengamos un elemento padre envolviendo estos. Entonces lo voy a envolver con estos elementos en blanco. Genial, y tenemos algunos errores porque necesitamos ajustar algunas cosas y héroe. Entonces lo primero es que dice importación escondida de siguiente cabeza, que parece al lado de JS. Por lo que estas plantillas utilizan diferentes tecnologías. No estamos usando junto a js. Voy a quitar eso. Y en realidad sólo voy a quitar la parte de la cabeza. No lo necesitamos. Y todo lo demás se ve bien. Vamos a guardarlo y ver como se ve. Es, es como ya listo para ir aquí, pero sí necesitamos cambiar este texto. Entonces vamos a encontrar nuestro texto aquí arriba y dice ganar dinero de, y vamos a decir, renta tu próxima bicicleta. Y entonces este texto aquí, vamos a decir con cripto. Entonces para este texto, tecleemos conecta tu billetera, elige tu bicicleta, y te vas a las carreras. Cuando lo devuelvas. Puedes pagar fácilmente tu tarifa con B&B Y vamos a encender el wrap de palabras. Y a todos nos gustan esas tarifas de gas B&B porque realmente sí ahorramos eso y echamos un vistazo. Su próximo espacio en blanco con cripto, y aquí está nuestra declaración. Y en realidad hagamos este partido con nuestro botón ahí arriba. Hagamos todo este partido verde y hay un Get Started y empezando a los 15, vamos a abordar eso también. Así que lo primero que voy a hacer es rentar tu próximo espacio en blanco. Pongamos esto como azulado. Queremos estar usando verde azulado, no verde. Entonces aquí abajo, empiece, digamos que elija mi bicicleta. Y de nuevo, pon eso a azulado. Y estos aquí arriba, el fondo hasta el esquema de color Hagamos TOO también veamos cómo se ve eso. Entonces esto aprende más. Realmente no lo necesitamos. Así que simplemente deshazte de todo ese botón. Entonces empieza en 15 dólares mensuales. Pongamos renta sin costo por adelantado. Y debemos terminar con eso. Elige mi bicicleta rentada sabe cuesta por primera vez, por lo que deberíamos poder hacer click en eso. Y eso debería llevarnos al tablero de instrumentos. Y esto corrió sin costo alguno. Eso está un poco cerca. Volvamos a ver si podemos mover eso. Así que pongamos la parte superior. Queremos ponerlo como 25 en lugar de 15. Creo que eso es bueno. Sí, eso está bien. Corrió sin costo por primera vez. Puedes sacar la bici , puedes escribirla y solo tienes que pagar cuando regresen. Por lo que ahora queremos poder hacer click en este botón e ir a la página del tablero. Entonces para eso vamos a necesitar el router React. Así que voy a Google tan rápido. Reaccionar enrutador. Lee la instalación de los docs y solo necesitamos el hilo o NPM Yarn añadir React router dom a las seis. Entonces vamos a añadir eso. Detuvo mi servidor, ejecuta eso, inicia mi copia de seguridad del servidor. Y vamos a ir a la app JSX y sumar todo esto aquí. Entonces tenemos que hacer una importación. En realidad, probablemente pueda obtenerlo de la página. Importar enrutador del navegador. Vamos a seguir adelante y agarrar eso, ahorra algo de mecanografía. Hagamos eso como enrutador. Creo que eso es convención. Vamos a importar ruta, ruta y rutas desde el router React, dom. En esta declaración de retorno, vamos a poner un componente de enrutador, capital R. Lo vamos a envolver todo en ese componente de enrutador. Voy a mantener mi navbar ahí. Voy a retirar casa. Y dentro de este router, quiero configurar mis rutas. Entonces rutas. Y luego dentro de eso, vamos a poner dos rutas, una para una página de inicio, una para nuestra página de tablero. Entonces el primero es ruta. Entonces hacer ruta exacta es igual a barra, que es su página de inicio. Elemento más delgado es el componente casero y su auto-cierre. Y luego sólo copia eso. Y el segundo camino va a ser tablero. Elemento va a ser tablero que aún no hemos creado. Lo haremos en un minuto, es probable que se vaya a error, pero está bien. Permítanme simplemente formatear esto. Sí. Creo que eso es todo. Eso es bueno y no necesitamos esto. Esto es sobrante del Bootstrap inicial. Entonces tenemos un router dentro de él, tenemos rutas y tenemos dos rutas definidas. Ahora podemos volver a nuestro héroe en donde hay un botón aquí mismo. Y como esto es un botón, realmente no se puede hacer un enlace. Así que sólo hagamos un onclick. Vamos a tener unos paréntesis y vamos a estar llamando a handle click. Y como argumento, vamos a pasar en tablero. Entonces definamos eso. Así que subamos aquí a nuestra función héroe. Y en realidad antes de eso, necesitamos importar navigation, que es una característica de React router dom, que nos permite navegar a diferentes rutas. Entonces sí importamos, usamos navega desde React router, dom. Ahora tenemos que definir este gancho. Así que dejemos navegar iguales utilizar navegar. Y ahora vamos a crear nuestra función Const, manejar clic igual. Vamos a pasar cualquier camino como parámetro. Y vamos a llamar a navegar. Esta es una convención React router six, por cierto, use navegado por el gancho y solo lo estamos definiendo como navegar y solo vamos a usarlo aquí. Así que navega camino en camino siendo lo que pase. Y si miras aquí abajo, paso en dashboards. Por lo que esto debe navegar por nosotros, nos dirigen a la ruta del tablero. Así que guarde eso y no tenemos un tablero de rutas. Entonces vamos a un nuevo archivo y creamos un nuevo componente. Dashboard dot JSX. Y sólo voy a copiar a casa y pegarlo aquí y cambiar de casa a Dashboard. Y no necesito esta importación de héroe. Tenemos que arreglar la ortografía, y tampoco necesito este componente aquí. Sólo voy a poner una H que diga tablero. Así que revisemos nuestro componente de casa. Tenemos a nuestro héroe. Entonces eso va a mostrar a tu héroe. En este componente casero se va a llamar cada vez que vayamos a la página de inicio en base a nuestras rutas, recuerda las rutas que creamos. Por lo que deberíamos poder ahora ir a nuestra app e ir a la página de inicio. Entonces localhost 3 mil refrescar y no está funcionando. ¿ Qué nos olvidamos de hacer? Dashboard no está definido. Por supuesto que no está definido. No lo importamos en la parte superior. Mira estamos usando el componente pero no lo importamos. Por lo que solo necesitamos agregar una declaración de importación debajo ese panel de importación desde el tablero de componentes. Guárdalo y nuestra página de inicio debe ser esa. Ahí vamos. Por lo que tenemos nuestra navbar, tenemos un botón de conectar Wallet, con el que trataremos más adelante. Tenemos un bonito héroe y si hacemos clic en elegir mi bicicleta, nos debe llevar a la página del tablero. Impresionante, nuestra página de inicio está terminada. Así que sólo para recapitular, tenemos nuestro JSX principal, que está envuelto con esta IU de chakra, lo que podemos usarlo en cualquier lugar por este proveedor de chakras. Su app JSX, tenemos ruta está pasando. Por lo que nuestra página de inicio, ruta de la página principal va a mostrar el componente home. Nuestra ruta del tablero de instrumentos va a mostrar el componente del tablero. Y luego tenemos una barra de navegación, que es nuestra barra de navegación que se llama en la app de aquí arriba. Porque queremos que eso también esté en un router. Tenemos nuestro componente casero, que está mostrando a nuestro héroe. Porque eso es lo que hay en la página de inicio. Tenemos a nuestro héroe, que acabamos de mirar. Y luego tenemos un tablero que vamos a saltar al siguiente. En el tablero, vamos a poder mostrar todas las estadísticas. Vamos a poder elegir su bicicleta e interactuar con su billetera. Aquí es donde va a pasar toda la magia. Entonces sigamos adelante y construyamos eso. 5. Construir el panel: Muy bien, así que lo siguiente que queremos hacer es construir nuestra página de tablero. Ahora así es como se supone que debe verse. Entonces vamos a tener esta declaración de bienvenida y vamos a tener algunas estadísticas aquí. Ese va a ser nuestro dashboard, tendrá un formulario que le permita pagar Lo du tendrá un formulario para acreditar su cuenta, tendrá una selección de bicicletas aquí. Por lo que tenemos tres tipos diferentes de bicicletas. Alguna descripción sobre cada bicicleta y la capacidad de chequear en check out y una bicicleta, eso es lo que vamos a estar construyendo. Entonces primero lo primero, vamos a crear el panel de estadísticas. Así que voy a volver a estas plantillas de chakras y tengo esta sección de Página llamada estadística. Y sólo vamos a sacarlo directamente de ahí. Entonces estamos usando el que se llama stats con ícono. Se va a quedar así. Y así haz clic en código y solo copia eso. Entonces voy a crear un nuevo componente para esto. Voy a llamarlo los totales actuales dot JSX y solo pegue en ese código. Y creo que esto también es TypeScript, por lo que tendremos que eliminar tipos. Por lo que vamos a quitar eso, vamos a quitar la interfaz. Y creo que eso es todo lo que tenemos que hacer. Así que ahora vamos a importar eso a nuestro componente de dashboard, que va a ser el componente padre para estos componentes hijos. Por lo tanto importan el total actual. Y mi inteligencia no se acerca es decirme que no la exportamos. Así que revisemos eso. Tarjeta de estadísticas de función. En realidad ni siquiera lo nombramos. Entonces exportar función predeterminada, vamos a llamar a este total actual. Y intentemos eso otra vez. Vuelve al tablero. Importar totales actuales a partir de los totales actuales. Está en la misma carpeta. Y luego en lugar de este H1, vamos a mostrar los totales actuales y ver cómo se ve eso. Y tenemos un filtro de error resuelto reaccionan iconos, BS de totales actuales, JSX ¿existe el archivo? Y parece que están usando el paquete NPM de los iconos React. Vamos a asegurarnos de que sea un paquete. Reaccionar iconos. Y sí, para que podamos hacer click en esto e instalarlo. Así que aquí mismo, npm install, React, iconos de guión. Voy a usar hilo como he estado haciendo. Hilo install, React iconos. Uy, hilo añadir, reaccionar iconos. Y instalemos, y debemos ser buenos después de eso. Ahora voy a ejecutar mi servidor nuevo y refrescar. Y ahí vamos. Tenemos nuestras tres estadísticas, pero queremos cuatro y queremos ajustarlas un poco. Por lo que queremos que el primero tenga un ícono de billetera. Segundo, un ícono del dinero. Trabajemos en eso. Así que desplácese hacia abajo hasta la tarjeta de estadísticas, componentes de chocolate o UI. Y verás aquí dice como icono persona BS, F phi servidor, ir ubicación. ¿ Qué hace todo esto? Bueno, podemos volver a reaccionar iconos y mirar esto hacia arriba. Entonces quiero una billetera. ¿ Cuál usamos aquí? Se ve así. Parece que usamos esta cuenta de esquema MD. Ahora puedes decir de qué biblioteca provienen estas por las primeras dos letras o tres letras. Así que si ves como IO mientras está afilado, es probablemente este íconos de iones. Si ves MD, Probablemente sea Material Design en nuestro ojo es como icono de re-mezcla. Entonces cuando realmente haces clic en esto, copia ese nombre a tu portapapeles. Quieres subir aquí y ver dónde dice slash BS slash FI. Estas son las diferentes bibliotecas aquí. Entonces no vamos a MD porque esta es la cuenta de esquema de Md en MD es Diseño de Materiales. Solo voy a copiar esto y hacer importar mi nombre de icono copiado desde React icon slash MD. Y deberíamos estar bien ahí. Así que voy a bajar y cambiar ese primero. Voy a cambiar el ícono a la billetera de saldo de cuenta de contorno MD. Y llamamos a esto crédito B y B, crédito B&B. Y digamos 0.05. Impresionante, se ve bien. A continuación tenemos este símbolo del dinero. Así que voy a ir a mis iconos de reaccionar y escribir dinero. Tal vez. Sí, aquí está, RI, dinero, círculo de dólares y es RIs, así que es icono remezclado. Así que haz clic en eso y desplázate hacia atrás hacia arriba. Y probablemente pueda empezar a reemplazar estos porque no los voy a usar. Entonces voy a pegar eso aquí y es RI, y bajaré aquí y lo pegaré en la siguiente. Entonces pega eso. Y luego lo voy a cambiar a B y B hacer. Entonces B&B lo hacen. Y sólo voy a poner 0.001 solo para relleno. Entonces nuestro siguiente ícono es este reloj. Y van a ser minutos de paseo. Así que voy a volver a mi ícono de reaccionar y escribir en reloj. Vamos a ir con éste, círculo de reloj de contorno ai. Es IA. Entonces tenemos que asegurarnos de poner eso. Pero ese es mi tercero. Y cambia esto para montar minutos. Voy a dejar ese siete. Eso es bueno conmigo. Entonces tenemos que sumar uno más. Entonces si miras aquí arriba, la sencilla cuadrícula está configurada para una base de tres columnas y luego una en pantallas pequeñas. Pero tenemos que cambiar esto a cuatro. Entonces tendremos cuatro columnas porque queríamos para los iconos. Y entonces solo voy a copiar esto y guardarlo para asegurarme de que eso sea correcto. No es AI círculo de reloj de esquema no está definido por supuesto. Así que subamos aquí y peguemos eso. Y esto es un dy. Entonces podemos deshacernos de éste y guardarlo y debería funcionar. Ahora, ahí vamos. Por lo que tenemos nuestro B & B & B de crédito o B & B hacer un paseo minutos. Y luego el último dice estado de la bicicleta y en realidad es un color. Entonces lo que podemos hacer es antes que nada podemos hacer el mismo estado de bicicleta. Y entonces no necesitamos estos dos, así que voy a comentar esos fuera. Necesitamos agregar una variable de color de fondo para que podamos subir y echar un vistazo al padre stat real. Y luego veremos aquí que en realidad hay impulsos que se pasan. Entonces el título stat y el icono se correlacionan con cada ficha de estadísticas tiene una estadística de título e icono. Y luego aquí arriba realmente estamos pasando esa información. Entonces todo lo que realmente necesitamos hacer es agregar otro prop aquí llamado color BG para el color de fondo. Entonces vamos a pasar eso adentro. Y estos están destruidos, por lo que no necesitamos ir apoyos dot color BG. En realidad podemos simplemente usar la variable. Podemos agregar otro atributo aquí que dice fondo-color es igual al color BG. Entonces pase lo que pase como prop, lo va a cambiar a ese color de fondo. Impresionante. Ahora vamos a bajar. Y este último, vamos a decir que bg color es igual. Y sigamos adelante y simplemente hagamos rojo por ahora. Guárdalo y mira si eso funcionó. Sí, justo aquí lo tenemos ahora. El fondo colorea rojo. Así que ninguno de los otros obtiene un color de fondo porque eso no se está pasando. Sólo se está pasando . Y esta última. Lo que podemos hacer es que podamos condicionar esto, como si el arrendador tiene una bicicleta comprobada y queremos que esto sea verde. Entonces volveremos a visitar esto cuando empecemos a juntar toda la lógica. Entonces creo que hemos terminado ahí con su pequeño salpicadero. Oh, en realidad tenemos que cambiar este texto. Así que cambiémoslo para dar la bienvenida a tu nombre. Aquí están sus estadísticas y hará que su nombre sea dinámico más adelante. Si subes aquí, justo aquí. Bienvenido. Travis. Aquí están sus estadísticas. Impresionante. Así que de nuevo, solo estamos construyendo la interfaz de usuario. No tenemos nada dinámico pasando. Sólo estamos haciendo que se vea bien. Por lo que a continuación en nuestra lista, tenemos estos dos formularios, paga su vencimiento y acredita su cuenta. Así que volvamos a estas plantillas de chakras y veamos si podemos encontrar algo. Aquí hay formularios. Y en realidad no quiero usar estos. Quiero algo sencillo. Y cuando hago foros y reacciono, me gusta usar React hook form, que es una biblioteca que creo que es realmente fácil, creo que es más fácil que algunas de las otras por ahí. Si haces forma de gancho React, y chakra UI, deberías obtener un buen ejemplo con el que podemos trabajar. Entonces esto es en realidad desde el sitio web chakra. Así que de nuevo, fui a Google, escribí en forma de gancho React y chakra UI. Y vas a conseguir esta URL, chakra UI. Más React gancho para ellos. Por lo que haga clic en eso. Y solo agarremos, vamos a copiar esto aquí y ver cómo se ve. Entonces vamos a crear un nuevo componente. Llamémoslo formulario de pago. Esta es la fórmula pe con punto JSX. Y pega esto y luego encuentra nuestra función principal llamada Hook form y simplemente cámbialo para pagarlos. Y luego en nuestro tablero, y en realidad creo que voy a incluir esto en los totales actuales en un poco mantener los juntos porque vamos a estar agregando estos valores a ese tablero. Entonces voy a ponerlos abajo aquí en el fondo. Y lo que voy a hacer es que voy a crear un componente flex. Y voy a justificar el contenido al centro. Y voy a alinear ítems con también el centro. Entre esos, voy a poner el formulario de pago. Una forma. Si pego Enter, creo que auto lo importa para mí. Si no, asegúrate de subir a la parte superior e importar el formulario de pago desde un formulario. En mi formateo está todo apagado. Permítanme formatear esto. Ahí vamos. Y veamos cómo se ve eso. Así que voy a guardarlo y tengo un problema. No resolver, React enganchar para él. Ok. Sí. Por lo que tenemos que hacer tenemos que instalar esta biblioteca. Así que déjame matar a mi servidor y hacer hilo. Añadir, reaccionar, forma de gancho. Creo que eso es lo que decimos. O puedes hacer npm install, React hook form. Vamos a instalar eso primero. Muy bien, vuelve a ejecutar tu servidor. Vamos a darle un vistazo. Muy bien, bien. Por lo que sí tenemos una pequeña forma aquí que acaba de decir FirstName. Tiene una entrada de texto para tu nombre y luego un botón de enviar. Entonces eso está bien. Vamos a ajustarlo un poco para decir que paguen tu vencimiento y luego tomemos un pago. Entonces si nos desplazamos hacia abajo, veremos aquí esta es nuestra forma. Tenemos una etiqueta de formulario que dice FirstName. Tenemos una entrada que tiene algunos atributos. Nombre de identificación, nombre de marcador de posición, este registro, como registros, este valor con el formulario de gancho. Verás cómo funciona esto en un minuto y luego establecerás algunos requisitos en él. Por lo que este es un campo obligatorio, longitud mínima debe ser de cuatro. Y luego está este mensaje de error que puede surgir si no se cumplen esos requisitos. Así que vamos a modificar esto antes de llegar a formar el control. Um, sólo voy a hacer justo encima del control de formularios aquí. Y permítanme formatear esto porque tampoco me gusta el formato, justo encima de este control de formulario en la declaración de retorno. Hagamos un componente de texto. Esto es del componente de texto de la interfaz de usuario chakra. Y dentro de eso, vamos a poner una fuente. La familia de fuentes es igual a título y tamaño de fuente. Porque queremos que esto sea más grande, vamos a hacer extra grande y peso de fuente. Vamos a hacer 600. Y luego vamos a poner algún margen en el fondo. Entonces nb es igual a cuatro. Y déjame traer esto de nuevo. Y en medio de esto vamos a poner pagar tu do. Entonces vamos a tener esto por encima del formulario o por encima de la entrada. Entonces todo lo que tenemos que hacer aquí realmente se cambia todas estas ocurrencias del nombre a algo así como el pago. Por lo que vamos a cambiar esto es inválido dos errores, el pago de puntos. Sacaremos la etiqueta por completo porque no la necesitamos, porque tenemos el texto por encima del control de formularios aquí. Para la entrada, haremos pago de identificación, marcador de posición, vamos a poner pago, pago de capital P. Vamos a registrar este valor, sea cual sea lo que entremos, vamos a registrarlo como pago. Y esto es realmente genial. Al igual que si hicieras un montón de entradas aquí, creará una matriz de pares de valores clave de lo que envíe en su formulario. Entonces va a decir pago colon, sea lo que sea que entremos en el foro, hace todo el trabajo por nosotros. Requerido. Sí, se requiere. No voy a tener una longitud mínima. Entonces voy a sacar eso. Entonces aquí abajo flechas nombre de punto, voy a poner pago y errores nombre de punto, mensaje de punto, cambiar el pago. Por cierto, podrías dejar eso como nombre. Simplemente dirá en la salida, tendrá la clave de nombre en lugar de pago. Eso es un poco confuso. Entonces lo estamos haciendo el pago en su lugar. Impresionante. Y tiene algún gancho incorporado, está sometiendo, creo que crea un spinner o algo así. Pero aquí está su botón Enviar. Así que vamos, veamos cómo se ve eso. En realidad antes de que hagamos eso, subamos aquí y veamos la función onsubmit. Por lo que incluso incluyen ese formulario onsubmit handle submit, al presentar. Esta es una forma de gancho React. Convención aquí, pero verás aquí arriba en presentar, tenemos una nueva promesa. Ahora, no quiero este setTimeout. Es sólo poner como un relleno para nosotros que después de tres segundos mostrará los valores que hagamos para que parezca real. Realmente no quiero eso. Voy a sacar eso. Voy a mantener a este JSON stringify. Pero voy a sacar esto. Y voy a hacer de esto una función de flecha en una ES6. Entonces const onsubmit es igual a valores. Entonces voy a hacer que sea un fregadero. Y todo lo que voy a hacer es registrar los valores en la consola, console.log. Y veamos si esto funciona. Uy, los necesito. Entonces JSON estringifica estos valores, salva eso, y vamos a darle un giro. Pero claro que tenemos un error porque siempre tenemos un error. No se pudo construir texto, por favor utilice el nuevo operador. Entonces creo que es porque no importamos este componente de texto. Así que agreguemos texto a nuestra importación, la importación de la interfaz de usuario de chakra. ¿ Y qué más usamos? No creo que hayamos usado nada más, así que eso debería funcionar. Guárdalo. Y aquí vamos. Paga tu do. Permítanme despejar la consola y debemos ver que surja nuestro valor. Por lo que voy a poner hola y presentar. Ahí está, pago. Hola, valor clave. Así que está bien ir, pero no queremos que la gente ponga cuerdas aquí. Queremos que pongan sólo números y no sólo números, sino números decimales porque estamos tratando con B&B Así que para hacer eso, en realidad venimos aquí y ponemos el tipo en número. Y luego porque queremos ser capaces de usar decimales, podemos agregar el atributo step y simplemente poner cualquier guardar eso. Y ahora podemos hacer como un 0.001, golpear Enviar, y se somete correctamente. Y si tratamos de presentar sin nada, va a decir que esto es necesario. Esto es necesario. No dejaré que lo hagamos. Eso es lo limpio de las formas de gancho React. Le gustan todas estas cosas para ti. Y una vez que te acostumbras a usarlo, es una gran biblioteca. Y por si acaso te estás preguntando cuál es este paso cualquiera, si lo quito y trato de poner en ese número, puedo poner en 0.01, pero al presionar Enviar, dice por favor introduce un valor válido. Los valores más cercanos son 01, por lo que solo puedes usar números enteros. No puedes usar este decimal. Por lo que tenemos que permitir esta funcionalidad paso. Entonces paso es igual a NE. Ahora que eso funciona, vamos adelante y agreguemos el otro, que es el crédito de tu cuenta, donde puedes agregar crédito a tu saldo. Así que vamos a hacer exactamente lo mismo. En realidad puedo simplemente copiar este formulario de página. Voy a crear un nuevo componente y llamarlo agregar dos forma balanceada que JSX pegue eso en nuestra otra forma y simplemente hacer algunos ajustes. Entonces en lugar de pagar tu do, le pondremos crédito a tu cuenta. Entonces en lugar de pago, solo haremos saldo crediticio. Por lo que voy a seleccionar todos estos en realidad y hacer saldo crediticio. Entonces para el placeholder quiero ver y creo que eso es todo. Vamos a asegurarnos de que funcione. Sí tenemos el tipo y el paso ahí que va a necesitar. Vamos a guardar eso y refrescar esta página. Y por supuesto que necesitamos agregar el formulario a nuestra página. Vas a los totales actuales y escribes formulario de pago insuficiente, agregas, agregas al saldo. Y en realidad necesitamos cambiar los nombres de esta función que se pagan forma. Agregar a forma equilibrada. Entonces tenemos que añadirlo a nuestros totales actuales, ¿verdad? Formulario de pago insuficiente. Tenemos que sumar el componente. Asegúrese de importarlo en las mentes superiores va a hacerlo automática y de equilibrar la forma. Entonces ahí está mi componente y se importa aquí arriba. Ahora vamos a comprobarlo. Genial. Tengo el pagador adeudado y acredito tu cuenta. Ahora estos dos se ven atrapados juntos, mira lo cerca que están. Démosles alguna separación entre sí y con el contenido anterior. Voy a ir al formulario PE. Y luego justo encima de este formulario, voy a agregar flex justificar contenido igual a Centro. Y esto es sólo Flexbox alinear artículos en chakras propio centro de camino. Entonces pondremos algún relleno, por lo que P equivale a cinco. Y entonces voy a poner algún margen superior es igual a diez. Y necesito hacer lo mismo en los otros. Así que sólo voy a copiar el primer bit. Asegúrate de bajar al fondo y cerrar eso. Y también consiguió poner mi etiqueta de cierre ahí y también asegurarse de que importó en la parte superior. Así que asegúrate de poner flex para importar eso desde la biblioteca de chakras. Y luego queremos hacer lo mismo en el anuncio a forma equilibrada. Por lo que justo arriba forma, pega al flex con la etiqueta de cierre y ven a la parte inferior para pegar eso. Y luego aquí arriba, sumado en la importación. Echemos un vistazo a eso. Ahí vamos. Por lo que tienen algún espacio entre ellos y tienen algún espacio por encima y por debajo. Ahora, justo debajo de esto vamos a estar poniendo tres bicicletas. Así que en realidad estamos creando lo que chakra llama pila aquí. Estamos apilando esto encima de esto, encima de esto. Por lo que quiero poner una pila en el componente dashboard. Y aquí arriba de esto, voy a escribir stack como caja, cajas y otra convención de chakra. Texto alinear centro. Todo está centrado. Y luego vamos a hacer algunas cosas receptivas aquí. Y creo que copié esto de algún otro lugar del proyecto. Como dije, no quiero pasar mucho tiempo en CSS porque en realidad no es por eso que estamos aquí. Estamos tratando de que esto se construya muy rápido para que entonces podamos llegar a las cosas divertidas de blockchain. Así espaciado base ocho. Y esto es sólo dichos en pantallas pequeñas, usando ocho en medio es 14. Entonces MD 14. Y luego PY padding y, que es el relleno superior e inferior. Pondremos base 20 y MD 36. Y haremos una etiqueta de cierre. Y en la parte inferior, bajo los totales actuales, pega esa etiqueta de cierre. Y luego arriba arriba necesitas importar la pila. Importa pila de chakra dash UI slash reaccionar. Así que solo usa esta declaración de importación y guárdela. Y ahora tenemos un error. Caja no está definida, por lo que necesitamos importar caja también. Ahorra eso. Ahí vamos. Ahora ves que nuestras etiquetas y cuadros de texto y botones están todos centrados en consecuencia porque hicimos esta pila y todo lo que hay en esta pila necesita estar centrado. Entonces eso se ve genial. Entonces justo debajo de esto, vamos a poner esta fila de bicicletas. Entonces una descripción y luego estos dos botones, y vamos a estar todos listos para llegar a lo divertido. Así que aquí bajo los totales actuales, voy a poner flex, justificar contenido igual a Centro, y alinear elementos igual a centro también. Y mi etiqueta de cierre voy a poner a continuación en mi etiqueta de cierre, voy a poner directamente debajo de eso. En el intermedio esos. Voy a añadir estos componentes de bicicleta. Así que sólo voy a poner bicicleta por ahora. Y vamos a tener tres bicicletas. Así que sube aquí a los componentes, haz clic con el botón derecho en crear un nuevo archivo, y llamémoslo bike dot JSX. Const bike equivale a bicicleta de retorno un H1 de bicicleta. Exportemos esa moto por defecto de exportación. Y luego en nuestro tablero de instrumentos, agreguemos tres de estas bicicletas y asegúrate de importarla en la parte superior. Importar bicicleta de bicicleta. Vamos a sumar tres de estos y asegurarnos de que funcione. Echa un vistazo a eso. Y el cuadro no está definido en el tablero. Se define. Vamos a salvar eso otra vez. A lo mejor sólo necesito refrescarme. De acuerdo, flex no está definido, así que asegúrate de añadir flex aquí también. Aquí vamos, bicicleta, bicicleta, bicicleta. Por lo que necesitamos reemplazar estos con imágenes. Tengo tres imágenes para que puedas usar. Estará debajo de este video o en algún lugar, donde sea que esté el contenido del curso. Y lo que puedo hacer es que puedo abrir, bueno, voy a crear una carpeta llamada assets. Déjame abrir eso en Finder y abrir otro. Y déjame encontrar el mío. Por lo que voy a pegar en estos tres artículos. Bicicleta uno, bicicleta a y bicicleta tres. Muy bien, así que para nuestra moto, lo que vamos a hacer es crear una caja. Recuerda estos, todos estos están flexionados. Entonces cada uno va a ser tener este componente de caja. Y luego el tamaño de la caja es igual a gran margen x, que es izquierda o derecha. Vamos a poner dos. Entonces hay algo de espacio entre ella. Cierra eso. Y en medio de la caja, vamos a hacer una imagen que va a ser nuestra fuente de imagen equivale a bicicleta, margen, fondo es igual a diez. En esta bicicleta en realidad va a ser una prop. Entonces en lugar de apoyos, sólo vamos a desestructurarlo y poner bicicleta. Vamos a pasar eso en como prop. Cerremos esta imagen. Es auto-cierre. Entonces haremos un componente de texto. Y aquí solo puedes poner algo de Lorem Ipsum. Puedes encontrar algunos detalles de la bici si quieres. Sólo voy a hacer el generador Lorem Ipsum por ahora. Y sólo voy a copiar este pedacito. Nuevamente. Puedes poner lo que quieras ahí, pegarlo. Y me voy a poner en la envoltura de palabras. Entonces si vas al código VS hasta Ver y haz clic en el wrap de palabras. Entonces hay algunos textos que van a estar debajo de la imagen. Entonces voy a apilar algunos botones. Así que voy a hacer una pila. espaciado es igual a 0, dirección es igual a rho, alinear, centrar, justificar centro. Y luego la parte superior del margen equivale a cinco. Dentro de la pila queremos poner un botón en. Recuerda que hemos usado un botón en el héroe. Así que sólo voy a copiar eso. Ve aquí y copia este botón. Hará la vida más fácil que nosotros escribiendo todo esto. Vuelve a bicicleta y pega eso en. Entonces ahí está mi botón cambiará este texto para decir checkout. Y vamos a poner otro debajo de él. Entonces copia eso de nuevo y cambia eso para registrarlo y eliminar el onclick. No queremos lidiar con eso todavía. Voy a formatear mi documento y guardarlo. Y en realidad, hagamos esto antes de marcar el botón Importar de la interfaz de usuario del rastreador, cuadro de importación, imagen, pila de texto. Y creo que eso es todo. También queremos, bueno, no vamos a poder ver nuestras imágenes todavía porque lo estamos pasando las motos. Tratemos de eso antes de revisar nuestro sitio. Por lo que nuestra moto es un niño a salpicadero. Entonces aquí es donde necesitamos definir nuestra imagen de bicicleta. Por lo que aquí arriba puedo hacer moto de importación. Uno de creo que es dot, dot slash assets slash bike one dot JPEG porque creo que el nombre de la imagen, copia eso dos veces. Y cambiar bicicleta uno a bicicleta para cambiar bicicleta 12 por tres. Por lo que ahora podemos tomar estos y pasarlos como apoyos. Por lo que podemos decir bicicleta es igual a bicicleta uno. Bicicleta equivale a bicicleta a bicicleta equivale a bicicleta tres. Y así estamos pasando en cada bicicleta individual y la estamos recibiendo como prop en el componente bici. Impresionante, echemos un vistazo a esto y veamos si funciona. Genial. Entonces nuestras imágenes están aquí. Deberían ser receptivas. Estamos usando Flex. Sí, son receptivos. Y tenemos algún texto que podemos volver atrás y retocar como quieras. Y tenemos botones de checkout y check-in. Ahora estos son circulares y no tienen un espacio entre ellos, así que vamos a arreglar eso. Entonces bajo botón, no necesitamos este esquema de color, verde azulado, vamos a poner m es igual a dos para poner algún margen ahí. El tamaño de fuente es igual a pequeño. peso de la fuente es igual a 600. Y entonces este trasfondo debería ser un total de 500. Retire el redondeado y retire este relleno x. y luego para pasar el cursor, hagámoslo un 300. Así que es un poco más ligero cuando se pasa el cursor sobre él. Entonces voy a tomar todo esto y pegarlo aquí abajo. Voy a pegar eso aquí y guardarlo. Y ahora debería verse mucho mejor, excepto que el texto es negro. Hagamos que el texto sea blanco. El color es igual a blanco. Para que coincida con todo lo demás. Asegúrate de hacerlo en el otro botón para guardarlo y boom, se ve bien. Ahora debemos hacer esta cadena de bicicletas, este logotipo de aquí arriba, ve a la página de inicio cuando haga clic en ella. Así que vamos a la barra de navegación de cabecera, lo siento. Averiguemos dónde está eso, cadena de bicicletas, y hagamos de eso un eslabón. Entonces pongamos enlace. Porque recuerda que tenemos el router React configurando un enlace a slash, que es nuestra página de inicio. Y luego pondremos cadena de bicicletas entre eso. Y eso enlazará a la página de inicio. Entonces guárdalo. Y ahora refrescar. Y ahora cuando pasemos el cursor sobre él, veremos que es un enlace. Podemos hacer click sobre él. Y no nos lleva a la página de inicio. Algo salió mal. Oh, ya veo lo que está pasando. Es importar enlace desde la interfaz de usuario de chakra. Y en realidad necesitamos importarlo desde React router dom, importar enlace desde React router dom. Eso es lo que está pasando. Por lo que no necesitamos este enlace aquí. Vamos a sacar eso y cómo debería funcionar. Sí, aquí vamos. Cadena de bicicletas y ves a continuación localhost 3 mil sube aquí abajo. Si hacemos clic en él, vamos a la página de inicio. Tan impresionante. Creo que hemos terminado con la interfaz de usuario y en realidad podemos empezar ahora y la lógica. Entonces si estoy en mi homepage, puedo conectar billetera, el botón ahí, puedo elegir mi bicicleta para ir al tablero de instrumentos, que hemos configurado aquí. El tablero da crédito a mi B&B. B&b hacer paseo minutos en mi estado de bicicleta. Se me permite pagar mi du pago, crédito, mi cuenta. Puedo elegir una bicicleta aquí abajo, check-out, Check-in. Y creo que estoy bien. Lo único que realmente queda es cuando el, cuando un nuevo usuario entra a esta página, no quieren ver su tablero porque aún no se han entrado como inquilinos en el contrato inteligente. Entonces si vengo a esta app y nunca la he usado, necesito registrarme como arrendatario. Recuerda que tenemos que añadir renta o función. Entonces, cuando vienen por primera vez aquí, tiene que haber una forma que puedan agregarse como arrendador, pero en realidad no hemos bajado ninguna lógica aún para determinar eso. Entonces vamos a aguantar. Y a medida que obtenemos la lógica en marcha, cuando en realidad somos capaces determinar si lo son o no. Agregaremos en esa forma. Tan gran trabajo empujando a través de esta interfaz de usuario. Sé que estás más emocionado interactuar con el contrato inteligente y construir esa lógica y conectarte a la billetera y hacer transacciones, todas esas cosas divertidas. Pero tuvimos que sacar esto por el camino y ahora está fuera del camino. Y nos vamos a divertir aún más en la siguiente sección. 6. Conectar la máscara y hablar con nuestro contrato: De acuerdo, así que ahora a la parte divertida, enganchemos nuestra aplicación al contrato inteligente y comencemos a hablar con la blockchain. Entonces antes de entrar en el front-end, tenemos que volver a la carpeta de contrato aquí. Y recuerda cuando compilamos este contrato, creó esta carpeta de artefactos y una carpeta Contracts, una carpeta de soul de puntos de cadena de bicicletas en este archivo JSON con un montón de datos. Y recuerda que hablamos del bytecode y del ABI. El ABI de nuevo, es una forma de decirle a tu aplicación qué funciones o métodos puede llamar, qué funciones puede llamar y erescontrato inteligente y alguna otra información que contrato inteligente y ver con eso. Tenemos que incluir esto en nuestro proyecto, este ABI. Así que toma toda la matriz y simplemente desplázate hacia abajo hasta el final de la misma e incluye los corchetes y cópielo. Y ahora vamos a crear en nuestra carpeta cliente un archivo en la carpeta fuente llamado config dot json. Y vamos a crear sólo algún JSON regular. Por lo tanto corchetes rizados aquí, vamos a poner ABI como clave y tiene un valor. Vamos a pegar en esa matriz. Y voy a formatearlo. Y ese será nuestro ABI. Ahora además de eso, necesitamos poder ahora además de eso, necesitamos dirección de contrato aéreo como donde también desplegamos nuestro contrato. Por lo que voy a añadir otra llave aquí abajo después de eso. Entonces pon una coma y escribe en la dirección del contrato. Y el valor va a ser la dirección a la que desplegamos. Y no recuerdo qué fue eso cuando hice eso. Entonces lo voy a desplegar de nuevo. Voy a cd de vuelta a la carpeta raíz, cd en mi carpeta de contrato y ejecutar NP x hardhat, ejecutar scripts slash sample script.js. Vamos a establecer esta bandera de red para la red de pruebas. Recuerda que configuramos en nuestra config hardhat, realidad hardhat config esta redes, este objeto de redes y recreamos uno llamado test net. Entonces eso es lo que estamos haciendo. Estamos desplegando estábamos ejecutando este script de ejemplo o este script de despliegue en la red de prueba. Por lo que voy a golpear Enter y dejar que despliegue y luego tomaré la dirección del contrato que se desplegó a ahí es cadena de bicicletas desplegada a esta dirección. Voy a copiarlo, volver a mi config JSON y pegarlo como valor para contratar dirección y guardarlo en nuestro contrato, podemos guardarlo por ahora. Por lo que abre copia de seguridad de la carpeta cliente. Y nos vamos, y vamos a volver a esto. Entonces lo que vamos a hacer a continuación es que necesitamos una forma de almacenar el estado. Y realmente no quiero lidiar con redox porque este es un proyecto pequeño y Redux es algo complicado. Entonces vamos a usar algo que es mucho más fácil llamado Context API. Y esto es parte de reactante viene con React y nos permite gestionar el estado. Entonces si has trabajado con reaccionado antes, sabes que pasamos apoyos a los niños y a veces eso puede salir como fuera de control y estamos pasando eventos de respaldo a los padres y eso es sólo una locura. Entonces lo que hace esta API de contexto es como Redux en que gestiona el estado. Pero lo que esto hace, con lo que esto nos beneficia es que podemos envolver todo nuestro proyecto en este proveedor y luego cualquier componente dentro de ese proveedor puede acceder al estado. Por lo que el estado va a ser global y se puede acceder a él en cualquier lugar. Simplemente traes ese contexto en, en accederlo. Entonces vamos a configurar eso y eso realmente va a controlar como todas nuestras funciones con las que hablamos con este contrato inteligente. Entonces si vas a la fuente y haz clic derecho y creas una nueva carpeta, y la llamaremos context. Whoops, crea una. Vamos a hacer clic derecho en la carpeta fuente, crear una nueva carpeta llamada context. Por alguna razón simplemente no lo hará. Déjame hacer eso. Aquí está, contexto. Así que vamos a hacer clic derecho en la carpeta fuente y crear una nueva carpeta llamada contextos. Y dentro de esa carpeta se creará un archivo llamado blockchain context dot js X. Y desde aquí vamos a importar algunas cosas. Entonces importa, reacciona y usa el estado porque vamos a usar eso desde React. A continuación vamos a importar eso. Config JSON. Entonces vamos a importar ese ABI y la dirección del contrato, y lo vamos a estructurar para que podamos acceder a ambos de forma individual. Entonces importar ABI, dirección del contrato de. Y luego creo que es dot, dot slash config JSON. Bueno. Entonces a continuación vamos a ser, luego a continuación vamos a estar usando un paquete llamado ethers js. Ahora mucha gente usa Web tres js. Este paquete nos permite hablar con la blockchain, pero soy el siguiente que vamos a estar usando un paquete llamado ethers JS. Ahora mucha gente que conozco usa Web tres JS. Me gustan los éteres, JS cada vez más familiarizado con él. Entonces voy a usar eso en este paquete nos permite hablar con nuestro contrato inteligente en la blockchain. Por lo que es muy fácil de instalar. Ven aquí abajo. Déjame volver a mi carpeta cliente. En ejecución Yarn, agregue éteres, ETA GRS. Y mientras eso está instalando, voy a importar éteres. Éteres. Bastante fácil. Genial. A continuación, vamos a crear un contexto y lo vamos a exportar como contextos blockchain. Entonces vamos a poner Exportar. Siguiente. En realidad vamos a crear este contexto. Estamos hablando de la API de contexto. Vamos a crear esto ahora y lo configuraremos como variable y lo exportaremos. Por lo que podemos poner exportación, const, contexto blockchain es igual a React dot create context. Y eso es todo. A continuación crearemos nuestro componente. Exportación. A continuación crearemos nuestro componente proveedor. Y si no sabes cómo usar esto, solo Google it. Y es bastante fácil. puede leer sobre él y quedar atrapado en un par de minutos. Y solo recuerda que iba a estar usando la variación de ganchos, lo cual es mucho más fácil en mi opinión. Vamos a hacer la exportación, const proveedor blockchain es igual. Y vamos a desestructurar a nuestros hijos en lugar de apoyos. Y eso se ve bien. Entonces lo que vamos a volver aquí, la clave de todo esto es devolver a este proveedor de puntos de contexto blockchain. Así que vamos a hacer contextos blockchain dot y verás que tienen proveedor de consumo. No necesitamos consumidor. Estamos usando ganchos, pero hay muchas cosas que podrías usar aquí. Vamos a usar proveedor. Y es obligatorio que pongas un valor ahí dentro, que no tenemos en este momento. Entonces voy a dejar ese espacio en blanco. En realidad, déjame poner esto en la siguiente línea. Vamos a devolver aquí el componente clave en este proveedor. Así que vamos a hacer retorno, punto de contexto blockchain, y ves que hay un consumidor y un proveedor. Si lees en la API de contexto, leerás sobre ambos estaban usando hooks. Así que vamos a estar usando al proveedor. Y vamos a proporcionar, en realidad déjame simplemente cerrar esto. Vamos a estar aportando aquí un valor que tenemos que aportar. Pero aún no tenemos nada . Voy a dejar ese espacio en blanco. Y luego en el medio estos pondrán a los niños porque eso es lo que estamos pasando . Así que guarde eso. Y luego tenemos a este proveedor aquí. Pero tenemos que ir a nuestro JSX principal y envolver toda la aplicación en este proveedor. Entonces voy a importarlo primero. Importar proveedor de blockchain desde contextos de barra de puntos slash slash contexto blockchain. Y luego vamos a envolver todo esto. Entonces aquí abajo puedo decir proveedor de blockchain y simplemente ponerlo fuera del chakra o proveedor de interfaz de usuario y toda la aplicación. Y salva eso. Ahora bien, estos valores que pasamos, cualquier valor que pasemos aquí van a estar disponibles para todos los componentes que aporten en este contexto. Espero que eso tenga sentido. Muy bien, así que vamos a continuación ir a los éteres, documentación de JS. Éteres. Vamos a escribir éteres JS en la búsqueda de Google, y luego simplemente haga clic en comenzar. Vamos a seguir estas instrucciones. Entonces, ¿cómo lo instalas? Ya hicimos eso. Ya lo importamos. No estamos usando etiquetas de script, así que sigue adelante. Entonces aquí está la clave de todo este paquete. En mi opinión, son tres cosas. Tienes que proveedor un firmante y un contrato. Por lo que el proveedor agradece, solo lectura. Entonces un proveedor es una clase que yo proveedor en éteres. No confundamos eso con su proveedor de Blockchain o Contexto API. Esto es separado. Un proveedor en éteres es una clase que proporciona una abstracción para una conexión a la red Ethereum. Proporciona acceso de solo lectura a la blockchain y su estado. Recuerda que cuando crees que proveedor piensa el acceso de solo lectura a la blockchain. Ahora un firmante es una clase que de alguna manera directa o indirectamente tiene acceso a una clave privada. Recuerda, ponemos su clave privada a una clave privada la cual puede firmar mensajes y transacciones para autorizar a la red a cobrar su cuenta o realizar operaciones. Entonces cuando piensas proveedor, piensas de solo lectura, cuando crees que firmante piensa clave privada y firma mensajes, crea transacciones, haces cambios directamente en la blockchain. Entonces necesitarás al firmante para eso. Tienes al proveedor que solo lectura firmante puede actuar y hacer cosas. Entonces tienes al proveedor que es de solo lectura y el firmante que es capaz de realizar transacciones y realizar transacciones. Y entonces tienes este contrato. Y vamos a hablar de eso a continuación. Contratos y abstracción, que representa una conexión a un contrato específico en la red Ethereum. Contrato inteligente que implementamos para que las aplicaciones puedan usarlo como un objeto JavaScript normal. Así que vamos a estar creando este objeto contractual y vamos a estar llamando todas nuestras funciones desde él. Por lo que la primera tarea aquí es conectar nuestra billetera a nuestra aplicación y lo hacemos a través de MetaMask. Así que asegúrate de descargar MetaMask si no lo tienes, solo ve a MetaMask. No sé por qué es punto Zendesk. Si no lo tienes descargado y lo configuras, hay un millón de artículos por ahí sobre cómo hacerlo. Pero asumo ya que estás tomando este curso que ya tienes MetaMask, pero solo Google MetaMask e ir a Download y es un navegador. Así que asegúrate de tener MetaMask descargado y configurado. Aquí hay éteres muestra de cómo hablar. Entonces aquí están los éteres asumen la interacción con MetaMask. Así que recuerda que hay un proveedor, hay un firmante. El proveedor es la conexión a la red Ethereum. Entonces el proveedor en realidad va a ser MetaMask. Y luego el firmante sostiene su clave privada y consigna las cosas. Recuerda que entramos en nuestra clave privada cuando la desplegamos. Y recuerda que nuestra clave privada está en ese archivo ENV. Y lo usamos cuando desplegamos el contrato y luego nuestras billeteras van a igualar esa clave privada. Vas a usar esa misma cuenta que usas para tu contrato. Muy bien, así que veamos esto. Vamos a seguir adelante y copiarlo porque lo vamos a utilizar. ¿ Verdad? Así que mirando hacia abajo aquí, los comentarios son realmente útiles. Esta documentación es realmente buena, en mi opinión. Pero primero tienes a este proveedor y pasaron por proporcionar un wraps, un proveedor estándar de la web tres, que es lo que MetaMask inyecta Como ventana puntea un teorema en la cada página. Entonces en esta página del navegador, MetaMask inyecta algo llamado ventana dot un teorema en cada página. Entonces cuando configuramos este proveedor, usamos, instanciamos un nuevo proveedor web tres, que es proporcionado por ethers. Por lo que hacemos un nuevo éteres adoptamos proveedores punto ancho tres proveedor y pasamos en básicamente el teorema de datos de ventana de MetaMask es el objeto MetaMask. Entonces eso va a ser un proveedor. Decimos que bajo la variable proveedor. Entonces en realidad podemos usar proveedor para enviar esto. Y luego podemos usar el método send para solicitar permiso para conectar cuentas de usuario. Entonces, por último, podemos tomar a este proveedor y llamar, conseguir firmante en él y guardarlo como nuestro Firmante. En realidad vamos a copiar esto y pegarlo en nuestras aplicaciones. Así que copia eso. Y aquí arriba en la parte superior, sólo pegarlo. Y voy a eliminar todos estos comentarios. Una cosa que voy a hacer es sacar esto a los proveedores de espera. Y vamos a añadir eso en una función real porque solo queremos que suceda cuando hacemos clic en los botones Connect wallet. Así que saca eso. Contamos con un proveedor, tenemos nuestro firmante. Ahora necesitamos el contrato. Ahora aquí es donde va a tener todo el sentido para ti. Entonces si sigues bajando a los contratos, dice que el objeto contractual hace que sea más fácil usar un contrato onchange como objetos JavaScript normales con la estera, con los métodos mapean a codificación y decodificación de datos para usted. Esto es genial. Este objeto contractual lo hace justo, este objeto contractual lo hace para que podamos tratar todas estas funciones de contrato inteligente es solo objetos JavaScript. Entonces si sigues desplazándote, te dan el mejor ejemplo aquí. Así que copia todo esto y pegarlo en tu aplicación. Así que voy a venir aquí abajo, copiar eso adentro, y vamos a trabajar a través de éste uno por uno y va a tener sentido para ti. Entonces en lugar de dy dirección, no estamos lidiando con di solo estamos tratando con B&B Así que sólo cambia eso para abordar y acabamos de poner, ¿qué opinas? Bueno, si subes, recuerda que estamos importando el ABI y la dirección del contrato. Por lo que nuestra dirección en realidad puede ser contratada vestido. Ahora muere ABI, donde de nuevo no estamos usando die, así que solo cambia esto a ABI. ¿ Y qué crees que podría ser? Bueno, ABI. Pero el problema es que hemos confundido JavaScript. Abi está en gris, lo que significa que no va a funcionar. Entonces vamos a cambiar esto para contratar a ABI. Contrato ABI. Así que vamos a poner aquí contrato ABI. Entonces tenemos nuestra dirección definida. Tenemos el ABI. Nuevamente, este es un buen comentario. El ERC-20 contrato ABI, que es una interfaz de contrato común para no poner eso. Así que vamos a deshacernos de ese comentario. Y luego finalmente tenemos el objeto real. Nuevamente, cambiar esto a contratar. Entonces crea una instancia de un nuevo contrato. Entonces en lugar de dy dirección pondrá dirección, en lugar de dy ABI, poner contrato ABI. Y luego pasamos en nuestro proveedor. Pero en realidad voy a pasar a mi firmante porque voy a estar haciendo muchas transacciones. Impresionante. Así que guarde eso. Tenemos toda nuestra información aquí para hablar con ella. Contrato inteligente. Ahora vamos a ejecutar aplicación de aire. Entonces hilado, ejecuta dev. Y hagamos localhost 3 mil. Y aquí está nuestra aplicación. Así que hagamos yarn run dev para ejecutar nuestro servidor y abrir localhost 3 mil. Y tenemos algunos errores, bueno. Muy bien, así que vamos a hacer hilo, ejecutar dev a startup o a un servidor. Eso va a ser en el anfitrión local, 3 mil. Entonces vamos a abrir eso. Uy, la refrescación abierta saudí. Y tenemos un error o el módulo solicitado no proporciona un contrato de exportación denominado ABI. Entonces algo anda mal con eso. Ustedes probablemente lo llamen así, pero está importando ABI porque en nuestra config JSON, está bajo la clave de ABI, Así que tenemos que mantenerlo así. Entonces hagamos esto. Vamos a cambiar el IVA, la variable para contratar ABI y dejar lo que estamos importando como ABI. Y luego cambiamos aquí abajo. Ahora el problema es que estamos importando contrato ABI, lo cual está mal porque en su Config JSON, es una clave de ABI. Por lo que tenemos que importar ABI. Y luego llamaremos a este contrato constante ABI es igual a ABI, que es lo que estamos importando. Y luego aquí abajo lo hicimos bien, así que ahí tuvimos todo tipo de errores. Probablemente lo cogiste. Pero asegúrate de hacer esos cambios. Importa ABI, guárdelo como una variable llamada ABI contractual, y luego pasa eso a tu contrato. Vamos a guardarlo y ver si eso lo arregla . Sí, ahí vamos. Por lo que ahora lo que queremos hacer es cuando hacemos clic en esta billetera de conexión, queremos que abra MetaMask y solicite su permiso para conectar la billetera a nuestra cuenta. Solicita permiso para conectarse a una de las cuentas. Entonces vamos a crear una función para eso, correcto, bajo esto, voy a decir const, conectar monedero igual va a ser asíncrono. Vamos a hacer una declaración de try-catch. Try-catch. Aquí, vamos a decir si teorema de datos de ventana, así que si esto, este objeto MetaMask no existe, entonces sólo vamos a devolver una alerta y alerta. Por favor, instale MetaMask. Entonces a continuación haremos cuentas const. Queremos conseguir las cuentas de MetaMask, así que esperamos proveedor dot send. Recuerda en éteres JS, si todavía lo tengo arriba. Ese fue nuestro ejemplo, un proveedor de peso dot pecó. Y lo que queremos es yf solicitar cuentas. Eso es lo que los llamamos sólo por patadas. Consolemos las cuentas de log dot. Y el primero, porque esa va a ser la que estamos usando actualmente, la cuenta corriente. Y dejémoslo ahí y veamos que estamos consolando eso o lo estamos registrando correctamente. Y luego aquí abajo en la captura, haremos el error console.log. Y en realidad voy a hacer un tiro aquí nuevo error. Y digamos que no, un objeto teorema. Y no puedo deletrear la palabra tirar. Ahí vamos. Por lo que queremos llamar a esto cuando se presione ese botón de conectar Wallet. Entonces como trabajamos con este proveedor es que tomamos este nombre de función, bajamos aquí y pasamos eso en como valor, conectamos billetera. Y entonces, ¿dónde está el botón que? Bueno, el botón si vamos y componentes, el botón es una barra de navegación. Entonces en la parte superior de navbar vamos a importar al proveedor. Así que importa contextos blockchain desde contextos de blockchain de barra de contexto. Así que asegúrate de importarlo. Entonces porque estamos usando ganchos. Podemos bajar aquí y tipo const. Y qué función estamos proporcionando y el proveedor conectará billetera iguala uso contexto, contexto blockchain. Ahora puedes crear múltiples contextos en tu aplicación. Puedes tener como un contexto de usuario en un contexto de transacción y cosas por el estilo. Entonces todo lo que estamos haciendo aquí por esto. Componente es que solo estamos poniendo disposición este contexto blockchain. Y estamos trayendo billetera Connect. Y luego aquí abajo donde tenemos nuestro botón que dice la billetera Connect, vamos a agregar un onclick. Onclick es igual a conectar billetera para llamar a esa función. Y eso es lo fácil que es. Así que lo guardemos y revisemos y veamos si funciona. Abre la aplicación y hay un error. Por lo que se usa el error, no se define el contexto. Así que tenemos que subir aquí. Y donde no estamos ni siquiera. Y simplemente hacer una importación. Usa el contexto de React en, recuerda cuando tengas un archivo JSX ahora en React, recuerda cuándo lo tienes, así que asegúrate de importarlo. Vamos a guardarlo e intentarlo de nuevo. Y así cuando hacemos clic en este botón conectar a Wallet, debería abrir MetaMask así. Y quiero conectar mi cuenta de prueba BSC. Por lo que voy a hacer clic en Siguiente. Ahora si seleccioné múltiplo, va a poner los cuatro en esto. Entonces por eso estamos eligiendo el primero. Pero sólo voy a hacer click en uno porque eso es todo lo que realmente hago. Golpe Siguiente. Entonces si hago clic en Conectar billetera, se va a sacar MetaMask como debería. Y voy a seleccionar la cuenta que quiero conectar. Ahora. Podría cobrar conectar. Ahora podría conectar múltiple. Y por eso tenemos las cuentas 0, porque es una matriz de cuentas en la primera va a ser tu cuenta corriente. Pero solo voy a seleccionar uno y hacer clic en Siguiente y conectarme. Y va a conectar mi billetera MetaMask con mi aplicación. Genial, así que estamos conectados. Si abrimos MetaMask, vemos que esta pequeña luz conectada es verde. Pero el problema es que no lo sabemos en nuestra app. Sólo dice mientras está todavía. Entonces me voy a desconectar y vamos a arreglar eso. Entonces desconecta esta cuenta, y luego volvamos y hagamos algo mejor con ella. Entonces volvamos al contexto blockchain. Vamos a crear algún estado para almacenar esa cuenta corriente en. Por lo que voy a llegar a lo más alto y hacer const cuenta corriente. Set. Cuenta corriente equivale al estado de uso. Y esto es solo React Hooks. Utilizan la estadidad. Y todo lo que dice es que la cuenta corriente va a ser la variable que mantiene mi estado en set. Cuenta corriente es lo que uso para establecer este estado aquí abajo donde consolé la cuenta. También voy a guardar eso en el estado de cuenta corriente. Y lo haces diciendo establecer cuenta corriente, cuentas 0. Entonces eso va a guardarlo en, así que eso va a guardarlo ahí dentro. Entonces eso va a guardarlo como cuenta corriente. Pero eso realmente no nos ayuda porque necesitamos pasar esa cuenta corriente a través de proveedor de aire. Entonces baja aquí y pon una coma y pon cuenta corriente para que podamos pasarla a nuestro proveedor y luego volver a la navbar. Y queremos también traer eso en cuenta corriente, ponerlo a disposición de nuestro componente. Entonces aquí abajo podemos hacer algo de lógica. Entonces diremos si no hay cuenta corriente, anoten el signo de exclamación, entonces solo diremos conectar billetera. Esto significa que no hay nada conectado porque no hay cuenta corriente que aún no se haya establecido. Entonces si no vamos a mostrar nuestra dirección de billetera, pero la vamos a cortar para que sea como los primeros cinco caracteres, punto, punto, punto, y luego los últimos cuatro caracteres. La mayoría de las aplicaciones hacen eso. Así que vamos a hacer eso también. Y podemos decir que vamos a usar una plantilla literal. lo hacen los dos backticks, dólar firman llaves rizadas. Y vamos a poner cuenta corriente dot rebanada. Después de 0 a cinco, por lo que los primeros cinco personajes. Y luego pondremos punto, punto, punto. Y por eso usamos estos literales de plantilla porque podemos mezclar en variables con valores de cadena como dot, dot, dot. Y luego justo después de eso, haremos el signo del dólar. Llaves rizados en tipo cuenta corriente, en tipo cuenta corriente, corte de puntos. Y esta vez vamos a ir hasta el final a contar todos los personajes y luego solo agarrar los últimos cuatro. Por lo que podemos hacer eso diciendo la longitud de punto de cuenta corriente. Esto obtendrá la duración de ese mientras que en la dirección menos cuatro. Y eso es lo que vamos a cortar. Así que guardemos eso y pruébalo. Refrescar. Y ahora vamos a conectar billetera. Asegúrate de desconectarte para que vuelvas a conectarte. Elige tu cuenta, haz clic en Siguiente. Y una vez que golpee Connect, debería decir almacenar eso en el estado y luego actualizar mi componente para mostrar la dirección de mi billetera. Así que pega Conectar. Mira eso ya. Ahí está mi dirección de billetera, 0 x seis a 73 punto punto, punto B F6. Pero todavía tenemos un problema. Si refresco, se va a ir. Ahora dice la billetera Connect, pesar de que todavía estoy conectada. Desconectemos y arreglemos eso. Para solucionarlo, necesitaremos otra función de vuelta en el contexto blockchain para verificar si la red inalámbrica está conectada. Entonces así es como nos conectamos. Pero cuando la aplicación se carga por primera vez, necesitamos comprobar si está conectada o no. Si lo es, necesitamos almacenar el estado. Vamos a crear otra función. Y en realidad sólo voy a copiar esto. Y vamos a llamar a éste. Compruebe si la billetera está conectada. Y todavía vamos a hacer esto. Verificaremos si el objeto MetaMask está ahí. Haremos cuentas. Pero en este tiempo en lugar de cuentas de solicitud de subrayado e, en realidad solo vamos a hacer cuentas de subrayado. Por lo que esto va a solicitar las cuentas, no permiso para usar las cuentas, sino sólo las cuentas en general. Entonces si hay algo conectado, va a aparecer aquí arriba. Y entonces vamos a hacer algo aquí como si longitud del punto de cuentas es verdadera. Entonces si hay vinculado en las cuentas, entonces estableceremos cuentas de cuenta corriente 0. De lo contrario console.log. No, no se encontraron cuentas. Y deshazte de estos dos. Esta vez no voy a lanzar un error. Pero de nuevo, todo lo que estamos haciendo es conseguir las cuentas conectadas. Y entonces si hay alguno, establecerá el estado. Si no, solo lo consolaremos. Entonces lo sabremos. Entonces éste no queremos pasar al proveedor porque no lo necesitamos en ningún otro lugar. En realidad lo necesitamos cuando se carga la página por primera vez. Así que voy a bajar aquí y añadir un efecto de usuario Hooke. Y usar ganchos de efecto te permiten correr. Y usar ganchos de efecto te permiten ejecutar funciones una vez que algo se carga o una vez que algo cambia. Entonces al final de esto, se puede hacer coma, lo que sea. Al igual que si estás viendo una variable cada vez que cambia esa variable, esta cosa se ejecutará de nuevo. Pero vamos a poner los corchetes vacíos aquí están vacíos. Los corchetes vacíos aquí, lo que significa que se va a ejecutar cuando el componente se cargue por primera vez, termine de cargarse. En realidad vamos a poner ese chequeo mientras eso está conectado ahí. Eso se ejecutará cuando la página se cargue por primera vez. Nuevamente, cuando la página se cargue por primera vez, se va a comprobar si una billetera está conectada. Si es así, va a establecer el estado. Así que ahorremos eso y lo intentemos de nuevo. Y por cierto, cada vez que se carga, por cierto, cada vez que ahorras. Por cierto, cada vez que guardo, solo arroja estos errores locos. Te voy a mostrar cómo arreglarlo en un minuto. Pero vamos a refrescar y probar esto. Así que haz clic en Conectar cartera. Voy a conectarlo de nuevo, conectarme y se establece mi dirección. Y ahora si me refresco, se queda. Es bueno ir. Si voy a la siguiente página, sigue ahí. Voy a la primera página sigue ahí. Entonces eso se encargó de eso. Ahora, tal y como estaba diciendo, si lo guardo de nuevo, Y vuelvo, mi página está completamente destrozada. Y para ser honesto, no sé qué está pasando. Por alguna razón, vite JS está haciendo una carga de página, está haciendo una recarga de página en lugar de la recarga en caliente. No sé si es un bicho o tal vez algo que pasé por alto. Pero otras personas se están quejando en línea. Creo que esto es algo nuevo. Y si supiera esto, habría usado la aplicación Create React, pero en realidad es una solución bastante fácil. Este tipo lo acaba de enumerar aquí. Y lo que tenemos que hacer es ir a nuestra configuración vite y simplemente agregar en esta configuración de servidor. Así que si vas, si el tuyo no está haciendo esto, no te preocupes por ello. Pero si se va a vite, config js y simplemente agregue esto, ponga una coma después de esto, y haga el servidor h EMR true, que es hot module recarga, que es lo que se supone que está sucediendo de cualquier manera pensé. Y luego mira. Usa sondeo. ¿ Cierto? Y eso es todo. Ahora guárdalo. probablemente quiera reiniciar mi servidor solo porque es una config. Muchas veces necesitamos voy a reiniciarlo y eso debería cuidar el problema. Así que déjame refrescar ahora déjame ir a guardar y ver si arroja ese error. Voy a venir aquí y hacer clic en guardar un par de veces. Y todavía hay un error. ¿ Qué está pasando? Servidor ASMR true, Ver, usar sondeo, true. Muy bien, el servidor reiniciado. Así que déjame guardarlo. Está bien. Guardarlo de nuevo. Guardalo aquí. Guárdelo aquí de nuevo. En realidad parece que solo está sucediendo en el archivo de mi proveedor. Entonces si vengo aquí al principal JSX y pego Guardar, entonces todo está bien. Pero si voy a mi proveedor y hago eso, guárdalo, lo estropea. Bueno, trataré de averiguar la respuesta a esto en el futuro. Yo. Volveremos y te diremos cómo arreglarlo. Pero realmente no importa. Sólo en desarrollo, como si vienes aquí y haces click alrededor, nunca sucede. Sólo sucede con esta recarga de módulo caliente blanco. Así que lo averiguaré y lo haré, lo publicaré aquí en un poquito. Muy bien, entonces lo último que queremos hacer en este video es que queremos tratar de hablar con nuestro contrato para asegurarnos de que lo hemos establecido. Y una vez que tengamos en el siguiente video, simplemente iremos a toda velocidad por delante y pondremos todo configurado. Así que volvamos a nuestros contextos blockchain. Y vamos a crear una función que obtenga el saldo de su contrato inteligente. Entonces si recuerdas, tenemos en nuestra carpeta de contrato y nuestro contrato, recuerda que tenemos una función llamada saldo de eso devuelve el saldo de contratos. Tratemos de llamar a eso y ver si funciona. Así que voy a ir a mi contexto blockchain y simplemente hacer const, conseguir equilibrio igual, es igual a un fregadero. Y vamos a hacer un try-catch. Error de registro de puntos de consola. En aquí arriba bajo intento, vamos a decir const balance. Y recuerda que tenemos este objeto contractual que nos permite hablar con nuestro contrato inteligente. Vamos a decir contrato. Vamos a hacer una espera porque tenemos una función asíncrona. Y luego contrata puntos balance de puntosde porque ese es su nombre de función de contrato inteligente. Entonces justo después de eso, vamos a salvar eso en nuestro estado. Entonces. En realidad, vamos a consolarlo a Ashley. Vamos a iniciar sesión en la consola. Entonces console.log equilibrar y solo ver si eso aparece. Vuelve al proyecto y vuelve a cargar la página, y debería estar apareciendo en nuestra consola. Se necesita un minuto llamarlo realmente no, eso no va a funcionar. Entonces justo después de eso vamos a establecer el estado, lo vamos a poner en el estado. Entonces podemos poner eso en la consola para ver si funciona. Subimos aquí y creamos una nueva variable de estado, constante, equilibrio, equilibrio SET. Y usted ve el patrón aquí. Ahí está la palabra y luego establecer la palabra equivale a usar estado. Y así aquí abajo, vamos a establecer el equilibrio para equilibrar. Entonces voy a equilibrar console.log. Y esto no se está utilizando en ninguna parte, por lo que no se va a llamar. No hay nada de esto va a funcionar. Pero sólo para probarlo, vamos a bajar aquí y llamar a equilibrarse. Cuando se carga la página. Vamos a guardarlo y refrescar nuestra página. Y mira eso. Nos devuelven lo que se llama un gran número. Un gran número es cantidad de error en forma o cantidad de aire con 18 ceros en él. Por eso se llama un gran número. C aquí mismo en 0 x 00 es gran número verdadero. Entonces el gran número es grande. Es genial hacer el trabajo en el contrato, pero no es legible. Al igual que no queremos mirar y ser como si tuviera 1 billón de algo de éter. Queremos decir que tengo 0.001 o 0.01, B&B o lo que sea. Entonces hay una función de ayudante. Si vas a éteres, JS, y escribe utils, y escribe utils en utils. Y eso no fue útil. Escriba en éteres, dot js utils, y haga clic en utilidades. Y entonces deberías ver, y luego teclear un gran número. Ahí está. Y deberías ver aquí abajo, creo que se llama éter de análisis. Sí, aquí vamos. Entonces ahí están estas, hay estas conversiones. Ether dot utils, unidades de formato de punto, éteres utils formato éter parse unidades. Y todo esto hace es que sólo convierte este valor para nosotros, como el que vamos a estar usando es formato éter. Y esto simplemente no es una buena página. Déjame, déjame copiar y pegar esto. Ethers dot js. Aquí vamos. Cuerdas de éter y pesan. El que vamos a usar se llama éter de formato. Y esto es cuando tienes camino y quieres mostrarlo como éter regular o B&B regular o lo que estés acostumbrado a ver como la cantidad legible por humanos. Así formateado cantidad de camino en una cadena decimal que representa la cantidad de éter. Eso es lo que vamos a usar. Para ello, teclearemos. Entonces para hacer eso, necesitamos establecer el equilibrio. Entonces para hacer eso necesitamos poner en lugar de equilibrio, necesitamos poner éteres, dot util, utils dot formato éter. Y luego pasamos en la balanza. Y esto lo va a configurar a este formato muy bien legible en éter o B&B, no de la forma 180 formateando. Entonces vamos a guardarlo y ahora debería estar mostrando 0. Vamos a refrescar la página. Todavía dice gran número. Vamos a guardarlo de nuevo. No lo sé, tal vez mi estado Sigue mostrando gran número y eso probablemente sea porque estoy llamando balance, que es esto. Oh, sí, eso sigue mostrando gran número. Creo que mi tema es que nombré este balance y luego también he establecido, mi estado está equilibrado, que estoy usando aquí. Por lo que probablemente esté usando este número original. Vamos a cambiar esto a un equilibrio de acaba de poner balance de. Y entonces ahora estamos seguros de que esta es nuestra variable estatal aquí arriba y no esta. Así que ese es mi mal. Entonces llamemos al balance variable de formato eso y luego agarremos las variables de estado. Entonces guárdalo y ahora debería ser bueno. Así que refresque la página. En la parte try de esto, vamos a decir const, equilibrio de iguales. Y vamos a usar nuestro objeto contractual. Recuerda que así es como vamos a llamar a todas estas funciones de contrato inteligente harán contrato dot balance de, porque recuerdas si vuelves a nuestro contrato, tenemos una función llamada balance de llamar obtener duración total o establecer hacer y vamos a estar haciendo todo eso. Pero por ahora solo vamos a probar éste. Entonces lo llamaremos. Por lo que vamos a decir contrato dot balance de. Entonces justo debajo de eso, vamos a establecer otra variable de estado para mantener ese valor. Volvamos aquí arriba y tecleemos, justo debajo de este put const, balance, SET equivale al estado de uso. Ahora ves el patrón aquí. Primero es la variable y la segunda comienza con set, porque esa es la variable que usas. Eso es lo que se utiliza para establecer esta primera variable. Para que podamos salvar esto ahora en nuestro estado. Por lo que justo debajo de esto, diremos equilibrio SET. Balance de en este bloque try, vamos a conseguir el equilibrio. Entonces hagamos un const, saldo contractual es igual y vamos a usar nuestro objeto contractual porque así es como hablamos con estas funciones en nuestro contrato inteligente. Ahora vamos a usar este objeto contractual que creamos aquí porque así es como vamos a interactuar con su contrato inteligente. Entonces diremos punto de contrato. Y si recuerdas, si vuelves a los contratos, recuerdas que tenemos una función llamada saldo de eso devuelve el saldo contractual. También tenemos set do y obtenemos duración total. Vamos a estar usando todos estos. Pero por ahora vamos a utilizar este balance de. Por lo que vamos a hacer contrato dot balance de. Y entonces aquí vamos a salvar ese valor en nuestro estado. Entonces volvamos a subir y establecer una nueva variable de estado. Entonces const, lo llamaremos balance y luego SET balance. Aquí se ve el patrón. Ahí está la variable estatal y luego la estableces con la segunda, es igual a estado de uso. Por lo que de vuelta aquí vamos a decir SET saldo para contraer saldo. Y vamos a salvar eso. Disparar. En este bloque try, lo que vamos a hacer es conseguir el equilibrio. Entonces diremos const. Llamémoslo saldo de contrato igual esperan porque esta es una función asíncrona. Y luego recuerda aquí arriba tenemos este objeto contractual. Esto es lo que vamos a usar para interactuar con su contrato. Entonces vamos a hacer punto de contrato en ¿a qué función queremos llamar? 7. Cómo crear el formulario de agregar un arrendador: Ahora vamos a empezar en nuestro tablero aquí, donde podemos empezar a poblar estos dinámicamente. Actualmente solo tenemos valores estáticos, pero necesitamos poder poblar estos. Necesitamos poder realizar un pago y acreditar nuestra cuenta. Y por cierto, aquí arriba tenemos crédito y luego el pago aquí, está al revés. Cambiemos estos muy rápido. Si vamos a los totales actuales en la parte inferior, solo canje estos dos componentes, añada la forma balanceada antes de pagar por ellos. Eso arreglará eso. Pero antes de hacer todo eso, necesitamos crear un formulario como este, la forma en que está actualmente este dashboard, asume que el arrendatario ya se ha sumado como arrendatario, pero aún no lo hemos . Esto de nuevo es sólo texto estático. Por lo que necesitamos poner aquí un formulario para mostrar si la renta o no se ha agregado como arrendatario. Y luego si ya lo tienen, entonces vamos a mostrar el tablero y sus valores actuales. Si tratamos de ir en crédito al arrendatario y revisar sus minutos de viaje y todo eso, no va a funcionar porque recuerda que tenemos esta función en nuestro contrato aquí arriba que dice Agregar arrendatario. Necesitamos agregar arrendatario a nuestro mapeo de inquilinos aquí. Entonces eso es lo que necesitan hacer. Esencialmente, necesitan llenar el formulario para agregarse como arrendatario, lo que luego les permite revisar una bicicleta. Justo antes de hacer eso, tenemos una cosa que abordar. Entonces en el video anterior, tú, una cosa que podrías haber notado es cada vez que estaba trabajando en su archivo de contexto blockchain e hice un cambio o lo que estuviera haciendo. Y fui a golpear al Comando S para guardarlo, en realidad se estrellaría mi página. Así que déjame golpear al Comando S, regresa y verás que mis páginas se estrellaron. Si abro la consola, verás un montón de errores que se relacionan de nuevo con el gancho contextos usados. Ahora la razón de eso es porque en contexto de blockchain de aire en la parte superior donde creamos los contextos, dejamos el argumento nulo o parámetro. No, deberíamos poner algo aquí y sólo vamos a poner una cuerda vacía. Y voy a salvar eso. Y ahora volvamos a probarlo. Así que déjame refrescar esto. Y voy a venir aquí a guardarlo unas cuantas veces. Y deberías ver que mi página está bien. Entonces eso es un error de mi parte. Ve al punto React crear contexto y asegúrate de poner un valor, en cuyo caso vamos a poner una cadena vacía. ¿ Está bien? Entonces vamos a crear una nueva forma. Vamos a llamarlo renta o formar punto JSX. Y de nuevo, sólo vamos a tomar la una de estas otras formas. Probemos el anuncio a forma equilibrada. Y sólo vamos a copiar y pegar esto en. Y luego vamos a subir al nombre de la función y llamarlo renta o formulario. Muy bien, y luego nos desplazamos hacia abajo, ves este crédito tu cuenta. Queremos cambiar esto a algo diferente y en realidad voy a subir aquí por encima del flex. Y sólo voy a poner un campo de texto. Y en el TextField voy a poner como atributos, font-family es igual a rumbo. El tamaño de fuente es igual a 600, o en realidad x grande. Y luego el peso de la fuente es igual a 600. Muy bien, y asegúrate de poner la etiqueta de cierre. Y luego dentro de eso, vamos a poner algunos textos. Vamos a decir bienvenidos. Y luego voy a poner un salto de línea. Y por favor introduzca su nombre y apellido para registrarse. Podrías ser como, ¿no es esta una aplicación descentralizada? ¿ Por qué queremos el apellido de alguien o incluso el nombre? Pero es solo un concepto que se me ocurrió cuando hice la app. Si quieres cambiarlo, siéntete libre de cambiarlo. Y verás que tenemos este error porque nosotros, porque no podemos tener múltiples etiquetas y un retorno, resolvemos haciendo esto abrir y cerrar etiquetas vacías. Entonces pon eso en la parte superior y una cierre en la parte inferior en todos también. Entonces tenemos nuestros textos aquí. Tenemos un flex y luego tenemos nuestra forma. En la forma en que en realidad solo queremos el firstName y LastName porque puede rentar recordar se va a establecer a true porque solo están creando su cuenta. Por supuesto, pueden rentar. Activo se pondrá en falso porque aún no tienen bicicleta. Entonces la hora de inicio, hora de finalización, el saldo y el monto adeudado serán todos 0. Entonces eso se va a poner en el backend, o fuera del foro o fuera de la capacidad de los usuarios para cambiar eso. Por lo que sólo necesitamos un nombre y apellido. Por lo que ya tenemos una entrada. Entonces he formado el control. Hagámoslo. Hagamos realmente una etiqueta aquí. Así etiqueta de formulario en HTML cuatro es igual a FirstName. Y vamos a poner FirstName aquí. Esto es sólo una etiqueta. Y luego tenemos nuestra entrada, nuestro mensaje de error. Y luego vamos a copiar y pegar otro de estos. Entonces otra entrada de etiqueta de formulario y mensaje de error. Entonces justo debajo del mensaje de error, pega otro. Y vamos a montar a estos dos. Así HTML para FirstName. Entonces vamos a volver a poner FirstName, sacar este número de tipo en paso cualquiera porque sí queremos caracteres. Marcapasos, FirstName. Y luego en todas partes hay un saldo de crédito, solo haz FirstName. Y luego en el segundo, queremos apellido aquí mismo, cambiar esto a LastName, LastName, sacar número en paso. Marcapasos va a ser LastName. Registrarse es LastName. Y recuerda que te dije que este registro, y voy a hacer estos no ese caso camello. Quiero que todo sea minúscula para que coincida con los otros. Pero recuerda que te hablé de este registro. En realidad registra la entrada que estás poniendo en los campos y la pone en este objeto que luego se envía a donde estés enviando el formulario, es bastante genial. Eso es todo lo que tengo que hacer. Entonces LastName, cambie estos dos a LastName. Y luego aquí arriba donde dice que el control de formularios, hay un cheque por no es válido. Quiero comprobar si hay errores. Nombre y whoops, y errores apellido. Entonces aquí mismo tenemos un mensaje de error. Entonces si hay un error en éste o éste, y en realidad lo configuramos para, y así ambos tienen que estar libres de errores para pasar. Entonces no puedes poner un campo. Por lo que no se puede poner valores en uno y no en el otro. Y para éste sí queremos una longitud mínima. Así que vamos a hacer hombres longitud valor cuatro. Y el mensaje va a ser longitud mínima debe ser de cuatro. Vamos a poner eso en el siguiente. Vamos a guardarlo. Y aquí arriba donde dice acreditar tu cuenta, saca todo ese texto porque sus textos van a estar por encima de él. En entonces en el aire onsubmit. Vamos a la consola registrar los valores. Así que vamos, creo que estamos bien. En realidad, veamos cómo se ve esto. Entonces no hemos puesto ninguna condición aquí si refresco y en realidad ni siquiera la hemos agregado a la página. Entonces eso realmente va a ir en los totales actuales, creo. No, va a ir en el tablero. Entonces justo aquí donde dice totales actuales. Vamos a comentar eso por ahora. Sólo para ver cómo se ve esto. Vamos a tirar en forma de arrendatario y estar seguros de importarlo, guardarlo y echemos un vistazo a cómo se ve eso. Sí, así que aquí está FirstName, LastName. Entonces voy a añadir un poco de espacio debajo del primero para que se vea un poco mejor. Entonces si voy al tablero, en realidad va a ser renta o formulario. Entonces esta segunda etiqueta de formulario, solo voy a hacer margen superior equivale a cuatro. Hagamos tres. Mira cómo se ve eso. Tres no es suficiente. Probemos cinco. Muy bien, así que bienvenidos, por favor come éter. Pongo éter. Por favor, introduzca su nombre y apellido para registrarse. Así que probemos Travis y luego pongamos a prueba. Y si presiono Enviar, debería iniciar sesión en la consola. Ahí está, nombre Travis, apellido, prueba. Es así de fácil con la forma de gancho React. Impresionante. Por lo que ahora necesitamos una manera de saber si existe o no un inquilino. Y si recuerdas, en nuestro contrato, si vamos a la cadena de bicicletas dot soul, creamos este arrendatario existe en todo lo que hace es volver verdadero si hay una dirección de billetera para ese arrendatario y falso si no, vamos a usar esto para determinar y eso nos ayudará a voltear entre forma de aire en nuestro tablero. Tan bueno un contextos blockchain. Y justo donde lo dejamos en este Ponte equilibrado. Y en realidad no necesitas llamar al get balanced porque nadie realmente necesita conseguir el saldo del contrato sino el propietario. Entonces no queremos ese color, pero puedes dejarlo aquí mismo bajo Obtener equilibrio, vamos a crear una nueva función llamada get renter existe. Entonces vamos a comprobar y ver si existe el arrendatario. Un fregadero. Y vamos a hacer un intento de atrapar. Y la captura, sólo vamos a consolarlo. Entonces aquí arriba vamos a hacer dos cosas. Vamos a comprobar si existen. Y si existen, vamos a conseguir su información. Entonces recuerda en nuestro contrato aquí, tenemos una función llamada arrendatario existe. Y lo que hace es que vuelva cierto si tienen una dirección de billetera y nuestro mapeo. Entonces vuelve verdadero si existen en false, si no lo hacen. Si esto vuelve verdadero, entonces vamos a seguir adelante y llamar esta función get renter para que podamos obtener la información de los inquilinos en almacenada en nuestro estado y hacer todo lo que necesitemos con ella. Entonces en realidad vamos a tener dos funciones aquí. Empezaremos con conseguir que exista el arrendatario. Y en realidad no sé por qué lo nombré que es cheque inquilino existe tiene más sentido. Entonces aquí vamos a decir const renter iguales esperan punto contrato, y llamamos a esa función inquilino existe. Ver aquí en el contrato inteligente. Existe contrato dot arrendador. Y tenemos que pasar en dirección de billetera aérea. Y si recuerdas aquí arriba, estamos ahorrando eso en estado bajo una variable llamada cuenta corriente. Así que copia eso, ven aquí abajo y pasa eso adentro. Y luego queremos establecer ese estado. Por lo que queremos establecer el estado si existen o no. Me gusta mantener las cosas en el estado en caso de que lo necesite. Creo que en otras páginas vamos a necesitar poder saber si eso es cierto o falso. Entonces vamos a crear una variable de estado. Por lo que existe el arrendatario canst, establecido arrendatario existe es igual a estado estadounidense. Y vamos a poner aquí establecido inquilino existe. arrendador pasará eso en. Impresionante. Y como dije, si existen, queremos seguir adelante y obtener su información. Entonces justo debajo de esto, voy a decir si arrendatario, así que si existe arrendatario, si eso es cierto, entonces vamos a llamar a una función llamada get renter. Y pongámosle un peso. Entonces justo debajo de eso, voy a poner const, conseguir inquilino. Vamos a crear esa función es igual a un fregadero, gritos, es igual a una flecha de fregadero. Entonces haremos este try-catch, pero sólo voy a copiar esto para ahorrar tiempo. Y punto contratado. Ahora bien, ¿cuál es su función llamada para eso? Se llama get renter y pasamos en una dirección de billetera. Entonces aquí, consigue arrendatario, pasamos en una dirección de billetera y luego vamos a establecer el estado. Vamos a salvar los valores de ese arrendatario en su estado. Así que subamos aquí y creemos uno nuevo. Const, arrendatario, set renter equivale al estado U. Y aquí abajo, acabaremos de poner inquilino establecido, arrendatario para guardarlo en nuestro estado. Entonces podemos quitar eso. Por lo que ahora cuando este componente se carga, este contexto queríamos llamar a check renter existe porque queremos saber eso por adelantado. Por lo que necesitamos tomar esto e incluirlo en nuestro efecto de usuario. Para que se llame cuando esto se carga. Y entonces ese check render existe, guarda, ahorra que verdadero o falso en el arrendatario existe variable estatal. Por lo que podemos bajar aquí y pasar a nuestro proveedor, el arrendatario existe. Para que eso nos diga verdadero o falso. Y luego ahorremos eso y volveremos a conseguir la información del arrendatario. Pero solo queremos saber ahora verdadero o falso si existen. Vamos a enviar esto a nuestro proveedor. Y luego en nuestro tablero podremos probar si deberíamos estar mostrando el formulario o el tablero. Entonces aquí arriba, vamos a decir const, arrendatario existe es igual a contextos de uso, contexto blockchain, y asegúrese de traer eso. Importa contextos de uso desde React y también importa los contextos blockchain también. Ahora podemos bajar aquí y decir, así que tenemos que revisar algunas cosas aquí. Queremos comprobar si existe el arrendador. Queremos mostrar un spinner. De lo contrario, si existe el arrendador es cierto. Queremos mostrar el salpicadero. De lo contrario mostrar su forma. Entonces si establecemos el valor predeterminado del arrendatario existe si establecemos esto en falso o algo así, eso no sería bueno porque eso nos diría siempre mostrar el formulario porque su renta o no existir. Entonces muestra la forma. Pero en realidad queremos que gire antes de que ponga algo. Así que queremos hilar antes de que determine, Hey, es falso u hey, es verdad. Por lo que en realidad podemos hacer esto con el operador ternario. Y a mucha gente no le gusta esto. No me importa porque lo veo mucho y estoy acostumbrado a ello. Pero podemos hacer como un si más, con ternario o si else-if otra cosa. Y podemos hacerlo así. Por lo que existe un inquilino es igual a nulo. Entonces ShowSpinner. Sólo voy a poner esto en cotizaciones por ahora. De lo contrario, si existe el arrendatario es cierto, entonces mostrar los totales actuales. De lo contrario mostrar la renta o formulario. Así que sé que puede parecer un poco raro para ti. Si existe el arrendatario es igual a nulo, entonces mostrar spinner. Y suele ser como algo más. Pero se puede decir otra cosa si el arrendatario existe es cierto, entonces cuando pones este signo de interrogación aquí, luego mostrar totales actuales, lo contrario mostrar renta o formulario. Entonces esto comprueba tres condiciones, nulas, falsas y verdaderas. Así que en lugar del ShowSpinner, esto no va a hacer nada. Vamos a instalar algún tipo de paquete spinner. Voy a ir aquí y simplemente reaccionar a spinner. Hilanderos. Vamos con eso. Entonces hilo añadir, reaccionar a los hilanderos. Inicie mi servidor. Instala eso. Impresionante. Entonces aquí vamos a mostrar un spinner. ¿ Y cómo hacemos eso? Por lo que sólo vamos a usar este cargador de clips. Así que copia esto. Este es un corto clip Loder de este spinners React. Va a pegarlo arriba en la parte superior. ¿ Qué más? Parece que. Necesitamos establecer una variable de estado cargando y configurar la carga. Y eso es por defecto va a ser cierto. Entonces eso va a estar cargando cuando iniciemos la página. Entonces eso probablemente se va a correlacionar con nuestro spinner de alguna manera. Entonces aquí está nuestro cargador de clips. Hay una propiedad de color con la que no queremos meternos, o CSS o tamaño, tal vez sí queremos meternos con el tamaño, pero aquí está cargando iguala carga. Así que vamos a copiar eso y ponerlo en error clip spinner. Y en realidad sólo voy a copiar todo esto. Y solo sacaremos lo que no necesitamos para copiar eso y pegarlo aquí. Y vamos a sacar color. Y vamos a sacar CSS es igual a anulación. Y estoy pensando que 150 va a ser grande. Entonces hagamos 75. Y luego saca este pseudocódigo y guárdalo y ve cómo se ve eso. Entonces empecemos nuestra aplicación. Hilo run dev. Y vamos a refrescarnos. Tenemos un gran error. Estado de uso no está definido, sí, por lo que tenemos que traer en el estado estadounidense. Hay contextos usados. Simplemente agregue estado de uso, guárdelo. Impresionante. Por lo que parece que tenemos un spinner y no está resolviendo nada. Y entonces parece que todavía estamos mostrando la forma. Queremos deshacernos de esta forma porque no se supone que esté mostrando. Y entonces queremos centrar este spinner. Entonces para centrar el spinner es muy fácil. Simplemente tomamos este cargador de clips y simplemente envolverlo en este componente chakra UI Center. Por lo que acaba de poner Center y poner eso al principio y luego la etiqueta de cierre al final del cargador de clips. Y luego nos olvidamos de quitar renta o formulario aquí abajo y luego seguir adelante y eliminar este comentado totales actuales. Ahora vamos a guardarlo y ver qué pasa. Por lo que se ha refrescado la página y sólo está pegado girando. Entonces eso nos dice que algo anda mal porque debe resolverse como renta o existe debe cambiar en esta condición. Ya no debería mostrar este cargador de clips. En realidad debería mostrar totales actuales o renta o formulario una vez que se resuelva. Entonces hay algún otro tema pasando. Y se puede ver que aquí mismo, tenemos un error. Ese error dice que la resolución o la dirección no está configurada para el nombre DNS. Este es como uno de los errores más vagos de éteres JS. Puede significar un millón de cosas, pero sí sé en nuestro contexto, probablemente signifique que en nuestro contexto blockchain, cuando estamos usando esta cuenta corriente, esto probablemente signifique que esta cuenta corriente aún no está establecido cuando estamos llamando a esto. Y podemos determinar eso poniendo aquí un registro de consola, cuenta corriente. Y en realidad voy a poner backticks y decir cuenta corriente. Y luego cuenta corriente solo para que sepamos qué es eso. Vamos a guardarlo y ver qué nos da la cuenta corriente. Así que mira eso. La cuenta corriente está en blanco. Entonces eso es exactamente lo que está pasando. Y para ser honesto, no sé la solución en este momento. Tengo que profundizar en esto para ver por qué, pero lo resolveré y te lo haré saber aquí en el siguiente video. Pero una solución rápida para nosotros ahora es bajar aquí al efecto de Estados Unidos y agregar en cuenta corriente aquí. Ahora usaría efecto hace uso efecto se llama cuando se carga el componente. También se puede llamar de nuevo cuando estos valores cambian algo en esta matriz. Para que pueda tener cuenta corriente, puedo tener inquilino y todas estas otras cosas. Cuando estos valores cambian. O actualizado de alguna manera causará la llamada que usan efecto de nuevo. Si ponemos cuenta corriente aquí, si se llama a esta función, no hay cuenta corriente y arroja un error. Bueno, cuando se resuelva la cuenta corriente, va a volver y llamar de nuevo a esto, que va a llamar a ambas funciones. Nuevamente. Aunque va a error, volverá a llamarlo una vez que se resuelva. Así que vamos a hacer eso por ahora sólo para que podamos seguir moviéndonos. Te daré la solución aquí en un poco, pero si guardas esto ahora debería funcionar bien. Así que refresque. Y ahí vamos. Y luego ves que la cuenta corriente está en blanco aquí, pero luego la vuelve a mostrar con la dirección. Entonces ese es el tema que está pasando. Vamos a abordar eso en un poco. Pero aquí mismo dice, Bienvenido, Por favor ingrese su nombre y apellido para que muestre que las cosas están funcionando. Si volvemos a refrescar, son giros y luego se muestra, Hey, el arrendatario no existe. Entonces está haciendo una llamada, está volviendo falsa y mostrando nuestra forma. Entonces ahora vamos a configurarlo para que en realidad podamos registrarnos como arrendatario. Entonces justo debajo de conseguir arrendatario, necesitamos hacer una llamada para registrarnos como arrendatario. Así que volvamos a nuestro contrato en encontrar que creo que lo llamamos añadir arrendatario aquí sí agrega arrendatario. Eso es lo que necesitamos llamar. Y así volvamos aquí y vamos a crear una nueva función. Voy a copiar y pegar esto en. Voy a llamarlo agregar inquilino. Y arrendador. Y luego vamos a hacer contrato dot add arrendatario porque esa es una función de contrato inteligente. Entonces en este anuncio renta o función, si vuelves al contrato inteligente, estamos pasando en todo mientras que en dirección, nombre, apellido puede rentar activo, empezar en balance de tiempo y hacer. Entonces. Sólo vamos a pasar eso directamente a nuestra función aquí arriba. Así poner dirección de billetera, FirstName, LastName puede rentar, activo, equilibrar, hacer inicio y fin. Entonces vamos a pasar en todo eso cuando se llame. Y así aquí mismo en el anuncio inquilino, vamos a pasar esa información. Por lo que en realidad puedo tomar esto, copiarlo y pegarlo aquí. Entonces cuando estamos haciendo llamadas al contrato, podemos usar este bonito método llamado peso. Para que puedas ver un peso, añadir el peso del arrendatario. Y lo que hace es que se detenga allí hasta que finalice la transacción. Entonces se queda aquí y espera. Y luego cuando finaliza la transacción, entonces sigue ejecutando código. Por lo que sólo vamos a probar eso por log de consola, renta o agregado. En realidad estamos podemos hacer algunas cosas divertidas. Podemos hacer FirstName agregado. Y luego justo debajo de eso, vamos a querer conseguir esa información del arrendatario. Por lo que tenemos esta función llamada get renter que establece la variable estatal inquilinos con los inquilinos información en que get renter se llama por este cheque renta o existe. Entonces todo lo que tenemos que hacer aquí abajo es sólo llamar cheque renta o existe. Y eso comprobará que existan en poblar nuestro estado con esa información de inquilinos. Así que vamos a salvar eso. No queremos que esto se llame cuando se cargue la página. Entonces vamos a tomar toda la función y pasarla a nuestro proveedor. Guarda eso, y luego iremos a un formulario de inquilino. Y queremos traer a ese proveedor información que indique la información a un componente de formulario de inquilino. Y lo has hecho un montón, ya sabes cómo hacerlo. Es tan simple como const. Agregar renter iguales, usar contexto, contextos blockchain. Y asegúrese de importar contextos de uso desde React e importar el contexto blockchain. Y luego cuando vayamos a onsubmit, vamos a llamar a ese añadir inquilino. Ahora recuerda, solo estamos obteniendo el FirstName y LastName del formulario. Y eso es porque se puede rentar cuando un arrendatario ha creado puede rentar es cierto porque obviamente son capaces de rentar. Activo va a ser falso porque aún no tienen bicicleta. Sólo se están registrando. El saldo va a ser 0. El monto adeudado es 0, y la hora de inicio y fin vamos a ser ceros. Por lo que siempre se pueden configurar desde aquí para que la persona que rellena el formulario no necesite poner información inútil. Entonces en nuestro onsubmit, vamos a hacer esto. Estamos pasando los valores. Vamos a decir valores. Se puede rentar igual a verdadero. Y lo que estamos haciendo aquí es establecer más valores en un objeto. Así que déjame sólo copiar y pegar esto un par de veces. Valores, activo es igual a 0, valores, balance igual a 0. Los valores sí comienzan y terminan. Todo es igual a 0. Oh lo siento, activo es falso. Entonces ceros, ceros, ceros. Así que estamos poblando estos porque siempre van a ser por defecto. Entonces también tenemos que pasar en la dirección de la billetera. Y no queremos que el usuario tenga pasar en un tiempo esa dirección y no la pusimos en el foro, por lo que necesitamos incluir eso también. Para que podamos traer aquí la cuenta corriente desde los contextos blockchain. Y podemos hacer este operador spread para crear un nuevo objeto de valores. Así const nuevos valores objeto. Lo que haremos es que tengamos dirección de billetera. Whoops. Lo que haremos es crear un objeto. El primer valor clave en el objeto será la dirección de billetera, que igualará cuenta corriente. Entonces solo podemos esparcir los valores. En este objeto. Este es el operador de spread. Y lo que esto hace es solo sumar todos estos valores, los que presentaron, incluidos estos dos, este objeto. Es realmente genial. Si la consola cierra sesión nuevo objeto de valores. Veamos cómo se ve esto. A fresco, vamos a poner a prueba Travis, someter y mira esto. Tenemos un objeto que tiene dirección de billetera, FirstName, LastName puede rentar, activo en todas estas otras cosas. Entonces tenemos nuestros valores clave y estamos listos para usarlos. Pero no queremos tener que ser como nuevos valores objeto dot cartera dirección nuevos valores objeto dot puede rentar. Entonces vamos a usar ahora la estructuración D para sacar estos hacia fuera. Así const dirección de billetera, FirstName, LastName, puede rentar. Balance activo. Empieza en, entonces es igual a nuevos valores objeto. Esto es sólo la estructuración. Se saca todos estos valores para que no tengamos que usar esta notación de puntos. Y por último, el último paso es que llamaremos espera aérea, añadir arrendatario pasará todo esto en. De nuevo, si no hiciéramos esta reestructuración, sólo tendríamos que hacer así. Nuevos valores objeto dot wallet dirección nuevos valores u objetos. Entonces esto es sólo un atajo. Puedes hacer eso. Pero creo que esto se ve mucho más limpio. Así que de nuevo, estamos pasando nuestros valores. Estamos agregando estos valores predeterminados a ella. Estamos agregando nuestra dirección de billetera en la creación un nuevo objeto donde D estructurando los valores fuera de él. Y luego los estamos pasando a nuestra función add renter. Impresionante, probemos esto y veamos si agrega un arrendatario. Por lo que voy a decir prueba de Travis y haga clic en Enviar. Y debería traer a MetaMask. Tenemos un error. No se puede leer la propiedad es de longitud de lectura indefinida. Así que agrega inquilino. Sí, hay algún tema aquí. Así que volvamos a aquí en vez de. Pero espera, agrega renta o hagamos un console.log. Guarda eso y mira lo que dice. Prueba de Travis. Tenemos algunos ceros verdadero-falsos indefinidos. Muy bien, entonces el apellido no está definido. Parece que esa es la dirección de la billetera del tema , FirstName. El apellido no está definido. Veamos qué está pasando. Entonces si vamos a nuestro formulario de renderizado aquí abajo. Sí, sabía que lo hice por sentimiento. Apellido. Es como el último capital N. Aquí está FirstName sin la capital N. Voy a volver a poner estos extremos de capital solo para ser consistentes. Así que vamos a destacar todo esto. Y hacer FirstName. Y luego resaltar todos los apellidos. Y hazlo de la misma manera, capital N. Y luego aquí arriba, tenemos que asegurarnos de que tengamos las cosas correctas. Y esos cambian ambos de estos nombre, apellido, y salvan eso. Y ahora deberíamos ser buenos. Tratemos de consolarlo de nuevo. Prueba de Travis, presentar y tenemos dirección de billetera Travis pruebas verdadero-falso 0000. Muy bien, estamos bien. Volvamos a cambiar esto para esperar, agregar inquilino, e intentarlo de nuevo. Refresca solo para asegurarme de tener todo claro. Travis prueba y haz clic en Enviar. Esto debería traer a MetaMask. Y aquí vamos. Mira esa baja tarifa de gas. Eso es genial. Me gusta. Ahora. Le pegaré a Confirmar. Y vamos a ver. Probablemente esté pendiente. Está pendiente ahora y ver cómo esto sigue girando. Esa es la forma de gancho React. El está presentando gancho que agregaron a la forma que mantiene ese giro hasta que esté completo. Ahora, mira eso. Una vez que nos añadieron, detectó el cambio y ahora muestra nuestro dashboard. ¿ No es eso impresionante? Eso es genial. Ahora si actualizo, debería ver mi tablero en su lugar. Entonces conseguí la rueda giratoria y ahí está mi salpicadero. Impresionante. Así que de nuevo, así de nuevo, sólo para recapitular eso, ese tema fue que debimos haber estado usando este camello, minúsculas, primera palabra y luego capital, todas las demás palabras. Eso arruinó nuestro apellido. Entonces acabamos de volver y cambiamos todos estos CamelCase. Cambiar los nombres a CamelCase. Entonces aquí arriba, solo asegurándome de que estamos pasando en la versión CamelCase. Tan gran trabajo. Parece que un tablero está funcionando. Se puede decir si somos inquilinos o no un render. Entonces en el siguiente video, vamos a empezar a poblar estos campos dinámicamente. Vamos a poder acreditar nuestra cuenta, pagar nuestros saldos, y echar un vistazo a las bicicletas. Entonces vamos a hacer un gran empujón en el siguiente video. Y eso nos acercará al final de nuestra solicitud. 8. Rellenar el panel final optimizado: Muy bien, así que redistribuyo mi contrato sólo para poder probar que todo está funcionando de nuevo. Así que voy a poner prueba a Travis y me voy a sumar como arrendatario. Por lo que haré clic en Enviar. Metamask subirá y lo confirmaré. Y una vez hecho eso, debería mostrar mi dashboard. Por lo que actualmente está pendiente. Ahí vamos. Tableros arriba. Entonces antes de presionar a través de todos estos valores, que en realidad no tardarán tanto como pensarías porque son contratos inteligentes realizados todo el trabajo. Antes de que realmente hagamos eso, hay dos cosas que quiero abordar. En primer lugar, tenemos un poco de bicho. Entonces si abro mis herramientas dev, así que si vengo aquí a MetaMask en desconectar mi billetera. Entonces desconéctate y luego actualiza. Verás que el spinner solo seguirá girando y girando y girando y girando. Y nada se cargará. Tenemos que arreglar eso. Y la forma en que arreglamos eso es llegamos al tablero de instrumentos y recordamos ponemos esto si else-if mas ternario aquí. Bueno, necesitamos agregar una condición más. Entonces si el problema es, si el arrendatario existe es nulo, entonces el spinner gira. Pero si no tenemos una cuenta conectada, entonces el arrendatario existe, va a ser no. Entonces el spinner siempre va a girar hasta que conectemos una billetera. Entonces para arreglar eso, solo ponemos otra condición aquí. Ponemos final cuenta corriente. Lo que hace es que lo haga para que si el render existe sea nulo y haya una cuenta corriente, entonces muestre el spinner. Entonces si no hay una cuenta corriente, no va a mostrar el spinner porque ambos no igualarán. Y luego pasará a comprobar si existe el arrendatario, cuál no lo hará, y mostrará el formulario del arrendatario. Entonces solo agrega esa cuenta corriente y guárdala. Vamos a intentarlo de nuevo. Así que déjame refrescar. Y en realidad necesito traer eso. Por lo que aquí arriba en mi contexto, hay que decir cuenta corriente para que pueda acceder a ella. Entonces lo guardaré. Y deberíamos ser buenos ahora. Sí, ahí vamos. Mi billetera no está conectada y está mostrando mi forma. Ahora eso no va a hacer nada. Si lo lleno, va a arrojar un error. Si pongo algo así, va a arrojar un error porque obviamente no tenemos una billetera conectada. No podemos hablar con la blockchain o el contrato inteligente. Así que sigamos adelante y conectemos su billetera. Conectar. Y ahora se mostrará mi tablero. Ahora lo segundo que queremos abordar es ese tema que estábamos teniendo en el último video. Ahora recuerda, cada vez que llamamos a la cuenta corriente en estas funciones, el valor aún no se había poblado en el estado, por lo que arrojaría un error. Y lo combatimos agregando cuenta corriente en nuestro efecto de usuario. Entonces cuando eso cambiara, llamaría efecto Hughes otra vez. Entonces obtendríamos nuestro valor. Así que recuerda que tenemos cuenta corriente está en blanco y luego obtenemos un error porque estamos llamando a un valor que aún no existe en ellos y que se llena, entonces funciona. Entonces hablamos de eso en nuestro último video y vamos a arreglar eso ahora. No queremos lanzar un error cada vez antes de que realmente se ejecute. Entonces la forma en que voy a abordarlo en esta aplicación es simplemente envolverlo en una declaración if. Así que en cualquier lugar que busquemos obtener la cuenta corriente, como aquí, me voy a deshacer de este registro de consola en cualquier lugar que busquemos para obtener esta cuenta corriente. Voy a envolver en una cuenta si corriente. Entonces si eso existe, sólo ejecuta esto. Voy a ir a mi siguiente función que usa cuenta corriente. Y también voy a envolver eso. Si cuenta corriente entonces solo haz esto, haz estas cosas. Creo que esos son los dos únicos en este momento. Lo que eso hace es cuando esto carga y viene aquí y trata de conseguir el arrendatario o realmente comprobar si el arrendatario existe y llama render existe en cuenta corriente aún no está establecido en los lanzamientos ese error. Esta vez, comprobará si esa cuenta corriente se establece primero. No lo será, así que se saltará esto. Y luego aquí abajo en el efecto estadunidense cuando se llama, recuerda que lo pasamos aquí. Entonces cada vez que esto cambie, volverá a llamar efecto Hughes. Siempre que eso suceda, volverá a llamar a esta función. Y esta vez va a funcionar. Ahora si lo guardamos y volvemos y actualizamos, no obtenemos ese error, solo obtenemos esto. Algo ya no se soporta. Y reaccionar 18, que no es gran cosa, tengo que mirar en eso. Pero también tenemos este error de favicon, que podemos arreglar yendo a index.html y simplemente sacando el favicon. Creo que necesito detener o reiniciar mi servidor para que eso surta efecto. Entonces déjame refrescar y ese error se ha ido. Entonces creo que estamos bien para empezar aquí. Lo primero que vamos a hacer es poblar este crédito BNB. Entonces esto es balance aéreo, el saldo de los inquilinos. Entonces si volvemos a nuestro contrato y nos desplazamos hacia abajo, tenemos esta función llamada saldo de arrendatario. Eso es lo que vamos a llamar que va a revisar el saldo aéreo o crédito de Air BnB que hemos puesto en el saldo de la cuenta ERA de Renner. Volvamos a los contextos blockchain. Y hagamos const, const. Un saldo de inquilino equivale a un sumidero. Vamos a hacer un try-catch en el error de registro de puntos de la consola de errores. Entonces aquí sólo vamos a decir que equilibrio const iguales esperan. Usa nuestro objeto contractual y llama al saldo de renta o función. Vamos a pasar en cuenta corriente. Y vamos a envolver esto de nuevo en una declaración if. Si cuenta corriente, entonces sólo hacer estas cosas. Y luego vamos a establecer el estado. Entonces vamos a subir aquí y crear un estado para esto. Entonces vamos a decir const renta, renta o saldo. Set. Equilibrio del arrendatario equivale al estado de uso. Aquí vamos a establecer el saldo del arrendatario. Establece el saldo del arrendatario para equilibrar. En realidad, necesitamos formatear esto porque va a volver de vuelta camino. Por lo que necesitamos formatear esto como lo hicimos con su otro balance que hicimos al principio. Entonces para hacer eso te pones éteres dot utils, punto formato éter. Y pasaremos en equilibrio. Necesitamos que esto se llame cuando se carga el contexto. Entonces lo vamos a añadir a nuestro efecto de usuario. Vamos a llamar a eso y va a estar fijando los estados. Entonces tenemos que pasar esa variable estatal a nuestro proveedor. Entonces pondremos saldo de inquilino. Y ahora eso debería estar disponible para que lo usemos en otro lugar. Entonces entonces tenemos que ir a nuestro tablero. En realidad, los totales actuales es donde tenemos que ir. Totales actuales. Tenemos que traer en contextos aéreos. Entonces hagamos const. Equilibrio del arrendatario es igual. Usar contexto, blockchain, contexto. Impresionante. Ahora asegúrate de importar eso en la parte superior. Por lo que deberíamos tener contexto Blockchain y debimos haber usado contextos importantes. Eso está disponible aquí abajo. Ahora en nuestra tarjeta de estadísticas, podemos cambiar este número estático para rentar o equilibrar. Así que vamos a salvar eso. Y vamos a refrescar la página. Y tenemos 0, que tiene que ser correcto porque no tenemos un valor predeterminado establecido. Pero para comprobar eso, vamos a seguir adelante y este crédito funcione el formulario de su cuenta para que podamos seguir adelante y acreditar nuestra cuenta y asegurarnos de que cambie este valor aquí arriba según a cuánto tenemos en el contrato inteligente. Así que vamos a saltar a la forma Agregar a equilibrada. En realidad, tenemos que empezar en los contextos blockchain. Vengamos aquí al fondo. Y vamos a llamar, si miramos en nuestro contrato inteligente, vamos a llamar a la función de depósito. A ver si podemos encontrar ese depósito. Aquí está. Vamos a llamar a esta función de depósito. Pasamos en nuestra dirección de billetera en su pagadero. El hecho de que sea pagadero significa que también podemos enviarle una cantidad de éter o B&B o lo que sea que estemos enviando eso será enviado en un objeto, que te mostraré en un minuto. Entonces tenemos depósito, también es pagadero y va a sumar esto al contrato inteligente, pero acredita la cuenta de inquilinos que está en esta dirección de billetera. Entonces llamemos a esta función de depósito. Volvamos al contexto blockchain. Y sólo voy a copiar esta función. Y lo voy a llamar depósito. Y puedo eliminar esto si vamos a quitar esto Totalmente. Entonces piensa en esto. Ahora estamos entrando un decimal y queremos convertirlo a pesar o diez a los 1800. Porque en nuestro contrato inteligente, queremos estar lidiando con forma no decimales porque la solidez aún no soporta decimales. Por lo que necesitamos convertir esto de la otra manera. Entonces hemos estado usando Format ether para convertirlo de manera a decimales. Ahora necesitamos usar una función de utilidad para convertir de decimales a pesar. Esa función se llama parse éter. Entonces aquí vamos a conseguir cuando diga const B & B valor. Entonces la cantidad que vamos a estar pasando. Y en realidad pongamos esto como parámetro. Valor. Por lo que el valor de B&B equivale a éteres dot utils. Vamos a formatear este valor de dos vías. Por lo que tenemos que llamar a parse éter. Y pasaremos en el valor. Una vez que tengamos eso, entonces podemos llamar a nuestra función de depósito Const, deposito igual esperan. función interna del punto del contrato se llama depósito. Y vamos a pasar en nuestra dirección de billetera, que es cuenta corriente. Y no necesitamos envolver esto en un if porque esto no se carga en la carga de la página, solo lo busca cuando hacemos clic en el botón. Entonces en ese punto estará bien cargado. Y luego después de la cuenta corriente, aquí es donde podemos pasar en el valor de cuánto estamos enviando al contrato. Y te dije que esto era un objeto. Así que vamos a crear unas llaves rizadas. Y para la clave pondrá valor en. Por el valor, vamos a poner valor b y b porque estamos pasando en esta cantidad aquí. Y luego está este precioso método llamado peso, donde cuando estamos haciendo esta transacción, iniciamos la transacción y queremos esperar hasta que finalice esa transacción antes de pasar a lo siguiente. Entonces para hacer eso, acabamos de poner await deposito, que es lo que definimos anteriormente el peso del punto. Y eso esperará hasta que finalice la transacción. Entonces queremos refrescar el saldo, el saldo de los inquilinos. Entonces una vez que acreditamos la cuenta, queremos actualizar ese número en la página. Y para hacer eso, es bastante fácil. Acabamos de llamar a obtener el saldo del arrendatario. Nuevamente. Este depósito, esto no se llama cuando se carga la página. Sólo se llama cuando presentamos ese formulario. Así que vamos a bajar aquí y enviar esa función al depósito del proveedor de aire. Y luego vamos a saltar a nuestra Agregar a forma equilibrada. Aquí, vamos a ir a la onsubmit y los valores es lo que estamos obteniendo. Echemos un vistazo y veamos de nuevo lo que presenta esto. Así golpeó Save. Veamos cómo se ve este registro a la consola, la prueba y está siendo un poco lento. Ahí vamos. Entonces si pongo 0.1 y lo presento, va a presentar un objeto con clave de saldo crediticio y un valor de 0.1, no necesitamos este saldo crediticio, solo queremos el número solamente. Entonces vamos a estructurar D que fuera por ir const crédito, saldo crediticio es igual a valores. Entonces podemos llamar a esperar deformes de depósito. ¿ Qué fue eso? Esperan depósito, saldo crediticio. Y eso debería ser todo lo que necesitamos hacer. Así que vamos a guardar eso y darle una oportunidad. Siempre me gusta refrescar mi página solo para asegurarme de que estoy empezando de nuevo. Entonces antes de hacer esto, asegúrate de tener algunas pruebas B&B en tu cuenta. Entonces si abro el mío, tengo 1.96. Si no tienes ninguno, solo tienes que ir al grifo de prueba B y B en Google. Da click en la prueba net.finance.org, luego envíate un B&B Puedes enviarte un B&B por día. Aquí acabas de poner en la dirección de tu billetera. Da click dame BNB y haz click en el BNB uno y te lo enviará en como cinco minutos. Es realmente genial. Pero ya he conseguido mi final para hoy así que ya no puedo enviar más. Por lo que voy a acreditar a mi cuenta con 0.1 B&B Así que si hago clic en Enviar, tenemos un error. El depósito no está definido. Eso está en nuestro anuncio para equilibrar la forma es probablemente porque no lo trajimos. Sí, no podemos llamar a depósito porque no hemos traído en nuestro contexto. Entonces vuelve a subir a la cima. Depósito es igual a contextos de uso. Y voy a pasar en el contexto blockchain y asegurarme de que importes estos dos. ¿ El mío lo hace automáticamente? Te lo he dicho un millón de veces, pero solo trato de recordarte. Así que ahora vamos a intentarlo de nuevo. Actualiza la página. Y voy a acreditar mi balanceado con 0.1 B&B Click enviar, y voy a esperar a MetaMask. Muy bien, entonces mi total, así que es un gas muy pequeño v, Por eso me gusta BNB. Es 0.0043 B&B Y tack eso a mi 0.01. Es muy poco gas. Entonces vamos a confirmarlo. Cuando hagamos eso, va a esperar. Recuerda que llamamos a ese método de peso, va a esperar. Y luego cuando eso se haga, debería refrescar el crédito de Airbnb. Por lo que haga clic en Confirmar lo verá aquí. Actualmente está en cubos. Ahora está pendiente. En nuestro spinner spinning debido a esa forma de gancho React , gancho incorporado, creo que se llama está presentando, pero ya verás que nuestro crédito B&B es 0.01 o 0.1 B&B precio. Veamos cuánto es eso. 0.1. B&b es de 38 dólares. Genial. Me gustó ese equilibrio. Eso está funcionando. Ahora vamos a B y B hacer poblar eso. Entonces volvamos al contexto blockchain. Y voy a copiar y pegar esto hasta el siguiente. Si miramos en nuestro contrato, tenemos una función llamada get du. Entonces eso es lo que vamos a llamar get do. No estamos pasando nada. Y entonces voy a eliminar esto rápido en una cuenta si corriente. Entonces vamos a hacer esto kannst du iguals esperan contrato dot get, hacer cuenta corriente. Y luego vamos a establecer el estado. Esto va a ser una especie de patrón recurrente para las próximas funciones. Así que voy a subir aquí y crear una variable de estado llamada do, y luego establecer du es igual al estado U. Para que pueda bajar aquí y hacer poner, hacer, y lo pondré a la cantidad debida que definimos justo encima de eso. Así que no confundas esto hacer con la variable estatal hacer. Y queremos llamar a esto get do cuando se carguen los contextos. Así que consigue du. Y entonces eso va a establecer las variables de estado debido. Por lo que queremos pasarlo a nuestros proveedores para que podamos usarlo en nuestro tablero. Así que solo pasa y hazlo guardar, ve a tu tablero de instrumentos, no a los totales actuales del tablero. Y luego pasa, haz aquí. Entonces vamos a pasar por nuestro contexto. Y luego en el segundo donde es 0.01, sólo vamos a pasar a su debido y guardarlo y ver si eso nos da una cantidad una a través de nosotros un gran error. Y dice que los objetos no son válidos como un niño React, lo que eso significa es que está devolviendo un gran número, que es un objeto. Por lo que en realidad tenemos que analizarlo, se olvidó de eso. Entonces en lugar de, en lugar de hacerlo, necesitamos poner éteres, dot utils, éter de formato de punto. Hacer, y eso debería arreglarlo. Eso nos va a dar nuestra cantidad decimal. Y ya está ahí. Miró a 0, refrescar de nuevo, 0, cool. Y lo probaremos en un minuto. Vamos a seguir adelante y conseguir una configuración de minutos de paseo. Entonces, ¿qué pasa con los minutos de paseo? ¿ Dónde está eso en nuestro contrato? Entonces si volvemos a nuestro contrato, tenemos esta función llamada obtener duración total. Por lo que vamos a llamar a esto, devuelve 0 si aún no han facturado su moto o no la han revisado. L dijo que regresa la cantidad de tiempo que estaban en la bicicleta. Entonces si tienen un tiempo de inicio y fin, se va a calcular aquí. Por lo que necesitamos llamar a esto obtener duración total. Así que de nuevo, voy a copiar esto y pegarlo en. En realidad voy a llamar a esto obtener duración total. Y vamos a dejar esta declaración si. Y vamos a hacer exactamente lo mismo aquí. Vamos a decir const duración total iguales esperan contrato dot obtener duración total, lo cual es una función en nuestro contrato como acabamos de ver. Y luego pasar en la cuenta corriente. Y luego vamos a establecer el estado. Así que subamos aquí. Y justo debajo de esto acaba de poner const, duración, establecer la duración igual a uso estado. Y regresa aquí abajo y vamos a ponerlo. Establezca la duración en la duración total. Y esto realmente va a ser una cuerda. Queremos arrojarlo a un número. Así que vamos a salvar eso. Y también queremos conseguir eso cuando se carga la página porque está en un tablero. Por lo que bajamos a usar Efecto, obtenemos duración total en ese ajuste la duración. Entonces pasemos el valor del estado de duración a su proveedor. Y luego igual que lo hicimos antes, vamos a saltar a los totales actuales y añadirlo aquí, duración para traerlo. Y luego aquí abajo bajo minutos de paseo en lugar de siete, vamos a poner duración. Guárdalo. Refresca mi página, y tenemos a Ryan minutos de 0. Ahora vamos a establecer el estado de esta bicicleta. Entonces la forma en que lo tenía configurado fue esto se va a quedar rojo hasta que revises la moto hacia fuera. Si el si la moto es comprobada de forma activa, va a cambiar a verde. Como Hey, eres bueno para ir, disfrutar de tu bicicleta. Una vez que se registren su bicicleta, su espalda a rojo. Rojo significa que cuando tu moto es facturada de nuevo, no puedes revisar otra hasta que pagues tu saldo. Ahora es posible que desee distinguir entre cuando sí pagan el saldo en, cuando vuelvan a revisar la bicicleta hacia fuera. Puedes hacer eso si quieres. Voy a dejarlo rojo solo por simplicidad. Entonces para hacer eso, tenemos que bajar aquí y ver, sí, estamos poniendo este color de fondo en rojo. Lo que queremos hacer es que queremos saber si están activos o no. Si están activos de lo que queremos ponerlo en verde de lo contrario lea. Así que volvamos. Creo que ya tenemos eso en el aire. Tenemos error. Añadir arrendatario. No, no tenemos en algún lugar aquí. Consigue arrendatario aquí está. Comprobamos si existe arrendatario, si lo hacen, llamamos get renter en poblar que inquilinos estatal variable C donde dice Set renter. Por lo que deberíamos poder bajar aquí y solo pasar el monto del arrendatario. Entonces arrendatario y eso nos debe dar recordar cuando agregamos un arrendatario, nos da la dirección de la billetera, FirstName, LastName puede rentar saldo activo, todo eso bueno. Por lo que deberíamos tener eso disponible. Por lo que debería ser tan fácil como pasar la información del arrendatario, llegar a nuestros totales actuales y agregar arrendatario a nuestros contextos. Y luego en lugar de rojo aquí, diremos inquilino dot activo. Si eso es cierto, entonces queremos cambiar esto a verde. De lo contrario, rojo. Guárdalo. Vamos a probarlo. Entonces tenemos un gran error aquí. Dice que no pueden leer propiedades de undefined. Y lo que eso suele significar es que aún no se había poblado. Entonces lo está revisando esta variable de estado antes de que sea poblada. Entonces lo que podemos hacer es también poner un check in para arrendatario para asegurarse de que arrendatario esté disponible también. Por lo que el arrendatario y el arrendatario está activo en entonces solo se lee el verde. Entonces si guardamos eso, debemos ser buenos. Refrescar el estado de la bicicleta es rojo. Ahora cuando lo revisemos, esto debería volverse verde. A continuación, necesitamos que este formulario funcione para que podamos pagar el monto adeudado. Una vez que hagamos eso y sumamos nuestras bicis probarán que todo esto funciona. Entonces hagámoslo uno a continuación. Así que de vuelta a los contextos blockchain. Y voy a volver a copiar esto, pegarlo debajo de él. Y voy a llamar a esto hacer el pago. Y vamos a pasar en un valor. Porque recuerda que esto es pagadero. Vamos a estar enviando una cantidad con esto. Y echemos un vistazo a la función en nuestro contrato. Entonces en algún lugar debería ser donde estamos haciendo nuestro pago. Aquí, hacer el pago. Entonces aquí está nuestra función de pago. Recuerda que lo resta de nuestro saldo, por lo que hace un pago al contrato y restar esa cantidad de nuestro equilibrado que establece puede rentar de nuevo a true porque ahora puedes volver a rentar una bicicleta. Se establece debido a 0 y inicio y final de nuevo a ceros. Por lo que tipo de hace tu pago y te refresca como estabas al principio. Así que vamos a venir aquí y simplemente llamaremos a la función hacer pago. Y dentro de esta cuenta corriente. Y no necesitamos la cuenta corriente porque de nuevo, solo se ejecuta cuando presionamos el botón. Entonces voy a hacer un poco como lo hice aquí arriba. Voy a copiar tanto. En realidad, sólo voy a copiar todo. Pega. Y así el valor B & B, este es el valor que estoy enviando. Y luego voy a llamar al depósito porque estamos depositando dinero, estamos haciendo un pago. Pero en lugar de llamar a la función de depósito, llamaremos a la función make payment. Pasaremos en nuestra dirección de billetera y la cantidad que estamos enviando, esperaremos hasta que eso se haga. Entonces tenemos que hacer varias cosas aquí. Así que recuerda en nuestra función de contrato, estamos haciendo un montón de cosas. Estamos restando de nuestro equilibrio. Estamos cambiando podemos rentar de nuevo a true en todos estos dos ceros. Entonces necesitamos refrescar un par de cosas. Cierto, bajo esto, vamos a llamar a un peso get renter. Porque necesitamos refrescar a nuestro inquilino. Tienen nuevos valores ahora, la puede rentar el saldo. Todo eso se refresca. Por lo que necesitamos refrescar al arrendatario. Necesitamos refrescar el get rent o balance. Necesidad de refrescar eso porque nuestro equilibrio va a cambiar. Tenemos que refrescar la duración porque tuvimos un motín de diez minutos. Necesitamos eso para volver a 0, así que necesitamos refrescar eso. Así que espera, obtén duración total. Y luego finalmente necesitamos refrescar la cantidad adeudada. Así que espera, consigue hacer, porque eso también va a ser 0. Y esto sólo se ejecuta cuando presionamos un botón. Entonces vamos a pasar la función al proveedor. Y luego vamos a ir al formulario de pago. Y traer en nuestro contexto. Canst, hacer el pago equivale a usar contexto. En nuestro contexto están los contextos blockchain. Por lo que de nuevo, asegúrate de importar ambos entonces en aire en nuestra cumbre. Así que probemos primero nuestro Enviar, a ver si funciona. Entonces paga tus cuotas 0.1 presentar, y ahí está. Así que de nuevo, queremos estructurar esto para apenas obtener el 0.1. Para ello, diremos const pago. Creo que eso es lo que usamos aquí abajo. Sí, el pago D es igual valores y luego podemos llamar await, hacer el pago. Pago, pago. Déjame guardarlo y podríamos probarlo, pero no tenemos ningún Mountain Dew. Así que también saltemos a nuestras bicis y hagamos que esos botones funcionen. Entonces de vuelta en el contexto blockchain, agreguemos dos funciones. Uno va a ser llamado checkout, const, check out es igual a un fregadero. Y el otro va a ser llamado check-in. Entonces vamos a echar un vistazo a la moto. Vamos a volver a chequear en la moto. Y vamos a hacer un intento de atrapar. Console.log el error. Aquí adentro. Diremos si la cuenta corriente hace ese cheque, entonces solo ejecutar esto hará ese cheque. Si eso es cierto, sólo ejecuta esto. Por lo que vamos a empezar con const checkout iguales esperan punto contrato. Y veamos qué tenemos. Por lo que tenemos un checkout y tenemos un check-in. Y notarás en el checkout, probablemente queremos refrescar al arrendatario porque van a tener nuevos valores. Y luego en el check-in, hay muchas cosas pasando. Estamos cambiando algunos valores del arrendatario, pero también estamos fijando el monto adeudado. Entonces estamos calculando cuánto se debe y vamos a establecer eso. Necesitamos refrescar estos valores. Entonces contratos, punto, check out, cuenta corriente. Vamos a esperar a que termine la transacción , checkout dot weight. Y luego vamos a llamar a get renter para refrescar eso. Aquí abajo. En realidad voy a copiar esto, pegarlo en. Aquí. Diremos check in, contrate dot check in. Entonces vamos a esperar el check-in. Entonces vamos a llamar a get renter. Vamos a llamar get debido a refrescar ese valor y obtener la duración total porque necesitamos establecer eso de nuevo a 0. En estos, al igual que los otros son botones que presionas. Entonces vamos a pasar las funciones reales a nuestro proveedor. Y en realidad no necesito esto si cuenta corriente porque es una pulsación de botón, no va a suceder en la carga de la página. Entonces vamos a mover estos hacia atrás y guardarlos. Y voy a pasar el checkout y y el check in a mi proveedor. Y luego vamos a ir a la bici del tablero. Ahora va a ser bicicleta. Ahí vamos. Así que vamos a llevar en el contexto a nuestro componente de bicicleta. Entonces const, echa un vistazo, check n es igual, usa contextos, contextos blockchain, trayendo tus importaciones. Y lo voy a salvar. Ahora hay una cosa de la que deberíamos hablar. Una cosa que puedes hacer con tu contrato es cuando echa un vistazo a esta bicicleta, puedes tenerla guardada el nombre a tu contrato o en tu estado o algo así. Para que pudieras mostrar aquí arriba el tipo de bicicleta también que revisaste. No quería que esto fuera demasiado complicado y quería dejar algunas cosas para que fueras creativo y hacer tu propia app fuera de ella. Pero todos estos checkout y check-ins van a hacer lo mismo. Entonces si reviso esta moto, es lo mismo que echar un vistazo a esta moto. No tenemos que diferenciar qué moto estamos comprobando. Entonces va a ser lo mismo y cada uno de estos componentes de bicicleta. Para el checkout, voy a añadir un on-click. Es igual a checkout. Y para este botón, el botón de check-in, agregaré un on-click diciendo check-in, llamando a mi función de check-in. Y luego lo guardamos. Y creo que somos buenos para esos. En realidad podemos probarlo. Así que actualiza mi página. Y voy a tratar de revisar una bicicleta hacia fuera. Ahora hay muchas cosas que van a pasar aquí que podemos probar. Así que en primer lugar, voy a echar un vistazo a esta moto. Muy bien. Y me cobra una tarifa de gas muy minúsculo. Precio B&b. Veamos cuánto es eso en realidad. Es como 27, gas v es $0.20. Me alegro de usar BnB, a pesar de que es testimonio. Entonces déjame volver a MetaMask. Déjame confirmarlo. Entonces lo que va a pasar aquí es cuando lo confirme, este estatus debe volverse verde. Y debería establecer un montón de cosas que dijimos en nuestro contrato como, puede rentar debe ser falsa, La hora de inicio del aire debe estar documentada, debe haber una marca de tiempo para eso y todos que, ya sabes, el contrato igual de bien como yo, ya sabes, lo que va a pasar. Por lo que puedo hacer clic en Confirmar. Ahora está pendiente. Una vez hecho ese pendiente, esto debería volverse verde, así que ten cuidado con eso. Eso se hace. Y somos verdes. Mira eso. O se echa un vistazo a la bicicleta. Y lo que queremos hacer ahora es esperar unos seis minutos, algo más de cinco minutos, y luego lo revisaremos de nuevo y veremos que todo suceda correctamente. Entonces es 1157 aquí. Así que voy a volver a como 1203 y volveremos a facturar en ese momento. Deberíamos tener minutos de paseo de como seis minutos. Deberíamos tener una cantidad de B&B. ¿Recuerdas 0.05 cada cinco minutos. Y a partir de ahí deberíamos poder pagar o hacer pagar eso abajo a 0 y tener nuestro crédito B & B reflejar la diferencia. Entonces te volveré a ver en unos cinco minutos. Muy bien, por lo que ya casi es hora de revisar mi moto back end. Antes de hacer eso, voy a revisar mis variables de estado solo para ver que las cosas cambiaron correctamente. Entonces ve a los componentes. Verás que puede rentar es en realidad falsa ahora porque está chequeado, por lo que funcionó bien. Y entonces cierto, activo es cierto. Esos funcionaron muy bien. Y todo está funcionando correctamente. Muy bien, así que han pasado unos 78 minutos. Entonces lo que vamos a hacer es volver a revisar la moto. Cuando hagamos esto y esta transacción termina, debería tener mi estado de bicicleta debe ir a leer mis minutos de paseo deben ser poblados con cuánto tiempo estuve en la bici en mi B&B hacer debe ser poblado también. Así que intentemos eso. Así que voy a hacer clic en check-in y confirmarlo en MetaMask. Y revisemos ese estado. Entonces eso está pendiente. Cuando esto se haga, deberíamos tener valores poblados. Muy bien, genial. Por lo que el estado de la bicicleta volvió a rojo. Yo estaba fuera siete minutos en mi B&B do es 0.005, que es correcto. Si estuviese 12 minutos, tendría 0.01. Recuerda que es 0.005 cada cinco minutos. Tan grande. Por lo que la prueba final aquí es puedo pagar el monto adeudado y hacer que restablezca esto y deducirlo de mi crédito B&B. Nuestro estado en este momento se puede rentar sigue siendo falso porque no he pagado mis cuotas. Y activo es falso porque ya no estoy activo en la bicicleta. Entonces pongamos en montura hacer 0.005 y tratemos de pagarlo. Por lo tanto presentar y estamos haciendo un pago de 0.005 y luego tarifas de gas. Así golpeó Confirmar y esto va a estar pendiente, pero una vez hecho esto, mis hombres de paseo, debería ser al 0. Mi B&B do debe ser un 0 y mi crédito debe deducirse el monto que pagué. Acaba de pasar por Reimann, es 0. B&b hacer no es nada. Y el crédito B&B es tanto. Entonces 0.01 menos 0.05 es 0.095. Por lo que todavía tengo algún crédito. Todavía puedo echar un vistazo a otra bicicleta en nuestra app está funcionando maravillosamente. Entonces en el siguiente video, vamos a hacer un poco limpieza y vamos a agregar un par de características de seguridad que no agregamos desde el principio. Una vez hecho eso o Apple esté terminado. Podrás presumir todo tu trabajo. Te veré en el siguiente video. 9. Optimizar las comprobaciones de UI y seguridad: En este video, vamos a estar poniendo los toques finales a nuestra aplicación. Al envolver las cosas, vamos a empezar mostrando estos requieren mensajes en nuestro front-end. Entonces si recuerdas, en nuestro contrato inteligente tenemos estos requieren declaraciones de que si no son ciertas, entonces escupimos este mensaje. Tenemos que mostrarlos en la parte delantera. Entonces vamos a trabajar en eso. Después de eso, vamos a implementar algunas características de seguridad para que los inquilinos no puedan interferir con la información de otros inquilinos y también algunas cosas de los propietarios que es realmente importante. Así que empuja a través de esta lección porque va a haber mucha diversión. Y como siempre antes de empezar con esos, tenemos que arreglar un par de bichos. Vamos a arreglar uno simple por adelantado y otro más adelante en el video. En el primero va así. Entonces si abres tu contexto blockchain, y es posible que ya hayas notado esto. Si abres tu contexto blockchain y lo guardas, entonces este tablero cambia al formulario de inquilinos de anuncios, lo que significa que estamos perdiendo nuestro estado de alguna manera. Entonces si vas al contexto blockchain y lo guardas, verás eso, oye, ahora tenemos el formulario de agregar inquilinos. Si vas a tu tablero y simplemente haces un console.log, arrendatario existe, verás el problema. Así que guarde eso. Y voy a refrescar la página. Y voy a salvar mi contexto blockchain. Tan pronto como lo hagas, ves por aquí en la consola dice Hot updated, lo que significa que Vijay S es Hot Reload pasó y luego ese valor no está definido. Se ve justo arriba es cierto. Pero tan pronto como suceda esta recarga, es indefinida. Ahora he intentado encontrar una buena solución para esto, y estoy convencido de que solo tiene que ser algún byte JS bug o algún problema con Vijay S simplemente no sé, pero tengo una solución fácil para nosotros, uno que no nos impactará mucho en absoluto. Tiene que ver con un plugin que usa Vijay S. Entonces si vas en la carpeta raíz y vas a vite dot config dot js. Ahí está este plugin reaccionar plugin. Entonces lo estamos importando aquí arriba y lo estamos usando aquí con React. Ahora dentro de esto, sólo tenemos que desactivar la actualización más rápida. Y lo haces escribiendo esto un objeto de clave, actualización rápida, valor false. Entonces estamos deshabilitando la actualización rápida. Si guardamos eso y ahora vamos a refrescar esta página, en realidad refrescado de todos modos. Ya no deberías tener ese problema. Así que voy a ir al contexto blockchain, contexto, y voy a guardarlo aquí. Y lo voy a guardar en mi página, solo se refresca sin perder el estado. Entonces esa es una solución simple. Agrega eso en tu archivo de config y podemos seguir adelante. Ahora, solo una palabra de precaución si estás haciendo cambios en la interfaz de usuario y quieres verlos al instante, creo que necesitarás volver a habilitarlo, pero actualmente hemos terminado con cambios en la interfaz de usuario. Entonces no necesitas preocuparte por esto, pero solo quería anotarlo. Nuevamente. Si encuentra una solución, por favor háganme saber. O si encuentro uno mientras tanto, lo pegaré debajo de este video. Muy bien, entonces primero, como dije, queremos agregar estos mensajes de error cuando tengamos errores. Entonces si volvemos a nuestro contrato, recuerdas que tenemos estos requieren declaraciones que digan cosas como No le tienes nada en esta ocasión, no tienes suficientes fondos para cubrir pago, cosas así. Entonces si el usuario intenta hacer algo que no se le permite hacer, lo que debería aparecer un mensaje de error. Entonces, por ejemplo, si tratara de pagar, podría hacer cuando no tengo nada debido. Entonces 0.1 y lo someto, obtengo este error por aquí en la consola. Aquí está este objeto. Entonces dice mensaje de código, pila de datos. Todas estas cosas buenas. Entonces si abrimos eso, verás que tenemos este objeto de datos. Y si abrimos eso, ahí hay un mensaje que dice que la ejecución se revertió. No tienes nada debido en este momento. Eso es lo que queremos sacar en pantalla en la página. Entonces para hacer eso, sólo tenemos que agarrar esos valores específicos. Entonces si voy a hacer el pago, que es lo que estamos llamando en este momento, en mis contextos blockchain. En lugar del error console.log, vamos a decir Error dot data. Recuerda que ese fue el mensaje de punto objeto. Así que guarde eso y vamos a intentarlo de nuevo. Permítanme refrescar 0.1 y enviar, y sólo debería ver el mensaje aquí está. Ejecución revertida. No tienes nada debido en este momento. Por lo que ahora sólo tenemos que mostrarlo en la página. Bueno, uno de mis paquetes favoritos y reaccionar es el brindis defy. Testificar se utiliza para alertar al usuario sobre ciertas acciones. Y hay un millón de formas que puede mostrar. Se puede deslizar en la página. Puede hacer todas estas cosas, pero sólo vamos a mantenerlo simple. Entonces si vas a testificar, reacciona debe haber un paquete NPM aún reaccionar para testificar. Es muy fácil de configurar. Puedes ver aquí mismo todos los diferentes mensajes que puedes usar. Se puede hacer hilanderos. Puedes ponerle iconos. Tienes diferentes colores, muchas opciones. Entonces para instalarlo acaba de conseguir un hilo y reaccionar para justificar o instalar NPM. Así que detenga su servidor, instálelo, y luego inicie la copia de seguridad de su servidor. En lo que vamos a hacer es que lo vamos a mostrar a través del mismo contexto aquí, los contextos blockchain. Normalmente querrías crear un nuevo contexto para esto. Como un contexto phi tostadora. Configura eso y usa eso solo para alertar sobre mensajes y errores. Pero si empiezo a hacer eso, entonces vamos a conseguir otro video de hora de solo configurar mensajes de error. Así que vamos a hacerlo con facilidad aquí. Pero si estuvieras en un proyecto más grande y quisieras ponerle más tiempo, por supuesto uno querría usar un contexto separado. Entonces si nos fijamos en nuestra documentación para React testificar, voy a hacer click en la demo y en la documentación. Y ya verás aquí, solo echaremos un vistazo a tostadas de posicionamiento. En realidad, vayamos al siguiente porque eso no es muy útil. Pero lo que hay que hacer aquí es que necesita poner este contenedor de tostadas en el, en la página que desea mostrarlo. Y luego puedes llamar a la función de tostadas. Para que puedas ver eso mejor aquí. Entonces Toast dot éxito, y luego tienes tu notificación, lo que quieras decir, y luego eliges tu posición en la página para mostrarla. Puedes hacer un brindis para acceder a un error, una orden e información, o algún tipo de brindis personalizados. Entonces vamos a empezar poniendo este contenedor de tostadas. Bueno en realidad eso es importado. Vamos a poner esto en la página actual de totales porque tenemos los dos formularios ahí. El en el que acreditamos nuestra cuenta, la en la que realizamos un pago. Entonces ve a los totales actuales. Entonces en la parte superior, quieres simplemente poner esta declaración de importación, importar contenedor de tostadas. Entonces voy a agarrar este ejemplo. Y me voy a desplazar hacia abajo y luego al fondo. Así que aquí está mi función de totales actuales abajo en la parte inferior debajo de la caja, para que no tenga ningún tipo de estilo con él. Voy a simplemente poner que los dedos de los pies contenedor auto cierre se establece en ocho segundos. Voy a cambiarlo a, hagamos 3 mil por tres segundos. Y luego tenemos varios padres aquí. Entonces tenemos que poner una etiqueta vacía. Uno en la parte superior, otra en la parte inferior. Mi contenedor de tostadas está en esa página. Entonces, cuando se llama, debe mostrarse en esa página. Ahora voy a volver a los contextos blockchain, y lo voy a llamar aquí con esa llamada de error de punto tostado. Por lo que voy a volver al posicionamiento y al error de puntos tostados. Así que voy a sacar este mensaje de registro de puntos de consola y simplemente reemplazarlo con este error de punto tostado, que de nuevo encontrarás en la parte de tostadas de posicionamiento de esta página. Entonces para mi notificación de error, voy a poner datos de punto de error, mensaje de punto. Y quería entrar en la parte superior derecha. Así que vamos a salvar eso. Ahora hay una cosa más que tienes que hacer. Tienes que importar el CSS o no se verá adecuado o incluso funcionará correctamente. Así que sólo sube a comenzar la instalación. Y no lo mencionan aquí con la instalación, pero lo verás importado aquí. Entonces copia eso. Y queremos importar eso en la página de totales actuales del aire porque ahí es donde estamos mostrando ese contenedor de tostadas. Entonces arriba en la parte superior, trae eso, adentro, guárdalo. Y probemos esto. Entonces voy a refrescar la página solo porque me gusta hacer eso. Ahora pondré solo el número uno y presentaré. Y vamos a ver si tenemos un mensaje de brindis. No lo hacemos, porque el brindis no está definido. Así que volvamos a nuestro ejemplo y asegurémonos agarrar tostadas de importación de reactores a fuego. De vuelta en el contexto de blockchain de aire, poner eso en la parte superior. Tostadas de importación. quitar el contenedor de tostadas porque no estamos usando eso aquí. Sólo estamos usando los dedos de los pies porque estamos llamando al error de tostadas. Así que guarde eso y vamos a intentarlo de nuevo. Así que refresque. Muy bien, y voy a poner el número uno y presentar, y deberías ver algo pop en la parte superior derecha. Ahí está. Ejecución revertida. No tienes nada debido en este momento. Parece que colgó ahí un segundo, pero se supone que desaparezca en tres segundos. Pero eso es genial. Entonces alguien entra y somete le hará saber que no tienes nada que ver con esta vez. Agreguemos uno a nuestro formulario de crédito. Entonces get du pondrá lo mismo ahí. Puedes personalizar estos como quieras. Hay un millón de formas de hacerlo. Ve a esto. ¿Dónde está en los reactores desafían Demo. Hay como todo tipo de cosas que puedes ver error de advertencia de éxito de información. Pero sí, puedes seleccionar cuál quieres ver. Y luego haz clic en Mostrar tostadas, y te mostrará cómo se ve. Diferentes temas. Aquí está el tema oscuro y el tema de color. Bastante genial si estás usando, si estás usando promesas, puedes decir promesas pendientes y luego prometer resueltas. Un montón de cosas geniales. Entonces voy a agarrar esto y agregarlo al formulario de acreditación. Entonces el depósito. Y voy a guardar eso y en realidad eso no va a error. No sé si tenemos algo para el pastel. No tenemos nada para el depósito. Pero encontremos otra cosa. Hacer el pago, conseguir inquilino, check in, Hagamos check-in y check-out porque aquellos ambos tienen requieren estados de cuenta. Volvamos. Por lo que voy a retirar eso del depósito. Se irá al check-in y check-out y lo agregará allí. Impresionante. Entonces si traté de facturar una bicicleta que no tengo, creo que voy a recibir un error. Permítanme confirmarlo. Check-in. Por favor, echa un vistazo a una bicicleta primero. Sí, vamos a ver si tenemos algo ahí. Así que voy a elegir en realidad déjame refrescar solo a hábito mío e ir a check in. Y ahí está. Por favor, echa un vistazo a una bicicleta primero. Impresionante. Entonces tenemos mensajes y siéntete libre de retocar que sin embargo quieras ponerlo en un lado diferente, añadir algunos colores diferentes, hacer un tema oscuro, lo que sea. Por lo que creo que las cubiertas de aire requieren declaraciones. Tenemos checkout, tenemos que facturar la adquisición requiere, tenemos que hacer el pago. Y eso es todo. Entonces eso es reaccionar para justificar han añadido. Ahora lo siguiente que queremos hacer es agregar algunas características de seguridad al aire Smart Contract. Entonces teóricamente si tengo dirección de billetera pública de otra persona y puedo insertar eso en algunas de estas funcionalidades. Entonces puedo echar un vistazo a una bicicleta para alguien más a cargo, dinero a la cuenta de otra persona. Puedo hacer cosas a la cuenta de otras personas. No hay cheque que decir, oye, solo puedes interactuar con tu dirección. Y no creo que en general nada en el front-end puedas hacer eso como no creo que pueda venir aquí y hacer clic en checkout y agregar la dirección de la billetera de otra persona. Pero aún así quieres poner esos cheques ahí. Y creo que es bueno pasarlo solo para que veas que si vas al contrato de la cadena de bicicletas, déjame darte un ejemplo. Si voy a checkout y conozco la dirección de la billetera de otra persona, puedo poner su dirección y echar un vistazo a una bicicleta y luego puedo dejarla funcionando durante una semana y luego volver a comprobarla. Y entonces tenían este enorme equilibrado ¿ no tenían parte en correr? Por lo que sólo queríamos poner un cheque que diga, oye, sólo se pueden realizar estas acciones en su cuenta particular. Y es realmente fácil de hacer. Simplemente insertamos un modificador. Entonces justo debajo de Agregar arrendatario, voy a decir modificador. Whoops. Voy a decir que el modificador es inquilino. Y luego voy a pasar en una dirección mientras que en la dirección. Y luego pones estos corchetes y dices requerir mensaje dot remitente equivale a dirección de billetera en ella. Eso no es cierto. Dirás que solo puedes administrar tu cuenta. Entonces justo debajo de eso, tienes este punto y coma de subrayado. Y lo que eso significa es continuar con el resto de la función. Entonces, cómo funciona esto es aquí abajo. Para esta función de pago, se agregaría aquí mismo es arrendatario. Este es un modificador y pasarías en el while en la dirección. En esta es una forma de una forma limpia de agregar un repetible require declaración dos funciones. Entonces cuando se ejecuta esta función, se va a revisar primero, si esto es arrendatario, va a pasar en esta dirección de billetera y va a decir, hace el remitente del mensaje, el persona que realiza esta llamada, coincida con la dirección de la billetera, lo que significa que sólo pueden modificar su propia cuenta. Así que cuando creas un modificador, solo lo engancha a la función. Y te mostraré cómo funciona eso en un minuto cuando lo lancemos en remix. Pero tenemos que agregar eso a todo lo que estamos agregando una dirección de billetera también. Entonces voy a ponerlo aquí abajo en el check in. Solo puedes facturar una bicicleta con tu dirección. Nadie más renta o tiempo es interno. No tenemos que preocuparnos por eso. Obtener duración total. Solo quieres obtener tu propia duración. Y como éste devuelve algo, vamos a poner esto justo después del público. Y entonces éste también devuelve algo y es público. Pero este es el conseguir el saldo del contrato. Sólo queremos que el dueño haga esto y vamos a tratar con esto a continuación. Pero consiga el saldo de los inquilinos, solo puede obtener su propio saldo. Ponga eso después de la cantidad debida fijada pública. Esto es interno, No hay problema. Llámalo fuera del contrato, puede alquilar una bicicleta, ponerla ahí, depositar. Sólo se puede depositar a través de su propia dirección, aunque a la gente le gustaría que depositara a la suya. Realizar el pago. Tack eso al final. Conseguir ponerlo ahí. Consigue arrendatario. Sólo puedes obtener tu propia información. Y existe el arrendatario, ponlo ahí también. Entonces todo esto está haciendo de nuevo, en lugar de poner una declaración require repetidamente en cada uno de estos, solo estamos poniendo este modificador en esta declaración de función aquí mismo antes de las llaves rizadas, solo estamos agregando este modificador. Estás modificando la función para cumplir con estos requisitos. Muy bien, entonces ese es el modificador del arrendatario. Ahora tenemos dos cosas más y estaremos todos hechos. En primer lugar, tenemos que arreglar un error. En segundo lugar, tenemos que hablar del propietario. El propietario debe ser capaz de ver cuánto dinero es en realidad suyo o el suyo. Y deberían poder retirar las ganancias que han hecho de estas transacciones. Así que vamos a arreglar el error primero. Ahora recuerdas hablábamos de la logística detrás del contrato inteligente. Si alguien deposita dinero, va al contrato inteligente, pero acredita su cuenta. Entonces si alguien pone en 10 dólares ahí, la única persona que pone dinero, ponen en $10. Hay 10 dólares en el Contrato Inteligente, pero los diez de eso se acreditan a su cuenta. Ahora, gastan 5 dólares en una bicicleta y hacen un pago, entonces todavía hay 10 dólares en el contrato, pero sólo cinco de eso se les acredita. Bueno, cometimos un error con hacer el pago. Cuando hacemos un pago, en realidad sólo estamos restando esa cantidad del saldo. En realidad no estamos enviando dinero al contrato. Sólo lo estamos restando del saldo en el dinero que queda es el dinero de los propietarios. Por lo que no podemos hacer a pagar aquí y no podemos usar el valor del punto del mensaje. De hecho, en realidad en los contextos blockchain, cuando hacemos un pago, estamos enviando dinero, este valor BNB. Entonces eso es un error. No deberíamos hacer eso. Deberíamos simplemente restar del crédito. En el contrato inteligente, hay un par de ajustes que necesitamos hacer. En primer lugar, sacar a pagar porque ya no hay una función pagadera. Segundo, Vamos a poner un segundo, vamos a poner una U y cantidad. Entonces vamos a enviar una cantidad. Cuando hacemos un pago, necesitamos enviar una cantidad que realmente va a ser deducida de nuestro saldo. Entonces tenemos una cantidad aquí. Y luego vamos a cambiar este valor de punto de mensaje a monto porque en realidad no estamos enviando dinero, solo estamos deduciendo de nuestro saldo. Y eso debería ser todo. Entonces cuando ejecutemos hacer el pago, vamos a probar esto en un minuto. Vamos a enviar una cantidad y esa cantidad va a ser deducida de nuestro saldo. Entonces debido a que eliminamos el factor pagadero en agregado un parámetro de monto uint8, necesitamos actualizar nuestra función de contexto blockchain aquí y hacer el pago. Estamos pasando este objeto de valor, que es cómo se ocupa de una función pagadera. Es así como pasamos un monto a una función pagadera. La única diferencia porque estamos trayendo el monto ahora como un uint8 y no esa cantidad pagadera, solo necesitamos reemplazar este objeto con el valor de B&B como segundo parámetro o el segundo argumento. Así que asegúrate de actualizar eso en el contexto blockchain y luego saltar de nuevo a tu contrato. Ahora que segue está perfectamente en el dueño. El dueño, si alguien tiene $10 y pagan $5 en su cuenta, tienen $5 sobrantes en los otros cinco en realidad pertenece al dueño. Por lo que tenemos que permitir que el dueño del contrato que básicamente va a estar corriendo la tienda de bicicletas revise su saldo. ¿ Al igual que cuánto son sus ganancias? Cuánto de la, todo el dinero en el contrato inteligente, cuánto de eso se atreve, basado en la gente corriendo facturas y haciendo pagos y recreando su cuenta y todo eso. Entonces hay un par de formas en que podemos hacer esto. Pensé en. Entonces usamos mappings. No se puede recorrer un mapeo. Pensé en tal vez cuando agregamos un arrendatario para crear una matriz y solo tener una matriz de direcciones que podemos recorrer. Pero realmente no queremos recorrer cosas porque podríamos terminar teniendo cientos, tal vez miles de inquilinos y eso va a ser monstruosos honorarios de gasolina. Si llegamos a recorrer a través de 11000 inquilinos, creo que la mejor manera de abordar esto es crear una nueva variable llamada uint8, balance propietario. Por lo que tenemos equilibrio propietario. Y si lo piensas, la única vez que el dinero entrará en el saldo del propietario es cuando la gente haga pagos. Nuevamente, si tengo $10 en el contrato inteligente y los diez de eso es mío y hago un pago de $5, entonces mi saldo baja a cinco y los otros cinco pertenecen al dueño. Entonces esa es realmente la única vez que necesitamos estar agregando al saldo propietario. Entonces aquí abajo donde hacemos el pago, sólo vamos a sumar una cosa más bajo esto. Va a ser. Saldo propietario más es igual a cantidad. Así que eso se va a acreditar a este saldo propietario. Y luego copia de seguridad aquí donde tenemos el saldo de, queremos que esto sólo sea llamado por el propietario. Así que vamos a crear otro modificador, modificador, único propietario. Y ahí no tenemos ningún parámetro. Y podemos requerir que el mensaje punto remitente equivale a dueño. Porque esa es una dirección de billetera. Y no se te permite el acceso para acceder a esto. Y luego haremos nuestro punto y coma de subrayado para ejecutar el resto de la función. Y usaremos solamente dueño en balance aéreo de aquí mismo en el dueño. Si queremos sumar dos funciones relacionadas con el propietario más, una para obtener su función balanceada o su balance, consiga el equilibrio del propietario. Y vamos a hacer ver público y hagámoslo único propietario y devuelve un uint8. Y aquí sólo vamos a devolver el saldo propietario. Y luego queremos hacer una función más para que el propietario retire el dinero. Ahora puedes ser como, hombre, eso es arriesgado porque el dueño solo puede arrancar el dinero de todos y correr con él. Pero eso no es cierto porque el saldo propietario es sólo el dinero de la cuenta que no se acredita a la gente. Así que hagamos función. Retirada, saldo propietario. Esto va a ser pagadero y público. Y vamos a decir dueño de transferencia de puntos, equilibrio propietario. Ahora ves que aquí tenemos este error. Y dice Enviar y transferencia sólo están disponibles para objetos de tipo dirección pagadero no dirección. Ahora podemos arreglar esto solo echando a este dueño S pagadero. Entonces, por último, tenemos que volver a establecer el saldo del propietario a 0 porque estamos transfiriendo ese saldo propietario, que está configurado en la parte superior. Fuiste equilibrio propietario. Estamos transfiriendo esa cantidad a nuestra billetera. Ahora tenemos que volver a poner eso a 0. Así equilibrio propietario es igual a 0. Y con eso, creo que hemos terminado. Entonces selecciona todo esto y cópialo y lo vamos a pegar en remix para que podamos probarlo. Voy a pegarlo aquí y compilarlo. Y luego hacer esto más grande. Muy bien, así que vamos a desplegar el contrato. Y voy, voy a desplegarme usando la primera cuenta que va a ser el dueño. Entonces haz clic en Desplegar. Entonces agreguemos un arrendatario. Por lo que voy a elegir a la segunda persona. Copiar y ponerlo en esa dirección de billetera. ¿ Quieres poner la prueba Travis? Se puede rentar es cierto. Activistas falsas. Ceros, ceros, ceros 0. Por lo que haremos clic en Agregar arrendatario. Y voy a seguir adelante y echa un vistazo a una bicicleta para ese inquilino. Se echa un vistazo a la bicicleta. Y ahora voy a ir a la tercera cuenta. Entonces va a ser el segundo inquilino que va a copiar eso. Pega aquí. Y pondré algo como Tracy. Y voy a seguir adelante y echa un vistazo a una bicicleta. Bueno, necesito agregarlos primero. Así que asegúrate de tener la dirección correcta para esa tercera persona y agrega al arrendatario. Y luego voy a echar un vistazo a una bicicleta para ese arrendatario. Impresionante. Por lo que tenemos marcas de tiempo, podremos comprobarlo aquí en un minuto. Pero sigamos adelante mientras estamos aquí y depositemos algo de dinero. Entonces voy a elegir un éter y elegiré al segundo inquilino. Y van a depositar un éter al contrato inteligente. Entonces justo aquí donde dice depósito, asegúrate de que este sea un éter y luego haz clic en depósito. Impresionante. Entonces depositaron un éter. Si reviso a ese arrendatario aquí, verás que tienen una hora de inicio, por lo que las bicis salieron y tienen saldo. Ahora qué pasa si trato de cambiar al tercero el segundo inquilino aquí. Y depositar usando la dirección de los primeros inquilinos, debería recibir un error. Así que haga clic en depósito. Aquí vamos. Sólo puedes administrar tu cuenta. Entonces eso es el modificador inquilino está funcionando. Eso es impresionante. Y ese es el caso de uso. Entonces si estoy si estoy depositando dinero, pero lo estoy haciendo desde una billetera diferente a la mía en la cuenta de otra persona. Eso no debería permitirse. Eso funciona. Así que en realidad cambiemos a la persona adecuada. Así que en realidad agarremos la dirección de esa persona y depositemos un éter también. Por lo que voy a hacer clic en depósito. Y no cambié la dirección, así que asegúrate de cambiar la dirección. Así que haga clic en depósito. Ok. Por lo que tenemos que arrendatarios con dos bicicletas comprobadas en cada una. arrendatario ha depositado dinero. Entonces en un par de minutos más, volveré y volveremos a revisar la moto y terminaremos las cosas. Muy bien, así que antes de revisar estos backend, en realidad cambiemos al dueño. Y en realidad ahora en realidad antes de volver a facturar, revisa los bytes de nuevo en, intentemos conseguir el saldo del contrato con uno de los inquilinos. Por lo que haga clic en balance de y se obtiene un error. No se te permite acceder a esto. Consigue el equilibrio del dueño. No se te permite acceder a esto. Así que ahora pasemos al dueño y veamos qué es eso. Si obtenemos el saldo de tenemos tenemos un éter pensé que había depositado otro. Revisemos a nuestros inquilinos y veamos. El primer arrendatario ha ganado. El segundo arrendatario no tiene ninguno, por lo que no debí haber hecho clic en depósito para el otro Entrar. Así que déjame hacer eso muy rápido. O tal vez no deposité nada y tal vez no seleccioné el 1 octavo. Entonces pongámoslo en el otro arrendatario que termina en dB. Asegúrate de elegir a ese arrendatario. Y luego pon este éter a uno y haz clic en depósito. Un cambio Alpha de nuevo al dueño. Puedo revisar el saldo de eso es a Eva. Así que permítanme realmente poner esto por aquí para hacer un seguimiento. El contrato tiene que irse. El saldo del propietario es 0. El dueño tiene 0. Renta o uno tiene, tiene, tiene un éter en naranja son dos, tiene un éter también. De acuerdo, así que ahí es donde estamos y vamos a probar esto. Vamos a revisar estas bicicletas de nuevo. Por lo que voy a elegir este primer render. Voy a revisarlos de nuevo. Check-in. Y ese arrendatario ahora tiene un Mountain Dew. Entonces voy a revisar el otro render in. Verifíquelas en. Y luego deberían tener la misma cantidad. Haz impresionante. En un GAN o balance. De nuevo, déjame volver con el dueño. El saldo debe ser el mismo y el saldo del propietario aún debe ser 0. Entonces veamos qué pasa cuando hacemos un pago. Hacemos un pago el saldo del contrato inteligente no debería cambiar. Debería simplemente cambiar las manos al equilibrio del propietario. Entonces este arrendatario aquí, renta o dos O's, esta cantidad de cinco a tantos ceros. Entonces vamos a copiar eso y hacer ese pago. Entonces voy a agarrar esta cantidad. Tienen cinco lo que sea, hacen por muchos ceros que sea, no necesitamos subir aquí y sumar esa cantidad de manera aquí arriba. Porque ahora en la función make payment aceptamos como segundo argumento. Así que voy a poner eso y luego el primer argumento fue su dirección de billetera. Entonces sigamos adelante y hagamos el pago. Entonces haz el pago y sólo puedo administrar mi cuenta. Entonces déjame cambiar a la cuenta correcta. Aquí vamos. Voy a seguir adelante y hacer el pago. Y ya ves que cuando hago clic en inquilinos, no tienen nada que hacer. Pero tenían esos cinco a tantos ceros que se dedujeran de su saldo. Ahora esa cantidad, ese cinco, sin embargo muchos deberían ahora formar parte del saldo del propietario. Así que déjame cambiar de nuevo con el dueño. En realidad, permítanme hacer estos cambios aquí. Entonces el saldo ahora en renta o uno es este tanto 995. Han tenido cinco lo que sea deducido de ella. Y si ahora me mudo al dueño, debería tener esa cantidad en mi poder. Por lo que se cambió al dueño. Voy a hacer clic en balance de y es lo mismo, nada cambió. Eso es lo que arreglamos porque antes estábamos sumando al saldo y deduciendo del recuento Eric, que está mal. Por lo que el equilibrio de sigue siendo el mismo. Obtener el saldo del dueño, vamos a hacer clic en eso y hay esa cantidad. Por lo que ahora el dueño tiene tanto. Y si sumas esto mucho con renta o uno, volvemos a éste a tantos ceros, así que sabemos que está funcionando, todo está funcionando muy bien. Y creo que eso es todo. Probamos que es arrendatario. Probamos solo propietario y contratos EHR funcionando bien. Entonces ahora todo lo que tenemos que hacer es ya que son contrato inteligente cambiado, tenemos que volver a desplegarlo en realidad. Entonces hagamos eso para conseguir un nuevo contrato. Eso es muy sencillo. Simplemente regrese a su aplicación, detenga su servidor, salga de su carpeta cliente a su carpeta de contrato. En antes de redesplegar, en realidad tenemos que compilar ese nuevo contrato. Y de hecho, déjame copiarlo desde aquí solo para asegurarme de tener los últimos cambios. Así que copia eso en mi contrato, guárdelo y necesitamos volver a compilar, actualizar esta carpeta de artefactos con nuevos ABI de código de bytes, todo eso bueno. Entonces simplemente haz NP x, hardhat, compilar. Impresionante compiló un archivo de solidez con éxito. Ahora ve a tu carpeta de artefactos, contrata por cadena dots soul y elige cadena de bicicleta dot json. Lo primero que queremos hacer es agarrar todo este ABI de nuevo Desde el soporte dos brackets, copiar eso y pegarlo en nuestro config dot json en nuestra carpeta cliente. Agarra todo eso, y pega eso en. Entonces necesitamos actualizar la dirección del contrato. Entonces primero tenemos que desplegarlo. Entonces eso es NP x hardhat run y luego scripts slash sample script.js. Y luego para tu red, elige test net para volver a desplegar. Entonces haz clic en Entrar. Cuando hacemos esto, tenemos un contrato completamente nuevo. En una aplicación completamente nueva. Básicamente. Ahí está cadena de bicicletas desplegada a esta dirección. Así que copia eso y pegarlo en la dirección de tu contrato. Guárdalo y estás bien. Así cd dot dot cd client y luego yarn run dev y deberíamos tener una nueva aplicación. Voy a ir a localhost 3 mil y en realidad voy a desconectar mi billetera de ella para conseguir un nuevo comienzo, para desconectar esta cuenta y refrescar la página. Escoge mi moto y dice, Bienvenido, Por favor, introduzca su nombre y apellido. Entonces déjame conectar primero mi billetera. Conectar. Muy bien. Ingresa a mi nombre para inscribirte como arrendatario. Prueba de Travis. Presentar. Despliega eso. Impresionante. Acreditemos la cuenta con el 0.1 B&B. ahí está. 0.1 solo por patadas. Tratemos de comprobar en una bicicleta que nunca salimos y recibimos esta advertencia aquí arriba. Por favor, echa un vistazo a una bicicleta primero. Eso sigue funcionando. Ahora echemos un vistazo a una bicicleta y confirme. Y una vez hecho eso, deberíamos volvernos verdes aquí porque sus bicicletas se marcharon. Todavía pendiente. Ahí está. Estamos verdes. Por lo que parece que nuestra app está funcionando muy bien. Tenemos nuestro dashboard en orden. Ahora tenemos cheques para que las personas solo puedan modificar sus propias cuentas. Y tenemos mensajes que aparecen para mostrar errores que obtenemos de require declaraciones. Y eso es todo lo que tengo para ti. Espero que hayas disfrutado mucho de este curso. Si estás buscando algunas cosas más que hacer aquí, una cosa que sería divertida es poner aquí un elemento de navegación, como un elemento de menú que dice admin, que aparece si el propietario inicia sesión. Como pensé en hacer esto, pero no quiero mantener el rumbo yendo y yendo y yendo. Ya has recorrido un largo camino. Pero si digamos ya que soy el dueño, desplego esta dirección contractual, soy el dueño. Y ya tenemos las funciones en su lugar en un contrato inteligente. Por lo que puede poner una o es posible que desee agregar una función llamada es propietario. Y luego se puede comprobar como si esa persona es el dueño. Si es así, pon aquí un elemento de menú admin y al hacer clic en él, habrá dos formularios. Uno donde puedes hacer click y revisar tu saldo en, uno donde puedes retirar el saldo y debes saber un 100 por ciento cómo hacerlo porque lo hicimos aquí y lo hicimos aquí. Y en el contrato inteligente que ya está en su lugar, ya hemos construido la función. Simplemente refrescamos el contrato y lo redistribuimos, así que está ahí. Entonces ese es mi reto para ti. Eso va a ser muy divertido para dar seguimiento. Pero en este punto tenemos una app totalmente funcional. Hemos hecho mucho trabajo. Deberías felicitarte. Siéntase libre de modificar esto para que sea más limpio. Agrega algunas características más a ella, un mejor CSS, lo que quieras hacer, empujarlo a GitHub y muéstralo al mundo. Nuevamente. Gracias por recoger este curso y seguirme junto a mí ya que juntaba esta cosa. Si lo disfrutaste, considera dejar una reseña o dispararme un mensaje, diciéndome si si te gustó o si tienes algo, te gustaría ver hacer mejor en el futuro. Me encantaría escucharlo. Así que de nuevo, gracias por pasar por este curso conmigo. Ahora habla contigo más tarde. 10. Características extra de los propietarios: Entonces aquí tienes un proyecto de bonificación para ti. Lo que vamos a hacer es crear un tablero para el propietario. El propietario podría ver el saldo del contrato, su saldo, el saldo del propietario, y podría retirar el saldo del propietario. Entonces se ve así. Estoy conectado como no el dueño. Y si voy a dash admin, voy a conseguir una página que diga acceso denegado. Entonces lo que quieres hacer es crear una ruta llamada slash admin. Y si no eres el dueño, solo ves el acceso denegado. Ahora, si eres el dueño, déjame desconectar esto. Y voy a conectar la cuenta de propietario. Ahora, deberías ver un tablero. Entonces esta página es igual que el tablero que tenemos aquí. Hay un título, hay algunas cartas de estadística, y luego hay un formulario. Entonces aquí es lo mismo. Entonces si vuelvo a admin, tengo un título, tiene algunas tarjetas stat y luego tengo un formulario sin campos de texto es solo un botón. Y lo que vamos a hacer aquí es que vamos a tener el saldo propietario, tendremos el saldo total del contrato. Y luego cuando retiramos, retiramos este saldo propietario a nuestra billetera. Y como el saldo propietario forma parte de todo el saldo del contrato, deberíamos ver este cambio a 0.18. Así que probemos eso. Entonces es procesamiento. Muy bien, así que retiré mi 0.01 B&B en mi saldo contractual es ahora 0.18. Entonces ese es tu reto. Si estás un poco burnout del proyecto, has estado trabajando duro en ello y ya has terminado y no quieres ni siquiera lidiar con esto, no te preocupes por ello. Es aguinaldo. Pero creo que es importante si puedes, hacerlo porque uno, un propietario necesita que le paguen, ¿verdad? Está construyendo ingresos de estas rentas de bicicletas. Necesita poder que le paguen por ello. Segundo, esta es una gran oportunidad para que tomes todo lo que has aprendido en este curso y hagas algo sin ninguna ayuda. Así que toma todas estas habilidades que has aprendido y trata de hacerlo tú mismo. Ahora, debajo de este video, he puesto un par de pasos para ayudarte. Como un par de pasos que debes tomar para hacer esto. Y luego finalmente, he publicado un enlace a la sucursal en GitHub con estos cambios de código que puedes revisar, pero no mires eso hasta que hayas terminado. Intenta intentar esto. De todos modos. Creo que lo encontrarás muy divertido. Así que tenemos en ello.