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.

部署应用

查看代码库

前端框架/库：

Next.js

语言：

TypeScript

构建工具/开发服务器：

Next.js

概述

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 该项目通过以下方式启动： create-next-app.

入门指南

安装依赖项

首先，安装依赖项：

npm 安装
# 或
yarn
# 或
pnpm 安装
# 或
bun install

设置环境变量

重命名 .env.example 到 .env.local and update with your Quicknode Ethereum Node Endpoint.

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

首先，运行开发服务器：

npm 运行 dev
# 或
yarn dev
# 或
pnpm dev
# 或
bun dev

请使用浏览器打开http://localhost:3000以查看结果。

使用 Dapp

Search for an Ethereum wallet address and press enter. The Dapp will redirect to /wallet/[地址] 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/
    ├── 浏览器/
    └── header/

api - Contains the API routes for the Ethereum RPC calls. These can be accessed from the client via /api/wallet/[method]?walletAddress=[address]. 这些 GET 请求使用了 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.
组件 - 包含该去中心化应用（dapp）的 React 组件。
- 该 资源管理器 该组件包含客户端组件，这些组件会调用 API 路由并渲染结果。
- 该 页眉 该组件包含该去中心化应用（dapp）的搜索栏。