Создайте и разверните децентрализованное приложение для обмена криптовалютами Web 3.0

• Создание и развертывание децентрализованного приложения Web 3.0.  

• Поддержка MetaMask, извлечение данных из смарт-контрактов и создание токенов ERC-20.  

• Понимание работы Web 3.0 и смарт-контрактов через создание приложения.  

• Разработка профессионального клона Uniswap.  

• Размещение приложения в Интернете для портфолио.  

• Необходимые знания: React, структура файлов и папок, функциональные компоненты.  

• Создание и компиляция смарт-контрактов.  

• Адаптивность приложения на всех устройствах.  

• Использование Crank для визуального отслеживания выполнения кода.  

• Подключение к кошельку и обмен токенами.  

• Создание и извлечение данных из блокчейна в реальном времени.  

• Адаптация приложения для мобильных устройств.  

• Бесплатные ресурсы: дорожная карта Web 3.0 и шпаргалка по основательности.  

• Курс Web 30: создание функциональной торговой площадки NFT.  

• Специальный код скидки для участников.  

• Использование ядра и периферии Uniswap v2.  

• Компиляция и развертывание смарт-контрактов с помощью Crank.  

• Загрузка и настройка Crank.  

• Переименование проекта и знакомство с узлами Crank.  

• Использование библиотеки узлов и заметок.  

• Компиляция и развертывание смарт-контрактов Uniswap.  

• Создание и настройка хранилища Crank.  

• Определение типа объекта конфигурации.  

• Получение данных для компиляции и развертывания смарт-контракта.  

• Metamask - популярный криптокошелек для работы в Web3.  

• Скачайте и установите расширение в браузере.  

• Создайте новый кошелек, выбрав безопасный пароль и согласившись с условиями.  

• Секретная фраза для восстановления - ключевой элемент безопасности.  

• Запишите фразу в блокнот или на бумагу.  

• Введите слова в Metamask для подтверждения.  

• Переключитесь на тестовую сеть для девочек.  

• Скопируйте адрес кошелька в буфер обмена.  

• Используйте веб-сайт Alchemy для компиляции и развертывания смарт-контрактов.  

• Зарегистрируйтесь на Alchemy через Google или введите данные.  

• Выберите Ethereum в качестве блокчейна.  

• Создайте новое приложение, например, "Uniswap Clone".  

• Подключитесь к сети Ethereum, но используйте тестовую сеть для девочек.  

• Создайте приложение и скопируйте API-ключ и HTTPS-адрес.  

• Храните данные в переменных окружения для безопасности.  

• Скопируйте адрес кошелька из Metamask.  

• Используйте сайт girly faucet для получения тестового эфира.  

• Введите адрес кошелька и отправьте эфир для компиляции и развертывания смарт-контрактов.  

• Подключите данные магазина к конфигурации приложения.  

• Используйте библиотеку узлов для обработки событий, ошибок и подтверждений.  

• Сгруппируйте связанные узлы для удобства работы.  

• Группируем узлы компилятора и средства развертывания маршрутизатора в одну группу.  

• Переименовываем магазин в "config".  

• Подключаем start к конфигурации для запуска проекта.  

• Запускаем проект с помощью значка воспроизведения или сочетания клавиш.  

• Crank устанавливает зависимости npm.  

• Обнаруживаем ошибку в фабрике компиляции и развертывания.  

• Двойное нажатие на фабрику показывает ошибку.  

• Ошибка связана с длиной закрытого ключа.  

• Исправление ошибки путем экспорта правильного закрытого ключа из Metamask.  

• Вставляем правильный закрытый ключ и запускаем проект снова.  

• Проверяем успешность развертывания через окно вывода.  

• Используем ярлык для повторного запуска приложения.  

• Ждем 24 подтверждений для подтверждения успешного развертывания.  

• Проверяем статус на Etherscan.  

• Успешное развертывание смарт-контракта без написания кода.  

