tapimo 0.19.0 → 0.20.0

package/src/admin/ui/src/routes/{zone-key-requests.tsx → zone-delegation-requests.tsx}

@@ -3,7 +3,7 @@ import { createFileRoute, Link, useBlocker } from '@tanstack/react-router'
 import { NativeSelect } from '@tempoxyz/ds/platform'
 import { type ReactNode, useEffect, useId, useRef, useState } from 'react'
 import { Button, cx, Fields, Input, Rows, Tag, useCopy } from 'regen-ui'
-import { Check, KeyRound, Link as LinkIcon, Plus, X } from 'lucide-react'
+import { Check, Link as LinkIcon, Plus, ShieldCheck, X } from 'lucide-react'
 import * as z from 'zod/mini'
 
 import * as ApiKeyForm from '../components/ApiKeyForm.js'
@@ -11,11 +11,10 @@ import * as Dialog from '../components/Dialog.js'
 import * as Frame from '../components/Page.js'
 import * as Config from '../lib/config.js'
 import * as Format from '../lib/format.js'
-import * as Scopes from '../lib/scopes.js'
-import * as ZoneKeyRequests from '../lib/zone-key-requests.js'
+import * as DelegationRequests from '../lib/zone-delegation-requests.js'
 
-export const Route = createFileRoute('/zone-key-requests')({
-  head: () => ({ meta: [{ title: 'Zone key requests | Tempo API Admin' }] }),
+export const Route = createFileRoute('/zone-delegation-requests')({
+  head: () => ({ meta: [{ title: 'Delegation requests | Tempo API Admin' }] }),
   // `cursor` selects a page; `request` opens one request, even when it is on another page.
   validateSearch: z.object({
     cursor: z.catch(z.optional(z.string()), undefined),
@@ -25,10 +24,9 @@ export const Route = createFileRoute('/zone-key-requests')({
   loader: ({ context, deps }) =>
     // Preserve inline permission errors while allowing cached queries to refresh after navigation.
     Promise.allSettled([
-      context.queryClient.ensureQueryData(ZoneKeyRequests.list.options(deps.cursor)),
-      context.queryClient.ensureQueryData(Scopes.get.options()),
+      context.queryClient.ensureQueryData(DelegationRequests.list.options(deps.cursor)),
       ...(deps.request
-        ? [context.queryClient.ensureQueryData(ZoneKeyRequests.get.options(deps.request))]
+        ? [context.queryClient.ensureQueryData(DelegationRequests.get.options(deps.request))]
         : []),
     ]),
   component: RouteComponent,
@@ -41,20 +39,20 @@ function RouteComponent() {
   const dirty = useRef(false)
   const config = Config.use()
   const requests = useQuery({
-    ...ZoneKeyRequests.list.options(cursor),
+    ...DelegationRequests.list.options(cursor),
     placeholderData: keepPreviousData,
   })
   const rows = requests.data?.data ?? []
   const listed = rows.some((request) => request.id === selected)
-  const create = ZoneKeyRequests.create.useMutation()
-  const issue = ZoneKeyRequests.issue.useMutation()
+  const create = DelegationRequests.create.useMutation()
+  const apply = DelegationRequests.apply.useMutation()
   const email = config.data?.auth.identity?.email.toLowerCase()
   // A pending submission may still create the request, so navigation waits for it.
   useBlocker({
     enableBeforeUnload: () => dirty.current || create.isPending,
     shouldBlockFn: () =>
       create.isPending ||
-      (dirty.current && !window.confirm('Discard this unsubmitted key request?')),
+      (dirty.current && !window.confirm('Discard this unsubmitted delegation request?')),
   })
 
   function onSubmit(form: FormData) {
@@ -62,36 +60,41 @@ function RouteComponent() {
       const value = form.get(key)
       return typeof value === 'string' ? value.trim() : ''
     }
-    const scopes = ApiKeyForm.readScopes(form)
-    if (!scopes) return
-    if (!ZoneKeyRequests.required(scopes)) {
-      setFormError('Add at least one Zone read scope. Other keys can be provisioned from API Keys.')
-      return
-    }
-    setFormError(undefined)
-    const allowedIps = [
+    const addresses = (key: string) => [
       ...new Set(
-        field('allowedIps')
-          .split(/[,\n]/)
+        field(key)
+          .split(/[\s,]+/)
           .map((value) => value.trim())
           .filter(Boolean),
       ),
     ]
-    const expiresAt = field('expiresAt')
-    const projectId = field('projectId')
-    const rateLimit = field('rateLimit')
+    const accountsAll = form.get('accountsAll') === 'on'
+    const tokensAll = form.get('tokensAll') === 'on'
+    const accounts = addresses('accounts')
+    const tokens = addresses('tokens')
+    const chainId = Number(field('chainId'))
+    if (!Number.isInteger(chainId) || chainId <= 0) {
+      setFormError('Enter the Zone chain id as a positive integer.')
+      return
+    }
+    if (!accountsAll && accounts.length === 0) {
+      setFormError('List the covered accounts, or cover every account.')
+      return
+    }
+    if (!tokensAll && tokens.length === 0) {
+      setFormError('List the covered tokens, or cover every token.')
+      return
+    }
+    setFormError(undefined)
     create.mutate(
       {
-        allowedIps,
+        ...(accountsAll ? {} : { accounts: accounts as DelegationRequests.create.Input['accounts'] }), // prettier-ignore
+        accountsAll,
+        chainId,
         environment: field('environment') === 'sandbox' ? 'sandbox' : 'production',
-        ...(expiresAt ? { expiresAt: new Date(expiresAt).toISOString() } : {}),
-        name: field('name'),
         orgId: field('orgId'),
-        ...(projectId ? { projectId } : {}),
-        ...(rateLimit
-          ? { rateLimits: { '*': { limit: Number(rateLimit), period: 'minute' as const } } }
-          : {}),
-        scopes: scopes as ZoneKeyRequests.create.Input['scopes'],
+        ...(tokensAll ? {} : { tokens: tokens as DelegationRequests.create.Input['tokens'] }),
+        tokensAll,
       },
       {
         onError: (error) => setFormError(error.message),
@@ -108,7 +111,12 @@ function RouteComponent() {
       onOpenChange={(value) => {
         // A pending submission still creates the request, so it cannot be discarded.
         if (!value && create.isPending) return
-        if (!value && dirty.current && !window.confirm('Discard this unsubmitted key request?'))
+        if (
+          !value &&
+          dirty.current &&
+          !window.confirm('Discard this unsubmitted delegation request?')
+        )
+          // prettier-ignore
           return
         if (!value) {
           dirty.current = false
@@ -119,28 +127,21 @@ function RouteComponent() {
       open={open}
     >
       <Frame.Page
-        title="Zone key requests"
-        description={`Zone read keys need ${ZoneKeyRequests.quorum} approvals from other members of the Zone issuers group before the requester can issue them.`}
+        title="Delegation requests"
+        description={`Zone delegations need ${DelegationRequests.quorum} approvals from other members of the Zone issuers group before the requester can apply them.`}
         action={
           <Dialog.Trigger
             render={
               <Button variant="primary">
                 <Plus className="size-4" />
-                Request a key
+                Request a delegation
               </Button>
             }
           />
         }
       >
-        {issue.data ? (
-          <ApiKeyForm.TokenBanner
-            onDismiss={() => issue.reset()}
-            title={`Key issued: ${issue.data.name ?? issue.data.id}`}
-            token={issue.data.token}
-          />
-        ) : null}
         {selected && requests.data && !listed ? (
-          <LinkedRequest email={email} id={selected} issue={issue} />
+          <LinkedRequest apply={apply} email={email} id={selected} />
         ) : null}
         {/* A failed background refresh keeps the loaded rows and offers a retry. */}
         {requests.isRefetchError ? (
@@ -171,14 +172,14 @@ function RouteComponent() {
               </span>
             </Frame.Notice>
           ) : rows.length === 0 ? (
-            <Frame.Notice>No Zone key requests yet.</Frame.Notice>
+            <Frame.Notice>No delegation requests yet.</Frame.Notice>
           ) : (
             <Rows className="[&_[data-rows-divider]]:bg-divider/25!" variant="surface">
               {rows.map((request) => (
                 <RequestRow
+                  apply={apply}
                   email={email}
                   expanded={request.id === selected}
-                  issue={issue}
                   key={request.id}
                   request={request}
                 />
@@ -189,12 +190,17 @@ function RouteComponent() {
         {cursor || requests.data?.nextCursor ? (
           <div className="flex justify-center gap-2">
             {cursor ? (
-              <Button render={<Link search={{}} to="/zone-key-requests" />}>Newest requests</Button>
+              <Button render={<Link search={{}} to="/zone-delegation-requests" />}>
+                Newest requests
+              </Button>
             ) : null}
             {requests.data?.nextCursor ? (
               <Button
                 render={
-                  <Link search={{ cursor: requests.data.nextCursor }} to="/zone-key-requests" />
+                  <Link
+                    search={{ cursor: requests.data.nextCursor }}
+                    to="/zone-delegation-requests"
+                  />
                 }
               >
                 Older requests
@@ -218,11 +224,14 @@ function RouteComponent() {
 }
 
 function RequestForm(options: RequestForm.Props) {
+  const [accountsAll, setAccountsAll] = useState(true)
+  const [tokensAll, setTokensAll] = useState(true)
   return (
     <>
-      <Dialog.Title>Request a Zone key</Dialog.Title>
+      <Dialog.Title>Request a Zone delegation</Dialog.Title>
       <Dialog.Description>
-        Settings are locked once submitted. Cancel and resubmit to change anything.
+        Settings are locked once submitted. Cancel and resubmit to change anything. To widen an
+        active delegation, revoke it and request a new one.
       </Dialog.Description>
       <form
         className="mt-6 flex min-h-0 flex-1 flex-col gap-8"
@@ -237,15 +246,6 @@ function RequestForm(options: RequestForm.Props) {
           variant="default"
         >
           <ApiKeyForm.OrganizationField required />
-          <Input
-            autoComplete="off"
-            label="Project ID (optional)"
-            name="projectId"
-            pattern="prj_[A-Za-z0-9_\-]+"
-            placeholder="prj_…"
-            spellCheck={false}
-          />
-          <Input label="Name" name="name" placeholder="e.g. Partner Zone reader" required />
           <label className="flex flex-col gap-2">
             <span className="label-13 text-foreground-secondary">Environment</span>
             <NativeSelect
@@ -259,34 +259,46 @@ function RequestForm(options: RequestForm.Props) {
             </NativeSelect>
           </label>
           <Input
-            label="Expires at (optional)"
-            min={Format.localDateTimeCeil(new Date(Date.now() + 2 * 60_000))}
-            name="expiresAt"
-            type="datetime-local"
-          />
-          <Input
-            defaultValue="10000"
-            label="Rate limit"
-            min={0}
-            name="rateLimit"
-            placeholder="Requests per minute"
-            suffix="req/min"
+            inputMode="numeric"
+            label="Zone chain id"
+            min={1}
+            name="chainId"
+            placeholder="421700001"
+            required
             type="number"
           />
-          <label className="flex min-w-0 flex-col gap-2">
-            <span className="text-label-13 text-foreground-secondary">IP allowlist (optional)</span>
-            <textarea
-              className="min-h-24 w-full resize-y rounded-control border-2 border-transparent bg-secondary px-3 py-2.5 font-mono text-copy-13 text-foreground outline-none placeholder:font-sans placeholder:text-foreground-secondary/50 hover:bg-secondary-hover focus-visible:border-focus focus-visible:bg-secondary-hover"
-              name="allowedIps"
-              placeholder={'203.0.113.10\n198.51.100.0/24'}
-              rows={4}
+          <Coverage
+            checked={accountsAll}
+            hint="Leave checked to cover every account; otherwise list the covered wallet addresses."
+            label="Cover every account"
+            name="accountsAll"
+            onChange={setAccountsAll}
+          />
+          {accountsAll ? null : (
+            <AddressList
+              hint="Separate account addresses with commas or new lines."
+              label="Covered accounts"
+              name="accounts"
+              placeholder={'0x…\n0x…'}
+              required
             />
-            <span className="text-label-12 text-foreground-secondary">
-              Separate exact IP addresses or CIDR ranges with commas or new lines. Leave empty for
-              unrestricted access.
-            </span>
-          </label>
-          <ApiKeyForm.ScopeFields defaultScopes={[]} />
+          )}
+          <Coverage
+            checked={tokensAll}
+            hint="Leave checked to cover every token; otherwise list the covered token contracts."
+            label="Cover every token"
+            name="tokensAll"
+            onChange={setTokensAll}
+          />
+          {tokensAll ? null : (
+            <AddressList
+              hint="Separate token contract addresses with commas or new lines."
+              label="Covered tokens"
+              name="tokens"
+              placeholder={'0x…\n0x…'}
+              required
+            />
+          )}
         </Fields>
         {options.error ? (
           <p
@@ -320,11 +332,66 @@ declare namespace RequestForm {
   }
 }
 
+function Coverage(options: Coverage.Props) {
+  return (
+    <label className="flex flex-col gap-2">
+      <span className="flex items-center gap-2">
+        <input
+          checked={options.checked}
+          className="size-4 accent-[var(--background-color-invert)]"
+          name={options.name}
+          onChange={(event) => options.onChange(event.currentTarget.checked)}
+          type="checkbox"
+        />
+        <span className="text-label-13 text-foreground">{options.label}</span>
+      </span>
+      <span className="text-label-12 text-foreground-secondary">{options.hint}</span>
+    </label>
+  )
+}
+
+declare namespace Coverage {
+  type Props = {
+    checked: boolean
+    hint: string
+    label: string
+    name: string
+    onChange: (checked: boolean) => void
+  }
+}
+
+function AddressList(options: AddressList.Props) {
+  return (
+    <label className="flex min-w-0 flex-col gap-2">
+      <span className="text-label-13 text-foreground-secondary">{options.label}</span>
+      <textarea
+        className="min-h-24 w-full resize-y rounded-control border-2 border-transparent bg-secondary px-3 py-2.5 font-mono text-copy-13 text-foreground outline-none placeholder:font-sans placeholder:text-foreground-secondary/50 hover:bg-secondary-hover focus-visible:border-focus focus-visible:bg-secondary-hover"
+        name={options.name}
+        placeholder={options.placeholder}
+        required={options.required}
+        rows={4}
+        spellCheck={false}
+      />
+      <span className="text-label-12 text-foreground-secondary">{options.hint}</span>
+    </label>
+  )
+}
+
+declare namespace AddressList {
+  type Props = {
+    hint: string
+    label: string
+    name: string
+    placeholder: string
+    required?: boolean | undefined
+  }
+}
+
 function RequestRow(options: RequestRow.Props) {
   const { expanded, request } = options
   const navigate = Route.useNavigate()
   const panelId = useId()
-  const status = ZoneKeyRequests.status(request)
+  const status = DelegationRequests.status(request)
 
   return (
     <>
@@ -344,7 +411,9 @@ function RequestRow(options: RequestRow.Props) {
       >
         <span className="flex min-w-0 flex-1 flex-col gap-0.5">
           <span className="flex min-w-0 items-center gap-2">
-            <span className="truncate text-label-14 text-foreground">{request.input.name}</span>
+            <span className="truncate text-label-14 text-foreground">
+              Zone {request.input.chainId}
+            </span>
             {request.input.environment === 'sandbox' ? <Tag intent="warning">sandbox</Tag> : null}
           </span>
           <span className="truncate text-label-12 text-foreground-secondary">
@@ -357,7 +426,7 @@ function RequestRow(options: RequestRow.Props) {
         </span>
       </Rows.Row>
       {expanded ? (
-        <RequestPanel email={options.email} id={panelId} issue={options.issue} request={request} />
+        <RequestPanel apply={options.apply} email={options.email} id={panelId} request={request} />
       ) : null}
     </>
   )
@@ -365,18 +434,18 @@ function RequestRow(options: RequestRow.Props) {
 
 declare namespace RequestRow {
   type Props = {
+    apply: ReturnType<typeof DelegationRequests.apply.useMutation>
     /** Signed-in admin email, lowercased. */
     email: string | undefined
     /** Whether the URL selects this request. */
     expanded: boolean
-    issue: ReturnType<typeof ZoneKeyRequests.issue.useMutation>
-    request: ZoneKeyRequests.Request
+    request: DelegationRequests.Request
   }
 }
 
-/** A linked request missing from the newest-100 list. */
+/** A linked request missing from the newest page. */
 function LinkedRequest(options: LinkedRequest.Props) {
-  const detail = useQuery(ZoneKeyRequests.get.options(options.id))
+  const detail = useQuery(DelegationRequests.get.options(options.id))
   return (
     <Frame.Card>
       {detail.isPending ? (
@@ -385,7 +454,7 @@ function LinkedRequest(options: LinkedRequest.Props) {
         <Frame.Notice>{detail.error.message}</Frame.Notice>
       ) : (
         <Rows className="[&_[data-rows-divider]]:bg-divider/25!" variant="surface">
-          <RequestRow email={options.email} expanded issue={options.issue} request={detail.data} />
+          <RequestRow apply={options.apply} email={options.email} expanded request={detail.data} />
         </Rows>
       )}
     </Frame.Card>
@@ -394,28 +463,29 @@ function LinkedRequest(options: LinkedRequest.Props) {
 
 declare namespace LinkedRequest {
   type Props = {
+    apply: ReturnType<typeof DelegationRequests.apply.useMutation>
     email: string | undefined
     /** Request id from the URL. */
     id: string
-    issue: ReturnType<typeof ZoneKeyRequests.issue.useMutation>
   }
 }
 
 function RequestPanel(options: RequestPanel.Props) {
-  const { email, issue } = options
+  const { apply, email } = options
   const queryClient = useQueryClient()
   const { copy, notifying } = useCopy()
   // Approvals arrive from other reviewers and can lapse while the panel is open.
   const detail = useQuery({
-    ...ZoneKeyRequests.get.options(options.request.id),
+    ...DelegationRequests.get.options(options.request.id),
     refetchInterval: 15_000,
   })
-  // The polled detail sees cancellation or issuance by others before the list does.
+  // The polled detail sees cancellation or application by others before the list does.
   const request = detail.data ?? options.request
-  const approve = ZoneKeyRequests.approve.useMutation()
-  const cancel = ZoneKeyRequests.cancel.useMutation()
-  const pending = ZoneKeyRequests.status(request) === 'pending'
+  const approve = DelegationRequests.approve.useMutation()
+  const cancel = DelegationRequests.cancel.useMutation()
+  const pending = DelegationRequests.status(request) === 'pending'
   const [, setTick] = useState(0)
+  const approvals = detail.data ? DelegationRequests.validApprovals(detail.data) : []
 
   // Refetches return identical data, so schedule a render when the next approval or request lapses.
   useEffect(() => {
@@ -431,69 +501,40 @@ function RequestPanel(options: RequestPanel.Props) {
 
   useEffect(() => {
     if (detail.data && detail.data.status !== options.request.status)
-      void queryClient.invalidateQueries({ queryKey: ZoneKeyRequests.list.key })
+      void queryClient.invalidateQueries({ queryKey: DelegationRequests.list.key })
   }, [detail.data, options.request.status, queryClient])
-  const approvals = detail.data ? ZoneKeyRequests.validApprovals(detail.data) : []
-  // Emails only hide self-approval; the API checks stable user ids, so Issue stays available.
+  // Emails only steer the buttons; the API checks stable user ids on every decision.
   const requester = request.requesterEmail.toLowerCase() === email
   const approved = approvals.some((approval) => approval.approverEmail.toLowerCase() === email)
-  // Everyone can request and issue; only approver group members can approve.
+  // Everyone can request and apply; only approver group members can approve.
   // `null` means membership could not be checked; offer Approve and let the server decide.
-  const approver = Config.use().data?.auth.zoneKeyApprover !== false
-  const rateLimit = request.input.rateLimits?.['*']
+  const approver = Config.use().data?.auth.delegationApprover !== false
   const error =
-    (issue.variables === request.id ? issue.error : null) ?? approve.error ?? cancel.error
+    (apply.variables === request.id ? apply.error : null) ?? approve.error ?? cancel.error
+  const { input } = request
 
   return (
     <Rows.Panel className="border-border/25! bg-surface!" id={options.id}>
       <dl className="flex flex-wrap gap-x-10 gap-y-4 px-5 py-4">
         <Detail label="Request ID">{request.id}</Detail>
-        <Detail label="Organization">{request.input.orgId}</Detail>
-        <Detail label="Project">{request.input.projectId ?? '-'}</Detail>
-        <Detail label="Environment">{request.input.environment ?? 'production'}</Detail>
-        <Detail label="Rate limit">
-          {rateLimit === undefined
-            ? 'Inherited'
-            : `${rateLimit.limit} req/${rateLimit.period === 'minute' ? 'min' : 'sec'}`}
-        </Detail>
-        <Detail label="Key expires">
-          {request.input.expiresAt ? Format.dateTime(request.input.expiresAt) : 'Never'}
-        </Detail>
+        <Detail label="Organization">{input.orgId}</Detail>
+        <Detail label="Environment">{input.environment}</Detail>
+        <Detail label="Zone">{input.chainId}</Detail>
         <Detail label={pending ? 'Request expires' : 'Request expiry'}>
           {Format.dateTime(request.expiresAt)}
         </Detail>
-        {request.keyId ? <Detail label="Key ID">{request.keyId}</Detail> : null}
-        <Detail className="w-full" label="IP allowlist">
-          {request.input.allowedIps?.length ? (
-            <span className="flex flex-wrap gap-x-3 gap-y-1 font-mono">
-              {request.input.allowedIps.map((address) => (
-                <span className="break-all" key={address}>
-                  {address}
-                </span>
-              ))}
-            </span>
-          ) : (
-            'Unrestricted'
-          )}
+        {request.delegationId ? (
+          <Detail label="Delegation ID">{request.delegationId}</Detail>
+        ) : null}
+        <Detail className="w-full" label="Accounts">
+          {input.accountsAll ? 'Every account' : <Addresses values={input.accounts ?? []} />}
         </Detail>
-        <Detail className="w-full" label="Scopes">
-          <span className="flex flex-wrap gap-x-3 gap-y-1">
-            {request.input.scopes.map((scope) => (
-              <span
-                className={cx(
-                  'text-label-13',
-                  ZoneKeyRequests.required([scope]) ? 'text-warning' : 'text-foreground',
-                )}
-                key={scope}
-              >
-                {scope}
-              </span>
-            ))}
-          </span>
+        <Detail className="w-full" label="Tokens">
+          {input.tokensAll ? 'Every token' : <Addresses values={input.tokens ?? []} />}
         </Detail>
         <Detail
           className="w-full"
-          label={`Approvals (${approvals.length} of ${ZoneKeyRequests.quorum} valid)`}
+          label={`Approvals (${approvals.length} of ${DelegationRequests.quorum} valid)`}
         >
           {detail.isPending ? (
             <span className="text-foreground-secondary">Loading approvals…</span>
@@ -525,14 +566,10 @@ function RequestPanel(options: RequestPanel.Props) {
           )}
         </Detail>
       </dl>
-      {issue.data && issue.variables !== request.id && pending ? (
-        <p className="border-t border-border/25 px-5 py-3 text-copy-13 text-foreground-secondary">
-          Dismiss the issued token at the top of the page before issuing another key.
-        </p>
-      ) : null}
-      {issue.data && issue.variables === request.id ? (
+      {apply.data && apply.variables === request.id ? (
         <p className="border-t border-border/25 px-5 py-3 text-copy-13 text-positive">
-          Key issued. Copy the token from the top of the page now; it won't be shown again.
+          Delegation applied. Keys tagged for this Zone under the organization read it within 30
+          seconds.
         </p>
       ) : null}
       {error ? (
@@ -543,7 +580,7 @@ function RequestPanel(options: RequestPanel.Props) {
       <div className="flex flex-wrap justify-end gap-2 border-t border-border/25 px-5 py-3">
         <Button
           onClick={() =>
-            copy(new URL(`zone-key-requests?request=${request.id}`, document.baseURI).href)
+            copy(new URL(`zone-delegation-requests?request=${request.id}`, document.baseURI).href)
           }
           size="small"
         >
@@ -555,7 +592,7 @@ function RequestPanel(options: RequestPanel.Props) {
             <Button
               loading={cancel.isPending}
               onClick={() => {
-                if (window.confirm(`Cancel the request for ${request.input.name}?`))
+                if (window.confirm(`Cancel the delegation request for Zone ${input.chainId}?`))
                   cancel.mutate(request.id)
               }}
               size="small"
@@ -573,18 +610,18 @@ function RequestPanel(options: RequestPanel.Props) {
                 {approved ? 'Renew approval' : 'Approve'}
               </Button>
             )}
-            <Button
-              disabled={
-                approvals.length < ZoneKeyRequests.quorum || issue.isPending || !!issue.data
-              }
-              loading={issue.isPending && issue.variables === request.id}
-              onClick={() => issue.mutate(request.id)}
-              size="small"
-              variant="primary"
-            >
-              <KeyRound className="size-4" />
-              Issue key
-            </Button>
+            {requester ? (
+              <Button
+                disabled={approvals.length < DelegationRequests.quorum || apply.isPending}
+                loading={apply.isPending && apply.variables === request.id}
+                onClick={() => apply.mutate(request.id)}
+                size="small"
+                variant="primary"
+              >
+                <ShieldCheck className="size-4" />
+                Apply delegation
+              </Button>
+            ) : null}
           </>
         ) : null}
       </div>
@@ -594,21 +631,40 @@ function RequestPanel(options: RequestPanel.Props) {
 
 declare namespace RequestPanel {
   type Props = {
+    apply: ReturnType<typeof DelegationRequests.apply.useMutation>
     email: string | undefined
     id: string
-    issue: ReturnType<typeof ZoneKeyRequests.issue.useMutation>
-    request: ZoneKeyRequests.Request
+    request: DelegationRequests.Request
+  }
+}
+
+function Addresses(options: Addresses.Props) {
+  if (options.values.length === 0) return <span className="text-foreground-secondary">None</span>
+  return (
+    <span className="flex flex-wrap gap-x-3 gap-y-1 font-mono">
+      {options.values.map((address) => (
+        <span className="break-all" key={address}>
+          {address}
+        </span>
+      ))}
+    </span>
+  )
+}
+
+declare namespace Addresses {
+  type Props = {
+    values: readonly string[]
   }
 }
 
 function StatusTag(options: StatusTag.Props) {
   const intent = (
     {
+      applied: 'positive',
+      applying: 'info',
       cancelled: 'neutral',
       expired: 'neutral',
       failed: 'negative',
-      issued: 'positive',
-      issuing: 'info',
       pending: 'warning',
     } as const
   )[options.status]
@@ -621,7 +677,7 @@ function StatusTag(options: StatusTag.Props) {
 
 declare namespace StatusTag {
   type Props = {
-    status: ReturnType<typeof ZoneKeyRequests.status>
+    status: ReturnType<typeof DelegationRequests.status>
   }
 }