Solana Dev 101 — Criando um app SvelteKit com a nova DAS API

Introdução

O SDK da Digital Asset Standard API (DAS) simplifica os recursos de compressão e DAS na Solana ao oferecer tipos, abstrações de uma linha e respostas formatadas corretamente.

Este tutorial passo a passo mostrará como usar o DAS SDK para exibir imagens de uma coleção de NFTs em uma página da web usando o método getAssetsByGroup. Além disso, este tutorial servirá de base para usar o DAS SDK em cenários mais complexos.

Pré-requisitos

Para aproveitar ao máximo este tutorial, confira se você atende aos seguintes pré-requisitos:

• npm ou yarn instalado: são gerenciadores de pacotes necessários para gerenciar as dependências do projeto.
• Conhecimento básico de JavaScript: você deve estar familiarizado com conceitos fundamentais de JavaScript, como variáveis, funções e objetos.
• Git instalado: necessário para controle de versão e colaboração.

Como configurar seu ambiente

Para acompanhar este tutorial, recomendamos usar o repositório de boilerplate disponibilizado aqui.

Confira uma versão ao vivo deste projeto aqui.

Etapa 1: configure um novo projeto SvelteKit

Primeiro, precisamos configurar um novo projeto SvelteKit. Você pode usar o template create-svelte para definir a estrutura do projeto. Execute o seguinte comando no terminal:

git clone https://github.com/helius-labs/das-ui.git

Depois, acesse o novo diretório:

cd das-ui

Em seguida, instale as dependências do projeto:

npm install

Etapa 2: configure a função utilitária

No diretório src/lib/util configurado, crie um arquivo chamado collection.ts.

Dentro desse arquivo, configure uma função getCollection, conforme mostrado abaixo:

import { Helius } from 'helius-sdk';

export async function getCollection() {
// Request goes here //
}

A função getCollection é assíncrona e recupera uma coleção de dados de NFTs de uma DAS API. Ela usa o Helius SDK para fazer solicitações RPC, sem que você precise configurar uma chamada fetch ou axios.

1. Comece a função verificando se há dados armazenados no armazenamento local sob a chave 'nftData'. Se houver, analise esses dados JSON e retorne-os.

const storedData = localStorage.getItem('nftData');

if (storedData !== null) {
    return JSON.parse(storedData);
}

Essa é uma forma de cache que reduz solicitações de rede desnecessárias caso os dados já tenham sido obtidos. Você pode implementar sua própria lógica personalizada de cache e carregamento.

       2. Em seguida, iniciamos nosso cliente Helius com nossa chave de API. Opcionalmente, você pode informar o cluster que deseja usar e o ID da solicitação RPC.

const helius = new Helius('YOUR_API_KEY');

3. Inicializamos algumas variáveis para paginação. Vamos usá-las para percorrer os resultados da DAS API, obtendo 1.000 itens por vez até que todos sejam recuperados.

let results = [];
let page = 1;
let paginate = true;

4. Entramos em um loop while que continuará em execução enquanto paginate for true. Dentro desse loop, fazemos uma solicitação à DAS API usando helius.rpc.getAssetsByGroup(). Informamos a chave do grupo, o valor do grupo e o número da página atual.

while (paginate) {
    try {
        const response = await helius.rpc.getAssetsByGroup({
            groupKey: 'collection',
            groupValue: 'YOUR_COLLECTION_VALUE',
            page: page,
        });
        ...
    }
    ...
}

5. Processamos os itens da resposta. Se houver menos de 1.000 itens, sabemos que todos foram recuperados. Então, definimos paginate como false para encerrar o loop. Caso contrário, incrementamos a variável page para obter o próximo conjunto de itens na iteração seguinte do loop.

const nfts = response.items;

// if the amount of items returned is less than 1000, stop pagination
if (nfts.length < 1000) {
    paginate = false;
} else {
    // otherwise, increase the page number to get the next page of results
    page++;
}

6. Para cada item da resposta, extraímos name e image dos metadados e os adicionamos ao nosso array results.

