14 minutos de lectura

Resumen

En el cambiante mundo de la cadena de bloques y los tokens no fungibles (NFT), la capacidad de acceder y analizar datos de NFT en múltiples cadenas está cobrando cada vez más valor. Esta guía profundiza en la creación de una aplicación de análisis de NFT multicadena, aprovechando las capacidades avanzadas de la API de NFT con metadatos almacenados en caché disponible en el Quicknode Marketplace. Nuestro objetivo es mostrar cómo se puede crear fácilmente una potente aplicación de análisis de NFT capaz de operar a nivel multicadena y proporcionar en tiempo real detalles sobre los NFT, tales como metadatos, datos de intercambio, actividad transaccional, historial de precios, puntuaciones de estafa/spam, rareza e información sobre la propiedad.

Lo que aprenderás

En esta guía, aprenderás a:

• Utiliza la API de NFT con el complemento «Metadatos en caché»
• Desarrolla una aplicación de análisis de NFT multicadena compatible con Ethereum, Polygon, Arbitrum, Optimism y BSC.
• Recupera y muestra los metadatos de los NFT, los datos de intercambio, el historial de transacciones y mucho más.
• Crear una interfaz interactiva y visualmente atractiva para mostrar colecciones de NFT en distintas cadenas de bloques.

Lo que necesitarás

Antes de empezar, asegúrate de que dispones de lo siguiente:

• Conocimientos básicos de JavaScript/TypeScript y React
• Un entorno de desarrollo configurado para React (Node.js, npm y un editor de código)
• Acceso al complemento «API de NFT con metadatos almacenados en caché» con una cuenta de Quicknode (crea una cuenta aquí)

Complemento «API de NFT con metadatos almacenados en caché»

Capacidades y características

El complemento «API de NFT con metadatos almacenados en caché» es una potente herramienta para los desarrolladores que se adentran en el ámbito de los NFT. Entre sus funciones se incluyen:

• Acceso directo a los metadatos de los NFT en tiempo real: obtén información detallada sobre los NFT, incluyendo características, rareza y titularidad, en tiempo real.
• Datos bursátiles y actividad transaccional: Accede a datos exhaustivos de diversos mercados, incluidos los precios históricos y las transacciones recientes.
• Índices de estafa y spam: evalúa la legitimidad de los NFT mediante los índices de estafa y spam.
• Recursos almacenados en caché en la CDN: La API devuelve las URL de la caché de la CDN para los recursos NFT en tamaños optimizados para la web, ideales para el desarrollo de aplicaciones.
• Compatibilidad entre cadenas: agrupa la información sobre los NFT de Ethereum, Polygon, Arbitrum, Optimism y BSC.

El valor para los desarrolladores

El uso de la API de NFT con el complemento «Metadatos en caché» ofrece importantes ventajas, sobre todo si se compara con el proceso manual de extracción y gestión de datos de la cadena de bloques:

Aspecto	Enfoque manual	Con el complemento NFT API
Tiempo y recursos	Requiere configurar procesos de extracción de datos, analizar registros y gestionar bases de datos para cada cadena de bloques.	Proporciona datos agregados e indexados de múltiples cadenas de bloques, lo que elimina la necesidad de gestionar los datos de forma individual.
Complejidad del desarrollo	Implica un profundo conocimiento de los protocolos de blockchain y de los procesos de normalización de datos.	Simplifica el desarrollo al abstraer las complejidades de la extracción y normalización de datos de la cadena de bloques.
Experiencia del usuario	La latencia en la extracción de datos en tiempo real puede mermar la capacidad de respuesta de la aplicación y la variedad de funciones que ofrece.	Garantiza un acceso rápido y fiable a datos optimizados, lo que permite crear aplicaciones ágiles y con numerosas funciones.

Configuración de un terminal

Configurar tu punto final con la API de NFT con metadatos almacenados en caché es muy sencillo. Si aún no te has registrado, puedes crear una cuenta aquí.

