Ir diretamente para o conteúdo principal
Voltar aos aplicativos de exemplo

Ethereum Wallet Explorer

The Ethereum Wallet Explorer uses Quicknode's Ethereum endpoint and APIs to query the blockchain for tokens, transactions, and NFTs associated with a given wallet.

Ícone de implantação
Implantar aplicativo
Ícone do GitHub
Ver Repositório
Framework/Biblioteca de Frontend:
Next.js
Idioma:
TypeScript
Servidor de ferramentas de compilação/desenvolvimento:
Next.js
Pré-visualização do aplicativo de exemplo

Visão geral

The Ethereum Wallet Explorer demonstrates how to use your Quicknode Ethereum endpoint, the Blockbook product, and an endpoint add-on to query tokens, transactions, and NFTs associated with a given wallet.

To run this demo with full functionality, you need the free Pacote da API v2 para tokens e NFTs endpoint add-on and access to the API do Blockbook.

A demonstração utiliza Next.js 14 projeto iniciado com create-next-app.

Primeiro passos

Instalar dependências​

Primeiro, instale as dependências:

npm instalar
# ou
yarn
# ou
pnpm instalar
# ou
bun install

Definir variáveis de ambiente​

Renomear .env.example para .env.local e atualize com o seu EndpointEthereum Quicknode Ethereum .

ETHEREETHEREUM_ETHEREUMURLmainnet

Primeiro, execute o servidor de desenvolvimento:

npm executar dev
# ou
yarn dev
# ou
pnpm dev
# ou
bun dev

Aceda a http://localhost:3000 no seu navegador para ver o resultado.

Utilizar a Dapp

Procure um endereço Ethereum e prima Enter. A Dapp irá redirecionar para /carteira/[endereço] and query the Ethereum blockchain for the wallet's token balances, transactions, and NFTs. Results are rendered in respective cards.

Arquitetura​

src/
├── app/
│   └── api/
│       └── wallet/
├── componentes/
    ├── explorer/
    └── cabeçalho/

  • API - Contém as rotas da API para as chamadas Ethereum . Estas podem ser acedidas a partir do cliente através de /api/wallet/[método]?walletAddress=[endereço]. These GET requests use the Éteres library to interact with Ethereum and parse data, the Pacote da API v2 para tokens e NFTs endpoint add-on to retrieve NFT and ERC-20 token information, and the API do Blockbook to retrieve transaction history for any Ethereum address.

  • componentes - Contém os componentes React para a dapp.

    • O explorador O componente contém componentes do lado do cliente que chamam as rotas da API e apresentam os resultados.
    • O header O componente contém a barra de pesquisa da dapp.

Implantar no Vercel

Implementar com o Vercel

Pré-visualização

Pré-visualização

Pré-visualização

Documentação do Next.js

Para saber mais sobre o Next.js, consulte os seguintes recursos:

Podes consultar o repositório do Next.js no GitHub — os teus comentários e contribuições são bem-vindos!


Contribuições e feedback
Gostaríamos de receber seu feedback e contribuições para este aplicativo de exemplo!
Para relatar problemas ou enviar feedback, abra uma issue no GitHub em qn-guide-examples repositório.
Para contribuir, siga estas etapas:
  1. Fazer fork do repositório
  2. Criar uma branch de funcionalidades:
    git checkout -b feature/amazing-feature
  3. Faça commit das suas alterações:
    git commit -m "Add amazing feature"
  4. Faça push da sua branch:
    git push origin feature/amazing-feature
  5. Abrir um Pull Request.
Explorar mais aplicativos de exemplo
Aave V3 Liquidation Tracker
This application provides real-time monitoring and in-depth analysis of liquidation events on the Aave V3 protocol. Built on a serverless architecture, this app showcases the power of Quicknode Streams for seamless blockchain data streaming.
Aave V3 Liquidation Tracker
Aplicativo de relatório de transações Ethereum
This application fetches and analyzes Ethereum transactions for a given address using Quicknode's Blockbook API, providing detailed reports within a specified date range.
Aplicativo de relatório de transações Ethereum
EVM Token Factory
This application enables you to create an ERC-20 token on any EVM-compatible blockchain. You can customize the token name, symbol, and initial supply with ease.
EVM Token Factory