跳转至主要内容
返回示例应用

Solana 浏览器

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.


入门指南

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.

重命名 .env.example.env.local and add your Quicknode Solana endpoint. Set DAS_API_ENABLEDtrue 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.

建筑

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.

部署到 Vercel

使用 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!

投稿与反馈
我们非常期待收到您的反馈,并欢迎大家为本示例应用贡献力量!
如需报告问题或提供反馈,请在 qn-guide-示例 存储库。
如需贡献,请按照以下步骤操作:
  1. 分叉该仓库
  2. 创建一个功能分支:
    git checkout -b feature/amazing-feature
  3. 提交您的更改:
    git commit -m "添加超棒的功能"
  4. 推送您的分支:
    git push origin feature/amazing-feature
  5. 提交一个拉取请求。