Ethereum -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.
Overzicht
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.
Aan de slag
Afhankelijkheden installeren
First, install the dependencies:
npm install
# of
yarn
# of
pnpm install
# of
bun install
Set Environment Variables
Naam wijzigen .env.voorbeeld naar .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.
Architectuur
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 theEtherslibrary to interact with Ethereum and parse data, theToken and NFT API v2 bundleendpoint add-on to retrieve NFT and ERC-20 token information, and theBlockbook APIto retrieve transaction history for any Ethereum address. -
components- Contains the React components for the dapp.- De
explorercomponent contains client-side components that call the API routes and render the results. - De
koptekstcomponent contains the search bar for the dapp.
- De
Deploy on Vercel
Voorbeeld
Next.js Documentation
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
- Maak een fork van de repository
- Maak een feature-branch aan:git checkout -b feature/amazing-feature
- Sla je wijzigingen op:git commit -m "Geweldige functie toevoegen"
- Pusht je branch:git push origin feature/amazing-feature
- Dien een pull-verzoek in.
