Быстрый старт разработки фронтенда вашего децентрализованного приложения (dapp) с помощью create-eth-app

В прошлый раз мы рассмотрели общую картину Solidity (opens in a new tab) и уже упоминали create-eth-app (opens in a new tab). Теперь вы узнаете, как его использовать, какие функции в него интегрированы, а также получите дополнительные идеи по его расширению. Это приложение, созданное Полом Разваном Бергом (Paul Razvan Berg), основателем Sablier (opens in a new tab), даст быстрый старт вашей разработке фронтенда и поставляется с несколькими дополнительными интеграциями на выбор.

Установка

Для установки требуется Yarn 0.25 или выше (npm install yarn --global). Это так же просто, как выполнить:

yarn create eth-app my-eth-app
cd my-eth-app
yarn react-app:start

Внутри (под капотом) он использует create-react-app (opens in a new tab). Чтобы увидеть свое приложение, откройте http://localhost:3000/. Когда вы будете готовы развернуть его в рабочей среде, создайте минифицированную сборку с помощью yarn build. Один из простых способов хостинга — это Netlify (opens in a new tab). Вы можете создать репозиторий на GitHub, добавить его в Netlify, настроить команду сборки, и все готово! Ваше приложение будет размещено и доступно для всех. И все это совершенно бесплатно.

Функции

React и create-react-app

Прежде всего, сердце приложения: React и все дополнительные функции, поставляемые с create-react-app. Использование только этого — отличный вариант, если вы не хотите интегрировать Эфириум. Сам React (opens in a new tab) делает создание интерактивных пользовательских интерфейсов (UI) действительно простым. Возможно, он не так дружелюбен к новичкам, как Vue (opens in a new tab), но он по-прежнему используется чаще всего, имеет больше функций и, что самое главное, тысячи дополнительных библиотек на выбор. create-react-app также позволяет очень легко начать работу с ним и включает в себя:

• Поддержку синтаксиса React, JSX, ES6, TypeScript, Flow.
• Дополнительные возможности языка помимо ES6, такие как оператор расширения объектов (object spread operator).
• CSS с автопрефиксами, поэтому вам не нужны -webkit- или другие префиксы.
• Быструю интерактивную программу запуска модульных тестов со встроенной поддержкой отчетов о покрытии.
• Сервер разработки в реальном времени, который предупреждает о распространенных ошибках.
• Скрипт сборки для объединения JS, CSS и изображений для рабочей среды с хешами и картами кода (sourcemaps).

В частности, create-eth-app использует новые эффекты хуков (hooks effects) (opens in a new tab). Это метод написания мощных, но очень маленьких так называемых функциональных компонентов. Смотрите раздел об Apollo ниже, чтобы узнать, как они используются в create-eth-app.

Рабочие пространства Yarn (Yarn Workspaces)

Рабочие пространства Yarn (opens in a new tab) позволяют вам иметь несколько пакетов, но при этом управлять ими всеми из корневой папки и устанавливать зависимости для всех сразу с помощью yarn install. Это особенно имеет смысл для небольших дополнительных пакетов, таких как управление адресами смарт-контрактов/ABI (информация о том, где вы развернули какие смарт-контракты и как с ними взаимодействовать) или интеграция The Graph, которые являются частью create-eth-app.

ethers.js

Хотя Web3 (opens in a new tab) по-прежнему используется чаще всего, ethers.js (opens in a new tab) в последний год набирает все большую популярность в качестве альтернативы и именно он интегрирован в create-eth-app. Вы можете работать с ним, заменить его на Web3 или рассмотреть возможность обновления до ethers.js v5 (opens in a new tab), который почти вышел из стадии бета-тестирования.

The Graph

GraphQL (opens in a new tab) — это альтернативный способ обработки данных по сравнению с RESTful API (opens in a new tab). У него есть несколько преимуществ перед RESTful API, особенно для децентрализованных данных блокчейна. Если вам интересны причины этого, взгляните на статью GraphQL будет управлять децентрализованным интернетом (opens in a new tab).

