From 71b0ea90da3f0f1b695ee7b293b8c9751afb0cfd Mon Sep 17 00:00:00 2001 From: nidhi-singh02 Date: Wed, 10 Sep 2025 16:10:12 +0530 Subject: [PATCH 1/3] structure for the home page --- .../Pages/Homepage/index.module.scss | 152 +++++++++++++++++- .../src/components/Pages/Homepage/index.tsx | 107 +++++++++++- 2 files changed, 256 insertions(+), 3 deletions(-) diff --git a/apps/developer-hub/src/components/Pages/Homepage/index.module.scss b/apps/developer-hub/src/components/Pages/Homepage/index.module.scss index b5cbefd482..2ddd5f4d48 100644 --- a/apps/developer-hub/src/components/Pages/Homepage/index.module.scss +++ b/apps/developer-hub/src/components/Pages/Homepage/index.module.scss @@ -1,5 +1,155 @@ @use "@pythnetwork/component-library/theme"; -.landing { +.pageContainer { + display: flex; + min-height: calc(100vh - theme.$header-height); @include theme.max-width; } + +// Left Sidebar Navigation +.sidebar { + width: 280px; + flex-shrink: 0; + border-right: 1px solid theme.color("border"); + background: theme.color("background", "primary"); + padding: theme.spacing(6) 0; + position: sticky; + top: theme.$header-height; + height: calc(100vh - theme.$header-height); + overflow-y: auto; + + @media (max-width: 1024px) { + display: none; + } +} + +.sidebarContent { + padding: 0 theme.spacing(6); +} + +.navSection { + margin-bottom: theme.spacing(8); + + &:last-child { + margin-bottom: 0; + } +} + +.introTitle { + background: theme.color("states", "data", "normal"); + color: theme.color("background", "primary"); + @include theme.text("sm", "semibold"); + padding: theme.spacing(3) theme.spacing(4); + border-radius: theme.spacing(2); + margin-bottom: theme.spacing(6); +} + +.sectionTitle { + @include theme.text("lg", "semibold"); + color: theme.color("heading"); + margin-bottom: theme.spacing(4); +} + +.navList { + list-style: none; + padding: 0; + margin: 0; +} + +.navItem { + display: flex; + align-items: center; + justify-content: space-between; + padding: theme.spacing(3) 0; + text-decoration: none; + @include theme.text("base", "normal"); + color: theme.color("muted"); + border-bottom: 1px solid theme.color("background", "secondary"); + transition: all 0.2s ease; + + &:hover { + color: theme.color("heading"); + padding-left: theme.spacing(2); + } + + &:last-child { + border-bottom: none; + } + + span:first-child { + flex: 1; + } +} + +.navIcon { + opacity: 0.6; + transition: all 0.2s ease; + + .navItem:hover & { + opacity: 1; + transform: translateX(theme.spacing(1)); + } +} + +// Main Content Area +.mainContent { + flex: 1; + padding: theme.spacing(6) theme.spacing(8); + max-width: calc(100% - 280px); + + @media (max-width: 1024px) { + max-width: 100%; + padding: theme.spacing(6) theme.spacing(4); + } +} + +.contentWrapper { + max-width: 800px; + margin: 0 auto; +} + +.title { + @include theme.text("4xl", "bold"); + color: theme.color("heading"); + margin-bottom: theme.spacing(6); + margin-top: 0; +} + +.description { + @include theme.text("lg", "normal"); + color: theme.color("muted"); + line-height: 1.6; + margin-bottom: theme.spacing(8); +} + +.quickStart { + margin-top: theme.spacing(8); + + h2 { + @include theme.text("2xl", "semibold"); + color: theme.color("heading"); + margin-bottom: theme.spacing(4); + } + + p { + @include theme.text("base", "normal"); + color: theme.color("muted"); + margin-bottom: theme.spacing(6); + } +} + +.quickStartList { + list-style-type: disc; + padding-left: theme.spacing(6); + + li { + @include theme.text("base", "normal"); + color: theme.color("muted"); + margin-bottom: theme.spacing(3); + line-height: 1.6; + + strong { + color: theme.color("heading"); + } + } +} diff --git a/apps/developer-hub/src/components/Pages/Homepage/index.tsx b/apps/developer-hub/src/components/Pages/Homepage/index.tsx index 03ac745e3a..91cf48cb7c 100644 --- a/apps/developer-hub/src/components/Pages/Homepage/index.tsx +++ b/apps/developer-hub/src/components/Pages/Homepage/index.tsx @@ -1,9 +1,112 @@ +import { + ArrowRight, + CaretRight, +} from "@phosphor-icons/react/dist/ssr"; +import Link from "next/link"; + import styles from "./index.module.scss"; export const Homepage = () => { return ( -
-

Homepage Landing Page

+
+ {/* Left Sidebar Navigation */} + + + {/* Main Content Area */} +
+
+

Welcome to Pyth Network

+

+ Pyth Network is the leading oracle protocol that connects the owners of market data to applications on multiple blockchains. + 120+ first-party publishers are onboarded to the Pyth Network, including some of the biggest exchanges and market making firms in the world. + Over 250 protocols trust Pyth to secure their applications. +

+ +
+

Quick Start

+

Get started with Pyth Network by exploring our comprehensive documentation:

+
    +
  • Price Feeds Getting Started - Integrate real-time price data
    • +
  • Lazer Documentation - High-performance price feeds
    • +
  • Express Relay Integration - Better orderflow mechanism to eliminate MEV
    • +
  • Entropy Implementation - Secure randomness generation
    • +
+
+
+
); }; From 11b9f6ab9518bdf9850884452b3828decbcd34f9 Mon Sep 17 00:00:00 2001 From: nidhi-singh02 Date: Wed, 10 Sep 2025 16:24:30 +0530 Subject: [PATCH 2/3] content same as the home page --- .../Pages/Homepage/index.module.scss | 216 +++++++++++++++++- .../src/components/Pages/Homepage/index.tsx | 214 ++++++++++++++++- 2 files changed, 411 insertions(+), 19 deletions(-) diff --git a/apps/developer-hub/src/components/Pages/Homepage/index.module.scss b/apps/developer-hub/src/components/Pages/Homepage/index.module.scss index 2ddd5f4d48..3c76da6277 100644 --- a/apps/developer-hub/src/components/Pages/Homepage/index.module.scss +++ b/apps/developer-hub/src/components/Pages/Homepage/index.module.scss @@ -122,23 +122,223 @@ margin-bottom: theme.spacing(8); } -.quickStart { +// Links +.link { + color: theme.color("states", "data", "normal"); + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} + +// Section styling +.sectionHeading { + @include theme.text("2xl", "semibold"); + color: theme.color("heading"); + margin-bottom: theme.spacing(6); + margin-top: theme.spacing(12); + + &:first-of-type { + margin-top: theme.spacing(8); + } +} + +.sectionDescription { + @include theme.text("base", "normal"); + color: theme.color("muted"); + margin-bottom: theme.spacing(6); +} + +// Products Section +.productsSection { + margin-bottom: theme.spacing(12); +} + +.productGrid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: theme.spacing(6); margin-top: theme.spacing(8); +} - h2 { - @include theme.text("2xl", "semibold"); - color: theme.color("heading"); - margin-bottom: theme.spacing(4); +.productCard { + background: theme.color("background", "primary"); + border: 1px solid theme.color("border"); + border-radius: theme.spacing(3); + padding: theme.spacing(6); + display: flex; + flex-direction: column; + height: 100%; + transition: all 0.2s ease; + + &:hover { + border-color: theme.color("states", "data", "normal"); + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); + } +} + +.productHeader { + display: flex; + align-items: center; + gap: theme.spacing(3); + margin-bottom: theme.spacing(4); +} + +.productBadge { + @include theme.text("xs", "semibold"); + padding: theme.spacing(1.5) theme.spacing(3); + border-radius: theme.spacing(3); + color: white; + white-space: nowrap; + display: inline-flex; + align-items: center; + font-size: 11px; + line-height: 1.2; + + &.coreBadge, + &.randomnessBadge { + background: theme.color("states", "data", "normal"); + } + + &.lazerBadge, + &.mevBadge { + background: #8b5cf6; // Purple + } +} + +.productIcon { + color: theme.color("muted"); +} + +.productTitle { + @include theme.text("lg", "semibold"); + color: theme.color("heading"); + margin-bottom: theme.spacing(3); +} + +.productDescription { + @include theme.text("sm", "normal"); + color: theme.color("muted"); + margin-bottom: theme.spacing(6); + flex-grow: 1; +} + +.featureList { + display: flex; + flex-direction: column; + gap: theme.spacing(3); + margin-bottom: theme.spacing(6); +} + +.feature { + display: flex; + align-items: center; + gap: theme.spacing(3); + @include theme.text("sm", "normal"); + color: theme.color("muted"); + + svg { + color: theme.color("states", "data", "normal"); + flex-shrink: 0; } +} + +.productCta { + display: inline-flex; + align-items: center; + gap: theme.spacing(2); + padding: theme.spacing(3) theme.spacing(4); + background: theme.color("background", "secondary"); + border: 1px solid theme.color("border"); + border-radius: theme.spacing(2); + text-decoration: none; + @include theme.text("sm", "semibold"); + color: theme.color("heading"); + transition: all 0.2s ease; + margin-top: auto; + + &:hover { + background: theme.color("states", "data", "normal"); + color: white; + border-color: theme.color("states", "data", "normal"); + } +} - p { +// Quick Start Section +.quickStartSection { + margin-bottom: theme.spacing(12); +} + +.quickStartList { + list-style-type: disc; + padding-left: theme.spacing(6); + + li { @include theme.text("base", "normal"); color: theme.color("muted"); - margin-bottom: theme.spacing(6); + margin-bottom: theme.spacing(3); + line-height: 1.6; + + strong { + color: theme.color("heading"); + } } } -.quickStartList { +// Additional Resources Section +.additionalResourcesSection { + margin-bottom: theme.spacing(12); +} + +.resourceGrid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: theme.spacing(6); + margin-top: theme.spacing(8); +} + +.resourceCard { + background: theme.color("background", "secondary"); + border: 1px solid theme.color("border"); + border-radius: theme.spacing(3); + padding: theme.spacing(6); + transition: all 0.2s ease; + + &:hover { + border-color: theme.color("states", "data", "normal"); + } +} + +.resourceTitle { + @include theme.text("lg", "semibold"); + color: theme.color("heading"); + margin-bottom: theme.spacing(2); +} + +.resourceDescription { + @include theme.text("sm", "normal"); + color: theme.color("muted"); + margin-bottom: theme.spacing(4); +} + +.resourceLink { + @include theme.text("sm", "semibold"); + color: theme.color("states", "data", "normal"); + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} + +// Developer Resources Section +.developerResourcesSection { + margin-bottom: theme.spacing(8); +} + +.developerList { list-style-type: disc; padding-left: theme.spacing(6); diff --git a/apps/developer-hub/src/components/Pages/Homepage/index.tsx b/apps/developer-hub/src/components/Pages/Homepage/index.tsx index 91cf48cb7c..8a8ebd1696 100644 --- a/apps/developer-hub/src/components/Pages/Homepage/index.tsx +++ b/apps/developer-hub/src/components/Pages/Homepage/index.tsx @@ -1,6 +1,13 @@ import { ArrowRight, CaretRight, + ChartLine, + Lightning, + DiceSix, + Clock, + Globe, + Shield, + Code, } from "@phosphor-icons/react/dist/ssr"; import Link from "next/link"; @@ -90,19 +97,204 @@ export const Homepage = () => {

Welcome to Pyth Network

- Pyth Network is the leading oracle protocol that connects the owners of market data to applications on multiple blockchains. - 120+ first-party publishers are onboarded to the Pyth Network, including some of the biggest exchanges and market making firms in the world. - Over 250 protocols trust Pyth to secure their applications. + Pyth Network is the leading oracle protocol that connects the owners of market data to applications on multiple blockchains. 120+ first-party publishers are onboarded to the Pyth Network, including some of the biggest exchanges and market making firms in the world. Over 250 protocols trust Pyth to secure their applications.

- -
-

Quick Start

-

Get started with Pyth Network by exploring our comprehensive documentation:

+ + {/* Our Products */} +
+

Our Products

+ +
+
+
+
Core
+ +
+

Price Feeds

+

+ Real-time, high-fidelity market data for smart contracts with sub-second latency. +

+
+
+ + Real-time price feeds +
+
+ + 2000+ assets +
+
+ + 100+ blockchains +
+
+ + Explore Price Feeds + + +
+ +
+
+
Lazer
+ +
+

Lazer

+

+ High-performance, low-latency price feeds for institutional applications. +

+
+
+ + Ultra-low latency +
+
+ + Institutional grade +
+
+ + High-frequency data +
+
+ + Learn About Lazer + + +
+ +
+
+
MEV Protection
+ +
+

Express Relay

+

+ Eliminate MEV while gaining access to active searchers and liquidators. +

+
+
+ + MEV protection +
+
+ + Active searchers +
+
+ + Multi-chain support +
+
+ + Explore Express Relay + + +
+ +
+
+
Randomness
+ +
+

Entropy

+

+ Generate secure random numbers on the blockchain for your applications. +

+
+
+ + Cryptographically secure +
+
+ + Real-time generation +
+
+ + Multi-chain support +
+
+ + Learn About Entropy + + +
+
+
+ + {/* Quick Start */} +
+

Quick Start

+

+ Get started with Pyth Network by exploring our comprehensive documentation: +

    -
  • Price Feeds Getting Started - Integrate real-time price data
    • -
  • Lazer Documentation - High-performance price feeds
    • -
  • Express Relay Integration - Better orderflow mechanism to eliminate MEV
    • -
  • Entropy Implementation - Secure randomness generation
    • +
  • + Price Feeds Getting Started - Integrate real-time price data +
    • +
  • + Lazer Documentation - High-performance price feeds +
    • +
  • + Express Relay Integration - Better orderflow mechanism to eliminate MEV +
    • +
  • + Entropy Implementation - Secure randomness generation +
    • +
+
+ + {/* Additional Resources */} +
+

Additional Resources

+ +
+
+

PYTH Token

+

+ Learn about the Pyth governance token and its role in the network. +

+ + Learn More → + +
+ +
+

Oracle Integrity Staking

+

+ Understand how staking ensures data quality and network security. +

+ + Learn More → + +
+ +
+

Network Metrics

+

+ Track the network's adoption, growth, and performance metrics. +

+ + Learn More → + +
+
+
+ + {/* Developer Resources */} +
+

Developer Resources

+
    +
  • + Contract Addresses - Find deployment addresses across all supported chains +
    • +
  • + Whitepaper - Deep dive into Pyth Network's technical architecture +
    • +
  • + Security - Learn about Pyth's security model and best practices +
From 48a4741efb4d691721d01c793d246c3dbd4d679f Mon Sep 17 00:00:00 2001 From: nidhi-singh02 Date: Wed, 10 Sep 2025 16:55:31 +0530 Subject: [PATCH 3/3] test formating fix --- .../how-express-relay-works/index.mdx | 19 ++- .../Pages/Homepage/index.module.scss | 40 +++-- .../src/components/Pages/Homepage/index.tsx | 148 +++++++++++++++--- apps/entropy-debugger/next-env.d.ts | 1 + 4 files changed, 166 insertions(+), 42 deletions(-) diff --git a/apps/developer-hub/content/docs/express-relay/how-express-relay-works/index.mdx b/apps/developer-hub/content/docs/express-relay/how-express-relay-works/index.mdx index 1fdac60df9..101f148b73 100644 --- a/apps/developer-hub/content/docs/express-relay/how-express-relay-works/index.mdx +++ b/apps/developer-hub/content/docs/express-relay/how-express-relay-works/index.mdx @@ -51,12 +51,15 @@ The Express Relay contract collects payment from the Searchers and forwards a sh ## Key Components ### Off-chain Auction Server + The auction server receives bids from searchers and determines winners based on bid amounts and other criteria. It then submits winning transactions to the blockchain in the optimal order. ### On-chain Smart Contract + The Express Relay smart contract validates that transactions have won the auction and enforces payment collection. It also handles revenue distribution between protocols and other stakeholders. ### Permission System + Express Relay uses a permission system to ensure only auction winners can execute protected operations. This prevents frontrunning and ensures MEV capture. ## Benefits for Protocols @@ -82,7 +85,7 @@ Express Relay also provides advantages for searchers: Express Relay is suitable for any protocol with valuable, time-sensitive operations: - **Lending Protocols**: Liquidations of undercollateralized positions -- **Perpetual Protocols**: Liquidations and funding rate updates +- **Perpetual Protocols**: Liquidations and funding rate updates - **DEX Protocols**: Arbitrage opportunities and order book operations - **Derivatives Protocols**: Option exercises and settlement operations - **Cross-chain Protocols**: Bridge operations and relay transactions @@ -116,13 +119,13 @@ There are four types of participants in the Express Relay protocol: icon={} /> - } - /> +} +/> {
  • - + Oracle Integrity Staking (OIS) @@ -97,22 +100,47 @@ export const Homepage = () => {

    Welcome to Pyth Network

    - Pyth Network is the leading oracle protocol that connects the owners of market data to applications on multiple blockchains. 120+ first-party publishers are onboarded to the Pyth Network, including some of the biggest exchanges and market making firms in the world. Over 250 protocols trust Pyth to secure their applications. + Pyth Network is the leading oracle protocol that connects the owners + of market data to applications on multiple blockchains.{" "} + + 120+ first-party publishers + {" "} + are onboarded to the Pyth Network, including some of the biggest + exchanges and market making firms in the world.{" "} + + Over 250 protocols + {" "} + trust Pyth to secure their applications.

    {/* Our Products */}

    Our Products

    - +
    -
    Core
    +
    + Core +

    Price Feeds

    - Real-time, high-fidelity market data for smart contracts with sub-second latency. + Real-time, high-fidelity market data for smart contracts with + sub-second latency.

    @@ -136,12 +164,19 @@ export const Homepage = () => {
    -
    Lazer
    +
    + Lazer +

    Lazer

    - High-performance, low-latency price feeds for institutional applications. + High-performance, low-latency price feeds for institutional + applications.

    @@ -165,12 +200,17 @@ export const Homepage = () => {
    -
    MEV Protection
    +
    + MEV Protection +

    Express Relay

    - Eliminate MEV while gaining access to active searchers and liquidators. + Eliminate MEV while gaining access to active searchers and + liquidators.

    @@ -194,12 +234,20 @@ export const Homepage = () => {
    -
    Randomness
    +
    + Randomness +

    Entropy

    - Generate secure random numbers on the blockchain for your applications. + Generate secure random numbers on the blockchain for your + applications.

    @@ -227,20 +275,44 @@ export const Homepage = () => {

    Quick Start

    - Get started with Pyth Network by exploring our comprehensive documentation: + Get started with Pyth Network by exploring our comprehensive + documentation:

    • - Price Feeds Getting Started - Integrate real-time price data + + + Price Feeds Getting Started + + {" "} + - Integrate real-time price data
    • - Lazer Documentation - High-performance price feeds + + + Lazer Documentation + + {" "} + - High-performance price feeds
    • - Express Relay Integration - Better orderflow mechanism to eliminate MEV + + + Express Relay Integration + + {" "} + - Better orderflow mechanism to eliminate MEV
    • - Entropy Implementation - Secure randomness generation + + + Entropy Implementation + + {" "} + - Secure randomness generation
    @@ -248,12 +320,13 @@ export const Homepage = () => { {/* Additional Resources */}

    Additional Resources

    - +

    PYTH Token

    - Learn about the Pyth governance token and its role in the network. + Learn about the Pyth governance token and its role in the + network.

    Learn More → @@ -261,11 +334,17 @@ export const Homepage = () => {
    -

    Oracle Integrity Staking

    +

    + Oracle Integrity Staking +

    - Understand how staking ensures data quality and network security. + Understand how staking ensures data quality and network + security.

    - + Learn More →
    @@ -273,7 +352,8 @@ export const Homepage = () => {

    Network Metrics

    - Track the network's adoption, growth, and performance metrics. + Track the network's adoption, growth, and performance + metrics.

    Learn More → @@ -287,13 +367,31 @@ export const Homepage = () => {

    Developer Resources

    • - Contract Addresses - Find deployment addresses across all supported chains + + + Contract Addresses + + {" "} + - Find deployment addresses across all supported chains
    • - Whitepaper - Deep dive into Pyth Network's technical architecture + + + Whitepaper + + {" "} + - Deep dive into Pyth Network's technical architecture
    • - Security - Learn about Pyth's security model and best practices + + + Security + + {" "} + - Learn about Pyth's security model and best practices
    diff --git a/apps/entropy-debugger/next-env.d.ts b/apps/entropy-debugger/next-env.d.ts index 1b3be0840f..830fb594ca 100644 --- a/apps/entropy-debugger/next-env.d.ts +++ b/apps/entropy-debugger/next-env.d.ts @@ -1,5 +1,6 @@ /// /// +/// // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.