Ga naar de hoofdinhoud
Terug naar voorbeeldapps

Portemonnee volgen

Monitor a list of wallet addresses on Solana and Ethereum easily with Quicknode Streams. Update the wallet list through a simple UI.

Pictogram ‘Implementeren’
App implementeren
GitHub-pictogram
Repo bekijken
Frontend-framework/bibliotheek:
Reageren
Taal:
TypeScript
Bouwtool/ontwikkelingsserver:
Next.js
Voorbeeld van een app-preview

Overzicht

This sample app ships a live user activity feed that wires Quicknode Streams + Key-Value Store (KV Store) to monitor addresses, verify webhooks, store events in SQLite via Prisma, and push updates over SSE in real time (EVM + Solana).

Architectuur​

Blockchain (EVM + Solana)
  -> Quicknode Streams + KV
    -> POST /api/webhook/streams (signature verified)
      -> DB insert + SSE emit
        -> UI live feed

Kenmerken​


  • Quicknode Streams (aanmaken + activeren)
  • EVM filter for native transfers and ERC-20 Transfer logs
  • Solana filter for native transfers and SPL token transfers
  • Quicknode KV list backed user monitoring, enabling dynamic user monitoring without redeploying the stream
  • Labeling monitored addresses
  • Bulk add monitored addresses
  • Verificatie van webhook-handtekeningen en controle van tijdstempels
  • SSE live updates
  • ENS resolution for EVM addresses
  • Prisma + lokale opslag via SQLite

Vereisten​


  • Node.js 20+ en een pakketbeheerder (pnpm, yarn, npm).
  • Quicknode and API key: Create an account, and get your Admin API voor QN_API_KEY.
  • EVM endpoint for ENS/ERC-20 metadata: Create an Ethereum endpoint and copy the HTTPS URL for QN_EVM_ENDPOINT.
  • Solana RPC endpoint for SPL token metadata: Create a Solana endpoint and copy the HTTPS URL for QN_SOLANA_ENDPOINT.
  • Openbare webhook-URL: Gebruik een tunnel zoals ngrok of de app zo implementeren dat APP_URL is bereikbaar via Quicknode.

Projectopbouw​

filters/
  evm-filter.js           # Quicknode Streams filter (EVM)
  solana-filter.js        # Quicknode Streams filter (Solana)
scripts/
  setup-streams.ts        # Creates KV lists + stream (paused)
  activate-streams.ts     # Activates stream by id
src/
  app/api/                # API routes (webhooks, users, SSE)
  lib/                    # Quicknode, webhook, SSE helpers
  types/                  # Stream payload types
prisma/
  schema.prisma           # SQLite schema

Omgevingsvariabelen​

Kopiëren .env.voorbeeld naar .env en vul het volgende in:

QN_API_KEY=""                  # Quicknode API key
QN_STREAM_SECURITY_TOKEN_EVM="" # EVM stream security token (from setup)
QN_STREAM_SECURITY_TOKEN_SOL="" # Solana stream security token (from setup)
QN_EVM_ENDPOINT=""             # Quicknode EVM endpoint URL
QN_SOLANA_ENDPOINT=""          # Solana RPC endpoint URL
DATABASE_URL="file:./dev.db"   # SQLite DB
APP_URL="http://localhost:3000" # Public app URL (ngrok for local webhooks)

Opmerkingen:

  • QN_STREAM_SECURITY_TOKEN_EVM en QN_STREAM_SECURITY_TOKEN_SOL are returned by configuratie:streams per chain.
  • APP_URL moet bereikbaar zijn via Quicknode gebruik ngrok of een geïmplementeerde URL).

Aan de slag​

1. Install dependencies​

npm install
# pnpm install
# yarn install

2. Create your env file​

cp .env.voorbeeld .env

3. Add required variables​

Vul in .env (zie Vereisten). Voor lokale webhooks maak je je app toegankelijk via ngrok en kopieer je de HTTPS-URL naar APP_URL:

ngrok http 3000

4. Create Quicknode Streams + KV lists​

npm run setup:streams
# pnpm run setup:streams
# yarn setup:streams

Kopieer het afgedrukte beveiligingstoken naar .env (QN_STREAM_SECURITY_TOKEN_EVM of QN_STREAM_SECURITY_TOKEN_SOL). If you want Solana, run the command again with chain=solana-mainnet (zie Quicknode Streams Setup for options).

5. Set up the database and start the app​

npx prisma migrate dev --name init
# pnpm prisma migrate dev --name init
# yarn prisma migrate dev --name init
npm run dev
# pnpm dev
# yarn dev

6. Activate the stream​

npm run activate:streams
# pnpm run activate:streams
# yarn activate:streams

Openen http://localhost:3000, add wallet addresses, and you should see live events as streams deliver webhooks.

Database​

SQLite wordt standaard gebruikt. Het Prisma-schema bevindt zich in prisma/schema.prisma.

