Ir para o conteúdo
Buscar

WEB3DEV

Cover image for Como cunhar um NFT na Solana usando o Typescript
Rafael Ojeda
Rafael Ojeda

Posted on

Como cunhar um NFT na Solana usando o Typescript

#solana #nft #typescript

Como cunhar um NFT na Solana usando o Typescript

Antes de iniciar este guia

Este guia lhe dará uma visão detalhada de como cunhar um NFT na Solana usando Typescript. Mas, se você deseja deixar o trabalho pesado para nós, recomendamos o add-on Crossmint NFT Mint API ( Interface de Programação de Aplicativos ). Ao usar a API para Cunhagem de NFT Crossmint, você pode evitar perder tempo escrevendo typescript, implantando contratos ou qualquer outra coisa. Use a NFT Mint API para criar coleções e criar NFTs facilmente!

Tente Crossmint NFT Mint API

Visão geral

Cunhar 10.000 NFTs com uma Candy Machine é divertido, mas há muitas situações em que precisamos criar um único NFT (por exemplo, 1 de 1 arte, música, etc.). A Metaplex, a organização que criou o padrão de metadados Solana, desenvolveu recentemente alguns SDKs JS úteis que facilitam a cunhagem de um um NFT a partir do seu terminal.

O que você fará

Neste guia, você cunhará um NFT com metadados para o devnet da Solana a partir do seu terminal, usando a biblioteca Solana Web3 e as SDKs JS Metaplex. Cobriremos três etapas-chave para a cunhagem de NFTs:

1 .Upload de imagem
2 .Upload de metadados
3 .Criação de NFT

O que você precisará

  • Nodejs (versão 16.15 ou superior) instalado
  • Experiência com Typescript e ts-node instalado

Informações básicas sobre o NFT da Solana

Antes de construir nosso aplicativo, vamos falar sobre NFTs e a arquitetura de NFT da Solana. Então, o que é um NFT? Um token não fungível é, na verdade, um conjunto de dados armazenados on-chain ( na cadeia ), que é único em relação a qualquer outro. Em resumo, só há um deles. Na Solana, conseguimos isso usando o Programa de Token SPL ( Smooth Token Potion ) e criando um token com uma oferta de 1. Além disso, os NFTs não podem ser subdivididos, o que significa que você não pode ter um terço de um NFT (nota: há alguns protocolos avançados de NFT em torno da fração, mas geralmente um NFT não pode ser dividido em unidades menores). Na Solana, também conseguimos isso usando o Programa de Token SPL, definindo os decimais como 0 (o que significa que não pode ser fração).

Embora criar um token SPL com uma oferta de 1 e decimais de 0 seja tecnicamente um NFT definido por seu ID de criação único, o Programa de Token SPL é limitado quanto a alguns dos tipos e quantidade de dados que podem ser armazenados. Entra a Metaplex. O programa Metadados Metaplex estabelece um padrão para metadados on e off-chain. Através de um endereço derivado do programa associado à conta de criação, a Metaplex permite que os usuários atribuam metadados mais detalhados à criação (por exemplo, nome, descrição, mutabilidade, taxas de venda, etc.). Um campo notável no metadados Metaplex é chamado "URI" ( Identificador Universal de Recurso ). Este é um endereço que aponta para metadados específicos off-chain ( fora da cadeia ). Devido às taxas de aluguel e às restrições de velocidade, a Metaplex espera que certos dados sejam armazenados off-chain (por exemplo, imagem / URI da imagem, traços / características do NFT). A figura a seguir, da Metaplex, apresenta as relações entre esses campos:

Image description

Fonte: https://docs.metaplex.com/programs/token-metadata/overview

Neste guia, primeiramente carregaremos nossa imagem no Arweave e buscaremos seu URI, depois criaremos os metadados off-chain e os carregaremos no Arweave e, finalmente, cunharemos nosso token e definiremos os metadados on-chain que apontam para nossos metadados off-chain.

