Construir una dapp full stack en Fuel implica unir tu contrato Sway con una interfaz que el navegador pueda entender. El TypeScript SDK de Fuel es la pieza que hace posible esa conexión: te permite llamar funciones de tu contrato desde botones, formularios o cualquier elemento de React, y así pasar de ser solo desarrollador de contratos a ser un full stack dapp developer.

La práctica gira alrededor del counter contract que ya construiste antes, ese que solo tiene dos funciones: una para leer el valor del contador y otra para incrementarlo. Vas a montarle un front end mínimo con un botón que sume y un display que muestre el número actual.

¿Qué es el TypeScript SDK de Fuel y para qué sirve?

Es un toolkit que te deja ejecutar scripts, listar transacciones, consultar balances e interactuar con contratos desplegados en la red de Fuel [2:02]. En este flujo lo usamos para una sola cosa: llamar funciones del contrato desde el navegador.

¿Qué hace exactamente el SDK de Fuel en una dapp? Conecta tu interfaz web con el contrato desplegado. Traduce los clics del usuario en llamadas a funciones de Sway y devuelve los resultados al front end.

¿Cuándo uso .get y cuándo uso .call?

Aquí entra la lógica de acceso a storage que ya viste antes. No todas las funciones se comportan igual frente al SDK.

• .get: para funciones de solo lectura. No requieren firma del usuario porque no cambian el estado [3:30].
• .call: para funciones de escritura. Sí requieren firma porque modifican el estado on chain.

En el contador, count es de lectura, así que va con .get. increment modifica el estado, así que va con .call. Esa decisión la tomas leyendo tu propio contrato Sway.

¿Por qué algunas funciones piden firma y otras no? Porque firmar implica enviar una transacción que altera el estado de la blockchain. Leer no cambia nada, así que no necesita firma.

¿Cómo creo el front end y conecto el contrato?

Todo el flujo sale del quick start oficial de Fuel, así que no memorices comandos: cópialos desde la documentación. El truco está en pararte en el directorio correcto.

¿Dónde corro los comandos para no romper la estructura?

Debes estar en la carpeta exterior del proyecto (en este caso sway-platzi), no dentro de counter-contract. Si haces ls y ves tu carpeta de contrato, estás en el lugar correcto para crear el front end al lado.

Los pasos clave:

1. Generar el front end con npx create-react-app frontend --template typescript [6:38].
2. Entrar a la carpeta nueva con cd frontend.
3. Instalar fuels y la dependencia adicional con las versiones específicas que indica la guía, por ejemplo la 0.24.2 que se usa por estabilidad [8:30].
4. Generar los types a partir del ABI JSON que produjo forc build, ubicado en counter-contract/out/debug/abi.json [9:13].

El ABI JSON es la pieza que describe las funciones de tu contrato en formato que TypeScript entiende. Si nombraste tu contrato distinto, ajusta esa ruta en el comando o vas a recibir un error de path.

¿Qué es un burner wallet y por qué lo uso aquí?

Un burner wallet es una billetera desechable que te evita firmar cada transacción a mano mientras pruebas. La generas con un archivo createwallet.js que importa Wallet desde fuels, crea una billetera nueva y hace console.log de la address y la private key [12:30].

La corres con node createwallet.js, copias ambos valores a un bloc de notas y listo. Nunca uses esto en producción: expone la llave privada y cualquiera podría vaciar tus fondos. Para test ether en un curso, no pasa nada.

¿Cómo escribo la lógica en app.tsx?

Dentro de frontend/src/app.tsx borras el boilerplate de React y pegas el código base de la guía, unas 67 líneas. Antes de pegar, conviene levantar el proyecto una vez con npm start para confirmar que React arranca y muestra la pantalla por defecto. Para detener el servidor usas Control C.

Las piezas que sí debes editar a mano son tres:

• El import del contract factory, que debe coincidir con el nombre exacto de tu contrato (CounterContractAbi__factory si lo llamaste counter-contract).
• La dirección del contrato desplegado que guardaste en clases anteriores.
• La private key del burner wallet, no la address.

¿Cómo manejo el estado del contador con React?

React usa el concepto de state para saber qué está cambiando en la app: si algo carga, si un valor sube, si una pantalla se actualiza. En este proyecto creas dos variables de estado:

• counter, que arranca en 0 y guarda el valor actual del contador.
• loading, que arranca en false y te dice si hay una transacción en curso.

El hook useEffect ejecuta código una sola vez al inicio. Lo aprovechas para llamar count apenas el usuario abre la página, así ve el número correcto desde el primer segundo [17:34].

La llamada se ve así de intuitiva:

typescript const value = await contract.functions.count().get(); setCounter(Number(value));

Accedes al contrato, entras a functions, eliges count y aplicas .get() porque es de solo lectura. Guardas el resultado en value, lo conviertes con Number para darle formato y lo pasas a setCounter, que es el setter asociado a la variable de estado counter. Así el valor queda persistido en React y la UI lo refleja.

Con esto ya tienes el SDK instalado, los types generados, una billetera de pruebas y la primera llamada de lectura funcionando. Falta cablear el botón de incrementar con .call, montar la UI y probarla en el navegador. ¿Tú ya identificaste cuál de tus funciones va con .get y cuál con .call? Cuéntalo en los comentarios.