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.

Author

Ferhat Kochan

앱 배포

리포지토리 보기

프론트엔드 프레임워크/라이브러리:

Next.js

언어:

TypeScript

빌드 도구/개발 서버:

Next.js

개요

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 Blockbook API.

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

시작하기

Install Dependencies

First, install the dependencies:

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

Set Environment Variables

Rename .env.example ~에 .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.

건축

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 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 Blockbook API to retrieve transaction history for any Ethereum address.
components - Contains the React components for the dapp.
- 그 explorer component contains client-side components that call the API routes and render the results.
- 그 헤더 component contains the search bar for the dapp.