DEV Community: Bruno Gonzales

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

Bruno Gonzales — Mon, 13 Jun 2022 05:58:39 +0000

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.

Construye en Flow: Aprende FCL - 7. Como consultar una cuenta en Flow por su dirección

Bruno Gonzales — Mon, 13 Jun 2022 03:54:03 +0000

Resumen

En el post anterior, cubrimos como colectar información acerca de bloques en la cadena. Hoy cubriremos como puedes consultar información acerca de una cuenta especifica usando la función account.

Los dos casos de uso mas comunes, y que tu aprenderás hoy serán:

obtener el balance actual de una cuenta en FLOW.
traer una lista de contractos desplegados en la cuenta.

Paso 1 - Instalación

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

Paso 2 - Configuración

Justo como la última last vez, importaremos los métodos necesarios y configuraremos FCL:

// Importa los métodos de FCL
import { account, query, config } from "@onflow/fcl";

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

// Configura FCL para usar mainnet como el nodo de acceso
config().put("accessNode.api", api);

Paso 3 - Copiar el resolvedor

Siempre es bueno aplicar conocimiento previo y practicar. Traigamos de vuelta la función resolvedora de la lección 4 para usarla en nuestro ejemplo:

const resolveName = async (name) => {
    const cadence = `
    import FIND from 0x097bafa4e0b48eef

    pub fun main(name: String): Address?{
      return FIND.lookupAddress(name)
    }
  `;

  const args = (arg, t) => [arg(name, t.String)];
  return await query({ cadence, args });
};

Paso 4 - Encontrando la cuenta

Tratemos de resolver la identidad flovatar y exploremos que tiene para nosotros😊

Usaremos nuestro bloque invocado inmediatamente como siempre:

// Usaremos IIFE para ejecutar nuestro codigo inmediatamente 
(async () => {
  console.clear();

  const address = await resolveName("flovatar")

    // es posible que name sea resuelto a "null" 
    // agreguemos algo de protección basica en esta parte
    if (address){
    const accountInfo = await account(address);
    console.log({ accountInfo });
    }
})();

Después de que el polvo se asiente, deberías ver el código en la consola:

{
    address: "921ea449dffec68a",
    balance: 13052726819120,
    code: "",
    contracts: Object,
    keys: Array(2),
}

Esos 5 valores son respectivamente::

address - dirección de una cuenta (nota el prefijo 0x faltante si deseas usarlo en el futuro)
balance - cantidad de tokens FLOW en formato UFix64. Divide por Math.pow(10,8) para obtener un valor float.
code - este es un valor deprecado, previamente fue usado para almacenar código del contrato desplegado a la cuenta. Antes solo era posible almacenar un solo contrato por cuenta.
contracts - objeto representando contratos desplegados. Las llaves son los nombres de los contratos y los valores son código en Cadence del respectivo contrato.
keys - lista de llaves asociadas a una cuenta.

Puedes encontrar mas información acerca de ellos en la documentación de Flow - https://docs.onflow.org/fcl/reference/api/#blockobject

Otras maneras de explorar una cuenta

Hay formas de explorar una cuenta específica:

Flow View Source - https://flow-view-source.com/mainnet/account/0x5916e847260714b6 - es un proyecto de la comunidad hecho por el creador original de FCL - James Hunter - https://github.com/orodio
Flowscan - https://flowscan.org/account/0x5916e847260714b6 - la página de Flowscan te mostrará mas información acerca de transacciones y transferencias gracias a que procesa los bloques detrás de escenas para acumular esa información.

Hasta la próxima 👋

Recursos

Código del ejemplo - https://codesandbox.io/s/dev-to-fcl-07-get-account-j9rxkm?file=/src/index.js

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 séptimo artículo de la serie Build on Flow | Learn FCL escrito por Maksimus Starka.

Construye en Flow: Aprende FCL - 6. Como consultar el último bloque de la cadena.

Bruno Gonzales — Mon, 13 Jun 2022 01:22:21 +0000

Resumen

Mientras construyes tu aplicación Web3, una tarea común y útil es traer el último bloque sellado. Traer el último bloque sellado es útil para consultar eventos específicos y data para asegurarse de que todo esta trabajado como se espera. Esta guía te enseñara a:

como usar la función block para traer el último sealed block por su height o id.
las limitaciones de FCL en relación a la consulta de bloques

Bloques? Como en Tetris?

Bueno, no realmente 😅 El bloque es un constructo diseñado para contener cierta información como la cantidad específica de transacciones, elegidas por los nodos de rol Collection para su ejecución. Los tipos de data que los bloques contienen son: ****

id - el id del bloque generalmente usado para traer un bloque específico por su id.
height - la altura actual del bloque (puedes visualizarla como si estuvieras apilando cajas una encima de la otra).
parentId - para que puedas regresar en el tiempo y leer la información del bloque pasado.
timestamp - objeto, conteniendo campos relacionados con el tiempo.
blockSeals - los detalles de qué nodos ejecutaron y sellaron el bloque.
collectionGuarantees - todas las firmas por los items en el bloque.

