tapimo 0.13.0 → 0.15.0

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

@@ -74,27 +74,8 @@ function RouteComponent() {
     const rateLimit = field('rateLimit')
     const limit = rateLimit ? Number(rateLimit) : undefined
     const environment = field('environment') === 'sandbox' ? 'sandbox' : 'production'
-    const pendingZoneScopes = (['read', 'write'] as const).map((access) => {
-      const chainId = field(`zoneChainId_${access}`)
-      return {
-        chainId,
-        scope: chainId ? Scopes.fromZoneChainId(chainId, access) : undefined,
-      }
-    })
-    if (pendingZoneScopes.some(({ chainId, scope }) => chainId && !scope)) {
-      alert('Enter a positive integer Zone chain ID.')
-      return
-    }
-    const scopes = [
-      ...new Set([
-        ...form.getAll('scopes').filter((v): v is string => typeof v === 'string'),
-        ...pendingZoneScopes.flatMap(({ scope }) => (scope ? [scope] : [])),
-      ]),
-    ]
-    if (scopes.length === 0) {
-      alert('Select at least one scope.')
-      return
-    }
+    const scopes = scopesFrom(form)
+    if (!scopes) return
     provision.mutate(
       {
         allowedIps,
@@ -208,6 +189,39 @@ function RouteComponent() {
   )
 }
 
+function scopesFrom(form: FormData, options: scopesFrom.Options = {}) {
+  const field = (key: string) => {
+    const value = form.get(key)
+    return typeof value === 'string' ? value.trim() : ''
+  }
+  const pendingZoneScopes = (['read', 'write'] as const).map((access) => {
+    const chainId = field(`zoneChainId_${access}`)
+    return {
+      chainId,
+      scope: chainId ? Scopes.fromZoneChainId(chainId, access) : undefined,
+    }
+  })
+  if (pendingZoneScopes.some(({ chainId, scope }) => chainId && !scope)) {
+    alert('Enter a positive integer Zone chain ID.')
+    return undefined
+  }
+  const scopes = [
+    ...new Set([
+      ...form.getAll('scopes').filter((value): value is string => typeof value === 'string'),
+      ...pendingZoneScopes.flatMap(({ scope }) => (scope ? [scope] : [])),
+    ]),
+  ]
+  if (scopes.length > 0 || options.allowEmpty) return scopes
+  alert('Select at least one scope.')
+  return undefined
+}
+
+declare namespace scopesFrom {
+  type Options = {
+    allowEmpty?: boolean | undefined
+  }
+}
+
 function TokenBanner(props: { onDismiss: () => void; title?: string; token: string }) {
   const { copy, notifying } = useCopy()
   return (
@@ -251,7 +265,6 @@ function ProvisionForm(props: {
   pending: boolean
   projectId?: string | undefined
 }) {
-  const scopes = Scopes.get.useQuery()
   const destination = props.projectId
     ? { label: 'Project', value: props.projectId }
     : props.orgId
@@ -291,7 +304,7 @@ function ProvisionForm(props: {
           className="min-h-0 flex-1 gap-6 overflow-y-auto overscroll-contain"
           variant="default"
         >
-          <OrganizationAutocomplete orgId={props.orgId} />
+          <OrganizationAutocomplete orgId={props.orgId} readOnly={Boolean(props.orgId)} />
           <Input label="Name" name="name" placeholder="e.g. Explorer testnet" required />
           <div className="flex flex-col gap-2">
             <span className="label-13 text-foreground-secondary">Environment</span>
@@ -332,48 +345,7 @@ function ProvisionForm(props: {
               unrestricted access.
             </span>
           </label>
-          <div className="flex flex-col gap-2">
-            <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>
-            ) : (
-              <div className="border border-border">
-                <Rows variant="surface">
-                  {(scopes.data?.data ?? []).map((entry) => {
-                    const zoneAccess = Scopes.accessFromTemplate(entry.scope)
-                    return zoneAccess ? (
-                      <ZoneScopeRow
-                        access={zoneAccess}
-                        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>
+          <ScopeFields defaultScopes={['data:read']} />
         </Fields>
         <div className="flex justify-end gap-2">
           <Dialog.Close render={<Button type="button">Cancel</Button>} />
@@ -386,20 +358,20 @@ function ProvisionForm(props: {
   )
 }
 
-function OrganizationAutocomplete(props: { orgId?: string | undefined }) {
+function OrganizationAutocomplete(options: OrganizationAutocomplete.Props) {
   const inputId = useId()
   const hintId = useId()
   const listId = useId()
   const [activeIndex, setActiveIndex] = useState(-1)
   const [dismissed, setDismissed] = useState(false)
   const [focused, setFocused] = useState(false)
-  const [value, setValue] = useState(props.orgId ?? '')
+  const [value, setValue] = useState(options.orgId ?? '')
   const debouncedValue = useDebouncedValue(value, 300)
   const searchableValue = Organizations.lookupQuery(value)
   const query = searchableValue ? Organizations.lookupQuery(debouncedValue) : undefined
   const organizations = useInfiniteQuery({
     ...Organizations.list.options({ query }),
-    enabled: Boolean(query && !props.orgId),
+    enabled: Boolean(query && !options.readOnly),
   })
   const records =
     query && searchableValue === query
@@ -416,7 +388,8 @@ function OrganizationAutocomplete(props: { orgId?: string | undefined }) {
 
   useEffect(() => setActiveIndex(records.length ? 0 : -1), [query, records.length])
 
-  if (props.orgId) return <Input label="Organization" name="orgId" readOnly value={props.orgId} />
+  if (options.readOnly)
+    return <Input label="Organization" name="orgId" readOnly value={options.orgId} />
 
   return (
     <div className="flex min-w-0 flex-col gap-2">
@@ -517,6 +490,16 @@ function OrganizationAutocomplete(props: { orgId?: string | undefined }) {
   )
 }
 
+declare namespace OrganizationAutocomplete {
+  /** Properties for selecting or displaying an organization. */
+  type Props = {
+    /** Organization id used as the initial value. */
+    orgId?: string | undefined
+    /** Whether the organization id is displayed without allowing changes. */
+    readOnly?: boolean | undefined
+  }
+}
+
 function useDebouncedValue(value: string, delay: number) {
   const [debouncedValue, setDebouncedValue] = useState(value)
 
@@ -528,9 +511,104 @@ function useDebouncedValue(value: string, delay: number) {
   return debouncedValue
 }
 
+function ScopeFields(options: ScopeFields.Props) {
+  const scopes = Scopes.get.useQuery()
+  const catalog = scopes.data?.data ?? []
+  const additionalScopes = options.defaultScopes.filter(
+    (scope) => !scope.startsWith('zone:') && !catalog.some((entry) => entry.scope === scope),
+  )
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <span className="label-13 text-foreground-secondary">Scopes</span>
+      {scopes.isPending ? (
+        <>
+          <span className="text-label-13 text-foreground-secondary">Loading scopes…</span>
+          <PreservedScopes scopes={options.defaultScopes} />
+        </>
+      ) : scopes.error ? (
+        <>
+          <span className="text-label-13 text-negative">{scopes.error.message}</span>
+          <PreservedScopes scopes={options.defaultScopes} />
+        </>
+      ) : (
+        <div className="border border-border">
+          <Rows variant="surface">
+            {catalog.map((entry) => {
+              const zoneAccess = Scopes.accessFromTemplate(entry.scope)
+              return zoneAccess ? (
+                <ZoneScopeRow
+                  access={zoneAccess}
+                  defaultScopes={options.defaultScopes.filter(
+                    (scope) => scope.startsWith('zone:') && scope.endsWith(`:${zoneAccess}`),
+                  )}
+                  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={options.defaultScopes.includes(entry.scope)}
+                    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>
+              )
+            })}
+            {additionalScopes.map((scope) => (
+              <Rows.Row
+                key={scope}
+                className="min-h-[56px] py-3"
+                render={<label className="cursor-pointer" />}
+                style={{ height: 'auto' }}
+              >
+                <Checkbox defaultChecked name="scopes" value={scope} />
+                <span className="flex min-w-0 flex-col gap-0.5">
+                  <span className="text-label-13 text-foreground">{scope}</span>
+                  <span className="text-label-12 text-foreground-secondary">
+                    Currently granted scope.
+                  </span>
+                </span>
+              </Rows.Row>
+            ))}
+          </Rows>
+        </div>
+      )}
+    </div>
+  )
+}
+
+declare namespace ScopeFields {
+  type Props = {
+    defaultScopes: readonly string[]
+  }
+}
+
+function PreservedScopes(options: PreservedScopes.Props) {
+  return options.scopes.map((scope) => (
+    <input key={scope} name="scopes" type="hidden" value={scope} />
+  ))
+}
+
+declare namespace PreservedScopes {
+  type Props = {
+    scopes: readonly string[]
+  }
+}
+
 function ZoneScopeRow(options: ZoneScopeRow.Props) {
   const [chainId, setChainId] = useState('')
-  const [selected, setSelected] = useState<readonly string[]>([])
+  const [selected, setSelected] = useState<readonly string[]>(options.defaultScopes)
   const scope = Scopes.fromZoneChainId(chainId, options.access)
   const duplicate = scope ? selected.includes(scope) : false
   const error =
@@ -614,6 +692,7 @@ function ZoneScopeRow(options: ZoneScopeRow.Props) {
 declare namespace ZoneScopeRow {
   type Props = {
     access: Scopes.ZoneAccess
+    defaultScopes: readonly string[]
     description: string
   }
 }
@@ -756,28 +835,46 @@ function EditDialog(options: EditDialog.Props) {
           </Button>
         }
       />
-      <Dialog.Popup>
+      <Dialog.Popup className="flex max-h-[calc(100dvh-2rem)] flex-col overflow-hidden">
         <Dialog.Title>Edit API key</Dialog.Title>
         <Dialog.Description>
-          {record.orgId === record.id
-            ? 'Update its name or associate it with an organization. New activity may take about a minute to appear there.'
-            : 'Use a name that identifies the service or integration using this key.'}
+          {record.projectId
+            ? 'Update its name, rate limit, or scopes. Changes may take about a minute to apply.'
+            : 'Update its name, rate limit, scopes, or organization. Changes may take about a minute to apply.'}
         </Dialog.Description>
         <form
-          className="mt-6 flex flex-col gap-6"
+          className="mt-6 flex min-h-0 flex-1 flex-col gap-6"
           key={open ? 'open' : 'closed'}
           onSubmit={(event) => {
             event.preventDefault()
             const form = new FormData(event.currentTarget)
             const name = form.get('name')
             const orgId = form.get('orgId')
+            const rateLimit = form.get('rateLimit')
+            const scopes = scopesFrom(form, { allowEmpty: true })
             if (typeof name !== 'string' || !name.trim()) return
+            if (!scopes) return
+            const limit = typeof rateLimit === 'string' && rateLimit ? Number(rateLimit) : undefined
+            if (limit !== undefined && (!Number.isInteger(limit) || limit < 0)) {
+              alert('Enter a non-negative whole-number rate limit.')
+              return
+            }
+            const rateLimits = Object.fromEntries(
+              Object.entries(record.rateLimits ?? {}).filter(([scope]) => scope !== '*'),
+            )
+            if (limit !== undefined)
+              rateLimits['*'] = {
+                limit,
+                period: record.rateLimits?.['*']?.period ?? 'minute',
+              }
             update.mutate(
               {
                 id: record.id,
                 input: {
                   name: name.trim(),
                   ...(typeof orgId === 'string' && orgId.trim() ? { orgId: orgId.trim() } : {}),
+                  rateLimits,
+                  scopes: scopes as ApiKeys.update.Input['scopes'],
                 },
               },
               {
@@ -787,15 +884,30 @@ function EditDialog(options: EditDialog.Props) {
             )
           }}
         >
-          <Input
-            autoFocus
-            defaultValue={record.name ?? ''}
-            label="Name"
-            name="name"
-            placeholder="e.g. Explorer testnet"
-            required
-          />
-          {record.orgId === record.id ? <OrganizationAutocomplete /> : null}
+          <Fields className="min-h-0 flex-1 gap-6 overflow-y-auto" variant="default">
+            <Input
+              autoFocus
+              defaultValue={record.name ?? ''}
+              label="Name"
+              name="name"
+              placeholder="e.g. Explorer testnet"
+              required
+            />
+            <OrganizationAutocomplete
+              orgId={record.orgId === record.id ? undefined : record.orgId}
+              readOnly={Boolean(record.projectId)}
+            />
+            <Input
+              defaultValue={record.rateLimits?.['*']?.limit}
+              label="Rate limit"
+              min={0}
+              name="rateLimit"
+              placeholder="Inherited"
+              suffix={record.rateLimits?.['*']?.period === 'second' ? 'req/sec' : 'req/min'}
+              type="number"
+            />
+            <ScopeFields defaultScopes={record.scopes} />
+          </Fields>
           <div className="flex justify-end gap-2">
             <Dialog.Close render={<Button type="button">Cancel</Button>} />
             <Button loading={update.isPending} type="submit" variant="primary">

package/src/admin/ui/src/routes/earn.vaults_.$vaultId.edit.tsx

@@ -1,25 +1,30 @@
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
-import { type FormEvent } from 'react'
-import { Button, Fields, Input } from 'regen-ui'
+import { type FormEvent, useEffect, useState } from 'react'
+import { Button, Fields, Input, Tabs } from 'regen-ui'
+import * as z from 'zod/mini'
 
 import { EarnVaultForm } from '../components/EarnVaultForm.js'
 import * as core_Page from '../components/Page.js'
+import { RewardCampaignForm } from '../components/RewardCampaignForm.js'
 import * as EarnVaults from '../lib/earn-vaults.js'
+import * as RewardCampaigns from '../lib/reward-campaigns.js'
 
 /** Route for editing a verified Earn vault. */
 export const Route = createFileRoute('/earn/vaults_/$vaultId/edit')({
-  validateSearch: EarnVaults.schema.Search,
+  validateSearch: z.extend(EarnVaults.schema.Search, {
+    tab: z.optional(z.union([z.literal('overview'), z.literal('rewards')])),
+  }),
   loaderDeps: ({ search }) => ({
     chainId: search.chainId ?? EarnVaults.defaultChain,
+    tab: search.tab ?? 'overview',
   }),
-  loader: ({ context, deps, params }) =>
-    context.queryClient.ensureQueryData(
-      EarnVaults.get.options({
-        chainId: deps.chainId,
-        vaultId: params.vaultId as VaultAddress,
-      }),
-    ),
+  loader: async ({ context, deps, params }) => {
+    const input = { chainId: deps.chainId, vaultId: params.vaultId as VaultAddress }
+    await context.queryClient.ensureQueryData(EarnVaults.get.options(input))
+    if (deps.tab === 'rewards')
+      await context.queryClient.prefetchQuery(RewardCampaigns.get.options(input))
+  },
   component: Page,
 })
 
@@ -28,6 +33,11 @@ function Page() {
   const search = Route.useSearch()
   const navigate = useNavigate({ from: Route.fullPath })
   const chainId = search.chainId ?? EarnVaults.defaultChain
+  const tab = search.tab ?? 'overview'
+  const [rewardsVisited, setRewardsVisited] = useState(tab === 'rewards')
+  useEffect(() => {
+    if (tab === 'rewards') setRewardsVisited(true)
+  }, [tab])
   const vault = useSuspenseQuery(
     EarnVaults.get.options({
       chainId,
@@ -46,72 +56,97 @@ function Page() {
 
   return (
     <core_Page.Page title="Edit vault" description="Update the curated verified vault details.">
-      <EarnVaultForm
-        action={
-          <Button loading={insert.isPending} type="submit" variant="primary">
-            Save changes
-          </Button>
+      <Tabs
+        active={tab}
+        onChange={(id) =>
+          void navigate({
+            search: id === 'overview' ? { chainId } : { chainId, tab: 'rewards' },
+          })
         }
-        chainId={chainId}
-        error={insert.error?.message}
-        onChange={insert.reset}
-        onSubmit={onSubmit}
-      >
-        <Input disabled label="Chain" value={chainLabel(chainId)} />
-        <Input disabled label="Address" value={vault.vaultAddress} />
-        <div className="flex gap-2">
-          <div className="w-32 shrink-0">
-            <Input disabled label="Asset token" value={vault.assetToken.symbol} />
+        tabs={[
+          { id: 'overview', label: 'Overview' },
+          { id: 'rewards', label: 'Rewards' },
+        ]}
+      />
+      <div hidden={tab !== 'overview'}>
+        <EarnVaultForm
+          action={
+            <Button loading={insert.isPending} type="submit" variant="primary">
+              Save changes
+            </Button>
+          }
+          chainId={chainId}
+          error={insert.error?.message}
+          onChange={insert.reset}
+          onSubmit={onSubmit}
+        >
+          <Input disabled label="Chain" value={chainLabel(chainId)} />
+          <Input disabled label="Address" value={vault.vaultAddress} />
+          <div className="flex gap-2">
+            <div className="w-32 shrink-0">
+              <Input disabled label="Asset token" value={vault.assetToken.symbol} />
+            </div>
+            <div className="flex-1">
+              <Input
+                defaultValue={vault.label}
+                label="Label"
+                name="label"
+                placeholder={vault.shareToken.name}
+                required
+              />
+            </div>
           </div>
-          <div className="flex-1">
+          <Fields.Inline>
+            <Input disabled label="Share token" value={vault.shareToken.symbol} />
             <Input
-              defaultValue={vault.label}
-              label="Label"
-              name="label"
-              placeholder={vault.shareToken.name}
-              required
+              disabled
+              label="Engine"
+              value={vault.engine.type ? EarnVaults.engineLabel(vault.engine.type) : 'Unknown'}
             />
-          </div>
-        </div>
-        <Fields.Inline>
-          <Input disabled label="Share token" value={vault.shareToken.symbol} />
+          </Fields.Inline>
           <Input
-            disabled
-            label="Engine"
-            value={vault.engine.type ? EarnVaults.engineLabel(vault.engine.type) : 'Unknown'}
+            autoCapitalize="off"
+            defaultValue={vault.slug ?? undefined}
+            label="Slug"
+            name="slug"
+            pattern="[a-z0-9]+(?:-[a-z0-9]+)*"
+            placeholder="lowercase-kebab-case"
+            required
+          />
+          <EarnVaultForm.Textarea
+            defaultValue={vault.description ?? undefined}
+            label="Description"
+            name="description"
+            placeholder="Describe this vault."
+            rows={3}
           />
-        </Fields.Inline>
-        <Input
-          autoCapitalize="off"
-          defaultValue={vault.slug ?? undefined}
-          label="Slug"
-          name="slug"
-          pattern="[a-z0-9]+(?:-[a-z0-9]+)*"
-          placeholder="lowercase-kebab-case"
-          required
-        />
-        <EarnVaultForm.Textarea
-          defaultValue={vault.description ?? undefined}
-          label="Description"
-          name="description"
-          placeholder="Describe this vault."
-          rows={3}
-        />
-        <EarnVaultForm.Textarea
-          defaultValue={vault.zone?.inputTokens.join('\n')}
-          label="Private input tokens"
-          name="privateInputTokens"
-          placeholder="One token address per line"
-          rows={3}
-        />
-        <EarnVaultForm.Textarea
-          defaultValue={vault.zone?.outputTokens.join('\n')}
-          label="Private output tokens"
-          name="privateOutputTokens"
-          placeholder="One token address per line"
-          rows={3}
-        />
-      </EarnVaultForm>
+          <EarnVaultForm.Textarea
+            defaultValue={vault.zone?.inputTokens.join('\n')}
+            label="Private input tokens"
+            name="privateInputTokens"
+            placeholder="One token address per line"
+            rows={3}
+          />
+          <EarnVaultForm.Textarea
+            defaultValue={vault.zone?.outputTokens.join('\n')}
+            label="Private output tokens"
+            name="privateOutputTokens"
+            placeholder="One token address per line"
+            rows={3}
+          />
+        </EarnVaultForm>
+      </div>
+      {rewardsVisited ? (
+        <div hidden={tab !== 'rewards'}>
+          <RewardCampaignForm
+            assetDecimals={vault.assetToken.decimals}
+            assetSymbol={vault.assetToken.symbol}
+            chainId={chainId}
+            earnShareDecimals={vault.shareToken.decimals}
+            vaultId={vault.vaultAddress}
+          />
+        </div>
+      ) : null}
     </core_Page.Page>
   )
 }