Zum Hauptinhalt springen
Zurück zu den Beispiel-Apps

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.

Symbol „Bereitstellen“
App bereitstellen
GitHub-Symbol
Repo anzeigen
Frontend-Framework/Bibliothek:
Next.js
Sprache:
TypeScript
Build-Tool/Entwicklungsserver:
Next.js
Vorschau der Beispiel-App

Übersicht

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 Projekt, das mit create-next-app.

Erste Schritte

Abhängigkeiten installieren​

First, install the dependencies:

npm install
# oder
yarn
# oder
pnpm install
# oder
bun install

Umgebungsvariablen festlegen​

Umbenennen .env.example zu .env.local and update with your Quicknode Ethereum Node Endpoint.

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

Starten Sie zunächst den Entwicklungsserver:

npm run dev
# oder
yarn dev
# oder
pnpm dev
# oder
bun dev

Öffnen Sie http://localhost:3000 in Ihrem Browser, um das Ergebnis anzuzeigen.

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

Architektur​

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.

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

Auf Vercel bereitstellen

Mit Vercel bereitstellen

Vorschau

Vorschau

Vorschau

Next.js-Dokumentation

Wenn Sie mehr über Next.js erfahren möchten, sehen Sie sich die folgenden Ressourcen an:

Schaut euch doch mal das Next.js-GitHub-Repository an – wir freuen uns über euer Feedback und eure Beiträge!


Beiträge & Feedback
Wir würden uns sehr über Ihr Feedback freuen und begrüßen jeden Beitrag zu dieser Beispiel-App!
Um Probleme zu melden oder Feedback zu geben, eröffnen Sie ein GitHub-Issue im qn-Anleitung-Beispiele Repository.
Um einen Beitrag zu leisten, gehen Sie bitte wie folgt vor:
  1. Das Repository forken
  2. Erstelle einen Feature-Branch:
    git checkout -b feature/amazing-feature
  3. Speichere deine Änderungen:
    git commit -m "Tolle Funktion hinzufügen"
  4. Deinen Branch pushen:
    git push origin feature/amazing-feature
  5. Erstelle einen Pull Request.
Entdecken Sie weitere Beispiel-Apps
Aave V3 Liquidations-Tracker
Diese Anwendung ermöglicht die Echtzeitüberwachung und detaillierte Analyse von Liquidationsereignissen im Aave-V3-Protokoll. Die auf einer serverlosen Architektur basierende App demonstriert die Leistungsfähigkeit von „ Quicknode “ (Streams ) für nahtloses Blockchain-Daten-Streaming.
Aave V3 Liquidations-Tracker
Ethereum Anwendung zur Transaktionsmeldung
Diese Anwendung ruft mithilfe der Blockbook-API von Quicknode Transaktionen von Ethereum für eine bestimmte Adresse ab und analysiert diese. Dabei werden detaillierte Berichte für einen festgelegten Zeitraum bereitgestellt.
Ethereum Anwendung zur Transaktionsmeldung
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