WEB3DEV

Cover image for Cunhe e Distribua NFT’s na Solana
Adriano P. Araujo
Adriano P. Araujo

Posted on

Cunhe e Distribua NFT’s na Solana

Neste projeto tutorial, aprenderemos como podemos cunhar uma edição NFT de uma NFT principal diretamente na carteira do usuário.

Neste projeto tutorial, demonstraremos como podemos cunhar uma cópia de uma NFT  principal na carteira do receptor usando as API SHYFT.

Isso pode ser útil para quando quisermos recompensar as edições NFT’s por determinadas ações de usuário. Por exemplo, ganhar um jogo, obter pontuações suficientes, concluir determinadas tarefas etc.

O criador / titular da NFT principal será referido como sender_wallet e o usuário que receber a edição NFT será referido como receiver_wallet. A NFT Principal é a edição principal e original cujas cópias cunharemos, e as NFTs cunhadas serão chamadas de edição de NFT’s.

Pré-requisitos

Para começar, precisaremos de algumas coisas.

Autenticação: obtendo sua chave de API Shyft

x-api-key é um parâmetro de autenticação que fornece acesso às API’s SHYFT. Você pode obter sua própria chave de API no  site SHYFT. Basta se inscrever com seu ID de email aqui e você pode obtê-lo gratuitamente.

Carteira Phantom 

Precisamos da extensão de navegador Phantom, você pode baixá-lo no link abaixo.

Uma vez feito , configure sua conta de carteira Phantom. Estão disponíveis dicas na tela, que o guiarão na configuração e com os primeiros passos. Você também pode encontrar um guia detalhado relacionado a este aqui.

Vamos usar React para desenvolver este projeto, mas você pode escolher qualquer linguagem de sua escolha. Uma vez que utilizaremos o react, precisaremos do Node.js instalado em nosso computador. Você pode baixar node.js  aqui.

Configuração inicial

Vamos começar a criar!  Vamos usar o React— Biblioteca Javascript para criar este aplicativo, mas você pode usar qualquer linguagem de script de sua escolha. Vamos começar criando um novo aplicativo react. Abra o terminal no diretório em que deseja criar o projeto e execute o seguinte comando.

npx create-react-app mint-detach

Se este comando for executado com sucesso, um pipeline de compilação do front-end do React deve estar pronto dentro do diretório com o nome do projeto (Pasta do projeto) que você escolheu. Aqui, escolhemos chamar nosso aplicativo de mint-detach, mas você pode nomeá-lo como quiser. Uma vez feito, abra a pasta do projeto com um editor de código de sua escolha.

** Editor de código **

Nós usamos o  VScode como nosso editor de código para este projeto, mas você pode usar qualquer editor, como Sublime Text, Notepad + +, Atom ou qualquer outro de sua escolha. Depois de decidido, vamos abrir o projeto em nosso editor de códigos. Deve parecer algo assim.

Criando um novo aplicativo react e abrindo-o com seu editor de código

Formulário para aceitação de dados

Vamos criar um formulário muito preliminar que  aceite os dados de que precisamos para cunhar a NFT. Nós vamos precisar do endereço da carteira de remetente, do endereço da carteira do receptor, rede em que a NFT existe ( seja devnet, testnet ou mainnet ) e o master_nft_address ( o endereço da NFT que está sendo cunhado ). Então, vamos criar um formulário com os respectivos campos.

Um formulário simples para aceitar os vários detalhes necessários para a chamada da API

Observe que o último campo no formulário se refere à questão de saber se o sender_wallet ( aquele que atualmente tem o update_authority do NFT sendo transferido ) deseja transferir o update_authority da NFT para o receiver_wallet.

A chamada da API

Antes da chamada da API

Precisamos passar X-API-KEY no cabeçalho, essa chave é usada para fins de autenticação.

Você pode encontrar mais sobre nossas APIs aqui.

Obtendo seu próprio X-API-KEY

x-api-key é um parâmetro importante que passamos para o cabeçalho enquanto fazemos a chamada da API para fins de autenticação. Você pode obter o seu próprio x-api-key do nosso Site SHYFT. Basta se inscrever com seu ID de email aqui e você pode obtê-lo gratuitamente.

Agora, quando tivermos o endereço da carteira, estamos prontos para fazer a chamada da API.

Nosso Endpoint da API

https://api.shyft.to/sol/v1/nft/mint_detach