Los bloques en la blockchain están organizados de tal manera que cada bloque (excepto el bloque genesis) está referenciando un bloque pegado a él desde su “cola”. Cuando conectas varios bloques de esta maneras puedes visualizar que forman una cadena - por ello la palabra blockchain 💡.

De vuelta a la parte divertida

Hay al menos dos maneras para consultar el último bloque sellado. Cubriremos la más simple llamando la función block - https://docs.onflow.org/fcl/reference/api/#block - una interacción pre construida que retorna el último bloque (opcionalmente sellado o no), por id o por altura. Aprovechando que ya te “enganché” saltemos a verlo en acción y en detalle!

Paso 1 - Instalación

Agrega "@onflow/fcl": "1.0.0" como dependencia.

Paso 2 - Setup

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

// Importaremos los métodos de FCL
import { block, config } from "@onflow/fcl";

// Especificamos los endpoints de la API - esta vez usaremos Mainnet
const api = "https://rest-mainnet.onflow.org";

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

Finalmente

Ya que la función block no requiere ningún setup atravesaremos el proceso de una pasada, sin configurar métodos adicionales como hicimos anteriormente.

(async () => {
  console.clear();

  const latestBlock = await block({ sealed: true });
  console.log("latestBlock", latestBlock);

})();

Si revisas la consola encontrarás información acerca del último bloque ahí:

latestBlock 
{
    id: "29697cbe3f0b811f319c99e0002536c5404491feab39d1b3f63ac92faec16306",
    parentId: "8bbb05e0e84fb78648b1673a67a5ddf1556a7d9bfd3a81c3afabd108c8234e1e",
    height: 69553091,
    timestamp: "2022-06-01T16:04:42.593016593Z",
    collectionGuarantees: Array(0),
    blockSeals: Array(2)
}

Usemos el campo height de latestBlock y consultemos otro bloque sustrayendo 1 a su valor:

(async () => {
  console.clear();

  const latestBlock = await block({ sealed: true });
  console.log("latestBlock", latestBlock);

  const previousBlock = await block({ height: latestBlock.height - 1 });
  console.log("previousBlock", previousBlock);
})();

Finalmente, usaremos el campo parentId de previousBlock para obtener otro bloque por id:

(async () => {
  console.clear();

  const latestBlock = await block({ sealed: true });
  console.log("latestBlock", latestBlock);

  const previousBlock = await block({ height: latestBlock.height - 1 });
  console.log("previousBlock", previousBlock);

  const blockById = await block({ id: previousBlock.parentId });
  console.log("blockById", blockById);
})()

Después de que el código actualizado sea ejecutado, deberías ver un mensaje parecido en la console:

latestBlock 
{
    id: "29697cbe3f0b811f319c99e0002536c5404491feab39d1b3f63ac92faec16306",
    parentId: "8bbb05e0e84fb78648b1673a67a5ddf1556a7d9bfd3a81c3afabd108c8234e1e",
    height: 69553091,
    timestamp: "2022-06-01T16:04:42.593016593Z",
    collectionGuarantees: Array(0),
    blockSeals: Array(2)
}

previousBlock 
{
    id: "8bbb05e0e84fb78648b1673a67a5ddf1556a7d9bfd3a81c3afabd108c8234e1e",
    parentId: "3556f13dba2c2e5d543944139666b21d56d2ece8ceb00998e70ec5b007e4c0cd",
    height: 69553090,
    timestamp: "2022-06-01T16:04:41.751672413Z",
    collectionGuarantees: Array(0),
    blockSeals: Array(0)
}

