19 minutos de lectura

Resumen

En una época en la que las monedas digitales están transformando las transacciones financieras, la capacidad de realizar un seguimiento y analizar las transacciones de Bitcoin se ha convertido en algo esencial. Esta guía completa está dirigida a desarrolladores y aficionados que suelen preguntar cómo consultar el historial de saldos de Bitcoin o averiguar el saldo de una dirección de Bitcoin . Ofrece una guía detallada para crear una aplicación de análisis de carteras en tiempo real de Bitcoin utilizando Blockbook para Bitcoin.

Nuestra aplicación responde a una necesidad habitual en la comunidad de las criptomonedas: la posibilidad no solo de consultar el saldo actual de un monedero Bitcoin , sino también de examinar el historial de transacciones y las variaciones de saldo. Esta herramienta analítica en tiempo real resulta de un valor incalculable para los usuarios y desarrolladores que desean comprender la actividad del monedero a lo largo del tiempo, ya que ofrece información sobre tendencias, patrones de transacción y la trayectoria financiera general de una dirección Bitcoin .

Tanto si quieres mejorar tu proyecto personal, aportar más valor en aplicaciones profesionales o simplemente sientes curiosidad por el complejo funcionamiento de las carteras de Bitcoin , esta guía te servirá de punto de partida. Emprendamos este viaje para descubrir todo el potencial del análisis en tiempo real de las carteras de Bitcoin .

Tus funciones

• Descubre qué es el JSON-RPC de BTC Blockbook y cómo utilizarlo
• Crea un « Bitcoin »endpoint en Quicknode
• Crea una aplicación React para recuperar los datos de las transacciones de una dirección Bitcoin , incluidos los saldos en tiempo real y los históricos.

Lo que necesitarás

• Una cuenta de Quicknode (regístrate gratis aquí)
• Node.js instalado
• Experiencia con JavaScript y React
• Un editor de código (por ejemplo, VScode)

Dependencia	Versión
node.js	últimas noticias

Resumen de las funcionalidades de Blockbook

BTC Blockbook JSON-RPC es una potente herramienta de backend diseñada para indexar transacciones de la cadena de bloques y proporcionar una interfaz RPC completa para interactuar con cadenas UTXO como Bitcoin. Destaca por:

• Alto rendimiento: procesa rápidamente grandes volúmenes de datos para ofrecer información precisa en tiempo real.
• Conjuntos de datos exhaustivos: Ofrece información detallada sobre transacciones, direcciones y saldos.
• Facilidad de uso: Simplifica el proceso de integración gracias a una documentación clara y al apoyo de la comunidad.

Al aprovechar las funciones de Blockbook, los desarrolladores pueden superar los retos habituales relacionados con la recuperación de datos y crear aplicaciones que ofrezcan a los usuarios información actualizada sobre carteras y datos de mercado.

El valor de Blockbook para los desarrolladores

Sin Blockbook, los desarrolladores tendrían que interactuar directamente con la cadena de bloques de Bitcoin para obtener esta información. Este proceso implica configurar y mantener un nodo completo, analizar los datos sin procesar de la cadena de bloques y sincronizarse continuamente con las últimas transacciones de la red. Estas tareas no solo consumen muchos recursos, sino que también requieren un profundo conocimiento de los protocolos y las estructuras de datos de la cadena de bloques.

Blockbook simplifica estos retos al ofrecer una API fácil de usar que abstrae las complejidades de las interacciones directas con la cadena de bloques. Permite a los desarrolladores consultar saldos de carteras, historiales de transacciones y tipos de cambio sin la carga que supone gestionar directamente los datos de la cadena de bloques. Este enfoque optimizado permite a los desarrolladores centrarse más en la creación de aplicaciones con numerosas funcionalidades y menos en las complejidades de la gestión de datos de la cadena de bloques, lo que acelera significativamente los ciclos de desarrollo y reduce la carga técnica.

A fecha de redacción de este artículo, Blockbook incluye 10 potentes métodos RPC. En esta guía utilizaremos tres de ellos:

• bb_getAddress: Muestra los saldos y las transacciones de una dirección.
• bb_getTickers: Devuelve el tipo de cambio de la divisa especificada para la fecha indicada. Si no hay datos disponibles para esa fecha y hora concretas, se devolverá el tipo de cambio más cercano.
• bb_getBalanceHistory Devuelve el historial de saldos de la dirección.

Configuración de un Bitcoin Endpoint

Configurar tu Bitcoin endpoint con el RPC de Blockbook 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 endpoint ». Selecciona Bitcoin mainnety, a continuación, haz clic en «Siguiente». A continuación, se te pedirá que configures el complemento. Activa «Blockbook RPC». Después, solo tienes que hacer clic en «Crear» Endpoint.

Si ya tienes un Bitcoin endpoint sin el complemento, ve a la página de complementos de tu Bitcoin endpoint , selecciona «Blockbook RPC» y actívalo.

Una vez que tu endpoint esté listo, copia el enlace del proveedor HTTP y tenlo a mano, ya que lo necesitarás en la siguiente sección.

Creación de la aplicación

Para empezar a desarrollar nuestra aplicación de análisis de carteras « Bitcoin », primero tendrás que configurar tu entorno de desarrollo. Si aún no lo has hecho, instala Node.js y npm en tu ordenador. Node.js ejecutará tu servidor de desarrollo y npm gestionará las dependencias de tu proyecto.

Configuración del proyecto

Paso 1: Configurar la aplicación de React

Utiliza el npx create-react-app Para crear la estructura básica de un nuevo proyecto de React:

npx create-react-app bitcoin-analytics
cd bitcoin-analytics

Paso 2: Instalar las dependencias necesarias

Instala Axios para realizar solicitudes HTTP, Chart.js con el envoltorio de React para los gráficos, Tailwind CSS para el diseño y DatePicker para el calendario que permite seleccionar fechas en los saldos históricos.

npm install axios react-chartjs-2 chart.js tailwindcss chartjs-adapter-moment
npm install react-datepicker --save

Paso 3: Configurar Tailwind CSS

Ejecuta el siguiente comando para instalar y configurar Tailwind CSS, que nos ayudará a dar estilo a nuestra aplicación:

npm install -D tailwindcss
npx tailwindcss init

Configura los archivos de plantilla en tu archivo tailwind.config.js.

/** @type {import('tailwindcss').Configuración} */
módulo.exporta = {
	content: ['./src/**/*.{js,jsx,ts,tsx}'],
	theme: {
		extend: {},
	},
	complementos: [],
}

Añade las directivas @tailwind al principio de tu archivo .src/index.css.

@tailwind base;
@componentes de Tailwind;
@tailwind utilities;

Desarrollo del proyecto

Diseño de la estructura de la aplicación

Antes de empezar a programar, siempre es recomendable planificar la estructura de la aplicación. Para la aplicación de análisis de carteras de Bitcoin que se va a desarrollar en esta guía, necesitarás componentes como Introducción de la dirección, Gráfico de saldo, y WalletStats.

Como se puede ver en la imagen siguiente, utilizarás bb_getAddress, bb_getTickers, y bb_getBalanceHistory métodos de esta aplicación.

La posible acción flow de la aplicación es la siguiente:

• El usuario introduce una dirección Bitcoin y pulsa la tecla Intro/Retorno del teclado.
• Los datos sobre saldos y transacciones de la dirección se obtienen mediante el método bb_getAddress. El precio en tiempo real de Bitcoin frente a diferentes monedas fiduciarias se obtiene mediante el método bb_getTickers.
• Los datos de direcciones y los datos de precios en tiempo real de Bitcoin se transfieren a la WalletStats componente.
• El usuario selecciona la fecha de inicio, la fecha de finalización y el intervalo de tiempo para obtener la evolución histórica del saldo en BTC de la dirección.
• Los datos históricos del saldo de BTC se obtienen mediante el método bb_getBalanceHistory.
• Los datos se pasan a la Gráfico de saldo componente.