Ao contrário de outras API’s SHYFT, essas API’s ( terminando com _detach ) são um tipo especial de API’s, que não executam a ação diretamente; em vez disso, retorna uma transação que requer uma assinatura e aprovação do usuário. Depois de aprovada, a ação pretendida é atualizada na blockchain.

Vamos usar o pacote axios  para fazer a chamada da API, mas você pode usar outros pacotes ou o próprio fetch API  do javascript. Você pode aprender mais sobre o axios pacote aqui.


axios({

       // Endpoint para obter NFTs

       url: '[https://api.shyft.to/sol/v1/nft/mint_detach'](https://api.shyft.to/sol/v1/nft/mint_detach'),

       method: "POST",

       headers: {

         "Content-Type": "application/json",

         "x-api-key": "YOUR_X_API_KEY",

       },

       data: {

         network: network,

         wallet: sender,

         master_nft_address: nftAddress,

         receiver: receiver,

         transfer_authority: auth

       }

     })

Enter fullscreen mode Exit fullscreen mode

Detalhes dos dados a serem enviados

  • Rede: devnet, testnet ou mainnet-beta

  • Carteira: endereço da carteira do remetente ( público )

  • master_nft_address: Endereço da NFT

  • Receptor: endereço da carteira do receptor ( público )

  • Transfer_authority: se definido como true, a carteira do receptor receberá o update_authority da NFT

Você pode aprender mais sobre nossas API’s e seu payload em detalhes aqui.

Se for bem-sucedido, devemos obter uma resposta com a transação codificada. A resposta se parece um pouco com isso.


{

 "success": true,

 "message": "NFT Edition mint request generated successfully",

 "result": {

   "encoded_transaction": "AgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADd/kZ7nuc7bHY1UZVoVPsZ2Slp+9Sz9dwdHYG7/EP0XTgUn5L1oPWrbCiWyhASqoz4vROwbl2Neo1exHuYvnYIAgAID0mioYxx/asdasdsSls7U3Uq1cPiWEWioadmJJkpfEpJj1IRPDYHVKLFdzmKAhEV5ABsw3PbAIcv3yNkm3z5V2dA0oNsKtkdrxCZh81eIaZc6sHtpoVRDXqCwk2sxG3tUhDS4Opo80GCvyIr4gr+MfwhU03cnO9eEM/I2BvSTn8atGSgv4jEnlxkrsXIO3WpLa65+YPE+hVbcdZfoTSlkuSZace5SwBw7BnI9z9u9hPXYCyNkAAWPPPEqUQJe24xjrsbmyqqUL4gQg6etSyylLP4PMcsG5bcYK4xg9sKxkzNEVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYyp9RxUce7b6XJTmDH3BTasbGTY2hJe2h0xJ16/4PFYyXJY9OJInxuz0QKRSODYMLWhOZ2v8QhASOe9jb6fhZzgOeiS4FIAsM7m2Xp1OR42r2qbdt9WblPm7k6dy0XkQLcGWx49F8RTidUn9rBMPNWLhscxqg/bVJttG8A/gpRgan1RcZLFxRIYzJTD1K8X9Y2u4Im6H9ROPb2YoAAAAABt324ddloZPZy+FGzut5rBy0he1fWzeROoz1hX7/AKkOmNc6v7OEyaYVVIa6Sv4A/AgVM+wz147I5bRZEbS74yKOCI5qZRvBPiwWe60BzPA23jIRrCRiPj2oAj/VJbo9BQcCAAE0AAAAAGBNFgAAAAAAUgAAAAAAAAAG3fbh12Whk9nL4UbO63msHLSF7V9bN5E6jPWFfv8AqQ0CAQxDAABJoqGMcf65O3NEpbO1N1KtXD4lhFoqGnZiSZKXxKSY9QFJoqGMcf65O3NEpbO1N1KtXD4lhFoqGnZiSZKXxKSY9QkHAAMIAQcNDAANAwEDAAkHAQAAAAAAAAALDgYFAgEEAAAADggKDQcMCQsCAAAAAAAAAA==",

   "mint": "D3DWxLFj3LHXcTHFcN7DDXyxFNEJsdsadXsKDukmrfos5H9R"
 }
}
Enter fullscreen mode Exit fullscreen mode