• Возвращаемся в режим редактирования и настраиваем ожидание подтверждения.  

• Переключаем значение ожидания на 2 для ускорения процесса.  

• Подключаем вывод подтверждения к входу для отправки адреса контракта.  

• Используйте "хлебные крошки" для перехода на уровень выше.  

• Перенесите события и ошибки в верхнюю часть экрана.  

• Удалите узел регистратора.  

• Компилятор маршрутизатора принимает хэш заводской инициализации.  

• Добавьте узел для подключения выходных данных компилятора.  

• Средство развертывания маршрутизатора требует заводской адрес, eth, конфигурацию и контракт.  

• Конфигурация содержит множество свойств, нам нужен URL провайдера.  

• Используйте узел для извлечения элемента по ключу.  

• Передайте конфигурацию как словарь и получите URL провайдера.  

• Подключите заводской адрес и конфигурацию к входным данным.  

• Получите завернутый адрес ethereum w-адрес.  

• Подключите сеть к вводу eth-адресов.  

• Найдите официанта по контракту и подключите подтверждение.  

• Установите требуемое число равным двум.  

• Добавьте выходы для адреса маршрутизатора, событий и ошибок.  

• Получите abi из компилятора маршрутизатора.  

• Дублируйте узел для получения сети и назовите его "получить ключ".  

• Подключаем скомпилированный маршрутизатор к словарной части.  

• Добавляем ключ "a" в строку.  

• Подключаем адрес маршрутизатора и события от средства развертывания.  

• Передаем заводской адрес и конфигурацию.  

• Используем средство получения элементов для получения заводского интерфейса ABI.  

• Подключаем заводской интерфейс ABI к заводскому API маршрутизатора.  

• Создаем новый вывод "abi" и подключаем его к заводскому интерфейсу ABI.  

• Дублируем узел мультиплексирования событий и узел loggerw.  

• Подключаем узел logger к адресу маршрутизатора.  

• Запускаем процесс и ждем подтверждения.  

• Проверяем адрес развернутого контракта на etherscan.  

• Сохраняем работу и проверяем успешность развертывания.  

• Объясняем важность пулов ликвидности для обмена токенами.  

• Создаем пулы ликвидности с помощью сумматора ликвидности.  

• Добавляем пары и крайние сроки для операций с ликвидностью.  

• Подключаем пары и крайние сроки к сумматору ликвидности.  

• Используем конфигурацию для получения учетных данных и других переменных.  

• Применяем средство получения элементов для извлечения данных из конфигурации.  

• Объединяем значение с двумя адресами для создания контракта маршрутизатора.  

• Указываем тип данных вместо прототипа, чтобы разрешить динамический тип.  

• Пример: "тип контракта маршрутизатора" внутри сумматора ликвидности.  

• Проверка типов данных работает во всех соединениях, а не только в отношениях родитель-потомок.  

• Это революционное изменение в Crank.  

• Пример: контракт с маршрутизатором как составная переменная из адреса и API.  

• Узел синхронизации объединяет несколько импортных данных в один выходной файл.  

• Указываем массив строк для ключей: адрес и API.  

• Подключаем адрес маршрутизатора и API к узлу синхронизации для создания контракта с маршрутизатором.  

• Храним пары ликвидности в узле хранилища.  

• Создаем токены ERC-20 в сети Ethereum Girly.  

• Вводим название токена и первоначальное предложение, например, 10 миллионов долларов.  

• Выбираем девчачью тестовую сеть вместо обычной.  

• Подключаемся к учетной записи через Metamask.  

• Подтверждаем транзакцию и добавляем токен в Metamask.  

• Перезагружаем страницу и создаем еще один токен, например, jsm silver.  

• Настраиваем количество токенов и подтверждаем транзакцию.  

• Добавляем токен в Metamask для управления активами.  

• Создание токена Shiba Inu JSM на блокчейне Ethereum.  

• Использование тестовой сети для создания и проверки токена.  

