Close Sea

배포주소 : http://ec2-43-201-8-138.ap-northeast-2.compute.amazonaws.com/

기간 : 2022.12.19 ~ 2022.12.23

개발자 : (HanGyeol) 본인 외 2명

본인 역할

페이지 구현
- 전체페이지 구상 및 Main 페이지 , Shop 페이지 , MyPage 페이지 구현
컴포넌트화
- 디자인 패턴 MVC 패턴을 참고하여 구성
- 컴포넌트화를 해서 재사용이 가능하게 함
- MenuBar를 따로 컴포넌트화해서 관리함
지갑연결
- 지갑연결 버튼을 통해 메타마스크와 지갑연결
- goerli testnet 네트워크가 아니라면 메타마스크에 요청하여 네트워크 변경 요청
- 지갑 변경 Tracking
web3 연결
- 토큰 스왑 : 이더리움 🔁 토큰 스왑
- 민팅 : 개인당 최대 10개까지 민팅가능
- 보유한 NFT 확인
- NFT 거래
- 판매중인 NFT 확인
배포
- Docker hub를 이용하여 AWS EC2에 배포

개요

Scripts

RUN

docker run -p 80:80 tetedo/closesea

80번 포트에서 실행

CloseSea

NFT 거래소 토이 프로젝트

사용 기술

주요 페이지

Main Page

메인 페이지

민팅 버튼

Shop Page

거래 페이지

판매 페이지

내가 보유한 NFT 선택창
판매중인 NFT는 제외

Swap Page

스왑 페이지 스왑시 컨트랙트 최초 실행자가 5% 수수료를 받는다.

My Page

실시간으로 바뀌는걸 감지해서 나의 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);
}

기타

PPT

발표용ppt(Close Sea).pptx
일정 관리

TeTedo / CloseSea-NFTmarket