Como discutido anteriormente, ele retorna uma transação codificada em result.encoded_transaction. Este encoded_transaction exigirá autenticação do usuário antes que ele possa executar a operação com sucesso. Para executar esta autenticação de transação, usaremos JS SDK da SHYFT. Depois de recebermos a transação codificada, a transmitiremos ao JS SDK, que permitirá que os usuários aprove e autentiquem usando um pop-up na carteira. Você pode aprender mais sobre o nosso JS SDK em nossos próximos lançamentos ou blogs.


axios({

       // Endpoint para cunhar NFTs

       url: '[https://api.shyft.to/sol/v1/nft/mint_detach'](https://api.shyft.to/sol/v1/nft/mint_detach'),

       method: "POST",

       headers: {

         "Content-Type": "application/json",

         "x-api-key": "YOUR_X_API_KEY",

       },

       data: {

         network: network,

         wallet: sender,

         master_nft_address: nftAddress,

         receiver: receiver,

         transfer_authority: auth

       }

     })

       //Lida com a resposta do back-end aqui

       .then(async (res) => {

         console.log(res.data);

         if(res.data.success === true)

         {

           const transaction = res.data.result.encoded_transaction;

           console.log(ret_result);

           //send this transaction to the SHYFT JS SDK which will authenticate the transaction after approval from the sender

         }

         else

         {

           console.log('Some Error Occurred');

         }

       })

       // Pega os erros se houverem

       .catch((err) => {

         console.warn(err);

         setMssg("Failed! Some error occurred");

       });

Enter fullscreen mode Exit fullscreen mode

A transação será bem-sucedida quando for aprovada

O JS SDK

O SHYFT  JS SDK consiste em duas funções e é usado para aprovar e autenticar transações codificadas geradas pelo API’s SHYFT ( _detach APIs). As duas funções são:

  • confirmTransactionFromFrontend ( )

  • confirmTransactionFromBackend ( )

Essas duas funções são usadas para a mesma finalidade, mas têm cenários de casos de uso diferentes. Para este projeto, usamos a função confirmTransactionFromFrontend()

1)Confirmando transações do front-end ( qualquer carteira Solana )

function confirmTransactionFromFrontend(connection, encodedTransaction, wallet)

Essa é a função que usamos neste projeto para assinar as transações codificadas. Este função assíncrona usa os seguintes parâmetros:

  • connection : Este parâmetro captura na connection um objeto o qual contém  o JSON RPC connection para um RPC API URL para o cluster especificado.
const rpcUrl = clusterApiUrl ( network ); // network aqui talvez devnet, testnet ou mainnet-beta

const connection = new Connection ( rpcUrl, "confirmed" );
Enter fullscreen mode Exit fullscreen mode
  • encodedTransaction : Este parâmetro aceita o encoded_transaction que recebemos na resposta à chamada da API.
{

 "success": true,

 "message": "NFT Edition mint request generated successfully",

 "result": {

   "encoded_transaction": "THE_ENCODED_TRANSACTION_RECEIVED",

   "mint": "MINT_ADDRESS"

 }

}
Enter fullscreen mode Exit fullscreen mode
  • wallet : Este parâmetro aceita o objeto da carteira que está sendo usado para executar esta transação, neste caso, o sender_wallett. Nós usamos o Adaptador de carteira Phantom para conectar-se à carteira do remetente para este projeto de amostra.

Depois de executado com sucesso, isso deve exibir um pop-up para o usuário, para que ele possa aprovar ( ou rejeitar ) a transação.

2). Confirmando transações no back-end usando chaves privadas

function confirmTransactionFromFrontend(connection, encodedTransaction, wallet)

Essa função assíncrona tem funcionalidade semelhante à anterior. Mas é usado em um cenário diferente, onde private_key uma carteira autorizadora ( neste caso, o sender_wallet) está disponível. Esta função possui os seguintes parâmetros:

  • network: absorve a rede na qual o token existe. Pode ser um dos seguintes valores: 'devnet', 'testnet' ou 'mainnet-beta'

  • encodedTransaction : Este parâmetro aceita um encoded_transaction que recebemos na resposta de qualquer chamada da API _detach do SHYFT.

{
 "success": true,
 "message": "NFT Edition mint request generated successfully",
 "result": {
   "encoded_transaction": "THE_ENCODED_TRANSACTION_RECEIVED",
   "mint": "MINT_ADDRESS"
 }
}
Enter fullscreen mode Exit fullscreen mode
  • privateKey : Este parâmetro aceita o private_key da carteira que tem autoridade para executar a ação que está sendo executada na respectiva chamada da API. Em termos mais simples, suponha que estamos tentando cunhar um NFT já criado o qual o update_authority está como 'WALLET # 1'. Portanto, para que essa função funcione, precisamos passar a chave privada do 'WALLET # 1'.

