이전 기사를 읽은 사용자라면 ERC-20 프로토콜 토큰의 경우 Uniswap이 대표하는 DEX를 통해 거래하여 분산화를 달성할 수 있다는 사실을 알고 있을 것입니다. 그렇다면 ERC-721 프로토콜, 즉 NFT의 경우 어떻게 분산화된 거래를 구현할 수 있을까요?
현재 주류를 이루는 NFT 거래소 중 일부는 마치 슈퍼마켓 선반에 상품을 올려놓는 것처럼 주문 방식을 사용해 거래를 진행합니다. 구매자가 가격이 적절하다고 생각하면 그 물건을 집으로 가져갈 수 있습니다.
이 글에서는 스마트 계약과 간단한 프런트엔드 페이지를 작성하여 NFT의 분산형 거래를 구현해보겠습니다. 본 문서는 학습 목적으로만 작성되었으며 실제 운영 환경에서는 사용할 수 없습니다.
NFT(대체불가능토큰)
NFT는 대체 불가능한 토큰입니다. 즉, 각 토큰은 대체 불가능하고 다르며 ERC-721 프로토콜을 따릅니다. 일반적으로 각 NFT는 지갑에 다른 그림을 표시하며, 각 NFT 세트에는 고유한 ID가 있어 구별합니다.
NFT의 특성상 ERC-20처럼 가격 곡선을 통해 가격을 설정하는 것은 불가능합니다. 각 토큰이 다르기 때문입니다. 따라서 현재 가장 흔한 거래 방법은 주문장을 이용하는 것입니다.
주문장 거래
간단히 말해서, 주문장 모델은 상품의 가격이 수동으로 설정된다는 것을 의미하는데, 이는 가격 곡선을 통해 가격을 계산하는 유니스왑의 방법과 다릅니다. 주문장은 일반적으로 두 가지 거래 모드로 나뉩니다. 하나는 가격 결정 순서입니다. 즉, 판매자가 마음속으로 판매 가격을 정하는 것입니다. 가격이 적절하다고 생각하는 구매자가 있으면 구매자는 해당 상품을 구매할 수 있습니다. 다른 하나는 구매 주문입니다. 즉, 구매자가 자신의 필요에 따라 구매 주문서를 발행하고, 판매자가 가격이 적절하다고 생각하면 판매자가 해당 주문을 판매할 수 있습니다.
일반적으로 매수 주문 가격은 견적 주문 가격보다 낮습니다. 이 기사에서는 첫 번째 가격 책정 방법만 소개합니다.
NFT DEX의 기능
NFT DEX의 기본 기능은 다음과 같습니다.
제품 등록: NFT를 정해진 가격으로 등록하세요
상품 구매 : NFT 가격에 따라 구매
DEX 수수료: 수수료는 거래 가격에 비례하여 부과됩니다.
제품 목록
제품을 등록하려면 다음을 수행해야 합니다.
프런트엔드: 사용자는 자신의 NFT를 선택하고, 가격을 설정한 다음 클릭하여 나열합니다.
계약: 사용자는 자신의 NFT를 조작하기 위해 계약에 대한 권한을 설정해야 합니다.
이렇게 해서 제품이 완성됩니다. 계약서에는 사용자가 등록한 상품의 가격표를 유지해야 합니다. 일반적으로 이러한 데이터는 계약의 부담을 줄이기 위해 서비스에서 중앙화할 수 있지만, 이 문서에서는 지도 데이터의 이 부분을 계약에서 유지 관리합니다.
제품 구매
무언가를 사면 몇 가지 일이 일어납니다.
프런트엔드: 사용자는 구매하려는 NFT를 선택하고 구매를 클릭합니다.
계약: 사용자의 돈을 NFT 판매자에게 이체하고, NFT를 구매자에게 이체하는 계약을 말합니다.
NFT DEX 구현
이 섹션에서는 NFT DEX를 처음부터 구현해보겠습니다. 이는 작성자가 배포한 DEX 주소 nft-dex-frontend.vercel.app입니다.
1. NFT 만들기
테스트 목적으로 우리만의 NFT를 갖는 것이 가장 좋을 것 같습니다. Remix는 해당 템플릿을 제공하여 ERC-721 프로토콜 NFT를 빠르게 구축할 수 있습니다.
우리는 템플릿에 따라 NFT를 쉽게 배포할 수 있습니다. 물론, 이 단계를 건너뛰고 우리가 준비한 NFT를 바로 사용할 수도 있습니다.
2. 계약서 작성
우리의 계약 방법에는 다음과 같은 방법이 포함되어야 합니다.
2.1. 판매자 목록 NFT
판매자는 판매할 NFT와 해당 가격을 지정해야 합니다. NFT를 등록할 때 사용자는 스마트 계약이 NFT를 운영할 권한을 갖도록 NFT 승인 방법에 서명해야 합니다. 이를 통해 구매자가 NFT를 구매하면 거래가 자동으로 완료됩니다.
따라서 프로세스는 다음과 같습니다. 1. 사용자가 자신의 NFT를 선택합니다. 2. USDT, USDC, ETH 등 안정적인 화폐로 가격을 설정합니다. 3. NFT를 계약에 승인합니다.
그 후에는 다음 작업을 수행해야 하는 계약 목록 메서드를 호출할 수 있습니다.
NFT 소유권 확인
리스트 레코드 추가
리스트를 트리거하는 이벤트
2.2. 구매자가 NFT를 구매합니다
구매자가 NFT를 구매할 때, 사용자는 원하는 NFT를 선택하고 해당 토큰을 지불하기만 하면 됩니다. 다음 단계는 계약 수준에서 실행됩니다. 1. 리스트에서 해당 NFT 데이터를 읽습니다. 2. NFT 가격에 따라 처리 수수료를 계산하고 거래 가격에서 차감합니다. 3. NFT를 구매자에게 전송합니다. 4. 구매 이벤트 트리거
2.3. 리스트 취소
물론, 판매자는 가격이 적절하지 않다고 생각하고 상품을 취소하기로 결정할 수도 있습니다. 제품이 유효한지 여부를 나타내기 위해 목록 정보가 저장되는 isActive 필드가 예약되어 있는 것을 볼 수 있습니다. 따라서 리스트를 취소할 때는 이 필드를 false로 설정하기만 하면 됩니다.
2.4. 출금 수수료
DEX는 각 거래에 대해 수수료를 부과할 수 있습니다. 이 수수료는 계약서에 입금하거나 귀하의 다른 주소로 이체할 수 있습니다. 본 조항에서는 이를 계약서에 예치하는 방식을 채택합니다.
지금까지 우리 계약의 기본 기능은 완료되었습니다.
3. DEX 프런트엔드 개발
시작하기에 앞서 다음을 포함한 몇 가지 도구를 준비해야 합니다.
Ant Design Web3: 지갑 연결 및 NFT 카드 표시에 사용됩니다.
Wagmi: 지갑과 상호 작용하는 데 사용됩니다.
Nextjs + Vercel: 프로젝트를 배포합니다.
프런트엔드 애플리케이션은 Mint, Buy, Portfolio의 세 페이지를 포함해야 합니다. Mint는 사용자가 NFT를 주조할 수 있는 곳이며 데모용으로만 제공됩니다. Buy는 사용자가 NFT를 구매할 수 있는 DEX 몰입니다. 포트폴리오에서 사용자는 NFT를 등록하거나 등록 취소할 수 있습니다.
3.1. 지갑에 연결
사용자 지갑을 연결하고 Ant Design Web3를 사용하여 구현합니다.
사용자 지갑을 연결하는 과정은 매우 간단합니다. Ant Design Web3 에서 제공하는 연결 구성 요소를 사용하기만 하면 됩니다.
먼저 프로젝트의 외부 계층에 Provider를 래핑하여 후속 코드에서 Ant Design Web3의 기능을 사용할 수 있도록 합니다. 또한, sepolia 테스트 체인에 연결해야 하므로 속도 측면에서 일부 노드 서비스를 사용하여 데이터 쿼리 속도를 높이는 것이 좋습니다. 여기서는 아시아 태평양 환경에 매우 적합한 ZAN 엔드포인트를 사용합니다. 속도가 빠르고 비용 효율성이 뛰어나며, 다양한 체인을 지원합니다.
그런 다음 지갑에 연결해야 하는 위치에 연결 버튼을 배치하세요.
그렇습니다. 매우 간단합니다.
3.2. 박하
https://zan.top/faucet/ethereum에서 NFT를 발행하고 테스트 토큰을 받으세요.
Mint 페이지에서는 테스트를 위해 NFT를 주조할 수 있습니다. 민트는 계약서를 작성하는 작업입니다. 여기서는 wagmi의 useWriteContract 메서드를 사용해야 합니다. 계약 주소, 계약 ABI, 계약 매개변수만 지정하면 됩니다.
그 후 지갑에서 확인하면 채굴이 성공할 것입니다.
3.3. 포트폴리오
사용자의 NFT 관리
모든 사용자의 NFT는 여기에 표시되어야 합니다. 일부 NFT API를 사용하여 이를 얻을 수 있습니다. 여기서는 sepolia 테스트 체인을 지원하는 NFT API가 많지 않기 때문에 opensea API를 사용합니다.
사용자의 NFT 목록을 얻은 후에는 해당 목록이 선반에 올랐는지 확인해야 합니다. 아직 선반에 올라가지 않은 도서라면, 목록에 올리는 것을 지지할 수 있고, 이미 선반에 올라간 도서라면, 목록에서 삭제하는 것을 지지할 수 있습니다. 판단 방법은 DEX 계약의 getSellerListings 메서드를 통해 사용자가 등록한 NFT를 얻은 다음, 이러한 NFT의 isAlive 필드를 기준으로 등록되었는지 확인하는 것입니다.
등록할 때는 listNFT 계약 메서드를 호출해야 하고, 취소할 때는 cancelListing 메서드를 호출해야 합니다. 등록하기 전에 NFT 승인 메서드를 호출하여 NFT를 계약에 승인해야 합니다. 이렇게 하면 후속 거래가 완료된 후 NFT가 자동으로 구매자에게 전송됩니다.
3.4. 구입하다
Buy에서 NFT를 구매할 수 있습니다.
먼저, 나열된 NFT를 표시해야 합니다. 포트폴리오에서 사용자의 기존 NFT를 표시하는 것과 비슷하게, 여기서의 차이점은 하나는 글로벌하고 더 이상 특정 사용자에게 적용되지 않고, 다른 하나는 isAlive NFT만 표시하면 된다는 점입니다.
구매할 때 purchaseNFT 방법을 사용하세요. 이 메서드를 호출할 때는 판매 가격을 지불하기 위해 ETH를 사용해야 합니다.
여기서 가치는 구매자가 지불해야 하는 ETH입니다.
모든 기본 기능을 갖춘 DEX 프런트엔드 페이지가 이제 완성되었으며, 이를 Vercel에 배포할 수 있습니다.
이 글은 ZAN Team(X 계정 @zan_team )의 Yeezo(X 계정 @GaoYeezo 75065 )가 작성했습니다.
