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

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 以下のツールを使用して立ち上げられたプロジェクト create-next-app.

はじめに

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

First, install the dependencies:

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/[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.
    • その header component contains the search bar for the 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 清算トラッカー
このアプリケーションは、Aave V3プロトコルにおける清算イベントのリアルタイム監視と詳細な分析機能を提供します。サーバーレスアーキテクチャに基づいて構築されたこのアプリは、シームレスなブロックチェーンデータストリーミングStreams の威力を実証しています。
Aave V3 清算トラッカー
Ethereum レポートアプリケーション
このアプリケーションは、Quicknode のBlockbook APIを使用して、指定されたアドレスのEthereum 取引データを取得・分析し、指定された期間内の詳細なレポートを提供します。
Ethereum レポートアプリケーション
EVM トークンファクトリー
このアプリケーションを使用すると、EVM互換のブロックチェーン上でERC-20トークンを作成できます。トークンの名称、シンボル、初期供給量を簡単にカスタマイズできます。
EVM トークンファクトリー