メインコンテンツへスキップ
サンプルアプリに戻る

Sui Portfolio Tracker

A real-time terminal portfolio tracker for Sui that uses Quicknode GraphQL to fetch balances and transaction history, and gRPC streaming to detect live onchain activity.

GitHubのアイコン
リポジトリを表示
フロントエンドフレームワーク／ライブラリ：
Node.js
言語：
TypeScript
ビルドツール／開発サーバー：
tsx
サンプルアプリのプレビュー

概要

This sample app is a terminal-based portfolio tracker for the Sui blockchain. It combines two Quicknode Sui API layers: GraphQL for rich balance and transaction queries, and gRPC streaming for real-time checkpoint notifications. For a step-by-step walkthrough, see the companion guide.

On startup, the app fetches initial coin balances and recent transactions via GraphQL. It then opens a persistent gRPC connection to SubscribeCheckpoints on Sui's SubscriptionService, receiving a new checkpoint roughly every 400-500ms. When the stream detects onchain activity for a tracked address, it triggers a debounced GraphQL re-fetch to update the displayed state.

建築​

Startup
  App -> Quicknode GraphQL (HTTPS/443)
    -> GetBalances + GetTransactions
      -> render initial state

Live Updates
  App -> Quicknode gRPC (:9000)
    -> SubscribeCheckpoints (persistent stream)
      -> detect address in sender or balance_changes
        -> 2s debounce -> GraphQL re-fetch -> re-render

特長​


  • GraphQL queries for coin balances (all coin types) and the 20 most recent transactions on startup
  • gRPC SubscribeCheckpoints stream for event-driven detection (~400ms per checkpoint)
  • Debounced GraphQL re-fetch after relevant checkpoints to avoid redundant requests during bursts
  • Inline balance change display for each relevant checkpoint (coin type, direction, amount)
  • Multi-address tracking: one gRPC stream, client-side filtering across all addresses
  • Automatic gRPC reconnection with exponential backoff (up to 30s)
  • Split rendering: stable balance/transaction panel at the top, scrolling live feed below

前提条件​


  • Node.js 20以降
  • pnpm (npm install -g pnpm)
  • A Quicknode Sui mainnet endpoint

プロジェクトの構成​

src/
  index.ts          # Entry point, startup orchestration, rendering
  graphql.ts        # GraphQL queries: GetBalances, GetTransactions
  grpc-stream.ts    # gRPC stream subscription and checkpoint processing
  portfolio.ts      # Portfolio state management and terminal rendering
  types.ts          # TypeScript type definitions
protos/             # Sui proto files (cloned from MystenLabs/sui-apis)

環境変数​

コピー .env.example ～へ .env and fill in:

QN_ENDPOINT_URL=https://your-endpoint.sui-mainnet.quiknode.pro
QN_ENDPOINT_TOKEN=your-token-here
SUI_ADDRESS=0x...
Variable説明
QN_ENDPOINT_URLQuicknode Sui mainnet endpoint URL (without trailing slash or token)
QN_ENDPOINT_TOKENAuth token (the path segment after the hostname in your endpoint URL)
SUI_ADDRESSSui address(es) to track. Comma-separate multiple addresses

Finding your token: Your Quicknode endpoint URL looks like https://abc123xyz.sui-mainnet.quiknode.pro/abcdef1234567890. The token is the path segment after the hostname: abcdef1234567890.

To track multiple addresses, comma-separate them:

SUI_ADDRESS=0xabc...,0xdef...,0x123...

注： GraphQL uses the token in the URL path; gRPC uses it as an x-token metadata header. Both values come from the same Quicknode endpoint.

はじめに​

1. Clone the repo​

git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/sui/sui-portfolio-tracker

2. Clone Sui proto files​

The gRPC client requires Sui's protobuf definitions:

git clone https://github.com/MystenLabs/sui-apis.git protos

3. Install dependencies​

pnpm install

4. Configure environment​

cp .env.example .env

Fill in the values from the Environment Variables section above.

5. Run​

pnpm start

Scripts​

Command説明
pnpm startRun with tsx (recommended)
pnpm devRun with file watching
pnpm buildCompile TypeScript
pnpm start:compiledRun compiled output

プレビュー

Preview 1Preview 2
投稿とフィードバック
皆様からのご意見をお待ちしております。また、このサンプルアプリへのご協力も大歓迎です！
問題の報告やフィードバックをお寄せいただくには、GitHubのイシューを qn-ガイド-例 リポジトリ。
投稿するには、以下の手順に従ってください：
  1. リポジトリをフォークする
  2. フィーチャーブランチを作成する：
    git checkout -b feature/amazing-feature
  3. 変更内容をコミットします：
    git commit -m "素晴らしい機能を追加"
  4. ブランチをプッシュしてください：
    git push origin feature/amazing-feature
  5. プルリクエストを作成してください。
その他のサンプルアプリを見る
タイタン・メタアグリゲーション・スワップ
Titan GatewayのMeta-Aggregation APIを基盤として構築され、Quicknodeを通じて提供される、1ページ構成のSolanaスワップUIです。競合するプロバイダーの相場、ルートが経由するオンチェーン取引所、およびQuicknode RPCを介してトランザクションが確認される自己管理型の「作成→署名→送信」フローを表示します。
タイタン・メタアグリゲーション・スワップ
Bitcoin Transaction Report Application
This application fetches and analyzes Bitcoin transactions associated with a specific address, leveraging the capabilities of Quicknode's Blockbook add-on. It provides users with detailed reports within a specified date range, offering insights into transaction history, balances after each transaction, and the USD value of Bitcoin movements.
Bitcoin Transaction Report Application
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