Bueno, empecemos a programar.

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

Crea las carpetas «components» y «api» dentro de la carpeta «src ». A continuación, crea el archivo «fetchData.js» en la carpeta «api», y crea los archivos «AddressInput.js», «BalanceChart.js» y «WalletStats.js» en la carpeta «components ». Puedes hacerlo todo de una sola vez ejecutando los siguientes comandos en la terminal, desde el directorio de tu proyecto.

mkdir src/api && mkdir src/components
echo > src/api/fetchData.js && echo > src/components/AddressInput.js && echo > src/components/BalanceChart.js && echo > src/components/WalletStats.js

Paso 1: Componente de introducción de direcciones de Bitcoin

El Introducción de la dirección Este componente incluye un formulario para introducir una dirección Bitcoin . Al enviar el formulario, se activa el onAddressSubmit función pasada como prop con el estado actual de la dirección.

Este componente es un formulario independiente diseñado para que los usuarios introduzcan una dirección de Bitcoin , que luego se puede utilizar para consultar el saldo y los datos de las transacciones.

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

// src/components/AddressInput.js

import React, { useState } de 'react'

// Component for inputting a Bitcoin address, which calls the onAddressSubmit prop on form submission.
const AddressInput = ({ onAddressSubmit }) => {
	// State hook to store and set the Bitcoin address
	const [dirección, setAddress] = useState('')

	// Function to handle form submission
	const handleSubmit = e => {
		e.preventDefault()
		onAddressSubmit(dirección)
	}

	volver (
		// Form container with styling for center alignment and padding
		<div className="flex flex-col items-center justify-center p-4">
			<form onSubmit={handleSubmit} className="w-full max-w-md">
				<div className="mb-2">
					<label
						htmlPara=«dirección»
						className="block text-gray-700 text-lg font-bold mb-2"
					>
						Saldo y Gráfico de Bitcoin direcciones
					</label>
					<div className="mt-1">
						<input
							tipo="texto"
							id=«dirección»
							valor={dirección}
							onChange={e => setAddress(e.destino.valor)}
							className="sombra apariencia-ninguna borde redondeado ancho-completo py-3 px-3 texto-gris-700 interlineado-apretado foco:sin-contorno foco:sombra-contorno"
							marcador de posición="Introduce una dirección de Bitcoin "
						/>
					</div>
				</div>
				<div className="flex justify-center">
					<button
						tipo="submit"
						className="inline-flex, justify-center, py-2, px-4, border, border-transparent, shadow-sm, text-sm, font-medium, rounded-md, text-white, bg-orange-400, hover:bg-orange-600, focus:outline-none, focus:ring-2, focus:ring-offset-2, focus:ring-primary"
					>
						Enviar
					</button>
				</div>
			</form>
		</div>
	)
}

exportar por defecto Entrada de dirección

Paso 2: Componente WalletStats

El WalletStats Este componente muestra diversas estadísticas de la cartera Bitcoin , entre las que se incluyen el saldo con su equivalente en la moneda fiduciaria seleccionada, el importe total de BTC recibido y enviado, el importe total de las transacciones y el saldo sin confirmar. Además, permite activar o desactivar la visualización de los últimos 10 ID de transacción.

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

// src/components/WalletStats.js

import React, { useState } de 'react'

// Converts satoshi unit to Bitcoin, fixing to 8 decimal places
const satoshiToBitcoin = satoshi => (satoshi / 100 000 000).toFixed(8)

