Market data in your app

// Market data in your app: a small backend that fetches Blockmetric data on the server, caches it and hands your
// frontend exactly what it shows, with the credit line the licence asks for. Node 18+, no dependencies.
// Your key never reaches the browser, and 1,000 visitors cost the same few API requests as one.
//
//   export BLOCKMETRIC_API_KEY=bm_live_...            # API Pro: display licence for data shown to your users
//   export BLOCKMETRIC_BASE_URL=https://<domain>/api/v1
//   node server.mjs                                    # http://localhost:8080 and http://localhost:8080/api/market
//
// Options: PORT (8080), CACHE_SECONDS (30), TOP (10), ONCE=1 (print the JSON once, then exit).
import http from 'node:http'

const BASE = (process.env.BLOCKMETRIC_BASE_URL ?? '').replace(/\/+$/, '')
const KEY = process.env.BLOCKMETRIC_API_KEY
if (!BASE) throw new Error('Set BLOCKMETRIC_BASE_URL, e.g. https://<domain>/api/v1')
const PORT = Number(process.env.PORT ?? 8080)
const CACHE_SECONDS = Number(process.env.CACHE_SECONDS ?? 30)
const TOP = Number(process.env.TOP ?? 10)

// Revalidation with ETag: an unchanged answer comes back as 304 without a body.
const etags = new Map()
async function api(path) {
  const prev = etags.get(path)
  const headers = { ...(KEY ? { Authorization: `Bearer ${KEY}` } : { 'X-Blockmetric-Access': 'public' }), ...(prev ? { 'If-None-Match': prev.etag } : {}) }
  const res = await fetch(BASE + path, { headers, signal: AbortSignal.timeout(20_000) })
  if (res.status === 304 && prev) return prev.body
  const body = await res.json()
  if (!res.ok) throw new Error(`${res.status} ${body.error?.code}: ${body.error?.message}`)
  if (res.headers.get('etag')) etags.set(path, { etag: res.headers.get('etag'), body })
  return body
}

/** "Data by Blockmetric · Source: A · B" from several credit lines (the sources of every answer, each named once). */
export function credit(lines) {
  const sources = [...new Set(lines.flatMap((l) => (l.split(' · Source: ')[1] ?? '').split(' · ').filter(Boolean)))]
  return `${lines[0].split(' · Source: ')[0]}${sources.length ? ` · Source: ${sources.join(' · ')}` : ''}`
}

/** What the frontend needs, nothing more: top markets by open interest, 24h liquidations and the credit line. */
async function build() {
  const [markets, liq] = await Promise.all([api('/markets?venue=hyperliquid'), api('/liquidations/summary?hours=24')])
  return {
    updatedAt: markets.meta.updatedAt,
    markets: markets.data.slice(0, TOP).map((m) => ({ coin: m.coin, mark: m.mark, fundingApr: m.fundingApr, openInterestUsd: m.openInterestUsd, volume24hUsd: m.volume24hUsd })),
    liquidations24h: { totalUsd: liq.data.totalUsd, longUsd: liq.data.longUsd, shortUsd: liq.data.shortUsd },
    // Show this credit next to the data. Each answer's meta.attribution names its own sources; the page shows two
    // answers, so the credit names the sources of both.
    attribution: { text: credit([markets.meta.attribution.text, liq.meta.attribution.text]), url: markets.meta.attribution.url },
    license: markets.meta.license.id,
  }
}

let cache = { at: 0, value: null, pending: null }
async function cached() {
  if (cache.value && Date.now() - cache.at < CACHE_SECONDS * 1000) return cache.value
  cache.pending ??= build()
    .then((value) => (cache = { at: Date.now(), value, pending: null }).value)
    .catch((e) => {
      cache.pending = null
      if (cache.value) return cache.value // serve the last good answer while the API is unreachable
      throw e
    })
  return cache.pending
}

const PAGE = `<!doctype html><meta charset="utf-8"><title>Markets</title>
<table id="t"><thead><tr><th>Coin</th><th>Price</th><th>Funding (APR)</th><th>Open interest</th></tr></thead><tbody></tbody></table>
<p id="liq"></p><p><small id="credit"></small></p>
<script>
const usd = (n) => '$' + (n >= 1e9 ? (n / 1e9).toFixed(2) + 'B' : (n / 1e6).toFixed(1) + 'M')
fetch('/api/market').then((r) => r.json()).then((d) => {
  document.querySelector('#t tbody').innerHTML = d.markets.map((m) => '<tr><td>' + m.coin + '</td><td>' + m.mark.toLocaleString('en-US') + '</td><td>' + (m.fundingApr * 100).toFixed(1) + ' %</td><td>' + usd(m.openInterestUsd) + '</td></tr>').join('')
  document.querySelector('#liq').textContent = 'Liquidated in 24h: ' + usd(d.liquidations24h.totalUsd)
  const a = document.createElement('a'); a.href = d.attribution.url; a.textContent = d.attribution.text; a.rel = 'noopener'
  document.querySelector('#credit').append(a, ' · updated ' + d.updatedAt.slice(11, 16) + ' UTC')
})
</script>`

if (process.env.ONCE === '1') {
  console.log(JSON.stringify(await cached(), null, 2))
} else {
  http
    .createServer(async (req, res) => {
      if (req.url === '/api/market') {
        try {
          const body = JSON.stringify(await cached())
          res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': `public, max-age=${CACHE_SECONDS}` }).end(body)
        } catch (e) {
          res.writeHead(502, { 'Content-Type': 'application/json' }).end(JSON.stringify({ error: e.message }))
        }
      } else if (req.url === '/') res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }).end(PAGE)
      else res.writeHead(404).end()
    })
    .listen(PORT, () => console.log(`http://localhost:${PORT}`))
}