Configure seu projeto

crie uma nova pasta de projetos em seu terminal com:

mkdir mint-nft
cd mint-nft
Enter fullscreen mode Exit fullscreen mode

Crie um arquivo para seu aplicativo, app.ts:

echo > app.ts
Enter fullscreen mode Exit fullscreen mode

Inicialize seu projeto com a bandeira "yes" para usar os valores padrão para seu novo pacote:

yarn init --yes
#or
npm init --yes
Enter fullscreen mode Exit fullscreen mode

Criar um tsconfig.json com .json importado e habilitado:

tsc -init --resolveJsonModule true
Enter fullscreen mode Exit fullscreen mode

Por fim, crie uma pasta para seus uploads:

mkdir uploads
Enter fullscreen mode Exit fullscreen mode

Salvar uma imagem (.png ou .jpg) nesta pasta como image.png. Estaremos usando esta belezinha pixelada:

Image description

Instalar a dependência Solana Web3

Precisaremos adicionar as bibliotecas Solana Web3 e SPL Token para este exercício. Além disso, usaremos as bibliotecas JS SDK da Metaplex e MPL Token Metadata. No seu terminal, digite:

yarn add @solana/web3.js @metaplex-foundation/js
#or
npm install @solana/web3.js @metaplex-foundation/js
Enter fullscreen mode Exit fullscreen mode

Criar uma Carteira e um Airdrop SOL

Você precisará criar uma Carteira da Solana File System (par de chaves escrito em um arquivo guideSecret.json) e enviar um pouco de SOL para ela. Você pode fazer isso usando Solana CLI (Interface de Linha de Comando) ou usar este script que criamos para você.

Certifique-se de salvar sua carteira na pasta de seu projeto como guideSecret.json.

Após a configuração, seu ambiente deve se parecer com este:
Image description

Configure seu aplicativo

Importação de dependências necessárias

Abra as app.ts, e cole as seguintes importações na linha 1:

import { Connection, Keypair, PublicKey } from "@solana/web3.js";
import { Metaplex, keypairIdentity, bundlrStorage, toMetaplexFile, toBigNumber } from "@metaplex-foundation/js";
import * as fs from 'fs';
import secret from './guideSecret.json';
Enter fullscreen mode Exit fullscreen mode

Além da carteira que criamos na etapa anterior, também estamos importando alguns métodos e classes essenciais das bibliotecas Solana Web3 e Metaplex JS. Além disso, como estaremos fazendo upload de arquivos de nosso sistema, precisamos importar fs, a biblioteca do sistema de arquivos.

Configure seu Endpoint no QuickNode

Para construir sobre Solana, você precisará de um endpoint de API para se conectar com a rede. O uso de nós públicos ou a implantação e gerenciamento de sua própria infraestrutura são bem-vindos; entretanto, se você quiser tempos de resposta 8x mais rápidos, você pode deixar o trabalho pesado por nossa conta. Veja por que mais de 50% dos projetos na Solana escolhem QuickNode e faça seu cadastro gratuito aqui. Vamos usar um nó Solana Devnet.

Copie o link do Provedor HTTP:

Image description

Dentro do arquivo app.ts, abaixo das suas declarações de importação, declare sua RPC ( Chamada de Procedimento Remoto ) e estabeleça sua conexão com a Solana:

const QUICKNODE_RPC = 'https://example.solana-devnet.quiknode.pro/0123456/';
const SOLANA_CONNECTION = new Connection(QUICKNODE_RPC);
Enter fullscreen mode Exit fullscreen mode

Declare Variáveis

Você precisará declarar algumas variáveis para executar seu script:

  • Sua carteira de origem (um par de chaves derivado de sua chave secreta).
  • Uma instância Metaplex.
  • Um arquivo CONFIG (usaremos isso para armazenar informações sobre o NFT que vamos cunhar).

