tapimo 0.7.1 → 0.8.0

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

@@ -0,0 +1,137 @@
+import { Link } from '@tanstack/react-router'
+import type { ComponentProps, FormEventHandler, ReactNode, TextareaHTMLAttributes } from 'react'
+import { Button, Fields, Input, Select } from 'regen-ui'
+import { TriangleAlert } from 'lucide-react'
+
+import * as EarnVaults from '../lib/earn-vaults.js'
+
+/** Shared form shell for creating and editing verified Earn vaults. */
+export function EarnVaultForm(options: EarnVaultForm.Props) {
+  return (
+    <form
+      className="flex w-full max-w-2xl flex-col border border-border bg-surface"
+      onChange={options.onChange}
+      onSubmit={options.onSubmit}
+    >
+      <div className="flex flex-col gap-5 p-5">
+        <Fields className="gap-6" variant="default">
+          {options.children}
+        </Fields>
+        {options.error ? <EarnVaultForm.Error>{options.error}</EarnVaultForm.Error> : null}
+      </div>
+      <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
+        <Button render={<Link search={{ chainId: options.chainId }} to="/earn/vaults" />}>
+          Cancel
+        </Button>
+        {options.action}
+      </div>
+    </form>
+  )
+}
+
+export namespace EarnVaultForm {
+  /** Props for the verified-vault form shell. */
+  export type Props = {
+    /** Primary form action. */
+    action: ReactNode
+    /** Selected parent Tempo chain. */
+    chainId: EarnVaults.ChainId
+    /** Form fields. */
+    children: ReactNode
+    /** Mutation error shown above the footer. */
+    error?: string | undefined
+    /** Form change handler. */
+    onChange: FormEventHandler<HTMLFormElement>
+    /** Form submit handler. */
+    onSubmit: FormEventHandler<HTMLFormElement>
+  }
+
+  /** Address input with native Ethereum address validation. */
+  export function AddressInput(options: AddressInput.Props) {
+    return (
+      <Input
+        {...options}
+        autoCapitalize="off"
+        autoComplete="off"
+        pattern="0x[a-fA-F0-9]{40}"
+        placeholder={options.placeholder ?? '0x…'}
+        spellCheck={false}
+      />
+    )
+  }
+
+  export namespace AddressInput {
+    /** Props accepted by an Earn address input. */
+    export type Props = ComponentProps<typeof Input>
+  }
+
+  /** Tempo chain selector for verified Earn vaults. */
+  export function ChainSelect(options: ChainSelect.Props) {
+    return (
+      <Select
+        aria-label="Earn vault chain"
+        className={options.className}
+        items={EarnVaults.chains.map((chain) => ({
+          label: chain.label,
+          value: String(chain.id),
+        }))}
+        onChange={(value) => options.onChange(Number(value) as EarnVaults.ChainId)}
+        value={String(options.value)}
+      />
+    )
+  }
+
+  export namespace ChainSelect {
+    /** Props accepted by the Earn chain selector. */
+    export type Props = {
+      /** Optional selector width or placement styles. */
+      className?: string | undefined
+      /** Called when the selected chain changes. */
+      onChange: (chainId: EarnVaults.ChainId) => void
+      /** Selected parent Tempo chain. */
+      value: EarnVaults.ChainId
+    }
+  }
+
+  /** Inline mutation error shown above form actions. */
+  export function Error(options: Error.Props) {
+    return (
+      <div
+        className="flex items-start gap-3 border border-negative bg-negative-subtle p-3 text-copy-13 text-negative"
+        role="alert"
+      >
+        <TriangleAlert className="mt-0.5 size-4 shrink-0" />
+        <p className="whitespace-pre-line">{options.children}</p>
+      </div>
+    )
+  }
+
+  export namespace Error {
+    /** Props accepted by an Earn form error. */
+    export type Props = {
+      /** Error message. */
+      children: ReactNode
+    }
+  }
+
+  /** Multi-line field used for descriptions and token lists. */
+  export function Textarea({ label, ...options }: Textarea.Props) {
+    return (
+      <label className="flex min-w-0 flex-col gap-2 text-label-13 text-foreground-secondary">
+        {label}
+        <textarea
+          {...options}
+          className="w-full resize-y rounded-body border-2 border-transparent bg-secondary px-3 py-2.5 text-copy-13 text-foreground outline-none placeholder:text-foreground-secondary/50 hover:bg-secondary-hover focus-visible:border-focus focus-visible:bg-secondary-hover"
+        />
+      </label>
+    )
+  }
+
+  export namespace Textarea {
+    /** Props accepted by an Earn form textarea. */
+    export type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+      /** Visible field label. */
+      label: string
+    }
+  }
+}

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

