> ## Documentation Index > Fetch the complete documentation index at: https://www.helius.dev/docs/llms.txt > Use this file to discover all available pages before exploring further. # Build a Portfolio Tracker on Solana > Build a Solana portfolio tracker that surfaces any wallet's complete holdings alongside its live and historical on-chain activity. export const PortfolioTrackerDemo = () => { const [apiKey, setApiKey] = useState(''); const [ownerAddress, setOwnerAddress] = useState('86xCnPeV69n6t3DnyGvkKobf9FdN2H9oiVDdaMpo2MMY'); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [portfolio, setPortfolio] = useState(null); const [history, setHistory] = useState(null); const [live, setLive] = useState([]); const [liveStatus, setLiveStatus] = useState('idle'); const wsRef = useRef(null); const rpc = async (method, params) => { const res = await fetch(`https://mainnet.helius-rpc.com/?api-key=${apiKey}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ jsonrpc: '2.0', id: 'quickstart', method, params }) }); const json = await res.json(); if (json.error) throw new Error(json.error.message || 'RPC error'); return json.result; }; const stopLive = () => { if (wsRef.current) { try { wsRef.current.close(); } catch (e) {} wsRef.current = null; } setLiveStatus('idle'); }; useEffect(() => stopLive, []); const handleLoad = async e => { e.preventDefault(); setLoading(true); setError(null); setPortfolio(null); setHistory(null); stopLive(); setLive([]); try { const assets = await rpc('getAssetsByOwner', { ownerAddress, page: 1, limit: 20, displayOptions: { showFungible: true, showNativeBalance: true } }); const txns = await rpc('getTransactionsForAddress', [ownerAddress, { transactionDetails: 'signatures', sortOrder: 'desc', limit: 10, filters: { tokenAccounts: 'balanceChanged' } }]); const items = assets.items || []; const tokens = items.filter(i => (i.interface || '').includes('Fungible')); const nfts = items.filter(i => !(i.interface || '').includes('Fungible')); setPortfolio({ sol: (assets.nativeBalance && assets.nativeBalance.lamports ? assets.nativeBalance.lamports : 0) / 1e9, tokenCount: tokens.length, nftCount: nfts.length, tokens: tokens.slice(0, 6), nfts: nfts.slice(0, 4) }); setHistory(txns.data || []); } catch (err) { const msg = err.message || ''; setError((/too big|too large/i).test(msg) ? 'This wallet holds too many assets to load in the demo. Try a wallet with fewer tokens and NFTs, or lower the limit in getAssetsByOwner.' : msg || 'Failed to load wallet'); } finally { setLoading(false); } }; const startLive = () => { if (!apiKey) { setError('Enter your API key first'); return; } setLiveStatus('connecting'); const ws = new WebSocket(`wss://mainnet.helius-rpc.com/?api-key=${apiKey}`); wsRef.current = ws; ws.onopen = () => { setLiveStatus('live'); ws.send(JSON.stringify({ jsonrpc: '2.0', id: 1, method: 'transactionSubscribe', params: [{ accountInclude: [ownerAddress], tokenAccounts: 'balanceChanged' }, { commitment: 'confirmed', encoding: 'jsonParsed', transactionDetails: 'signatures', maxSupportedTransactionVersion: 0 }] })); }; ws.onmessage = event => { const msg = JSON.parse(event.data); const sig = msg && msg.params && msg.params.result && msg.params.result.signature; if (sig) setLive(prev => [{ sig, at: new Date().toLocaleTimeString() }, ...prev].slice(0, 8)); }; ws.onerror = () => setLiveStatus('error'); ws.onclose = () => { if (wsRef.current === ws) setLiveStatus('idle'); }; }; const short = s => s ? `${s.slice(0, 6)}...${s.slice(-6)}` : ''; const btnClass = loading ? 'px-4 py-2 font-medium rounded-full bg-gray-300 dark:bg-gray-700 cursor-not-allowed' : 'px-4 py-2 font-medium rounded-full bg-primary hover:bg-primary/80 text-white'; const dotClass = liveStatus === 'live' ? 'inline-block w-2 h-2 rounded-full bg-green-500 animate-pulse' : liveStatus === 'error' ? 'inline-block w-2 h-2 rounded-full bg-red-500' : 'inline-block w-2 h-2 rounded-full bg-yellow-500'; return
setApiKey(e.target.value)} placeholder="Enter your API key" className="w-full p-2 border rounded dark:bg-zinc-900 dark:border-zinc-700" required />
setOwnerAddress(e.target.value)} placeholder="Solana wallet address" className="w-full p-2 border rounded dark:bg-zinc-900 dark:border-zinc-700" required />
{liveStatus === 'live' || liveStatus === 'connecting' ? : }

Your API key is used only in your browser to call Helius directly. It is never sent anywhere else.

