How I Built a Real-Time DeFi Trading Dashboard with Pyth Network in One Week

JayBrass — Sat, 21 Mar 2026 18:31:58 +0000

Introduction

I recently built PythVision — a real-time DeFi analytics and trading dashboard powered by Pyth Network price feeds and Entropy V2. In this article, I'll walk you through how I integrated Pyth's powerful oracle network into a full-stack Next.js application.

🌐 Live Demo: https://pythvision.vercel.app
💻 GitHub: https://github.com/08106549427/pythvision

What is Pyth Network?

Pyth Network is a decentralized oracle protocol that provides real-time financial market data for DeFi applications. Unlike traditional oracles, Pyth delivers high-fidelity price feeds directly from institutional-grade data sources with sub-second update speeds.

Pyth offers two key products I used in PythVision:

Price Feeds — Real-time prices for crypto, forex, and commodities
Entropy V2 — Verifiable on-chain randomness

What I Built — PythVision

PythVision is a full DeFi platform with:

📊 Live Price Dashboard — Real-time BTC, ETH, SOL, BNB, POL prices
🕯️ Candlestick Charts — TradingView powered live charts
💹 Trading Interface — Buy/Sell with wallet connection
💼 Portfolio Tracker — Track positions and PnL
🔔 Price Alerts — Set price targets stored in Supabase
🎲 Entropy V2 Challenges — On-chain randomness trading challenges
🌈 Wallet Connection — RainbowKit + Wagmi

Tech Stack

Frontend: Next.js 16, TypeScript, Tailwind CSS
Oracle: Pyth Network Hermes SDK
Randomness: Pyth Entropy V2
Charts: TradingView Lightweight Charts
Wallet: RainbowKit + Wagmi
Database: Supabase
Deployment: Vercel

Step 1 — Integrating Pyth Price Feeds

The first thing I built was the price feed integration using Pyth's Hermes client.

Install the SDK

npm install @pythnetwork/hermes-client

Set Up Price Feed IDs

Each asset has a unique feed ID on Pyth Network:

const FEEDS = {
"BTC/USD": "0xe62df6c8b4a85fe1a67db44dc12de5db330f7ac66b72dc658afedf0f4a415b43",
"ETH/USD": "0xff61491a931112ddf1bd8147cd1b641375f79f5825126d665480874634fd0ace",
"SOL/USD": "0xef0d8b6fda2ceba41da15d4095d1da392a0d2f8ed0c6c7bc0f4cfac8c280b56d",
"BNB/USD": "0x2f95862b045670cd22bee3114c39763a4a08beeb663b145d283c31d7d1101c4f",
"POL/USD": "0x3fa4252848f9f0a1480be62745a4629d9eb1322aebab8a791e344b3b9c1adcf5",
};

Fetch Live Prices

const fetchPrices = async () => {
const symbols = Object.keys(FEEDS);
const ids = Object.values(FEEDS);
const query = ids.map(id => ids[]=${id}).join("&");
const url = https://hermes.pyth.network/api/latest_price_feeds?${query};

const response = await fetch(url);
const data = await response.json();

data.forEach((item, i) => {
const price = Number(item.price.price) * Math.pow(10, item.price.expo);
console.log(${symbols[i]}: $${price});
});
};

Key Insight

One thing I learned the hard way — the POL/USD feed ID changed when MATIC was rebranded to POL. Always verify feed IDs at https://pyth.network/developers/price-feed-ids

Step 2 — Building A React Context For Prices

To avoid multiple components creating separate price streams, I created a shared React Context:

export function PriceProvider({ children }) {
const [prices, setPrices] = useState({});
const [loading, setLoading] = useState(true);

useEffect(() => {
fetchPrices();
const interval = setInterval(fetchPrices, 3000);
return () => clearInterval(interval);
}, []);

return (

{children}

);
}

This way all components share the same price data updated every 3 seconds!

Step 3 — Integrating Pyth Entropy V2

Entropy V2 is Pyth's on-chain randomness solution. I used it to power "Trading Challenges" — random trading games for users.

The Smart Contract

// SPDX-License-Identifier: Apache-2.0
pragma solidity ^0.8.19;

contract TradingChallenge {
address private entropyAddress;

function requestChallenge(uint8 challengeType) external payable {
    (bool feeSuccess, bytes memory feeData) = entropyAddress.staticcall(
        abi.encodeWithSignature("getFeeV2()")
    );
    uint256 fee = abi.decode(feeData, (uint256));

    (bool success, bytes memory data) = entropyAddress.call{value: fee}(
        abi.encodeWithSignature("requestV2(uint32)", uint32(500000))
    );
    uint64 sequenceNumber = abi.decode(data, (uint64));
}

function entropyCallback(
    uint64 sequenceNumber,
    address,
    bytes32 randomNumber
) external {
    require(msg.sender == entropyAddress, "Only entropy");
}

}

Key Features of Entropy V2
No need to provide your own random number
Keeper network automatically delivers randomness
Custom gas limits for callbacks
More reliable during unstable chain conditions

Step 4 — Wallet Connection with RainbowKit

npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query

export function Providers({ children }) {
return (

{children}

);
}

Step 5 — Price Alerts with Supabase

I used Supabase to store price alerts persistently:

const createAlert = async (asset, targetPrice, condition) => {
const { data, error } = await supabase
.from("price_alerts")
.insert([{ wallet_address, asset, target_price: targetPrice, condition }]);
};

When a price hits the target, the app triggers a browser notification!

Challenges I Faced

POL/USD Feed ID
MATIC was rebranded to POL — the old feed ID returned 404 errors.
Solution: Always check the latest feed IDs at pyth.network
Multiple Wallet Extensions
Having MetaMask, Rabby, and other wallets installed caused window.ethereum conflicts locally.
Solution: This only happens in development — production works fine.
Price Context Sharing
Multiple components were creating separate price streams.
Solution: Created a shared React Context that all components use.

Results

PythVision is now live at https://pythvision.vercel.app with:
Real-time prices updating every 3 seconds
Full wallet integration
Price alerts stored in database
Trading challenges powered by Entropy V2

What's Next

Deploy TradingChallenge contract to Base mainnet
Add Pyth Pro for institutional-grade data
Add more assets and trading pairs
Mobile app version

Resources

Pyth Network Docs: https://docs.pyth.network
Pyth Price Feed IDs: https://pyth.network/developers/price-feed-ids
Entropy V2 Docs: https://docs.pyth.network/entropy
GitHub Repository: https://github.com/08106549427/pythvision
Live Demo: https://pythvision.vercel.app

Built for the Pyth Playground Community Hackathon 2026

Forem: JayBrass

How I Built a Real-Time DeFi Trading Dashboard with Pyth Network in One Week