Merge pull request #3046 from pyth-network/feat/dev-hub

alexcambose · web-flow · commit fa234c7a1ab2 · 2025-09-12T18:37:27.000+01:00
fix(dev-hub): info boxes
diff --git a/apps/developer-hub/content/docs/entropy/chainlist.mdx b/apps/developer-hub/content/docs/entropy/chainlist.mdx
@@ -9,8 +9,10 @@ import { EntropyTable } from "../../../src/components/EntropyTable";
 ## Mainnets
 
 <InfoBox variant="warning">
-  The fees for mainnet are dynamically set. Always use the on-chain method
-  `entropy.getFeeV2()` to get the current fee.
+  <div>
+    The fees for mainnet are dynamically set. Always use the on-chain method
+    `entropy.getFeeV2()` to get the current fee.
+  </div>
 </InfoBox>
 
 The following tables shows the total fees payable when using the **default provider**.
@@ -31,8 +33,10 @@ Entropy callbacks the consumer as part of this transaction.
 ## Testnets
 
 <InfoBox variant="info">
-  The fees for testnets kept deliberately low and different from the mainnet
-  fees.
+  <div>
+    The fees for testnets kept deliberately low and different from the mainnet
+    fees.
+  </div>
 </InfoBox>
 
 The Entropy contract is deployed on the following testnet chains:
diff --git a/apps/developer-hub/content/docs/pyth-core/api-instances-and-providers/hermes.mdx b/apps/developer-hub/content/docs/pyth-core/api-instances-and-providers/hermes.mdx
@@ -24,9 +24,9 @@ Network:
 URL: https://hermes.pyth.network
 
 <InfoBox variant="warning">
-For developers building on **Aptos testnet**, **Sui testnet** or **Near testnet**, please use the Hermes Beta endpoint:
+<div>For developers building on **Aptos testnet**, **Sui testnet** or **Near testnet**, please use the Hermes Beta endpoint:</div>
 
-URL: https://hermes-beta.pyth.network
+<div>URL: https://hermes-beta.pyth.network</div>
 
 </InfoBox>
 
diff --git a/apps/developer-hub/content/docs/pyth-core/contract-addresses/pythnet.mdx b/apps/developer-hub/content/docs/pyth-core/contract-addresses/pythnet.mdx
@@ -11,12 +11,15 @@ index: false
 # Price Feed Program Addresses on Pythnet
 
 <InfoBox variant="warning">
-  **Important:** The addresses on this page are for the Pythnet network itself,
-  which is used to construct and deliver Pyth prices to other blockchains. If
-  you are building an application on EVM, Solana, SVM, or another chain, you
-  should use the Pyth program deployed on your target chain instead. Please
-  refer to the [Contract Addresses](/price-feeds/contract-addresses) page and
-  select your specific blockchain environment.
+  <div>
+    **Important:** The addresses on this page are for the Pythnet network
+    itself, which is used to construct and deliver Pyth prices to other
+    blockchains. If you are building an application on EVM, Solana, SVM, or
+    another chain, you should use the Pyth program deployed on your target chain
+    instead. Please refer to the [Contract
+    Addresses](/price-feeds/contract-addresses) page and select your specific
+    blockchain environment.
+  </div>
 </InfoBox>
 
 The following table contains the addresses of the programs deployed on Pythnet that operate together to construct Pyth prices and deliver them to other blockchains:
diff --git a/apps/developer-hub/content/docs/pyth-core/create-your-first-pyth-app.mdx b/apps/developer-hub/content/docs/pyth-core/create-your-first-pyth-app.mdx
@@ -14,9 +14,11 @@ This tutorial walks through creating a complete application that uses Pyth Price
 The application includes a smart contract and an off-chain code invoking the contract.
 
 <InfoBox variant="info">
-  The tutorial is an in-depth walkthrough of contract development; more
-  experienced developers may want to refer to [Use Real-time Price
-  Data](./use-real-time-data) for a more concise version.
+  <div>
+    The tutorial is an in-depth walkthrough of contract development; more
+    experienced developers may want to refer to [Use Real-time Price
+    Data](./use-real-time-data) for a more concise version.
+  </div>
 </InfoBox>
 
 Please choose your environment to get started:
diff --git a/apps/developer-hub/content/docs/pyth-core/create-your-first-pyth-app/evm/part-2.mdx b/apps/developer-hub/content/docs/pyth-core/create-your-first-pyth-app/evm/part-2.mdx
@@ -19,8 +19,10 @@ This part of the tutorial will conver the following:
 - Update and fetch the price from the contract using [hermes-client](https://github.com/pyth-network/pyth-crosschain/tree/main/apps/hermes/client/js).
 
 <InfoBox variant="info">
-  This tutorial is continuation of the [Part 1: Create a Contract](./part-1). If
-  you haven't completed that part yet, please do so before continuing.
+  <div>
+    This tutorial is continuation of the [Part 1: Create a Contract](./part-1).
+    If you haven't completed that part yet, please do so before continuing.
+  </div>
 </InfoBox>
 
 ## Deploy the contract
diff --git a/apps/developer-hub/content/docs/pyth-core/current-fees.mdx b/apps/developer-hub/content/docs/pyth-core/current-fees.mdx
@@ -13,9 +13,11 @@ The following tables shows the total fees payable when updating a price feed.
 Please note the fees shown below is the amount paid in `msg.value` per price feed update.
 
 <InfoBox variant="info">
-  **Note**: The default fee of all chains **not** mentioned below is **1(one)**
-  unit of the smallest denomination of the blockchain's native token (e.g., **1
-  wei on Ethereum**).
+  <div>
+    **Note**: The default fee of all chains **not** mentioned below is
+    **1(one)** unit of the smallest denomination of the blockchain's native
+    token (e.g., **1 wei on Ethereum**).
+  </div>
 </InfoBox>
 
 | **Network** | **Fees**         |
