WEB3DEV

Cover image for Construa seu primeiro NFT dApp com Solana
Banana Labs
Banana Labs

Posted on

Construa seu primeiro NFT dApp com Solana

Tornamos super fácil para você integrar NFTs, tokens, marketplaces e muito mais em seu aplicativo.

capa

Neste tutorial, construiremos um dApp simples que permite criar um NFT na blockchain Solana, usando APIs Shyft. No final deste tutorial, seu NFT recém-criado estará disponível em sua carteira.

Pré-requisitos

Para começar, primeiro vamos instalar uma extensão de navegador da Phantom Wallet usando os links abaixo:

Uma vez instalado, abra o Phantom no seu navegador e siga as etapas na tela para criar uma nova carteira. Consulte este guia, se precisar de ajuda. Agora, você tem um par de chaves público-privadas que servem como uma identidade na blockchain.

Instale nodeJs e npx (node package executor)

Passos para mac:

//Digite os seguinte comandos no seu terminal:
$ brew update
$ brew install node

//Uma vez completado, Verifique se foi instalado adequadamente:
$ node -v
v18.0.0    // Se foi instalado adequadamente, ele mostrará na saída a versão do node

// instale npx:
$ npm i -g npx
Enter fullscreen mode Exit fullscreen mode

Configurar

Agora estamos prontos para criar nosso primeiro dapp de cunhagem NFT. Usaremos ReactJs para construir um front-end simples para permitir que você crie uma NFT interativamente. Usaremos o VS Code no decorrer deste tutorial.

Autenticação: Obtendo sua chave da API Shyft

x-api-key é um parâmetro de autenticação, que dá acesso a APIs SHYFT. Você pode obter sua própria chave da API no site da SHYFT. Basta se inscrever com seu ID de e-mail aqui e você pode obtê-lo gratuitamente.

Configurar projeto React

$ npx create-react-app my-first-nft-dapp
Enter fullscreen mode Exit fullscreen mode

Isso cria o código padrão para o seu dapp e a estrutura do arquivo se parece com esta abaixo:

Estrutura de Arquivos

Vamos nos aprofundar no código

Vamos criar um novo formulário para aceitar todos os detalhes (parâmetros) necessários para criar um novo NFT. Criamos um novo componente para o formulário, mas você também pode colocar esse código diretamente no App.js

const [file, setfile] = useState();
  const [network, setnetwork] = useState("devnet");
  const [publicKey, setPublicKey] = useState(''); //your wallet's public key
 const [name, setName] = useState();
  const [symbol, setSymbol] = useState();
  const [desc, setDesc] = useState();
  const [attr, setAttr] = useState();
  const [extUrl, setExtUrl] = useState();
  const [maxSup, setMaxSup] = useState(0);
  const [roy, setRoy] = useState(1);

  const [status, setStatus] = useState("Awaiting Upload");
  const [dispResponse, setDispResp] = useState("");

  return (
    <div className="App">
      <form>
        <label htmlFor="file">Select File</label>
        <input name="file" type="file" onChange={(e) => {
          setfile(e.target.files[0]));
        }} />
        <br />
<label htmlFor="network">
          Network <span>(network: string)</span>
        </label>
        <select name="network" onChange={(e) => { setnetwork(e.target.value) }}>
          <option value="devnet">Devnet</option>
          <option value="testnet">Testnet</option>
          <option value="mainnet-beta">Mainnet Beta</option>
        </select>
        <br />
<label>Public Key (wallet:string)</label>
        <input type="text" value={publicKey} onChange={(e) => setPublicKey(e.target.value)} required />
        <br />
<label htmlFor="name">Name (name:string)</label>
        <input type="text" name="name" value={name} onChange={(e) => setName(e.target.value)} required />
        <br />
<label htmlFor="symbol">Symbol (symbol:string)</label>
        <input type="text" name="symbol" value={symbol} onChange={(e) => setSymbol(e.target.value)} required />
        <br />
<label htmlFor="desc">Description (description:string)</label>
        <textarea name="desc" value={desc} onChange={(e) => setDesc(e.target.value)} required></textarea>
        <br />
<label htmlFor="attributes">Attributes (attributes:string)</label>
        <textarea name="attributes" value={attr} onChange={(e) => setAttr(e.target.value)} required></textarea>
        <br />
<label htmlFor="external_url">External Url (external_url:string)</label>
        <input type="text" name="external_url" value={extUrl} onChange={(e) => setExtUrl(e.target.value)} />
        <br />
<label htmlFor="max_supply">Max Supply (max_supply:number)</label>
        <input type="number" name="max_supply" value={maxSup} onChange={(e) => { setMaxSup(e.target.value) }} required />
        <br />
<label htmlFor="royalty">Royalty (royalty:number)</label>
        <input type="number" name="royalty" value={roy} onChange={(e) => { setRoy(e.target.value) }} required />
        <br />
<button type="submit" onClick={mintNow}>
          Submit
        </button>
      </form>