Una vez que hayas iniciado sesión, ve a la página quicknode.com/endpoints y haz clic en «Crear un punto final». Selecciona la red principal de Ethereum (o cualquiera de las otras redes compatibles) y, a continuación, haz clic en «Siguiente». A continuación, se te pedirá que configures el complemento. Activa la API de NFT con metadatos almacenados en caché. Después, solo tienes que hacer clic en «Crear punto final».

Si ya dispones de un punto final sin el complemento, ve a la página «Complementos» de tu punto final, selecciona «API de NFT con metadatos en caché» y actívalo.

Una vez que tu punto final esté listo, ve a la página «Complementos» y copia la URL de la API de BlockSpan, que se encuentra junto al complemento «API de NFT con metadatos en caché ».

La URL debería ser similar a la que aparece a continuación. En la siguiente sección, necesitarás tu clave secreta de API.

https://api.blockspan.com/{YOUR_SECRET_TOKEN}/v1/

información

Dependiendo del número de cadenas de bloques que quieras utilizar, deberás repetir este proceso. Por lo tanto, habrá diferentes claves API secretas para cada cadena.

Creación de la aplicación

Para empezar a desarrollar tu aplicación de análisis de NFT, es fundamental configurar un entorno de desarrollo sólido. Esto te garantizará un flujo de trabajo fluido y eficiente a medida que avances en el proyecto.

Configuración del proyecto

Instala Node.js y npm

En primer lugar, asegúrate de tener instalados Node.js y npm (Node Package Manager). Node.js es el entorno de ejecución que permite ejecutar código JavaScript fuera del navegador, y npm te ayuda a gestionar los paquetes de los que dependerá tu proyecto.

• Descarga e instala Node.js.
• npm viene incluido con Node.js, por lo que al instalar Node.js se instalará automáticamente npm.

Instalar React y otras dependencias

Utiliza la herramienta «Create React App» para configurar la estructura básica de tu proyecto:

npx create-react-app my-app --template typescript
cd my-app

Este comando crea un nuevo proyecto de React con TypeScript, lo que añade tipado estático a tu código JavaScript, mejorando así su fiabilidad y facilidad de mantenimiento.

Instala paquetes adicionales como Axios para las solicitudes a la API, React Social Icons y Tailwind CSS para el diseño:

npm instalar -D tailwindcss postcss autoprefixer
npm instalar axios react-social-icons

Configurar Tailwind CSS

Generar el archivo de configuración de Tailwind. Esto creará un archivo mínimo tailwind.config.js archivo en el que puedes personalizar la configuración de Tailwind, y un postcss.config.js archivo de configuraciones de PostCSS.

npx tailwindcss init -p

Configura el tailwind.config.js archivo y añade las rutas de acceso a todos tus archivos de plantilla.

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ['./src/**/*.{js,jsx,ts,tsx}'],
	theme: {
		extend: {},
	},
	plugins: [],
}

Configura Tailwind en CSS sustituyendo el contenido de src/index.css con las siguientes directivas para incluir los estilos base, de componentes y de utilidades de Tailwind.

@tailwind base;
@tailwind componentes;
@tailwind utilidades;

Se importa automáticamente, pero siempre es recomendable asegurarse de que src/index.css se importa en tu src/index.tsx Archivo para incluir Tailwind CSS en tu compilación:

import './index.css'

Desarrollo del proyecto

Diseño de la estructura de la aplicación

Contar con una estructura de aplicación bien planificada es fundamental para la eficiencia en el desarrollo y la escalabilidad futura. Para la aplicación de análisis de NFT multicadena que se crea en esta guía, desarrollaremos componentes como ChainSelector y NFTCollectionCard, que serán los dos componentes principales de nuestra aplicación.

El proceso de la solicitud es el que se muestra a continuación.