diff --git a/apps/developer-hub/content/docs/pyth-core/fetch-price-updates.mdx b/apps/developer-hub/content/docs/pyth-core/fetch-price-updates.mdx
@@ -21,10 +21,12 @@ provides three different ways to fetch price updates:
 1. [SDK](#sdk)
 
 <InfoBox variant="info">
-  Fetching a price from Hermes requires a price feed ID. This ID serves as a
-  unique identifier for each price feed (e.g., BTC/USD). The complete list of
-  Pyth price feed IDs is available at
-  https://pyth.network/developers/price-feed-ids
+  <div>
+    Fetching a price from Hermes requires a price feed ID. This ID serves as a
+    unique identifier for each price feed (e.g., BTC/USD). The complete list of
+    Pyth price feed IDs is available at
+    https://pyth.network/developers/price-feed-ids
+  </div>
 </InfoBox>
 
 ## REST API
diff --git a/apps/developer-hub/content/docs/pyth-core/pythnet-reference/schedule-format.mdx b/apps/developer-hub/content/docs/pyth-core/pythnet-reference/schedule-format.mdx
@@ -32,7 +32,7 @@ If `weekly_schedule` is also undefined, pyth-agent will default to 24/7 publishi
 - `Timezone` - A human-readable tz database TZ identifier of the market’s local timezone, such as `America/New_York`.
   **Full list of identifiers can be found [here](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)**.
   <InfoBox variant="info">
-    Daylight-saving time is automatically handled by the pyth-agent.
+    <div>Daylight-saving time is automatically handled by the pyth-agent.</div>
   </InfoBox>
 - `WeeklySchedule` - A list of seven comma-separated `DaySchedule` entries that define the recurring weekly schedule of a product’s market hours.
   Each `DaySchedule` entry corresponds to a day of the week, starting from Monday.
@@ -71,7 +71,7 @@ If `weekly_schedule` is also undefined, pyth-agent will default to 24/7 publishi
 ## Weekly Schedule Format (Deprecated)
 
 <InfoBox variant="warning">
-  This field is deprecated in favor of `schedule`.
+  <div>This field is deprecated in favor of `schedule`.</div>
 </InfoBox>
 
 This document outlines the rules for specifying contents of a new Pyth product metadata field - `weekly_schedule` . The field specifies the recurring weekly schedule of a product’s market hours. It serves as a reference for `pyth-agent` to stop publishing outside the hours specified in the schedule. Notable use cases include:
diff --git a/apps/developer-hub/content/docs/pyth-core/sponsored-feeds.mdx b/apps/developer-hub/content/docs/pyth-core/sponsored-feeds.mdx
@@ -23,11 +23,13 @@ The sponsored feeds can vary by network. Please see the relevant section below f
 - [Movement](sponsored-feeds/movement)
 
 <InfoBox variant="warning">
-  DISCLAIMER: While the Pyth Data Association strives to deliver timely updates,
-  these sponsored feeds may occasionally experience delays in updates caused by
-  chain halts, gas estimations and other issues. Applications are advised to run
-  their own scheduler. Find out how you can run your own scheduler
-  [here](/price-feeds/schedule-price-updates/using-scheduler).
+  <div>
+    DISCLAIMER: While the Pyth Data Association strives to deliver timely
+    updates, these sponsored feeds may occasionally experience delays in updates
+    caused by chain halts, gas estimations and other issues. Applications are
+    advised to run their own scheduler. Find out how you can run your own
+    scheduler [here](/price-feeds/schedule-price-updates/using-scheduler).
+  </div>
 </InfoBox>
 
 If you would like to see additional feeds on this list, please fill in this [form](https://tally.so/r/nGz2jj) to signal your interest.
diff --git a/apps/developer-hub/content/docs/pyth-core/use-real-time-data/aptos.mdx b/apps/developer-hub/content/docs/pyth-core/use-real-time-data/aptos.mdx
@@ -63,11 +63,14 @@ module example::example {
 ```
 
 <InfoBox variant="info">
-  The `pyth_price_update` argument contains verified prices from Pyth. Calling
-  `pyth::update_price_feeds` with this value updates the on-chain Pyth price and
-  ensures your application has recent price data. The pyth_price_update can be
-  fetched from Hermes; Consult [Fetch Price Updates](../fetch-price-updates) for
-  more information on how to fetch the `pyth_price_update`.
+  <div>
+    The `pyth_price_update` argument contains verified prices from Pyth. Calling
+    `pyth::update_price_feeds` with this value updates the on-chain Pyth price
+    and ensures your application has recent price data. The pyth_price_update
+    can be fetched from Hermes; Consult [Fetch Price
+    Updates](../fetch-price-updates) for more information on how to fetch the
+    `pyth_price_update`.
+  </div>
 </InfoBox>
 
 The code snippet above does the following things:
diff --git a/apps/developer-hub/content/docs/pyth-core/use-real-time-data/fuel.mdx b/apps/developer-hub/content/docs/pyth-core/use-real-time-data/fuel.mdx
@@ -90,9 +90,11 @@ Calling `pyth_contract.update_price_feeds` with this value updates the on-chain
 The `update_data` can be fetched from Hermes; Consult [Fetch Price Updates](https://docs.pyth.network/price-feeds/fetch-price-updates) for more information on how to fetch the `update_data`.
 
 <InfoBox variant="info">
-  Regarding the Pyth contract on Fuel, the caller must pay the fee in the base
-  asset for functions like `update_price_feeds`. The fee is currently set to the
-  minimum possible value (1 wei).
+  <div>
+    Regarding the Pyth contract on Fuel, the caller must pay the fee in the base
+    asset for functions like `update_price_feeds`. The fee is currently set to
+    the minimum possible value (1 wei).
+  </div>
 </InfoBox>
 
 The code snippet above does the following things:
diff --git a/apps/developer-hub/content/docs/pyth-core/use-real-time-data/iota.mdx b/apps/developer-hub/content/docs/pyth-core/use-real-time-data/iota.mdx
@@ -169,17 +169,42 @@ By calling the `updatePriceFeeds` function, the `IotaPythClient` adds the necess
 
 <InfoBox variant="warning">
 
-Your IOTA Move module **should NOT** have a hard-coded call to `pyth::update_single_price_feed.` In other words, a contract should **never call** the IOTA Pyth `pyth::update_single_price_feed` entry point. Instead, it should be called directly from client code (e.g., Typescript or Rust).
-
-When IOTA contracts are [upgraded](https://docs.iota.org/developer/iota-101/move-overview/package-upgrades/introduction), the address changes, which makes the old address no longer valid. If your module has a hard-coded call to `pyth::update_single_price_feed` living at a fixed call-site, it may eventually get bricked due to how Pyth upgrades are implemented. (Pyth only allow users to interact with the most recent package version for security reasons).
-
-Therefore, you should build a [IOTA programmable transaction](https://docs.iota.org/developer/iota-101/transactions/ptb/programmable-transaction-blocks-overview) that first updates the price by calling `pyth::update_single_price_feed` at the latest call-site from the client-side and then call a function in your contract that invokes `pyth::get_price` on the `PriceInfoObject` to get the recently updated price.
-You can use `IOTAPythClient` to build such transactions and handle all the complexity of updating the price feeds.
-
-Consult [Fetch Price Updates](../fetch-price-updates) for more information on how to fetch the `pyth_price_update`.
+<div>
+  Your IOTA Move module **should NOT** have a hard-coded call to
+  `pyth::update_single_price_feed.` In other words, a contract should **never
+  call** the IOTA Pyth `pyth::update_single_price_feed` entry point. Instead, it
+  should be called directly from client code (e.g., Typescript or Rust).
+</div>
+
+<div>
+  When IOTA contracts are
+  [upgraded](https://docs.iota.org/developer/iota-101/move-overview/package-upgrades/introduction),
+  the address changes, which makes the old address no longer valid. If your
+  module has a hard-coded call to `pyth::update_single_price_feed` living at a
+  fixed call-site, it may eventually get bricked due to how Pyth upgrades are
+  implemented. (Pyth only allow users to interact with the most recent package
+  version for security reasons).
+</div>
+
+<div>
+  Therefore, you should build a [IOTA programmable
+  transaction](https://docs.iota.org/developer/iota-101/transactions/ptb/programmable-transaction-blocks-overview)
+  that first updates the price by calling `pyth::update_single_price_feed` at
+  the latest call-site from the client-side and then call a function in your
+  contract that invokes `pyth::get_price` on the `PriceInfoObject` to get the
+  recently updated price.
+</div>
+<div>
+  You can use `IOTAPythClient` to build such transactions and handle all the
+  complexity of updating the price feeds.
+</div>
+
+<div>
+  Consult [Fetch Price Updates](../fetch-price-updates) for more information on
+  how to fetch the `pyth_price_update`.
+</div>
 
 </InfoBox>
-
 ## Additional Resources
 
 You may find these additional resources helpful for developing your IOTA application.
diff --git a/apps/developer-hub/content/docs/pyth-core/use-real-time-data/off-chain.mdx b/apps/developer-hub/content/docs/pyth-core/use-real-time-data/off-chain.mdx
@@ -13,9 +13,8 @@ index: false
 This guide explains how to fetch the latest prices and subscribe to real-time price updates in off-chain applications.
 
 <InfoBox variant="info">
-  [`price-service-sdk`](https://github.com/pyth-network/pyth-crosschain/tree/main/price_service/client/js) was is deprecated and replaced by the [`hermes-client`](https://github.com/pyth-network/pyth-crosschain/tree/main/apps/hermes/client/js).
-  It can be used for fetching prices for off-chain applications as well as fetching price updates.
-
-Please refer to the [fetch-price-updates](../fetch-price-updates) guide for the details.
+  <div>[`price-service-sdk`](https://github.com/pyth-network/pyth-crosschain/tree/main/price_service/client/js) was is deprecated and replaced by the [`hermes-client`](https://github.com/pyth-network/pyth-crosschain/tree/main/apps/hermes/client/js).
+  It can be used for fetching prices for off-chain applications as well as fetching price updates.</div>
 
+  <div>Please refer to the [fetch-price-updates](../fetch-price-updates) guide for the details.</div>
 </InfoBox>
diff --git a/apps/developer-hub/content/docs/pyth-core/use-real-time-data/solana.mdx b/apps/developer-hub/content/docs/pyth-core/use-real-time-data/solana.mdx
@@ -27,8 +27,8 @@ pyth-solana-receiver-sdk ="x.y.z" # get the latest version from https://crates.i
 ```
 
 <InfoBox variant="warning">
-At the time of writing, [pyth-solana-receiver-sdk](https://github.com/pyth-network/pyth-crosschain/tree/main/target_chains/solana/pyth_solana_receiver_sdk) is compatible with Anchor `v0.28.0{:js}`, `v0.29.0{:js}`, and `v0.30.1{:js}`.
-If you are on `v0.30.0{:js}` or any other version, please move to `v0.30.1{:js}`.
+<div>At the time of writing, [pyth-solana-receiver-sdk](https://github.com/pyth-network/pyth-crosschain/tree/main/target_chains/solana/pyth_solana_receiver_sdk) is compatible with Anchor `v0.28.0{:js}`, `v0.29.0{:js}`, and `v0.30.1{:js}`.
+If you are on `v0.30.0{:js}` or any other version, please move to `v0.30.1{:js}`.</div>
 </InfoBox>
 
 ### Typescript SDK
@@ -60,9 +60,9 @@ pub struct Sample<'info> {
 ```
 
 <InfoBox variant="info">
-Users must ensure that the account passed to their instruction is owned by the Pyth Pull Oracle program.
+<div>Users must ensure that the account passed to their instruction is owned by the Pyth Pull Oracle program.
 Using Anchor with the `Account<'info, PriceUpdateV2>` type will automatically perform this check.
-However, it is the developer's responsibility to perform this check if they are not using Anchor.
+However, it is the developer's responsibility to perform this check if they are not using Anchor.</div>
 </InfoBox>
 
 Next, update the instruction logic to read the price from the price update account:
@@ -85,14 +85,16 @@ pub fn sample(ctx: Context<Sample>) -> Result<()> {
 ```
 
 <InfoBox variant="warning">
-  Users must validate the price update for the appropriate **price
+<div>Users must validate the price update for the appropriate **price
   feed** and **timestamp**. `PriceUpdateV2` guarantees that the account contains
   a verified price for _some_ price feed at _some_ point in time. There are
   various methods on this struct (such as `get_price_no_older_than`) that users
-  can use to implement the necessary checks.
+  can use to implement the necessary checks.</div>
 
-If you choose the price feed account integration (see below), you
-can use an account address check to validate the price feed ID.
+<div>
+  If you choose the price feed account integration (see below), you can use an
+  account address check to validate the price feed ID.
+</div>
 
 </InfoBox>
 
@@ -136,18 +138,17 @@ const solUsdPriceFeedAccount = pythSolanaReceiver
 ```
 
 <InfoBox variant="info" icon="ℹ️">
-  The Price Feed Accounts integration assumes that an off-chain process is
+<div>The Price Feed Accounts integration assumes that an off-chain process is
   continuously updating each price feed. The Pyth Data Association sponsors
   price updates for a subset of commonly used price feeds on shard 0. Please see
   [Sponsored Feeds](/price-feeds/sponsored-feeds) for a list of sponsored feeds
-  and their account addresses.
+  and their account addresses.</div>
 
-Additionally, updating a price feed is a
+<div>Additionally, updating a price feed is a
 permissionless operation, and anyone can run this process. Please see [Using
 Scheduler](/price-feeds/schedule-price-updates/using-scheduler) for more
 information. Running the scheduler can help with reliability and update
-feed/shard pairs that are not part of the default schedule.
-
+feed/shard pairs that are not part of the default schedule.</div>
 </InfoBox>
 
 ### Price Update Accounts
@@ -235,14 +236,16 @@ await pythSolanaReceiver.provider.sendAll(
 The [SDK documentation](https://github.com/pyth-network/pyth-crosschain/tree/main/target_chains/solana/sdk/js/pyth_solana_receiver) contains more information about interacting with the Pyth solana receiver contract, including working examples.
 
 <InfoBox variant="info">
-  Posting and verifying price updates currently requires multiple transactions
-  on Solana. If your usecase requires a single transaction, you can reduce the
-  verification level of the posted price updates by replacing
-  `addPostPriceUpdates` by `addPostPartiallyVerifiedPriceUpdates` in the
-  transaction builder. Please read the
-  [VerificationLevel](https://github.com/pyth-network/pyth-crosschain/blob/main/target_chains/solana/pyth_solana_receiver_sdk/src/price_update.rs#L20)
-  docs to understand more about the data integrity tradeoffs when using
-  partially verified price updates.
+  <div>
+    Posting and verifying price updates currently requires multiple transactions
+    on Solana. If your usecase requires a single transaction, you can reduce the
+    verification level of the posted price updates by replacing
+    `addPostPriceUpdates` by `addPostPartiallyVerifiedPriceUpdates` in the
+    transaction builder. Please read the
+    [VerificationLevel](https://github.com/pyth-network/pyth-crosschain/blob/main/target_chains/solana/pyth_solana_receiver_sdk/src/price_update.rs#L20)
+    docs to understand more about the data integrity tradeoffs when using
+    partially verified price updates.
+  </div>
 </InfoBox>
 
 ## Time-Weighted Average Price (TWAP)
diff --git a/apps/developer-hub/content/docs/pyth-core/use-real-time-data/starknet.mdx b/apps/developer-hub/content/docs/pyth-core/use-real-time-data/starknet.mdx
diff --git a/apps/developer-hub/content/docs/pyth-core/use-real-time-data/sui.mdx b/apps/developer-hub/content/docs/pyth-core/use-real-time-data/sui.mdx
diff --git a/apps/developer-hub/src/components/EntropyTable/index.tsx b/apps/developer-hub/src/components/EntropyTable/index.tsx
diff --git a/packages/component-library/src/InfoBox/index.stories.tsx b/packages/component-library/src/InfoBox/index.stories.tsx
