跳至主要內容
返回範例應用程式

以太坊錢包瀏覽器

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

開始使用

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

    • 該 explorer component contains client-side components that call the API routes and render the results.
    • 該 頁首 component contains the search bar for the dapp.

Deploy on Vercel

Deploy with 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-examples 儲存庫。
若要貢獻，請依照以下步驟操作：
  1. 分叉此儲存庫
  2. 建立功能分支：
    git checkout -b feature/amazing-feature
  3. 將您的變更提交：
    git commit -m "新增超棒的功能"
  4. 推送您的分支：
    git push origin feature/amazing-feature
  5. 開啟一個 Pull Request。
探索更多範例應用程式
Aave V3 清算追蹤器
此應用程式提供對 Aave V3 協議上清算事件的即時監控與深入分析。該應用程式基於無伺服器架構建置，充分展現了 Quicknode Streams 在實現無縫區塊鏈資料串流方面的強大功能。
Aave V3 清算追蹤器
以太坊交易報告應用程式
此應用程式利用 Quicknode 的 EVM Blockbook 擴充功能，針對指定地址擷取並分析以太坊交易，並提供指定日期範圍內的詳細報告。
以太坊交易報告應用程式
EVM Token Factory
This application enables you to create an ERC-20 token on any EVM-compatible blockchain. You can customize the token name, symbol, and initial supply with ease.
EVM Token Factory