<textarea
        className="form-control"
        name=""
        value={JSON.stringify(dispResponse)}
        id=""
        cols="30"
        rows="10"
      ></textarea>
    </div>
  );
Enter fullscreen mode Exit fullscreen mode

Este é um formulário simples com os seguintes parâmetros:

  1. Escolha um arquivo de imagem que você deseja cunhar como um NFT
  2. Selecione a rede (testnet, devnet, mainnet-beta)
  3. A chave pública da sua carteira Phantom
  4. Nome do NFT
  5. Símbolo do NFT
  6. Descrição do NFT
  7. External_Url, isso pode ser vinculado a qualquer site que você deseja colocá-lo. Isso ficará visível na conta da carteira Phantom para navegação.
  8. O número de edições de um NFT em particular que pode ser cunhado. pode ser definido como zero, se você quiser criar um NFT único.
  9. Porcentagem de royalties do criador da NFT. Pode ser qualquer valor entre 0 e 100.
  10. Atributos associados ao NFT. É uma string de matriz JSON, não se esqueça de Stringify como feito no trecho de código abaixo.
let attrib = [{"trait_type": "speed", "value": 100},
{"trait_type": "aggression", "value": "crazy"},
{"trait_type": "energy", "value": "very high"}];
let paramsToPass = JSON.stringify(attrib);
//Aqui criamos 3 atributos para nosso NFT, chamados:
//1. Velocidade = 100
//2. Agressão = "Loucura"
//3. Energia = "Muito Alta"
Enter fullscreen mode Exit fullscreen mode

Fazendo a chamada da API

Assim que tivermos os dados, estamos prontos para fazer a chamada da API. Para este tutorial, usamos o pacote axios para fazer a chamada da API, mas você pode usar qualquer outro método, incluindo o próprio fetch do JavaScript.

"dependencies": {
    ...
    "axios": "^0.27.2"
    ....
  },
Enter fullscreen mode Exit fullscreen mode

axios permitirá que seu aplicativo react faça solicitações HTTP para o servidor da Shyft e crie seu NFT.

Agora, vamos criar uma função para fazer a chamada da API usando os dados que coletamos usando o formulário que criamos neste tutorial.

const mintNow = (e) => {
e.preventDefault();
setStatus("Loading");
let formData = new FormData();
formData.append("network", network);
formData.append("wallet", publicKey);
formData.append("name", name);
formData.append("symbol", symbol);
formData.append("description", desc);
formData.append("attributes", JSON.stringify(attr));
formData.append("external_url", extUrl);
formData.append("max_supply", maxSup);
formData.append("royalty", roy);
formData.append("file", file);
axios({
 // Endpoint para enviar arquivos
 url: "https://api.shyft.to/sol/v1/nft/create_detach",
 method: "POST",
 headers: {
  "Content-Type": "multipart/form-data",
  "x-api-key": "Your-api-key",
  Accept: "*/*",
  "Access-Control-Allow-Origin": "*",
 },
// anexando os dados do formulário
 data: formData,
})
 // Manipulando a resposta vinda do backend aqui
 .then(async (res) => {
  console.log(res);
  if(res.data.success === true)
  {
   setStatus("success: Transaction Created. Signing Transactions. Please Wait.");
   const transaction = res.data.result.encoded_transaction; //encoded transaction
   setSaveMinted(res.data.result.mint);
   const ret_result = await signAndConfirmTransactionFe(network,transaction,callback); //Assinando a transação codificada
       console.log(ret_result);
   setDispResp(res.data);

  }
 })
// Capture algum erro se tiver
 .catch((err) => {
  console.warn(err);
  setStatus("success: false");
 });
}
Enter fullscreen mode Exit fullscreen mode

O endpoint da API usado:

POST https://api.shyft.to/sol/v1/nft/create_detach
Enter fullscreen mode Exit fullscreen mode

Precisamos incluir a chave da API obtida do site SHYFT na seção de cabeçalho desta chamada de API. Para obter detalhes sobre essa API e os parâmetros usados, leia a documentação da API aqui. Link para completar o arquivo App.js, depois de fazer as alterações acima:

https://github.com/Shyft-to/example-projects/blob/main/example-projects-on-NFTs/my-first-nft-dapp-create-nft/src/create_nft.js

Assinando a transação codificada

Agora você está pronto para cunhar seu primeiro NFT. Observe que esta API não requer a chave privada, mas usa a chave pública para assinar a transação necessária para a operação de criação.

Vá até o terminal e inicie o aplicativo react, executando:

npm run start
Enter fullscreen mode Exit fullscreen mode

Seu aplicativo básico ficará assim:

NFT dApp Básico

Tudo o que você precisa fazer é inserir as informações nos campos e clicar no botão enviar.

Assim que você clicar em enviar, a solicitação é enviada para o servidor Shyft e você criou com sucesso uma nova transação NFT. Agora, tudo o que você precisa fazer é assinar essa transação usando sua carteira e pronto! Seu NFT recém-criado será adicionado à sua carteira.🎉

