Создание классического децентрализованного приложения Web3 NFT Minting с помощью React и Solidity: часть 2

6 апреля 2022 г.

Что вы будете создавать, см. [живую демонстрацию] (https://adulam-nft.web.app/) и [репозиторий GitHub] (https://github.com/Daltonic/adulamNFT) для получения дополнительной информации, не Не забудьте отметить проект звездочкой.

Адулам

Отчеканенные NFT

Введение

В ЧАСТИ ПЕРВОЙ этого руководства мы закодировали часть смарт-контракта. этого приложения с Solidity, теперь пришло время объединить его с ReactJs.

Если вы еще не ознакомились с ЧАСТЬЮ ПЕРВОЙ этого руководства, я рекомендуем сделать это, прежде чем переходить ко второй части.

Если вы получаете пользу от этого руководства и хотите полностью погрузиться в разработку блокчейна, тогда [Вы также можете связаться со мной для получения уроков…] (https://daltonic.github.io/#mh-pricing)

Давайте прыгнем и начнем кодировать…

Предпосылки

Для полного извлечь выгоду из этой части. Если нет, быстро проверьте ЧАСТЬ ПЕРВАЯ, блокчейн развитие не детская игра.

Сборка компонентов

Давайте начнем с создания компонентов шаг за шагом, убедитесь, что вы точно следуете шагам…

Компонент заголовка

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

Компонент заголовка

Это было прекрасно обработано с помощью CSS попутного ветра с использованием стилей градиентов. Он просто позволяет пользователю подключить адрес кошелька для минтинга. В проекте перейдите в папку компонентов и создайте новый файл с именем Header.jsx. После этого вставьте в него приведенные ниже коды.

```javascript

импортировать ethlogo из '../assets/ethlogo.png'

импортировать {connectWallet} из '../Adulam'

импортировать {useGlobalState} из '../store'

константный заголовок = () => {

const [connectedAccount] = useGlobalState('connectedAccount')

вернуть (

Adulam Logo

Адулам

<ул

className="md:flex-[0.5] текст-белый

md: flex скрытый список-нет flex-row

выравнивание между элементами-центром flex-initial"

Исследовать

Функции

Сообщество

{подключенная учетная запись? нулевой : (

<кнопка

className="shadow-xl тень-черный текст-белый

bg-[#e32970] hover:bg-[#bd255f] md:text-xs p-2

закругленный-полный указатель-курсор"

onClick={connectWallet}

Подключить кошелек

экспорт заголовка по умолчанию

Это все для заголовка, давайте поработаем над компонентом Hero.

Компонент героя

Компонент героя

Этот компонент отвечает за инициирование процесса чеканки, как вы можете видеть с помощью кнопки чеканки. Кроме того, требуется запись общего количества отчеканенных NFT по сравнению с оставшимися.

Вот фрагмент кода, отвечающий за эту операцию…

```javascript

импортировать аватар из '../assets/owner.jpg'

импортировать github из «../assets/github_icon.png»

импортировать facebook из '../assets/facebook_icon.png'

импортировать твиттер из '../assets/twitter_icon.png'

импортировать linkedIn из '../assets/linkedIn_icon.png'

импортировать носитель из '../assets/medium_icon.png'

импорт {

установить оповещение,

использование GlobalState,

setGlobalState,

setLoadingMsg,

} из '../магазин'

импортировать {BASE_URI, payForArt} из '../Adulam'

константный герой = () => {

const [connectedAccount] = useGlobalState('connectedAccount')

const [maxSupply] = useGlobalState('maxSupply')

const [nfts] = useGlobalState('nfts')

константный монетный двор = асинхронный () => {

setGlobalState('загрузка', { show: true, msg: 'Извлечение данных IPFS...' })

const nextTokenIndex = число (nfts.length + 1)

fetch(${BASE_URI + nextTokenIndex}.json)

.then((данные) => data.json())

.тог((рез) => {

setLoadingMsg('Инициализация транзакции...')

payForArt({ ...res, покупатель: connectAccount }).then((result) => {

если (результат) {

setGlobalState('загрузка', {show: false, msg: ''})

setAlert('Успешная чеканка...', 'зеленый')

окно.местоположение.перезагрузить()

.catch((ошибка) => {

setGlobalState('загрузка', {show: false, msg: ''})

console.log(ошибка)

вернуть (

<дел

className="bg-[url('https://cdn.pixabay.com/photo/2022/03/01/02/51/galaxy-7040416_960_720.png')]

bg-без повторов bg-обложка"

Искусство искусственного интеллекта

Коллекция NFT

Чеканите и собирайте самые популярные NFT.

<кнопка

className="shadow-xl тень-черный текст-белый

bg-[#e32970] hover:bg-[#bd255f] p-2

закругленный полный указатель курсора my-4"

onClick={мята}

Монетный двор сейчас

<а

href="https://daltonic.github.io/"

className="flex flex-row justify-center space-x-2 items-center

bg-[#000000ad] rounded-full my-4 pr-3 указатель курсора"

<изображение

className="w-11 h-11 object-contain rounded-full"

источник={аватар}

alt="Лого Адулам"

0xf55...146a

Дальтоник

Госпел Дарлингтон начал свой путь в качестве инженера-программиста в

За эти годы он приобрел полноценные навыки в

Стеки JavaScript, такие как
React, ReactNative, VueJs и теперь

блокчейн.

<а