tapimo 0.5.2 → 0.6.0

package/src/admin/ui/plugin.ts

@@ -23,7 +23,8 @@ const outFile = path.join(here, '..', 'ui.generated.ts')
 // Total gzipped budget for the whole UI; the React + TanStack + Regen baseline
 // is heavier than a hand-rolled SPA, so fail loudly before it bloats the
 // package. Raise deliberately (and revisit code-splitting) if it trips.
-const maxGzipBytes = 405_000
+// Raised from 405 KB for the early-access page.
+const maxGzipBytes = 415_000
 
 const contentTypes: Record<string, string> = {
   '.css': 'text/css; charset=utf-8',

package/src/admin/ui/src/lib/early-access.ts

@@ -0,0 +1,63 @@
+import * as ReactQuery from '@tanstack/react-query'
+import type { InferResponseType } from 'hono/client'
+
+import { client } from './client'
+
+/** A stored allowlist entry (domain or exact email) from the list endpoint. */
+export type Entry = InferResponseType<(typeof client)['early-access']['$get'], 200>['data'][number]
+
+/** List early-access allowlist entries. */
+export namespace list {
+  export const key = ['early-access'] as const
+  export async function fn() {
+    const response = await client['early-access'].$get()
+    if (!response.ok) throw new Error('Failed to load entries.')
+    return response.json()
+  }
+  export function options() {
+    return ReactQuery.queryOptions({ queryFn: fn, queryKey: key, staleTime: 30_000 })
+  }
+  export function useQuery() {
+    return ReactQuery.useQuery(options())
+  }
+}
+
+/** Add an allowlist entry: a bare domain or a full email. */
+export namespace add {
+  export type Input = { entry: string }
+  export async function fn(input: Input) {
+    const response = await client['early-access'].$post({ json: input })
+    if (!response.ok) throw new Error(await errorMessage(response, 'Failed to add entry.'))
+    return response.json()
+  }
+  export function useMutation() {
+    const queryClient = ReactQuery.useQueryClient()
+    return ReactQuery.useMutation({
+      mutationFn: fn,
+      onSuccess: () => queryClient.invalidateQueries({ queryKey: list.key }),
+    })
+  }
+}
+
+/** Remove an allowlist entry. */
+export namespace remove {
+  export type Input = { entry: string }
+  export async function fn({ entry }: Input) {
+    const response = await client['early-access'].$delete({ json: { entry } })
+    if (!response.ok) throw new Error(await errorMessage(response, 'Failed to remove entry.'))
+    return response.json()
+  }
+  export function useMutation() {
+    const queryClient = ReactQuery.useQueryClient()
+    return ReactQuery.useMutation({
+      mutationFn: fn,
+      onSuccess: () => queryClient.invalidateQueries({ queryKey: list.key }),
+    })
+  }
+}
+
+/** Server error-envelope message, with a fallback for non-JSON bodies. */
+async function errorMessage(response: { json(): Promise<unknown> }, fallback: string) {
+  const body = (await response.json().catch(() => null)) as { error?: { message?: string } } | null
+  return body?.error?.message ?? fallback
+}

package/src/admin/ui/src/lib/verified-tokens.ts

@@ -1,8 +1,14 @@
 import * as ReactQuery from '@tanstack/react-query'
 import type { InferRequestType, InferResponseType } from 'hono/client'
+import * as z from 'zod/mini'
 
 import { client } from './client'
 
+/** Route search: the active page tab. */
+export const search = z.object({
+  tab: z.catch(z.optional(z.enum(['pending', 'verified'])), undefined),
+})
+
 /** The verified-token list endpoint's success body. */
 type ListResponse = InferResponseType<(typeof client)['verified-tokens']['$get'], 200>
 
@@ -67,6 +73,79 @@ export namespace create {
   }
 }
 