Resposta :

{
  "success": true,
  "message": "NFT create request generated successfully",
  "result": {
    "encoded_transaction": "AgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC1sWheB4cuv/Q2+0jo6buiunKcPGhvFP0MkPZKAqEaKsIdRPXcFkiLuiIa/pyUVrKUczLjr1Hs9QG5Y5iDBksMAgAFChjKn1HFRx7tvpclOYMfcFNqxsZNjaEl7aHTEnXr/g8Vvb/IjgDJjQVC1f/ryBRhD4ahT7Q1HBYM6DpJ0WUTWn4RAfrhLTPnJMqAy/QLpEQpZFP+r95vFI1kPxccS3tj+xQxDOha6hFwbvC1+bl1KPipyhIpii09w/bWfkdcNqLoa6h4uighckbsoxU8cDYR7skYHVwb90kZsVS8bPEVzOEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIyXJY9OJInxuz0QKRSODYMLWhOZ2v8QhASOe9jb6fhZC3BlsePRfEU4nVJ/awTDzVi4bHMaoP21SbbRvAP4KUYGp9UXGSxcUSGMyUw9SvF/WNruCJuh/UTj29mKAAAAAAbd9uHXZaGT2cvhRs7reawctIXtX1s3kTqM9YV+/wCpOUrCSjEODK7K+JCY0PfeMucSKkHyBEhkHVSHEcaSI5MGBQIAATQAAAAAYE0WAAAAAABSAAAAAAAAAAbd9uHXZaGT2cvhRs7reawctIXtX1s3kTqM9YV+/wCpCQIBCEMAABjKn1HFRx7tvpclOYMfcFNqxsZNjaEl7aHTEnXr/g8VARjKn1HFRx7tvpclOYMfcFNqxsZNjaEl7aHTEnXr/g8VBgcAAwABBQkIAAkDAQMACQcBAAAAAAAAAAcHAgEAAAAFCJ0BEAkAAABmaXNoIGV5ZXMDAAAARllFWAAAAGh0dHBzOi8vbmZ0c3RvcmFnZS5saW5rL2lwZnMvYmFma3JlaWVmamF6cnhpcGpwYmFwNjZkejQ3ZW80ZWdkdzdscHUzY2tvZW43NXZhdGhvaTRtaWszM2n0AQEBAAAAGMqfUcVHHu2+lyU5gx9wU2rGxk2NoSXtodMSdev+DxUBZAAAAQcJBAEAAAACCQUIChEBAQAAAAAAAAA=",
    "mint": "Pmhfos1S2sipnz3UPgAjHQeeYzFn1pbEqpdissS2fZbj"
  }
}
Enter fullscreen mode Exit fullscreen mode

Assim que recebermos a resposta do encoded_transaction, a última e também final etapa é assinar a transação. Podemos assinar a encoded_transaction de duas maneiras, usando a carteira através do frontend ou usando a chave privada da carteira no backend.

Você pode ler mais sobre como assinar transações no Solana aqui, ou pode usar nossa ferramenta de desenvolvimento online para assinar esta transação codificada disponível no link abaixo.

https://shyft-insider.vercel.app/

Uma vez assinado com sucesso, seu NFT será criado e adicionado à sua carteira.🎉

Para verificar, se o NFT foi criado no blockchain.

  1. Acesse https://explorer.solana.com/ e selecione a rede. (Devenet para este tutorial)
  2. Cole o valor mint (o endereço on-chain do seu token) retornado na resposta na barra de pesquisa, você deve obter os detalhes do NFT criado.
  3. Os detalhes da transação podem ser verificados colando txnId da resposta na barra de pesquisa anterior no Solana explorer.

Até agora, NFT já foi recebido em sua carteira!! Vá para Seus Colecionáveis na guia da sua carteira Phantom e você deverá ver o NFT recém-criado.

NFT recém-criado visível na carteira Phantom

Visualize os atrubutos do NFT

Notas finais

Espero que você tenha gostado deste tutorial e esteja animado para mergulhar fundo na grandiosidade da web3. Fique ligado para mais tutoriais desse tipo. Se você quiser
o código completo para este projeto com uma interface de usuário bonita, faça o checkout/fork e brinque com o código neste Repositório.

https://github.com/Shyft-to/example-projects/tree/main/example-projects-on-NFTs/my-first-nft-dapp-create-nft

Sinta-se à vontade para conferir nossos outros tutoriais sobre como ler todos os NFTs de uma carteira e também sobre como criar dApp fechado por NFT.

Recursos

Obrigado pelo seu tempo. Esperamos que você se divirta criando dApps com APIs SHYFT. Feliz hack.😇


Esse artigo é uma tradução de Team SHYFT feita por @bananlabs. Você pode encontrar o artigo original aqui

Oldest comments (0)