Как создать децентрализованную благотворительную платформу с помощью Next.js, TypeScript и Solidity

То, что вы будете создавать, можно посмотреть в живой демонстрации в тестовой сети Bitfinity и в репозитории git .

Введение

Добро пожаловать в это подробное руководство, в котором мы создадим децентрализованную благотворительную платформу Web3 с использованием Next.js, Solidity и TypeScript. К концу этого урока вы будете иметь четкое представление о:

• Создание динамических интерфейсов с помощью Next.js
• Создание смарт-контрактов Ethereum с помощью Solidity
• Включение статической проверки типов с помощью TypeScript
• Развертывание и взаимодействие с вашими смарт-контрактами
• Понимание основ благотворительных платформ на основе блокчейна

В качестве бонуса за участие в этом уроке вы можете легко выиграть копию нашей престижной книги о том, как стать востребованным разработчиком Solidity . Это предложение бесплатно для первых 300 человек . Инструкции о том, как выиграть, смотрите в коротком видео ниже.

Предварительные условия

Для сборки вместе со мной вам понадобятся следующие инструменты:

• Node.js
• Пряжа
• Гит Баш
• МетаМаска
• Next.js
• Солидность
• Инструментарий Redux
• CSS попутного ветра

Чтобы настроить MetaMask для этого урока, посмотрите обучающее видео ниже:

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

Посмотрите следующие обучающие видеоролики , чтобы получить до 3 месяцев бесплатных курсов премиум-класса на

Академия наставников Dapp, в том числе:

• Курс по Fullstack NFT-минтингу
• Курс Fullstack NFT Marketplace
• Курс Fullstack Blockchain
• и т. д.

Начните свое путешествие с Bitfinity сегодня. Испытайте быстрый, простой и беспроблемный процесс разработки, создав свое первое децентрализованное приложение для отслеживания благотворительных пожертвований. Разверните свои смарт-контракты в сети Bitfinity и окажите положительное влияние.

С учетом сказанного, давайте перейдем к руководству и настроим наш проект.

Настраивать

Мы начнем с клонирования подготовленного репозитория внешнего интерфейса и настройки переменных среды. Выполните следующие команды:

 git clone https://github.com/Daltonic/dappFundsX cd dappFundsX yarn install git checkout no_redux_no_blockchain

Затем создайте файл .env в корне проекта и включите в него следующие ключи:

 NEXT_PUBLIC_RPC_URL=http://127.0.0.1:8545 NEXT_PUBLIC_ALCHEMY_ID=<YOUR_ALCHEMY_PROJECT_ID> NEXT_PUBLIC_PROJECT_ID=<WALLET_CONNECT_PROJECT_ID> NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=somereallysecretsecret

Замените <YOUR_ALCHEMY_PROJECT_ID> и <WALLET_CONNECT_PROJECT_ID> на соответствующие идентификаторы вашего проекта.

YOUR_ALCHEMY_PROJECT_ID : получите ключ здесь WALLET_CONNECT_PROJECT_ID : получите ключ здесь

Наконец, запустите yarn dev , чтобы запустить проект.

Наш интерфейс для этого проекта надежен и готов к некоторой интеграции смарт-контрактов, но нам понадобится Reduxify нашего приложения, чтобы обеспечить общее пространство данных.

Создание магазина Redux

На изображении выше представлена структура нашего хранилища Redux, она будет простой, поскольку мы не создаем какой-то слишком сложный проект.

Мы настроим Redux для управления глобальным состоянием нашего приложения. Следуй этим шагам:

1. Создайте папку store в корне проекта.
2. Внутри store создайте две папки: actions и states .
3. Внутри states создайте файл globalStates.ts .

4. Внутри actions создайте файл globalActions.ts .

5. Создайте файл globalSlices.ts в папке store .

6. Создайте файл index.ts внутри папки store .

7. Обновите pages/_app.ts с помощью провайдера Redux.

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

Разработка смарт-контрактов

Далее мы разработаем смарт-контракт для нашей платформы:

1. Создайте папку contracts в корне проекта.
2. Внутри contracts создайте файл DappFund.sol и добавьте приведенный ниже код контракта.

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

Вот разбивка по функциям:

1. constructor() : эта функция устанавливает первоначальный налог на благотворительность при развертывании контракта. Он выполняется только один раз во время развертывания контракта.
2. createCharity() : эта функция позволяет пользователям создавать новую благотворительную организацию. Для этого требуется несколько параметров, таких как имя, описание, изображение, профиль и сумма благотворительной помощи. Он проверяет корректность этих параметров, затем создает новую CharityStruct и добавляет ее в сопоставление charities .
3. updateCharity() : эта функция позволяет владельцу благотворительной организации обновлять ее данные. Прежде чем обновлять сведения о благотворительной организации, он проверяет, существует ли благотворительная организация и является ли отправитель ее владельцем.
4. deleteCharity() : эта функция позволяет владельцу благотворительной организации пометить ее как удаленную. Он проверяет, что благотворительная организация существует и что отправитель является ее владельцем, прежде чем пометить ее как удаленную.
5. toggleBan() : эта функция позволяет владельцу контракта запретить или снять запрет на благотворительность. Он проверяет существование благотворительной организации, прежде чем изменить ее запрещенный статус.
6. donate() : эта функция позволяет пользователям делать пожертвования на благотворительность. Он проверяет, что благотворительная организация существует, не запрещена и еще не достигла цели по сбору средств. Затем он увеличивает общее количество пожертвований, создает новый SupportStruct и добавляет его в сопоставление supportersOf . Он также обновляет собранную сумму и количество пожертвований на благотворительность.
7. changeTax() : эта функция позволяет владельцу контракта изменить налог на благотворительность. Перед обновлением налога проверяется, что новый процент налога действителен.
8. getCharity() : эта функция позволяет любому получить подробную информацию о благотворительной организации. Он возвращает CharityStruct , связанный с данным идентификатором.
9. getCharities() : эта функция позволяет любому получить подробную информацию обо всех активных благотворительных организациях. Он возвращает массив объектов CharityStruct .
10. getMyCharities() : эта функция позволяет пользователю получить подробную информацию обо всех своих активных благотворительных организациях. Он возвращает массив объектов CharityStruct .
11. getSupports() : эта функция позволяет любому получить подробную информацию обо всех сторонниках конкретной благотворительной организации. Он возвращает массив объектов SupportStruct .
12. payTo() : эта внутренняя функция используется для перевода средств. Он отправляет указанное количество эфира на указанный адрес.
13. currentTime() : эта внутренняя функция возвращает текущее время в секундах с начала эпохи Unix. Он используется для отметки времени пожертвований и благотворительных проектов.

Развертывание и развертывание контрактов

Теперь давайте развернем наш смарт-контракт и заполним его фиктивными данными:

1. Создайте папку scripts в корне проекта.
2. Внутри scripts создайте файлы deploy.js и seed.js и добавьте следующие коды.

Развернуть скрипт

Исходный скрипт

3. Выполните следующие команды, чтобы развернуть контракт и заполнить его данными:

    yarn hardhat node # Run in terminal 1 yarn hardhat run scripts/deploy.js # Run in terminal 2 yarn hardhat run scripts/seed.js # Run in terminal 2

Если вы сделали это правильно, вы должны увидеть аналогичный результат, подобный приведенному ниже:

На этом этапе мы можем начать интеграцию нашего смарт-контракта в наш интерфейс.

Фронтенд-интеграция

Сначала создайте папку services в корне проекта и внутри нее создайте файл blockchain.tsx . Этот файл будет содержать функции для взаимодействия с нашим смарт-контрактом.

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

Вот разбивка по функциям:

1. getEthereumContracts() : эта функция получает экземпляры контракта Ethereum, с которыми будет взаимодействовать сервис. Он проверяет, есть ли у пользователя подключенная учетная запись Ethereum, и использует ее для взаимодействия с контрактом, в противном случае он использует случайно созданный кошелек.
2. getAdmin() : эта функция возвращает владельца контракта.
3. getCharities() , getMyCharities() , getCharity() : эти функции извлекают все благотворительные организации, благотворительные организации, созданные текущим пользователем, и конкретную благотворительную организацию по ее идентификатору соответственно.
4. getSupporters() : эта функция выбирает сторонников конкретной благотворительной организации по ее идентификатору.
5. createCharity() , updateCharity() : эти функции позволяют пользователю создать новую благотворительную организацию или обновить существующую благотворительную организацию соответственно.
6. makeDonation() : эта функция позволяет пользователю сделать пожертвование на конкретную благотворительную организацию.
7. deleteCharity() : эта функция позволяет владельцу благотворительной организации удалить ее.
8. banCharity() : эта функция позволяет владельцу контракта запретить благотворительную деятельность.
9. structuredCharities() , structuredSupporters() : это вспомогательные функции, которые структурируют возвращаемые данные из контракта в более удобный формат.

Обновите файл provider.tsx внутри services , чтобы включить сеть bitfinity , используя следующие коды.

Страница, взаимодействующая со смарт-контрактом

Далее мы свяжем функции службы блокчейна с соответствующими интерфейсами во внешнем интерфейсе:

Нет 1: отображение всех pages/index.tsx для получения данных из функции getCharities() .

Обратите внимание, как Redux используется для хранения данных блокчейна перед их отображением на экране.

Нет 2: Отображение благотворительной деятельности пользователя. Обновите pages/projects.tsx , чтобы использовать ловушку useEffect() для получения благотворительной деятельности текущего пользователя.

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

№ 3: Создание новых благотворительных организаций. Обновите pages/donations/create.tsx , чтобы использовать функцию createCharity() для отправки форм.

№ 4: Отображение pages/donations/[id].tsx единого обновления благотворительной организации для использования функций getServerSideProps() , getCharity() и getSupporters() для получения информации о благотворительной организации и сторонниках по идентификатору.

№ 5: Редактирование существующих благотворительных организаций. Обновите pages/donations/edit/[id].tsx , чтобы использовать функцию getCharity() для получения благотворительной помощи по идентификатору и заполнения полей формы.

Вы видели, как функция getCharity() использовалась для получения благотворительной помощи по идентификатору, а также как она использовалась для заполнения полей формы?

Компоненты со смарт-контрактом

Как и на страницах выше, давайте обновим следующие компоненты для взаимодействия со смарт-контрактом:

№ 1: Обработка запрета на благотворительность Обновите components/Ban.tsx , чтобы использовать функцию handleBanning() для вызова функции banCharity() .

№ 2: Обработка удаления благотворительной организации Обновите components/Delete.tsx , чтобы использовать функции handleDelete() и deleteCharity() для выполнения процедуры исключения благотворительной организации из списка.

№ 3: Делаем пожертвования на благотворительность. Обновите components/Donor.tsx , чтобы использовать функцию handleSubmit() для отправки платежа в смарт-контракт с помощью функции makeDonation() .

Другие компоненты

Вот остальные компоненты, которые вам также следует обновить, поскольку в них интегрирован Redux.

Компонент NavBtn. Просмотрите и обновите компонент, который позволяет пользователям перемещаться, удалять и редактировать информацию о благотворительной деятельности. Используйте Redux, чтобы вызвать модальное удаление при нажатии.

Платежный компонент. Пересмотрите и обновите реализацию Redux, чтобы модальные окна пожертвований, поддержки и запрета запускались при нажатии соответствующих кнопок.

Компонент поддержки. Просмотрите и обновите реализацию Redux, чтобы модальное окно поддержки закрывалось при нажатии кнопки закрытия.

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

Если ваш сервер Nextjs все это время не работал, вы можете снова запустить его, запустив yarn dev .

Для дальнейшего обучения рекомендуем посмотреть полное видео этой сборки на нашем YouTube-канале .

Заключение

В этом уроке мы создали децентрализованную благотворительную платформу с использованием Next.js, Solidity и TypeScript. Мы настроили среду разработки, создали хранилище Redux и развернули смарт-контракт в блокчейне. Интегрировав смарт-контракт с интерфейсом, мы создали удобство взаимодействия с пользователем.

В ходе обучения вы приобрели ценные навыки в создании приложений Web3, разработке смарт-контрактов и внедрении статической проверки типов.

Теперь вы готовы создать свою собственную децентрализованную благотворительную платформу. Удачного программирования и раскрытия своих инноваций в мире Web3!