// WalletStats component takes walletData and fiatRate as props
const WalletStats = ({ walletData, fiatRate }) => {
	// State for toggling the display of transaction IDs
	const [mostrarTxids, setShowTxids] = useState(false)
	// State for selecting the fiat currency for displaying Bitcoin's equivalent value
	const [fiatCurrency, setFiatCurrency] = useState('USD')

	si (!walletData) {
		return <p>No data available.</p>
	}

	// Calculate the fiat equivalent of the wallet's balance using the selected fiat currency rate
	const fiatBalance = (
		satoshiToBitcoin(walletData.saldo) * tipo de cambio de moneda fiduciaria[monedaFiat]
	).toLocaleString(indefinido, {
		minimumFractionDigits: 2,
		máximo de dígitos fraccionarios: 2,
	})

	// The return statement contains the JSX for rendering the wallet information
	volver (
		<div className="p-4 rounded-md shadow-md bg-white my-4">
			<h2 className="text-xl font-bold mb-4">Wallet Information</h2>
			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
				<div>
					<strong>Address:</strong> {walletData.address}
				</div>
				<div>
					<strong>Balance:</strong> {satoshiToBitcoin(walletData.balance)} BTC (
					{moneda fiduciaria} {saldoFiat})
				</div>
				<div>
					<strong>Total Received:</strong>{' '}
					{satoshiToBitcoin(walletData.totalRecibido)} BTC
				</div>
				<div>
					<strong>Total Sent:</strong> {satoshiToBitcoin(walletData.totalSent)}{' '}
					BTC
				</div>
				<div>
					<strong>Total Transactions:</strong> {walletData.txs}
				</div>
				<div>
					<strong>Unconfirmed Balance:</strong>{' '}
					{satoshiToBitcoin(walletData.saldoNoConfirmado)} BTC
				</div>
				<div>
					<strong>Unconfirmed Transactions:</strong> {walletData.unconfirmedTxs}
				</div>
				<div className="flex flex-col md:flex-row items-center mb-4">
					<label
						htmlPara=«moneda fiduciaria»
						className="block text-gray-700 font-bold mr-2"
					>
						Seleccionar Moneda fiduciaria Moneda:
					</label>
					<select
						id=«moneda fiduciaria»
						valor={monedaFiat}
						onChange={e => setFiatCurrency(e.destino.valor)}
						className="block shadow border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
					>
						<option value="USD">USD</option>
						<option value="EUR">EUR</option>
						<option value="GBP">GBP</option>
					</select>
				</div>
				{walletData.txids && walletData.txids.longitud > 0 && (
					<div>
						<button
							onClick={() => setShowTxids(!showTxids)}
							className="text-blue-600 hover:underline"
						>
							{showTxids ? 'Hide' : 'Show'} Latest 10 Transactions
						</button>
						{showTxids && (
							<ul className="mt-4">
								{walletData.txids.slice(0, 10).mapa((txid, índice) => (
									<li key={index} className="truncate">
										{txid}
									</li>
								))}
							</ul>
						)}
					</div>
				)}
			</div>
		</div>
	)
}

exportar por defecto WalletStats

Paso 3: Componente BalanceChart

El Gráfico de saldo Este componente muestra un gráfico de barras para visualizar la evolución a lo largo del tiempo de la variación del saldo neto de « Bitcoin », basándose en un conjunto de datos históricos.

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

// src/components/BalanceChart.js

import React de 'react'
importar { Bar } desde 'react-chartjs-2'
// Chart.js and its components are imported to create the chart
import {
	Gráfico como ChartJS,
	Categoría: Escala,
	Escala lineal,
	BarElement,
	PointElement,
	Título,
	Información sobre el elemento,
	Leyenda,
	TimeSeriesScale,
} de «chart.js»
import 'chartjs-adapter-moment' // Necesario para la escala de tiempo

// Registration of Chart.js components necessary to create a bar chart with a time series
ChartJS.registrar(
	Categoría: Escala,
	Escala lineal,
	BarElement,
	PointElement,
	Título,
	Información sobre el elemento,
	Leyenda,
	Escala de series temporales
)

