Создаем на Flow | Изучаем FCL — 10. Как создать новый аккаунт Testnet с помощью Blocto Wallet

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

Наши предыдущие исследования Flow Network были довольно безопасными - скрипты не могут изменить состояние сети, они могут только считывать из нее данные. Пришло время изменить это и сделать несколько "уточнений" здесь и там. Но для этого нам понадобится учетная запись Flow. Это можно сделать 4 различными способами:

• Использование кошелька Blocto Wallet (это тема данного поста)
• Использование кошелька Lilico - мы рассказываем об этом в главе 11
• через Flow Faucet и Flow CLI - смотрите главу 12 этой серии статей
• подписав и отправив транзакцию, в результате которой будет создан новый аккаунт (хотя он у вас уже должен быть 😛)

Лично я склоняюсь к мнению, что самый простой способ завести новый счет - это Blocto Wallet. Этим мы и займемся сегодня:

• создать новую учетную запись в Blocto Wallet
• аутентифицироваться на счете через FCL и Blocto Wallet
• получить баланс счета, используя адрес кошелька

Как?

Существует 2 способа создания нового кошелька в Blocto:

• с помощью мобильного приложения
• с помощью всплывающего окна FCL

Существует множество статей, описывающих процесс создания кошелька с помощью мобильного приложения. Например:

• https://dappradar.com/blog/how-to-install-and-use-blocto-wallet-on-flow
• https://medium.com/bytenext/how-to-create-blocto-wallet-858ee3a9212c
• https://avatarart.io/blog/details/how-to-create-blocto-wallet

Хотя мобильные устройства - это здорово и все такое - мы сократим лишние шаги и создадим наш кошелек с помощью FCL.

Blocto предоставляет хорошие пошаговые инструкции по настройке и последующему вызову всплывающего окна входа на их сайте с документацией. Мы будем использовать эти кусочки и части, чтобы сделать Blocto Wallet Creator 🧙♂️!

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

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

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

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

// Import methods from FCL
import { unauthenticate, logIn, config } from "@onflow/fcl";

// Specify the API endpoint - this time we will use Testnet
const api = "https://rest-testnet.onflow.org";

// This is the endpoint, which will be responsible for wallet authorization
const handshake = "https://flow-wallet-testnet.blocto.app/authn";

// Configure FCL to use mainnet as the access node
config()
  // connect to Flow testnet
  .put("accessNode.api", api)
  .put("challenge.handshake", handshake);

Шаг 3 - Создание последовательности входа в систему

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

  // just in case we have authenticated user, we will log him out first
    await unauthenticate();

    // calling "logIn" will invoke "Sign in with Blocto - Testnet" popup
    const wallet = await logIn();

  console.log({ wallet });})();
})();

Шаг 4 - Запуск!

Когда код будет выполнен, вы должны увидеть всплывающее окно с заголовком "Sign in with Blocto Testnet".

Введите свой адрес электронной почты и нажмите кнопку "Войти / Зарегистрироваться".

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

Если пароль введен правильно, во всплывающем окне Blocto появится адрес вашего кошелька:

После нажатия кнопки "Подтвердить" в журнале консоли должны появиться данные учетной записи (это для моего адреса, но ваш должен выглядеть аналогично):

{
    f_type: "USER",
    f_vsn: "1.0.0",
    addr: "0xe7dd0f2ee4e077e2",
    cid: "ca88f086a545ce3c552d80",
    loggedIn: true,
    expiresAt: 1656443452552
}

Поздравляем, теперь вы обладатель свежеиспеченного аккаунта Flow 🍰!

Шаг 5 - Проверить баланс счета

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

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

и обновим наш IIEFE:

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

  const wallet = await logIn();
  console.log({ wallet });

    // We will take only "balance" field from account details
  const { balance }= await account(wallet.addr);
  const flowBalance = result.balance / Math.pow(10, 8);
  console.log({ flowBalance });
})();

Это 0,001 FLOW на вашем счету. Вы богаты 🤑!

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

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

• Codesandbox Wallet Creator - https://codesandbox.io/s/dev-to-fcl-create-account-q60f2b
• Документация: Создание кошелька Flow - https://docs.onflow.org/flow-token/available-wallets/
• Blocto: Вход / Регистрация -https://docs.blocto.app/blocto-sdk/javascript-sdk/flow/login-register#step-1-configure-fcl

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

• (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 - Замечательная среда разработки и прототипирования прямо в вашем браузере