1. El usuario selecciona la cadena de bloques.
2. Todos los datos se obtienen mediante la función método «Obtener colecciones de Exchange por clasificación» .
3. Los datos de la colección recuperados se pasan a la NFTCollectionCard componente.
4. Los datos se muestran en la aplicación.

Vamos a ponernos manos a la obra con la programación.

Paso 1: Creación de los archivos y carpetas necesarios

Crea una carpeta «components» dentro de la carpeta «src ». A continuación, crea los archivos «ChainSelector.tsx » y «NFTCollectionCard.tsx» en la carpeta «components ». Puedes realizar todas estas acciones de una sola vez ejecutando los siguientes comandos en la terminal, desde el directorio de tu proyecto.

mkdir src/components
echo > src/components/ChainSelector.tsx && echo > src/components/NFTCollectionCard.tsx

Paso 1: Componente ChainSelector

El ChainSelector El componente toma los props onChainSelected función y cadenas de bloques, que es un objeto que contiene claves, nombres y secretos de la cadena de bloques.

Interior ChainSelector, utilizamos Object.entries(blockchains) para recorrer el cadenas de bloques objeto y crear un <option> elemento para cada cadena de bloques. La clave de la cadena de bloques se utiliza como valor de la opción, y el nombre se utiliza como texto que se muestra.

Cuando un usuario selecciona una cadena de bloques diferente, el onChainSelected La función se invoca con el nuevo valor de la cadena. Esto permite que el componente padre reaccione a la selección y actualice el estado de la aplicación o vuelva a recuperar datos en función de la cadena seleccionada.

Abre el archivo src/components/ChainSelector.tsx con tu editor de código y modifícalo de la siguiente manera.

import React from 'react'

type ChainSelectorProps = {
	onChainSelected: (chain: string) => void
	blockchains: { [key: string]: { name: string; secret: string } }
}

// The ChainSelector functional component
const ChainSelector: React.FC<ChainSelectorProps> = ({
	onChainSelected,
	blockchains,
}) => {
	const firstBlockchainKey = Object.keys(blockchains)[0]

	return (
		<div className="inline-block relative w-64">
			{/* Dropdown select element */}
			<select
				defaultValue={firstBlockchainKey}
				onChange={e => onChainSelected(e.target.value)}
				className="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
			>
				{/* Dropdown options */}
				{Object.entries(blockchains).map(([key, { name }]) => (
					<option key={key} value={key}>
						{name}
					</option>
				))}
			</select>
			<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
				<svg
					className="fill-current h-4 w-4"
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 20 20"
				>
					<path d="M5.516 7.548c0.436-0.446 1.045-0.481 1.576 0l3.908 3.747 3.908-3.747c0.531-0.481 1.141-0.446 1.576 0 0.436 0.445 0.408 1.197 0 1.615l-4.695 4.502c-0.531 0.481-1.141 0.481-1.672 0l-4.695-4.502c-0.408-.418-0.436-1.17 0-1.615z" />
				</svg>
			</div>
		</div>
	)
}

export default ChainSelector

Paso 2: Componente NFTCollectionCard

El NFTCollectionCard Este componente está diseñado para mostrar una fila en un diseño de tabla, en la que se presenta información detallada sobre una colección de NFT, incluyendo su número de índice, nombre, imagen y métricas clave como el volumen y las ventas.

El componente también muestra iconos de redes sociales para Discord, Telegram, Twitter e Instagram si se facilitan las URL o los nombres de usuario. Estos iconos abren las páginas correspondientes de las redes sociales en nuevas pestañas, lo que mejora la participación de los usuarios.

Abre el archivo src/components/NFTCollectionCard.tsx con tu editor de código y modifícalo de la siguiente manera.

import React from 'react'
import { SocialIcon } from 'react-social-icons'