• Добавление токена в Metamask для использования в приложении.  

• Переход к данным хранилища для создания пар ликвидности.  

• Указание адресов и сумм для обмена токенов.  

• Пример создания пары JSM Gold для Ethereum.  

• Создание пар для обмена JSM Gold на JSM Silver.  

• Возможность обмена других токенов на Ethereum.  

• Изменение курса транзакций для более точного обмена.  

• Связывание данных с парами ликвидности.  

• Проверка и исправление ошибок в коде.  

• Настройка функции расчета крайнего срока для добавления ликвидности.  

• Завершение третьего этапа сборки и запуск проекта.  

• Проверка готовности ликвидных средств и контрактов.  

• Проверка данных на Girly Etherscan для подтверждения успешности.  

• Проверка добавления ликвидных пар и контрактов.  

• Ожидание завершения процесса компиляции и развертывания.  

• Успешное завершение процесса и добавление пулов ликвидности.  

• Если у вас были ошибки, это нормально.  

• В описании можно найти окончательную версию проекта Crank.  

• Для запуска проекта нужно добавить данные конфигурации и хранилища.  

• После добавления данных можно нажать "Пуск".  

• Данные проходят через несколько хранилищ и групп узлов.  

• Процесс включает компиляцию и развертывание фабрики и маршрутизатора.  

• Работа с кодом Solidity была бы сложнее.  

• Теперь нужно сосредоточиться на создании пользовательского интерфейса для клона Uniswap.  

• Начните с создания пустой папки на рабочем столе.  

• Откройте Visual Studio Code и перетащите папку.  

• Используйте терминал для установки usedapp.  

• Usedapp позволяет быстро разрабатывать DAPP с React.  

• Usedapp создает структуру файлов и папок для связи с смарт-контрактом.  

• Ознакомьтесь с документацией и выберите "Создать приложение eth".  

• Запустите команду yarn или npm create-eth-app для создания нового приложения Ethereum.  

• Это аналогично созданию приложения Create-React с дополнительной структурой для подключения к смарт-контракту.  

• Приложение инициализировано, структура отличается от обычного Create-React.  

• Папка packages содержит папку contracts с папкой abis для умных контрактов.  

• Приложение react dash и папка subgraph удаляются для упрощения.  

• Добавление разрешений для исправления ошибки с горячей перезагрузкой.  

• Удаление текущей папки с контрактами и загрузка обновленной папки.  

• Очистка папки с исходными кодами в приложении react dash.  

• Папка с исходными кодами содержит стили и вспомогательные функции.  

• Приложение использует tailwind и конфигурацию dapp.  

• Установка tailwind cdn для соответствия версиям.  

• Добавление скриптов для tailwind cdn и конфигурации tailwind.  

• Проверка и обновление зависимостей в package.json.  

• Запуск npm install для установки последних версий зависимостей.  

• Запуск npm run react-dash-app:start для запуска приложения.  

• Проверка работы приложения на локальном хостинге.  

• Подготовка к кодированию пользовательского интерфейса.  

• Импорт необходимых пакетов и стилей.  

• Создание первоначального макета приложения с использованием div и стилей.  

• Добавление заголовка и кнопки кошелька.  

• Создание div с классом styles.container для динамического макета.  

• Добавление div с классом styles.innercontainer для заголовка.  

• Добавление изображения логотипа uniswap и кнопки кошелька.  

• Создание заголовка и подзаголовка с использованием стилей Tailwind CSS.  

• Добавление тега p для обмена токенами.  

• Создание раздела с градиентом и самозакрывающимся div.  

• Проверка подключения учетной записи Metamask к децентрализованному приложению Uniswap.  

• Использование функции ether для доступа к учетной записи.  

• Отображение компонента загрузчика в зависимости от состояния учетной записи.  

• Создание папки components и трех компонентов: кнопка кошелька, обмен, загрузчик.  

• Импорт компонентов в приложение и их экспорт.  

