fix: info boxes

alexcambose · alexcambose · commit a2127b462bd3 · 2025-09-12T17:40:43.000+01:00
diff --git a/apps/developer-hub/content/docs/entropy/chainlist.mdx b/apps/developer-hub/content/docs/entropy/chainlist.mdx
@@ -9,8 +9,8 @@ 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**.
@@ -29,10 +29,9 @@ The default provider fulfills the request by sending a transaction with a gas li
 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
@@ -10,6 +10,7 @@ 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
@@ -18,6 +19,7 @@ index: false
   refer to the [Contract Addresses](/price-feeds/contract-addresses) page and
   select your specific blockchain environment.
 </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
@@ -12,11 +12,10 @@ index: false
 
 This tutorial walks through creating a complete application that uses Pyth Price feeds.
 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
+  <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.
+  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,8 @@ 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
@@ -11,11 +11,10 @@ index: false
 
 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)**
+  <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**).
+  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,10 @@ 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
+  <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
+  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,11 @@ 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,
+  <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).
+  [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,11 @@ module example::example {
 ```
 
 <InfoBox variant="info">
-  The `pyth_price_update` argument contains verified prices from Pyth. Calling
+  <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`.
+  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,9 @@ 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
+  <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).
+  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
@@ -166,20 +166,18 @@ const result = await wallet.signAndExecuteTransaction(txBlock);
 ```
 
 By calling the `updatePriceFeeds` function, the `IotaPythClient` adds the necessary transactions to the transaction block to update the price feeds.
-
 <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).
+<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>
 
-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>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> 
 
-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.
+<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>
 
-Consult [Fetch Price Updates](../fetch-price-updates) for more information on how to fetch the `pyth_price_update`.
+<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
@@ -12,10 +12,11 @@ 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.
-
 </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,10 +27,11 @@ 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
 
 Pyth provides two Typescript packages, [@pythnetwork/hermes-client](https://github.com/pyth-network/pyth-crosschain/tree/main/apps/hermes/client/js) and [@pythnetwork/pyth-solana-receiver](https://github.com/pyth-network/pyth-crosschain/tree/main/target_chains/solana/sdk/js/pyth_solana_receiver), for fetching Pyth prices and submitting them to the blockchain respectively.
@@ -59,12 +60,14 @@ 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:
 
 ```rust copy
@@ -85,14 +88,14 @@ 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 +139,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 +237,14 @@ 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
+  <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.
+  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
@@ -116,14 +116,14 @@ Calling pyth.update_price_feeds with this value updates the on-chain Pyth price
 The pyth_price_update 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 pyth_price_update.
 
 <InfoBox variant="info">
-  Unlike Ethereum, there is no native token on Starknet. You cannot pass tokens
+  <div>Unlike Ethereum, there is no native token on Starknet. You cannot pass tokens
   implicitly when calling functions. Moreover, there is no concept of a
   designated payer account, unlike Solana. In Starknet, all token transfers must
   be performed explicitly by calling functions on the token's ERC20 contract.
   Regarding the Pyth contract on Starknet, the caller must approve the fee
   transfer before calling `update_price_feeds` or using similar methods. You can
   use **STRK** or **ETH** to pay the fee, but STRK is preferred. The fee is
-  currently set to the minimum possible value (1e-18 STRK, 1 WEI).
+  currently set to the minimum possible value (1e-18 STRK, 1 WEI).</div>
 </InfoBox>
 
 The code snippet above does the following things:
@@ -157,11 +157,10 @@ const currentPrices = await connection.getLatestPriceFeeds([priceId]);
 // Convert the price update to Starknet format.
 const pythUpdate = ByteBuffer.fromBase64(currentPrices[0].vaa);
 ```
-
 <InfoBox variant="info">
-  Price updates must be converted to `ByteBuffer` before being passed on to the
+<div>Price updates must be converted to `ByteBuffer` before being passed on to the
   Pyth contract on Starknet. Use the `ByteBuffer` type from
-  `@pythnetwork/pyth-starknet-js` package as shown above.
+  `@pythnetwork/pyth-starknet-js` package as shown above.</div>
 </InfoBox>
 
 ## Additional Resources
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/packages/component-library/src/InfoBox/index.stories.tsx b/packages/component-library/src/InfoBox/index.stories.tsx