Adicione as seguintes declarações abaixo de SOLANA_CONNECTION para estabelecer a carteira que vamos utilizar:

const WALLET = Keypair.fromSecretKey(new Uint8Array(secret));
Enter fullscreen mode Exit fullscreen mode

Estabelecer uma nova instância Metaplex chamando nossa SOLANA_CONNECTION em Metaplex.make(). Nossa instância usará o Keypair que acabamos de criar e o BundlrStorage (uma opção para carregar arquivos para o Arweave usando Solana):

const METAPLEX = Metaplex.make(SOLANA_CONNECTION)
    .use(keypairIdentity(WALLET))
    .use(bundlrStorage({
        address: 'https://devnet.bundlr.network',
        providerUrl: QUICKNODE_RPC,
        timeout: 60000,
    }));
Enter fullscreen mode Exit fullscreen mode

Ao incluir nossa conexão de rede, carteira e rota de armazenamento, a API nos facilitará a apresentação de transações à rede Solana.

Defina as características do NFT

Vamos criar um objeto CONFIG contendo alguns metadados que queremos incluir em nosso NFT. Criar uma nova constante, CONFIG, e incluir os seguintes atributos:

const CONFIG = {
    uploadPath: 'uploads/',
    imgFileName: 'image.png',
    imgType: 'image/png',
    imgName: 'QuickNode Pixel',
    description: 'Pixel infrastructure for everyone!',
    attributes: [
        {trait_type: 'Speed', value: 'Quick'},
        {trait_type: 'Type', value: 'Pixelated'},
        {trait_type: 'Background', value: 'QuickNode Blue'}
    ],
    sellerFeeBasisPoints: 500,//500 bp = 5%
    symbol: 'QNPIX',
    creators: [
        {address: WALLET.publicKey, share: 100}
    ]
};
Enter fullscreen mode Exit fullscreen mode

Sinta-se à vontade para usar seus próprios valores aqui. Apenas certifique-se de adicionar seus próprios criadores para usar PublicKeys ( chaves públicas ) para o endereço, e verifique duas vezes se a participação total é igual a 100.

Crie e Chame a Função Main

Crie uma função async, main, que usaremos para executar todas as etapas de nosso código:

async function main() {
    console.log(`Minting ${CONFIG.imgName} to an NFT in Wallet ${WALLET.publicKey.toBase58()}.`);
}

main();
Enter fullscreen mode Exit fullscreen mode

Isto não fará muito, mas você deve ser capaz de executar seu código para garantir que não haja erros neste ponto:

ts-node app
Enter fullscreen mode Exit fullscreen mode

Você deve ver um log em seu console que você está prestes a cunhar um NFT - então vamos fazer isso já! Se você estiver tendo algum problema ou tiver perguntas, nos envie uma mensagem no Discord, e ficaremos felizes em ajudar.

Faça o upload de sua imagem

Antes de fazer qualquer coisa, precisaremos carregar a imagem que usaremos para nosso NFT em uma plataforma de armazenamento descentralizada. Isto porque devemos passar o URI da imagem NFT para os metadados do NFT. Se você já tem uma imagem hospedada com um URI, sinta-se à vontade para definir isso em seu arquivo CONFIG e pule para o passo 2. Caso contrário, vamos criar uma nova função async, uploadImage antes de nossa função main. A função deve aceitar um filePath e um fileName e retornar uma promessa de uma string (o URI apontando para nossa imagem carregada).

async function uploadImage(filePath: string,fileName: string): Promise<string>  {
    console.log(`Step 1 - Uploading Image`);

}
Enter fullscreen mode Exit fullscreen mode

Para carregar nossa imagem, devemos primeiro usar o programa File System para criar um Buffer. Podemos fazer isto usando o método fs.readFileSync. Dentro de uploadImage, adicionar:

    const imgBuffer = fs.readFileSync(filePath+fileName);
Enter fullscreen mode Exit fullscreen mode