const BalanceChart = ({ datosHistóricos }) => {
	// Data processing to convert Satoshi values into Bitcoin and create data points
	const puntos de datos = historial.map(entrada => ({
		t: nuevo Fecha(entrada.hora * 1000),
		y:
			(parseInt(entrada.recibido, 10) + // Analiza la cadena para obtener los satoshis recibidos y conviértelos a Bitcoin
				parseInt(entrada.sentToSelf, 10) - // Analizar y añadir los satoshis enviados a uno mismo, ya que no modifican el saldo
				parseInt(entrada.sent, 10)) / // Analizar y restar los satoshis enviados desde el monedero
			100000000, // Factor de conversión de satoshi a Bitcoin 
	}))

	// Sort the data points by timestamp
	puntos de datos.ordenar((a, b) => a.t - b.t)

	// Creating labels and data arrays for the chart dataset
	const etiquetas = puntos de datos.map(dp => dp.t)
	const datos = puntosDeDatos.map(dp => dp.y)

	// Configuring the data and appearance of the bar chart
	const chartData = {
		etiquetas: etiquetas,
		conjuntos de datos: [
			{
				etiqueta: «Evolución del saldo neto de BTC a lo largo del tiempo»,
				datos: datos,
				rellenar: false,
				color de fondo: 'rgb(33, 150, 243)',
				color del borde: 'rgba(33, 150, 243, 0,2)',
			},
		],
	}

	const opcionesDelGráfico = {
		scales: {
			x: {
				tipo: 'hora',
				time: {
					unidad: «día»,
				},
				title: {
					visualización: true,
					texto: «Fecha»,
				},
			},
			y: {
				beginAtZero: false,
				title: {
					visualización: true,
					texto: «Variación del saldo neto de BTC»,
				},
			},
		},
		interaction: {
			intersección: false,
			mode: «índice»,
		},
		adaptativo: true,
		maintainAspectRatio: true,
	}

	return <Bar data={chartData} options={chartOptions} />
}

exportar por defecto BalanceChart

Paso 4: Archivo «fetchData»

El fetchData Este archivo ofrece un conjunto de funciones para obtener datos de la API RPC de Bitcoin mediante Axios con distintos fines: obtener datos de direcciones, consultar los tipos de cambio de las monedas fiduciarias en Bitcoin y consultar el historial de saldos.

Abre el archivo src/api/fetchData.js con tu editor de código y modifícalo de la siguiente manera. No olvides sustituir el marcador de posición YOUR_QUICKNODE_ENDPOINT por tu Quicknode Bitcoin endpoint .

// src/api/fetchData.js

import axios de 'axios'

// Base URL for the Quicknode endpoint, should be replaced with the actual endpoint URL.
const BASE_URL = 'TU_PUNTO_FINAL_DE_QUICKNODE'

// Function to get data for a specific Bitcoin address
exportar const obtenerDatosDeDirección = async dirección => {
	const postData = {
		método: 'bb_getaddress', // El método RPC para obtener datos de direcciones
		parámetros: [dirección], // Los parámetros del método; en este caso, la dirección Bitcoin 
		id: 1,
		jsonrpc: '2.0',
	}

	prueba {
		const respuesta = await axios.post(BASE_URL, postData, {
			headers: {
				«Content-Type»: 'application/json',
			},
			maxBodyLength: Infinito,
		})
		volver respuesta.datos.resultado
	} catch (error) {
		consola.error(error)
	}
}

// Function to get Bitcoin fiat rates for a specific timestamp
exportar const getBitcoinFiatRates = async timestampUnix => {
	const postData = {
		método: 'bb_gettickers', // El método RPC para obtener los tipos de cambio de las monedas fiduciarias de Bitcoin 
		params: [{ timestamp: timestampUnix }], // The parameters with the timestamp
		id: 1,
		jsonrpc: '2.0',
	}

	prueba {
		const respuesta = await axios.post(BASE_URL, postData, {
			headers: {
				«Content-Type»: 'application/json',
			},
			maxBodyLength: Infinito,
		})
		volver respuesta.datos.resultado.tarifas
	} catch (error) {
		consola.error(error)
	}
}

