Ga naar de hoofdinhoud
Terug naar voorbeeldapps

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

Install Dependencies

First, install the dependencies:

npm install
# or
yarn
# or
pnpm install
# or
bun install

Set Environment Variables

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

Rename .env.example naar .env.local and update with your Quicknode Solana Node Endpoint. Enable the DAS API only if you have enabled the DAS add-on for your Quicknode Solana Node Endpoint.

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/web3.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!
Om problemen te melden of feedback te geven, maak je een GitHub-issue aan in de qn-gids-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. Pushen van je branch:
    git push origin feature/amazing-feature
  5. Dien een pull-verzoek in.