+/** Review queue over organization verification requests. */
+export namespace requests {
+  /** A verification request record from the queue endpoint. */
+  export type VerifiedTokenRequest = InferResponseType<
+    (typeof client)['verified-tokens']['requests']['$get'],
+    200
+  >['data'][number]
+
+  export namespace list {
+    export function key() {
+      return ['verified-token-requests'] as const
+    }
+    export async function fn() {
+      const response = await client['verified-tokens'].requests.$get({ query: {} })
+      if (!response.ok) throw new Error('Failed to load requests.')
+      return response.json()
+    }
+    export function options() {
+      return ReactQuery.queryOptions({ queryFn: fn, queryKey: key(), staleTime: 30_000 })
+    }
+    export function useQuery() {
+      return ReactQuery.useQuery(options())
+    }
+  }
+
+  export namespace approve {
+    export type Input = { chainId: number; requestId: string }
+    export async function fn({ requestId }: Input) {
+      const response = await client['verified-tokens'].requests[':requestId'].approve.$post({
+        param: { requestId },
+      })
+      if (!response.ok) throw new Error(await errorMessage(response, 'Failed to approve request.'))
+      return response.json()
+    }
+    export function useMutation() {
+      const queryClient = ReactQuery.useQueryClient()
+      return ReactQuery.useMutation({
+        mutationFn: fn,
+        onSuccess: (_data, input) => {
+          void queryClient.invalidateQueries({ queryKey: list.key() })
+          // Approval publishes the token onto the chain's verified list.
+          void queryClient.invalidateQueries({ queryKey: get.key({ chainId: input.chainId }) })
+        },
+      })
+    }
+  }
+
+  export namespace deny {
+    export type Input = { requestId: string; reviewNote?: string }
+    export async function fn({ requestId, reviewNote }: Input) {
+      const response = await client['verified-tokens'].requests[':requestId'].deny.$post({
+        json: reviewNote ? { reviewNote } : {},
+        param: { requestId },
+      })
+      if (!response.ok) throw new Error(await errorMessage(response, 'Failed to deny request.'))
+      return response.json()
+    }
+    export function useMutation() {
+      const queryClient = ReactQuery.useQueryClient()
+      return ReactQuery.useMutation({
+        mutationFn: fn,
+        onSuccess: () => queryClient.invalidateQueries({ queryKey: list.key() }),
+      })
+    }
+  }
+}
+
+/** Server error-envelope message, with a fallback for non-JSON bodies. */
+async function errorMessage(response: { json(): Promise<unknown> }, fallback: string) {
+  const body = (await response.json().catch(() => null)) as { error?: { message?: string } } | null
+  return body?.error?.message ?? fallback
+}
+
 /** Remove a verified token from a chain. */
 export namespace remove {
   export type Input = { address: `0x${string}`; chainId: number }

package/src/admin/ui/src/routeTree.gen.ts

@@ -11,6 +11,7 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as VerifiedTokensRouteImport } from './routes/verified-tokens'
 import { Route as OrganizationsRouteImport } from './routes/organizations'
+import { Route as EarlyAccessRouteImport } from './routes/early-access'
 import { Route as ApiKeysRouteImport } from './routes/api-keys'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as OrganizationsOrgIdRouteImport } from './routes/organizations_.$orgId'
@@ -25,6 +26,11 @@ const OrganizationsRoute = OrganizationsRouteImport.update({
   path: '/organizations',
   getParentRoute: () => rootRouteImport,
 } as any)