// Function to get the balance history for a Bitcoin address
exportar const getBalanceHistory = async (dirección, de, a, agrupar por) => {
	const postData = {
		método: 'bb_getbalancehistory', // El método RPC para obtener el historial de saldos
		parámetros: [
			dirección, // La dirección Bitcoin 
			{
				de: de.toString(), // Inicio del intervalo de tiempo como cadena
				a: a.toString(), // Fin del intervalo de tiempo como cadena
				moneda fiduciaria: «usd», // La moneda fiduciaria en la que se obtendrá el saldo
				groupBy: groupBy, // El intervalo de agrupación para el historial de saldos
			},
		],
		id: 1,
		jsonrpc: '2.0',
	}

	prueba {
		const respuesta = await axios.post(BASE_URL, postData, {
			headers: {
				«Content-Type»: 'application/json',
			},
			maxBodyLength: Infinito,
		})
		volver respuesta.datos.resultado
	} catch (error) {
		consola.error(error)
	}
}

Paso 5: Componente principal de React: App.js

El archivo App.js es el componente principal de React (App) de una aplicación. Importa los subcomponentes y las funciones de la API necesarios, gestiona el estado de los datos de direcciones, el historial de saldos, la selección de fechas, el intervalo y los tipos de cambio de las monedas fiduciarias, y proporciona un diseño estructurado con un encabezado y un área de contenido principal para las interacciones del usuario.

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

// src/App.js

import React, { useState, useEffect } de 'react'
// Importing sub-components and styles

import AddressInput de './components/AddressInput'
importar WalletStats desde './components/WalletStats'
importar BalanceChart desde './components/BalanceChart'
import DatePicker de 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
// API functions to fetch various data
import {
	getAddressData,
	getBalanceHistory,
	getBitcoinFiatRates,
} de './api/fetchData'

const App = () => {
	// State hooks for various pieces of data and UI control
	const [datosDirección, setAddressData] = useState(null)
	const [historialDeSaldo, setBalanceHistory] = useState(null)
	const [fechaInicio, setStartDate] = useState(nuevo Date()))
	const [fechaFin, setEndDate] = useState(new Date()))
	// Default interval for balance history in seconds
	const [intervalo, setInterval] = useState('3600') // Por defecto, 3600 segundos (1 hora)
	// Default fiat rates set to 0, will be updated via API call
	const [fiatRate, setFiatRate] = useState({ USD: 0, EUR: 0, GBP: 0 })

	// useEffect hook to fetch fiat rates on component mount
	useEffect(() => {
		fetchBitcoinFiatRates()
	}, [])

	// Function to handle address form submission
	const handleAddressSubmit = async dirección => {
		const datos = await getAddressData(dirección)
		setAddressData(datos)
	}

	// Function to fetch balance history based on selected dates and interval
	const obtenerHistorialSaldo = async () => {
		// Convert dates to timestamps
		const startTimestamp = Math.floor(fechaInicio.getTime() / 1000)
		const marca de tiempo final = Math.floor(fechaFin.getTime() / 1000)

		const historial = await getBalanceHistory(
			datos de dirección.dirección,
			startTimestamp,
			marca de tiempo de fin,
			intervalo
		)
		setBalanceHistory(historial)
	}

	// Function to fetch current Bitcoin fiat rates
	const obtenerTiposDeCambioBitcoinFiat = async () => {
		// Assuming the API response structure matches what you provided
		const timestampNow = Math.floor(Fecha.ahora() / 1000)

		const fiatRates = await getBitcoinFiatRates(timestampNow)
		setFiatRate({ USD: fiatRates.usd, EUR: fiatRates.eur, GBP: fiatRates.gbp })
	}

	volver (
		<div className="App bg-background min-h-screen flex flex-col items-center">
			<header className="bg-white shadow w-full">
				<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
					<h1 className="text-3xl font-bold text-gray-900">Bitcoin Explorer</h1>
				</div>
			</header>
			<main className="flex-grow">
				<AddressInput onAddressSubmit={handleAddressSubmit} />
				{datosDeDirección && (
					<div>
						<WalletStats walletData={addressData} fiatRate={fiatRate} />
						<div className="container mx-auto p-6">
							<h2 className="text-2xl font-bold text-center my-6">
								Bitcoin Saldo Gráfico
							</h2>

							<div className="flex flex-wrap items-center justify-center gap-4 mb-6 shadow-lg p-6 rounded-lg bg-white">
								<div className="flex flex-col mb-3">
									<label htmlFor="start-date" className="font-semibold mb-2">
										Inicio Fecha
									</label>
									<DatePicker
										id=«fecha-de-inicio»
										seleccionado={fechaInicio}
										onChange={fecha => setStartDate(fecha)}
										className="w-full max-w-xs h-12 rounded-lg text-lg shadow-inner"
									/>
								</div>
								<div className="flex flex-col mb-3">
									<label htmlFor="end-date" className="font-semibold mb-2">
										Final Fecha
									</label>
									<DatePicker
										id=«fecha de finalización»
										seleccionado={fechaDeFin}
										onChange={fecha => setEndDate(fecha)}
										className="w-full max-w-xs h-12 rounded-lg text-lg shadow-inner border"
									/>
								</div>
								<div className="flex flex-col mb-3">
									<label htmlFor="time-interval" className="font-semibold mb-2">
										Tiempo Intervalo de tiempo
									</label>
									<select
										id=«intervalo de tiempo»
										valor={intervalo}
										onChange={e => setInterval(e.target.valor)}
										className="w-full max-w-xs h-12 rounded-lg text-lg shadow-inner border"
									>
										<option value="3600">1 Hour</option>
										<option value="14400">4 Hours</option>
										<option value="86400">Daily</option>
										<option value="604800">Weekly</option>
									</select>
								</div>
							</div>
							<div className="flex justify-center">
								<button
									onClick={obtenerHistorialSaldo}
									className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-orange-400 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
								>
									Cargar Historial
								</button>
							</div>
						</div>
					</div>
				)}

				{/* Mostrar los datos de la dirección y el gráfico con un estilo definido */}
				{/* ... */}
				{balanceHistory && <BalanceChart historyData={balanceHistory} />}
			</main>
		</div>
	)
}

