4일간 팀원들과 함께 OpenSea 클론코딩을 목표로 프로젝트를 실시했습니다.
OpenSea는 ERC-721등의 대체불가능한 토큰을 등록하여 고정된 가격에 팔거나 경매에 올리는 등
사용자들간의 거래를 도와주는 사이트입니다.
저희는 프로젝트를 시작하기에 앞서, 사이트의 화면구성과 필요한 기능들에 대해 의논하였습니다.
먼저 사이트 구성을 보면 화면이 전환되더라도 항상 위에 위치하는 네비게이션 바가 있고
나머지 부분에서 화면을 보여줍니다.
그렇기에 네비게이션 바 작업과 각 기능들의 작업을 분할하여 작업하였습니다.
(리액트를 사용하여 네비게이션 바 컴포넌트는 항상 위에 떠 있고 아래에선 라우트로 화면 전환이 되도록 구성했습니다)
첫 화면을 완성한 뒤 주요 기능인 NFT 업로드를 구현하기 위해
자바스크립트에서 NFT를 minting하는 코드를 살펴보면
const contract = require("../artifacts/contracts/MyNFT.sol/MyNFT.json");
const contractAddress = "0x81c587EB0fE773404c42c1d2666b5f557C470eED";
const nftContract = new web3.eth.Contract(contract.abi, contractAddress);
async function mintNFT(tokenURI) {
const nonce = await web3.eth.getTransactionCount(PUBLIC_KEY, 'latest'); //get latest nonce
//the transaction
const tx = {
'from': PUBLIC_KEY,
'to': contractAddress,
'nonce': nonce,
'gas': 500000,
'maxPriorityFeePerGas': 1999999987,
'data': nftContract.methods.mintNFT(PUBLIC_KEY, tokenURI).encodeABI()
};
const signedTx = await web3.eth.accounts.signTransaction(tx, PRIVATE_KEY);
const transactionReceipt = await web3.eth.sendSignedTransaction(signedTx.rawTransaction);
console.log(`Transaction receipt: ${JSON.stringify(transactionReceipt)}`);
}web3 api를 이용하여 블록체인 노드에 연결하여 트랜잭션을 생성하는 것을 볼 수 있습니다.
또한 트랜잭션 생성시 공개키가 필요하므로 지갑 앱과 연결하여 유저의 공개키를 얻어와야 했습니다.
그래서 web3와 공개키를 통합 관리하기 위해 App.js에서 web3 정보를 useState에 저장하여 props로 뿌려주면서 사용하고
지갑 앱과 연결하는 connectWallet함수 또한 props로 뿌려주면서 사용하자고 구상했습니다.
위와 같은 과정으로 네비게이션 바 지갑아이콘과 지갑연결 함수를 연동하여
이렇게 동작하는 것을 확인할 수 있습니다.
NFT 업로드를 위한 기본 설정은 해두었으니
이젠 NFT 생성 화면을 만들었습니다.
NFT생성함수는 위에서 말한 것과 같지만 약간 추가된 부분은 IPFS에 이미지를 업로드하여 사용하는 링크로 사용하는 부분입니다.
업로드하게 되면 web3에서 전체 토큰을 읽어서 화면에 뿌려주어야하는데 이 코드는
totalSupply로 발급된 총 개수를 받아서
arr에 index를 저장하고
tokenURI로 index로 하는 각 토큰안의 정보를 받습니다
저희는 이 정보 안에 있는 이미지값을 배열에 넣고 map으로 뿌리는 식으로 구성했습니다.
프로젝트 주소
https://github.com/codestates/BEB01_01_dontknowanything
