fix(docs): fix Index Supply query examples (#218)

Author: letstokenize

src/components/IndexSupplyQuery.tsx

@@ -57,6 +57,7 @@ const EVM_TABLE_COLUMNS = {
 } as const
 
 type IndexSupplyQueryProps = {
+  chainId: number
   signatures?: string[]
   query?: string
   title?: string
@@ -132,7 +133,7 @@ function renderCellValue(cell: string | number | boolean | null): React.ReactNod
   )
 }
 
-export function IndexSupplyQuery(props: IndexSupplyQueryProps = {}) {
+export function IndexSupplyQuery(props: IndexSupplyQueryProps) {
   const isReadOnly = props.query !== undefined
 
   const allSignatures = React.useMemo(() => getAllSignatures(), [])
@@ -207,7 +208,10 @@ export function IndexSupplyQuery(props: IndexSupplyQueryProps = {}) {
     setResult(null)
 
     try {
-      const options = signatures.length > 0 ? { signatures } : {}
+      const options = {
+        chainId: props.chainId,
+        ...(signatures.length > 0 ? { signatures } : {}),
+      }
       const queryResult = await runIndexSupplyQuery(queryToRun, options)
       setResult(queryResult)
     } catch (err) {
@@ -230,7 +234,10 @@ export function IndexSupplyQuery(props: IndexSupplyQueryProps = {}) {
       setError(null)
       setResult(null)
 
-      runIndexSupplyQuery(queryToRun, signatures.length > 0 ? { signatures } : {})
+      runIndexSupplyQuery(queryToRun, {
+        chainId: props.chainId,
+        ...(signatures.length > 0 ? { signatures } : {}),
+      })
         .then((queryResult) => {
           setResult(queryResult)
         })

src/components/lib/IndexSupply.ts

@@ -43,16 +43,18 @@ export function toAddressValue(value: RowValue | null | undefined): Address.Addr
 }
 
 type RunQueryOptions = {
+  chainId: number
   signatures?: string[]
 }
 
-export async function runIndexSupplyQuery(query: string, options: RunQueryOptions = {}) {
+export async function runIndexSupplyQuery(query: string, options: RunQueryOptions) {
   const response = await fetch('/api/index-supply', {
     method: 'POST',
     headers: {
       'content-type': 'application/json',
     },
     body: JSON.stringify({
+      chainId: options.chainId,
       query: query.replace(/\s+/g, ' ').trim(),
       signatures: options.signatures,
     }),

src/pages/_api/api/index-supply.ts

@@ -1,6 +1,5 @@
-import { tempo } from 'viem/chains'
-
 type QueryRequest = {
+  chainId: number
   query: string
   signatures?: string[]
 }
@@ -35,9 +34,16 @@ export async function POST(request: Request): Promise<Response> {
     )
   }
 
-  const apiKey = import.meta.env.VITE_INDEXSUPPLY_API_KEY
+  if (!Number.isInteger(body.chainId) || body.chainId <= 0) {
+    return Response.json(
+      { error: 'Invalid request: chainId is required and must be a positive integer' },
+      { status: 400, headers: corsHeaders },
+    )
+  }
+
+  const apiKey = process.env.INDEXSUPPLY_API_KEY
   if (!apiKey) {
-    console.error('VITE_INDEXSUPPLY_API_KEY is not configured')
+    console.error('INDEXSUPPLY_API_KEY is not configured')
     return Response.json(
       { error: 'Server configuration error: API key not found' },
       { status: 500, headers: corsHeaders },
@@ -51,8 +57,7 @@ export async function POST(request: Request): Promise<Response> {
 
     const signatures = body.signatures && body.signatures.length > 0 ? body.signatures : ['']
 
-    const chainId = tempo.id
-    const chainCursor = `${chainId}-0`
+    const chainCursor = `${body.chainId}-0`
 
     const response = await fetch(url.toString(), {
       method: 'POST',

src/pages/guide/stablecoin-dex/view-the-orderbook.mdx

@@ -21,15 +21,18 @@ In this guide, we use [Index Supply](https://www.indexsupply.net) as our indexin
 
 Query the best bid and ask prices to calculate the current spread for a token pair.
 
-Find the highest bid prices (buyers) for PathUSD. This query filters out fully filled and cancelled orders, groups by price level (tick), and shows the top 5 bid prices with their total liquidity.
+These examples use the mainnet `USDC.e / pathUSD` orderbook; `pathUSD` is the quote token for `USDC.e` — see [Quote Tokens](/protocol/exchange/quote-tokens).
+
+Find the highest bid prices (buyers) for the `USDC.e / pathUSD` book. This query filters out fully filled and cancelled orders, groups by price level (tick), and shows the top 5 bid prices with their total liquidity.
 
 <IndexSupplyQuery
-  title={'Best Bid Prices for PathUSD'}
+  chainId={4217}
+  title={'Best Bid Prices for USDC.e'}
   query={`SELECT
     tick as price,
     SUM(amount) as total_liquidity
   FROM orderplaced
-  WHERE token = '0x20c0000000000000000000000000000000000000'
+  WHERE token = '0x20c000000000000000000000b9537d11c60e8b50'
     AND "isBid" = true
     AND NOT EXISTS (
       SELECT 1 FROM orderfilled
@@ -46,15 +49,16 @@ Find the highest bid prices (buyers) for PathUSD. This query filters out fully f
   signatures={["OrderPlaced", "OrderFilled", "OrderCancelled"]}
 />
 
-Find the lowest ask prices (sellers) for PathUSD. The spread is the difference between the highest bid and lowest ask price.
+Find the lowest ask prices (sellers) for the `USDC.e / pathUSD` book. The spread is the difference between the highest bid and lowest ask price.
 
 <IndexSupplyQuery
-  title={'Best Ask Prices for PathUSD'}
+  chainId={4217}
+  title={'Best Ask Prices for USDC.e'}
   query={`SELECT
     tick as price,
     SUM(amount) as total_liquidity
   FROM orderplaced
-  WHERE token = '0x20c0000000000000000000000000000000000000'
+  WHERE token = '0x20c000000000000000000000b9537d11c60e8b50'
     AND "isBid" = false
     AND NOT EXISTS (
       SELECT 1 FROM orderfilled
@@ -75,17 +79,18 @@ Find the lowest ask prices (sellers) for PathUSD. The spread is the difference b
 
 View aggregated liquidity at each price level to understand the orderbook structure.
 
-This query shows all active orders for BetaUSD, including both regular and flip orders.
+This query shows all active orders in the `USDC.e / pathUSD` book, including both regular and flip orders.
 
 <IndexSupplyQuery
-  title={'BetaUSD Order Depth by Price Level'}
+  chainId={4217}
+  title={'USDC.e Order Depth by Price Level'}
   query={`SELECT
     tick as price,
     "isBid" as is_bid,
     COUNT("orderId") as num_orders,
     SUM(amount) as total_amount
   FROM orderplaced
-  WHERE token = '0x20c0000000000000000000000000000000000002'
+  WHERE token = '0x20c000000000000000000000b9537d11c60e8b50'
     AND NOT EXISTS (
       SELECT 1 FROM orderfilled
       WHERE orderfilled."orderId" = orderplaced."orderId"
@@ -107,10 +112,11 @@ This query shows all active orders for BetaUSD, including both regular and flip
 
 Get detailed information about a specific order including its placement details, fill history, and cancellation status.
 
-This query inspects the details of the most recent order for PathUSD. It shows when the order was created, at what price (tick), the order size, whether it's a flip order, and who placed it.
+This query inspects the details of the most recent order in the `USDC.e / pathUSD` book. It shows when the order was created, at what price (tick), the order size, whether it's a flip order, and who placed it.
 
 <IndexSupplyQuery
-  title={'Order Placement Details'}
+  chainId={4217}
+  title={'Order Placement Details for USDC.e'}
   query={`SELECT
     "orderId",
     tick,
@@ -123,45 +129,49 @@ This query inspects the details of the most recent order for PathUSD. It shows w
     block_num,
     tx_hash
   FROM orderplaced
-  WHERE token = '0x20c0000000000000000000000000000000000000'
+  WHERE token = '0x20c000000000000000000000b9537d11c60e8b50'
   ORDER BY block_num DESC
   LIMIT 1`}
   signatures={["OrderPlaced"]}
 />
 
 #### Order fill status
 
-Check if an order has been partially or fully filled. This query shows up to 5 fill events for order number `2`, including the amount filled in each transaction and whether it was a partial fill.
+Check if recent `USDC.e` orders have been partially or fully filled. This query shows up to 5 fill events for the `USDC.e / pathUSD` market, including the amount filled in each transaction and whether it was a partial fill.
 
 <IndexSupplyQuery
-  title={'Order Fill History'}
+  chainId={4217}
+  title={'Order Fill History for USDC.e'}
   query={`SELECT
-    "orderId",
-    "amountFilled",
-    "partialFill",
-    block_num,
-    tx_hash
-  FROM orderfilled
-  WHERE "orderId" = 2
-  ORDER BY block_num DESC
+    ofl."orderId",
+    ofl."amountFilled",
+    ofl."partialFill",
+    ofl.block_num,
+    ofl.tx_hash
+  FROM orderfilled ofl
+  INNER JOIN orderplaced op
+    ON ofl."orderId" = op."orderId"
+  WHERE op.token = '0x20c000000000000000000000b9537d11c60e8b50'
+  ORDER BY ofl.block_num DESC
   LIMIT 5`}
-  signatures={["OrderFilled"]}
+  signatures={["OrderFilled", "OrderPlaced"]}
 />
 
 #### Cancelled orders
 
-Check if an order has been cancelled. This query returns an order for PathUSD that was explicitly cancelled by the maker before being fully filled.
+Check if a `USDC.e` order has been cancelled. This query returns a recent order from the `USDC.e / pathUSD` book that was explicitly cancelled by the maker before being fully filled.
 
 <IndexSupplyQuery
-  title={'Order Cancellation Status'}
+  chainId={4217}
+  title={'Order Cancellation Status for USDC.e'}
   query={`SELECT
     oc."orderId",
     oc.block_num,
     oc.tx_hash
   FROM ordercancelled oc
   INNER JOIN orderplaced op ON oc."orderId" = op."orderId"
-  WHERE op.token = '0x20c0000000000000000000000000000000000000'
-  ORDER BY op.block_num DESC
+  WHERE op.token = '0x20c000000000000000000000b9537d11c60e8b50'
+  ORDER BY oc.block_num DESC
   LIMIT 1`}
   signatures={["OrderCancelled", "OrderPlaced"]}
 />
@@ -170,10 +180,11 @@ Check if an order has been cancelled. This query returns an order for PathUSD th
 
 View the last prices a token traded at to understand recent market activity.
 
-This query joins order fill events with their corresponding placement details to show the price tick and amount for recent trades.
+This query joins order fill events with their corresponding placement details to show the price tick and amount for recent trades in the `USDC.e / pathUSD` book.
 
 <IndexSupplyQuery
-  title={'Recent Trade Prices for PathUSD'}
+  chainId={4217}
+  title={'Recent Trade Prices for USDC.e'}
   query={`SELECT
     ofl.block_num,
     ofl."orderId",
@@ -183,7 +194,7 @@ This query joins order fill events with their corresponding placement details to
   FROM orderfilled ofl
   INNER JOIN orderplaced o
     ON ofl."orderId" = o."orderId"
-  WHERE o.token = '0x20c0000000000000000000000000000000000000'
+  WHERE o.token = '0x20c000000000000000000000b9537d11c60e8b50'
   ORDER BY ofl.block_num DESC
   LIMIT 10`}
   signatures={["OrderFilled", "OrderPlaced"]}