Построение на основе Flow | Изучение FCL — 2. Передача аргументов сценариям


Обзор

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

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

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

Kimazing Content

Предыдущий материал «Изучаем 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 — Передача массива

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

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 — Передать словарь

Метод passDictionary передаст словарь в качестве аргумента и вернет значение одного из полей. Ключи словаря будут иметь тип 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 покажет, как передавать массив словарей в качестве аргумента. Концептуально это смесь массива и словаря.

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

До следующего раза! 👋

Ресурсы

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

  • Flow Docs Site — https://docs.onflow.org/ — более подробная информация о блокчейне Flow и о том, как с ним взаимодействовать.
  • Flow Portal — https://flow.com/ — ваша точка входа в Flow
  • FCL JS — https://github.com/onflow/fcl-js — исходный код и возможность внести свой вклад в библиотеку FCL JS
  • Cadence — https://docs.onflow.org/cadence/ — Введение в Cadence
  • Codesandbox — https://codesandbox.io — удивительная браузерная IDE, позволяющая быстро создавать прототипы.

Оцените статью
Procodings.ru
Добавить комментарий