Série para Novatos em Web3: Criar um DEX de NFT do zero

Os usuários que leram os artigos anteriores devem saber que, para os Tokens do protocolo ERC-20, podemos negociar através de DEX, representado pelo Uniswap, alcançando a Descentralização. Mas como podemos alcançar a Descentralização nas negociações do protocolo ERC-721, que são os NFTs?

Atualmente, algumas das principais exchanges de NFT utilizam um sistema de ordens para realizar transações, assim como colocar produtos nas prateleiras de um supermercado; quando o comprador acha que o preço está adequado, pode levar o produto para casa.

Este artigo irá implementar a negociação descentralizada de NFT através da escrita de contratos inteligentes e uma página front-end simples. Note que este artigo é apenas para fins de aprendizado e não pode ser utilizado em um ambiente de produção.

NFT (Token Não Fungível)

NFT, ou Token não fungível, refere-se a que cada Token é não fungível e único, seguindo o protocolo ERC-721. Em geral, cada NFT exibirá imagens diferentes na carteira, e cada conjunto de NFTs terá uma ID única para distinção.

Web3 novato série: implementar um DEX NFT a partir do zero

Devido às características do NFT, não é possível definir o preço da mesma forma que o ERC-20 através de uma curva de preço - porque cada Token é diferente. Portanto, o método de negociação mais comum atualmente é através de um livro de ordens.

Negociação em livro de ordens

O modo de livro de ordens, de forma simples, é quando o preço dos produtos é definido por pessoas, ao contrário da Uniswap, que calcula o preço com base em curvas de preço. Geralmente, o livro de ordens é dividido em dois modos de negociação: um é a ordem de preço, onde o vendedor define um preço de venda que tem em mente, e se um comprador achar o preço adequado, ele pode comprar. O outro é a ordem de compra, onde o comprador, com base em suas necessidades, emite uma ordem de compra, e quando o vendedor achar o preço adequado, ele pode vender.

Em geral, o preço do pedido de compra será inferior ao preço do pedido de venda. Este artigo apresenta apenas o primeiro método de precificação.

Funcionalidades do DEX NFT

Uma DEX de NFT deve incluir as seguintes funcionalidades básicas:

  1. Colocar produto à venda: Listar um NFT de acordo com o preço definido
  2. Comprar produtos: realizar a compra com base na precificação do NFT
  3. Taxa de DEX: A taxa de serviço é cobrada proporcionalmente ao preço da transação.

produto listado

Para listar um produto, é necessário fazer as seguintes coisas:

  1. Frontend: O usuário escolhe o seu próprio NFT, define um preço e clica em listar.
  2. Contrato: O utilizador precisa de definir permissões para o contrato, que pode controlar o NFT do utilizador.

Dessa forma, o produto estará disponível para venda. No contrato, é necessário manter um mapa de preços dos produtos listados pelos usuários; essa parte dos dados geralmente pode ser gerida em um serviço centralizado, para reduzir a carga do contrato, mas neste artigo, esses dados do mapa serão mantidos dentro do contrato.

Comprar produto

Ao comprar um produto, algumas coisas podem acontecer:

  1. Frontend: O usuário escolhe um NFT que deseja comprar e clica em comprar.
  2. Contrato: chamar o contrato, transferir o dinheiro do usuário para o vendedor do NFT e transferir o NFT para o comprador.

Implementar um DEX de NFT

Neste capítulo, vamos implementar um DEX de NFT desde o zero, este é o endereço do DEX já implantado pelo autor nft-dex-frontend.vercel.app.

Web3 Novato Série: Implementar um DEX NFT do zero

1. Criar um NFT

Para fins de teste, é melhor que tenhamos o nosso próprio NFT. Podemos rapidamente construir um NFT do protocolo ERC-721 através do Remix, que fornece o modelo correspondente.

Série para iniciantes em Web3: Criando um DEX de NFT do zero

Podemos implantar facilmente um NFT de acordo com o modelo. Claro que você também pode pular esta etapa e usar diretamente o NFT que preparamos.

2. Redação de contrato

Os nossos métodos de contrato devem incluir os seguintes métodos:

2.1. Vendedor coloca NFT à venda

O vendedor precisa especificar o NFT a ser vendido e o preço correspondente. Ao listar, o usuário precisa assinar o método de autorização do NFT, permitindo que o nosso contrato inteligente tenha permissão para operar esse NFT, assim, quando um comprador o adquirir, a transação pode ser concluída automaticamente.

Então o processo deve ser assim: 1. O usuário escolhe o seu NFT; 2. Define o preço, que pode ser em moeda estável USDT, USDC, ou em ETH; 3. Autoriza o NFT para o contrato.

Depois, pode-se chamar o método de listagem do contrato, que precisa fazer as seguintes coisas:

  1. Verificar a propriedade do NFT
  2. Adicionar registo de listagem
  3. Evento que aciona a listagem

Série para iniciantes em Web3: construir um DEX de NFT do zero

2.2. Comprador compra NFT

Quando o comprador adquire um NFT, o usuário só precisa escolher o NFT desejado e pagar o respectivo Token. No nível do contrato, serão executados os seguintes passos: 1. Ler os dados do NFT correspondente a partir das "listagens"; 2. Calcular a taxa com base no preço do NFT e deduzir essa parte do preço de venda; 3. Transferir o NFT para as mãos do comprador; 4. Acionar o evento de compra.

