Construye en Flow: Aprende FCL - 8. Como consultar una transacción por su id

Resumen

En esta corta guía, aprenderás a:

• encontrar la data de una transacción por su id.
• procesar y analizar la data adquirida.

Corto, pero directo al punto!

¿Por qué?

Después de que una transacción es enviada a la cadena, obtendrás el correspondiente id, que cualquiera puede usar para consultar la data de esa específica transacción . Por ejemplo, si estás transfiriendo algunos tokens a otra cuenta, también puedes proveer el id de la transacción como una prueba de que has cumplido con la tarea en tu lado y ahora el recipiente puede obtener actualizaciones consultando cambios de estado a esa transacción.

¿Como?

FCL provee una función [tx](https://docs.onflow.org/fcl/reference/api/#tx) que te permite suscribirte a actualizaciones de estado (via polling), pero subsecuentemente también retorna el resultado final si el estado de la transacción es sealed. La función tx retornará un objeto y uno de los campos es el método .onceSealed(). Cuando es llamado este método retornará una promesa, la cual se resolverá si la transaccion con el id especificado tienej estado igual a 5 (sealed).

Sellado de nuevo? 🤔

Similar a los bloques, las transacciones también tienen diferentes estados:

• 1 - pending - la transacción espera finalización
• 2 - finalized - la transacción espera ejecución
• 3- executed - la transacción espera ser sellada.
• 4 - sealed** - la transacción esta sellada y podría verse como completa e irreversible.
• 5 - expired - la transacción expiró.

Has leído eso bien, las transacciones pueden expirar! Cuando una transacción es creada, es “anclada” al último bloque disponible y necesita ser sellada dentro del rango de los 600 bloques (o alrededor de 10 minutes en tiempo humano 👨‍🏫).

Ahora pongámoslo en practica! 💪

Paso 1 - Instalación

Añade "@onflow/fcl": "1.0.0" como tu dependencia.

Paso 2 - Configuración

Justo como la última vez importaremos los métodos necesarios para configurar FCL:

// Importar métodos de FCL
import { tx, config } from "@onflow/fcl";

// Especificar el endpoint de la API- esta vez usaremos Mainnet
const api = "https://rest-mainnet.onflow.org";

// Configuraremos FCL para que use mainnet como el nodo de acceso
config().put("accessNode.api", api);

Finalmente

Envolveremos el código en un bloque IIFE para ejecución automática:

// usaremos IIFE para ejecute nuestro codigo de inmediato
(async () => {
  console.clear();

    // Este es un id cualquiera que consegui del live feed de Flowscan
    const id = "2297668a3f35d6c6b4a18bb9c5ea8d3e60ce7e4a4e0fe31ad5a9c623d002b9d7";

  const txResult = await tx(id).onceSealed();
  console.log({ txResult });
}

Después de la ejecución tu consola debería tener este output:

txResult: {
    blockId: "f21eb65a65cd8f2f26a340265c24497ee2ca130862e4c7e9d6f1e6d6680a2fe6",
    status: 4,
    statusString: "SEALED",
    statusCode: 0,
    errorMessage: "",
    events: Array(7),
}

Cada evento tendra la forma de un objeto:

{
    type: "A.2d4c3caffbeab845.FLOAT.FLOATMinted",
    transactionId: "2297668a3f35d6c6b4a18bb9c5ea8d3e60ce7e4a4e0fe31ad5a9c623d002b9d7",
    transactionIndex: 4,
    eventIndex: 0,
    data: Object,
}

Si le das una vista al nombre de tipo de evento de varios events veras claramente un patrón:

• A - es por Account
• 2d4c3caffbeab845 - esta es la dirección donde el contrato conteniendo declaraciones de eventos es desplegado.
• FLOAT - nombre del contrato.
• FLOATMinted - nombre del evento.

Podemos crear un enlace y explorar este contrato en Flow View Source. Línea 53 tiene la definición del evento FLOATMinted.

La referencia rápida de FCL en la documentación de Flow tiene más información acerca de transacciones y eventos:

• resultado de transacciones - https://docs.onflow.org/fcl/reference/api/#returns-after-decoding-7
• data de eventos - https://docs.onflow.org/fcl/reference/api/#event-object

Otras maneras de explorar transacciones

De manera similar a Account, como cubrimos la ultima vez, exploraremos la data de las transacciones en FlowScan and Flow View Source

• Flow View Source - https://flow-view-source.com/mainnet/tx/2297668a3f35d6c6b4a18bb9c5ea8d3e60ce7e4a4e0fe31ad5a9c623d002b9d7 - es un proyecto de la comunidad por el creador original de FCL - James Hunter - https://github.com/orodio
• Flowscan -https://flowscan.org/transaction/2297668a3f35d6c6b4a18bb9c5ea8d3e60ce7e4a4e0fe31ad5a9c623d002b9d7 - contrario a la información de la cuenta, una transacción en Flowscan tiene la misma data en Flow View Source.

Hasta la próxima 👋

Recursos

• Código del ejemplo - https://codesandbox.io/s/dev-to-fcl-08-fetch-transaction-by-id-44kccc?file=/src/index.js
• Documentacion de la funciñontx- https://docs.onflow.org/fcl/reference/api/#tx
• Documentación sobre la respuesta del status de una transacción - transaction status response - https://docs.onflow.org/fcl/reference/api/#returns-after-decoding-7
• Documentación sobre la data de eventos- event data - https://docs.onflow.org/fcl/reference/api/#event-object

Otros recursos que podrías encontrar útil:

• Documentación de Flow - https://docs.onflow.org/ - más información de tallada acerca de Flow blockchain y como interactuar con ella.
• Flow Portal - https://flow.com/ - tu punto de entrada a Flow.
• FCL JS - https://github.com/onflow/fcl-js - Código fuente y la habilidad de contribuir a la librería FCL JS.
• Cadence - https://docs.onflow.org/cadence/ - Introducción a Cadence
• Codesandbox - https://codesandbox.io - Un asombroso IDE en el navegador para prototipar.

Esta es una traducción al español del octavo artículo de la serie Build on Flow | Learn FCL escrito por Maksimus Starka.