본문으로 건너뛰기
샘플 앱으로 돌아가기

솔라나 지갑 탐색기

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.

프론트엔드 프레임워크/라이브러리:
React/Next.js
언어:
TypeScript
빌드 도구/개발 서버:
Next.js
샘플 앱 미리 보기

개요

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.


시작하기

의존성 설치

First, install the dependencies:

npm install
# 또는
yarn
# 또는
pnpm 설치
# 또는
bun install

Set Environment Variables

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

Rename .env.example ~에 .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.

건축

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

Deploy on Vercel

Deploy with Vercel


미리 보기

미리 보기


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!

기여 및 피드백
여러분의 의견을 듣고 싶으며, 이 샘플 앱에 대한 모든 기여를 환영합니다!
문제를 신고하거나 피드백을 공유하려면, 다음에서 GitHub 이슈를 생성해 주세요. qn-가이드-예시 저장소.
기여하시려면 다음 단계를 따르세요:
  1. 저장소를 포크하기
  2. 기능 브랜치 생성:
    git checkout -b feature/amazing-feature
  3. 변경 사항을 커밋하세요:
    git commit -m "멋진 기능 추가"
  4. 브랜치를 푸시하세요:
    git push origin feature/amazing-feature
  5. 풀 리퀘스트를 제출하세요.