exportar por defecto Aplicación

Paso 6: Ejecuta la aplicación

Ahora puedes ejecutar la aplicación mediante el siguiente comando.

npm start

La aplicación ya debería estar en funcionamiento en http://localhost:3000. Ahora es el momento de interactuar con ella.

Puedes utilizar cualquier dirección Bitcoin que desees o la dirección Bitcoin utilizada en el ejemplo (bc1qwfgdjyy95aay2686fn74h6a4nu9eev6np7q4fn204dkj3274frlqrskvx0) para probar la aplicación.

Conclusión

En conclusión, el proceso de desarrollo de una aplicación de análisis de carteras de Bitcoin en tiempo real te ha proporcionado los conocimientos y las herramientas necesarios para crear una potente aplicación que ofrece información valiosa sobre las transacciones de las carteras de Bitcoin y la dinámica del mercado. Sin embargo, el potencial de tu aplicación no termina aquí. Ahora que ya cuentas con la estructura básica, estás en una posición ideal para ampliar aún más sus capacidades.

Plantéate aprovechar otros métodos disponibles en Blockbook para introducir funciones adicionales, como el seguimiento de varias direcciones, la agregación de datos de carteras, la compatibilidad con más monedas fiduciarias o incluso la creación de un explorador de blockchain completo. La flexibilidad de Blockbook permite integrar consultas más complejas y ofrece la posibilidad de presentar datos analíticos más detallados.

Suscríbete a nuestro boletín para recibir más artículos y guías sobre Web3 y blockchain. Si tienes alguna duda o necesitas ayuda, no dudes en unirte a nuestro servidor de Discord o compartir tus comentarios en la sección de comentarios que encontrarás al final de esta página. Mantente al día de las últimas novedades siguiéndonos en Twitter (@Quicknode) y en nuestro canal de anuncios de Telegram.