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.
Overzicht
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.
Aan de slag
Install Dependencies
First, install the dependencies:
npm install
# or
yarn
# or
pnpm install
# or
bun install
Set Environment Variables
Rename .env.example 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 utilize theEtherslibrary, which lets us interact with Ethereum via our RPC URL and helps us parse and decode data, theToken and NFT API v2 bundleadd-on from the Quicknode Marketplace to get information about NFTs and ERC-20 Tokens via simple RPC request, and theEVM Blockbookadd-on to obtain 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"
- Pushen van je branch:git push origin feature/amazing-feature
- Dien een pull-verzoek in.
