feat: remove Callout component and replace with InfoBox

aaronbassett · aaronbassett · commit d3bbb3286878 · 2025-05-30T18:23:53.000+02:00
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
@@ -23,12 +23,12 @@ Network:
 
 URL: https://hermes.pyth.network
 
-<Callout variant="info" icon="⚠️">
+<InfoBox variant="warning">
 For developers building on **Aptos testnet**, **Sui testnet** or **Near testnet**, please use the Hermes Beta endpoint:
 
 URL: https://hermes-beta.pyth.network
 
-</Callout>
+</InfoBox>
 
 For production deployments, developers integrating with Pyth Network are **strongly encouraged** to use Node Providers
 for maximum resilience and decentralization. Moreover, Hermes is designed to be self-hosted, so developers can run their own
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,14 +10,14 @@ index: false
 
 # Price Feed Program Addresses on Pythnet
 
-<Callout variant="warning" icon="⚠️">
+<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.
-</Callout>
+</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
@@ -13,11 +13,11 @@ 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.
 
-<Callout variant="info" icon="ℹ️">
+<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.
-</Callout>
+</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
@@ -18,10 +18,10 @@ This part of the tutorial will conver the following:
 - Interact with the contract from the command line.
 - Update and fetch the price from the contract using [hermes-client](https://github.com/pyth-network/pyth-crosschain/tree/main/apps/hermes/client/js).
 
-<Callout variant="info" icon="ℹ️">
+<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.
-</Callout>
+</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
@@ -12,11 +12,11 @@ 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.
 
-<Callout variant="info" icon="💡">
+<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**).
-</Callout>
+</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
@@ -20,12 +20,12 @@ provides three different ways to fetch price updates:
 1. [Streaming](#streaming)
 1. [SDK](#sdk)
 
-<Callout icon="ℹ️">
+<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
-</Callout>
+</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
@@ -31,9 +31,9 @@ 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)**.
-  <Callout variant="info">
+  <InfoBox variant="info">
     Daylight-saving time is automatically handled by the pyth-agent.
-  </Callout>
+  </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.
   None of the comma-separated values can be omitted.
@@ -70,9 +70,9 @@ If `weekly_schedule` is also undefined, pyth-agent will default to 24/7 publishi
 
 ## Weekly Schedule Format (Deprecated)
 
-<Callout variant="warning" icon="⚠️">
+<InfoBox variant="warning">
   This field is deprecated in favor of `schedule`.
-</Callout>
+</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
@@ -22,12 +22,12 @@ The sponsored feeds can vary by network. Please see the relevant section below f
 - [Sui](sponsored-feeds/sui)
 - [Movement](sponsored-feeds/movement)
 
-<Callout variant="info" icon="⚠️">
+<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).
-</Callout>
+</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
@@ -62,13 +62,13 @@ module example::example {
 
 ```
 
-<Callout variant="info" icon="ℹ️">
+<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`.
-</Callout>
+</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
@@ -89,11 +89,11 @@ The `update_data` argument contains verified prices from Pyth.
 Calling `pyth_contract.update_price_feeds` with this value updates the on-chain Pyth price and ensures your application has recent price data.
 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`.
 
-<Callout variant="info" icon="ℹ️">
+<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).
-</Callout>
+</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
@@ -167,7 +167,7 @@ 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.
 
-<Callout variant="warning" icon="⚠️">
+<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).
 
@@ -178,7 +178,7 @@ You can use `IOTAPythClient` to build such transactions and handle all the compl
 
 Consult [Fetch Price Updates](../fetch-price-updates) for more information on how to fetch the `pyth_price_update`.
 
-</Callout>
+</InfoBox>
 
 ## Additional Resources
 
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,10 @@ index: false
 
 This guide explains how to fetch the latest prices and subscribe to real-time price updates in off-chain applications.
 
-<Callout variant="info" icon="💡">
+<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.
 
-</Callout>
+</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
@@ -26,10 +26,10 @@ Add this crate to the dependencies section of your `Cargo.toml` file:
 pyth-solana-receiver-sdk ="x.y.z" # get the latest version from https://crates.io/crates/pyth-solana-receiver-sdk
 ```
 
-<Callout variant="warning" icon="⚓">
+<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}`.
-</Callout>
+</InfoBox>
 
 ### Typescript SDK
 
@@ -59,11 +59,11 @@ pub struct Sample<'info> {
 }
 ```
 
