Solana Dev 101 — создание приложения SvelteKit с новым DAS API

Введение

SDK для Digital Asset Standard API (DAS) упрощает работу со сжатием и DAS в Solana благодаря типам, однострочным абстракциям и правильно отформатированным ответам.

В этом пошаговом руководстве вы узнаете, как с помощью DAS SDK и метода getAssetsByGroup отображать изображения коллекции NFT на веб-странице. Кроме того, руководство заложит основу для применения DAS SDK в более сложных сценариях.

Предварительные требования

Чтобы получить максимум пользы от этого руководства, убедитесь, что выполнены следующие предварительные требования:

• Установлен npm или yarn: эти менеджеры пакетов необходимы для управления зависимостями проекта.
• Базовое знание JavaScript: вы должны понимать основные концепции JavaScript, такие как переменные, функции и объекты.
• Установлен Git: он необходим для контроля версий и совместной работы.

Настройка окружения

Чтобы выполнять шаги этого руководства, рекомендуем использовать готовый шаблон из репозитория, доступного здесь.

Посмотреть работающую версию проекта можно здесь.

Шаг 1. Настройте новый проект SvelteKit

Сначала нужно настроить новый проект SvelteKit. Для создания структуры проекта можно использовать шаблон create-svelte. Выполните следующую команду в терминале:

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

Затем перейдите в новый каталог:

cd das-ui

Установите зависимости проекта:

npm install

Шаг 2. Настройте вспомогательную функцию

В созданном каталоге src/lib/util создайте новый файл с именем collection.ts.

В этом файле настройте функцию getCollection, как показано ниже:

import { Helius } from 'helius-sdk';

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

Функция getCollection — это асинхронная функция, которая получает данные коллекции NFT из DAS API. Она использует Helius SDK для выполнения RPC-запросов, поэтому вам не придется настраивать вызов fetch или axios.

1. В начале функции проверьте, хранятся ли в локальном хранилище данные с ключом «nftData». Если данные есть, преобразуйте их из JSON и верните.

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

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

Это форма кеширования, которая сокращает количество ненужных сетевых запросов, если данные уже были получены ранее. Вы можете добавить собственную логику кеширования и загрузки.

       2. Затем инициализируйте клиент Helius с помощью ключа API. При необходимости можно также указать кластер и идентификатор RPC-запроса.

const helius = new Helius('YOUR_API_KEY');

3. Инициализируйте несколько переменных для пагинации. Они позволят постранично получать результаты из DAS API по 1000 элементов за раз, пока не будут получены все элементы.

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

4. Запустите цикл while, который будет выполняться, пока значение paginate равно true. Внутри цикла отправьте запрос к DAS API с помощью helius.rpc.getAssetsByGroup(). Передайте ключ группы, значение группы и номер текущей страницы.

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

5. Обработайте элементы в ответе. Если элементов меньше 1000, значит, все элементы уже получены. Установите paginate в false, чтобы выйти из цикла. В противном случае увеличьте переменную 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++;
}

6. Для каждого элемента в ответе извлеките name и image из метаданных и добавьте их в массив results.

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

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

7. Наконец, сохраните результаты в локальном хранилище, чтобы не запрашивать их снова в следующий раз, и верните их.

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

Полный код: 

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);
		}
	}
}

Не забудьте заменить YOUR_API_KEY на свой ключ Helius API, а groupValue — на фактическое значение коллекции, которую вы хотите отобразить. В этом примере значение groupValue — 8Rt3Ayqth4DAiPnW9MDFi63TiQJHmohfTWLMQFHi4KZH. Это идентификатор коллекции Solana Monkey Business Gen 3.

Шаг 3. Создайте компонент Collection

1. В каталоге $lib/components создайте новый файл с именем Collection.svelte. В этом файле добавьте необходимые импорты в тег <script>.

В этом коде мы:

• Импортируем функцию getCollection, чтобы использовать ее в этом компоненте.
• Импортируем onMount, onDestroy и afterUpdate из svelte.
• Задаем для коллекции пустой тип, чтобы получать название и изображение каждого NFT.
• Настраиваем функцию onMount для вызова getCollection и последующего сохранения данных коллекции.

2. Теперь можно настроить Intersection Observer, чтобы изображения отрисовывались только при появлении в области просмотра. Это особенно важно при загрузке такого большого количества изображений.

3. Теперь настройте onDestroy, чтобы остановить наблюдатель, созданный в предыдущей функции afterUpdate.

4. Теперь с помощью Tailwind настройте адаптивную сетку для экранов любого размера:

5. Настройте внутреннюю часть сетки для загрузки и отображения изображений из полученных данных:

В приведенном выше коде мы:

• Используем внешний div для настройки сетки и столбцов с помощью Tailwind.
• Добавляем блок each для загрузки источника изображения каждого элемента.
• Добавляем в макет сетки карточку и div изображения для каждого возвращенного NFT.

Полный код:

Шаг 4. Создайте страницу для отображения коллекции

1. В каталоге src/routes создайте новый файл с именем +page.svelte и добавьте в него следующий код:

На этом шаге мы импортируем компонент коллекции на главную страницу.

2. Затем настройте макет страницы.

На этом шаге мы:

• Настраиваем контейнер для содержимого страницы.
• Добавляем заголовок, стилизованный в теге <style>.
• Размещаем импортированный Collection.svelte сразу после <h1> в контейнере.

Шаг 5. Запустите сервер

Теперь все готово для запуска сервера SvelteKit. Выполните следующую команду в терминале:

npm run dev

Заключение

Поздравляем! Вы успешно настроили проект SvelteKit, который использует Helius SDK для получения и отображения коллекции NFT. Функция из collection.ts универсальна и подходит для разных фреймворков. Это руководство закладывает основу для применения DAS SDK в более сложных сценариях.