Pacotes necessários para o JS SDK funcionar

Alguns dos pacotes necessários para o JS SDK funcionar e assinar transações localmente:

  • @solana / web3.js

  • @metaplex / js

  • @solana / wallet-adapter-phantom ( usado apenas na assinatura de transações do front-end )

Para instalar esses pacotes, abra o terminal na pasta do projeto e execute o seguinte comando:

npm i < package_name>

Nota: toda vez que instalamos um pacote, precisamos parar e executar novamente o servidor usando o comando npm run start.

Uma vez aprovado, o NFT será cunhado e adicionado ao receiver_wallet. Você pode usar o nossa AOI read_all para verificar a NFT que você acabou de adicionar ao receiver_wallet. Quer saber como você pode fazer isso? Clique aqui para saber mais.

Após a adição da NFT à carteira

Dica de bônus: como assinar transações localmente com a chave secreta

Vamos considerar este mesmo exemplo em que estamos cunhando e adicionando uma NFT, cuja update_authority está com WALLET # 1 ( será referido aqui como o sender_wallet), para WALLET # 2 ( será referido aqui como o receiver_wallet), mas em vez de assinar e aprovar a transação usando o pop-up no front-end, usaremos a Chave Privada do sender_wallet assinar e aprovar a transação localmente.

Vamos voltar alguns passos até o ponto em que estávamos fazendo a chamada da API e recebendo a encoded_transaction na resposta.


axios({

       // Endpoint cunhar  NFTs

       url: '[https://api.shyft.to/sol/v1/nft/mint_detach'](https://api.shyft.to/sol/v1/nft/mint_detach'),

       method: "POST",

       headers: {

         "Content-Type": "application/json",

         "x-api-key": "YOUR_X_API_KEY",

       },

       data: {

         network: network,

         wallet: sender,

         master_nft_address: nftAddress,

         receiver: receiver,

         transfer_authority: auth

       }

     })

       // Lida com a resposta do back-end aqui

       .then(async (res) => {

         console.log(res.data);

         //We get the encoded_transaction here

         //which we will sign from the backend using the JS SDK

         if(res.data.success === true)

         {

           const transaction = res.data.result.encoded_transaction;

           console.log(ret_result);

         }

         else

         {

           console.log('Some Error Occurred');

         }

       })

       // Pega os erros se houverem

       .catch((err) => {

         console.warn(err);

         setMssg("Failed! Some error occurred");

       });

Enter fullscreen mode Exit fullscreen mode

Uma vez que temos o  encoded_transaction vamos usar a função confirmTransactionFromBackend() do JS SDK para assinar e autenticar a transação. Esta função aceita a chave privada do remetente_wallet como um dos parâmetros. Podemos aceitar esta chave privada usando um campo de formulário do remetente deste projeto ou também podemos carregá-la de um arquivo .env.

Depois de termos a chave privada, estamos prontos para fazer a chamada da função. Como explicado antes, a função assíncrona confirmTransactionFromBackend()the aceita 3 parâmetros: network, encoded_transaction e privateKey, a chamada da função seria algo parecido com

await confirmTransactionFromBackend('devnet','THE_ENCODED_TRANSACTION','THE_PRIVATE_KEY_OF_THE_SENDER_WALLET');

Uma vez executado com sucesso, isso deve assinar e aprovar a transação, e a operação pretendida, que neste caso, a operação de cunhagem da NFT estará concluída.

Usamos essa chamada de API e a função  confirmTransactionFromBackend() para cunhar tokens para quando os usuários não tiverem acesso. Sinta-se livre para experimentá-lo aqui.

Um aplicativo de API de cunhagem, na NFT Gated Access Dapp

Isso é praticamente tudo sobre este projeto tutorial. Se você gostou e deseja testar nosso código, pode clonar o código do nosso repositório do GitHub.

Recursos

Se você gostou, também pode ler nossos tutoriais sobre aqui  Read all NFTs from a wallet ou aqui Build NFT Gated App.

Espero que você tenha se divertido construindo Dapps com as API’s SHYFT . Feliz hacking!!😇


Este artigo foi escrito por Team Shyft  e traduzido por Adriano P. de Araujo. O original em inglês pode ser encontrado aqui.

Latest comments (0)