跳转至主要内容
返回示例应用

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.

部署图标
部署应用
GitHub 图标
查看代码库
前端框架/库：
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​

重命名 .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.

部署到 Vercel

使用 Vercel 进行部署

预览

预览

预览

Next.js Documentation

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

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


投稿与反馈
我们非常期待收到您的反馈，并欢迎大家为本示例应用贡献力量！
如需报告问题或提供反馈，请在 qn-guide-示例 存储库。
如需贡献，请按照以下步骤操作：
  1. 分叉该仓库
  2. 创建一个功能分支：
    git checkout -b feature/amazing-feature
  3. 提交您的更改：
    git commit -m "添加超棒的功能"
  4. 推送您的分支：
    git push origin feature/amazing-feature
  5. 提交一个拉取请求。
探索更多示例应用
Aave V3 清算追踪器
该应用程序可对 Aave V3 协议上的清算事件进行实时监控和深入分析。该应用基于无服务器架构构建，充分展示了Quicknode Streams 无缝区块链数据流Streams 强大功能。
Aave V3 清算追踪器
Ethereum 报告应用程序
This application fetches and analyzes Ethereum transactions for a given address using Quicknode's Blockbook API, providing detailed reports within a specified date range.
Ethereum 报告应用程序
EVM 代币工厂
通过此应用程序，您可以在任何兼容 EVM 的区块链上创建 ERC-20 代币。您可以轻松自定义代币名称、符号和初始供应量。
EVM 代币工厂