Что вы будете создавать, см. [живую демонстрацию] (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')


вернуть (



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


Это все для заголовка, давайте поработаем над компонентом 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


Дальтоник





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



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

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


блокчейн.




    <а


    className = "bg-white hover: масштаб-50 переход-все продолжительность-75 задержка-75 округлено-полный mx-2"


    href="https://github.com/Daltonic"


    Github



    <а


    className = "bg-white hover: масштаб-50 переход-все продолжительность-75 задержка-75 округлено-полный mx-2"


    href="https://www.linkedin.com/in/darlington-gospel-aa626b125"


    linkedIn



    <а


    className = "bg-white hover: масштаб-50 переход-все продолжительность-75 задержка-75 округлено-полный mx-2"


    href="https://fb.com/darlington.gospel01"


    facebook



    <а


    className = "bg-white hover: масштаб-50 переход-все продолжительность-75 задержка-75 округлено-полный mx-2"


    href="https://twitter.com/idaltonic"


    twitter



    <а


    className = "bg-white hover: масштаб-50 переход-все продолжительность-75 задержка-75 округлено-полный mx-2"


    href="https://darlingtongospel.medium.com/"


    medium




<дел


className="shadow-xl shadow-black flex flex-row


выравнивание по центру элементов по центру w-10 h-10 округлено-полный


bg-белый курсор-указатель p-3 мл-4 текст-черный


hover:bg-[#bd255f] hover:текст-белый переход-все


продолжительность-75 задержка-100"



{nfts.length}/{maxSupply}