+const EarlyAccessRoute = EarlyAccessRouteImport.update({
+  id: '/early-access',
+  path: '/early-access',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ApiKeysRoute = ApiKeysRouteImport.update({
   id: '/api-keys',
   path: '/api-keys',
@@ -44,6 +50,7 @@ const OrganizationsOrgIdRoute = OrganizationsOrgIdRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/api-keys': typeof ApiKeysRoute
+  '/early-access': typeof EarlyAccessRoute
   '/organizations': typeof OrganizationsRoute
   '/verified-tokens': typeof VerifiedTokensRoute
   '/organizations/$orgId': typeof OrganizationsOrgIdRoute
@@ -51,6 +58,7 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/api-keys': typeof ApiKeysRoute
+  '/early-access': typeof EarlyAccessRoute
   '/organizations': typeof OrganizationsRoute
   '/verified-tokens': typeof VerifiedTokensRoute
   '/organizations/$orgId': typeof OrganizationsOrgIdRoute
@@ -59,19 +67,33 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/api-keys': typeof ApiKeysRoute
+  '/early-access': typeof EarlyAccessRoute
   '/organizations': typeof OrganizationsRoute
   '/verified-tokens': typeof VerifiedTokensRoute
   '/organizations_/$orgId': typeof OrganizationsOrgIdRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/api-keys' | '/organizations' | '/verified-tokens' | '/organizations/$orgId'
+  fullPaths:
+    | '/'
+    | '/api-keys'
+    | '/early-access'
+    | '/organizations'
+    | '/verified-tokens'
+    | '/organizations/$orgId'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/api-keys' | '/organizations' | '/verified-tokens' | '/organizations/$orgId'
+  to:
+    | '/'
+    | '/api-keys'
+    | '/early-access'
+    | '/organizations'
+    | '/verified-tokens'
+    | '/organizations/$orgId'
   id:
     | '__root__'
     | '/'
     | '/api-keys'
+    | '/early-access'
     | '/organizations'
     | '/verified-tokens'
     | '/organizations_/$orgId'
@@ -80,6 +102,7 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   ApiKeysRoute: typeof ApiKeysRoute
+  EarlyAccessRoute: typeof EarlyAccessRoute
   OrganizationsRoute: typeof OrganizationsRoute
   VerifiedTokensRoute: typeof VerifiedTokensRoute
   OrganizationsOrgIdRoute: typeof OrganizationsOrgIdRoute
@@ -101,6 +124,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof OrganizationsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/early-access': {
+      id: '/early-access'
+      path: '/early-access'
+      fullPath: '/early-access'
+      preLoaderRoute: typeof EarlyAccessRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/api-keys': {
       id: '/api-keys'
       path: '/api-keys'
@@ -128,6 +158,7 @@ declare module '@tanstack/react-router' {
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   ApiKeysRoute: ApiKeysRoute,
+  EarlyAccessRoute: EarlyAccessRoute,
   OrganizationsRoute: OrganizationsRoute,
   VerifiedTokensRoute: VerifiedTokensRoute,
   OrganizationsOrgIdRoute: OrganizationsOrgIdRoute,

package/src/admin/ui/src/routes/__root.tsx

@@ -10,7 +10,7 @@ import type { QueryClient } from '@tanstack/react-query'
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
 import { type ComponentType } from 'react'
 import { Button, Identicon } from 'regen-ui'
-import { BadgeCheck, Building2, KeyRound, LogOut } from 'lucide-react'
+import { BadgeCheck, Building2, KeyRound, LogOut, Ticket } from 'lucide-react'
 import { WagmiProvider } from 'wagmi'
 
 import appCss from '../styles.css?url'
@@ -115,6 +115,7 @@ const nav = [
   { exact: false, href: '/organizations', icon: Building2, label: 'Organizations' },
   { exact: false, href: '/api-keys', icon: KeyRound, label: 'API Keys' },
   { exact: false, href: '/verified-tokens', icon: BadgeCheck, label: 'Verified Tokens' },
+  { exact: false, href: '/early-access', icon: Ticket, label: 'Early Access' },
 ] as const
 
 function Sidebar(props: { email: string; logoutUrl?: string }) {

package/src/admin/ui/src/routes/early-access.tsx

@@ -0,0 +1,157 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
+import { Button, Fields, Input } from 'regen-ui'
+import { Plus, Trash2 } from 'lucide-react'
+
+import { Card, Notice, Page } from '../components/Page'
+import { Dialog } from '../components/Dialog'
+import * as EarlyAccess from '../lib/early-access'
+
+export const Route = createFileRoute('/early-access')({
+  loader: ({ context }) => context.queryClient.prefetchQuery(EarlyAccess.list.options()),
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const [open, setOpen] = useState(false)
+  const entries = EarlyAccess.list.useQuery()
+  const add = EarlyAccess.add.useMutation()
+
+  return (
+    <Dialog.Root onOpenChange={setOpen} open={open}>
+      <Page
+        title="Early Access"
+        description="Manage which accounts have early access"
+        action={
+          <Dialog.Trigger
+            render={
+              <Button variant="primary">
+                <Plus className="size-4" />
+                Add entry
+              </Button>
+            }
+          />
+        }
+      >
+        <EntryList
+          entries={entries.data?.data ?? []}
+          error={entries.error}
+          loading={entries.isPending}
+        />
+        <Dialog.Popup>
+          <AddEntryForm
+            onSubmit={(input) =>
+              add.mutate(input, {
+                onError: (error) => alert(error.message),
+                onSuccess: () => setOpen(false),
+              })
+            }
+            pending={add.isPending}
+          />
+        </Dialog.Popup>
+      </Page>
+    </Dialog.Root>
+  )
+}
+
+function AddEntryForm(props: {
+  onSubmit: (input: EarlyAccess.add.Input) => void
+  pending: boolean
+}) {
+  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    const entry = new FormData(event.currentTarget).get('entry')
+    if (typeof entry !== 'string' || !entry.trim()) return
+    props.onSubmit({ entry: entry.trim() })
+  }
+
+  return (
+    <>
+      <Dialog.Title>Add Entry</Dialog.Title>
+      <Dialog.Description>
+        Grant early access to a whole domain or a single email
+      </Dialog.Description>
+      <form className="mt-6 flex flex-col gap-8" onSubmit={onSubmit}>
+        <Fields className="gap-6" variant="default">
+          <Input
+            autoComplete="off"
+            label="Domain or email"
+            name="entry"
+            placeholder="example.org or user@example.org"
+            required
+            spellCheck={false}
+          />
+        </Fields>
+        <div className="flex justify-end gap-2">
+          <Dialog.Close render={<Button type="button">Cancel</Button>} />
+          <Button loading={props.pending} type="submit" variant="primary">
+            Add entry
+          </Button>
+        </div>
+      </form>
+    </>
+  )
+}
+
+function EntryList(props: {
+  entries: readonly EarlyAccess.Entry[]
+  error: Error | null
+  loading: boolean
+}) {
+  return (
+    <Card>
+      {props.loading ? (
+        <Notice>Loading entries…</Notice>
+      ) : props.error ? (
+        <Notice>{props.error.message}</Notice>
+      ) : props.entries.length === 0 ? (
+        <Notice>No entries yet.</Notice>
+      ) : (
+        <ul className="divide-y divide-border">
+          {props.entries.map((entry) => (
+            <EntryRow entry={entry} key={entry.entry} />
+          ))}
+        </ul>
+      )}
+    </Card>
+  )
+}
+
+function EntryRow(props: { entry: EarlyAccess.Entry }) {
+  const { entry } = props
+  const remove = EarlyAccess.remove.useMutation()
+
+  function onRemove() {
+    if (!confirm(`Remove ${entry.entry}? Matching users lose early access.`)) return
+    remove.mutate({ entry: entry.entry }, { onError: (error) => alert(error.message) })
+  }
+
+  return (
+    <li className="flex items-center justify-between gap-4 px-5 py-2.5">
+      <div className="flex min-w-0 flex-col gap-1">
+        <span className="truncate text-label-14 text-foreground">{entry.entry}</span>
+        <span className="text-label-12 text-foreground-secondary">
+          Added by {entry.createdBy} · {formatDate(entry.createdAt)}
+        </span>
+      </div>
+      <Button.Icon
+        className="text-foreground-secondary hover:text-negative"
+        disabled={remove.isPending}
+        onClick={onRemove}
+        size="lg"
+        title="Remove entry"
+        variant="plain"
+      >
+        <Trash2 />
+      </Button.Icon>
+    </li>
+  )
+}
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString(undefined, {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  })
+}