for (const nft of nfts) {
    const name = nft.content?.metadata.name;
    const image = nft.content?.links?.image;

    results.push({ name, image });
}

7. Por fim, armazenamos os resultados no armazenamento local para não precisar buscá-los novamente na próxima vez e retornamos os resultados.

localStorage.setItem('nftData', JSON.stringify(results));
return results;

Este é o código completo: 

import { Helius } from 'helius-sdk';

export async function getCollection() {
	const storedData = localStorage.getItem('nftData');

	if (storedData !== null) {
		return JSON.parse(storedData);
	}

	const helius = new Helius('YOUR_API_KEY');
	let results = [];
	let page = 1;
	let paginate = true;
	while (paginate) {
		try {
			const response = await helius.rpc.getAssetsByGroup({
				groupKey: 'collection',
				groupValue: '8Rt3Ayqth4DAiPnW9MDFi63TiQJHmohfTWLMQFHi4KZH',
				page: page,
			});
			const nfts = response.items;

			// if the amount of items returned is less than 1000, stop pagination
			if (nfts.length < 1000) {
				paginate = false;
			} else {
				// otherwise, increase the page number to get the next page of results
				page++;
			}
			for (const nft of nfts) {
				const name = nft.content?.metadata.name;
				const image = nft.content?.links?.image;

				results.push({ name, image });
			}
			localStorage.setItem('nftData', JSON.stringify(results));
			return results;
		} catch (e) {
			console.log(e);
		}
	}
}

Lembre-se de substituir YOUR_API_KEY pela sua chave de API real da Helius e groupValue pelo valor real da coleção que você deseja exibir. Neste exemplo, nosso groupValue é 8Rt3Ayqth4DAiPnW9MDFi63TiQJHmohfTWLMQFHi4KZH, o ID da coleção Solana Monkey Business Gen 3.

Etapa 3: crie o componente Collection

1. No diretório $lib/components, crie um arquivo chamado Collection.svelte. Dentro desse arquivo, configure as importações necessárias na tag <script>.

Neste código, estamos:

• Importando nossa função getCollection para usá-la neste componente.
• Importando onMount, onDestroy e afterUpdate do svelte.
• Definindo nossa coleção com um tipo vazio para receber o nome e a imagem de cada NFT.
• Configurando nossa função onMount para chamar a função getCollection e, depois, definir os dados da coleção.

2. Agora podemos configurar nosso Intersection Observer para renderizar as imagens somente quando elas estiverem visíveis. Isso é especialmente importante ao carregar tantas imagens quanto estamos carregando.

3. Agora podemos configurar nosso onDestroy para interromper o observador definido na função afterUpdate anterior.

4. Agora podemos configurar nossa grade com Tailwind para usar um formato de grade responsivo em todos os tamanhos de tela:

5. Configure o interior da grade para carregar na tela as imagens retornadas:

No código acima, estamos:

• Usando a div externa para definir a grade e as colunas com Tailwind.
• Inserindo um bloco each aqui para carregar a origem da imagem de cada item.
• Adicionando uma div de card e imagem ao layout da grade para cada item NFT retornado para exibição.

Este é o código completo:

Etapa 4: crie a página para exibir a coleção

1. No diretório src/routes, crie um arquivo chamado +page.svelte e insira o seguinte código:

Nesta etapa, importamos nosso componente de coleção para a página principal.

2. Em seguida, configure o layout da página.

Nesta etapa, estamos:

• Definindo o contêiner em que o conteúdo da página será inserido.
• Adicionando um cabeçalho (estilizado na tag <style>).
• Inserindo nosso Collection.svelte importado logo abaixo de <h1> no contêiner.

Etapa 5: inicie o servidor

Agora você já pode iniciar seu servidor SvelteKit. Execute o seguinte comando no terminal:

npm run dev

Conclusão

Parabéns! Você configurou com sucesso um projeto SvelteKit que usa o Helius SDK para buscar e exibir uma coleção de NFTs. A função configurada em collection.ts é flexível e pode ser usada em diferentes frameworks. Este tutorial estabelece a base para aproveitar o DAS SDK em casos de uso mais complexos.