Explorador de Ethereum
El explorador Ethereum utilizaendpoint las API Ethereum Quicknode para consultar la cadena de bloques en busca de tokens, transacciones y NFT asociados a una cartera determinada.
Resumen
The Ethereum Wallet Explorer demonstrates how to use your Quicknode Ethereum endpoint, the Blockbook product, and an endpoint add-on to query tokens, transactions, and NFTs associated with a given wallet.
To run this demo with full functionality, you need the free Paquete de la API v2 para tokens y NFT endpoint add-on and access to the API de Blockbook.
La demostración utiliza Next.js 14 proyecto puesto en marcha con create-next-app.
Primeros pasos
Instalar las dependencias
En primer lugar, instala las dependencias:
npm instalar
# o
yarn
# o
pnpm instalar
# o
bun install
Configurar variables de entorno
Cambiar nombre .env.example a .env.local y actualízalo con Endpoint de tuEthereum de Quicknode .
ETHEREETHEREUM_ETHEREUMURLmainnet
En primer lugar, ejecuta el servidor de desarrollo:
npm ejecutar dev
# o
yarn dev
# o
pnpm dev
# o
bun dev
Abre http://localhost:3000 en tu navegador para ver el resultado.
Cómo utilizar la Dapp
Busca una dirección Ethereum y pulsa Intro. La Dapp te redirigirá a /wallet/[dirección] y consultar la Ethereum para obtener los saldos de tokens, las transacciones y los NFT de la cartera. Los resultados se muestran en las fichas correspondientes.
Arquitectura
src/
├── app/
│ └── api/
│ └── wallet/
├── componentes/
├── explorador/
└── header/
-
API- Contiene las rutas de la API para las llamadas Ethereum . Se puede acceder a ellas desde el cliente a través de/api/wallet/[método]?walletAddress=[dirección]. These GET requests use theÉtereslibrary to interact with Ethereum and parse data, thePaquete de la API v2 para tokens y NFTendpoint add-on to retrieve NFT and ERC-20 token information, and theAPI de Blockbookto retrieve transaction history for any Ethereum address. -
componentes- Contiene los componentes de React para la dapp.- El
exploradorEl componente contiene elementos del lado del cliente que llaman a las rutas de la API y muestran los resultados. - El
encabezadoEl componente contiene la barra de búsqueda de la dapp.
- El
Implementar en Vercel
Vista previa
Documentación de Next.js
Para obtener más información sobre Next.js, echa un vistazo a los siguientes recursos:
- Documentación de Next.js: descubre las funciones y la API de Next.js.
- Aprende Next.js: un tutorial interactivo sobre Next.js.
Puedes echar un vistazo al repositorio de Next.js en GitHub: ¡tus comentarios y aportaciones son bienvenidos!
- Hacer un fork del repositorio
- Crear una rama de características:git checkout -b feature/amazing-feature
- Guarda los cambios:git commit -m "Añadir una función increíble"
- Envía tu rama:git push origin feature/amazing-feature
- Abre una solicitud de incorporación de cambios.
