Como Construir uma Galeria de NFT na Solana Usando a API de NFT do QuickNode

Visão Geral

Olá leitores! Neste tutorial vamos construir um pequeno aplicativo que permite obter todos os NFTs de uma determinada carteira Solana e exibir todas as informações deles numa página da web. Para construir isto, vamos usar o framework Remix JS para servir a página da web e a NFT-API do QuickNode disponibilizado para a Solana consultar as informações do NFT.

Pré-requisitos:

Node.js instalado

Um editor de texto

Familiaridade com o React

Configurando o App

A primeira coisa que precisamos fazer é colocar o remix-app em funcionamento. Para fazer isso, você pode executar o seguinte comando:

npx create-remix@latest

Ele lhe fará uma série de perguntas ao executar o comando:

Onde você gostaria de criar seu aplicativo? Estou escolhendo ./qn-nft-api, mas você pode dar-lhe o nome que quiser.
Onde você deseja fazer o deploy? Remix App Server
TypeScript ou JavaScript? TypeScript
Você quer que eu execute 'npm install'? y

Se você respondeu às perguntas como acabei de descrever, você deve obter algo assim.

Após ter instalado o aplicativo, abra seu editor de código onde quer que você tenha colocado o aplicativo. Vamos usar o Tailwind para dar um pouco de estilo ao aplicativo, por isso devemos fazer essa configuração a seguir. Para começar, podemos executar o comando:

npm install --save-dev concurrently tailwindcss

A parte "concomitante" nos poupará da dor de cabeça de ter que gerenciar vários terminais.

npx tailwindcss init

Isso vai criar um arquivo chamado tailwind.config.js. Atualize o arquivo para que se pareça com o código abaixo.

module.exports = {
  mode: "jit",
  purge: ["./app/**/*.{ts,tsx}"],
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

Com isso fora do caminho, precisamos atualizar nossos scripts. Dirija-se para package.json e localize a parte do seu arquivo que se parece com isto:

 "scripts": {
    "build": "remix build",
    "dev": "remix dev",
    "postinstall": "remix setup node",
    "start": "remix-serve build"
  },

E atualize-o para que se pareça com isso:

 "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -o ./app/tailwind.css",
    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -o ./app/tailwind.css --watch",
    "postinstall": "remix setup node",
    "start": "remix-serve build"
  },

Isto garantirá que, à medida que nosso aplicativo Remix for construindo, nosso estilo tailwind será atualizado junto com ele.

Agora, para importar nossos estilos, precisaremos ir ao app/root.tsx para que nossos estilos sejam capturados globalmente. Na parte superior do arquivo, você inserirá esta linha logo abaixo de todas as outras importações.

// app/root.tsx
import tailwindCSS from "./tailwind.css";

Isso vai importar todos os estilos que o tailwind precisa para fazer sua mágica. Agora, precisamos conectá-lo ao "modo Remix". O Remix usa links para gerenciar seu estilo. Se você quiser saber mais sobre isso, pode verificar nesse link, mas não precisa de um conhecimento profundo para continuar.

A próxima coisa que precisaremos fazer é exportar nossos estilos na raiz para que o resto do aplicativo os pegue. Para fazer isso, você pode colocar esta função abaixo em qualquer lugar da sua pasta root.tsx.

// app/root.tsx
export const links: LinksFunction = () => {
  return [{ rel: "stylesheet", href: tailwindCSS }];
};

E com isso você agora tem o tailwind trabalhando em seu aplicativo Remix!

O próximo passo na configuração de nosso aplicativo é obter um endpoint QuickNode com a extensão do NFT habilitada.

Você precisará se inscrever para um novo endpoint, escolher SOL, e escolher esta extensão:

Você precisa do endpoint HTTPS para este tutorial. Deve ser algo parecido com isto:

Com isso feito, podemos passar à construção do aplicativo.

Construindo a Galeria

Com todo nosso estilo na ponta dos dedos e um nó Solana superalimentado, estamos prontos para começar a construir.

Felizmente para nós, a API do NFT torna isso muito mais fácil do que seria de outra forma.

Vamos inicializar nosso servidor de desenvolvimento executando o seguinte comando:

npn run dev 

NOTA: Certifique-se de manter isso funcionando!

Se você for ao localhost:3000 deverá ver a seguinte página da web.

Agora volte ao seu editor de código. Vamos criar uma nova rota. Para fazer isso, abra app/rotas e crie outro arquivo lá dentro com o nome nft.tsx

Nesse arquivo você pode adicionar esse trecho de código abaixo.

export default function NFT() {
  return <h1>gm</h1>;
}

Salve o arquivo e vá para localhost:3000/nft

Você será cumprimentado com o seguinte:

Ótimo, agora que temos a rota funcionando, podemos passar para a parte da galeria. Estou encarregando você, leitor, de pegar um endereço que tenha alguns NFTs que você gostaria de ver. Neste tutorial vou usar uma carteira de teste com alguns NFTs nela:

"DcTmx4VLcf5euAB17nynax7g55xuB3XKBDyz1pudMcjW"

Sinta-se à vontade para usar essa se você não conseguir encontrar outra, mas eu realmente o encorajo a fazer deste projeto o seu!

Precisamos nos conectar à rede Solana usando nosso endpoint QuickNode e enviar-lhe um post request de todos os dados do NFT. Para fazer isso, vamos criar uma nova função loader.

As Loaders são a forma do Remix de obter dados para exibir no cliente. Ele fica no mesmo arquivo que o seu HTML do lado cliente, mas é inteiramente executado no servidor, portanto é seguro realizar operações confidenciais aqui. Eles então expõem um hook (gancho) para que você pegue estes dados em seu cliente. Vamos usar esta função loader para pegar todos os nossos dados de NFTs. Este é o aspecto da nossa loader.

