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

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.