Как использовать Drizzle (Truffle and React), чтобы сделать лучший интерфейс для вашего Ethereum DApp
Я работаю над DApp и только начал разрабатывать интерфейс. Сначала я просто использовал Web3 и React, но было кошмаром пытаться подключиться к MetaMask и заставить все реагировать.
Вот тут-то и появляется Морось.
Drizzle - это библиотека, которая занимается обработкой провайдера пользователя (MetaMask, Mist и т. Д.) И обеспечивает удобное взаимодействие всех входящих данных с React. Единственная загвоздка в том, что это немного сбивает с толку. Мне потребовалось около 3 часов, чтобы понять, что делает Дризл, поэтому я хочу убедиться, что никто другой не должен пройти через это.
Настройка трюфеля и мороси
Первый шаг - настроить Truffle and Drizzle. Truffle поставляется с набором коробок, которые по сути являются просто шаблонами. Следуйте этим шагам, чтобы настроить шаблон Drizzle.
Это настроит Truffle с небольшой коллекцией простых контрактов и базовым интерфейсом. Основным файлом этого проекта является макет Home (Home.js). Вот где в игру вступает Drizzle.
Вот где это сбивает с толку.
Home.js, как получаются данные?
Сначала взгляните на HomeContainer.js.
mapStateToProps сообщит Drizzle, какие контракты вы хотите получить в качестве свойств с отслеживанием состояния. Когда вы вызываете drizzleConnect, эти состояния контракта будут переданы вашему компоненту в качестве свойств.
Эти реквизиты - это просто состояния, которые содержат данные, полученные вами для определенного контракта. С этими объектами нельзя выполнять какие-либо вызовы.
Если вы хотите выполнить какие-либо вызовы контракта, вам нужно использовать переменную drizzle, которая передается компоненту через контекст (это будет иметь больше смысла, когда мы создадим наш собственный компонент). Однако Home не запрашивает переменную drizzle, поэтому ему нужна помощь для получения данных.
Давайте посмотрим на строку кода в Home.js
В контракте SimpleStorage есть метод storedData, который просто возвращает все данные, хранящиеся в контракте.
ContractData - это компонент, предоставленный нам drizzle-react-components.
Вы можете посмотреть исходный код ContractData здесь.
ContractData - это собственный подключенный компонент Drizzle, который будет вызывать контракт и отображать данные в виде текста. Это отлично подходит для тестирования, но что, если мы хотим визуализировать данные по-другому?
Создание собственного компонента мороси
Сначала сделаем контейнер. Я буду называть этот компонент GetTokens, потому что он будет просто получать баланс текущего пользователя из TutorialToken контракта.
В mapStateToProps я говорю Дризл, что хочу получить данные из TutorialToken контракта в качестве опоры. Затем я вызываю drizzleConnect для создания контейнера, используя GetTokens в качестве компонента.
Сначала посмотрите на строки 31–33. Я обязательно указываю, что этот компонент должен получать переменную drizzle в контексте. Это то, что содержит все фактические объекты для моих контрактов и позволяет мне совершать звонки.
Теперь посмотрим на строки 9 и 10. Я получаю переменную drizzle из контекста, а затем делаю balanceOf cacheCall, который возвращает ключ для данных и кэширует результат в свойство TutorialToken.
Теперь нам нужно получить данные с помощью этого ключа.
В строке 21 мы теперь видим, как используются реквизиты контракта. Объект TutorialToken, переданный как опора, будет иметь объект для каждого метода. Когда выполняется вызов метода, свойство будет обновляться с результатом реактивно.
Затем мы используем dataKey, полученный от cacheCall, чтобы получить значение.
Заключение
Я знаю, что написал это не лучшим образом, но, надеюсь, этот простой пример компонента, который получает данные из контракта, будет вам полезен!
Таким образом, вам нужно получить состояние контракта как опору, но также получить переменную моросящего дождя, чтобы совершать вызовы.
Если что-то все еще непонятно, дайте мне знать в комментариях, и я буду рад помочь!
