Criando seu marketplace de NFTs com Mintbase.js + Next.js

Ruben Marcus
7 min readMar 27, 2024

--

Nesse artigo você vai:

- Aprender sobre NFTs
- Aprender sobre Near Protocol
- Aprender como criar uma conta Near na Mintbase Wallet
- Aprender como criar um Contrato na Near através da Mintbase
- Aprender como mintar e listar um NFT
- Aprender como criar sua própria Marketplace na Vercel usando Mintbase.js e Next.js

A idéia desse artigo é trazer uma forma de introduzir os NFTs para entusiastas dos assuntos e abordar as diferentes perspectivas e formas de iniciar no mundo desses ativos digitais.
Eu, sou o Ruben, Desenvolvedor Sênior na Mintbase a 1 ano e meio, e atualmente tenho uma coleção de 2119 tokens, e 449 tokens listados a venda ( muitos de graça ), e mais de 4824 transações.

O que são NFTs?

NFTs (Non-Fungible Tokens), é uma tecnologia que visa identificar ativos fisicos ou digitais , através de metadados registrados na blockchain. A ideia de tokenizar ativos digitais vem de encontro a possibilitar que artistas, ou colecionadores de itens digitais, não só artes, como skins de games, videos, e diversas diferentes midias, mas também bens fisicos (como roupas, tênis, itens de colecionadores e até casas), sejam autenticados e comercializados através dos NFTs.

Para quem são os NFTs?

Para todo mundo. Foi construida uma idéia e um pré-conceito de que os NFTs são mais um esquema de piramide, ou de golpes devido a casos famosos, e devido também a desconfiança de muitas pessoas, por generalizar os NFTs apenas como "jpegs de macaco".
Porém os NFTs são muito mais do que isso. Bens digitais e fisicos são transacionados todos os dias através dos NFTs.
Para o nosso caso de uso específico, podemos dizer que as chances de você enriquecer vendendo NFTs são bem baixas, porém você pode sim conseguir alguma compensação financeira vendendo artes,fotografias,mídias digitais que você produzir e enviar para a blockchain.
Uma das vantagens dos NFTs que após listado, você pode passar a ganhar royalties em cima de cada transação, sendo uma forma de renda contínua e indefinida para o criador ( minter ) do NFT.

Porque criar um Marketplace?

O marketplace seria basicamente o seu site com a galeria de NFTs disponiveis na sua loja de NFTs ou no seu perfil de usuário. Você pode atrair visitantes para o seu site, customizar o design, adicionar novas features, e caso seja um artista, ou alguém que quer obter financiamento de seus fãs ou fidelizar sua audiência, os NFTs é uma maneira de realizar isso.

Near Protocol

A Mintbase funciona em cima da Near Protocol. A Near é a blockchain com mais usuários ativos na web3 (com 3.7milhões de usuários ativos todos os dias), e é uma das mais rápidas e com os custos reduzidos. Para você ter uma noção o custo de mintar (subir um NFT) na Ethereum que é a blockchain com maior numero de smart contracts, pode chegar a mais de 20 dolares ou até mais só para custear os custos da transação. Enquanto na Near é comum ser muito menos que 1 dolar.

Testnet

Dentro da Blockchain existe uma 2 redes principais: Mainnet ( a rede pra valer onde você coloca seu saldo em cripto e faz transações na cripto ), e a "Testnet" que é uma rede com saldo fake, onde qualquer um pode fazer diversas transações sem custo algum. Porém como o próprio nome diz é "testnet", você não pode depois converter o cripto que você ganhou com vendas e royalties para outras criptos, ou pra moeda comum ( dólar, euros, reais ), o tutorial escrito nesse artigo tem a intenção de introduzir um marketplace em ambiente testnet, porém oferece alternativas para fazer também em Mainnet, com todos os custos agregados.

Mintbase.js

