Создаем на Flow | Изучаем FCL — 2. Передавайте аргументы в скрипты

Краткий обзор

После работы с данными в этой статье вы должны знать, как это сделать:

передать простые аргументы - Int,String и т. д.
передавать сложные аргументы - Arrays и Dictionaries
передавать сложные структуры - Arrays of Dictionaries и т.п.

💡Лучше учиться с помощью видео? К счастью для вас, есть видео, которое вы можете смотреть вместе с этим руководством. Рассказывает один и единственный разработчик Flow Developer Advocate - Kimcodeashian!

Контент Kimazing

https://youtu.be/DWz8Plv5n3k

Ранее в разделе "Изучение FCL"

В предыдущем посте мы узнали, как отправить на выполнение базовый скрипт Cadence. В этой статье я покажу вам, как передавать различные типы аргументов.

Для этого и всех следующих примеров мы будем использовать Codesandbox, чтобы упростить процесс 🙂 .

Шаг 1 - Установка

Добавьте "@onflow/fcl": "1.0.0" в качестве зависимости

Шаг 2 - Настройка

Как и в прошлый раз импортируем необходимые методы и настраиваем FCL:

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

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

Шаг 3 - Передача целых значений

passIntegers передаст два целых аргумента простому скрипту Cadence, который вернет нам их сумму.

const passIntegers = async () => {
  // Here we will store the code we want to execute.
  // We can inline it into the object we pass to "query" method,
  // but it feels cleaner this way
  const cadence = `
    pub fun main(a: Int, b: Int): Int{
      return a + b
    }
  `;

  // Even though both of the arguments are numbers, we need to pass them as strings representation
  const a = (5).toString();
  const b = (12).toString();
  const args = (arg, t) => [arg(a, t.Int), arg(b, t.Int)];

  // "query" will pass Cadence code and arguments to access node for execution and return us a result:
  // read more about "query" method on Flow Docs Site:
  // https://docs.onflow.org/fcl/reference/api/#query
  const result = await query({ cadence, args });
  console.log({ result }); //
};

Шаг 4 - Передача нескольких различных типов

passMultipleDifferentTypes передаст аргументы String, Bool, UFix64 и 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;
  // All  numeric values should be passed as strings, remember? :)
  const c = "42.0";
  // Address should be passed as string value as well
  const d = "0x01";

  // Types should always mirror argument types defined in script
  const args = (arg, t) => [arg(a, t.String), arg(b, t.Bool), arg(c, t.UFix64), arg(d, t.Address)];

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

Шаг 5 - Передача Array

Метод passArray передает строки Array и возвращает одну из них обратно.

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

  const a = ["Hello", "Cadence"];
  // Type of the argument is composed of t.Array and t.String
  const args = (arg, t) => [arg(a, t.Array(t.String))];

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

Шаг 6 - Передача Dictionary

Метод passDictionary передает Dictionary в качестве аргумента, а затем возвращает значение одного из полей. Ключи указанного словаря будут иметь тип String, а значения - тип Int.

const passDictionary = async () => {
  // In this example we will pass to Cadence Dictionary as argument
  // keys will be of type "String" and values of type "Int"
  const cadence = `
    pub fun main(a: {String: Int}): Int?{
      return a["amount"]
    }
  `;

  // Dictionaries should be represented as array of key/value pairs of respective types
  // Note that we shall pass numeric value as string here
  const a = [{ key: "amount", value: "42" }];
  // Dictionary type is composed out of t.Dictionary, t.String and t.Int for our case
  const args = (arg, t) => [
    arg(a, t.Dictionary({ key: t.String, value: t.Int }))
  ];

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

Шаг 7 - Передача сложного аргумента

passComplex покажет, как передать Arrays of Dictionaries в качестве аргумента. Концептуально это смесь Arrays и Dictionary.

const passComplex = async () => {
  // In this example we will pass an Array of Dictionaries as argument
  // Keys will be of type "String" and values of type "Int"
  const cadence = `
    pub fun main(a: [{String: Int}]): Int?{
      return a[0]["amount"]
    }
  `;

  // Array of Dictionaries should be represented as array of arrays of key/value pairs of respective types
  // Note that we shall pass numeric value as string here
  const a = [[{ key: "amount", value: "1337" }]];
  // Dictionary type is composed out of t.Dictionary, t.String and t.Int for our case
  const args = (arg, t) => [
    arg(a, t.Array(t.Dictionary({ key: t.String, value: t.Int })))
  ];

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

Заключение

Давайте добавим IIFE в конец файла и заполним его методами, которые мы только что разобрали:

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

Когда все разрешится, в журнале консоли вы увидите следующее:

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

Практикуйтесь в передаче различных типов аргументов, поскольку в будущем это станет для вас обычным делом.

Полный код можно найти на Codesandbox здесь:
https://codesandbox.io/s/dev-to-fcl-script-arguments-knpuel

До скорого! 👋

Информационные ресурсы

Другие источники, которые могут быть вам полезны:

(ENG) | Документация Flow - https://docs.onflow.org/ - более детальная информации о блокчейне Flow и как взаимодействовать с ним
(ENG) | Flow Portal - https://flow.com/ - your entry point to Flow
(ENG) | FCL JS - https://github.com/onflow/fcl-js - Исходный код и возможность поучаствовать в разработке библиотеки FCL JS library
(ENG) | Cadence - https://docs.onflow.org/cadence/ - Введение в язык программирования Cadence
Codesandbox - https://codesandbox.io - Замечательная среда разработки и прототипирования прямо в вашем браузере