@@ -2,8 +2,8 @@ import { Bytes, Hash, type Address } from 'ox'
 import { Identicon } from 'regen-ui'
 import { LogOut } from 'lucide-react'
 
-import * as Config from '../lib/config'
-import { ThemeToggle } from './ThemeToggle'
+import * as Config from '../lib/config.js'
+import { ThemeToggle } from './ThemeToggle.js'
 
 /** Mobile-only header profile: identicon + sign-out, shown when the sidebar is hidden. */
 export function MobileProfile() {

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

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 import { cx } from 'regen-ui'
 
-import { MobileProfile } from './MobileProfile'
+import { MobileProfile } from './MobileProfile.js'
 
 /** Page header: title, optional description, and an optional right-aligned action. */
 export function Page(props: {

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

@@ -1,6 +1,6 @@
 import { Moon, Sun } from 'lucide-react'
 
-import * as Theme from '../lib/theme'
+import * as Theme from '../lib/theme.js'
 
 /** Button that switches between the light and dark color themes. */
 export function ThemeToggle() {

package/src/admin/ui/src/lib/api-keys.ts

@@ -2,15 +2,18 @@ import * as ReactQuery from '@tanstack/react-query'
 import type { InferRequestType, InferResponseType } from 'hono/client'
 import * as z from 'zod/mini'
 
-import { client } from './client'
+import { client } from './client.js'
+import * as Response from './response.js'
 
 /** A single API key record from the list endpoint. */
 export type ApiKey = InferResponseType<(typeof client)['api-keys']['$get'], 200>['data'][number]
 
 /** URL-backed API key filters. */
 export const search = z.object({
+  environment: z.catch(z.optional(z.enum(['production', 'sandbox'])), undefined),
   orgId: z.catch(z.optional(z.string()), undefined),
   projectId: z.catch(z.optional(z.string()), undefined),
+  query: z.catch(z.optional(z.string()), undefined),
 })
 
 /** API key list filters. */
@@ -50,11 +53,36 @@ export namespace get {
 /** Provision a new API key. */
 export namespace provision {
   export type Input = InferRequestType<(typeof client)['api-keys']['$post']>['json']
-  export function fn(json: Input) {
-    return client['api-keys'].$post({ json }).then((r) => {
-      if (!r.ok) throw new Error('Failed to provision key.')
-      return r.json()
+  export async function fn(json: Input) {
+    const response = await client['api-keys'].$post({ json })
+    if (!response.ok)
+      throw new Error(
+        await Response.errorMessage(response, { fallback: 'Failed to provision key.' }),
+      )
+    return response.json()
+  }
+  export function useMutation() {
+    const queryClient = ReactQuery.useQueryClient()
+    return ReactQuery.useMutation({
+      mutationFn: fn,
+      onSuccess: () => queryClient.invalidateQueries({ queryKey: get.baseKey }),
+    })
+  }
+}
+
+/** Updates API-key display metadata. */
+export namespace update {
+  export type Input = InferRequestType<(typeof client)['api-keys'][':id']['$patch']>['json']
+  export async function fn(options: { id: string; input: Input }) {
+    const response = await client['api-keys'][':id'].$patch({
+      json: options.input,
+      param: { id: options.id },
     })
+    if (!response.ok)
+      throw new Error(
+        await Response.errorMessage(response, { fallback: 'Failed to update the API key.' }),
+      )
+    return response.json()
   }
   export function useMutation() {
     const queryClient = ReactQuery.useQueryClient()
@@ -67,8 +95,10 @@ export namespace provision {
 
 /** Revoke an API key by id. */
 export namespace revoke {
-  export function fn(id: string) {
-    return client['api-keys'][':id'].$delete({ param: { id } })
+  export async function fn(id: string) {
+    const response = await client['api-keys'][':id'].$delete({ param: { id } })
+    if (!response.ok) throw new Error('Failed to revoke the API key.')
+    return response.json()
   }
   export function useMutation() {
     const queryClient = ReactQuery.useQueryClient()

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

@@ -1,6 +1,6 @@
 import { hc } from 'hono/client'
 
-import type { App } from '../../../App'
+import type { App } from '../../../App.js'
 
 // Mount root for API calls: the shell injects `<base href="<mount>/">`, so use
 // it when present. The Vite dev shell has none, so `document.baseURI` would be

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

@@ -1,6 +1,6 @@
 import { queryOptions, useQuery } from '@tanstack/react-query'
 
-import { client } from './client'
+import { client } from './client.js'
 
 /** The auth contract the SPA reads from `GET config.json` once loaded. */
 export type Config = {

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

@@ -1,7 +1,8 @@
 import * as ReactQuery from '@tanstack/react-query'
 import type { InferResponseType } from 'hono/client'
 
-import { client } from './client'
+import { client } from './client.js'
+import * as Response from './response.js'
 
 /** A stored allowlist entry (domain or exact email) from the list endpoint. */
 export type Entry = InferResponseType<(typeof client)['early-access']['$get'], 200>['data'][number]
@@ -27,7 +28,8 @@ 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.'))
+    if (!response.ok)
+      throw new Error(await Response.errorMessage(response, { fallback: 'Failed to add entry.' }))
     return response.json()
   }
   export function useMutation() {
@@ -44,7 +46,10 @@ 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.'))
+    if (!response.ok)
+      throw new Error(
+        await Response.errorMessage(response, { fallback: 'Failed to remove entry.' }),
+      )
     return response.json()
   }
   export function useMutation() {
@@ -55,9 +60,3 @@ export namespace remove {
     })
   }
 }
-
-/** 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/earn-vaults.ts

@@ -0,0 +1,207 @@
+import * as ReactQuery from '@tanstack/react-query'
+import type { InferRequestType, InferResponseType } from 'hono/client'
+import { tempo as mainnet, tempoTestnet as testnet } from 'viem/tempo/chains'
+import * as z from 'zod/mini'
+
+import { client } from './client.js'
+
+type BaseListResponse = InferResponseType<(typeof client)['earn']['verified-vaults']['$get'], 200>
+type DetailResponse = InferResponseType<
+  (typeof client)['earn']['verified-vaults'][':vaultId']['$get'],
+  200
+>
+
+/** One Earn vault resolved from current chain state. */
+export type Vault = DetailResponse &
+  Required<Pick<DetailResponse, 'access' | 'capabilities' | 'zone'>>
+
+type ListResponse = Omit<BaseListResponse, 'data'> & { data: readonly Vault[] }
+
+type InsertRequest = InferRequestType<(typeof client)['earn']['verified-vaults']['$put']>['json']
+const include = 'access,capabilities,zone' as const
+
+/** A chain id managed by the Earn registry UI. */
+export type ChainId = typeof mainnet.id | typeof testnet.id
+
+/** Moderato is the first chain with a curated Earn deployment. */
+export const defaultChain: ChainId = testnet.id
+
+/** Tempo chains managed by the Earn registry UI. */
+export const chains = [
+  { id: mainnet.id, label: 'Mainnet' },
+  { id: testnet.id, label: 'Testnet' },
+] as const
+
+/** Formats an Earn engine type for display. */
+export function engineLabel(type: NonNullable<Vault['engine']['type']>) {
+  return type === 'erc4626' ? 'ERC-4626' : 'Veda'
+}
+
+/** Curated vault fields accepted by the verification endpoint. */
+export type InsertInput = Omit<InsertRequest, 'chainId'> & {
+  /** Parent Tempo chain containing the vault. */
+  chainId: number
+}
+
+/** Schemas shared by Earn vault routes. */
+export namespace schema {
+  /** Search parameters selecting an Earn registry chain. */
+  export const Search = z.object({
+    chainId: z.catch(
+      z.optional(
+        z.pipe(z.coerce.number(), z.union([z.literal(mainnet.id), z.literal(testnet.id)])),
+      ),
+      undefined,
+    ),
+  })
+}
+
+/** Resolve one Earn vault from current chain state. */
+export namespace get {
+  /** Chain and vault identity used for resolution. */
+  export type Input = {
+    /** Parent Tempo chain containing the vault. */
+    chainId: number
+    /** Earn vault contract address. */
+    vaultId: InsertInput['vaultAddress']
+  }
+
+  /** Stable query key for one resolved vault. */
+  export function key(input: Input) {
+    return ['earn-verified-vaults', 'detail', input.chainId, input.vaultId.toLowerCase()] as const
+  }
+
+  /** Resolves one vault through the admin API. */
+  export async function fn(input: Input) {
+    const response = await client.earn['verified-vaults'][':vaultId'].$get({
+      param: { vaultId: input.vaultId },
+      query: { chainId: String(input.chainId), include },
+    })
+    if (!response.ok) throw new Error(await errorMessage(response, 'Vault not found.'))
+    return response.json() as Promise<Vault>
+  }
+
+  /** TanStack Query options for one resolved vault. */
+  export function options(input: Input, options: options.Options = {}) {
+    return ReactQuery.queryOptions({
+      enabled: options.enabled,
+      queryFn: () => fn(input),
+      queryKey: key(input),
+      staleTime: 30_000,
+    })
+  }
+
+  export namespace options {
+    /** Controls whether the resolution query may run. */
+    export type Options = {
+      /** Whether the query has a valid vault address. */
+      enabled?: boolean | undefined
+    }
+  }
+}
+
+/** List verified Earn vaults for one chain. */
+export namespace list {
+  /** Input selecting the chain registry. */
+  export type Input = { chainId: number }
+
+  /** Stable query key for one chain registry. */
+  export function key(options: Input) {
+    return ['earn-verified-vaults', options.chainId] as const
+  }
+
+  /** Fetches one page of verified Earn vaults. */
+  export async function fn(options: Input & { cursor?: string | undefined }) {
+    const response = await client.earn['verified-vaults'].$get({
+      query: {
+        chainId: String(options.chainId),
+        ...(options.cursor ? { cursor: options.cursor } : {}),
+        include,
+        limit: '25',
+      },
+    })
+    if (!response.ok) throw new Error(await errorMessage(response, 'Failed to load Earn vaults.'))
+    return response.json() as Promise<ListResponse>
+  }
+
+  /** Infinite-query options for one chain registry. */
+  export function options(options: Input) {
+    return ReactQuery.infiniteQueryOptions({
+      getNextPageParam: (page: ListResponse) => page.nextCursor,
+      initialPageParam: null as string | null,
+      queryFn: ({ pageParam }) => fn({ ...options, cursor: pageParam ?? undefined }),
+      queryKey: key(options),
+      staleTime: 30_000,
+    })
+  }
+}
+
+/** Verify and save one Earn vault. */
+export namespace insert {
+  /** Saves curated fields through the admin API. */
+  export async function fn(input: InsertInput) {
+    const response = await client.earn['verified-vaults'].$put({ json: input })
+    if (!response.ok) throw new Error(await errorMessage(response, 'Failed to verify Earn vault.'))
+    return response.json() as Promise<Vault>
+  }
+
+  /** Mutation that refreshes the affected vault and registry. */
+  export function useMutation() {
+    const queryClient = ReactQuery.useQueryClient()
+    return ReactQuery.useMutation({
+      mutationFn: fn,
+      onSuccess: (vault, input) => {
+        queryClient.setQueryData(
+          get.key({ chainId: input.chainId, vaultId: input.vaultAddress }),
+          vault,
+        )
+        return queryClient.invalidateQueries({ queryKey: list.key({ chainId: input.chainId }) })
+      },
+    })
+  }
+}
+
+/** Remove one vault from the verified registry. */
+export namespace remove {
+  /** Identity of the verified vault to remove. */
+  export type Input = {
+    /** Parent Tempo chain containing the vault. */
+    chainId: number
+    /** Earn vault contract address. */
+    vaultId: InsertInput['vaultAddress']
+  }
+
+  /** Removes a vault through the admin API. */
+  export async function fn(input: Input) {
+    const response = await client.earn['verified-vaults'][':vaultId'].$delete({
+      param: { vaultId: input.vaultId },
+      query: { chainId: String(input.chainId) },
+    })
+    if (!response.ok) throw new Error(await errorMessage(response, 'Failed to remove Earn vault.'))
+  }
+
+  /** Mutation that refreshes the affected chain registry. */
+  export function useMutation() {
+    const queryClient = ReactQuery.useQueryClient()
+    return ReactQuery.useMutation({
+      mutationFn: fn,
+      onSuccess: (_data, input) =>
+        Promise.all([
+          queryClient.invalidateQueries({ queryKey: list.key({ chainId: input.chainId }) }),
+          queryClient.invalidateQueries({
+            queryKey: get.key({ chainId: input.chainId, vaultId: input.vaultId }),
+          }),
+        ]),
+    })
+  }
+}
+
+async function errorMessage(response: { json(): Promise<unknown> }, fallback: string) {
+  type Body = { error?: { details?: readonly { message?: string }[]; message?: string } }
+  const body = (await response.json().catch(() => null)) as Body | null
+  const message = body?.error?.message ?? fallback
+  const details = body?.error?.details?.flatMap((detail) =>
+    detail.message ? [detail.message] : [],
+  )
+  return details?.length ? `${message}\n${details.join('\n')}` : message
+}

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

@@ -0,0 +1,13 @@
+/** Formats a localized medium date. */
+export function date(value: string): string {
+  return new Date(value).toLocaleDateString(undefined, {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  })
+}
+
+/** Formats a medium English date. */
+export function mediumDate(value: string): string {
+  return new Intl.DateTimeFormat('en', { dateStyle: 'medium' }).format(new Date(value))
+}

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

@@ -4,10 +4,10 @@ import { createElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { describe, expect, it, vi } from 'vite-plus/test'
 
-import { routeTree } from '../routeTree.gen'
-import { BillingSourcesCard, Route as DetailRoute } from '../routes/organizations_.$orgId'
-import { Route as ListRoute } from '../routes/organizations'
-import * as Organizations from './organizations'
+import { routeTree } from '../routeTree.gen.js'
+import { BillingSourcesCard, Route as DetailRoute } from '../routes/organizations_.$orgId.js'
+import { Route as ListRoute } from '../routes/organizations.js'
+import * as Organizations from './organizations.js'
 
 describe('schema.Search', () => {
   it('normalizes valid lookup state', () => {
@@ -51,6 +51,16 @@ describe('searchParameters', () => {
   })
 })
 
+describe('lookupQuery', () => {
+  it('waits for the API search minimum', () => {
+    expect(Organizations.lookupQuery('  ac  ')).toBeUndefined()
+  })
+
+  it('trims a searchable value', () => {
+    expect(Organizations.lookupQuery('  acme  ')).toBe('acme')
+  })
+})
+
 describe('withEnabledSources', () => {
   it('replaces only organization-wide billing availability', () => {
     const detail = {

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

@@ -2,7 +2,7 @@ import * as ReactQuery from '@tanstack/react-query'
 import type { InferResponseType } from 'hono/client'
 import * as z from 'zod/mini'
 
-import { client } from './client'
+import { client } from './client.js'
 
 type ListResponse = InferResponseType<(typeof client)['organizations']['$get'], 200>
 type DetailResponse = InferResponseType<(typeof client)['organizations'][':orgId']['$get'], 200>
@@ -91,6 +91,12 @@ export declare namespace searchParameters {
   type Options = { query?: string | undefined }
 }
 
+/** Normalizes autocomplete input once it meets the organization search minimum. */
+export function lookupQuery(value: string) {
+  const query = value.trim()
+  return query.length >= 3 ? query : undefined
+}
+
 /** List organizations, optionally filtered by id, name, or member email. */
 export namespace list {
   /** Organization lookup filters. */

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

@@ -0,0 +1,22 @@
+/** Extracts a standard API error-envelope message with a fallback. */
+export async function errorMessage(
+  response: errorMessage.Response,
+  options: errorMessage.Options,
+): Promise<string> {
+  const body = (await response.json().catch(() => null)) as { error?: { message?: string } } | null
+  return body?.error?.message ?? options.fallback
+}
+
+/** Types for {@link errorMessage}. */
+export declare namespace errorMessage {
+  /** Options for extracting an API error message. */
+  type Options = {
+    /** Message returned when the response has no standard error message. */
+    fallback: string
+  }
+  /** Response shape consumed by {@link errorMessage}. */
+  type Response = {
+    /** Parses the response body. */
+    json(): Promise<unknown>
+  }
+}

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

@@ -1,19 +1,27 @@
-import { describe, expect, it } from 'vite-plus/test'
+import { describe, expect, expectTypeOf, it } from 'vite-plus/test'
 
-import { fromZoneChainId } from './scopes'
+import * as Scopes from './scopes.js'
 
 describe('fromZoneChainId', () => {
-  it('builds a canonical Zone read scope', () => {
-    expect(fromZoneChainId(' 000421700001 ')).toBe('zone:421700001:read')
+  it('builds canonical Zone scopes', () => {
+    const read = Scopes.fromZoneChainId(' 000421700001 ')
+    const write = Scopes.fromZoneChainId(' 000421700001 ', 'write')
+
+    expect(read).toBe('zone:421700001:read')
+    expect(write).toBe('zone:421700001:write')
+    expectTypeOf(read).toEqualTypeOf<`zone:${string}:read` | undefined>()
+    expectTypeOf(write).toEqualTypeOf<`zone:${string}:write` | undefined>()
   })
 
   it('rejects non-positive and malformed chain ids', () => {
-    expect(['', '0', '-1', '1.5', 'mainnet'].map(fromZoneChainId)).toEqual([
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-    ])
+    expect(['', '0', '-1', '1.5', 'mainnet'].map((value) => Scopes.fromZoneChainId(value))).toEqual(
+      [undefined, undefined, undefined, undefined, undefined],
+    )
+  })
+})
+
+describe('get', () => {
+  it('versions persisted scope catalogs', () => {
+    expect(Scopes.get.key).toEqual(['scopes', 'v2'])
   })
 })