Mintbase.js é a biblioteca da Mintbase para interagir com os NFTs e o indexador da Mintbase na blockchain da Near. Tem diversos módulos como o @mintbase-js/data, @mintbase-js/sdk e o @mintbase-js/react, que são os packages que vamos utilizar nesse tutorial.

Fique a vontade para reportar bugs, adicionar sugestões e passar feedbacks no nosso canal do telegram ou no nosso repositório do Github.

Passo 1: Criar uma conta Near

- Criando uma conta Near na Mintbase Wallet

Caso você esteja usando um dispositivo Windows eu recomendo criar sua conta em https://app.mynearwallet.com

Acesse https://testnet.wallet.mintbase.xyz

Clique em Continue, ele vai perguntar a permissão de passkeys, (ainda sem suporte pro Windows, apenas dispositivos IOS e Android )

caso seu dispositivo tenha suporte a autenticação por digitais ele vai pedir a autorização:

ele vai criar sua conta e trazer a tela de sucesso:

Agora vamos criar sua Store ( Smart Contract ) na Near no site da Mintbase:

- Criando seu Contrato na Mintbase:

  • vá a https://testnet.mintbase.xyz/
  • no topo na direita clique em Connect Wallet
  • clique em Mintbase Wallet
  • ele vai te redirecionar para a Mintbase Wallet:
  • Clique em Continue, ele vai logar e te redirecionar para a Home da Mintbase.
  • Visite esse site e digite o address da sua conta ( vão te transferir 10 N )
  • Dentro do site da Mintbase logado na Home vai ter esse widget:
  • Clique em Deploy NFT Contract
  • Ele vai pedir o nome do contrato ( vai ser o address dele ) e o symbol:
  • Clique em Deploy, ele vai para a pagina de transação na Wallet, e debitar (3.7 N) :
  • Você vai ver a tela de sucesso:
  • Na página de Contract Settings, você consegue customizar toda a sua loja, colocando links, fotos de capa, foto de perfil, entre outras opções.
  • Na página de Mint NFT você vai mintar o seu NFT.

Mintando seu primeiro NFT

Na página de Mint, vou mintar a foto do cachorro caramelo, meu cachorro favorito. Como esse é um contrato testnet, não existe o problema de direitos autorais, pois é só um teste, mas uma vez mintando em Mainnet, saiba que seu NFT e até o contrato pode ser derrubado caso infrinja direitos autorais.

  • No N de Tokens, esse é o numero de tokens que esse NFT vai ter. É como se fosse o número de edições. Imagine que você tem um evento de música e o NFT é o ingresso. O Número de tokens é o numero de ingressos. É a mesma lógica aqui.
  • Adicionando Royalties, na parte de Forever Royalties, você consegue adicionar até 25 contas que podem receber royalties de todas transações que esse NFT vai fazer indefinidamente.
  • As outras opções dessa página são mais relativas a metadados extras do seu NFT.
  • Clique no botão Mint NFT
  • Ele vai abrir a página de transação na Wallet, clique Continue
  • Pronto você Mintou seu primeiro NFT!
  • Agora vamos Listar o NFT para venda, clique nesse botão:
  • Preencha os campos e clique em Make Listing

Criando seu Marketplace

  • Sete as env vars e clique em Deploy:
  • Sucesso sua Loja foi criada!
  • Essa loja do cachorro caramelo pode ser acessada aqui
  • Você pode customizar sua aplicação Next.js dentro do repositório que você criou na sua conta do Github. É uma aplicação Next.js 14, fique a vontade para customizar e caso criar mande pra gente para divulgarmos!
  • Para fazer o mesmo processo em Mainnet você precisa criar uma conta em https://wallet.mintbase.xyz e fazer as mesmas etapas em https://www.mintbase.xyz, Porém por ser Mainnet você não consegue usar Near Faucets, você precisa comprar Near na sua exchange de preferencia como Binance, Coinbase etc, e transferir para sua conta Near.
  • Quaisquer dúvidas,idéias, sugestões, basta entrar em contato pelo Telegram, Linkedin, ou até e-mail

--

--