• Настройка компонентов для отображения в зависимости от состояния учетной записи.  

• Импорт стилей и логотипа Ethereum.  

• Создание тега p для отображения названия загрузчика.  

• Добавление функции подключения кошелька и активация браузерного кошелька при нажатии кнопки.  

• Создание состояния использования для отображения кнопки или адреса учетной записи.  

• Проверка наличия учетной записи и активация браузерного кошелька при необходимости.  

• Отображение кнопки "Подключить кошелек" при отсутствии учетной записи и отображение адреса учетной записи при наличии.  

• Создаем новое поле "использовать эффект" для отображения адреса учетной записи.  

• Переименовываем отображаемый файл в "адрес учетной записи" и набор отображаемых в "установка адреса учетной записи".  

• Упрощаем код, используя троичную систему для отображения адреса или "кошелек connect".  

• Устанавливаем адрес учетной записи в зависимости от наличия учетной записи.  

• Используем служебную функцию для сокращения адреса.  

• Исправляем ошибку с горячей перезагрузкой, перезагружая страницу.  

• Кнопка для подключения и отключения кошелька работает корректно.  

• Следующий шаг - работа с биржей, которая является самым сложным компонентом приложения.  

• Начинаем кодирование компонента exchange, импортируя необходимые зависимости.  

• Импортируем функции use state, contract, ab, erc20, use ethers, use balance tokens.  

• Добавляем внутренние данные, такие как адрес маршрутизатора и URL-адрес провайдера.  

• Копируем и вставляем URL-адрес провайдера и адрес контракта.  

• Создаем новую папку hooks и файл use pools.  

• Импортируем web three, use state, use effect, use config.  

• Создаем пользовательский хук для получения пулов ликвидности.  

• Создаем эффект использования для повторного запуска при изменении URL-адресов или идентификатора цепочки.  

• Создаем асинхронную функцию load pools для получения URL провайдера.  

• Устанавливаем пулы и загрузку в зависимости от результатов опроса.  

• Создаем экземпляр web three и получаем информацию о маршрутизаторе и заводских настройках.  

• Создаем функцию get routerinfo для получения информации о маршрутизаторе.  

• Используем эту информацию для дальнейшей работы с биржей.  

• Созданы файлы для хранения функций: getfactoryinfo.js, getpairsinfo.js и getrouterinfo.js.  

• Экспортированы функции: getfactoryinfo, getpairsinfo и getrouterinfo.  

• Импортированы функции в пулы пользователей.  

• Переданы адрес маршрутизатора и экземпляр web three.  

• Использование ABI для взаимодействия со смарт-контрактами.  

• Получение информации о маршрутизаторе и возврат объекта с фабрикой.  

• Импортированы ABI и getpairsinfo.  

• Получение экземпляра фабрики и создание объекта factoryinfo.  

• Получение данных о комиссиях и ликвидных парах.  

• Импортированы ABI и получены адреса пар.  

• Создание пустого массива для хранения информации о парах.  

• Получение адресов токенов и их названий для каждой пары.  

• Заполнение массива информацией о парах.  

• Возвращение информации о фабрике и парах.  

• Подведение итогов работы с API и смарт-контрактами.  

• Пользовательский хук use pools используется для получения информации о маршрутизаторе и заводе-изготовителе.  

• Пулы загружаются при изменении идентификатора цепочки.  

• Пользовательский хук возвращает информацию о заводе-изготовителе и пулах.  

• Пользовательский хук use pools вызывается внутри приложения.js.  

• Загрузка и пулы передаются в качестве реквизита для компонента обмена.  

• Проверка и исправление ошибок в коде перед созданием компонента обмена.  

• Проверка наличия файла index.js в хуках и исправление ошибки в восьмой строке getfactory info.  

• Перезагрузка страницы для проверки корректности работы.  

• Исправление ошибки типа "не удается прочитать свойства неопределенных пар чтения" в строке 15 use pools.  