// nft.tsx
export const loader: LoaderFunction = async () => {
  const wallet = "DcTmx4VLcf5euAB17nynax7g55xuB3XKBDyz1pudMcjW";
  const body = {
    method: "qn_fetchNFTs",
    params: [wallet, []],
  };
  const options = {
    method: "POST",
    body: JSON.stringify(body),
  };

  const res = await fetch(
    "<YOUR_QUICKNODE_URL_HERE>",
    options
  );
  return res;
};
// ..........Resto do código

Você terá o TypeScript gritando com você agora. Então você vai querer adicionar a seguinte declaração de importação bem no topo do nft.tsx.

import { LoaderFunction, useLoaderData } from "remix";

Usaremos a importação do useLoaderData um pouco mais tarde no tutorial, portanto, não se preocupe com isso por enquanto.

Você vai querer substituir a variável carteira para ser a carteira que você quiser consultar para obter informações. Você também precisará substituir por seu endpoint HTTP obtido do QuickNode.

O Remix inclui polyfills à API Fetch para trabalhar no tempo de execução do nó, de modo que é assim que podemos usar a sintaxe fetch em nosso servidor.

Para detalhar a função acima, estamos pegando nossa carteira e passando-a para o método qn_fetchNFTs, que é então enviada como um post request para o endpoint do QuickNode. Todas as informações que são retornadas a partir dessa solicitação, devolvemos ao cliente para consumo. Para obter os valores exatos que são devolvidos, você pode dar uma olhada em nossos docs para fetchNFTs da Solana.

E com apenas um pedido, vamos ter todas as informações necessárias para construir nossa página da web. Precisaremos substituir o "gm" que estamos retornando por um formato estilo cartão para exibir todas as informações dos nossos NFTs. Também vamos usar o gancho useLoaderData() que importamos anteriormente.

// nft.tsx
export default function NFT() {
  const data = useLoaderData();
  return (
    <div className="p-4">
      <h1>gm! {data.result.owner} Here are your NFTs</h1>
      <ul>
        {data.result.assets.map((nft: any) => (
          <li key={nft.tokenAddress}>
            <div className="max-w-sm  m-2 rounded overflow-hidden shadow-lg">
              <img
                className="w-full"
                src={nft.imageUrl}
                alt={nft.description}
              />
              <div className="px-6 py-4">
                <div className="font-bold text-xl mb-2">{nft.name}</div>
                <p className="text-gray-700 text-base">{nft.description}</p>
              </div>
              <div className="px-6 pt-4 pb-2">
                {nft.traits.map((trait: any) => (
                  <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
                    {trait["trait_type"]}: {trait.value}
                  </span>
                ))}
              </div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  )
}

Uma rápida análise do que está acontecendo aqui. No início desta função temos a variável data que está usando o gancho useLoaderData() para nos fornecer todas as informações que obtivemos do servidor. Exibimos a carteira que possui todos os NFTs na parte superior. Fazemos um loop através dos resultados dos dados para gerar apresentações no estilo cartão para todos os NFTs que foram retornados de nossa consulta.

Se você tiver inserido um endereço válido da carteira Solana, verá um resultado que se parece com as imagens abaixo.

E com isso você criou com sucesso uma galeria NFT com apenas um pedido!

Aqui está um último trecho de código e será o arquivo completo que você deve ter. Sinta-se à vontade para usar isso como um ponto de referência se você se perder a qualquer momento!

import { LoaderFunction, useLoaderData } from "remix";

export const loader: LoaderFunction = async () => {
  const wallet = "DcTmx4VLcf5euAB17nynax7g55xuB3XKBDyz1pudMcjW";
  const body = {
    method: "qn_fetchNFTs",
    params: [wallet, []],
  };
  const options = {
    method: "POST",
    body: JSON.stringify(body),
  };

  const res = await fetch(
    "<SEU_QUICKNODE_URL_AQUI>",
    options
  );
  return res;
};

export default function NFT() {
  const data = useLoaderData();
  return (
    <div className="p-4">
      <h1>gm! {data.result.owner} Here are your NFTs</h1>
      <ul>
        {data.result.assets.map((nft: any) => (
          <li key={nft.tokenAddress}>
            <div className="max-w-sm  m-2 rounded overflow-hidden shadow-lg">
              <img
                className="w-full"
                src={nft.imageUrl}
                alt={nft.description}
              />
              <div className="px-6 py-4">
                <div className="font-bold text-xl mb-2">{nft.name}</div>
                <p className="text-gray-700 text-base">{nft.description}</p>
              </div>
              <div className="px-6 pt-4 pb-2">
                {nft.traits.map((trait: any) => (
                  <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
                    {trait["trait_type"]}: {trait.value}
                  </span>
                ))}
              </div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

Conclusão
Parabéns por ter chegado até o fim! Neste tutorial, você aprendeu como usar a API para NFT do QuickNode para consultar a blockchain para informações de NFTs. Você também aprendeu como configurar um aplicativo que busca dados reais usando o Remix. Eu realmente o encorajaria a brincar com todas as diferentes chaves que estão no objeto assets que você vê no código. Nos links de documentos acima, você tem todas as informações que poderia precisar sobre a ferramenta NFT e todos os valores que ela retorna.

Inscreva-se em nossa newsletter para mais arquivos e guias da Ethereum. Se você possui algum feedback, sinta-se à vontade para nos contactar pelo Twitter. Você sempre pode conversar conosco em nosso servidor da comunidade Discord, que possui alguns dos desenvolvedores mais legais que você já conheceu :)

23 de setembro, 2022

Esse artigo foi escrito por Noah Hein e traduzido por Fátima Lima. O original pode ser lido aqui.