Ga naar de hoofdinhoud
Terug naar voorbeeldapps

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.

Frontend-framework/bibliotheek:
React/Next.js
Taal:
TypeScript
Bouwtool/ontwikkelingsserver:
Next.js
Voorbeeld van een app-preview

Overzicht

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 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

Make sure you have a Quicknode endpoint handy--you can get one free here.

Naam wijzigen .env.voorbeeld naar .env.local and add your Quicknode Solana endpoint. Set DAS_API_ENABLED naar waar 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

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

Architectuur

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.
    • De explorer component contains client-side components that call the API routes and render the results.
    • De koptekst component contains the search bar for the dapp.

Deploy on Vercel

Deploy with Vercel


Voorbeeld

Voorbeeld


Next.js Documentation

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Bijdragen en feedback
We horen graag wat je ervan vindt en staan open voor alle bijdragen aan deze voorbeeldapp!
Als je problemen wilt melden of feedback wilt geven, maak dan een GitHub-issue aan in de qn-handleiding-voorbeelden repository.
Volg deze stappen om een bijdrage te leveren:
  1. Maak een fork van de repository
  2. Maak een feature-branch aan:
    git checkout -b feature/amazing-feature
  3. Sla je wijzigingen op:
    git commit -m "Geweldige functie toevoegen"
  4. Pusht je branch:
    git push origin feature/amazing-feature
  5. Dien een pull-verzoek in.