Solana -Explorer

The Solana Wallet Explorer leverages a Quicknode Solana Endpoint to retrieve token balances, transaction history, and NFTs for a specified wallet on the Solana blockchain.

Autor

Aaron Milano

App bereitstellen

Repo anzeigen

Frontend-Framework/Bibliothek:

React/Next.js

Sprache:

TypeScript

Build-Tool/Entwicklungsserver:

Next.js

Übersicht

The Solana Wallet Explorer leverages a Quicknode Solana Endpoint to retrieve token balances, transaction history, and NFTs for a specified wallet on the Solana blockchain. It uses a 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

Stellen Sie sicher, dass Sie einenendpoint zur Hand haben – hier könnenendpoint kostenlos einen erhalten.

Umbenennen .env.example zu .env.local and add your Quicknode Solana endpoint. Set DAS_API_ENABLED zu wahr only if you have access to the Metaplex product.

SOLANA_RPC_URL=https://example.solana-mainnet.quiknode.pro/123456/
DAS_API_ENABLED=true
NEXT_PUBLIC_FETCH_JUPLIST=true

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 a Solana wallet address and press enter. The Dapp will redirect to /wallet/[address] and query the Solana 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 Solana RPC calls. These can be accessed from the client via /api/wallet/[method]?walletAddress=[address]. These GET requests utilize the solana.js library and Metaplex Digital Asset Standard framework to handle queries.
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.