Сегодня мы собираемся собрать очень быстрое базовое приложение на React, которое продемонстрирует, как подключить и пополнить тестовый кошелек Algorand с помощью расширения Algosigner и языка децентрализованных приложений Reach. Для создания приложения мы будем использовать шаблон create-react-app; хотя это немного излишне из-за тестирования и файлов CSS, которые на самом деле не используются в этом руководстве, альтернативное nano-react-app пока нельзя использовать, поскольку команда Reach находится в процессе поддержки Parcel. Я обязательно опубликую обновление в этой статье, как только она будет поддерживаться.

ОБНОВЛЕНИЕ: хорошо, теперь Parcel поддерживается; см. это руководство, чтобы узнать, как интегрировать его в ваше приложение.

ОБНОВЛЕНИЕ — 27.11.2021: чтобы этот учебник работал с последней библиотекой Reach, были внесены некоторые изменения:

  • Перешел с использования getDefaultAccount на createAccount. Это устраняет все события подписания, что упрощает тестирование децентрализованных приложений. Это также означает, что вы можете игнорировать приведенное ниже требование Algosigner.
  • Перешли с использования старого метода тестового кошелька фонда на fundFromFaucet
  • Изменено использование метода loadStdlib для импорта внешней библиотеки Reach, чтобы заставить ее работать с последней версией Reach.

Для начала есть некоторые предпосылки. Это следующие:

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

Для начала мы собираемся открыть VS Code, использовать CTRL + `, чтобы открыть терминал, и ввести cd desktop (или любую другую папку, в которой вы хотите разместить этот проект). Теперь мы собираемся запустить npx create-react-app connect-wallet для создания шаблона. Как только это будет сделано (загрузка занимает некоторое время), мы откроем папку connect-wallet в VS Code.

Здесь, в папке проекта, мы собираемся снова открыть терминал и ввести yarn add @reach-sh/stdlib, чтобы установить пакет расширения (вы можете использовать npm, если хотите). После завершения загрузки мы собираемся открыть src/App.js и импортировать reach и useRef следующим образом:

Теперь с этой настройкой мы перейдем к возврату, очистим шаблонный HTML и вставим свой собственный

Прежде чем мы создадим эту функцию connectWallet, нам нужно создать две вспомогательные функции, которые она вызывает: getAccount и getBalance. Чтобы начать этот процесс, мы создадим две переменные:

Это позволит нам хранить информацию об учетной записи из кошелька Algorand и его баланс. Теперь о первой функции: getAccount

Как вы можете видеть, это довольно простая асинхронная функция и всего одна строка, но я превратил ее во вспомогательную функцию, чтобы лучше представить этапы процессов этого руководства. Он вызывает команду reach.createAccount, которую мы увидим в действии позже, для создания тестовой учетной записи; а затем мы регистрируем информацию об этих тестовых учетных записях, чтобы мы могли получить приблизительное представление о том, какие данные она нам дает. Во всяком случае, на функцию getBalance!

Этот немного сложнее. Он начинается с захвата reach.balanceOfresult для учетной записи в локальной переменной; Причина, по которой эта команда — не все, что нам нужно, заключается в том, что она фиксирует баланс в микроалгоритмах. Чтобы изменить это rawBalance на то, что оно находится в Algos, мы запускаем его через команду reach.formatCurrency, которая завершит этот перевод для нас. Затем мы зарегистрируем баланс, чтобы увидеть, сколько средств находится в этом кошельке. Теперь, когда они оба завершены, мы можем вернуться к функции connectWallet.

На самом деле это просто вызывающая программа; поскольку обе предыдущие функции являются асинхронными, так и эта будет, пока она ожидает их обеих. К сожалению, мы еще не готовы запустить приложение. Теперь нам нужно загрузить Reach в нашу папку src, чтобы мы могли запустить ключевую часть этого: локальную тестовую сеть Algorand.

Для этого мы перейдем к этой части их документации, возьмите эту команду curl: curl https://raw.githubusercontent.com/reach-sh/reach-lang/master/reach -o reach ; chmod +x reach, вернитесь в VS Code, откройте терминал WSL, введите cd src, вставьте эту команду curl и запустите ее. Теперь, когда у нас правильно установлен Reach, мы можем запустить эту команду REACH_CONNECTOR_MODE=ALGO-devnet ./reach devnetиз нашего текущего места в терминале, чтобы запустить тестовую сеть Algorand.

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

Честно говоря, не на что смотреть; давайте нажмем на кнопку подключения кошелька:

ОБНОВЛЕНИЕ — 27.11.2021: из-за изменения этого руководства для использования createAccount вместо getDefaultAccount вы больше не увидите это всплывающее окно.

Здесь нам нужно ввести фразу из созданного нами одноразового тестового кошелька (или мы можем нажать кнопку «Отмена», чтобы создать временный кошелек, эксклюзивный для этого сеанса браузера):

ПРИМЕЧАНИЕ. Это приглашение — не то, что пользователь увидит в ваших будущих децентрализованных приложениях в производственной среде, оно просто предназначено для ускорения разработки за счет автоматического подписания транзакций. Чтобы просмотреть другие методы подключения dapp, доступные для Algorand в Reach, перейдите на эту страницу в документации Reach.

И успеха! Мы зафиксировали как информацию об учетной записи, так и баланс кошельков.

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

Во-первых, мы добавим новую переменную fundAmount под другими переменными. Затем мы создадим новую функцию, которая будет ее использовать: fundWallet

ОБНОВЛЕНИЕ — 27.11.2021: это руководство было обновлено, чтобы использовать reach.fundFromFaucet, который является гораздо более простым способом пополнения тестового счета, чем несколько шагов, используемых в предыдущих версиях.

Этот кошелек начинается со звонка reach.getFaucet, чтобы дать нам тестовый сбор средств для работы. Затем он использует этот кран с reach.transfer для перемещения тестовых средств из крана в наш тестовый кошелек. Как некоторые из вас могли заметить, reach.parseCurrency делает обратное reach.formatCurrency и превращает алгоритмы в микроалго. Затем он вызывает getBalance, чтобы обновить переменную баланса нашего приложения с новым балансом кошелька.

Однако эта функция не будет работать сама по себе, поэтому нам нужно добавить в наше приложение поле ввода (для захвата fundAmount) и кнопку (для вызова fundWallet):

И это должно сработать, при условии, что наше приложение все еще работает, мы сможем обновить страницу и увидеть это:

Теперь мы подключим наш кошелек, введем 5 в этот ввод, нажмем «пополнить кошелек», и мы должны увидеть… (через несколько секунд)

Отлично! Наш тестовый кошелек был успешно пополнен с помощью 5 тестовых алгоритмов!

Теперь мы прошли через ворота в королевство децентрализованной разработки приложений. Благодаря возможности подключать наши приложения к тестовым кошелькам и финансировать их с помощью тестовых средств, теперь у нас есть основные инструменты для создания и тестирования децентрализованных приложений для Algorand.

Однако, вероятно, лучше всего начать с основного руководства, составленного командой Reach. Он познакомит вас с другой стороной разработки децентрализованных приложений (а именно с контрактами) и вернется к тому, на чем вы сейчас находитесь.

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

Не забудьте присоединиться к Reach discord для дальнейших вопросов и спасибо всем за чтение!