diff --git a/apps/developer-hub/src/app/price-feeds/core/page.tsx b/apps/developer-hub/src/app/price-feeds/core/page.tsx new file mode 100644 index 0000000000..b21ac887d4 --- /dev/null +++ b/apps/developer-hub/src/app/price-feeds/core/page.tsx @@ -0,0 +1,5 @@ +import { CoreLandingPage } from "../../../components/Pages/CoreLandingPage"; + +export default function Page() { + return ; +} diff --git a/apps/developer-hub/src/components/Core/architecture-tabs.tsx b/apps/developer-hub/src/components/Core/architecture-tabs.tsx new file mode 100644 index 0000000000..fdd6fa45ee --- /dev/null +++ b/apps/developer-hub/src/components/Core/architecture-tabs.tsx @@ -0,0 +1,193 @@ +"use client"; + +import { ArrowRight as ArrowRightIcon } from "@phosphor-icons/react/dist/ssr"; +import { Button } from "@pythnetwork/component-library/Button"; +import { TabList } from "@pythnetwork/component-library/TabList"; +import { Tabs as UnstyledTabs } from "@pythnetwork/component-library/unstyled/Tabs"; +import { useState } from "react"; + +type TabId = "pull" | "pusher" | "historical"; + +export function ArchitectureTabs() { + const [activeTab, setActiveTab] = useState("pull"); + + function renderDiagram() { + if (activeTab === "historical") { + return ( +
+
+
📊
+
+ Historical Data +
+
+
+ ); + } + + const nodes = + activeTab === "pull" + ? ["Publishers", "Pythnet", "User", "Your Contract"] + : ["Publishers", "Pythnet", "Price Pusher", "Your Contract"]; + + return ( +
+ + {nodes.map((label, i) => { + const x = 80 + i * 240; + return ( + + + + {label} + + + ); + })} + {[0, 1, 2].map((i) => { + const x1 = 80 + i * 240 + 70; + const x2 = 80 + (i + 1) * 240 - 70; + const points = `${String(x2 - 10)},63 ${String(x2 - 10)},73 ${String(x2)},68`; + return ( + + + + + ); + })} + +
+ ); + } + + function renderContent() { + if (activeTab === "pull") + return ( +
+

+ Publishers stream signed updates to Pythnet roughly every 400 ms. + Your app pulls and verifies prices on demand, then your contract + updates via updatePriceFeeds. +

+ +
+ ); + + if (activeTab === "pusher") + return ( +
+

+ Automate on-chain updates using a Price Pusher. It listens to + Pythnet and pushes fresh prices to your contracts on your chosen + schedule and conditions. +

+ +
+ ); + + if (activeTab === "historical") + return ( +
+

+ Explore cryptographically verifiable historical prices for auditing, + analytics, and backtesting. +

+ +
+ ); + + return null; + } + + const items = [ + { + id: "pull", + href: "#pull", + children: "Pull", + onPress: () => { + setActiveTab("pull"); + }, + }, + { + id: "pusher", + href: "#pusher", + children: "Price Pusher", + onPress: () => { + setActiveTab("pusher"); + }, + }, + { + id: "historical", + href: "#historical", + children: "Historical", + onPress: () => { + setActiveTab("historical"); + }, + }, + ]; + + return ( +
+ + + + +
+
+ {renderDiagram()} +
+
{renderContent()}
+
+
+ ); +} diff --git a/apps/developer-hub/src/components/Pages/CoreLandingPage/index.tsx b/apps/developer-hub/src/components/Pages/CoreLandingPage/index.tsx new file mode 100644 index 0000000000..f185300317 --- /dev/null +++ b/apps/developer-hub/src/components/Pages/CoreLandingPage/index.tsx @@ -0,0 +1,159 @@ +"use client"; + +import { ArrowRight as ArrowRightIcon } from "@phosphor-icons/react/dist/ssr"; +import { Button } from "@pythnetwork/component-library/Button"; + +import { ArchitectureTabs } from "../../Core/architecture-tabs"; + +export function CoreLandingPage() { + return ( +
+
+
+
+

+ Real-Time Market Data, On-Chain +

+

+ Pyth Core delivers sub-second, signed prices across 100+ + blockchains. Fetch live data, automate updates using Price Pusher, + and parse historical prices—all from one oracle network. +

+ +
+ + +
+
+
+
+ +
+
+

What is Pyth Core?

+

+ Pyth Core provides high-frequency, cryptographically signed price + feeds that you can verify on-chain. Publishers stream updates to + Pythnet roughly every 400 ms. Your dApp pulls and verifies prices + whenever you need them. +

+
+
+ +
+
+

+ Integration Styles +

+
+
+

+ Pull Oracle +

+

+ The default approach: your dApp fetches and verifies prices + on-demand whenever needed. +

+ +
+
+

+ Sponsored Updates +

+

+ Automate price updates using a Price Pusher for push-like + functionality with your own gas sponsorship. +

+ +
+
+
+
+ +
+
+

+ How it works +

+ +
+
+ +
+
+

+ Why Pyth Core +

+
+
+

+ Sub-second Data +

+

+ Get signed prices refreshed every ~400 ms. +

+
+
+

+ Verifiable +

+

+ On-chain signature verification for trustless data. +

+
+
+

+ Flexible Integration +

+

+ Pull on demand or automate with a Price Pusher. +

+
+
+

+ Historical Archive +

+

+ Audit and backtest with cryptographically secure history. +

+
+
+
+
+
+ ); +}