-<Callout variant="info" icon="ℹ️">
+<InfoBox variant="info">
 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.
-</Callout>
+</InfoBox>
 
 Next, update the instruction logic to read the price from the price update account:
 
@@ -84,7 +84,7 @@ pub fn sample(ctx: Context<Sample>) -> Result<()> {
 }
 ```
 
-<Callout variant="warning" icon="⚠️">
+<InfoBox variant="warning">
   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
@@ -94,7 +94,7 @@ pub fn sample(ctx: Context<Sample>) -> Result<()> {
 If you choose the price feed account integration (see below), you
 can use an account address check to validate the price feed ID.
 
-</Callout>
+</InfoBox>
 
 ## Write Frontend Code
 
@@ -135,7 +135,7 @@ const solUsdPriceFeedAccount = pythSolanaReceiver
   .toBase58();
 ```
 
-<Callout variant="info" icon="ℹ️">
+<InfoBox variant="info" icon="ℹ️">
   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
@@ -148,7 +148,7 @@ 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.
 
-</Callout>
+</InfoBox>
 
 ### Price Update Accounts
 
@@ -234,7 +234,7 @@ 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.
 
-<Callout variant="info" icon="ℹ️">
+<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
@@ -243,7 +243,7 @@ The [SDK documentation](https://github.com/pyth-network/pyth-crosschain/tree/mai
   [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.
-</Callout>
+</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
@@ -115,7 +115,7 @@ 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](https://docs.pyth.network/price-feeds/fetch-price-updates) for more information on how to fetch the pyth_price_update.
 
-<Callout variant="info" icon="ℹ️">
+<InfoBox variant="info">
   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
@@ -124,7 +124,7 @@ The pyth_price_update can be fetched from Hermes; Consult [Fetch Price Updates](
   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).
-</Callout>
+</InfoBox>
 
 The code snippet above does the following things:
 
@@ -158,11 +158,11 @@ const currentPrices = await connection.getLatestPriceFeeds([priceId]);
 const pythUpdate = ByteBuffer.fromBase64(currentPrices[0].vaa);
 ```
 
-<Callout variant="info" icon="ℹ️">
+<InfoBox variant="info">
   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.
-</Callout>
+</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
@@ -167,7 +167,7 @@ const result = await wallet.signAndExecuteTransactionBlock(txBlock);
 
 By calling the `updatePriceFeeds` function, the `SuiPythClient` adds the necessary transactions to the transaction block to update the price feeds.
 
-<Callout variant="warning" icon="⚠️">
+<InfoBox variant="warning">
 
 Your Sui Move module **should NOT** have a hard-coded call to `pyth::update_single_price_feed.` In other words, a contract should **never call** the Sui Pyth `pyth::update_single_price_feed` entry point. Instead, it should be called directly from client code (e.g., Typescript or Rust).
 
@@ -178,7 +178,7 @@ You can use `SuiPythClient` to build such transactions and handle all the comple
 
 Consult [Fetch Price Updates](../fetch-price-updates) for more information on how to fetch the `pyth_price_update`.
 
-</Callout>
+</InfoBox>
 
 ## Additional Resources
 
diff --git a/apps/developer-hub/src/components/Callout/index.tsx b/apps/developer-hub/src/components/Callout/index.tsx
diff --git a/apps/developer-hub/src/components/Case/index.tsx b/apps/developer-hub/src/components/Case/index.tsx
diff --git a/apps/developer-hub/src/mdx-components.tsx b/apps/developer-hub/src/mdx-components.tsx