Veelgebruikte opdrachten:

pnpm prisma migrate dev --name init
pnpm prisma studio

Quicknode Streams Setup​

Following the Getting Started section is enough. However, if you want to manage Streams settings or KV lists manually, follow these steps.

1. Check the filter​

The EVM filter lives in filters/evm-filter.js. It emits:

  • nativeTransfer events (ETH transfers with non-zero value)
  • erc20Transfer events (ERC-20 Transfer logs)

The filter checks addresses against the userstream_monitored_users_evm KV list.

The Solana filter lives in filters/solana-filter.js. It emits:

  • solTransfer events (native SOL transfers)
  • splTransfer events (SPL token transfers)

The filter checks addresses against the userstream_monitored_users_sol KV list.

Adding addresses through UI will update the KV list automatically. However, if you need to manage KV lists manually, you can do so through the Quicknode REST API. Check the Key-Value Store documentation page to learn more.

2. Create stream + KV lists​

pnpm run setup:streams

This will:

  • Create the KV list for the selected chain (userstream_monitored_users_evm of userstream_monitored_users_sol)
  • Base64 encode the filter for the chosen chain
  • Test the filter with a test block number (as KV list will be empty at first, no events will be emitted.)
  • Create a stream with:
    • status=paused
    • dataset=block_with_receipts (EVM) or dataset=block (Solana)
    • required webhook attributes (compression, retries, timeouts)
  • Save the stream id to .quicknode/streams.json
  • Print the security_token voor .env (QN_STREAM_SECURITY_TOKEN_EVM of QN_STREAM_SECURITY_TOKEN_SOL)
  • Creates a single stream per run (run again with chain=solana-mainnet of chain=ethereum-mainnet to create both).

You can override options using key=value args, for example:

pnpm run setup:streams chain=ethereum-mainnet name="UserStream EVM Monitor" test_block_number=24223192
pnpm run setup:streams chain=solana-mainnet name="UserStream Solana Monitor" test_block_number=393612994

Common options:

  • chain=ethereum-mainnet (alias: network=ethereum-mainnet)
  • dataset=block_with_receipts
  • dataset_batch_size=1
  • status=paused
  • elastic_batch_enabled=true
  • filter_path=filters/evm-filter.js
  • test_block_number=24223192
  • destination_compression=none
  • destination_headers='{"Content-Type":"application/json"}'
  • destination_max_retry=3
  • destination_retry_interval_sec=1
  • destination_post_timeout_sec=10

Webhook Security and Payload​


  • Endpoint: POSTstreams
  • Vereiste kopteksten: x-qn-nonce, x-qn-tijdstempel, x-qn-handtekening
  • De payload kan met gzip worden gecomprimeerd; de handler detecteert dit automatisch content-encoding: gzip
  • Toepassingen van handtekeningverificatie QN_STREAM_SECURITY_TOKEN_EVM of QN_STREAM_SECURITY_TOKEN_SOL

API-eindpunten​


  • GET /api/health - gezondheidscontrole
  • GET /api/users - list monitored users
  • POST /api/users - add a single user (walletAddress, optional naam)
  • PATCH /api/users?id=... - update user name/displayName
  • DELETE /api/users?id=... - delete a user
  • POST /api/users/bulk - bulk add users (newline separated)
  • POSTstreams - Quicknode Streams
  • POST /api/webhook/test - local-only webhook test
  • GET /api/sse - SSE stream of activity events

Voorbeeld

Voorbeeld

Bijdragen en feedback
We horen graag wat je ervan vindt en staan open voor alle bijdragen aan deze voorbeeldapp!
Als je problemen wilt melden of feedback wilt geven, maak dan een GitHub-issue aan in de qn-handleiding-voorbeelden repository.
Volg deze stappen om een bijdrage te leveren:
  1. Maak een fork van de repository
  2. Maak een feature-branch aan:
    git checkout -b feature/amazing-feature
  3. Sla je wijzigingen op:
    git commit -m "Geweldige functie toevoegen"
  4. Pusht je branch:
    git push origin feature/amazing-feature
  5. Dien een pull-verzoek in.
Bekijk meer voorbeeldapps
Aave V3-liquidatietracker
Deze applicatie biedt realtime monitoring en diepgaande analyse van liquidatiegebeurtenissen binnen het Aave V3-protocol. De app is gebaseerd op een serverloze architectuur en laat zien hoe krachtig Quicknode Streams isStreams het naadloos streamen van blockchain-gegevens.
Aave V3-liquidatietracker
Applicatie voor 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.
Applicatie voor Ethereum
Ethereum -explorer
Deze applicatie maakt gebruik vanendpoint de API's Quicknode om in de blockchain te zoeken naar tokens, transacties en NFT's die aan een bepaalde wallet zijn gekoppeld.
Ethereum -explorer