{error ?
Error: {error}
: null} {portfolio ?
{portfolio.sol.toFixed(3)}
SOL
{portfolio.nftCount}
NFTs
{portfolio.tokens.length > 0 ?

Tokens

    {portfolio.tokens.map(t => { const info = t.token_info || ({}); const amount = (info.balance || 0) / 10 ** (info.decimals || 0); const name = t.content && t.content.metadata && t.content.metadata.name || info.symbol || 'Unknown token'; const img = t.content && t.content.links ? t.content.links.image : ''; return
  • {name} {amount.toLocaleString(undefined, { maximumFractionDigits: 4 })}
    • ; })}
: null} {portfolio.nfts.length > 0 ?
{portfolio.nfts.map(nft => {nft.content)}
: null}
: null} {history && history.length > 0 ?

Recent activity

: null} {liveStatus !== 'idle' || live.length > 0 ?

Live feed {liveStatus}

{live.length === 0 ?

Waiting for the next transaction that touches this wallet.

: }
: null}
; }; In this guide you'll build a dashboard that shows what any Solana address holds and what it's doing right now. You'll pull its full portfolio of tokens, NFTs, and SOL in a single [DAS](/api-reference/das/getassetsbyowner) call, load transaction history with the Helius-exclusive [`getTransactionsForAddress`](/rpc/gettransactionsforaddress), and stream new activity live over [`transactionSubscribe`](/rpc/websocket/transaction-subscribe). You'll try it first as an embedded demo, then build it as a full Next.js app. ## Try it live Paste your API key and any wallet address to see the three pieces working together: portfolio, history, and a live feed. This is the same data your app will render. *** ## Build it as a Next.js app Clone the complete starter — the finished Next.js app from this walkthrough, ready to `npm install && npm run dev`. The widget above calls Helius directly from the browser, which exposes your API key. In a real app you keep the key on the server. This walkthrough uses the Next.js App Router with two route handlers so **your key never reaches the client**: one proxies RPC calls, the other relays the WebSocket feed as Server-Sent Events. **Prerequisites:** Node.js 18+ and a [Helius API key](https://dashboard.helius.dev/api-keys). ```bash theme={"system"} npx create-next-app@latest portfolio-tracker --ts --app --tailwind --no-src-dir --eslint --yes cd portfolio-tracker npm install helius-sdk ws npm install --save-dev @types/ws ``` You'll use the [Helius SDK](https://github.com/helius-labs/helius-sdk) for the RPC calls and `ws` for the live WebSocket feed. Add your key to `.env.local`: ```bash .env.local theme={"system"} HELIUS_API_KEY=YOUR_API_KEY ``` This keeps your API key server-side. The client posts a method and params here, and the handler runs them through the Helius SDK, which attaches your key and builds the request for you. ```typescript app/api/helius/route.ts theme={"system"} import { NextRequest, NextResponse } from "next/server"; import { createHelius } from "helius-sdk"; export const runtime = "nodejs"; const helius = createHelius({ apiKey: process.env.HELIUS_API_KEY!, network: "mainnet", }); export async function POST(req: NextRequest) { const { method, params } = await req.json(); try { // The two Helius calls that power this app: the full portfolio and its history. const result = method === "getAssetsByOwner" ? await helius.getAssetsByOwner(params) : method === "getTransactionsForAddress" ? await helius.getTransactionsForAddress(params) : undefined; if (result === undefined) { return NextResponse.json( { error: { message: `Unsupported method: ${method}` } }, { status: 400 } ); } return NextResponse.json({ result }); } catch (e) { return NextResponse.json({ error: { message: (e as Error).message } }); } } ``` The browser can't open a Helius WebSocket without the key. Instead, open the WebSocket on the server and stream signatures to the client with SSE. ```typescript app/api/stream/route.ts [expandable] theme={"system"} import { NextRequest } from "next/server"; import WebSocket from "ws"; export const runtime = "nodejs"; export async function GET(req: NextRequest) { const address = req.nextUrl.searchParams.get("address"); if (!address) return new Response("Missing address", { status: 400 }); const stream = new ReadableStream({ start(controller) { const encoder = new TextEncoder(); const send = (data: unknown) => controller.enqueue(encoder.encode(`data: ${JSON.stringify(data)}\n\n`)); const ws = new WebSocket( `wss://mainnet.helius-rpc.com/?api-key=${process.env.HELIUS_API_KEY}` ); ws.on("open", () => { ws.send( JSON.stringify({ jsonrpc: "2.0", id: 1, method: "transactionSubscribe", params: [ // tokenAccounts: "balanceChanged" also matches the wallet's token accounts, // so incoming SPL transfers (which touch an ATA, not the wallet pubkey) show up. { accountInclude: [address], tokenAccounts: "balanceChanged" }, { commitment: "confirmed", encoding: "jsonParsed", transactionDetails: "signatures", maxSupportedTransactionVersion: 0, }, ], }) ); }); ws.on("message", (raw) => { const msg = JSON.parse(raw.toString()); const sig = msg?.params?.result?.signature; if (sig) send({ signature: sig, at: Date.now() }); }); // Tear down the upstream socket when the client disconnects. req.signal.addEventListener("abort", () => { ws.close(); controller.close(); }); }, }); return new Response(stream, { headers: { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", Connection: "keep-alive", }, }); } ``` The page loads the portfolio and history through the proxy, then subscribes to the SSE feed for live updates. ```tsx app/page.tsx [expandable] theme={"system"} "use client"; import { useEffect, useState } from "react"; const rpc = async (method: string, params: unknown) => { const res = await fetch("/api/helius", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ jsonrpc: "2.0", id: "1", method, params }), }); const json = await res.json(); if (json.error) throw new Error(json.error.message); return json.result; }; export default function Home() { const [address, setAddress] = useState( "86xCnPeV69n6t3DnyGvkKobf9FdN2H9oiVDdaMpo2MMY" ); const [portfolio, setPortfolio] = useState(null); const [history, setHistory] = useState([]); const [live, setLive] = useState([]); const [streamAddress, setStreamAddress] = useState(null); const [error, setError] = useState(null); const load = async () => { setError(null); setLive([]); setStreamAddress(address); // point the live feed at the wallet you just loaded try { const [assets, txns] = await Promise.all([ rpc("getAssetsByOwner", { ownerAddress: address, page: 1, limit: 20, displayOptions: { showFungible: true, showNativeBalance: true }, }), rpc("getTransactionsForAddress", [ address, { transactionDetails: "signatures", sortOrder: "desc", limit: 10, filters: { tokenAccounts: "balanceChanged" } }, ]), ]); const items = assets.items ?? []; setPortfolio({ sol: (assets.nativeBalance?.lamports ?? 0) / 1e9, tokens: items.filter((i: any) => `${i.interface}`.includes("Fungible")), nfts: items.filter((i: any) => !`${i.interface}`.includes("Fungible")), }); setHistory(txns.data ?? []); } catch (e: any) { setError(e.message); } }; // Open the live feed only after Load runs, and reopen only when the loaded wallet changes // (not on every keystroke in the input). useEffect(() => { if (!streamAddress) return; const source = new EventSource(`/api/stream?address=${streamAddress}`); source.onmessage = (e) => setLive((prev) => [JSON.parse(e.data), ...prev].slice(0, 10)); return () => source.close(); }, [streamAddress]); return (
setAddress(e.target.value)} />
{error &&

{error}

} {portfolio && (
{portfolio.tokens.length > 0 && (

Tokens ({portfolio.tokens.length})

    {portfolio.tokens.map((t: any) => { const info = t.token_info ?? {}; const amount = (info.balance ?? 0) / 10 ** (info.decimals ?? 0); return (
  • {t.content?.metadata?.name ?? info.symbol ?? "Unknown token"} {amount.toLocaleString(undefined, { maximumFractionDigits: 4 })}
    • ); })}
)} {portfolio.nfts.length > 0 && (

NFTs ({portfolio.nfts.length})

{portfolio.nfts.map((n: any) => ( {n.content?.metadata?.name ))}
)}
)} {history.length > 0 && (

History

)} {live.length > 0 && (

Live ⚡

)}
); } function Stat({ label, value }: { label: string; value: string | number }) { return (
{value}
{label}
); } ``` ```bash theme={"system"} npm run dev ``` Open [http://localhost:3000](http://localhost:3000), paste a wallet address, and hit **Load**. You'll see the portfolio and history immediately, and the live feed fills in as new transactions touch the wallet. ## What's happening ### One DAS call for the whole portfolio `getAssetsByOwner` with `showFungible: true` and `showNativeBalance: true` returns fungible tokens, NFTs (standard **and** compressed), and the native SOL balance in a single response, so you don't need separate `getBalance` or `getTokenAccountsByOwner` calls. Split `items` by `interface` to group tokens versus NFTs. Every item carries its own metadata, so the same call powers both lists. Use `content.metadata.name` for the name and `content.links.image` for the logo or artwork. Fungible tokens also include a `token_info` object with the raw `balance`, `decimals`, and `symbol` — divide `balance` by `10 ** decimals` for the human-readable amount. Not every token ships a name or logo, so fall back gracefully when they're missing. ### Complete history in one request `getTransactionsForAddress` returns transaction history for the wallet, and with `filters.tokenAccounts: "balanceChanged"` it also includes transfers on the wallet's associated token accounts, the activity a plain `getSignaturesForAddress` would miss. Use `transactionDetails: "full"` to get complete transaction data instead of just signatures. ### Real-time updates without polling `transactionSubscribe` pushes a message every time a transaction touches the wallet, so you never poll. Adding `tokenAccounts: "balanceChanged"` to the filter also matches the wallet's token accounts, so incoming SPL transfers appear in the feed — the same activity the history call counts. Relaying the subscription through a server-side route handler keeps your API key off the client. ## Next steps All display options, pagination, and the full asset response shape. Advanced filtering by time, slot, token, direction, and amount. Filter options and payload shape for the live WebSocket feed. Next track: ship a Solana program to devnet through Helius.