Explorateur Solana

L'explorateur de portefeuille Solana utilise une API Quicknode Solana Endpoint pour récupérer les soldes de jetons, l'historique des transactions et les NFT d'un portefeuille donné sur la blockchain Solana .

Auteur

Aaron Milano

Déployer l'application

Consulter le dépôt

Framework/bibliothèque front-end :

React/Next.js

Langue :

TypeScript

Outil de compilation/serveur de développement :

Next.js

Présentation générale

L'explorateur de portefeuille « Solana » s'appuie sur une API Quicknode Solana Endpoint pour récupérer les soldes de jetons, l'historique des transactions et les NFT d'un portefeuille donné sur la blockchain Solana . Il utilise un Next.js 14 projet lancé grâce à create-next-app.

Pour commencer

Installer les dépendances

Commencez par installer les dépendances :

npm installer
# ou
yarn
# ou
pnpm installer
# ou
bun install

Définir les variables d'environnement

Assurez-vous d'avoir unendpoint Quicknode à portée de mainendpoint pouvez en obtenir un gratuitement ici.

Renommer .env.example à .env.local et ajoutez votre Quicknode Solana endpoint . Définissez DAS_API_ENABLED à vrai à condition que vous ayez accès à la Produit Metaplex.

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

Commencez par lancer le serveur de développement :

npm exécuter dev
# ou
yarn dev
# ou
pnpm dev
# ou
bun dev

Ouvrez http://localhost:3000 dans votre navigateur pour voir le résultat.

Utilisation de la Dapp

Recherchez une adresse de portefeuille « Solana » et appuyez sur Entrée. L'application Dapp vous redirigera vers /wallet/[adresse] et interroger la blockchain Solana pour obtenir les soldes en jetons, les transactions et les NFT du portefeuille. Les résultats s'affichent dans des fiches dédiées.

Architecture

src/
├── app/
│   └── api/
│       └── wallet/
├── components/
    ├── explorer/
    └── header/

API - Contient les routes API pour les appels RPC de Solana . Le client peut y accéder via /api/wallet/[méthode]?walletAddress=[adresse]. Ces requêtes GET utilisent le @solana/web3.js la bibliothèque et le cadre Metaplex Digital Asset Standard pour traiter les requêtes.
composants - Contient les composants React destinés à la dapp.
- Le explorateur Le composant contient des éléments côté client qui appellent les routes de l'API et affichent les résultats.
- Le en-tête Ce composant contient la barre de recherche de la dapp.