Para usar o Metaplex uploader, precisaremos converter o Buffer retornado para um MetaplexFile usando o toMetaplexFile. Na linha a seguir, adicione:

    const imgMetaplexFile = toMetaplexFile(imgBuffer,fileName);
Enter fullscreen mode Exit fullscreen mode

Use o método Metaplex storage().upload() para fazer o upload de seu arquivo. Como definimos o Bundlr como nosso provedor de armazenamento em nossa instância Metaplex, a função de upload utilizará o Bundlr para fazer o upload do arquivo para o Arweave. Conecte-se e retorne seus resultados:

    const imgUri = await METAPLEX.storage().upload(imgMetaplexFile);
    console.log(`   Image URI:`,imgUri);
    return imgUri;
Enter fullscreen mode Exit fullscreen mode

Finalmente, adicione esta etapa dentro de sua função main() chamando uploadImage e passando uploadPath e imgFileName a partir de seu arquivo CONFIG:

    //Passo 1 - Faça o Upload da Imagem
    const imgUri = await uploadImage(CONFIG.uploadPath, CONFIG.imgFileName);
Enter fullscreen mode Exit fullscreen mode

Você poderá testar sua função, executando seu script no terminal:

ts-node app
Enter fullscreen mode Exit fullscreen mode

Após alguns segundos, você deverá ver um link Arweave para sua imagem em seu terminal. Bom trabalho!

Agora vamos adicionar esse URI aos nossos metadados e fazer o upload de nossos metadados.

Upload de metadados

Os Metadados são mais ou menos o que torna seu NFT especial. Eles incluem a imagem, quaisquer traços definidores, a atribuição a uma coleção, etc. A Metaplex facilita o upload de metadados - apenas uma única chamada de nfts().uploadMetadata(). Vamos começar criando uma nova função, uploadMetadata que aceita 5 parâmetros: imgUri, imgType, nftName, Description (descrição), e attributes (atributos):

async function uploadMetadata(imgUri: string, imgType: string, nftName: string, description: string, attributes: {trait_type: string, value: string}[]) {
    console.log(`Step 2 - Uploading Metadata`);

}
Enter fullscreen mode Exit fullscreen mode

A seguir, chame nft().uploadMetadata(). Teremos que passar nossos parâmetros da seguinte forma:

    const { uri } = await METAPLEX
    .nfts()
    .uploadMetadata({
        name: nftName,
        description: description,
        image: imgUri,
        attributes: attributes,
        properties: {
            files: [
                {
                    type: imgType,
                    uri: imgUri,
                },
            ]
        }
    });
    console.log('   Metadata URI:',uri);
    return uri;
Enter fullscreen mode Exit fullscreen mode

Não há muito a acrescentar a isto, mas você pode querer acrescentar elementos extras aos seus metadados. Uma lista completa dos padrões de token do Metaplex está disponível aqui.

Vamos em frente e chamemos nossa função em main(). Após o uploadImage, chame o uploadMetadata usando nosso CONFIG para preencher os parâmetros:

    //Passo 2 - Upload dos Metadados
    const metadataUri = await uploadMetadata(imgUri, CONFIG.imgType, CONFIG.imgName, CONFIG.description, CONFIG.attributes);
Enter fullscreen mode Exit fullscreen mode

Se você quiser testar sua função, você precisará se conectar ao metadadosUri e então executar o aplicativo ts-node. Quando você estiver pronto, vamos criar este token na Solana!

Cunhar o NFT

Como nossas funções anteriores, a Metaplex API simplifica este processo e nos permite cunhar nosso NFT com um único método, nfts().create(). Ao contrário dos metadados da etapa anterior, nesta etapa final, devemos passar em alguns metadados que serão armazenados diretamente na chain da Solana.

Após sua função uploadMetadata() e antes da função main(), crie uma nova função async, mintNft():

