-
페이지 구현
- 전체페이지 구상 및 Main 페이지 , Shop 페이지 , MyPage 페이지 구현
-
컴포넌트화
-
디자인 패턴 MVC 패턴을 참고하여 구성
-
컴포넌트화를 해서 재사용이 가능하게 함
-
MenuBar를 따로 컴포넌트화해서 관리함
-
-
지갑연결
-
지갑연결 버튼을 통해 메타마스크와 지갑연결
-
goerli testnet 네트워크가 아니라면 메타마스크에 요청하여 네트워크 변경 요청
-
지갑 변경 Tracking
-
-
web3 연결
-
토큰 스왑 : 이더리움 🔁 토큰 스왑
-
민팅 : 개인당 최대 10개까지 민팅가능
-
보유한 NFT 확인
-
NFT 거래
-
판매중인 NFT 확인
-
-
배포
- Docker hub를 이용하여 AWS EC2에 배포
RUN
docker run -p 80:80 tetedo/closesea
80번 포트에서 실행
NFT 거래소 토이 프로젝트
- 메인 페이지
- 민팅 버튼
- 거래 페이지
- 판매 페이지
- 내가 보유한 NFT 선택창
- 판매중인 NFT는 제외
- 스왑 페이지 스왑시 컨트랙트 최초 실행자가 5% 수수료를 받는다.
- 실시간으로 바뀌는걸 감지해서 나의 NFT를 보여준다.
- 내가 보유한 NFT, 판매중인 NFT를 보여준다.
- 내가 현재 연결된 메타마스크 주소를 보여준다.
- 보유중인 NFT 클릭시 판매페이지으로 이동
const connectWallet = async () => {
const account = await getRequestAccount();
setAccount(account);
localStorage.setItem("account", account);
window.ethereum.on("accountsChanged", async () => {
const account = await getRequestAccount();
setAccount(account);
localStorage.setItem("account", account);
});
};
지갑 연결 버튼 클릭시 메타마스크에 account 요청
on 함수를 통해 계정이 변경시 인식하도록 로직 구성
function _minting(uint _mintAmount) public mintRequire(_mintAmount){
require(coin.balanceOf(msg.sender) >= mintPrice * _mintAmount, "Insufficient funds!");
require(mintCount[msg.sender] + _mintAmount <= mintLimit, "mint limit exceeded");
coin.mintNft(msg.sender, mintPrice * _mintAmount);
_safeMint(msg.sender, _mintAmount);
}
// nft민팅할때 토큰 보내는 함수
function mintNft(address _address, uint _price) external {
_transfer(_address, owner(), _price);
}
민팅시 토큰을 owner에게 보내고 민팅한 사람에게 NFT를 보낸다.
거래를 하기전 front에서 setApprovalForAll 함수로 NFT를 보내는 권한을 준다.
// NFT구매
function purchaseToken(uint _tokenId) public{
address tokenOwner = nft.ownerOf(_tokenId);
require(tokenOwner != msg.sender, "You can't buy your own NFT!");
require(tokenPrices[_tokenId] > 0,"This NFT is not for sale!");
// 가격 체크하는곳
require(coin.checkCoinBalance(msg.sender) >= tokenPrices[_tokenId], "Not enough seed!");
coin.mintNft(msg.sender, tokenPrices[_tokenId]);
nft.transferFrom(tokenOwner, msg.sender, _tokenId);
tokenPrices[_tokenId] = 0;
popSaleToken(_tokenId);
}