Desenvolvimento prático de DEX NFT: de contratos inteligentes à implementação front-end

robot
Geração do resumo em andamento

Construir um DEX de NFT do zero

Para os NFTs do protocolo ERC-721, como implementar a Descentralização na negociação? Atualmente, a maioria dos exchanges de NFT utiliza o método de ordens pendentes para negociar, semelhante a exibir produtos nas prateleiras do supermercado, onde os compradores podem comprar se acharem o preço adequado. Este artigo irá implementar uma funcionalidade básica de negociação descentralizada de NFT através da escrita de contratos inteligentes e uma página frontal simples.

Introdução ao NFT

NFT(Token Não Fungível)é um token não fungível, onde cada Token é único e segue o protocolo ERC-721. Normalmente, cada NFT exibirá imagens diferentes na carteira, com um ID exclusivo para distinção. Devido às características dos NFTs, não é possível definir preços da mesma forma que os tokens ERC-20 através de curvas de preço, portanto, a forma comum de negociação é em forma de livro de ordens.

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

modo de negociação do livro de ordens

O modo de livro de ordens é principalmente dividido em duas tipos:

  1. Ordem de preço: o vendedor define o preço de venda, e o comprador pode comprar se achar adequado.
  2. Pedido de compra: o comprador emite um pedido de compra, e o vendedor pode vender se achar o preço adequado.

Em geral, o preço da ordem de compra será inferior ao da ordem de preço. Este artigo apresenta principalmente o modo de ordem de preço.

Série para Iniciantes em Web3: Implementar um NFT DEX do zero

NFT Exchange Centralizada básico funções

Um exchange NFT básico deve incluir as seguintes funcionalidades:

  1. Listar produtos: Colocar NFT à venda pelo preço definido
  2. Comprar produto: comprar com preço de NFT
  3. Cobrança de taxas: cobrada com base na proporção do preço de negociação.

Processo de listagem de produtos

  1. Front-end: O usuário seleciona o NFT e define o preço, clica em listar
  2. Contrato: Usuário autoriza operação de contrato NFT

Processo de compra de produtos

  1. Frontend: o usuário escolhe o NFT, clica em comprar
  2. Contrato: Transferir os fundos do comprador para o vendedor, NFT para o comprador

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

Implementar um exchange de NFT

1. Criar NFT de teste

Pode usar o Remix para implantar rapidamente um contrato NFT do protocolo ERC-721 para testes.

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

2. Escrever contratos inteligentes

O contrato contém principalmente os seguintes métodos:

2.1 Vendedor lista NFT

Fluxo:

  1. O usuário escolhe NFT
  2. Definir preço
  3. Autorizar NFT ao contrato
  4. Chamar o método de listagem

Método de execução de listagem:

  1. Verificar a propriedade do NFT
  2. Adicionar registo de listagem
  3. Disparar evento de listagem

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

2.2 Comprador compra NFT

Execução de contrato:

  1. Ler dados NFT
  2. Calcular e deduzir a taxa de serviço
  3. Transferir NFT para o comprador
  4. Disparar evento de compra

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

2.3 Cancelar listagem

Definir o campo isActive do registro de listagem como false

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

2.4 Taxa de retirada

Retirar as taxas acumuladas no contrato.

Web3 Novos Usuários: Criar um NFT DEX do Zero

3. Desenvolver a interface frontend

Ferramentas principais utilizadas:

  • Ant Design Web3: Conectar carteira e exibir NFT
  • Wagmi: Interação com a carteira
  • Next.js + Vercel: implantação do projeto

A interface contém 3 páginas:

  • Mint: Criar NFT de teste
  • Buy:NFT marketplace
  • Portfólio: Gerir NFTs do utilizador

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

3.1 Conectar carteira

Implementado utilizando o componente de conexão Ant Design Web3.

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

3.2 Página de Mint

Utilize o método useWriteContract do wagmi para chamar o método mint do contrato NFT.

Web3 novato série: implementar um NFT DEX desde o zero

3.3 Página de Portfólio

Exibir os NFTs que o usuário possui, suportando operações de listagem e deslistagem.

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

3.4 Página de Compra

Exibir NFTs listados, suportando operações de compra.

Série para novatos em Web3: criando um NFT DEX do zero

Através dos passos acima, um DEX básico de NFT foi implementado. Pode-se implantar o frontend no Vercel para acesso e utilização.

MINT-0.93%
Ver original
Esta página pode conter conteúdo de terceiros, que é fornecido apenas para fins informativos (não para representações/garantias) e não deve ser considerada como um endosso de suas opiniões pela Gate nem como aconselhamento financeiro ou profissional. Consulte a Isenção de responsabilidade para obter detalhes.
  • Recompensa
  • 6
  • Compartilhar
Comentário
0/400
IntrovertMetaversevip
· 14h atrás
Comprar vegetais no supermercado é provavelmente mais fácil do que isso.
Ver originalResponder0
DaisyUnicornvip
· 14h atrás
Ai, é um protocolo pequeno e maravilhoso, ainda mais incrível que as prateleiras do supermercado~
Ver originalResponder0
GateUser-a180694bvip
· 14h atrás
Espero que este dex possa mudar os pontos problemáticos das transações de nft.
Ver originalResponder0
DecentralizedEldervip
· 14h atrás
A abertura já começou, pessoal!
Ver originalResponder0
ThatsNotARugPullvip
· 14h atrás
contratos inteligentes aquela parte é um grande problema
Ver originalResponder0
CascadingDipBuyervip
· 14h atrás
ordens em aberto comprar e vender este low ser liquidado
Ver originalResponder0
  • Marcar
Faça trade de criptomoedas em qualquer lugar e a qualquer hora
qrCode
Escaneie o código para baixar o app da Gate
Comunidade
Português (Brasil)
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)