[NFT] Moralis NFT MarketPlace 구축 - Ethereum NFT Boilerplate

 

앞서 암호화페 지갑, DApp Server 등 기초 준비사항을 마쳤다면 이제 이더리움 테스트넷에서 컨트랙트를 구현하고 해당 컨트렉트에 접근하여 인터렉션하거나 이벤트를 리스닝하여 DB형태로 저장하고 이를 프론트엔드로 조회하는 MarketPlace / DApp이 필요하다. 그러나 이러한 부분들을 직접 전부 구현하기에는 많은 시간이 소요되고 혼자 진행하기에 기술력도 부족한 실정이다.

 

이러한 제한사항을 극복하기 위해 본 프로젝트에서는 앞서 가입하여 생성한 모렐즈 프로토콜을 기반으로 여러 라이브러리를 사용한 Boilerplate를 내려받아 진행한다. 

 

 

Boilerplate Clone

 

아래 GitHub에서 Ethereum NFT Boilerplate를 Clone한다. 

https://github.com/ethereum-boilerplate/ethereum-nft-marketplace-boilerplate#readme

GitHub - ethereum-boilerplate/ethereum-nft-marketplace-boilerplate

 

 

만약 git이 설치되어 있지 않다면 설치하고 진행한다. 

$ yum install -y git

 

 

Contract Deploy

 

Contract Deploy 하기 위해 Remix IDE을 사용한다. Remix IDE에 대한 간단한 설명은 아래와 같다.

 

Remix IDE
브라우저에서 솔리디티를 이용하여 스마트 컨트랙트를 개발하도록 도와주는 IDE. 
계약 지향 프로그래밍 언어로 다양한 블록체인 플랫폼의 스마트계약 작성 및 구현에 사용.

 

https://remix-project.org/  Remix에 접속하여 아래 버튼으로 새 workspace 생성한다.

 

앞서 Git으로 내려받은 Boilerplate의 src > contract > marketplaceBoilerplate.sol을 Remix contract 폴더에 복사한다.

 

Compiler 탭으로 이동하여 해당 파일을 컴파일 한다.

 

컴파일을 마치고 나면 아래 ABI(Application Binary Interface) 버튼을 클릭하여 별도 메모장에 기록해둔다.

 

DEPLOY & RUN TRANSACTIONS 탭으로 이동하여 ENVIRONMENT를 Metmask로 지정한다. 이후 메타마스크 창이 뜨는데 로그인 후 현재 테스트넷으로 지정되어 있는지 확인합니다.

 

ACCOUNT가 테스트넷인지 다시 한 번 확인합니다.

 

Metamask 지갑이 테스트넷임을 확인하였으면 아래 Deploy 버튼을 클릭하여 컨트랙트를 배포한다.

 

Deploy를 클릭하면 Metamask 창에서 아래 만큼의 가스 비용을 지불할 것을 요청한다. (가스비용은 컨트랙트를 배포할 때 지불하는 일종의 수수료 개념이다.)

 

 

Deploy를 마치면 아래 Deployed Contracts 항목에 요청한 항목이 추가되는데 아래 버튼을 클릭하여 Contracts 주소를 별도의 메모장에 기록해둔다.

 

 

Boilerplate 초기설정

 

• .env 파일

프로젝트 최상단에 위치한 .env.example 파일의 이름을 .env으로 변경한다. 

 

변경한 파일을 오픈하면 아래와 같이 애플리케이션 ID와 Dapp URL을 입력하는 파트가 나오는데 해당 항목은 이전에 생성했던 Moralis Sever의 Setting에서 확인 가능하다. 

# Mandatory info for starting the app
REACT_APP_MORALIS_APPLICATION_ID = 'Moralis Application ID'
REACT_APP_MORALIS_SERVER_URL = 'Moralis Dapp URL'

 

아래 항목을 .env에 기입하고 저장 후 닫는다. 

 

 

• MoralisDappProvider.js 파일

MoralisDappProvider.js 파일에서 앞서 따로 메모장에 기입해둔 ABI와 Contracts 주소를 기입한다. 

 

setContractABI는 {"noContractDeployed": true} 항목을 지우고 복사했던 내용을 기입하면 되는데 코드가 너무 길기 때문에 해당 링크(https://www.textfixer.com/tools/remove-line-breaks.php)에서 한줄로 변환 후 기입한다. 

 

setMarketAddress는 이전 Depoly 후 복사해준 주소를 기입하면 된다.

 

기입을 마쳤으면 저장 후 파일을 닫는다.

 

 

• Goerli Testnet authenticate 추가

 /src/components/Chains/Chains.jsx 에서 'Goerli Testnet' 파트를 주석해제 한다.

 

 

• collection 수정

/src/helpers/collections.js 에서 Goerli Testnet의 key 값인 0x5로 변경한다.

 

 

 

동기화(Syncs)

 

moralis DAap Sever에서 Smart Contracts 동기화(Syncs)를 생성한다.

이때 Custom Event를 입력한다. (NFT ERC-721를 선택하면 안된다.)

 

 

Remix에서 체결한 Smart Contract 주소를 Address에 기입하고 Goeli 네트워크를 선택한다.

아까 컴파일 후 메모해둔 ABI에서 MarketItemCreated 파트만 복사하여 ABI에 기입한다. 

{
		"anonymous": false,
		"inputs": [
			{
				"indexed": true,
				"internalType": "uint256",
				"name": "itemId",
				"type": "uint256"
			},
			{
				"indexed": true,
				"internalType": "address",
				"name": "nftContract",
				"type": "address"
			},
			{
				"indexed": true,
				"internalType": "uint256",
				"name": "tokenId",
				"type": "uint256"
			},
			{
				"indexed": false,
				"internalType": "address",
				"name": "seller",
				"type": "address"
			},
			{
				"indexed": false,
				"internalType": "address",
				"name": "owner",
				"type": "address"
			},
			{
				"indexed": false,
				"internalType": "uint256",
				"name": "price",
				"type": "uint256"
			},
			{
				"indexed": false,
				"internalType": "bool",
				"name": "sold",
				"type": "bool"
			}
		],
		"name": "MarketItemCreated",
		"type": "event"
	}

 

 

앞서 ABI에 MarketItemCreated 파트를 기입했다면 자동으로 MarketItemCreated Topic이 생긴다. 해당 Topic을 선택하고, Table은 반드시 MarketItems로 입력한다. Description은 임의로 기입한다.  

 

 

 

패키지 설치 및 시작

 

아래 명령어를 실행하여 패키지를 설치하고 시작한다.

$ npx browserslist@latest --update-db
$ npm install caniuse-lite

$ yarn install // 패키지 설치
$ yarn start // 패키지 시작

 

 

결과

 

'서버 ip주소:3000'을 웹브라우저에 입력하여 Marketplace에 접속한다. 

 

Authenticate 버튼을 클릭하여 Metamask 지갑과 연결한다.

 

Goerli Testnet 으로 변경한다.

 

Explore Market으로 이동하면 기본 NFT 이미지가 있는 것을 확인할 수 있다.

 

 

 

참고사이트

 

• https://www.youtube.com/watch?v=E8p4-Yvg46o
• https://kimsfamily.kr/499

 

 

 

 

※ 본 게시글의 정보가 잘못 되었거나 부족한 부분에 대한 피드백을 환영합니다.

 

 

* CopyRight 2022. Jay Park All rights reserved.