Обычно вы получаете данные напрямую из вашего смарт-контракта. Хотите узнать время последней сделки? Просто вызовите MyContract.methods.latestTradeTime().call(), который извлекает данные из узла Эфириума в ваше децентрализованное приложение (dapp). Но что, если вам нужны сотни различных точек данных? Это приведет к сотням запросов данных к узлу, каждый из которых требует RTT (времени приема-передачи) (opens in a new tab), что сделает ваше dapp медленным и неэффективным. Одним из обходных путей может быть функция вызова сборщика внутри вашего контракта, которая возвращает несколько данных одновременно. Однако это не всегда идеально.

Кроме того, вас могут заинтересовать исторические данные. Вы хотите знать не только время последней сделки, но и время всех сделок, которые вы когда-либо совершали сами. Используйте пакет подграфа create-eth-app, прочитайте документацию (opens in a new tab) и адаптируйте его к своим собственным контрактам. Если вы ищете популярные смарт-контракты, возможно, для них уже существует подграф. Загляните в обозреватель подграфов (opens in a new tab).

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

Apollo

Благодаря интеграции Apollo Boost (opens in a new tab) вы можете легко интегрировать The Graph в свое dapp на React. Особенно при использовании хуков React и Apollo (opens in a new tab) получение данных становится таким же простым, как написание одного запроса GraphQL в вашем компоненте:

const { loading, error, data } = useQuery(myGraphQlQuery)

React.useEffect(() => {
  if (!loading && !error && data) {
    console.log({ data })
  }
}, [loading, error, data])

Шаблоны

Вдобавок ко всему, вы можете выбирать из нескольких различных шаблонов. На данный момент вы можете использовать интеграцию с Aave, Compound, Юнисвоп или Sablier. Все они добавляют важные адреса сервисных смарт-контрактов вместе с готовыми интеграциями подграфов. Просто добавьте шаблон в команду создания, например yarn create eth-app my-eth-app --with-template aave.

Aave

Aave (opens in a new tab) — это децентрализованный рынок кредитования. Вкладчики предоставляют ликвидность рынку для получения пассивного дохода, в то время как заемщики могут брать кредиты, используя залог. Одной из уникальных особенностей Aave являются флеш-кредиты (opens in a new tab), которые позволяют вам занимать деньги без какого-либо залога, при условии, что вы вернете кредит в рамках одной транзакции. Это может быть полезно, например, для получения дополнительных средств при арбитражной торговле.

Торгуемые токены, которые приносят вам проценты, называются aTokens.

Когда вы решите интегрировать Aave с create-eth-app, вы получите интеграцию подграфа (opens in a new tab). Aave использует The Graph и уже предоставляет вам несколько готовых к использованию подграфов в сетях Ропстен (opens in a new tab) и Мейннет (opens in a new tab) в необработанном (raw) (opens in a new tab) или отформатированном (opens in a new tab) виде.

Compound

Compound (opens in a new tab) похож на Aave. Интеграция уже включает новый подграф Compound v2 (opens in a new tab). Токены, приносящие проценты, здесь, как ни странно, называются cTokens.

Юнисвоп

Юнисвоп (opens in a new tab) — это децентрализованная биржа (DEX). Поставщики ликвидности могут зарабатывать на комиссиях, предоставляя необходимые токены или эфир для обеих сторон сделки. Она широко используется и поэтому обладает одной из самых высоких ликвидностей для очень широкого спектра токенов. Вы можете легко интегрировать ее в свое dapp, чтобы, например, позволить пользователям обменивать свой ETH на DAI.

К сожалению, на момент написания этой статьи интеграция доступна только для Юнисвоп v1, а не для только что выпущенной v2 (opens in a new tab).

Sablier

Sablier (opens in a new tab) позволяет пользователям осуществлять потоковые денежные платежи. Вместо одного дня выплаты вы фактически получаете свои деньги постоянно без дальнейшего администрирования после первоначальной настройки. Интеграция включает в себя собственный подграф (opens in a new tab).

Что дальше?

Если у вас есть вопросы о create-eth-app, перейдите на сервер сообщества Sablier (opens in a new tab), где вы можете связаться с авторами create-eth-app. В качестве первых следующих шагов вы можете интегрировать UI-фреймворк, такой как Material UI (opens in a new tab), написать запросы GraphQL для данных, которые вам действительно нужны, и настроить развертывание.