mppx 0.5.3 → 0.5.4

package/dist/tempo/server/internal/html.gen.js.map

@@ -1 +1 @@
-{"version":3,"file":"html.gen.js","sourceRoot":"","sources":["../../../../src/tempo/server/internal/html.gen.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,8wwaAA8wwa,CAAA"}
+{"version":3,"file":"html.gen.js","sourceRoot":"","sources":["../../../../src/tempo/server/internal/html.gen.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,2r9aAA2r9a,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mppx",
   "type": "module",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "main": "./dist/index.js",
   "license": "MIT",
   "files": [

package/src/cli/cli.ts

@@ -32,6 +32,7 @@ import {
   printResponseHeaders,
   prompt,
   resolveChain,
+  resolveRpcUrl,
 } from './utils.js'
 
 const packageJson = createRequire(import.meta.url)('../../package.json') as {
@@ -516,8 +517,9 @@ const account = Cli.create('account', {
         ? link(`${explorerUrl}/address/${acct.address}`, acct.address)
         : acct.address
       console.log(pc.dim(`Address ${addrDisplay}`))
-      resolveChain(c.options)
-        .then((chain) => createClient({ chain, transport: http(c.options.rpcUrl) }))
+      const rpcUrl = resolveRpcUrl(c.options.rpcUrl)
+      resolveChain({ rpcUrl })
+        .then((chain) => createClient({ chain, transport: http(rpcUrl) }))
         .then((client) =>
           import('viem/tempo').then(({ Actions }) =>
             Actions.faucet.fund(client, { account: acct }).catch(() => {}),
@@ -629,8 +631,9 @@ const account = Cli.create('account', {
           return c.error({ code: 'ACCOUNT_NOT_FOUND', message: 'No account found.', exitCode: 69 })
       }
       const acct = privateKeyToAccount(key as `0x${string}`)
-      const chain = await resolveChain(c.options)
-      const client = createClient({ chain, transport: http(c.options.rpcUrl) })
+      const rpcUrl = resolveRpcUrl(c.options.rpcUrl)
+      const chain = await resolveChain({ rpcUrl })
+      const client = createClient({ chain, transport: http(rpcUrl) })
       console.log(`Funding "${accountName}" on ${chainName(chain)}`)
       try {
         const { Actions } = await import('viem/tempo')
@@ -711,8 +714,8 @@ const account = Cli.create('account', {
           })
         }
         const address = tempoEntry.wallet_address as Address
-        const rpcUrl = c.options.rpcUrl ?? (process.env.MPPX_RPC_URL || undefined)
-        const chain = rpcUrl ? await resolveChain({ rpcUrl }) : tempoMainnet
+        const rpcUrl = resolveRpcUrl(c.options.rpcUrl)
+        const chain = await resolveChain({ rpcUrl })
         const explorerUrl = chain.blockExplorers?.default?.url
         const addrDisplay = explorerUrl
           ? link(`${explorerUrl}/address/${address}`, address)
@@ -744,8 +747,8 @@ const account = Cli.create('account', {
           return c.error({ code: 'ACCOUNT_NOT_FOUND', message: 'No account found.', exitCode: 69 })
       }
       const acct = privateKeyToAccount(key as `0x${string}`)
-      const rpcUrl = c.options.rpcUrl ?? (process.env.MPPX_RPC_URL || undefined)
-      const chain = rpcUrl ? await resolveChain({ rpcUrl }) : tempoMainnet
+      const rpcUrl = resolveRpcUrl(c.options.rpcUrl)
+      const chain = await resolveChain({ rpcUrl })
       const explorerUrl = chain.blockExplorers?.default?.url
       const addrDisplay = explorerUrl
         ? link(`${explorerUrl}/address/${acct.address}`, acct.address)

package/src/cli/plugins/tempo.ts

@@ -24,6 +24,7 @@ import {
   link,
   pc,
   resolveChain,
+  resolveRpcUrl,
 } from '../utils.js'
 import { createPlugin, type Plugin } from './plugin.js'
 
@@ -67,7 +68,7 @@ export function tempo() {
         useTempoCliSign = true
         const tempoEntry = resolveTempoAccount(accountName)
         if (tempoEntry) {
-          const rpcUrl = options.rpcUrl ?? process.env.RPC_URL
+          const rpcUrl = resolveRpcUrl(options.rpcUrl)
           client = createClient({
             chain: await resolveChain({ rpcUrl }),
             transport: http(rpcUrl),
@@ -107,7 +108,7 @@ export function tempo() {
       } else account = privateKeyToAccount(privateKey as `0x${string}`)
 
       if (!useTempoCliSign && account) {
-        const rpcUrl = options.rpcUrl ?? process.env.RPC_URL
+        const rpcUrl = resolveRpcUrl(options.rpcUrl)
         client = createClient({
           chain: await resolveChain({ rpcUrl }),
           transport: http(rpcUrl),

package/src/cli/utils.test.ts

@@ -0,0 +1,64 @@
+import { tempo as tempoMainnet, tempoModerato } from 'viem/chains'
+import { afterEach, describe, expect, test } from 'vp/test'
+
+import { resolveChain, resolveRpcUrl } from './utils.js'
+
+describe('resolveRpcUrl', () => {
+  afterEach(() => {
+    delete process.env.MPPX_RPC_URL
+    delete process.env.RPC_URL
+  })
+
+  test('returns explicit value when provided', () => {
+    process.env.MPPX_RPC_URL = 'https://env.example.com'
+    expect(resolveRpcUrl('https://explicit.example.com')).toBe('https://explicit.example.com')
+  })
+
+  test('falls back to MPPX_RPC_URL env var', () => {
+    process.env.MPPX_RPC_URL = 'https://mppx.example.com'
+    process.env.RPC_URL = 'https://rpc.example.com'
+    expect(resolveRpcUrl()).toBe('https://mppx.example.com')
+  })
+
+  test('falls back to RPC_URL env var when MPPX_RPC_URL is not set', () => {
+    process.env.RPC_URL = 'https://rpc.example.com'
+    expect(resolveRpcUrl()).toBe('https://rpc.example.com')
+  })
+
+  test('returns undefined when nothing is set', () => {
+    expect(resolveRpcUrl()).toBeUndefined()
+  })
+
+  test('trims whitespace from env vars', () => {
+    process.env.MPPX_RPC_URL = '  https://mppx.example.com  '
+    expect(resolveRpcUrl()).toBe('https://mppx.example.com')
+  })
+
+  test('skips empty MPPX_RPC_URL and falls back to RPC_URL', () => {
+    process.env.MPPX_RPC_URL = '  '
+    process.env.RPC_URL = 'https://rpc.example.com'
+    expect(resolveRpcUrl()).toBe('https://rpc.example.com')
+  })
+})
+
+describe('resolveChain', () => {
+  afterEach(() => {
+    delete process.env.MPPX_RPC_URL
+    delete process.env.RPC_URL
+  })
+
+  test('defaults to tempo mainnet when no rpcUrl is provided', async () => {
+    const chain = await resolveChain()
+    expect(chain.id).toBe(tempoMainnet.id)
+  })
+
+  test('defaults to tempo mainnet when rpcUrl is undefined', async () => {
+    const chain = await resolveChain({ rpcUrl: undefined })
+    expect(chain.id).toBe(tempoMainnet.id)
+  })
+
+  test('does not default to testnet', async () => {
+    const chain = await resolveChain()
+    expect(chain.id).not.toBe(tempoModerato.id)
+  })
+})

package/src/cli/utils.ts

@@ -221,17 +221,23 @@ export function fmtBalance(
   return `${dec ? `${formatted}.${dec}` : formatted} ${sym}`
 }
 
+/** Resolve RPC URL from explicit option, then MPPX_RPC_URL, then RPC_URL env vars. */
+export function resolveRpcUrl(explicit?: string | undefined): string | undefined {
+  return explicit ?? (process.env.MPPX_RPC_URL?.trim() || process.env.RPC_URL?.trim() || undefined)
+}
+
 export async function resolveChain(opts: { rpcUrl?: string | undefined } = {}): Promise<Chain> {
-  if (!opts.rpcUrl) return tempoModerato
+  const rpcUrl = resolveRpcUrl(opts.rpcUrl)
+  if (!rpcUrl) return tempoMainnet
   const { getChainId } = await import('viem/actions')
-  const chainId = await getChainId(createClient({ transport: http(opts.rpcUrl) }))
+  const chainId = await getChainId(createClient({ transport: http(rpcUrl) }))
   const allExports = Object.values(await import('viem/chains')) as unknown[]
   const candidates = allExports.filter(
     (c): c is Chain =>
       typeof c === 'object' && c !== null && 'id' in c && (c as Chain).id === chainId,
   )
   const found = candidates.find((c) => 'serializers' in c && c.serializers) ?? candidates[0]
-  if (!found) throw new Error(`Unknown chain ID ${chainId} from RPC ${opts.rpcUrl}`)
+  if (!found) throw new Error(`Unknown chain ID ${chainId} from RPC ${rpcUrl}`)
   return found
 }
 
@@ -306,7 +312,7 @@ export async function fetchBalanceLines(
 
   const mainnetClient = createClient({
     chain: tempoMainnet,
-    transport: http(process.env.MPPX_RPC_URL || undefined),
+    transport: http(resolveRpcUrl()),
   })
   const mainnetExplorerUrl = tempoMainnet.blockExplorers?.default?.url
   const mainnetResults = await Promise.all(

package/src/server/Transport.test.ts

@@ -101,6 +101,222 @@ describe('http', () => {
     })
   })
 
+  describe('respondChallenge html', () => {
+    const htmlOptions = {
+      config: { foo: 'bar' },
+      content: '<script src="/pay.js"></script>',
+      formatAmount: () => '$10.00',
+      text: undefined,
+      theme: undefined,
+    } satisfies Parameters<Transport.Http['respondChallenge']>[0]['html']
+
+    test('returns html when Accept includes text/html', async () => {
+      const transport = Transport.http()
+      const request = new Request('https://example.com', {
+        headers: { Accept: 'text/html' },
+      })
+
+      const response = await transport.respondChallenge({
+        challenge,
+        input: request,
+        html: htmlOptions,
+      })
+
+      expect(response.status).toBe(402)
+      expect(response.headers.get('Content-Type')).toBe('text/html; charset=utf-8')
+      expect(response.headers.get('WWW-Authenticate')).toContain('Payment')
+      expect(response.headers.get('Cache-Control')).toBe('no-store')
+
+      const body = await response.text()
+      expect(body).toContain('<!doctype html>')
+      expect(body).toContain('<title>Payment Required</title>')
+      expect(body).toContain('$10.00')
+      expect(body).toContain('Payment Required')
+      expect(body).toContain('<script src="/pay.js"></script>')
+      expect(body).toContain('__MPPX_DATA__')
+    })
+
+    test('returns service worker script when __mppx_worker param is set', async () => {
+      const transport = Transport.http()
+      const request = new Request('https://example.com?__mppx_worker')
+
+      const response = await transport.respondChallenge({
+        challenge,
+        input: request,
+        html: htmlOptions,
+      })
+
+      expect(response.status).toBe(200)
+      expect(response.headers.get('Content-Type')).toBe('application/javascript')
+      expect(response.headers.get('Cache-Control')).toBe('no-store')
+
+      const body = await response.text()
+      expect(body).toContain('addEventListener')
+    })
+
+    test('does not return html when Accept does not include text/html', async () => {
+      const transport = Transport.http()
+      const request = new Request('https://example.com', {
+        headers: { Accept: 'application/json' },
+      })
+
+      const response = await transport.respondChallenge({
+        challenge,
+        input: request,
+        html: htmlOptions,
+      })
+
+      expect(response.status).toBe(402)
+      expect(response.headers.get('Content-Type')).toBeNull()
+      expect(await response.text()).toBe('')
+    })
+
+    test('renders description when challenge has one', async () => {
+      const transport = Transport.http()
+      const request = new Request('https://example.com', {
+        headers: { Accept: 'text/html' },
+      })
+
+      const challengeWithDescription = {
+        ...challenge,
+        description: 'Access to premium content',
+      }
+
+      const response = await transport.respondChallenge({
+        challenge: challengeWithDescription,
+        input: request,
+        html: htmlOptions,
+      })
+
+      const body = await response.text()
+      expect(body).toContain('Access to premium content')
+      expect(body).toContain('mppx-summary-description')
+    })
+
+    test('renders expires when challenge has one', async () => {
+      const transport = Transport.http()
+      const request = new Request('https://example.com', {
+        headers: { Accept: 'text/html' },
+      })
+
+      const response = await transport.respondChallenge({
+        challenge,
+        input: request,
+        html: htmlOptions,
+      })
+
+      const body = await response.text()
+      expect(body).toContain('Expires at')
+      expect(body).toContain('2025-01-01T00:00:00.000Z')
+      expect(body).toContain('mppx-summary-expires')
+    })
+
+    test('does not render description when challenge lacks one', async () => {
+      const transport = Transport.http()
+      const request = new Request('https://example.com', {
+        headers: { Accept: 'text/html' },
+      })
+
+      const challengeNoDescription = { ...challenge }
+      delete (challengeNoDescription as any).description
+
+      const response = await transport.respondChallenge({
+        challenge: challengeNoDescription,
+        input: request,
+        html: htmlOptions,
+      })
+
+      const body = await response.text()
+      expect(body).not.toMatch(/<p class="mppx-summary-description"/)
+    })
+
+    test('applies custom text', async () => {
+      const transport = Transport.http()
+      const request = new Request('https://example.com', {
+        headers: { Accept: 'text/html' },
+      })
+
+      const response = await transport.respondChallenge({
+        challenge,
+        input: request,
+        html: {
+          ...htmlOptions,
+          text: { title: 'Pay Up', paymentRequired: 'Gotta Pay' },
+        },
+      })
+
+      const body = await response.text()
+      expect(body).toContain('<title>Pay Up</title>')
+      expect(body).toContain('Gotta Pay')
+    })
+
+    test('applies custom theme logo', async () => {
+      const transport = Transport.http()
+      const request = new Request('https://example.com', {
+        headers: { Accept: 'text/html' },
+      })
+
+      const response = await transport.respondChallenge({
+        challenge,
+        input: request,
+        html: {
+          ...htmlOptions,
+          theme: { logo: 'https://example.com/logo.png' },
+        },
+      })
+
+      const body = await response.text()
+      expect(body).toContain('https://example.com/logo.png')
+      expect(body).toContain('mppx-logo')
+    })
+
+    test('embeds config and challenge in data script', async () => {
+      const transport = Transport.http()
+      const request = new Request('https://example.com', {
+        headers: { Accept: 'text/html' },
+      })
+
+      const response = await transport.respondChallenge({
+        challenge,
+        input: request,
+        html: htmlOptions,
+      })
+
+      const body = await response.text()
+      // Extract the JSON data from the script tag
+      const dataMatch = body.match(
+        /<script id="__MPPX_DATA__" type="application\/json">\s*([\s\S]*?)\s*<\/script>/,
+      )
+      expect(dataMatch).not.toBeNull()
+
+      const data = JSON.parse(dataMatch?.[1]?.replace(/\\u003c/g, '<') ?? '')
+      expect(data.config).toEqual({ foo: 'bar' })
+      expect(data.challenge.id).toBe(challenge.id)
+      expect(data.challenge.method).toBe('tempo')
+      expect(data.text.paymentRequired).toBe('Payment Required')
+    })
+
+    test('sanitizes html in formatted amount', async () => {
+      const transport = Transport.http()
+      const request = new Request('https://example.com', {
+        headers: { Accept: 'text/html' },
+      })
+
+      const response = await transport.respondChallenge({
+        challenge,
+        input: request,
+        html: {
+          ...htmlOptions,
+          formatAmount: () => '<script>alert("xss")</script>',
+        },
+      })
+
+      const body = await response.text()
+      expect(body).not.toContain('<script>alert("xss")</script>')
+      expect(body).toContain('&lt;script&gt;')
+    })
+  })
+
   describe('respondChallenge with error status codes', () => {
     test('BadRequestError returns 400', async () => {
       const transport = Transport.http()

package/src/server/Transport.ts

@@ -7,6 +7,7 @@ import type { Distribute, UnionToIntersection } from '../internal/types.js'
 import * as core_Mcp from '../Mcp.js'
 import * as Receipt from '../Receipt.js'
 import * as Html from './internal/html/config.js'
+import { html } from './internal/html/config.js'
 import { serviceWorker } from './internal/html/serviceWorker.gen.js'
 
 export { type McpSdk, mcpSdk } from '../mcp-sdk/server/Transport.js'
@@ -128,7 +129,7 @@ export function http(): Http {
       return Credential.deserialize(payment)
     },
 
-    respondChallenge(options) {
+    async respondChallenge(options) {
       const { challenge, error, input } = options
 
       if (options.html && new URL(input.url).searchParams.has(Html.serviceWorkerParam))
@@ -145,38 +146,60 @@ export function http(): Http {
         'Cache-Control': 'no-store',
       }
 
-      const body = (() => {
+      const body = await (async () => {
         if (options.html && input.headers.get('Accept')?.includes('text/html')) {
           headers['Content-Type'] = 'text/html; charset=utf-8'
-          const html = String.raw
+
+          const theme = Html.mergeDefined(
+            {
+              favicon: undefined as Html.Theme['favicon'],
+              fontUrl: undefined as Html.Theme['fontUrl'],
+              logo: undefined as Html.Theme['logo'],
+              ...Html.defaultTheme,
+            },
+            (options.html.theme as never) ?? {},
+          )
+          const text = Html.sanitizeRecord(
+            Html.mergeDefined(Html.defaultText, (options.html.text as never) ?? {}),
+          )
+          const amount = await options.html.formatAmount(challenge.request)
+
           return html`<!doctype html>
             <html lang="en">
               <head>
                 <meta charset="UTF-8" />
                 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-                <title>Payment Required</title>
-                <style>
-                  :root {
-                    color-scheme: dark light;
-                  }
-                </style>
+                <meta name="robots" content="noindex" />
+                <meta name="color-scheme" content="${theme.colorScheme}" />
+                <title>${text.title}</title>
+                ${Html.favicon(theme, challenge.realm)} ${Html.font(theme)} ${Html.style(theme)}
               </head>
               <body>
-                <h1>Payment Required</h1>
-                <pre>
-${Json.stringify(challenge, null, 2)
-                    .replace(/&/g, '&amp;')
-                    .replace(/</g, '&lt;')
-                    .replace(/>/g, '&gt;')}</pre
-                >
-                <div id="root"></div>
-                <script id="${Html.dataId}" type="application/json">
-                  ${Json.stringify({ config: options.html.config, challenge }).replace(
-                    /</g,
-                    '\\u003c',
-                  )}
-                </script>
-                ${options.html.content}
+                <main>
+                  <header class="${Html.classNames.header}">
+                    ${Html.logo(theme)}
+                    <span>${text.paymentRequired}</span>
+                  </header>
+                  <section class="${Html.classNames.summary}" aria-label="Payment summary">
+                    <h1 class="${Html.classNames.summaryAmount}">${Html.sanitize(amount)}</h1>
+                    ${challenge.description
+                      ? `<p class="${Html.classNames.summaryDescription}">${Html.sanitize(challenge.description)}</p>`
+                      : ''}
+                    ${challenge.expires
+                      ? `<p class="${Html.classNames.summaryExpires}">${text.expires} <time datetime="${new Date(challenge.expires).toISOString()}">${new Date(challenge.expires).toLocaleString()}</time></p>`
+                      : ''}
+                  </section>
+                  <div id="${Html.rootId}" aria-label="Payment form"></div>
+                  <script id="${Html.dataId}" type="application/json">
+                    ${Json.stringify({
+                      config: options.html.config,
+                      challenge,
+                      text,
+                      theme,
+                    } satisfies Html.Data).replace(/</g, '\\u003c')}
+                  </script>
+                  ${options.html.content}
+                </main>
               </body>
             </html> `
         }