// Define the types for the props of the NFTCollectionCard component
type NFTCollectionCardProps = {
	index: number // Index number of the NFT collection in the list
	name: string // Name of the NFT collection
	totalVolume: string // Total volume of sales for the collection
	dailyVolume: string // Daily volume of sales
	totalSales: string // Total number of sales
	dailySales: string // Daily number of sales
	averagePrice: string // Average price of the NFTs
	imageUrl: string // URL of the collection's image
	discordUrl?: string | null // URL for the collection's Discord (optional)
	telegramUrl?: string | null // URL for the collection's Telegram (optional)
	twitterUsername?: string | null // Username for the collection's Twitter (optional)
	instagramUsername?: string | null // Username for the collection's Instagram (optional)
}

const NFTCollectionCard: React.FC<NFTCollectionCardProps> = ({
	index,
	name,
	totalVolume,
	dailyVolume,
	totalSales,
	dailySales,
	averagePrice,
	imageUrl,
	discordUrl,
	telegramUrl,
	twitterUsername,
	instagramUsername,
}) => {
	// Function to format numerical values for better readability
	const formatNumber = (number: string) =>
		Number(number).toLocaleString(undefined, {
			minimumFractionDigits: 2,
			maximumFractionDigits: 2,
		})

	// Style for social media icons
	const iconStyle = { height: '20px', width: '20px' }

	return (
		// Each collection card is a table row
		<tr className="border-b">
			<td className="p-4">{index}</td> {/* Displaying the index number */}
			<td className="flex items-center p-4 space-x-4">
				<img
					className="w-10 h-10 rounded-full"
					src={imageUrl}
					alt={`Collection ${name}`}
				/>
				<span className="font-bold">{name}</span>
			</td>
			{/* Displaying social media icons */}
			<td className="p-4">
				{discordUrl && (
					<SocialIcon
						url={discordUrl}
						style={iconStyle}
						className="mr-2"
						target="_blank"
						rel="noopener noreferrer"
					/>
				)}
				{telegramUrl && (
					<SocialIcon
						url={telegramUrl}
						style={iconStyle}
						className="mr-2"
						target="_blank"
						rel="noopener noreferrer"
					/>
				)}
				{twitterUsername && (
					<SocialIcon
						url={`https://x.com/${twitterUsername}`}
						style={iconStyle}
						className="mr-2"
						target="_blank"
						rel="noopener noreferrer"
					/>
				)}
				{instagramUsername && (
					<SocialIcon
						url={`https://instagram.com/${instagramUsername}`}
						style={iconStyle}
						className="mr-2"
						target="_blank"
						rel="noopener noreferrer"
					/>
				)}
			</td>
			{/* Displaying collection data */}
			<td className="p-4 text-right">{formatNumber(totalVolume)} ETH</td>
			<td className="p-4 text-right">{formatNumber(dailyVolume)} ETH</td>
			<td className="p-4 text-right">{totalSales}</td>
			<td className="p-4 text-right">{dailySales}</td>
			<td className="p-4 text-right">{formatNumber(averagePrice)} ETH</td>
		</tr>
	)
}

export default NFTCollectionCard

Paso 3: Componente principal de React - App.tsx

El Aplicación El componente es el componente principal de la aplicación. Gestiona el estado de la cadena de bloques seleccionada y la lista de colecciones de NFT.

La aplicación obtiene los datos de la colección de NFT a través de una API basada en la cadena de bloques seleccionada. A continuación, estos datos se muestran en formato de tabla utilizando el NFTCollectionCard componente.

El ChainSelector Este componente permite a los usuarios seleccionar una cadena de bloques, lo que actualiza los datos que se muestran en la aplicación. La aplicación muestra cómo utilizar de forma eficaz los hooks de React, como useState y useEffect para la gestión del estado y los efectos secundarios, respectivamente, y cómo gestionar las solicitudes de la API con Axios.

Definición de la cadenas de bloques Objeto

