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.
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.
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
}
})
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"
}
}
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");
});
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 naconnectionum objeto o qual contém oJSON RPC connectionpara umRPC API URLpara o cluster especificado.
const rpcUrl = clusterApiUrl ( network ); // network aqui talvez devnet, testnet ou mainnet-beta
const connection = new Connection ( rpcUrl, "confirmed" );
-
encodedTransaction: Este parâmetro aceita oencoded_transactionque 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"
}
}
-
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 umencoded_transactionque 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"
}
}
-
privateKey: Este parâmetro aceita oprivate_keyda 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 oupdate_authorityestá 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");
});
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.
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
Junte-se ao nosso Discord
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)