Conectar un front-end con un smart contract en Fuel implica escribir funciones asincrónicas que llamen a los métodos del contrato y reflejen los cambios en la interfaz. Si estás construyendo una dapp full stack con React y Sway, aquí verás cómo cerrar el ciclo entre la lógica del contrato y lo que ve el usuario en pantalla.

Cómo defino la función increment en el front-end

La función increment del front-end es el puente entre el botón que ve el usuario y la función increment que vive dentro del smart contract. Suena a function inception, y básicamente lo es: el botón llama a una función en React, y esa función llama a otra función en el contrato.

La declaras como async function porque cualquier llamada a un smart contract toma tiempo y necesita esperar respuesta. No tienes que entender cada detalle de la asincronía, pero sí recordar que toda interacción con el contrato se maneja así [02:14].

Dentro de la función pasan tres cosas en orden:

• Cambias el estado loading a true para avisar al usuario que algo está ocurriendo en segundo plano.
• Llamas a await contract.functions.increment() con transactionParameters y gasPrice en 1, y cierras con .call() porque la función modifica estado.
• Llamas a contract.functions.count.get() para traer el nuevo valor y lo guardas con setCounter.

Al final, vuelves loading a false. Así cierras el ciclo completo en una sola función.

¿Cuándo uso .call y cuándo .get en Fuel? Usas .call() cuando la función escribe en el estado del contrato, como increment. Usas .get() cuando solo lees datos, como count. La diferencia está en si hay cambio de storage o no.

Por qué necesito gasPrice y .call para escribir en estado

El gasPrice: 1 es un parámetro que asegura que la transacción pase. Es el mismo flag que usaste al desplegar el contrato. No tienes que profundizar en por qué, solo recordar que toda escritura en estado lo necesita.

El .call() existe porque increment tiene acceso de lectura y escritura. Si usaras .get(), no podrías modificar el contador. Esa es la regla simple: lectura usa get, escritura usa call [05:32].

Cómo construyo la UI con React para mostrar el contador

Todo lo que el usuario ve se escribe dentro del return del componente. Empiezas con un outer div como contenedor base, y dentro armas la jerarquía visual: un encabezado, un párrafo con el valor del contador y un botón.

Para mostrar el valor del estado, envuelves la variable entre llaves: {counter}. Eso le dice al motor de React que no muestre la palabra literal, sino que busque la variable en el estado y renderice su valor actual.

El botón usa el evento onClick={increment}, que conecta el clic con la función que acabas de definir. Las llaves alrededor de increment indican que React debe buscar una función con ese nombre, no imprimir el texto.

jsx <button onClick={increment}> {loading ? "Incrementing..." : "Increment"} </button>

Esa última línea usa un operador ternario: si loading es true, el botón muestra Incrementing...; si es false, vuelve a decir Increment. Es la forma más limpia de dar feedback visual sin agregar componentes extra.

¿Qué es el estado loading en React? Es una variable booleana que indica si una operación está en proceso. Mientras es true, muestras un spinner o texto de carga. Cuando vuelve a false, la UI regresa a su estado normal.

Por qué falla el botón si la wallet no tiene tokens

La primera vez que pruebas la dapp, el botón puede fallar con un error claro: Not enough resources to fit the target. Eso significa que tu burner wallet no tiene test tokens para pagar el gas de la transacción.

La solución es ir al faucet de Fuel (beta2 faucet), pegar la dirección que generaste con node createWallet.js, verificar el captcha y pedir Ether de prueba. Una vez la wallet tenga fondos, el botón funciona.

Este detalle importa porque refuerza un concepto: solo las funciones que escriben en estado requieren tokens. Si solo leyeras con .get, no necesitarías gas. El cambio de storage es lo que cuesta [11:48].

Qué pasa cuando todo conecta correctamente

Al hacer clic en el botón con la wallet fondeada, ves el flujo completo: el texto cambia a Incrementing..., la transacción se procesa en segundo plano, el contador se actualiza al nuevo valor y el botón regresa a Increment.

Ese ciclo es la prueba de que tu front-end y tu back-end están hablando. Desde el navegador llamas métodos del smart contract usando .get y .call, y reflejas los cambios en pantalla. Eso es ser un full stack Fuel dapp developer.

Ahora viene lo divertido: experimenta con estilos, agrega tu toque personal a la UI y toma una captura del resultado. ¿Qué cambiarías de la interfaz para que se sienta más tuya? Cuéntalo en los comentarios.