Explorador de carteras de Ethereum

The Ethereum Wallet Explorer uses Quicknode's Ethereum endpoint and APIs to query the blockchain for tokens, transactions, and NFTs associated with a given wallet.

Implementar la aplicación

Ver repositorio

Marco de trabajo o biblioteca de front-end:

Next.js

Idioma:

TypeScript

Herramienta de compilación/servidor de desarrollo:

Next.js

Vista previa de la aplicación de ejemplo

Resumen

The Ethereum Wallet Explorer demonstrates how to use your Quicknode Ethereum Node Endpoint and APIs from the Quicknode Marketplace to query the Ethereum blockchain for tokens, transactions, and NFTs associated with a given wallet.

To run this demo to its full capabilities, you will need both the Token and NFT API v2 bundle (free) and Libro de bloques de EVM add-ons from the Quicknode Marketplace installed.

The demo uses 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 el nombre .env.example a .env.local and update with your Quicknode Ethereum Node Endpoint.

ETHEREUM_RPC_URL=https://example.ethereum-mainnet.quiknode.pro/123456/

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

Search for an Ethereum wallet address and press enter. The Dapp will redirect to /wallet/[dirección] and query the Ethereum blockchain for the wallet's token balances, transactions, and NFTs. Results are rendered in respective cards.

Arquitectura

src/
├── app/
│   └── api/
│       └── wallet/
├── componentes/
    ├── explorador/
    └── header/

API - Contains the API routes for the Ethereum RPC calls. These can be accessed from the client via /api/wallet/[método]?walletAddress=[dirección]. Estas solicitudes GET utilizan el Ethers library, which lets us interact with Ethereum via our RPC URL and helps us parse and decode data, the Token and NFT API v2 bundle add-on from the Quicknode Marketplace to get information about NFTs and ERC-20 Tokens via simple RPC request, and the Libro de bloques de EVM add-on to obtain transaction history for any Ethereum address.
componentes - Contiene los componentes de React para la dapp.
- El explorador El componente contiene componentes del lado del cliente que llaman a las rutas de la API y muestran los resultados.
- El encabezado El componente contiene la barra de búsqueda de la dapp.