diff --git a/.env.example b/.env.example
index fa329d7d..ce9f91ce 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,5 @@
-INDEXSUPPLY_API_KEY=
+TIDX_BASIC_AUTH=            # e.g. tidx:...
+TIDX_URL=https://tidx.tempo.xyz
 SLACK_FEEDBACK_WEBHOOK=     # e.g. https://hooks.slack.com/services/...
 VITE_BASE_URL=              # e.g. https://docs.tempo.xyz
 VITE_GA_MEASUREMENT_ID=
diff --git a/env.d.ts b/env.d.ts
index 5a86c157..22ac6500 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -6,7 +6,8 @@ interface EnvironmentVariables {
   readonly VITE_POSTHOG_HOST: string
   readonly VITE_TEMPO_ENV: 'localnet' | 'devnet' | 'moderato'
 
-  readonly INDEXSUPPLY_API_KEY: string
+  readonly TIDX_BASIC_AUTH: string
+  readonly TIDX_URL: string
   readonly SLACK_FEEDBACK_WEBHOOK: string
 
   readonly VERCEL_URL: string
diff --git a/package.json b/package.json
index 563a4612..c5d6fb2f 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "sql-formatter": "^15.7.3",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.2",
+    "tidx.ts": "^0.1.1",
     "unplugin-auto-import": "^21.0.0",
     "unplugin-icons": "^23.0.1",
     "viem": "^2.48.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 14670c0c..80a45fcc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,6 +93,9 @@ importers:
       tailwindcss:
         specifier: ^4.2.2
         version: 4.2.2
+      tidx.ts:
+        specifier: ^0.1.1
+        version: 0.1.1(typescript@5.9.3)
       unplugin-auto-import:
         specifier: ^21.0.0
         version: 21.0.0
@@ -2603,6 +2606,10 @@ packages:
   khroma@2.1.0:
     resolution: {integrity: sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==}
 
+  kysely@0.28.16:
+    resolution: {integrity: sha512-3i5pmOiZvMDj00qhrIVbH0AnioVTx22DMP7Vn5At4yJO46iy+FM8Y/g61ltenLVSo3fiO8h8Q3QOFgf/gQ72ww==}
+    engines: {node: '>=20.0.0'}
+
   langium@4.2.2:
     resolution: {integrity: sha512-JUshTRAfHI4/MF9dH2WupvjSXyn8JBuUEWazB8ZVJUtXutT0doDlAv1XKbZ1Pb5sMexa8FF4CFBc0iiul7gbUQ==}
     engines: {node: '>=20.10.0', npm: '>=10.2.3'}
@@ -2955,6 +2962,9 @@ packages:
       typescript:
         optional: true
 
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
   mlly@1.8.2:
     resolution: {integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==}
 
@@ -3653,6 +3663,9 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  tidx.ts@0.1.1:
+    resolution: {integrity: sha512-XFoDuwCQwkERGRYB+QGQvzH//Y6kDknttWSts3durreALgkrKOCM9mUDfgRVg3zVisuQgx5RfvoJmO8x8oXm+g==}
+
   tinyexec@1.1.1:
     resolution: {integrity: sha512-VKS/ZaQhhkKFMANmAOhhXVoIfBXblQxGX1myCQ2faQrfmobMftXeJPcZGp0gS07ocvGJWDLZGyOZDadDBqYIJg==}
     engines: {node: '>=18'}
@@ -6559,6 +6572,8 @@ snapshots:
 
   khroma@2.1.0: {}
 
+  kysely@0.28.16: {}
+
   langium@4.2.2:
     dependencies:
       '@chevrotain/regexp-to-ast': 12.0.0
@@ -7184,6 +7199,8 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
+  mitt@3.0.1: {}
+
   mlly@1.8.2:
     dependencies:
       acorn: 8.16.0
@@ -7918,6 +7935,16 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  tidx.ts@0.1.1(typescript@5.9.3):
+    dependencies:
+      abitype: 1.2.3(typescript@5.9.3)(zod@4.3.6)
+      kysely: 0.28.16
+      mitt: 3.0.1
+      ox: 0.14.20(typescript@5.9.3)(zod@4.3.6)
+      zod: 4.3.6
+    transitivePeerDependencies:
+      - typescript
+
   tinyexec@1.1.1: {}
 
   tinyglobby@0.2.16:
diff --git a/src/components/SignatureSelector.tsx b/src/components/SignatureSelector.tsx
index 358e95e6..72dcac41 100644
--- a/src/components/SignatureSelector.tsx
+++ b/src/components/SignatureSelector.tsx
@@ -1,6 +1,6 @@
 'use client'
 import * as React from 'react'
-import { getAllSignatures, type SignatureInfo } from './lib/IndexSupplySignatures'
+import { getAllSignatures, type SignatureInfo } from './lib/TidxSignatures'
 
 type SignatureSelectorProps = {
   value: string[]
@@ -17,6 +17,12 @@ export function SignatureSelector(props: SignatureSelectorProps) {
 
   const allSignatures = React.useMemo(() => getAllSignatures(), [])
 
+  const handleClickOutside = React.useEffectEvent((event: MouseEvent) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+      setIsOpen(false)
+    }
+  })
+
   const filteredSignatures = React.useMemo(() => {
     let signatures = allSignatures
 
@@ -56,12 +62,6 @@ export function SignatureSelector(props: SignatureSelectorProps) {
   React.useEffect(() => {
     if (!isOpen) return
 
-    function handleClickOutside(event: MouseEvent) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false)
-      }
-    }
-
     document.addEventListener('mousedown', handleClickOutside)
     return () => document.removeEventListener('mousedown', handleClickOutside)
   }, [isOpen])
@@ -115,7 +115,7 @@ export function SignatureSelector(props: SignatureSelectorProps) {
             onChange={(e) => setSearchQuery(e.target.value)}
             onFocus={() => !disabled && setIsOpen(true)}
             placeholder={placeholderText}
-            className="h-[34px] w-full rounded-lg border border-gray4 px-3 text-[13px] focus:outline-none focus:ring-1 focus:ring-accent disabled:cursor-not-allowed disabled:opacity-50"
+            className="h-8.5 w-full rounded-lg border border-gray4 px-3 text-[13px] focus:outline-none focus:ring-1 focus:ring-accent disabled:cursor-not-allowed disabled:opacity-50"
             disabled={disabled}
           />
           {value.length > 0 && !disabled && (
@@ -131,7 +131,7 @@ export function SignatureSelector(props: SignatureSelectorProps) {
       </div>
 
       {isOpen && (
-        <div className="absolute z-10 mt-1 max-h-[400px] w-full overflow-y-auto rounded-lg border border-gray4 bg-gray1 shadow-lg">
+        <div className="absolute z-10 mt-1 max-h-100 w-full overflow-y-auto rounded-lg border border-gray4 bg-gray1 shadow-lg">
           {Object.keys(groupedSignatures).length === 0 ? (
             <div className="px-3 py-4 text-center text-[13px] text-gray9">No signatures found</div>
           ) : (
@@ -159,7 +159,7 @@ export function SignatureSelector(props: SignatureSelectorProps) {
                         {sig.signature}
                       </span>
                       <span
-                        className={`ml-auto flex h-[16px] shrink-0 items-center justify-center rounded px-1.5 text-center font-medium text-[9px] uppercase leading-none tracking-[2%] ${
+                        className={`ml-auto flex h-4 shrink-0 items-center justify-center rounded px-1.5 text-center font-medium text-[9px] uppercase leading-none tracking-[2%] ${
                           sig.type === 'event' ? 'bg-blue3 text-blue9' : 'bg-purple3 text-purple9'
                         }`}
                       >
@@ -194,7 +194,7 @@ export function SignatureSelector(props: SignatureSelectorProps) {
               </div>
               <div className="text-[11px] text-gray10">
                 <a
-                  href="https://www.indexsupply.net/docs#evm-data"
+                  href="https://github.com/tempoxyz/tidx.ts"
                   target="_blank"
                   rel="noopener noreferrer"
                   className="text-accent hover:underline"
@@ -219,9 +219,7 @@ export function SignatureSelector(props: SignatureSelectorProps) {
                           isEvent ? 'bg-blue9' : 'bg-purple9'
                         }`}
                       />
-                      <span className="max-w-[300px] truncate text-gray11">
-                        {sigInfo?.name || sig}
-                      </span>
+                      <span className="max-w-75 truncate text-gray11">{sigInfo?.name || sig}</span>
                       {!disabled && (
                         <button
                           type="button"
diff --git a/src/components/IndexSupplyQuery.tsx b/src/components/TidxQuery.tsx
similarity index 73%
rename from src/components/IndexSupplyQuery.tsx
rename to src/components/TidxQuery.tsx
index 7bec084d..c391f34c 100644
--- a/src/components/IndexSupplyQuery.tsx
+++ b/src/components/TidxQuery.tsx
@@ -2,30 +2,24 @@
 import * as React from 'react'
 import { isAddress, isHash } from 'viem'
 import { tempo } from 'viem/chains'
-import type * as z from 'zod/mini'
-import LucideExternalLink from '~icons/lucide/external-link'
 import { Container } from './Container'
 import { Button } from './guides/Demo'
-import { type responseSchema, runIndexSupplyQuery } from './lib/IndexSupply'
-import { extractParameterNames, getAllSignatures } from './lib/IndexSupplySignatures'
+import { type QueryResponse, runTidxQuery } from './lib/Tidx'
+import { extractParameterNames, getAllSignatures } from './lib/TidxSignatures'
 import { SignatureSelector } from './SignatureSelector'
 import { SqlEditor } from './SqlEditor'
 
-type QueryResult = z.infer<typeof responseSchema>[0]
+type QueryResult = QueryResponse
 
-// Default EVM tables and their columns from IndexSupply
+// Default EVM tables and their columns from tidx.
 const EVM_TABLE_COLUMNS = {
   blocks: [
-    'chain',
     'num',
     'timestamp',
-    'size',
     'gas_limit',
     'gas_used',
-    'nonce',
     'hash',
-    'receipts_root',
-    'state_root',
+    'parent_hash',
     'extra_data',
     'miner',
   ],
@@ -36,7 +30,10 @@ const EVM_TABLE_COLUMNS = {
     'idx',
     'type',
     'gas',
-    'gas_price',
+    'gas_limit',
+    'gas_used',
+    'max_fee_per_gas',
+    'max_priority_fee_per_gas',
     'nonce',
     'hash',
     'from',
@@ -51,22 +48,43 @@ const EVM_TABLE_COLUMNS = {
     'log_idx',
     'tx_hash',
     'address',
-    'topics',
+    'selector',
+    'topic0',
+    'topic1',
+    'topic2',
+    'topic3',
     'data',
   ],
+  receipts: [
+    'block_num',
+    'block_timestamp',
+    'tx_idx',
+    'tx_hash',
+    'from',
+    'to',
+    'contract_address',
+    'gas_used',
+    'cumulative_gas_used',
+    'effective_gas_price',
+    'status',
+    'fee_payer',
+  ],
 } as const
 
-type IndexSupplyQueryProps = {
+type TidxQueryProps = {
   chainId: number
   signatures?: string[]
   query?: string
   title?: string
-  signatureFilter?: 'all' | 'events' | 'functions'
 }
 
 function getExplorerHost() {
   const { VITE_TEMPO_ENV, VITE_EXPLORER_OVERRIDE } = import.meta.env
-  if (VITE_TEMPO_ENV !== 'testnet' && VITE_EXPLORER_OVERRIDE !== undefined) {
+  if (
+    VITE_TEMPO_ENV !== 'testnet' &&
+    VITE_TEMPO_ENV !== 'moderato' &&
+    VITE_EXPLORER_OVERRIDE !== undefined
+  ) {
     return VITE_EXPLORER_OVERRIDE
   }
   return tempo.blockExplorers.default.url
@@ -133,7 +151,7 @@ function renderCellValue(cell: string | number | boolean | null): React.ReactNod
   )
 }
 
-export function IndexSupplyQuery(props: IndexSupplyQueryProps) {
+export function TidxQuery(props: TidxQueryProps) {
   const isReadOnly = props.query !== undefined
 
   const allSignatures = React.useMemo(() => getAllSignatures(), [])
@@ -154,7 +172,7 @@ export function IndexSupplyQuery(props: IndexSupplyQueryProps) {
   const [signatures, setSignatures] = React.useState<string[]>(resolvedSignatures)
   const [result, setResult] = React.useState<QueryResult | null>(null)
   const [error, setError] = React.useState<string | null>(null)
-  const [isLoading, setIsLoading] = React.useState(false)
+  const [isLoading, startQueryTransition] = React.useTransition()
 
   const selectedSignatureInfos = React.useMemo(() => {
     return signatures
@@ -195,58 +213,40 @@ export function IndexSupplyQuery(props: IndexSupplyQueryProps) {
     setSignatures(resolvedSignatures)
   }, [resolvedSignatures])
 
-  const handleRunQuery = async () => {
-    const queryToRun = query.trim()
-
-    if (!queryToRun) {
-      setError('Please enter a SQL query')
-      return
-    }
-
-    setIsLoading(true)
-    setError(null)
-    setResult(null)
-
-    try {
-      const options = {
-        chainId: props.chainId,
-        ...(signatures.length > 0 ? { signatures } : {}),
-      }
-      const queryResult = await runIndexSupplyQuery(queryToRun, options)
-      setResult(queryResult)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Unknown error occurred')
-    } finally {
-      setIsLoading(false)
-    }
-  }
+  const runQuery = React.useCallback(
+    (nextQuery: string) => {
+      const queryToRun = nextQuery.trim()
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
-      e.preventDefault()
-      const queryToRun = queryRef.current.trim()
       if (!queryToRun) {
         setError('Please enter a SQL query')
         return
       }
 
-      setIsLoading(true)
-      setError(null)
-      setResult(null)
+      startQueryTransition(async () => {
+        setError(null)
+        setResult(null)
 
-      runIndexSupplyQuery(queryToRun, {
-        chainId: props.chainId,
-        ...(signatures.length > 0 ? { signatures } : {}),
-      })
-        .then((queryResult) => {
+        try {
+          const options = {
+            chainId: props.chainId,
+            ...(signatures.length > 0 ? { signatures } : {}),
+          }
+          const queryResult = await runTidxQuery(queryToRun, options)
           setResult(queryResult)
-        })
-        .catch((err) => {
+        } catch (err) {
           setError(err instanceof Error ? err.message : 'Unknown error occurred')
-        })
-        .finally(() => {
-          setIsLoading(false)
-        })
+        }
+      })
+    },
+    [props.chainId, signatures],
+  )
+
+  const handleRunQuery = () => runQuery(query)
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      e.preventDefault()
+      runQuery(queryRef.current)
     }
   }
 
@@ -254,7 +254,7 @@ export function IndexSupplyQuery(props: IndexSupplyQueryProps) {
     <Container
       headerLeft={
         <h4 className="font-normal text-[14px] text-gray12 leading-none -tracking-[1%]">
-          {props.title || 'IndexSupply SQL Query'}
+          {props.title || 'tidx SQL Query'}
         </h4>
       }
       headerRight={
@@ -265,19 +265,8 @@ export function IndexSupplyQuery(props: IndexSupplyQueryProps) {
     >
       <div className="space-y-4">
         {props.signatures ? (
-          <div className="space-y-2">
-            <div className="flex items-center gap-1.5 text-[13px] text-gray11">
-              Signatures
-              <a
-                href="https://www.indexsupply.net/docs#signatures"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-gray9 transition-colors hover:text-gray11"
-              >
-                <LucideExternalLink className="size-3" />
-              </a>
-            </div>
-            <div className="flex flex-wrap gap-1">
+          <div className="flex w-full items-center space-y-2">
+            <div className="flex w-full flex-wrap gap-1">
               {selectedSignatureInfos.map((sigInfo) => {
                 const isEvent = sigInfo.type === 'event'
                 return (
@@ -290,33 +279,18 @@ export function IndexSupplyQuery(props: IndexSupplyQueryProps) {
                         isEvent ? 'bg-blue9' : 'bg-purple9'
                       }`}
                     />
-                    <span className="max-w-[300px] truncate text-gray11">{sigInfo.name}</span>
+                    <span className="max-w-75 truncate text-gray11">{sigInfo.name}</span>
                   </div>
                 )
               })}
+              <p className="ml-auto flex items-center gap-1.5 text-[13px] text-gray11">SQL Query</p>
             </div>
           </div>
         ) : (
-          <SignatureSelector
-            value={signatures}
-            onChange={setSignatures}
-            disabled={isReadOnly}
-            filter={props.signatureFilter}
-          />
+          <SignatureSelector value={signatures} onChange={setSignatures} disabled={isReadOnly} />
         )}
 
         <div className="space-y-2">
-          <label htmlFor="sql-query" className="flex items-center gap-1.5 text-[13px] text-gray11">
-            SQL Query
-            <a
-              href="https://www.indexsupply.net/docs#sql"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-gray9 transition-colors hover:text-gray11"
-            >
-              <LucideExternalLink className="size-3" />
-            </a>
-          </label>
           <SqlEditor
             value={query}
             onChange={handleQueryChange}
diff --git a/src/components/guides/steps/exchange/PlaceOrder.tsx b/src/components/guides/steps/exchange/PlaceOrder.tsx
index c372fdda..bd5a5ef0 100644
--- a/src/components/guides/steps/exchange/PlaceOrder.tsx
+++ b/src/components/guides/steps/exchange/PlaceOrder.tsx
@@ -73,7 +73,7 @@ export function PlaceOrder(props: DemoStepProps) {
           variant={active ? (sendCalls.isSuccess ? 'default' : 'accent') : 'default'}
           disabled={!active}
           onClick={() => {
-            sendCalls.sendCallsSync({
+            sendCalls.mutate({
               calls,
             })
           }}
diff --git a/src/components/guides/steps/exchange/QueryOrder.tsx b/src/components/guides/steps/exchange/QueryOrder.tsx
index 75ae4db9..745d9860 100644
--- a/src/components/guides/steps/exchange/QueryOrder.tsx
+++ b/src/components/guides/steps/exchange/QueryOrder.tsx
@@ -11,7 +11,7 @@ export function QueryOrder(props: DemoStepProps) {
   const { stepNumber, last = false } = props
   const { getData } = useDemoContext()
   const [hasQueried, setHasQueried] = React.useState(false)
-  const [isQuerying, setIsQuerying] = React.useState(false)
+  const [isQuerying, startQueryTransition] = React.useTransition()
 
   const orderId = getData('orderId')
 
@@ -27,19 +27,16 @@ export function QueryOrder(props: DemoStepProps) {
   React.useEffect(() => {
     if (!orderId) {
       setHasQueried(false)
-      setIsQuerying(false)
     }
   }, [orderId])
 
-  const active = React.useMemo(() => {
-    return !!orderId
-  }, [orderId])
+  const active = !!orderId
 
-  const handleQuery = async () => {
-    setIsQuerying(true)
-    await refetch()
-    setHasQueried(true)
-    setIsQuerying(false)
+  const handleQuery = () => {
+    startQueryTransition(async () => {
+      await refetch()
+      setHasQueried(true)
+    })
   }
 
   return (
diff --git a/src/components/lib/IndexSupply.ts b/src/components/lib/IndexSupply.ts
deleted file mode 100644
index bceb76a0..00000000
--- a/src/components/lib/IndexSupply.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Address, Hex } from 'ox'
-import * as z from 'zod/mini'
-
-export const rowValueSchema = z.union([z.string(), z.number(), z.null()])
-
-export const responseSchema = z.array(
-  z.object({
-    cursor: z.optional(z.string()),
-    columns: z.array(
-      z.object({
-        name: z.string(),
-        pgtype: z.string(),
-      }),
-    ),
-    rows: z.array(z.array(rowValueSchema)),
-  }),
-)
-
-export type RowValue = z.infer<typeof rowValueSchema>
-
-export function toBigInt(value: RowValue | null | undefined): bigint {
-  if (value === null || value === undefined) return 0n
-  if (typeof value === 'number') return BigInt(value)
-  const normalized = value.trim()
-  if (normalized === '') return 0n
-  return BigInt(normalized)
-}
-
-export function toQuantityHex(value: RowValue | null | undefined, fallback: bigint = 0n) {
-  return Hex.fromNumber(value === null || value === undefined ? fallback : toBigInt(value))
-}
-
-export function toHexData(value: RowValue | null | undefined): Hex.Hex {
-  if (typeof value !== 'string' || value.length === 0) return '0x'
-  Hex.assert(value)
-  return value
-}
-
-export function toAddressValue(value: RowValue | null | undefined): Address.Address | null {
-  if (typeof value !== 'string' || value.length === 0) return null
-  Address.assert(value)
-  return value
-}
-
-type RunQueryOptions = {
-  chainId: number
-  signatures?: string[]
-}
-
-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,
-    }),
-  })
-
-  let json: unknown
-  try {
-    json = await response.json()
-  } catch {
-    throw new Error('API returned invalid JSON')
-  }
-
-  if (!response.ok) {
-    const message =
-      typeof json === 'object' &&
-      json !== null &&
-      'error' in json &&
-      typeof (json as { error?: string }).error === 'string'
-        ? (json as { error: string }).error
-        : response.statusText
-    throw new Error(`API error (${response.status}): ${message}`)
-  }
-
-  const result = json as z.infer<typeof responseSchema>[0]
-  if (!result) throw new Error('API returned an empty result set')
-  return result
-}
diff --git a/src/components/lib/Tidx.ts b/src/components/lib/Tidx.ts
new file mode 100644
index 00000000..1ef4b322
--- /dev/null
+++ b/src/components/lib/Tidx.ts
@@ -0,0 +1,53 @@
+import * as z from 'zod/mini'
+
+export const rowValueSchema = z.union([z.string(), z.number(), z.boolean(), z.null()])
+
+export const responseSchema = z.object({
+  columns: z.array(
+    z.object({
+      name: z.string(),
+    }),
+  ),
+  rows: z.array(z.array(rowValueSchema)),
+})
+
+export type QueryResponse = z.infer<typeof responseSchema>
+
+type RunQueryOptions = {
+  chainId: number
+  signatures?: string[]
+}
+
+export async function runTidxQuery(query: string, options: RunQueryOptions) {
+  const response = await fetch('/api/tidx', {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify({
+      chainId: options.chainId,
+      query: query.replace(/\s+/g, ' ').trim(),
+      signatures: options.signatures,
+    }),
+  })
+
+  let json: unknown
+  try {
+    json = await response.json()
+  } catch {
+    throw new Error('API returned invalid JSON')
+  }
+
+  if (!response.ok) {
+    const message =
+      typeof json === 'object' &&
+      json !== null &&
+      'error' in json &&
+      typeof (json as { error?: string }).error === 'string'
+        ? (json as { error: string }).error
+        : response.statusText
+    throw new Error(`API error (${response.status}): ${message}`)
+  }
+
+  return z.parse(responseSchema, json)
+}
diff --git a/src/components/lib/IndexSupplySignatures.ts b/src/components/lib/TidxSignatures.ts
similarity index 77%
rename from src/components/lib/IndexSupplySignatures.ts
rename to src/components/lib/TidxSignatures.ts
index e1c3c116..3c7707f4 100644
--- a/src/components/lib/IndexSupplySignatures.ts
+++ b/src/components/lib/TidxSignatures.ts
@@ -1,26 +1,27 @@
 import type { Abi, AbiEvent, AbiFunction } from 'abitype'
+import type { Tidx } from 'tidx.ts'
 import { Abis } from 'viem/tempo'
 
 export type SignatureInfo = {
-  signature: string
+  signature: Tidx.Signature
   name: string
   contract: string
   type: 'event' | 'function'
 }
 
-function formatEventSignature(event: AbiEvent): string {
+function formatEventSignature(event: AbiEvent): Tidx.Signature {
   const params = event.inputs
     .map((input) => {
       const indexed = input.indexed ? ' indexed' : ''
       return `${input.type}${indexed} ${input.name || ''}`
     })
     .join(', ')
-  return `${event.name}(${params})`
+  return `event ${event.name}(${params})`
 }
 
-function formatFunctionSignature(fn: AbiFunction): string {
+function formatFunctionSignature(fn: AbiFunction): Tidx.Signature {
   const inputs = fn.inputs.map((input) => `${input.type} ${input.name || ''}`).join(', ')
-  return `${fn.name}(${inputs})`
+  return `function ${fn.name}(${inputs})`
 }
 
 function extractSignaturesFromAbi(abi: Abi, contractName: string): SignatureInfo[] {
@@ -66,23 +67,6 @@ export function getAllSignatures(): SignatureInfo[] {
   return allSignatures
 }
 
-export function getSignaturesByContract(): Record<string, SignatureInfo[]> {
-  const allSignatures = getAllSignatures()
-  const byContract: Record<string, SignatureInfo[]> = {}
-
-  for (const sig of allSignatures) {
-    if (!byContract[sig.contract]) {
-      byContract[sig.contract] = []
-    }
-    const contractSigs = byContract[sig.contract]
-    if (contractSigs) {
-      contractSigs.push(sig)
-    }
-  }
-
-  return byContract
-}
-
 export function extractParameterNames(signature: string): string[] {
   // Extract parameters from signature like
   // "Transfer(address indexed from, address indexed to, uint256 amount)"
diff --git a/src/pages/_api/api/index-supply.ts b/src/pages/_api/api/index-supply.ts
deleted file mode 100644
index ed8f4782..00000000
--- a/src/pages/_api/api/index-supply.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-type QueryRequest = {
-  chainId: number
-  query: string
-  signatures?: string[]
-}
-
-type QueryResponse = {
-  cursor?: string
-  columns: Array<{
-    name: string
-    pgtype: string
-  }>
-  rows: Array<Array<string | number | null>>
-}
-
-export async function POST(request: Request): Promise<Response> {
-  const origin = request.headers.get('origin')
-  const corsHeaders = cors(origin)
-
-  let body: QueryRequest
-  try {
-    body = await request.json()
-  } catch {
-    return Response.json(
-      { error: 'Invalid request: could not parse JSON' },
-      { status: 400, headers: corsHeaders },
-    )
-  }
-
-  if (!body || typeof body.query !== 'string') {
-    return Response.json(
-      { error: 'Invalid request: query is required' },
-      { status: 400, headers: corsHeaders },
-    )
-  }
-
-  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('INDEXSUPPLY_API_KEY is not configured')
-    return Response.json(
-      { error: 'Server configuration error: API key not found' },
-      { status: 500, headers: corsHeaders },
-    )
-  }
-
-  try {
-    const endpoint = 'https://api.indexsupply.net/v2/query'
-    const url = new URL(endpoint)
-    url.searchParams.set('api-key', apiKey)
-
-    const signatures = body.signatures && body.signatures.length > 0 ? body.signatures : ['']
-
-    const chainCursor = `${body.chainId}-0`
-
-    const response = await fetch(url.toString(), {
-      method: 'POST',
-      headers: { 'content-type': 'application/json' },
-      body: JSON.stringify([
-        {
-          cursor: chainCursor,
-          signatures,
-          query: body.query.replace(/\s+/g, ' ').trim(),
-        },
-      ]),
-    })
-
-    let json: unknown
-    try {
-      json = await response.json()
-    } catch {
-      return Response.json(
-        { error: 'Index Supply API returned invalid JSON' },
-        { status: 502, headers: corsHeaders },
-      )
-    }
-
-    if (!response.ok) {
-      const message =
-        typeof json === 'object' &&
-        json !== null &&
-        'message' in json &&
-        typeof (json as { message?: string }).message === 'string'
-          ? (json as { message: string }).message
-          : response.statusText
-      return Response.json(
-        { error: `Index Supply API error: ${message}` },
-        { status: response.status, headers: corsHeaders },
-      )
-    }
-
-    const data = json as QueryResponse[]
-    const [result] = data
-    if (!result) {
-      return Response.json(
-        { error: 'Index Supply returned an empty result set' },
-        { status: 500, headers: corsHeaders },
-      )
-    }
-
-    return Response.json(result, { headers: corsHeaders })
-  } catch (error) {
-    console.error('Error querying Index Supply:', error)
-    return Response.json(
-      { error: error instanceof Error ? error.message : 'Unknown error occurred' },
-      { status: 500, headers: corsHeaders },
-    )
-  }
-}
-
-export async function OPTIONS(request: Request): Promise<Response> {
-  const origin = request.headers.get('origin')
-  return new Response(null, { status: 200, headers: cors(origin) })
-}
-
-function cors(origin: string | null): Record<string, string> {
-  const allowedOrigins = ['https://docs.tempo.xyz', 'https://mainnet.docs.tempo.xyz']
-
-  if (origin?.includes('vercel.app')) allowedOrigins.push(origin)
-  if (process.env.NODE_ENV === 'development') allowedOrigins.push('http://localhost:5173')
-
-  const headers: Record<string, string> = {
-    'Access-Control-Allow-Methods': 'POST, OPTIONS',
-    'Access-Control-Allow-Headers': 'Content-Type, x-api-token',
-  }
-
-  if (origin && allowedOrigins.some((allowed) => origin.startsWith(allowed)))
-    headers['Access-Control-Allow-Origin'] = origin
-
-  return headers
-}
diff --git a/src/pages/_api/api/tidx.ts b/src/pages/_api/api/tidx.ts
new file mode 100644
index 00000000..63d59afa
--- /dev/null
+++ b/src/pages/_api/api/tidx.ts
@@ -0,0 +1,123 @@
+import { Tidx } from 'tidx.ts'
+
+type QueryRequest = {
+  chainId: number
+  query: string
+  signatures?: Tidx.Signature[]
+}
+
+type RowValue = string | number | boolean | null
+
+type QueryResponse = {
+  columns: Array<{
+    name: string
+  }>
+  rows: Array<RowValue[]>
+}
+
+export async function POST(request: Request): Promise<Response> {
+  const origin = request.headers.get('origin')
+  const corsHeaders = cors(origin)
+
+  let body: QueryRequest
+  try {
+    body = await request.json()
+  } catch {
+    return Response.json(
+      { error: 'Invalid request: could not parse JSON' },
+      { status: 400, headers: corsHeaders },
+    )
+  }
+
+  if (!body || typeof body.query !== 'string') {
+    return Response.json(
+      { error: 'Invalid request: query is required' },
+      { status: 400, headers: corsHeaders },
+    )
+  }
+
+  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 basicAuth = process.env.TIDX_BASIC_AUTH
+  if (!basicAuth) {
+    console.error('TIDX_BASIC_AUTH is not configured')
+    return Response.json(
+      { error: 'Server configuration error: tidx credentials not found' },
+      { status: 500, headers: corsHeaders },
+    )
+  }
+
+  try {
+    const tidx = Tidx.create({
+      basicAuth,
+      baseUrl: process.env.TIDX_URL ?? 'https://tidx.tempo.xyz',
+      chainId: body.chainId,
+    })
+
+    const result = await tidx.fetch({
+      query: body.query.replace(/\s+/g, ' ').trim(),
+      signatures: body.signatures,
+    })
+
+    return Response.json(toQueryResponse(result.rows), {
+      headers: corsHeaders,
+    })
+  } catch (error) {
+    console.error('Error querying tidx:', error)
+    return Response.json(
+      {
+        error: error instanceof Error ? error.message : 'Unknown error occurred',
+      },
+      { status: 500, headers: corsHeaders },
+    )
+  }
+}
+
+export async function OPTIONS(request: Request): Promise<Response> {
+  const origin = request.headers.get('origin')
+  return new Response(null, { status: 200, headers: cors(origin) })
+}
+
+function cors(origin: string | null): Record<string, string> {
+  const allowedOrigins = new Set(['https://docs.tempo.xyz', 'https://mainnet.docs.tempo.xyz'])
+
+  if (origin?.includes('vercel.app')) allowedOrigins.add(origin)
+  if (process.env.NODE_ENV === 'development' && process.env.VITE_BASE_URL)
+    allowedOrigins.add(process.env.VITE_BASE_URL)
+
+  const headers: Record<string, string> = {
+    'Access-Control-Allow-Methods': 'POST, OPTIONS',
+    'Access-Control-Allow-Headers': 'Content-Type, x-api-token',
+  }
+
+  if (origin && Array.from(allowedOrigins).some((allowed) => origin.startsWith(allowed)))
+    headers['Access-Control-Allow-Origin'] = origin
+
+  return headers
+}
+
+function toQueryResponse(rows: Record<string, unknown>[]): QueryResponse {
+  const columns = Array.from(new Set(rows.flatMap((row) => Object.keys(row)))).map((name) => ({
+    name,
+  }))
+
+  return {
+    columns,
+    rows: rows.map((row) => columns.map((column) => toRowValue(row[column.name]))),
+  }
+}
+
+function toRowValue(value: unknown): RowValue {
+  if (value === null || value === undefined) return null
+  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean')
+    return value
+  if (typeof value === 'bigint') return value.toString()
+  return JSON.stringify(value)
+}
diff --git a/src/pages/guide/stablecoin-dex/view-the-orderbook.mdx b/src/pages/guide/stablecoin-dex/view-the-orderbook.mdx
index c151d7b7..9d2529c2 100644
--- a/src/pages/guide/stablecoin-dex/view-the-orderbook.mdx
+++ b/src/pages/guide/stablecoin-dex/view-the-orderbook.mdx
@@ -2,7 +2,7 @@
 description: Inspect Tempo's onchain orderbook using SQL queries. View spreads, order depth, individual orders, and recent trade prices with indexed data.
 ---
 
-import { IndexSupplyQuery } from '../../../components/IndexSupplyQuery'
+import { TidxQuery } from '../../../components/TidxQuery'
 
 
 # View the Orderbook
@@ -13,7 +13,7 @@ Query and inspect the orderbook to see available liquidity, price levels, and in
 
 We recommend using indexed data to query the orderbook for better performance and ease of use. While you can query logs and transactions directly from an RPC node, indexed data providers offer structured SQL interfaces that make complex queries simpler and more efficient.
 
-In this guide, we use [Index Supply](https://www.indexsupply.net) as our indexing provider, but you're free to choose your own indexing solution or query the chain directly based on your needs.
+In this guide, we use Tempo's [tidx](https://github.com/tempoxyz/tidx) indexer for structured SQL access to onchain data.
 
 ## Recipes
 
@@ -23,14 +23,15 @@ Query the best bid and ask prices to calculate the current spread for a token pa
 
 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.
+Find the highest bid prices (buyers) for the `USDC.e / pathUSD` book. This query filters out fully filled and cancelled orders, groups by tick, and shows the top 5 bid levels with their computed price and raw token liquidity.
 
-<IndexSupplyQuery
+<TidxQuery
   chainId={4217}
   title={'Best Bid Prices for USDC.e'}
   query={`SELECT
-    tick as price,
-    SUM(amount) as total_liquidity
+    tick,
+    round((100000 + tick) / 100000.0, 5) as price,
+    SUM(amount) as total_liquidity_raw
   FROM orderplaced
   WHERE token = '0x20c000000000000000000000b9537d11c60e8b50'
     AND "isBid" = true
@@ -43,20 +44,21 @@ Find the highest bid prices (buyers) for the `USDC.e / pathUSD` book. This query
       SELECT 1 FROM ordercancelled
       WHERE ordercancelled."orderId" = orderplaced."orderId"
     )
-  GROUP BY price
-  ORDER BY price DESC
+  GROUP BY tick
+  ORDER BY tick DESC
   LIMIT 5`}
   signatures={["OrderPlaced", "OrderFilled", "OrderCancelled"]}
 />
 
 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
+<TidxQuery
   chainId={4217}
   title={'Best Ask Prices for USDC.e'}
   query={`SELECT
-    tick as price,
-    SUM(amount) as total_liquidity
+    tick,
+    round((100000 + tick) / 100000.0, 5) as price,
+    SUM(amount) as total_liquidity_raw
   FROM orderplaced
   WHERE token = '0x20c000000000000000000000b9537d11c60e8b50'
     AND "isBid" = false
@@ -69,26 +71,27 @@ Find the lowest ask prices (sellers) for the `USDC.e / pathUSD` book. The spread
       SELECT 1 FROM ordercancelled
       WHERE ordercancelled."orderId" = orderplaced."orderId"
     )
-  GROUP BY price
-  ORDER BY price
+  GROUP BY tick
+  ORDER BY tick
   LIMIT 5`}
   signatures={["OrderPlaced", "OrderFilled", "OrderCancelled"]}
 />
 
 ### Inspect order depth
 
-View aggregated liquidity at each price level to understand the orderbook structure.
+View aggregated liquidity at each tick level to understand the orderbook structure.
 
 This query shows all active orders in the `USDC.e / pathUSD` book, including both regular and flip orders.
 
-<IndexSupplyQuery
+<TidxQuery
   chainId={4217}
   title={'USDC.e Order Depth by Price Level'}
   query={`SELECT
-    tick as price,
+    tick,
+    round((100000 + tick) / 100000.0, 5) as price,
     "isBid" as is_bid,
     COUNT("orderId") as num_orders,
-    SUM(amount) as total_amount
+    SUM(amount) as total_amount_raw
   FROM orderplaced
   WHERE token = '0x20c000000000000000000000b9537d11c60e8b50'
     AND NOT EXISTS (
@@ -100,8 +103,8 @@ This query shows all active orders in the `USDC.e / pathUSD` book, including bot
       SELECT 1 FROM ordercancelled
       WHERE ordercancelled."orderId" = orderplaced."orderId"
     )
-  GROUP BY price, is_bid
-  ORDER BY is_bid DESC, price
+  GROUP BY tick, is_bid
+  ORDER BY is_bid DESC, tick
   LIMIT 50`}
   signatures={["OrderPlaced", "OrderFilled", "OrderCancelled"]}
 />
@@ -112,16 +115,17 @@ This query shows all active orders in the `USDC.e / pathUSD` book, including bot
 
 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 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.
+This query inspects the details of the most recent order in the `USDC.e / pathUSD` book. It shows when the order was created, its tick and computed price, the raw order size, whether it's a flip order, and who placed it.
 
-<IndexSupplyQuery
+<TidxQuery
   chainId={4217}
   title={'Order Placement Details for USDC.e'}
   query={`SELECT
     "orderId",
     tick,
+    round((100000 + tick) / 100000.0, 5) as price,
     "isBid",
-    amount,
+    amount as amount_raw,
     "isFlipOrder",
     "flipTick",
     maker,
@@ -137,14 +141,14 @@ This query inspects the details of the most recent order in the `USDC.e / pathUS
 
 #### Order fill status
 
-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.
+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 raw amount filled in each transaction and whether it was a partial fill.
 
-<IndexSupplyQuery
+<TidxQuery
   chainId={4217}
   title={'Order Fill History for USDC.e'}
   query={`SELECT
     ofl."orderId",
-    ofl."amountFilled",
+    ofl."amountFilled" as amount_filled_raw,
     ofl."partialFill",
     ofl.block_num,
     ofl.tx_hash
@@ -161,7 +165,7 @@ Check if recent `USDC.e` orders have been partially or fully filled. This query
 
 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
+<TidxQuery
   chainId={4217}
   title={'Order Cancellation Status for USDC.e'}
   query={`SELECT
@@ -178,18 +182,19 @@ Check if a `USDC.e` order has been cancelled. This query returns a recent order
 
 ### Get recent trade prices
 
-View the last prices a token traded at to understand recent market activity.
+View the last trade ticks and computed prices 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 in the `USDC.e / pathUSD` book.
+This query joins order fill events with their corresponding placement details to show the tick, computed price, and raw fill amount for recent trades in the `USDC.e / pathUSD` book.
 
-<IndexSupplyQuery
+<TidxQuery
   chainId={4217}
   title={'Recent Trade Prices for USDC.e'}
   query={`SELECT
     ofl.block_num,
     ofl."orderId",
-    o.tick as price,
-    ofl."amountFilled",
+    o.tick,
+    round((100000 + o.tick) / 100000.0, 5) as price,
+    ofl."amountFilled" as amount_filled_raw,
     o."isBid"
   FROM orderfilled ofl
   INNER JOIN orderplaced o
diff --git a/src/wagmi.config.ts b/src/wagmi.config.ts
index a64b99a8..06cd35c8 100644
--- a/src/wagmi.config.ts
+++ b/src/wagmi.config.ts
@@ -15,8 +15,8 @@ import {
 } from 'wagmi'
 import { tempoWallet, webAuthn } from 'wagmi/tempo'
 import { alphaUsd, betaUsd, pathUsd, thetaUsd } from './components/guides/tokens'
-import * as WebAuthnCeremony from './lib/webAuthnCeremony.ts'
 import { feeToken, moderatoZones } from './lib/private-zones.ts'
+import * as WebAuthnCeremony from './lib/webAuthnCeremony.ts'
 
 const chain =
   import.meta.env.VITE_TEMPO_ENV === 'localnet'
diff --git a/tsconfig.node.json b/tsconfig.node.json
index a31a1dba..22cbf9fd 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -21,5 +21,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "env.d.ts"]
 }