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

фронтенд

javascript

ethers.js

the graph

defi

Для начинающих

Маркус Ваас

soliditydeveloper.com

27 апреля 2020 г.

6 минут на чтение

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

Установка

Для установки требуется 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 (открывается в новой вкладке). Чтобы увидеть свое приложение, откройте http://localhost:3000/. Когда вы будете готовы развернуть его в рабочей среде, создайте минифицированную сборку с помощью yarn build. Один из простых способов хостинга — это Netlify (открывается в новой вкладке). Вы можете создать репозиторий на GitHub, добавить его в Netlify, настроить команду сборки, и все готово! Ваше приложение будет размещено и доступно для всех. И все это совершенно бесплатно.

Функции

React и create-react-app

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

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

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

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

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

ethers.js

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

The Graph

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

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

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

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

Apollo

Благодаря интеграции Apollo Boost (открывается в новой вкладке) вы можете легко интегрировать The Graph в свое dapp на React. Особенно при использовании хуков React и Apollo (открывается в новой вкладке) получение данных становится таким же простым, как написание одного запроса 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 (открывается в новой вкладке) — это децентрализованный рынок кредитования. Вкладчики предоставляют ликвидность рынку для получения пассивного дохода, в то время как заемщики могут брать кредиты, используя залог. Одной из уникальных особенностей Aave являются флеш-кредиты (открывается в новой вкладке), которые позволяют вам занимать деньги без какого-либо залога, при условии, что вы вернете кредит в рамках одной транзакции. Это может быть полезно, например, для получения дополнительных средств при арбитражной торговле.

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

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

Compound

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

Юнисвоп

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

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

Sablier

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

Что дальше?

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