メインコンテンツへスキップ
サンプルアプリに戻る

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.

アイコンの展開
アプリをデプロイする
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 以下のツールを使って立ち上げたプロジェクト create-next-app.

はじめに

依存関係をインストールする​

まず、依存関係をインストールします：

npm install
# または
yarn
# または
pnpm install
# または
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 run 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/
    ├── 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]. これらの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用の検索バーが含まれています。

Vercelへのデプロイ

Vercel でのデプロイ

プレビュー

プレビュー

プレビュー

Next.js ドキュメント

Next.js についてさらに詳しく知りたい場合は、以下のリソースをご覧ください：

Next.jsのGitHubリポジトリをご覧ください。皆様からのフィードバックや貢献を歓迎します！


投稿とフィードバック
皆様からのご意見をお待ちしております。また、このサンプルアプリへのご協力も大歓迎です！
問題の報告やフィードバックをお寄せいただくには、GitHubのイシューを qn-ガイド-例 リポジトリ。
投稿するには、以下の手順に従ってください：
  1. リポジトリをフォークする
  2. フィーチャーブランチを作成する：
    git checkout -b feature/amazing-feature
  3. 変更内容をコミットします：
    git commit -m "素晴らしい機能を追加"
  4. ブランチをプッシュしてください：
    git push origin feature/amazing-feature
  5. プルリクエストを作成してください。
その他のサンプルアプリを見る
Aave V3 Liquidation Tracker
This application provides real-time monitoring and in-depth analysis of liquidation events on the Aave V3 protocol. Built on a serverless architecture, this app showcases the power of Quicknode Streams for seamless blockchain data streaming.
Aave V3 Liquidation Tracker
Ethereum Transaction Report Application
This application fetches and analyzes Ethereum transactions for a given address using Quicknode's EVM Blockbook add-on, providing detailed reports within a specified date range.
Ethereum Transaction Report Application
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