Tornamos super fácil para você integrar NFTs, tokens, marketplaces e muito mais em seu aplicativo.
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
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
Isso cria o código padrão para o seu dapp e a estrutura do arquivo se parece com esta abaixo:
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>
);
Este é um formulário simples com os seguintes parâmetros:
- Escolha um arquivo de imagem que você deseja cunhar como um NFT
- Selecione a rede (testnet, devnet, mainnet-beta)
- A chave pública da sua carteira Phantom
- Nome do NFT
- Símbolo do NFT
- Descrição do NFT
-
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. - 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.
- Porcentagem de royalties do criador da NFT. Pode ser qualquer valor entre 0 e 100.
- Atributos associados ao NFT. É uma string de matriz JSON, não se esqueça de
Stringifycomo 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"
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"
....
},
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");
});
}
O endpoint da API usado:
POST https://api.shyft.to/sol/v1/nft/create_detach
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:
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
Seu aplicativo básico ficará assim:
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"
}
}
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.
- Acesse https://explorer.solana.com/ e selecione a rede. (Devenet para este tutorial)
- 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. - Os detalhes da transação podem ser verificados colando
txnIdda 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.
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.
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
- Documentação da API SHYFT
- Site Shyft
- Obter chave da API
- GitHub
- Ferramenta de assinatura de transações Solana
- Junte-se ao nosso Discord
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
Top comments (0)