Solana Dev 101: crea una aplicación SvelteKit con la nueva DAS API

Introducción

El SDK de la Digital Asset Standard API (DAS) simplifica la compresión y DAS en Solana mediante tipos, abstracciones de una sola línea y respuestas con el formato correcto.

Este tutorial paso a paso te mostrará cómo usar el DAS SDK para mostrar imágenes de una colección de NFT en una página web mediante el método getAssetsByGroup. Además, sentará las bases para usar el DAS SDK en escenarios más complejos.

Requisitos previos

Para aprovechar al máximo este tutorial, asegúrate de cumplir los siguientes requisitos:

• npm o yarn instalado: son gestores de paquetes necesarios para administrar las dependencias del proyecto.
• Conocimientos básicos de JavaScript: debes dominar conceptos fundamentales de JavaScript, como variables, funciones y objetos.
• Git instalado: es necesario para el control de versiones y la colaboración.

Configura tu entorno

Para seguir este tutorial, recomendamos usar el repositorio base disponible aquí.

Consulta una versión en vivo de este proyecto aquí.

Paso 1: Configura un nuevo proyecto de SvelteKit

Primero, configura un nuevo proyecto de SvelteKit. Puedes usar la plantilla create-svelte para crear la estructura del proyecto. Ejecuta el siguiente comando en tu terminal:

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

Después, ve al nuevo directorio:

cd das-ui

A continuación, instala las dependencias del proyecto:

npm install

Paso 2: Configura la función auxiliar

En el directorio src/lib/util configurado, crea un archivo llamado collection.ts.

Dentro de este archivo, configura una función getCollection como se muestra a continuación:

import { Helius } from 'helius-sdk';

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

La función getCollection es asíncrona y recupera una colección de datos de NFT desde una DAS API. Usa el Helius SDK para realizar solicitudes RPC sin tener que configurar una llamada con fetch o axios.

1. Comienza la función comprobando si hay datos almacenados en el almacenamiento local bajo la clave 'nftData'. Si los hay, analiza esos datos JSON y devuélvelos.

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

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

Esta es una forma de almacenamiento en caché que reduce las solicitudes de red innecesarias si los datos ya se obtuvieron antes. Puedes incorporar tu propia lógica personalizada de caché y carga.

       2. A continuación, inicializamos nuestro cliente de Helius con nuestra clave de API. De forma opcional, puedes indicar el clúster que quieres usar y el ID de tu solicitud RPC.

const helius = new Helius('YOUR_API_KEY');

3. Inicializamos un par de variables para la paginación. Las usaremos para recorrer los resultados de la DAS API y obtener 1000 elementos a la vez hasta recuperarlos todos.

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

4. Entramos en un bucle while que seguirá ejecutándose mientras paginate sea true. Dentro del bucle, hacemos una solicitud a la DAS API mediante helius.rpc.getAssetsByGroup(). Proporcionamos la clave del grupo, el valor del grupo y el número de página actual.

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

5. Procesamos los elementos de la respuesta. Si hay menos de 1000 elementos, sabemos que ya los obtuvimos todos, así que establecemos paginate en false para salir del bucle. De lo contrario, incrementamos la variable page para obtener el siguiente conjunto de elementos en la próxima iteración.

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 elemento de la respuesta, extraemos name e image de los metadatos y los agregamos a nuestro arreglo results.

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

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

7. Por último, guardamos los resultados en el almacenamiento local para no tener que volver a obtenerlos la próxima vez y los devolvemos.

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

Este es el 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);
		}
	}
}

Recuerda reemplazar YOUR_API_KEY por tu clave de API de Helius real y groupValue por el valor real de la colección que quieres mostrar. En este ejemplo, nuestro groupValue es 8Rt3Ayqth4DAiPnW9MDFi63TiQJHmohfTWLMQFHi4KZH, que corresponde al ID de la colección Solana Monkey Business Gen 3.

Paso 3: Crea el componente Collection

1. En el directorio $lib/components, crea un archivo llamado Collection.svelte. Dentro de este archivo, configura las importaciones necesarias en la etiqueta <script>.

En este código:

• Importamos nuestra función getCollection para usarla en este componente.
• Importamos onMount, onDestroy y afterUpdate desde svelte.
• Configuramos nuestra colección con un tipo vacío para recibir un nombre y una imagen por cada NFT.
• Configuramos nuestra función onMount para que llame a getCollection y después establezca los datos de la colección.

2. Ahora podemos configurar nuestro Intersection Observer para renderizar las imágenes solo cuando aparezcan en pantalla. Esto es especialmente importante cuando cargas tantas imágenes como en este caso.

3. Ahora podemos configurar onDestroy para detener el observador que configuramos en la función afterUpdate anterior.

4. Ahora podemos configurar nuestra cuadrícula con tailwind para que use un formato de cuadrícula y se adapte a todos los tamaños de pantalla:

5. Configura el interior de la cuadrícula para cargar en la vista las imágenes devueltas:

En el código anterior:

• Usamos el div externo para configurar la cuadrícula y las columnas mediante tailwind.
• Colocamos aquí un bloque each para cargar la fuente de imagen de cada elemento.
• Agregamos un div de tarjeta y otro de imagen al diseño de cuadrícula por cada NFT devuelto que queremos mostrar.

Este es el código completo:

Paso 4: Crea la página para mostrar la colección

1. En tu directorio src/routes, crea un archivo llamado +page.svelte e ingresa el siguiente código:

En este paso, importamos nuestro componente de colección en la página principal.

2. A continuación, configura el diseño de la página.

En este paso:

• Configuramos el contenedor donde se colocará el contenido de la página.
• Agregamos un encabezado con estilos en la etiqueta <style>.
• Colocamos el componente Collection.svelte importado justo debajo de <h1> en el contenedor.

Paso 5: Inicia el servidor

Ya puedes iniciar tu servidor de SvelteKit. Ejecuta el siguiente comando en tu terminal:

npm run dev

Conclusión

¡Felicidades! Configuraste correctamente un proyecto de SvelteKit que usa el Helius SDK para obtener y mostrar una colección de NFT. La función configurada en collection.ts es flexible y puede utilizarse en distintos frameworks. Este tutorial establece las bases para aprovechar el DAS SDK en casos de uso más complejos.