Ethereum Wallet Explorer

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 a aplicação

Ver repositório

Framework/Biblioteca de front-end:

Next.js

Idioma:

TypeScript

Ferramenta de compilação/Servidor de desenvolvimento:

Next.js

Pré-visualização da aplicação de exemplo

Visão geral

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 EVM Blockbook add-ons from the Quicknode Marketplace installed.

The demo uses Next.js 14 project bootstrapped with create-next-app.

Introdução

Install Dependencies

First, install the dependencies:

npm install
# or
yarn
# or
pnpm install
# or
bun install

Set Environment Variables

Rename .env.example para .env.local and update with your Quicknode Ethereum Node Endpoint.

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

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Using the Dapp

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

Arquitetura

src/
├── app/
│   └── api/
│       └── wallet/
├── components/
    ├── explorer/
    └── header/

api - Contains the API routes for the Ethereum RPC calls. These can be accessed from the client via /api/wallet/[method]?walletAddress=[address]. These GET requests utilize the 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 EVM Blockbook add-on to obtain transaction history for any Ethereum address.
components - Contains the React components for the dapp.
- O explorer component contains client-side components that call the API routes and render the results.
- O cabeçalho component contains the search bar for the dapp.

Deploy on Vercel

Pré-visualização

Next.js Documentation

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Contribuições e comentários

Adoraríamos receber os vossos comentários e agradecemos quaisquer contribuições para esta aplicação de exemplo!

Para comunicar problemas ou partilhar comentários, abra uma issue no GitHub na qn-guia-exemplos repositório.

Para contribuir, siga estes passos:

Fazer um fork do repositório
Criar um ramo de funcionalidades:
git checkout -b feature/amazing-feature
Envie as suas alterações:
git commit -m "Adicionar uma funcionalidade fantástica"
Envie o seu branch:
git push origin feature/amazing-feature
Abrir um Pull Request.

Explore mais aplicações de exemplo

Aave V3 Liquidation Tracker

This application provides real-time monitoring and in-depth analysis of liquidation events on the Aave V3 protocol. Built on a serverless architecture, this app showcases the power of Quicknode Streams for seamless blockchain data streaming.

Ethereum Transaction Report Application

This application fetches and analyzes Ethereum transactions for a given address using Quicknode's EVM Blockbook add-on, providing detailed reports within a specified date range.