• Создание компонента обмена с несколькими входными данными, кнопками и балансами.  

• Создание трех компонентов: сумма ввода, сумма вывода и баланс.  

• Импорт компонентов и стилей в обмен.  

• Импорт вспомогательных функций из файла utils.  

• Использование функций для получения доступных токенов, поиска пулов ликвидности и обработки сообщений о сбое и успешном завершении.  

• Создание div с классом container и input с заполнителем и типом number.  

• Добавление кнопки с классом styles.currency и значком шеврона вниз.  

• Отображение активной валюты и значка для кнопки.  

• Добавление тега alt и шеврона вниз.  

• Настройка ширины и высоты строки.  

• Поворот строки в зависимости от состояния меню.  

• Создание нового состояния "показать список".  

• Использование функции обратного вызова для обновления состояния.  

• Установка списка показов и тестирование.  

• Проверка состояния "показать список" и отображение меню.  

• Создание неупорядоченного списка и присвоение ему класса.  

• Жесткое кодирование валют для отображения.  

• Создание массива объектов с токенами и их именами.  

• Использование функции точечной карты для отображения токенов.  

• Настройка классов для выбранных и невыбранных токенов.  

• Создание компонента для вывода суммы.  

• Копирование и адаптация кода для ввода суммы.  

• Настройка placeholder и типа данных.  

• Импорт функций из ethers.  

• Проверка наличия баланса и отображение его в формате единиц измерения.  

• Обработка ошибок при передаче значений.  

• Создание состояний для одобрения и обмена.  

• Условное отображение кнопок в зависимости от состояния.  

• Настройка сообщений об успешном завершении и сбое.  

• Обнаружены ошибки при вызове функций с неправильными параметрами.  

• Ошибки и недочеты - нормальная часть процесса разработки.  

• Комментарии помогают временно исправить ошибки.  

• Применение стилей к кнопке с использованием строки шаблона.  

• Создание различных стилей в зависимости от состояния can approve.  

• Отключение кнопки при невозможности одобрения.  

• Отображение кнопки подтверждения при необходимости.  

• Использование троичного оператора для визуализации кнопок.  

• Проверка возможности замены и баланса.  

• Отображение сообщений об ошибке и успешном завершении.  

• Использование тега p с динамическим классом для отображения сообщений.  

• Временное использование строк для отображения сообщений.  

• Исправление названия класса can approve.  

• Помещение всех стилей в строку шаблона для динамического управления.  

• Копирование названия класса в can swap для завершения стилей.  

• Завершено создание пользовательского интерфейса обмена.  

• Начинается работа с подключением к блокчейну, включая вызовы служебных функций и работу с библиотеками.  

• Используется структура учетной записи Metamask для инициализации состояний.  

• Вводятся состояния use state для хранения значений.  

• Преобразование строкового значения в большое число.  

• Получение списка доступных токенов для обмена.  

• Получение адресов пар для обмена.  

• Создание контракта для получения токенов.  

• Получение балансов токенов с использованием функции use token balance.  

• Проверка необходимости одобрения транзакции.  

• Создание переменных для хранения данных о балансе и одобрении.  

• Проверка достаточности баланса для обмена.  

• Использование функции use contract для отправки транзакций.  

• Переименование состояний и функций для работы с одобрением.  

• Передача параметров для функции контракта, включая контракт на токен и строку "одобрить".  

• Установка процента буфера для ограничения расхода газа.  

• Создание функции для запуска утвержденных функций.  

• Изменение разрешения на обмен токенов в контракте с маршрутизатором.  

• Использование встроенных функций Uniswap в приложении.  

• Создание двух функций для обмена токенов.  

• Проверка состояния одобрения и выполнения обмена.  

• Проверка возможности одобрения и обмена.  

• Использование переменных для выполнения проверок в коде.  

• Передача параметров для сообщений об успехе и сбоях.  

