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.

Implementar a aplicação

Ver repositório

Framework/Biblioteca de front-end:

React/Next.js

Idioma:

TypeScript

Ferramenta de compilação/Servidor de desenvolvimento:

Next.js

Pré-visualização da aplicação de exemplo

Visão geral

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.

Introdução

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

Arquitetura

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.
- O explorer component contains client-side components that call the API routes and render the results.
- O cabeçalho component contains the search bar for the dapp.

Deploy on Vercel

Pré-visualização

Next.js Documentation

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

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

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

Contribuições e comentários

Adoraríamos receber os vossos comentários e agradecemos quaisquer contribuições para esta aplicação de exemplo!

Para comunicar problemas ou partilhar comentários, abra uma issue no GitHub na qn-guia-exemplos repositório.

Para contribuir, siga estes passos:

Fazer um fork do repositório
Criar um ramo de funcionalidades:
git checkout -b feature/amazing-feature
Envie as suas alterações:
git commit -m "Adicionar uma funcionalidade fantástica"
Envie o seu branch:
git push origin feature/amazing-feature
Abrir um Pull Request.

Explore mais aplicações de exemplo

Titan Meta-Aggregation Swap

A single-page Solana swap UI built on the Titan Gateway Meta-Aggregation API, served through Quicknode. Surfaces competing provider quotes, the onchain venues a route touches, and a self-custodial build → sign → send flow with transactions confirmed via Quicknode RPC.