async function mintNft(metadataUri: string, name: string, sellerFee: number, symbol: string, creators: {address: PublicKey, share: number}[]) {
    console.log(`Passo 3 - Cunhagem do NFT`);
}
Enter fullscreen mode Exit fullscreen mode

Finalmente, dentro de nossa função, chamar nfts().create() passando nossos metadadosUri e outros parâmetros de função e registrar os resultados:

    const { nft } = await METAPLEX
    .nfts()
    .create({
        uri: metadataUri,
        name: name,
        sellerFeeBasisPoints: sellerFee,
        symbol: symbol,
        creators: creators,
        isMutable: false,
        maxSupply: toBigNumber(1)
    });
    console.log(`   Success!🎉`);
    console.log(`   Minted NFT: https://explorer.solana.com/address/${nft.address}?cluster=devnet`);
Enter fullscreen mode Exit fullscreen mode

Esta função irá cunhar um token on-chain que se liga a nossos metadados usando o Programa Metaplex Metadata.

Agora tudo que você precisa fazer é chamar esta função dentro do main(), passando parâmetros do CONFIG:

    //Passo 3 - cunhar o NFT
    mintNft(metadataUri, CONFIG.imgName, CONFIG.sellerFeeBasisPoints, CONFIG.symbol, CONFIG.creators);
Enter fullscreen mode Exit fullscreen mode

Execute seu Code💨

Está tudo pronto! Caso queira verificar novamente seu código em relação ao nosso, todo o nosso livro de exercícios está disponível no GitHub aqui.

Quando você estiver pronto, digite no terminal:

ts-node app
Enter fullscreen mode Exit fullscreen mode

SIM! Você vê algo parecido com isto?

Image description

Vá em frente e siga o link em seu console para Solana Explorer. Você poderá ver seu NFT na página:

Image description

Se você rolar para baixo, você deverá ver os metadados on-chain com um link para o nossos metadados carregados:

Image description

E os atributos de nosso arquivo CONFIG:

Image description

Você também deverá ver seu NFT em sua carteira (certifique-se de ter selecionado Devnet nas configurações do desenvolvedor de sua carteira):

Image description

Ótimo trabalho.

Próximos Passos e Encerramento

Agora você tem um script útil e reutilizável para criar NFTs diretamente do seu terminal! Bem útil, não é? Quer continuar construindo? Aqui estão algumas ideias para continuar construindo a partir do que você acabou de aprender:

1 .Use uma transferência de token SPL para enviar este NFT para outra carteira. (Guia: Como transferir os tokens SPL na Solana)
2 .Use o Solana dApp Scaffold para criar um widget de cunhagem de NFT. (Guia: Como conectar usuários a seu dApp com o Adaptador de Carteira e Scaffolding Solana Nota: Você terá que usar um Adaptador de Identidade de Carteira em vez de uma **keypairIdentity* ( Identidade de Par de Chaves ) para criar sua instância de Metaplex em um front end com o Adaptador de Carteira Solana*.
Se você tentar alguma dessas idéias ou tiver alguma pergunta para nós, avise-nos! Nos encontre no Discord e no Twitter!

Nós <3 Feedback!

Se você tiver qualquer feedback ou perguntas sobre este guia, nos avise. Adoraríamos ouvir de você!

Artigo original escrito por Aaron Milano e traduzido por Rafael Ojeda

Você pode ler o artigo original em inglês aqui

Top comments (0)


Leia o próximo

diogojorg3 profile image

Tokenização de ativos no jogo

Diogo Jorge -

isabelacnehme profile image

Construindo uma Plataforma de Swap de Token com QuickNode RPC

Isabela Curado Nehme -

allluz profile image

Celebrando o Sucesso no #KingOfDevs Brasil: O primeiro de muitos prêmios para o projeto WEB3TASK | WEB3DEV

André LL Luz -

panegali profile image

Construindo um Painel de Análise Visual para a Blockchain Celo usando React.js e Web3.js: Um Tutorial Passo a Passo

Panegali -