Web3 novato série: implementar um DEX NFT do zero

2.3. Cancelar listagem

Claro, o vendedor pode achar que o preço não é adequado e escolher cancelar a listagem. Podemos ver que ao salvar as informações da listagem, mantivemos um campo isActive para indicar se o produto é válido, portanto, ao cancelar a listagem, só precisamos definir este campo como false.

Web3 novatos série: implementar um NFT DEX do zero

2.4. Taxa de extração

DEX pode cobrar uma taxa em cada transação, e essa taxa pode ser armazenada no contrato ou transferida para outro endereço seu; este artigo opta pela forma de armazenamento no contrato.

Web3 novato série: implementar um DEX NFT do zero

Até aqui, as funcionalidades básicas do nosso contrato estão completas.

3. Desenvolvimento de front-end DEX

Antes de começar, precisamos preparar algumas ferramentas, que incluem as seguintes ferramentas:

  1. Ant Design Web3: para conexão de carteira e exibição de cartões NFT.
  2. Wagmi: utilizado para interagir com a carteira.
  3. Nextjs + Vercel: implantar o nosso projeto.

A nossa aplicação front-end deve incluir três páginas: Mint, Buy e Portfolio. Mint é para permitir que os utilizadores possam Mintar os nossos NFTs, apenas para demonstração. Buy é o nosso mercado DEX, onde os utilizadores podem comprar os nossos NFTs. No Portfolio, os utilizadores podem listar e deslistar os NFTs.

3.1. Conectar carteira

Conecte a carteira do usuário, utilizando Ant Design Web3

O processo de ligação da carteira do usuário é muito simples, basta usar o componente de ligação fornecido pelo Ant Design Web3.

Primeiro, vamos envolver o projeto com um Provider, assim, nas partes seguintes do código, poderemos aproveitar as capacidades do Ant Design Web3. Além disso, como precisamos conectar à rede de testes sepolia, para melhorar a velocidade, é aconselhável usar alguns serviços de nós para aumentar a velocidade da consulta de dados. Aqui estou usando o endpoint da ZAN, que é muito adequado para uso no ambiente da Ásia-Pacífico, é rápido e tem um preço muito acessível, suportando uma ampla variedade de cadeias.

Série para iniciantes no Web3: criar um DEX de NFT do zero

Depois, coloque um botão de conexão onde for necessário conectar a carteira:

Web3 novato série: criar um DEX NFT do zeroAssim está feito, muito simples.

3.2. Mintar

Mint um NFT, para obter moeda de teste, você pode ir para

Na página Mint, podemos Mint um NFT para testes. Mint é uma operação de escrita de contrato, e aqui vamos usar o método useWriteContract do wagmi. Precisamos especificar o endereço do contrato, o ABI do contrato e os parâmetros do contrato.

Web3 novato série: implementar um DEX NFT do zero

Depois, basta confirmar na carteira para que a Mint seja bem-sucedida.

3.3. Portfólio

Gerir NFTs dos usuários

Aqui precisamos mostrar todos os NFTs do usuário. Podemos usar algumas APIs de NFT para obter isso, e aqui utilizamos a API do opensea, pois não há muitas APIs de NFT que suportem a rede de testes sepolia.

Após obter a lista de NFTs do usuário, é necessário verificar se já estão listados. Os NFTs não listados podem ser listados, enquanto os já listados podem ser retirados. A verificação é feita através do método "getSellerListings" dentro do contrato DEX, onde se obtêm os NFTs que o usuário já listou, e então, com base no campo "isAlive" desses NFTs, se determina se estão atualmente listados.

Web3 novato série: implementar um DEX NFT do zero

Ao listar, é necessário chamar o método de contrato "listNFT" e, ao cancelar, é necessário chamar o método "cancelListing". Antes de listar, é necessário chamar o método de autorização do NFT, autorizando o NFT ao contrato, assim, após a conclusão da transação, este NFT pode ser transferido automaticamente para o comprador.

Série para iniciantes em Web3: Criando um DEX de NFT do zero

3.4. Comprar

Dentro de Buy, você pode comprar NFT

Primeiro, precisamos exibir os NFTs que já estão listados. Semelhante à exibição dos NFTs já existentes do usuário no Portfolio, a diferença aqui é que um é global, não mais restrito a um usuário específico, e o outro é que apenas os NFTs que estão isAlive precisam ser exibidos.

Use o método「 purchaseNFT 」ao comprar, e ao chamar este método, é necessário pagar o preço com ETH.

Web3 Novato Série: Implementar um DEX de NFT do zero

Aqui, este « value » é o ETH que o comprador precisa pagar.

Assim, uma página front-end DEX que inclui todas as capacidades básicas está concluída, podemos implantá-la no vercel.

Este artigo foi escrito pela equipe ZAN (X conta @zan_team) e Yeezo (X conta @GaoYeezo 75065).

Ver original
O conteúdo serve apenas de referência e não constitui uma solicitação ou oferta. Não é prestado qualquer aconselhamento em matéria de investimento, fiscal ou jurídica. Consulte a Declaração de exoneração de responsabilidade para obter mais informações sobre os riscos.
  • Recompensa
  • Comentar
  • Partilhar
Comentar
0/400
Nenhum comentário
  • Pino
Negocie cripto em qualquer lugar e a qualquer hora
qrCode
Digitalizar para transferir a aplicação Gate
Novidades
Português (Portugal)
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)