tapimo 0.5.0 → 0.5.1

package/src/ApiKeys.test.ts

@@ -114,6 +114,8 @@ describe('mint', () => {
       'zone:abc:read',
       'zone:1.5:read',
       'zone:-1:read',
+      'zone:0:read',
+      'zone:000421700001:read',
       'zone:1:write',
     ])
       await expect(

package/src/App.test.ts

@@ -74,6 +74,18 @@ describe('create', () => {
     `)
   })
 
+  test('ignores client-supplied request ids', async () => {
+    const entries: Log.Entry[] = []
+    const app = TestApp.create({ logger: (entry) => void entries.push(entry) })
+    const response = await app.request('/health', {
+      headers: { 'tempo-request-id': 'client-controlled' },
+    })
+    const requestId = response.headers.get('tempo-request-id')
+
+    expect(requestId === 'client-controlled').toMatchInlineSnapshot(`false`)
+    expect(entries[0]?.requestId === requestId).toMatchInlineSnapshot(`true`)
+  })
+
   test('documents supported API key transports', async () => {
     const app = TestApp.create()
     const spec = await (await app.request('/openapi.json')).json()
@@ -473,7 +485,7 @@ describe('create', () => {
     // key matches, so a `:chainId//icons` regression would drop every logo.
     const db = TestApp.database()
     await TestApp.verifiedSeed(db, 42431)
-    const app = App.create({ db }).route(
+    const app = App.create({ db, defaultChainId: 42431 }).route(
       '/',
       App.data({
         assets: {
@@ -485,7 +497,6 @@ describe('create', () => {
                 }
               : undefined,
         },
-        defaultChainId: 42431,
       }),
     )
     const response = await app.request('/v1/tokens?verified=true')

package/src/App.ts

@@ -149,6 +149,13 @@ export function create<const path extends string = '/'>(options: create.Options<
   // `options.db`, API-key records in `options.kv`.
   const store = options.cache?.store ?? Store.memory()
   const scopeCatalog = Scope.extend(options.scopes)
+  const defaultChainId = options.defaultChainId ?? Viem.defaultChainId
+  const getClient = Viem.createGetClient({ defaultChainId, rpc: options.rpc })
+  const supportedChainIds = new Set<number>([
+    ...Object.keys(Viem.url).map(Number),
+    defaultChainId,
+    ...(options.supportedChainIds ?? []),
+  ])
 
   // Build the app in two phases: register middleware imperatively, then chain
   // route mounts so the merged Hono schema flows through the return type. The
@@ -165,7 +172,11 @@ export function create<const path extends string = '/'>(options: create.Options<
       '*',
       hono_compress(typeof options.compress === 'object' ? options.compress : undefined),
     )
-  base.use('*', requestId({ headerName: 'tempo-request-id' }))
+  base.use('*', requestId())
+  base.use('*', async (c, next) => {
+    await next()
+    c.header('tempo-request-id', c.get('requestId'))
+  })
   // One canonical structured log line per request, plus request metrics.
   // Registered after `requestId` (the entry embeds it) and before the timing and
   // edge-cache layers so the entry covers edge-cache hits and includes the
@@ -233,11 +244,15 @@ export function create<const path extends string = '/'>(options: create.Options<
   base.use('*', async (c, next) => {
     c.set('analytics', analytics)
     c.set('basePath', basePath)
+    c.set('chainId', defaultChainId)
     c.set('db', db.source)
     c.set('dbCached', db.cached ?? db.source)
+    c.set('getClient', (chainId) => getClient(chainId, Auth.getPrincipal(c)))
     c.set('kv', options.kv)
+    c.set('rpc', options.rpc)
     c.set('scopeCatalog', scopeCatalog)
     c.set('store', store)
+    c.set('supportedChainIds', supportedChainIds)
     await next()
   })
 
@@ -271,7 +286,10 @@ export function create<const path extends string = '/'>(options: create.Options<
   const route = app.route.bind(app)
   ;(app as unknown as { route: typeof route }).route = ((path, sub) => {
     const entry = Metadata.read(sub)
-    if (entry) metadata.push(entry)
+    if (entry) {
+      metadata.push(entry)
+      for (const chainId of entry.supportedChainIds ?? []) supportedChainIds.add(chainId)
+    }
     return route(path, sub)
   }) as typeof route
 
@@ -442,9 +460,9 @@ export function listener(app: { fetch: NodeFetch }): Listener {
 
 export declare namespace create {
   /**
-   * Options for creating the Tempo API Hono app — the shared core:
-   * db/cache/kv/auth capabilities and cross-cutting middleware. Chain-data
-   * configuration belongs to {@link data}; email to {@link management}.
+   * Options for creating the Tempo API Hono app: shared chain, RPC, database,
+   * cache, authentication, and cross-cutting configuration. Email belongs to
+   * {@link management}.
    */
   type Options<path extends string = '/'> = {
     /** Analytics store for usage reads (e.g. `Analytics.clickhouse(...)`), or a per-request factory. Accepts `{ source }` to mirror `db`. Omit to leave usage analytics unconfigured — usage routes answer 501. Ingest happens outside this app (queue consumer via `Analytics.handleQueue`). */
@@ -459,6 +477,8 @@ export declare namespace create {
     cors?: boolean | Cors | undefined
     /** Authoritative Postgres store backing stateful features (webhooks, verified tokens). Pass a long-lived `Db.postgres(...)` singleton on Node, or a factory (`() => Db.postgres(...)`) on Workers so each request builds a fresh Hyperdrive-pooled connection. Pass `{ source, cached }` to route staleness-tolerant reads (verified tokens) through a second, query-caching Hyperdrive config; `source` stays uncached for read-after-write correctness. Apply migrations out of band via `tapimo admin migrate`. */
     db: Db.Source | { cached?: Db.Source | undefined; source: Db.Source }
+    /** Default Tempo chain id for requests that omit `chainId`. */
+    defaultChainId?: Viem.ChainId | undefined
     /** KV state store backing API-key records (e.g. `Store.cloudflareKv(...)`). Omit to leave API-key auth closed — every token resolves to `null`. */
     kv?: Kv | undefined
     /** Request logging. Disabled by default. Pass `true` to emit one canonical structured log entry per request through the level-matched console method (indexed by Workers Logs); a level (e.g. `'warn'`) to emit only that level and above (dropping successful-request info lines); or an emit function for a custom sink. */
@@ -467,10 +487,14 @@ export declare namespace create {
     metrics?: Metrics.Metrics | undefined
     /** Base path to mount API handlers under. Provided as a literal via the `path` generic so the resulting Hono schema keeps typed route paths for `testClient`. */
     path?: path | undefined
+    /** Tempo RPC options, including per-request routing by request principal. */
+    rpc?: Viem.getClient.Rpc | undefined
     /** OpenAPI `servers` for the generated document. Defaults to a single relative server (the host serving the doc), so the reference targets the deployment it is served from. Set the canonical public URL(s) here, e.g. `[{ url: 'https://api.tempo.xyz' }]`. */
     servers?: readonly Server[] | undefined
     /** Host-defined API-key scopes appended to the built-in {@link Scope.catalog}. */
     scopes?: readonly Scope.Entry[] | undefined
+    /** Extra chain ids served beyond the built-in chains and `defaultChainId`. */
+    supportedChainIds?: readonly number[] | undefined
   }
 
   /** KV state-store configuration. */
@@ -532,6 +556,8 @@ export declare namespace create {
     docs?: Docs | undefined
     /** Security scheme definitions this group's routes reference (e.g. the session cookie). */
     securitySchemes?: Record<string, unknown> | undefined
+    /** Chain ids served by this route group, merged before auth handles the first request. */
+    supportedChainIds?: readonly number[] | undefined
     /** Root-level OpenAPI tag definitions for this group's operations. */
     tags?: readonly Tag[] | undefined
     /** Builds the OAS 3.1 `webhooks` block documenting outbound deliveries, emitted only when the group's webhook routes are mounted. Called during spec generation only, keeping schema conversion off isolate startup. */

package/src/Assets.ts

@@ -26,9 +26,9 @@ export type Assets = {
 export function cloudflareR2(bucket: cloudflareR2.Bucket): Assets {
   return {
     async get(key) {
-      // Exact keys sort first, so expected misses avoid `NoSuchKey` spans.
-      const { objects } = await bucket.list({ limit: 1, prefix: key })
-      if (objects[0]?.key !== key) return undefined
+      // Legacy source-extension aliases may sort before the extensionless key.
+      const { objects } = await bucket.list({ limit: 1_000, prefix: key })
+      if (!objects.some((object) => object.key === key)) return undefined
       const object = await bucket.get(key)
       if (!object) return undefined
       return {

package/src/Client.test-d.ts

@@ -1193,7 +1193,7 @@ describe('narrows responses by status', () => {
     const client = Client.create()
     const res = await client.v1.funding.quotes.$get({
       query: {
-        provider: 'relay',
+        provider: 'across',
         sourceAmount: '1000000',
         sourceChain: 'base',
         sourceToken: 'USDC',
@@ -1208,7 +1208,8 @@ describe('narrows responses by status', () => {
         expectTypeOf(json.data[0]!.sourceAmount).toEqualTypeOf<
           z.output<typeof Funding.schema.quoteFunding.Response>['data'][number]['sourceAmount']
         >()
-        expectTypeOf(json.data[0]!.provider.id).toEqualTypeOf<'relay'>()
+        expectTypeOf(json.data[0]!.provider.id).toEqualTypeOf<'across' | 'relay' | 'rhino'>()
+        expectTypeOf(json.data[0]!.quote.expiresAt).toEqualTypeOf<string | undefined>()
         expectTypeOf(json.data[0]!.quote.outputAmount).toEqualTypeOf<string>()
         void json
         return

package/src/Scope.ts

@@ -86,8 +86,10 @@ export namespace schema {
   /** A concrete per-zone read scope (`zone:421700001:read`). */
   export const Zone = z
     .templateLiteral(['zone:', z.int(), ':read'])
-    // `z.int()` also matches a sign; zone chain ids are positive.
-    .check(z.regex(/^zone:\d+:read$/), z.describe('Per-zone read scope (`zone:<chainId>:read`).'))
+    .check(
+      z.regex(/^zone:[1-9]\d*:read$/),
+      z.describe('Per-zone read scope (`zone:<chainId>:read`).'),
+    )
 }
 
 /** Per-zone read scope, granting access to one zone chain id. */

package/src/Webhooks.ts

@@ -28,7 +28,7 @@ export { eventTypes, schema } from './apps/data/routes/webhooks.js'
  *
  * The monitoring event types (`log:emitted`, `block:created`,
  * `transaction:included`) scan a confirmed window directly over JSON-RPC, so the
- * poller builds memoized viem clients (via {@link Viem.getClient}); the legacy
+ * poller builds memoized viem clients (via {@link Viem.createGetClient}); the legacy
  * `token:transfer` type still reads from TIDX, so it
  * also builds memoized TIDX clients (via {@link Tidx.createGetClient}) when a
  * `tidx` config is supplied. The poller keeps `App.create` a pure Hono app: it
@@ -42,15 +42,10 @@ export function createPoller(options: createPoller.Options): createPoller.Poller
   const getTidx = options.tidx
     ? Tidx.createGetClient({ defaultChainId: options.defaultChainId, tidx: options.tidx })
     : undefined
-  const clients = new Map<number, Viem.getClient.ReturnType>()
-  const getClient = (chainId: Viem.ChainId) => {
-    let client = clients.get(chainId)
-    if (!client) {
-      client = Viem.getClient({ chainId, rpc: options.rpc })
-      clients.set(chainId, client)
-    }
-    return client
-  }
+  const getClient = Viem.createGetClient({
+    defaultChainId: options.defaultChainId,
+    rpc: options.rpc,
+  })
 
   const metrics = options.metrics ? MetricSink.webhooks(options.metrics) : undefined
 

package/src/admin/apps/api-keys.test.ts

@@ -68,6 +68,19 @@ describe('POST /api-keys', () => {
     expect(resolved?.environment).toBe('sandbox')
   })
 
+  test('mints a key with a concrete Zone read scope', async () => {
+    const { client, store } = TestAdmin.setup()
+    const scope = 'zone:421700001:read' as const
+    const response = await client['api-keys'].$post({
+      json: { ...validBody, scopes: [scope] },
+    })
+    const body = await TestApp.json(response, ApiKeys.schema.createApiKey.Response)
+
+    expect(response.status).toBe(200)
+    expect(body.scopes).toEqual([scope])
+    expect((await core_ApiKeys.resolve(store, body.token))?.scopes).toEqual([scope])
+  })
+
   test('records the expiry when provided', async () => {
     const { client, store } = TestAdmin.setup()
     const expiresAt = '2100-01-01T00:00:00.000Z'
@@ -91,6 +104,20 @@ describe('POST /api-keys', () => {
     expect(body.error?.code).toMatchInlineSnapshot(`"body_invalid"`)
   })
 
+  test('rejects non-concrete or non-canonical Zone scopes with 400', async () => {
+    for (const scope of ['zone:<chainId>:read', 'zone:0:read', 'zone:000421700001:read']) {
+      const { client } = TestAdmin.setup()
+      const response = await client['api-keys'].$post({
+        // Cast past the typed client to exercise runtime validation.
+        json: { ...validBody, scopes: [scope] } as never,
+      })
+      const body = (await response.json()) as { error?: { code?: string } }
+
+      expect(response.status).toBe(400)
+      expect(body.error?.code).toBe('body_invalid')
+    }
+  })
+
   test('ignores a client-supplied createdBy (audit trail is server-set)', async () => {
     const { client } = TestAdmin.setup()
     const response = await client['api-keys'].$post({

package/src/admin/apps/api-keys.ts

@@ -19,7 +19,14 @@ export namespace schema {
     export const Body = Schema.describe(
       z.extend(z.omit(ApiKeys.schema.MintInput, { createdBy: true }), {
         scopes: z
-          .readonly(z.array(z.enum([...Scope.catalog.map((entry) => entry.scope), Scope.wildcard])))
+          .readonly(
+            z.array(
+              z.union([
+                z.enum([...Scope.catalog.map((entry) => entry.scope), Scope.wildcard]),
+                Scope.schema.Zone,
+              ]),
+            ),
+          )
           .check(z.describe("Granted scopes. '*' grants all scopes.")),
       }),
       'Fields accepted when minting an API key.',

package/src/admin/apps/scopes.test.ts

@@ -54,17 +54,22 @@ describe('GET /scopes', () => {
             "scope": "webhooks:write",
             "selfServe": false,
           },
+          {
+            "description": "Read RPC and indexed data for one zone chain id.",
+            "scope": "zone:<chainId>:read",
+            "selfServe": false,
+          },
         ],
       }
     `)
   })
 
-  test('serves the Scope.catalog source of truth verbatim', async () => {
+  test('serves the extended Scope catalog source of truth verbatim', async () => {
     const { client } = TestAdmin.setup()
     const response = await client.scopes.$get()
     const body = await TestApp.json(response, Scopes.schema.getScopes.Response)
 
-    expect(body.data).toEqual(Scope.catalog)
+    expect(body.data).toEqual(Scope.extend())
   })
 
   test('is never cached (admin responses are per-principal)', async () => {

package/src/admin/apps/scopes.ts

@@ -33,7 +33,7 @@ export namespace schema {
   }
 }
 
-/** Catalog of issuable API-key scopes, served from {@link Scope.catalog}. */
+/** Catalog of API-key scopes, including dynamic scope templates. */
 export function scopes() {
   return new Hono<App.Environment>().get(
     '/',
@@ -45,6 +45,6 @@ export function scopes() {
       summary: 'List scopes',
       tags: ['Scopes'],
     }),
-    (c) => c.json({ data: Scope.catalog }),
+    (c) => c.json({ data: Scope.extend() }),
   )
 }

package/src/admin/ui/src/components/Dialog.tsx

@@ -1,12 +1,18 @@
 import { Dialog as Base } from '@base-ui/react/dialog'
 import type { ComponentProps, ReactNode } from 'react'
+import { cx } from 'regen-ui'
 
 /** Backdrop + centered popup shell. Children render inside; pair with Title/Description. */
-function Popup(props: { children: ReactNode }) {
+function Popup(props: { children: ReactNode; className?: string | undefined }) {
   return (
     <Base.Portal>
       <Base.Backdrop className="fixed inset-0 z-40 bg-black/60 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0" />
-      <Base.Popup className="fixed left-1/2 top-1/2 z-50 w-[calc(100vw-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 border border-border bg-surface p-6 shadow-lg outline-none transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0">
+      <Base.Popup
+        className={cx(
+          'fixed left-1/2 top-1/2 z-50 w-[calc(100vw-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 border border-border bg-surface p-6 shadow-lg outline-none transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0',
+          props.className,
+        )}
+      >
         {props.children}
       </Base.Popup>
     </Base.Portal>

package/src/admin/ui/src/lib/scopes.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vite-plus/test'
+
+import { fromZoneChainId } from './scopes'
+
+describe('fromZoneChainId', () => {
+  it('builds a canonical Zone read scope', () => {
+    expect(fromZoneChainId(' 000421700001 ')).toBe('zone:421700001:read')
+  })
+
+  it('rejects non-positive and malformed chain ids', () => {
+    expect(['', '0', '-1', '1.5', 'mainnet'].map(fromZoneChainId)).toEqual([
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+    ])
+  })
+})

package/src/admin/ui/src/lib/scopes.ts

@@ -6,6 +6,18 @@ import { client } from './client'
 /** A single issuable API-key scope from the catalog endpoint. */
 export type Scope = InferResponseType<(typeof client)['scopes']['$get'], 200>['data'][number]
 
+/** Dynamic Zone scope template returned by the scope catalog. */
+export const zoneTemplate = 'zone:<chainId>:read'
+
+/** Builds a canonical Zone read scope from a positive integer chain id. */
+export function fromZoneChainId(value: string): `zone:${string}:read` | undefined {
+  const chainId = value.trim()
+  if (!/^\d+$/.test(chainId)) return undefined
+  const normalized = BigInt(chainId)
+  if (normalized === 0n) return undefined
+  return `zone:${normalized}:read`
+}
+
 /** List the issuable API-key scope catalog. */
 export namespace get {
   export const key = ['scopes'] as const

package/src/admin/ui/src/routes/api-keys.tsx

@@ -36,7 +36,18 @@ function RouteComponent() {
     const rateLimit = field('rateLimit')
     const perMinute = rateLimit ? Number(rateLimit) : undefined
     const environment = field('environment') === 'sandbox' ? 'sandbox' : 'production'
-    const scopes = form.getAll('scopes').filter((v): v is string => typeof v === 'string')
+    const zoneChainId = field('zoneChainId')
+    const pendingZoneScope = zoneChainId ? Scopes.fromZoneChainId(zoneChainId) : undefined
+    if (zoneChainId && !pendingZoneScope) {
+      alert('Enter a positive integer Zone chain ID.')
+      return
+    }
+    const scopes = [
+      ...new Set([
+        ...form.getAll('scopes').filter((v): v is string => typeof v === 'string'),
+        ...(pendingZoneScope ? [pendingZoneScope] : []),
+      ]),
+    ]
     if (scopes.length === 0) {
       alert('Select at least one scope.')
       return
@@ -98,7 +109,7 @@ function RouteComponent() {
           )}
           loading={keys.isPending}
         />
-        <Dialog.Popup>
+        <Dialog.Popup className="flex max-h-[calc(100dvh-2rem)] flex-col overflow-hidden">
           <ProvisionForm
             onSubmit={onSubmit}
             orgId={filters.orgId}
@@ -169,7 +180,7 @@ function ProvisionForm(props: {
           : 'Create a key that authenticates requests to the API.'}
       </Dialog.Description>
       <form
-        className="mt-6 flex flex-col gap-8"
+        className="mt-6 flex min-h-0 flex-1 flex-col gap-8"
         onSubmit={(event) => {
           event.preventDefault()
           props.onSubmit(new FormData(event.currentTarget))
@@ -190,7 +201,10 @@ function ProvisionForm(props: {
             ) : null}
           </div>
         ) : null}
-        <Fields className="gap-6" variant="default">
+        <Fields
+          className="min-h-0 flex-1 gap-6 [grid-template-rows:auto_auto_auto_minmax(0,1fr)]"
+          variant="default"
+        >
           <Input label="Name" name="name" placeholder="e.g. production-api" />
           <div className="flex flex-col gap-2">
             <span className="label-13 text-foreground-secondary">Environment</span>
@@ -212,35 +226,41 @@ function ProvisionForm(props: {
             suffix="req/min"
             type="number"
           />
-          <div className="flex flex-col gap-2">
+          <div className="flex min-h-0 flex-col gap-2 overflow-hidden">
             <span className="label-13 text-foreground-secondary">Scopes</span>
             {scopes.isPending ? (
               <span className="text-label-13 text-foreground-secondary">Loading scopes…</span>
             ) : scopes.error ? (
               <span className="text-label-13 text-negative">{scopes.error.message}</span>
             ) : (
-              <Rows className="border border-border" variant="surface">
-                {(scopes.data?.data ?? []).map((entry) => (
-                  <Rows.Row
-                    key={entry.scope}
-                    className="min-h-[56px] py-3"
-                    render={<label className="cursor-pointer" />}
-                    style={{ height: 'auto' }}
-                  >
-                    <Checkbox
-                      defaultChecked={entry.scope === 'data:read'}
-                      name="scopes"
-                      value={entry.scope}
-                    />
-                    <span className="flex min-w-0 flex-col gap-0.5">
-                      <span className="text-label-13 text-foreground">{entry.scope}</span>
-                      <span className="text-label-12 text-foreground-secondary">
-                        {entry.description}
-                      </span>
-                    </span>
-                  </Rows.Row>
-                ))}
-              </Rows>
+              <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain border border-border">
+                <Rows variant="surface">
+                  {(scopes.data?.data ?? []).map((entry) =>
+                    entry.scope === Scopes.zoneTemplate ? (
+                      <ZoneScopeRow description={entry.description} key={entry.scope} />
+                    ) : (
+                      <Rows.Row
+                        key={entry.scope}
+                        className="min-h-[56px] py-3"
+                        render={<label className="cursor-pointer" />}
+                        style={{ height: 'auto' }}
+                      >
+                        <Checkbox
+                          defaultChecked={entry.scope === 'data:read'}
+                          name="scopes"
+                          value={entry.scope}
+                        />
+                        <span className="flex min-w-0 flex-col gap-0.5">
+                          <span className="text-label-13 text-foreground">{entry.scope}</span>
+                          <span className="text-label-12 text-foreground-secondary">
+                            {entry.description}
+                          </span>
+                        </span>
+                      </Rows.Row>
+                    ),
+                  )}
+                </Rows>
+              </div>
             )}
           </div>
         </Fields>
@@ -255,6 +275,87 @@ function ProvisionForm(props: {
   )
 }
 
+function ZoneScopeRow(props: { description: string }) {
+  const [chainId, setChainId] = useState('')
+  const [selected, setSelected] = useState<readonly string[]>([])
+  const scope = Scopes.fromZoneChainId(chainId)
+  const duplicate = scope ? selected.includes(scope) : false
+  const error =
+    chainId && !scope
+      ? 'Enter a positive integer chain ID.'
+      : duplicate
+        ? 'Zone already added.'
+        : false
+
+  function add() {
+    if (!scope || duplicate) return
+    setSelected((current) => [...current, scope])
+    setChainId('')
+  }
+
+  return (
+    <Rows.Row className="min-h-[56px] flex-col items-stretch py-3" style={{ height: 'auto' }}>
+      <span className="flex min-w-0 flex-col gap-0.5">
+        <span className="text-label-13 text-foreground">{Scopes.zoneTemplate}</span>
+        <span className="text-label-12 text-foreground-secondary">{props.description}</span>
+      </span>
+      <div className="flex items-start gap-2 max-sm:flex-col">
+        <div className="min-w-0 flex-1 max-sm:w-full">
+          <Input
+            aria-label="Zone chain ID"
+            autoComplete="off"
+            error={error}
+            inputMode="numeric"
+            name="zoneChainId"
+            onChange={(event) => setChainId(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key !== 'Enter') return
+              event.preventDefault()
+              add()
+            }}
+            pattern="[0-9]*"
+            placeholder="421700001"
+            prefix="zone:"
+            suffix=":read"
+            value={chainId}
+          />
+        </div>
+        <Button
+          className="max-sm:w-full"
+          disabled={!scope || duplicate}
+          onClick={add}
+          type="button"
+        >
+          Add zone
+        </Button>
+      </div>
+      {selected.length > 0 ? (
+        <ul className="flex flex-col gap-2">
+          {selected.map((scope) => (
+            <li
+              className="flex min-w-0 items-center gap-2 border border-border bg-secondary py-1 pr-1 pl-2"
+              key={scope}
+            >
+              <input name="scopes" type="hidden" value={scope} />
+              <code className="min-w-0 flex-1 truncate text-label-12 text-foreground">{scope}</code>
+              <Button.Icon
+                onClick={() =>
+                  setSelected((current) => current.filter((candidate) => candidate !== scope))
+                }
+                size="md"
+                title={`Remove ${scope}`}
+                variant="plain"
+              >
+                <X className="size-4" />
+              </Button.Icon>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </Rows.Row>
+  )
+}
+
 function KeyList(props: {
   environment: 'production' | 'sandbox'
   error: Error | null