Explorateur 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.

Auteur

Ferhat Kochan

Déployer l'application

Consulter le dépôt

Framework/bibliothèque front-end :

Next.js

Langue :

TypeScript

Outil de compilation/serveur de développement :

Next.js

Présentation générale

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 Token and NFT API v2 bundle endpoint add-on and access to the API Blockbook.

The demo uses Next.js 14 projet lancé grâce à create-next-app.

Pour commencer

Installer les dépendances

Commencez par installer les dépendances :

npm installer
# ou
yarn
# ou
pnpm installer
# ou
bun install

Définir les variables d'environnement

Renommer .env.example à .env.local and update with your Quicknode Ethereum Node Endpoint.

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

Commencez par lancer le serveur de développement :

npm exécuter dev
# ou
yarn dev
# ou
pnpm dev
# ou
bun dev

Ouvrez http://localhost:3000 dans votre navigateur pour voir le résultat.

Utilisation de la Dapp

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

Architecture

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/[méthode]?walletAddress=[adresse]. These GET requests use the Ethers library to interact with Ethereum and parse data, the Token and NFT API v2 bundle endpoint add-on to retrieve NFT and ERC-20 token information, and the API Blockbook to retrieve transaction history for any Ethereum address.
composants - Contient les composants React destinés à la dapp.
- Le explorateur Le composant contient des éléments côté client qui appellent les routes de l'API et affichent les résultats.
- Le en-tête Ce composant contient la barre de recherche de la dapp.