• Запрос на утверждение и вызов команды swap approve send.  

• Передача адреса маршрутизатора и константы ethers.maxInteger.  

• Создание функции обмена execute send.  

• Передача параметров для функции обмена.  

• Установка значений для количества в, суммы на выходе, массива адресов и крайнего срока.  

• Создание специальной функции для обновления значения from.  

• Создание useEffect для обработки сообщений об успехе и неудаче.  

• Проверка существования сообщения и вызов setTimeout для сброса значений.  

• Импорт useEffect из React и настройка времени ожидания.  

• Получение текущих балансов и данных о токенах в реальном времени.  

• Передача значений для суммы в и суммы из.  

• Использование переменных для упрощения рендеринга объектов.  

• Объяснение разницы между суммой на входе и выходе.  

• Использование переменных для упрощения процесса рендеринга.  

• Понимание необходимости создания проверок и состояний для упрощения работы.  

• Обсуждение необходимости написания чистого, масштабируемого и повторно используемого кода.  

• Пример использования can swap для упрощения кода.  

• Перезагрузка приложения для проверки изменений.  

• Настройка кнопок для передачи запросов на утверждение и обмен.  

• Добавление реквизитов в компонент: значение, onchange, стоимость, сдача, валюта.  

• Создание нового состояния для активной валюты.  

• Использование use ref для создания ссылки на значение.  

• Настройка функции onchange для обработки событий.  

• Добавление активной валюты и ссылки на ref.  

• Отображение токенов и их имен.  

• Проверка соответствия активной валюты текущему названию токена.  

• Добавление onclick для выбора токенов.  

• Создание эффекта использования для обновления активной валюты.  

• Проверка изменений валюты и стоимости.  

• Добавление символического баланса в компонент баланса.  

• Удаление жестко запрограммированного значения символического баланса.  

• Подключение кошелька Metamask для получения фактического баланса.  

• Преобразование эфира в обернутый эфир для совершения транзакций.  

• Подтверждение транзакции и изменение баланса.  

• Упаковка 0,1 грамма эфира в WETH.  

• Извлечение данных и закрытие остатка.  

• Использование хука useAmountsOut для расчета суммы.  

• Передача параметров и проверка значения.  

• Копирование эффекта использования и вставка значений.  

• Добавление значений и замена eth на активную валюту.  

• Копирование и вставка объектов для сопоставления.  

• Настройка имени класса и функции onclick.  

• Динамическое изменение баланса при обмене.  

• Создание пар для обмена золота на обернутый эфир или jsm silver.  

• Пример обмена 100 г золота на серебро.  

• Влияние спроса и предложения на обменные курсы.  

• Пример разницы в суммах при обмене 500 и 100.  

• Работа пулов ликвидности и их влияние на обменные курсы.  

• Двухэтапный процесс одобрения транзакции.  

• Ожидание одобрения и подтверждение транзакции.  

• Завершение процесса обмена и получение уведомления о метамаске.  

• Кнопка "поменять" занимает от 10 до 15 секунд.  

• Все значения были удалены после обмена.  

• Можно обменивать оберточные эфиры, серебро, шиба-ину и другие валюты.  

• Возможность добавления новых пар валют в пулы ликвидности.  

• Приложение использует множество функций Web3, включая контракты и токены.  

• Динамическое извлечение данных из смарт-контрактов и блокчейна.  

• Приложение отслеживает множество переменных и выполняет проверки.  

• Обработка ошибок и сообщений работает идеально.  

• Приложение помогает понять работу смарт-контрактов и блокчейна.  

• Обучение развертыванию приложения React в Интернете.  

• Использование терминала для сборки и развертывания приложения.  

• Подключение кошелька Metamask и проведение транзакций.  

• Смарт-контракты скомпилированы и развернуты в блокчейне Ethereum.  

• Приложение развернуто в Интернете, что позволяет демонстрировать навыки разработки.  

• Благодарность спонсору и завершение видео.