El cadenas de bloques El objeto, que se define en el código que figura a continuación, es una correspondencia entre las claves de las cadenas de bloques y sus nombres de visualización y tokens secretos. Cada clave (como «eth-main» o «arbitrum-main») se corresponde con una cadena de bloques específica.

Sustituye los valores de los marcadores de posición («ETH_SECRET_TOKEN", "ARBITRUM_SECRET_TOKEN", etc.) con claves secretas reales obtenidas de los puntos finales de las respectivas cadenas de bloques. Puedes eliminar de la lista las cadenas de bloques que no tengas intención de utilizar cadenas de bloques objeto.

información

Por regla general, las claves secretas no deben almacenarse directamente en el código del frontend. Se recomienda considerar soluciones de backend para gestionar las claves confidenciales y realizar llamadas a la API de forma segura, especialmente en el caso de las aplicaciones en producción.

// Component and hook imports
import React, { useState, useEffect } from 'react'
import axios from 'axios'
import NFTCollectionCard from './components/NFTCollectionCard'
import ChainSelector from './components/ChainSelector'

// Type definitions for the NFT collection and blockchain information
type NFTCollection = {
	key: string
	name: string
	total_volume: string
	one_day_volume: string
	seven_day_volume: string
	thirty_day_volume: string
	total_sales: string
	one_day_sales: string
	seven_day_sales: string
	thirty_day_sales: string
	total_average_price: string
	one_day_average_price: string
	seven_day_average_price: string
	thirty_day_average_price: string
	image_url: string
	discord_url?: string | null
	telegram_url: string | null
	twitter_username?: string | null
	instagram_username?: string | null
}

type BlockchainInfo = {
	name: string
	secret: string
}

type BlockchainObject = {
	[key: string]: BlockchainInfo
}

const App: React.FC = () => {
	// State for storing NFT collections and the currently selected blockchain
	const [collections, setCollections] = useState<NFTCollection[]>([])
	const [selectedChain, setSelectedChain] = useState('eth-main')

	// Object mapping blockchain keys to their names and secret tokens
	// You can obtain your secret tokens from the URL that NFT API With Cached Metadata gives: https://api.blockspan.com/{YOUR_SECRET_TOKEN}/v1/
	const blockchains: BlockchainObject = {
		'eth-main': {
			name: 'Ethereum',
			secret: 'ETH_SECRET_TOKEN',
		},
		'arbitrum-main': {
			name: 'Arbitrum',
			secret: 'ARBITRUM_SECRET_TOKEN',
		},
		'optimism-main': {
			name: 'Optimism',
			secret: 'OPTIMISM_SECRET_TOKEN',
		},
		'poly-main': {
			name: 'Polygon',
			secret: 'POLYGON_SECRET_TOKEN',
		},
	}

	// Handler for updating the selected blockchain
	const handleChainSelected = (chain: string) => {
		setSelectedChain(chain)
	}

	// Effect for fetching NFT collections when the selected blockchain changes
	useEffect(() => {
		const fetchCollections = async (chain: string) => {
			try {
				const blockchainInfo = blockchains[chain]
				if (!blockchainInfo) {
					console.error('Invalid chain selected or details not found')
					return
				}

				const apiUrl = `https://api.blockspan.com/v1/exchanges/collectionsranking?chain=${chain}&exchange=opensea&ranking=total_volume&page_size=25`
				// Setting the secret key as a header
				const config = {
					headers: {
						'X-API-KEY': blockchainInfo.secret,
					},
				}
				const response = await axios.get(apiUrl, config)
				setCollections(response.data.results)
			} catch (error) {
				console.error('Error fetching NFT collections:', error)
			}
		}

		fetchCollections(selectedChain)
	}, [selectedChain]) // eslint-disable-line react-hooks/exhaustive-deps

	// JSX for rendering the application's UI
	return (
		<div className="App container mx-auto mt-8">
			<div className="mb-8">
				<h1 className="text-4xl font-bold text-center mb-4">
					Most Popular NFT Collections on{' '}
					{blockchains[selectedChain]?.name || 'Unknown Blockchain'}
				</h1>
				<div className="flex justify-center">
					<ChainSelector
						onChainSelected={handleChainSelected}
						blockchains={blockchains}
					/>
				</div>
			</div>

			<table className="min-w-full">
				<thead className="bg-gray-200">
					<tr>
						<th className="p-4">#</th>
						<th className="p-4">Collection</th>
						<th className="p-4">Social</th>
						<th className="p-4 text-right">Total Volume</th>
						<th className="p-4 text-right">24h Volume</th>
						<th className="p-4 text-right">Total Sales</th>
						<th className="p-4 text-right">24h Sales</th>
						<th className="p-4 text-right">Average Price</th>
					</tr>
				</thead>
				<tbody>
					{collections.map((collection, index) => (
						<NFTCollectionCard
							key={collection.key}
							index={index + 1} // Adding 1 since array indices start at 0
							name={collection.name}
							totalVolume={collection.total_volume}
							dailyVolume={collection.one_day_volume}
							totalSales={collection.total_sales}
							dailySales={collection.one_day_sales}
							averagePrice={collection.total_average_price}
							imageUrl={collection.image_url}
							discordUrl={collection.discord_url}
							telegramUrl={collection.telegram_url}
							twitterUsername={collection.twitter_username}
						/>
					))}
				</tbody>
			</table>
		</div>
	)
}

export default App

Ejecuta la aplicación

Ejecuta la aplicación con el siguiente comando.

npm iniciar

La aplicación ya debería estar en funcionamiento en http://localhost:3000

Conclusión

¡Enhorabuena por haber creado tu propia aplicación de análisis de NFT multicadena! A lo largo de esta guía, has aprendido a aprovechar el complemento «NFT API With Cached Metadata» para acceder a datos exhaustivos sobre NFT, integrar la funcionalidad multicadena y presentar esta información en una interfaz fácil de usar. Tu viaje al mundo del análisis de NFT no tiene por qué terminar aquí. Existen numerosas formas de ampliar y mejorar tu aplicación.

Ideas para seguir desarrollando el proyecto

• Implementación de la paginación: Actualmente, la aplicación muestra un número limitado de colecciones. Añadir la paginación permitiría a los usuarios navegar por todas las colecciones disponibles. Implementa botones o un evento de desplazamiento para cargar más colecciones desde la API a medida que el usuario navega por las páginas o llega al final de la lista.

• Ordenación de colecciones: Permite a los usuarios ordenar las colecciones según diferentes parámetros, como el volumen total, el precio medio o las ventas totales. Implementa un menú desplegable o un conjunto de botones que permitan a los usuarios seleccionar el parámetro de ordenación.

• Opciones de filtrado: Implementar filtros que permitan a los usuarios ver las colecciones según determinados criterios, como la rareza, el tamaño de la colección o las puntuaciones de estafa o spam. Esto podría implicar componentes adicionales de la interfaz de usuario, como controles deslizantes, casillas de selección o barras de búsqueda.

• Análisis entre cadenas: Amplía el análisis para comparar datos de diferentes blockchains, lo que permite conocer cómo se comparan las distintas plataformas en cuanto a la actividad relacionada con los NFT.

Suscríbete a nuestro boletín para recibir más artículos y guías sobre Web3 y blockchain. Si tienes alguna pregunta o necesitas ayuda, no dudes en unirte a nuestro servidor de Discord o enviarnos tus comentarios a través del formulario que aparece a continuación. Mantente al día de las últimas novedades siguiéndonos en Twitter (@Quicknode) y en nuestro canal de anuncios de Telegram.

¡Nos encanta recibir comentarios!

Si tienes algún comentario o sugerencia sobre nuevos temas, no dudes en hacérnoslo saber. Nos encantaría saber tu opinión.