blockById 
{
    id: "3556f13dba2c2e5d543944139666b21d56d2ece8ceb00998e70ec5b007e4c0cd",
    parentId: "8ab3734670901b1d76b57e0ae53908d17b621ea7b7172565a9e07ffe591b2385",
    height: 69553089,
    timestamp: "2022-06-01T16:04:40.932442068Z",
    collectionGuarantees: Array(0),
    blockSeals: Array(1)

Por qué querríamos el bloque `sealed` ? 🤔

Como probablemente notaste, estamos pasando el argumento sealed para traer el último bloque. El bloque será sellado por los nodos de rol Consenso solo cuando suficientes aprobaciones hayan sido colectadas. En castellano, puedes estar seguro de que si tu transacción fue incluida en el bloque fue ejecutada o revertida.

Limitaciones

El proceso de obtener un bloque específico - ya sea por id o height - esta limitado a un spork - un proceso de actualización de la red donde operadores de nodos actualizan el software de su nodo y lo re-inicializan con una representacion consolidada del estado del spork previo.

Puedes encontrar mas información acerca del spork actual y el pasado en la Documentación de Flow.

Si el bloque que quieres esta fuera del spork actual, y realmente necesitas obtener esa información - tu única opción es usar la Flow Go SDK y apuntar a un nodo de acceso específico. No cubriremos ese proceso en este artículo pero quizás en una serie futura. 😉

El código completo puede ser encontrado en este Codesandbox

Hasta la próxima 👋

Recursos

Código del ejemplo - https://codesandbox.io/s/dev-to-fcl-06-get-latest-block-5wiry0
Documentación de la función block - https://docs.onflow.org/fcl/reference/api/#block

Otros recursos que podrías encontrar útil:

Documentación de Flow - https://docs.onflow.org/ - Más informacion detallada sobre Flow blockchain y cómo 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.

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

Construye en Flow: Aprende FCL - 5. Obtener una lista de NFTs viviendo una direccion conocida

Bruno Gonzales — Sun, 12 Jun 2022 23:18:59 +0000

Resumen

En esta guía, expandirás tu conocimiento interactuando con contratos inteligentes a través de scripts en Cadence. Aprenderás como:

sacar una lista de NFTs almacenados en la cuenta de una dirección (usaremos un Flovatar para este ejemplo)
preparar y retornarlas como un Array de Struct personalizados.

Previamente en “Aprende FCL”

En el post pasado, aprendimos como interactuar con contratos desplegados y como retornar un valor Struct personalizado de un script. Aprenderemos como construir sobre ese conocimiento y ejecutar un procedimiento más complejo - traer una lista de NFTs almacenados en una cuenta, mapearlos a nuestro formato favorito y retornarlos de vuelta.

Empecemos! 💪

¿Qué es Flovatar?

Flovatar es una de los muchos asombrosos proyectos sobre NFTs construido encima de Flow. En vez de dejarte comprar uno de esos miles de NFTs únicos, provee herramientas para que tu puedas agregar tu toque personal a un Flovatar que vaya con tu estilo

Preparación

Las primeras cosas primero, deberías encontrar la dirección donde el contrato está desplegado. El GitHub de Flovatar tiene las direcciones para los contratos desplegados en la página principal.

Mainnet - 0x921ea449dffec68a
Testnet - 0x0cf264811b95d465

Y en el archivo get_flovatars.cdc, El contrato Flovatar tiene un método util que podemos usar llamado getFlovatars que acepta una dirección como argumento:

import Flovatar from **0x921ea449dffec68a**
pub fun main(address:Address) : [Flovatar.FlovatarData] {
    return Flovatar.getFlovatars(address: address)
}

Paso 1- Instalación

Agrega "onflow/fcl": "1.0.0" como tu dependencia.

Paso 2 - Setup

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

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

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

// Configurar FCL para usar Testnet como el nodo de acceso
config().put("accessNode.api", api);

Paso 3 - Implementar el método `getFlovatar`

// Obtén una lista de Flovatars a través de direcciones.
const getFlovatars = async (adddress) => {
    const cadence = `
        import Flovatar from **0x921ea449dffec68a**

        pub fun main(address:Address) : [Flovatar.FlovatarData] {
            return Flovatar.getFlovatars(address: address)
        }
    `
    // Necesitamos pasar un sólo argumento de tipo Address
    const args = (arg, t) => [arg(address, t.Address)];

    const flovatars = await query({ cadence, args });
    console.log({ flovatars })
}

Paso 4 - Démosle un intento

Hagamos un llamado a nuestro método. Nuestro objetivo sera Luca (creador de Flovatar) - su dirección es 0x2a0eccae942667be

(async()=>{
    const user = "0x2a0eccae942667be"
    await getFlovatars(user)
})()

Si das una mirada a la consola veras una lista de objetos representando Flovatars.

No tan mal, verdad? Bueno… tratemos de desenvolver ese campo metadata :

Ahora eso es SVG para ti. Mientras que puedes traer esta data cada vez que el usuario refresque la página, idealmente querrías cachearla de alguna manera y solo consultarla cuando la necesites.

Adicionalmente si consultas cuentas con cientos/miles de NFTs podrias sobrepasar el límite de valor retornable, el cual es alrededor de ~10Mbs.

Si vas al Showroom de Flovatar y usas las dev tools en tu navegador puedes encontrar que todas las imágenes estan cacheadas en https://flovatar.com/api/image/{id}. Traigamos solo los subcampos id y creatorAddress del campo metadata de los NFTs. De esta manera podemos identificar si el dueño es un creador original de dicho NFT.

Paso 5- Mejorando el script en Cadence

Como recordarás del último post- podemos crear Struct personales que almacenarán toda la data que queremos retornar. Definiremos un Struct llamado Avatar con dos campos: id y isCreator

// Trae una lista de FLovatars de una dirección
const getFlovatarsImproved = async (adddress) => {
    const cadence = `
        import Flovatar from **0x921ea449dffec68a

        pub struct Avatar{
      pub let id: UInt64
      pub let isCreator: Bool

      // guión abajo en frente de los argumentos nos permite pasarlos sin nombrarlos
            init(_ id: UInt64, _ isCreator: Bool){
        self.id = id
        self.isCreator = isCreator
      }
        }**

        pub fun main(address:Address) : [Avatar] {
            // Como la última vez llamaremos el método "getFlovatars"
            let flovatars = Flovatar.getFlovatars(address: address)

            // Colectaremos la data procesada del Flovatar aquí
      let data: [Avatar] = []

            // Un loop simple para iterar sobre Flovatars
      for flovatar in flovatars {
        let isCreator = flovatar.metadata.creatorAddress == address
        let avatar = Avatar(flovatar.id, isCreator)

                // agregar nueva instancia del Avatar en la lista resultante
        data.append(avatar)
      }
      return data  
    }
    `

    // Pasaremos la dirección como un argumento solitario de tipo Address
    const args = (arg, t) => [arg(address, t.Address)];

    const flovatars = await query({ cadence, args });
    console.log({ flovatars })
}

Finalmente

Actualicemos nuestro IFEE e intentemos nuevamente:

(async ()=> {
    const user = "0x2a0eccae942667be"
    await getFlovatarsImproved(user)
})()

Esta invocación resulta en una huella más reducida en la consola.

Contained information would be enough to construct a link

La información contenida sería suficiente para construir un link (https://flovatar.com/flovatars/{id}) o imagen (https://flovatar.com/api/image/{id}) en tu interfaz.

⭐Challenge Extra

Usando tu conocimiento de el post sobre resolver identidades en .find modifica el codigo para permitir pasar identidades de .find al método getFlovatars

Recursos

Código del ejemplo: https://codesandbox.io/s/dev-to-fcl-05-list-flovatars-at-address-0bibcd
Cadence Structs - https://docs.onflow.org/cadence/language/composite-types/#composite-type-declaration-and-creation
Repositorio de Flovatar en GitHub - https://github.com/crash13override/flovatar
Contrato de Flovatar en Flow View Source - https://flow-view-source.com/mainnet/account/0x921ea449dffec68a/contract/Flovatar

Otros recursos que podrías encontrar útil:

Documentación de Flow - https://docs.onflow.org/ - Más información detallada acerca de la blockchain de Flow y como interactuar con ella.
Flow Portal - https://flow.com/ - Tu portal de entrada a Flow.
FCL JS - https://github.com/onflow/fcl-js - Código fuente y la habilidad de contribuir a la libreria de FCL JS.
Cadence - https://docs.onflow.org/cadence/ - Introduccion a Cadence.
Codesandbox - https://codesandbox.io - Un editor de texto genial para prototipar en el navegador.

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

Construye en Flow: Aprende FCL - 4. Como resolver identidades en .find a direcciones en Flow

Bruno Gonzales — Thu, 09 Jun 2022 22:38:39 +0000

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

Resumen

En este artículo, aprenderemos como usar un contrato desplegado e interactuar con él. Interactuar con contractos existentes en la blockchain es un parte esencial de lo que hace a la Web3 especial.

En este tutorial específico:

Resolveremos un identificador de nombre en .find a una dirección 0x en Flow (.find → 0x)
Busca el nombre .find para una cuenta para una dirección 0x en Flow (0x0 → .find

Previamente en “Aprende FCL”

Si trabajaste a través de alguno de nuestros posts previos deberías saber como pasar argumentos a scripts en Cadence. Necesitaremos este conocimiento ya que en este tutorial pasaremos valores String y Address.

Empecemos! 💪

Preparación

Cuando quieras interactuar con algún contrato desplegado, primero necesitas descubrir donde esta desplegado 😅. En nuestro ejemplo específico, .find es un servicio conocido y con la ayuda de su creador Bjarte fuimos capaces de encontrar la dirección del repositorio en GitHub en https://github.com/findonflow/find.

💡 Pro Tip: puedes encontrar cualquier contrato que quieras, mientras tengas un hash de la transacción o una dirección de una cuenta que haya interactuado con el contrato en el pasado. Solo visita su historia en flowscan.org!

De vuelta a .find! Excavando un poco, puedes encontrar toda la información que necesitas dentro del archivo integration.md. Específicamente, dos bloques de código en Cadence que usaremos como nuestros resolvedores. Este método para encontrar un nombre a través de una dirección:

import FIND from 0x097bafa4e0b48eef

pub fun main(name: String): Address?{
  return FIND.lookupAddress(name)
}

Y este otro para el proceso reverso:

import FIND from 0x097bafa4e0b48eef

pub fun main(address: Address) : String?{
  return FIND.reverseLookup(address)
}

Paso 1 - Instalación

Agrega "onflow/fcl": "1.0.0" como tu dependencia.

Paso 2 - Setup

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

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

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

// Configurar FCL para usar Testnet como el nodo de acceso
config().put("accessNode.api", api);

Paso 3 - Resolver una Alias de Identidad a una dirección

Ahora crearemos una función llamada resolveName. Esta función aceptará un parametro String, pasa este a la blockchain junto con nuestro código resolvedor e imprime el resultado:

const resolveName = async (name) => {
  // El codigo Cadence que podemos obtener del script "resolve.cdc":
  // <https://github.com/findonflow/find/blob/main/scripts/resolve.cdc>
  // El contrato de .find está deployado en la Mainnet de Flow en la dirección "0x097bafa4e0b48eef"
    // usaremos esta direccion en la declaración de importación
  const cadence = `
    import FIND from 0x097bafa4e0b48eef

    pub fun main(name: String): Address?{
      return FIND.lookupAddress(name) // we'll use .find's native lookupAddress method.
    }
  `;

  const args = (arg, t) => [arg(name, t.String)];

    // "query" es usado para operaciones de sólo lectura en la blockchain.
    // lee más acerca del método "query" en la pagina web de la documentación de Flow:
    // <https://docs.onflow.org/fcl/reference/api/#query>
  const address = await query({ cadence, args });

  console.log(
    `${name} identity has address %c${address}`,
    "color: #36ad68; font-weight: bold"
  );
};

Paso 4 - Resolver una dirección a un Alias de Identidad

Hagamos algo similar para revertir el proceso. Crearemos una función llamada resolveAddress que acepta una dirección pasada como String.

const resolveAddress = async (address) => {
    // El código Cadence para resolver una direccion como argumento 
    // a una Address lo podemos obtener del script "name.cdc"
    // <https://github.com/findonflow/find/blob/main/scripts/name.cdc>
    // El contrato de .FIND esta deployado en la dirección "0x097bafa4e0b48eef" - usaremos esa dirección en la declaración de importación.
  const cadence = `
    import FIND from 0x097bafa4e0b48eef

    pub fun main(address: Address) : String?{
      return FIND.reverseLookup(address) // nota la nueva función
    }
  `;

  const args = (arg, t) => [arg(address, t.Address)];
    // "query" pasara código en Cadence para acceder al nodo para su ejecución y nos retornará un resultado
    // lee más acerca del método "query" en la documentación de Flow.
    // <https://docs.onflow.org/fcl/reference/api/#query>
  const name = await query({ cadence, args });

  console.log(
    `${address} address is aliased to %c${name}`,
    "color: #36ad68; font-weight: bold"
  );
};

Finalmente

Llamemos las funciones que creamos al final del archivo usando algunos parámetros de prueba.

❕Nota: Estamos llamando a esos métodos dentro de una IIFE por simplicidad. Uno puede imaginar ejecutándolos con un botón o como parte de un procedimiento más complejo.

Ejecutar este código debería emitir esto a la consola:

bjartek identity has address 0x886f3aeaf848c535
0x886f3aeaf848c535 address is aliased to bjartek

Puedes encontrar el código completo en este Codesandbox.

Hasta la próxima! 👋

Recursos

Código del ejemplo: https://codesandbox.io/s/dev-to-fcl-resolve-find-name-9tbo8e
Cadence Imports - https://docs.onflow.org/cadence/language/imports/ - documentación sobre declaraciones import en Cadence.
.find GitHub Repository - https://github.com/findonflow/find - código completo y documentación de la plataforma .find.

Otros recursos que podrías encontrar útil:

Documentación de Flow - https://docs.onflow.org/ - Más información detallada acerca de la blockchain de Flow y como interactuar con ella.
Flow Portal - https://flow.com/ - Tu portal de entrada a Flow.
FCL JS - https://github.com/onflow/fcl-js - Código fuente y la habilidad de contribuir a la libreria de FCL JS.
Cadence - https://docs.onflow.org/cadence/ - Introduccion a Cadence.
Codesandbox - https://codesandbox.io - Un editor de texto genial para prototipar en el navegador.

Construye en Flow: Aprende FCL - 3. Como retornar valores arbitrarios desde un script

Bruno Gonzales — Thu, 09 Jun 2022 21:33:31 +0000

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

Vista previa

En esta guía aprenderás como retornar un valor que contenga multiples otros valores que no son del mismo tipo. Haremos esto definiendo y usando structs en Cadence, es decir:

definiendo un Struct en el cuerpo del script.
creando una instancia del mencionado Struct y usándolo como valor de retorno del script.

Previamente en “Aprende FCL”

En el post pasado, aprendimos como pasar argumentos a nuestro script en Cadence. Si recordamos el ejemplo passMultipleDifferentTypes podíamos retornar un valor único, a pesar de que pasábamos tipos de valor diferentes.

Hoy te mostraré como definir un Struct personalizado en el cuerpo de tu script para poder usarlo como valor de retorno.

Empecemos! 💪

Paso 1 - Instalación

Agrega "onflow/fcl": "1.0.0" como tu dependencia

Paso 2 - Configuración

Como la última vez, importaremos los métodos necesarios para configurar FCL:

import { query, config } from "@onflow/fcl";

const api = "https://rest-testnet.onflow.org";
config().put("accessNode.api", api);

Paso 3 - Implementando el método `fetchCustom`

const fetchCustom = async (name) => {
  const cadence = `
    // Este script te permite definir Structs personalizados en su cuerpo. 
        // Crearemos uno y lo llamaremos Custom (puedes usar cualquier nombre que quieras)
    pub struct Custom {
      pub let number: Int
      pub let address: Address

      init(number: Int, address: Address){
        self.number = number
        self.address = address
      }
    }

    pub fun main():Custom {
            // para crear una instancia del struct usa su nombre
            // y pásale los argumentos de inicializacion entre paréntesis
            let t = Custom(number: 42, address: 0x1337)
      return t
    }
  `;

  const custom = await query({ cadence });

  const { number, address } = custom;
    console.log(`number field is ${number}`)
    console.log(`address field is ${address}`)
};

Finalmente

Como siempre , ejecutamos el código con una IIFE:

(async () => {
  console.clear();
  await fetchCustom();
})();

Deberías ver el siguiente resultado en la consola:

number field is: 42
address field is: 0x0000000000001337

Te perdiste? Puedes revisar el código completo en este Codesandbox.

Hasta la próxima 👋

Recursos

Código del ejemplo - https://codesandbox.io/s/dev-to-fcl-return-custom-struct-sgywnx
Documentación sobre Structs en Cadence - https://docs.onflow.org/cadence/language/composite-types/#composite-type-declaration-and-creation

Otros recursos que te podrían ser útil:

Documentación de Flow - https://docs.onflow.org/ - Más información detallada acerca de la blockchain de Flow y como interactuar con ella.
Flow Portal - https://flow.com/ - Tu portal de entrada a Flow.
FCL JS - https://github.com/onflow/fcl-js - Código fuente y la habilidad de contribuir a la libreria de FCL JS.
Cadence - https://docs.onflow.org/cadence/ - Introduccion a Cadence.
Codesandbox - https://codesandbox.io - Un editor de texto genial para prototipar en el navegador.

Construye en Flow: Aprende FCL - 2. Pasando argumentos a Scripts

Bruno Gonzales — Mon, 30 May 2022 17:26:13 +0000

Resumen

Después de trabajar con el código en este post, sabrás como:

Pasar simple argumentos - Int , String, etc.
Pasar argumentos complejos - Arrays y Dictionaries.
Pasar estructuras complejas - Arrays de Dictionaries, etc.

Previamente en “Aprende FCL”

En posts pasados aprendimos como enviar scripts basicos en Cadence para su ejecución. En este te mostraré como pasar diferentes tipos de argumentos.

Para este y todos los siguientes ejemplos usaremos Codesandbox para simplificar el proceso.

Paso 1 - Instalación

Agrega "@onflow/fcl": "1.0.0" como dependencia a tu proyecto.

Paso 2 - Setup

Como la vez anterior importaremos los métodos necesarios y configuraremos FCL:

import { query, config } from "@onflow/fcl";
const api = "[https://rest-testnet.onflow.org](https://rest-testnet.onflow.org/)";
config().put("accessNode.api", api);

Paso 3 - Pasar enteros

passIntegers pasará dos enteros como argumentos a un simple script en Cadence el cual retornará su suma.

const passIntegers = async () => {
// Aquí almacenaremos el código que queremos ejecutar.
// Podemos ponerlo en la misma línea que pasamos el método "query"
// pero se ve mas simple de esta manera.
const cadence = pub fun main(a: Int, b: Int): Int{
       return a + b     
};

// A pesar de que ambos argumentos son números, tenemos que pasarlos como String.
const a = (5).toString();
const b = (12).toString();
const args = (arg, t) => [arg(a, t.Int), arg(b, t.Int)];

// "query" pasará código Cadence y los argumentos para acceder a un nodo para ejecutarse y retornará el resultado
// lee más acerca del método "query" en la documentación de FCL:
// [https://docs.onflow.org/fcl/reference/api/#query](https://docs.onflow.org/fcl/reference/api/#query)
const result = await query({ cadence, args });
console.log({ result }); 
};

Paso 4 - Pasar multiples tipos diferentes

passMultipleDifferentTypes pasará argumentos de tipo String, Bool, UFix64 y Address.

const passMultipleDifferentTypes = async () => {
  const cadence = `
    pub fun main(a: String, b: Bool, c: UFix64, d: Address): Address{
      return d
    }
  `;

  const a = "Hello";
  const b = true;
    // Todos los valores numericos tienen que ser pasados como Strings, recuerdas? :)
  const c = "42.0";
    // Las direcciones también deberían ser pasadas como Strings.
  const d = "0x01";

  // No todos los tipos son los mismos como especificamos en nuestro codigo en Cadence.
  const args = (arg, t) => [arg(a, t.String), arg(b, t.Bool), arg(c, t.UFix64)];

  const result = await query({ cadence, args });
  console.log({ result }); 
};

Paso 5 - Pasar un Array

El métodopassArray pasará un array de Strings y retornará una de ellas.

const passArray = async () => {
  const cadence = `
    pub fun main(a: [String]): String{
      return a[1]
    }
  `;

  const a = ["Hello", "Cadence"];
    // El tipo del argumento esta compuesto por t.Array y t.String
  const args = (arg, t) => [arg(a, t.Array(t.String))];

  const result = await query({ cadence, args });
  console.log({ result }); //
};

Paso 6 - Pasar un Dictionary

El métodopassDictionary pasará un Dictionary como argument y luego retornará el valor de uno de los campos en el diccionario. Las llaves de dicho Dictionary seran de tipo String y los valores de tipo Int.

const passDictionary = async () => {
    // En este ejemplo pasaremos un diccionario de Cadence como argumento.
    // Las llaves seran de tipo String y los valores de tipo Int.
  const cadence = `
    pub fun main(a: {String: Int}): Int?{
      return a["amount"]
    }
  `;

    // Los diccionarios deben ser representados como listas de pares de clave y valor.
    // Nótese que aquí deberiamos pasar un valor numérico como String 
  const a = [{ key: "amount", value: "42" }];
    // Para nuestro caso el tipo del diccionario esta compuesto de t.Dictionary, t.String y t.Int
  const args = (arg, t) => [
    arg(a, t.Dictionary({ key: t.String, value: t.Int }))
  ];

  const result = await query({ cadence, args });
  console.log({ result }); //
};

Paso 7 - Pasar argumentos complejos

El métodopassComplex demostrará como pasar un listado de diccionarios como argumento. Conceptualmente es una combinación de Arrays y tipos de Dictionary.

Finalmente

Agreguemos un IIFE al final del archivo para popularlo con los métodos que acabamos de definir.

(async () => {
  console.clear();
  await passIntegers();
  await passMultipleDifferentTypes();
  await passArray();
  await passDictionary();
  await passComplex();
})();

Cuando el polvo se asiente deberías ver lo siguiente en el historial de la consola.

{result: "17"}
{result: "0x0000000000000001"}
{result: "Cadence"}
{result: "42"}
{result: "1337"}

Practica pasando diferentes tipos de argumentos, debería ser una tarea común para ti en el futuro.

El código completo puede ser encontrado en Codesandbox aquí https://codesandbox.io/s/dev-to-fcl-script-arguments-knpuel

Hasta la próxima! 👋

Recursos

Otros recursos que te podrían ser útil:

Documentación de Flow - https://docs.onflow.org/ - Más información detallada acerca de la blockchain de Flow y como interactuar con ella.
Flow Portal - https://flow.com/ - Tu portal de entrada a Flow.
FCL JS - https://github.com/onflow/fcl-js - Código fuente y la habilidad de contribuir a la libreria de FCL JS.
Cadence - https://docs.onflow.org/cadence/ - Introduccion a Cadence.
Codesandbox - https://codesandbox.io - Un editor de texto genial para prototipar en el navegador.

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

Construye en Flow | Aprende FCL - 1. Introducción

Bruno Gonzales — Fri, 27 May 2022 16:12:05 +0000

Resumen
Después de atravesar los ejemplos en este post sabrás:

Qué es FCL y cómo se usa.
Cómo configurar FCL JS para interactuar con la Testnet de la blockchain de Flow.
Como ejecutar scripts en Cadence 💪

¿Qué es FCL?

La Flow Client Library (FCL) es un conjunto de patrones de comunicación estandarizados entre billeteras, aplicaciones y usuarios, usado para realizar una variedad de acciones desde tu dapp. Diferentes lenguajes tienen tienen su propia implementación de los conceptos y estándar de FCL .

En el lado de JavaScript, es un paquete NPM usado para interactuar con billeteras de usuarios y la blockchain de Flow tanto como en el navegador y en el ambiente del servidor.

Espera, que es la Flow blockchain?

Es una buena cosa que hayas preguntado! Flow es una blockchain construida para la siguiente generación de juegos, aplicaciones y activos digitales que les dan poder.

Hay muchas características diferentes que hacen a Flow único. Aquí algunas de ellas:

Cadence - El nuevo lenguaje de programación orientado a recursos que es fácil de aprender diseñado para dapps y bienes digitales.
Contratos inteligentes actualizables - Parcha bugs y actualiza partes pre-especificadas de un contrato inteligente de forma segura.
Rapido y de finalidad determinista - Flow esta construido para ser rápido, responsivo - logrando finalidad global en segundos.

Para más información acerca de la blockchain de Flow visita flow.com y docs.onflow.org

Ejemplo simple

En futuros posts demostraremos ejemplos mas complejos y significativos pero por ahora tratemos de hacer que la Testnet de Flow retorne un numero especifico para nosotros (por favor mantén presente que será mucho más interesante en un futuro).

Usaremos la plataforma Codesandbox para que compartir el resultado final sea mas fácil y permitirte clonar el sandbox y probar tus propias ideas.

Paso 1 - Instalación

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

Paso 2 - Importar

FCL JS expone multiples metodos desde el paquete para construir interacciones, configurar FCL, interactuar con la blockchain, etc. Importaremos los metodos:

query (https://docs.onflow.org/fcl/reference/api/#query)
config (https://docs.onflow.org/fcl/reference/api/#common-configuration-keys)

import { query, config } from "@onflow/fcl";

Paso 3 - Configurar FCL

FCL necesita saber donde enviar ese script para ejecución. La siguiente línea establecerá el endpoint de Access Node usando el método config .

const api = "[https://rest-testnet.onflow.org](https://rest-testnet.onflow.org/)"
config().put("accessNode.api", api);

Paso 4 - Ejecutar un script en la Testnet

En orden para ejecutar Cadence scripts en la blockchain de Flow, podemos enviarlos con el metodo query. Nuestro caso básico no utiliza argumentos, asi que solo pasaremos el script en Cadence.

const cadence = `
    pub fun main(): Int{
       return 42     
    }
`;
const theAnswer = await query({ cadence });
console.log({ theAnswer });

Finalmente - Código completo

import { query, config } from "@onflow/fcl";

const api = "[https://rest-testnet.onflow.org](https://rest-testnet.onflow.org/)"
config().put("accessNode.api", api);

// We will use IIFE to execute our code right away
(async () => {
    console.clear();

    const cadence = `
    pub fun main(): Int{
       return 42     
        }
    `;
    const theAnswer = await query({ cadence });
    console.log({ theAnswer });
})();

En el siguiente post resaltaremos como pasar un argumento a tus scripts. Quédate atentx! 👋

El sandbox completo esta disponible aquí: https://codesandbox.io/s/dev-to-fcl-introduction-zbhz0v

Links y fuentes

Flow Docs Site - https://docs.onflow.org/ - más información detallada acerca de la blockchain de Flow 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 libreria de FCL JS.
Cadence - https://docs.onflow.org/cadence/ - introduccion a Cadence.
Codesandbox - https://codesandbox.io - editor de texto genial para prototipar en el navegador.

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

How to create a testnet account on Flow 🚀

Bruno Gonzales — Mon, 07 Feb 2022 18:09:47 +0000

Open a new terminal or go to repl.it and sign in, then create a new Bash sandbox.
Type sh -ci "$(curl -fsSL https://storage.googleapis.com/flow-cli/install.sh)" inside main.sh.
Click the green button to execute the code that will install the Flow CLI.
On the console type flow keys generate > keys.md to save your keys 🗝️ to a file.
Click on Code, then Files, open keys.md and copy the text below Public Key 🗝️. Store your private and public key somewhere safe before deleting this file in order to protect your keys.
Visit the Flow faucet to paste the public key 🗝️ on the Public Key field and submit the form to create your account.
Congratulations! if you followed the previous steps you shall see your testnet account address on the screen. Click on View Account to see your account information on Flow View Source.

Testnet account information available at Flow View Source.

Challenge: Fund your account again through the faucet by clicking the Fund account button and entering your testnet account address. Then search the address on Flow View Source and verify that your balance was bumped 1000 FLOW.

🚀 Get started building on Flow reading the documentation or try Cadence on the playground.

Authentication in 6 minutes using Vue 3 and Flow blockchain

Bruno Gonzales — Sat, 26 Jun 2021 02:39:11 +0000

In this 6 minutes tutorial we'll Codesandbox to implement client side authentication using Flow and Vue.

https://youtu.be/834ehFyjmg8

DEV Community: Bruno Gonzales

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

Resumen

¿Por qué?

¿Como?

Sellado de nuevo? 🤔

Paso 1 - Instalación

Paso 2 - Configuración

Finalmente

Otras maneras de explorar transacciones

Recursos

Construye en Flow: Aprende FCL - 7. Como consultar una cuenta en Flow por su dirección

Resumen

Paso 1 - Instalación

Paso 2 - Configuración

Paso 3 - Copiar el resolvedor

Paso 4 - Encontrando la cuenta

Otras maneras de explorar una cuenta

Recursos

Construye en Flow: Aprende FCL - 6. Como consultar el último bloque de la cadena.

Resumen

Bloques? Como en Tetris?

De vuelta a la parte divertida

Paso 1 - Instalación

Paso 2 - Setup

Finalmente

Por qué querríamos el bloque sealed ? 🤔

Limitaciones

Recursos

Construye en Flow: Aprende FCL - 5. Obtener una lista de NFTs viviendo una direccion conocida

Paso 1- Instalación

Paso 2 - Setup

Paso 3 - Implementar el método getFlovatar

Paso 4 - Démosle un intento

Paso 5- Mejorando el script en Cadence

Finalmente

⭐Challenge Extra

Recursos

Construye en Flow: Aprende FCL - 4. Como resolver identidades en .find a direcciones en Flow

Paso 1 - Instalación

Paso 2 - Setup

Paso 3 - Resolver una Alias de Identidad a una dirección

Paso 4 - Resolver una dirección a un Alias de Identidad

Finalmente

Recursos

Construye en Flow: Aprende FCL - 3. Como retornar valores arbitrarios desde un script

Vista previa

Previamente en “Aprende FCL”

Paso 1 - Instalación

Paso 2 - Configuración

Paso 3 - Implementando el método fetchCustom

Finalmente

Recursos

Construye en Flow: Aprende FCL - 2. Pasando argumentos a Scripts

Construye en Flow | Aprende FCL - 1. Introducción

How to create a testnet account on Flow 🚀

Authentication in 6 minutes using Vue 3 and Flow blockchain

Por qué querríamos el bloque `sealed` ? 🤔

Paso 3 - Implementar el método `getFlovatar`

Paso 3 - Implementando el método `fetchCustom`