tapimo 0.7.0 → 0.7.2

package/src/admin/ui/src/routes/earn.vaults_.new.tsx

@@ -0,0 +1,190 @@
+import { useQuery } from '@tanstack/react-query'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { type FormEvent, useState } from 'react'
+import { Button, Fields, Input } from 'regen-ui'
+import { isAddress } from 'viem'
+
+import { EarnVaultForm } from '../components/EarnVaultForm.js'
+import * as core_Page from '../components/Page.js'
+import * as EarnVaults from '../lib/earn-vaults.js'
+
+/** Route for adding a verified Earn vault. */
+export const Route = createFileRoute('/earn/vaults_/new')({
+  validateSearch: EarnVaults.schema.Search,
+  component: Page,
+})
+
+function Page() {
+  const search = Route.useSearch()
+  const navigate = useNavigate({ from: Route.fullPath })
+  const chainId = search.chainId ?? EarnVaults.defaultChain
+  const [vaultId, setVaultId] = useState('')
+  const validVault = isAddress(vaultId)
+  const resolution = useQuery(
+    EarnVaults.get.options(
+      {
+        chainId,
+        vaultId: vaultId as VaultAddress,
+      },
+      { enabled: validVault },
+    ),
+  )
+  const insert = EarnVaults.insert.useMutation()
+
+  function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    if (!resolution.data) return
+    const input = inputFrom(new FormData(event.currentTarget), {
+      chainId,
+      vault: resolution.data,
+    })
+    insert.mutate(input, {
+      onError: (error) => alert(error.message),
+      onSuccess: () => void navigate({ search: { chainId }, to: '/earn/vaults' }),
+    })
+  }
+
+  return (
+    <core_Page.Page title="Add vault" description="Add a vault to the curated verified vault list.">
+      <EarnVaultForm
+        action={
+          <Button
+            disabled={!resolution.data}
+            loading={insert.isPending}
+            type="submit"
+            variant="primary"
+          >
+            Add vault
+          </Button>
+        }
+        chainId={chainId}
+        onChange={insert.reset}
+        onSubmit={onSubmit}
+      >
+        <div className="flex flex-col gap-2">
+          <span className="text-label-13 text-foreground-secondary">Chain</span>
+          <EarnVaultForm.ChainSelect
+            className="w-full"
+            onChange={(value) => {
+              insert.reset()
+              void navigate({
+                replace: true,
+                search: { chainId: value },
+                to: '/earn/vaults/new',
+              })
+            }}
+            value={chainId}
+          />
+        </div>
+        <EarnVaultForm.AddressInput
+          error={
+            vaultId && !validVault
+              ? 'Enter a valid address'
+              : resolution.isError
+                ? 'Vault not found'
+                : false
+          }
+          label="Address"
+          onChange={(event) => setVaultId(event.target.value.trim())}
+          required
+          value={vaultId}
+        />
+        {resolution.data ? (
+          <>
+            <div className="flex gap-2">
+              <div className="w-32 shrink-0">
+                <Input disabled label="Asset token" value={resolution.data.assetToken.symbol} />
+              </div>
+              <div className="flex-1">
+                <Input
+                  defaultValue={resolution.data.label}
+                  key={`${chainId}-${resolution.data.id}-label`}
+                  label="Label"
+                  name="label"
+                  placeholder={resolution.data.shareToken.name}
+                  required
+                />
+              </div>
+            </div>
+            <Fields.Inline>
+              <Input disabled label="Share token" value={resolution.data.shareToken.symbol} />
+              <Input
+                disabled
+                label="Engine"
+                value={
+                  resolution.data.engine.type
+                    ? EarnVaults.engineLabel(resolution.data.engine.type)
+                    : 'Unknown'
+                }
+              />
+            </Fields.Inline>
+            <Input
+              autoCapitalize="off"
+              label="Slug (optional)"
+              name="slug"
+              pattern="[a-z0-9]+(?:-[a-z0-9]+)*"
+              placeholder="Generated from the label when left blank"
+            />
+            <EarnVaultForm.Textarea
+              defaultValue={resolution.data.description ?? undefined}
+              key={`${chainId}-${resolution.data.id}-description`}
+              label="Description"
+              name="description"
+              placeholder="Describe this vault."
+              rows={3}
+            />
+            <EarnVaultForm.Textarea
+              defaultValue={resolution.data.zone?.inputTokens.join('\n')}
+              key={`${chainId}-${resolution.data.id}-private-input-tokens`}
+              label="Private input tokens"
+              name="privateInputTokens"
+              placeholder="One token address per line"
+              rows={3}
+            />
+            <EarnVaultForm.Textarea
+              defaultValue={resolution.data.zone?.outputTokens.join('\n')}
+              key={`${chainId}-${resolution.data.id}-private-output-tokens`}
+              label="Private output tokens"
+              name="privateOutputTokens"
+              placeholder="One token address per line"
+              rows={3}
+            />
+          </>
+        ) : null}
+      </EarnVaultForm>
+    </core_Page.Page>
+  )
+}
+
+type VaultAddress = EarnVaults.InsertInput['vaultAddress']
+
+function inputFrom(form: FormData, options: inputFrom.Options): EarnVaults.InsertInput {
+  const slug = field(form, 'slug')
+  return {
+    chainId: options.chainId,
+    description: field(form, 'description') || null,
+    label: field(form, 'label'),
+    privateInputTokens: addresses(form, 'privateInputTokens'),
+    privateOutputTokens: addresses(form, 'privateOutputTokens'),
+    ...(slug ? { slug } : {}),
+    vaultAddress: options.vault.vaultAddress,
+  }
+}
+
+declare namespace inputFrom {
+  type Options = {
+    chainId: EarnVaults.ChainId
+    vault: EarnVaults.Vault
+  }
+}
+
+function addresses(form: FormData, name: string): VaultAddress[] {
+  return field(form, name)
+    .split(/[\s,]+/)
+    .filter(Boolean) as VaultAddress[]
+}
+
+function field(form: FormData, name: string) {
+  const value = form.get(name)
+  return typeof value === 'string' ? value.trim() : ''
+}

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

@@ -10,8 +10,9 @@ import { useEffect, useState } from 'react'
 import { Button, Input, Rows } from 'regen-ui'
 import { ChevronRight, Search } from 'lucide-react'
 
-import { Card, Notice, Page } from '../components/Page'
-import * as Organizations from '../lib/organizations'
+import { Card, Notice, Page } from '../components/Page.js'
+import * as Format from '../lib/format.js'
+import * as Organizations from '../lib/organizations.js'
 
 export const Route = createFileRoute('/organizations')({
   validateSearch: Organizations.schema.Search,
@@ -96,7 +97,7 @@ function PageComponent() {
                   </span>
                 </span>
                 <span className="hidden w-28 shrink-0 text-right text-label-12 text-foreground-secondary md:block">
-                  {formatDate(organization.createdAt)}
+                  {Format.mediumDate(organization.createdAt)}
                 </span>
                 <ChevronRight className="size-4 shrink-0 text-foreground-secondary" />
               </Rows.Row>
@@ -152,7 +153,3 @@ declare namespace LookupError {
 function formatCount(value: number, label: string) {
   return `${value} ${label}${value === 1 ? '' : 's'}`
 }
-
-function formatDate(value: string) {
-  return new Intl.DateTimeFormat('en', { dateStyle: 'medium' }).format(new Date(value))
-}

package/src/admin/ui/src/routes/organizations_.$orgId.tsx

@@ -15,8 +15,9 @@ import {
 import { Button, Rows, Select } from 'regen-ui'
 import { ArrowLeft, RefreshCw } from 'lucide-react'
 
-import { Card, Notice, Page } from '../components/Page'
-import * as Organizations from '../lib/organizations'
+import { Card, Notice, Page } from '../components/Page.js'
+import * as core_Format from '../lib/format.js'
+import * as Organizations from '../lib/organizations.js'
 
 export const Route = createFileRoute('/organizations_/$orgId')({
   validateSearch: Organizations.schema.Search,
@@ -53,7 +54,7 @@ function PageComponent() {
     usage,
     webhooks,
   ]
-  const updatedAt = oldestUpdatedAt(operationalQueries.map((result) => result.dataUpdatedAt))
+  const updatedAt = Format.oldestUpdatedAt(operationalQueries.map((result) => result.dataUpdatedAt))
   const updateComplete = operationalQueries.every((result) => result.dataUpdatedAt > 0)
   const updateError = operationalQueries.some((result) => result.error)
   const refreshing = operationalQueries.some((result) => result.isFetching)
@@ -101,8 +102,8 @@ function PageComponent() {
           <Summary label="Projects">{organization.projectCount}</Summary>
           <Summary label="Owner user">{organization.userId ?? 'None'}</Summary>
           <Summary label="Created by">{organization.createdBy ?? 'Unknown'}</Summary>
-          <Summary label="Created">{formatDate(organization.createdAt)}</Summary>
-          <Summary label="Updated">{formatDate(organization.updatedAt)}</Summary>
+          <Summary label="Created">{core_Format.mediumDate(organization.createdAt)}</Summary>
+          <Summary label="Updated">{core_Format.mediumDate(organization.updatedAt)}</Summary>
         </dl>
       </Card>
 
@@ -117,9 +118,9 @@ function PageComponent() {
                 updatedAt ? (
                   <time
                     dateTime={new Date(updatedAt).toISOString()}
-                    title={formatDateTime(updatedAt)}
+                    title={Format.dateTime(updatedAt)}
                   >
-                    Partially updated {formatTime(updatedAt)}
+                    Partially updated {Format.time(updatedAt)}
                   </time>
                 ) : (
                   'Update unavailable'
@@ -127,9 +128,9 @@ function PageComponent() {
               ) : updatedAt && updateComplete ? (
                 <time
                   dateTime={new Date(updatedAt).toISOString()}
-                  title={formatDateTime(updatedAt)}
+                  title={Format.dateTime(updatedAt)}
                 >
-                  Updated {formatTime(updatedAt)}
+                  Updated {Format.time(updatedAt)}
                 </time>
               ) : (
                 'Updating…'
@@ -160,7 +161,7 @@ function PageComponent() {
             loading={usage.isPending}
             value={
               usage.data
-                ? formatPercent(usage.data.totals.errors, usage.data.totals.requests)
+                ? Format.percent(usage.data.totals.errors, usage.data.totals.requests)
                 : undefined
             }
           />
@@ -277,7 +278,7 @@ function PageComponent() {
                 </span>
               </span>
               <span className="shrink-0 text-label-12 text-foreground-secondary">
-                {formatDate(project.createdAt)}
+                {core_Format.mediumDate(project.createdAt)}
               </span>
             </Rows.Row>
           ))}
@@ -410,7 +411,8 @@ function UsageCard(options: UsageCard.Props) {
                   >
                     <code className="truncate text-foreground">{entry.route}</code>
                     <span className="shrink-0 text-foreground-secondary">
-                      {countLabel(entry.requests, 'request')}, {countLabel(entry.errors, 'error')}
+                      {Format.count(entry.requests, 'request')},{' '}
+                      {Format.count(entry.errors, 'error')}
                     </span>
                   </div>
                 ))}
@@ -491,8 +493,8 @@ function WebhooksCard(options: WebhooksCard.Props) {
         <h2 className="text-heading-18 text-foreground">Webhooks</h2>
         {data ? (
           <span className="text-label-12 text-foreground-secondary">
-            {countLabel(data.subscriptions.length, 'subscription')} ·{' '}
-            {countLabel(data.failureCount, 'failure')} in 7 days
+            {Format.count(data.subscriptions.length, 'subscription')} ·{' '}
+            {Format.count(data.failureCount, 'failure')} in 7 days
           </span>
         ) : null}
       </div>
@@ -543,7 +545,7 @@ function WebhooksCard(options: WebhooksCard.Props) {
                   {failure.responseStatus ?? 'Network'} · {failure.error ?? 'Delivery failed'}
                 </span>
                 <span className="shrink-0 text-foreground-secondary">
-                  {formatDate(failure.createdAt)}
+                  {core_Format.mediumDate(failure.createdAt)}
                 </span>
               </div>
             ))}
@@ -673,17 +675,19 @@ function BillingCard(options: BillingCard.Props) {
       <dl className="grid grid-cols-2 gap-4">
         <Detail label="Stripe customer">{source?.stripeCustomerId ?? '—'}</Detail>
         <Detail label="Spend period">
-          {options.sponsorship ? periodLabel(options.sponsorship.period) : '—'}
+          {options.sponsorship ? Format.period(options.sponsorship.period) : '—'}
+        </Detail>
+        <Detail label="Spend limit">
+          {Format.money(settings?.spendLimit, settings?.currency)}
         </Detail>
-        <Detail label="Spend limit">{formatMoney(settings?.spendLimit, settings?.currency)}</Detail>
         <Detail label="Committed spend">
           {options.sponsorship
-            ? formatMoney(options.sponsorship.committedSpend, options.sponsorship.currency)
+            ? Format.money(options.sponsorship.committedSpend, options.sponsorship.currency)
             : '—'}
         </Detail>
-        <Detail label="Limit remaining">{formatMoney(remaining, settings?.currency)}</Detail>
+        <Detail label="Limit remaining">{Format.money(remaining, settings?.currency)}</Detail>
         <Detail label="Transaction limit">
-          {formatMoney(settings?.txFeeLimit, settings?.currency)}
+          {Format.money(settings?.txFeeLimit, settings?.currency)}
         </Detail>
       </dl>
     </Card>
@@ -758,46 +762,44 @@ declare namespace ResourceList {
   }
 }
 
-function formatDate(value: string) {
-  return new Intl.DateTimeFormat('en', { dateStyle: 'medium' }).format(new Date(value))
-}
-
-function formatDateTime(value: number) {
-  return new Intl.DateTimeFormat('en', { dateStyle: 'medium', timeStyle: 'medium' }).format(value)
-}
+namespace Format {
+  export function count(count: number, label: string) {
+    return `${count.toLocaleString()} ${label}${count === 1 ? '' : 's'}`
+  }
 
-function formatTime(value: number) {
-  return new Intl.DateTimeFormat('en', { timeStyle: 'medium' }).format(value)
-}
+  export function dateTime(value: number) {
+    return new Intl.DateTimeFormat('en', { dateStyle: 'medium', timeStyle: 'medium' }).format(value)
+  }
 
-function formatMoney(value: string | null | undefined, currency: string | undefined) {
-  if (value === null || value === undefined) return '—'
-  return new Intl.NumberFormat('en', {
-    currency: currency?.toUpperCase() ?? 'USD',
-    style: 'currency',
-  }).format(Number(value))
-}
+  export function money(value: string | null | undefined, currency: string | undefined) {
+    if (value === null || value === undefined) return '—'
+    return new Intl.NumberFormat('en', {
+      currency: currency?.toUpperCase() ?? 'USD',
+      style: 'currency',
+    }).format(Number(value))
+  }
 
-function formatPercent(part: number, total: number) {
-  if (total === 0) return '0%'
-  return new Intl.NumberFormat('en', { maximumFractionDigits: 1, style: 'percent' }).format(
-    part / total,
-  )
-}
+  export function oldestUpdatedAt(values: readonly number[]) {
+    const updated = values.filter((value) => value > 0)
+    if (updated.length === 0) return undefined
+    return Math.min(...updated)
+  }
 
-function periodLabel(period: Organizations.Sponsorship['production']['period']) {
-  if (period === 'month') return 'Current month'
-  return period
-}
+  export function percent(part: number, total: number) {
+    if (total === 0) return '0%'
+    return new Intl.NumberFormat('en', { maximumFractionDigits: 1, style: 'percent' }).format(
+      part / total,
+    )
+  }
 
-function countLabel(count: number, label: string) {
-  return `${count.toLocaleString()} ${label}${count === 1 ? '' : 's'}`
-}
+  export function period(period: Organizations.Sponsorship['production']['period']) {
+    if (period === 'month') return 'Current month'
+    return period
+  }
 
-function oldestUpdatedAt(values: readonly number[]) {
-  const updated = values.filter((value) => value > 0)
-  if (updated.length === 0) return undefined
-  return Math.min(...updated)
+  export function time(value: number) {
+    return new Intl.DateTimeFormat('en', { timeStyle: 'medium' }).format(value)
+  }
 }
 
 const usagePeriods = {

package/src/admin/ui/src/routes/verified-tokens.tsx

@@ -6,10 +6,10 @@ import { isAddress } from 'viem'
 import { tempo as mainnet, tempoTestnet as testnet } from 'viem/tempo/chains'
 import { Hooks } from 'wagmi/tempo'
 
-import { Card, Notice, Page } from '../components/Page'
-import { Checkbox } from '../components/Checkbox'
-import { Dialog } from '../components/Dialog'
-import * as VerifiedTokens from '../lib/verified-tokens'
+import { Card, Notice, Page } from '../components/Page.js'
+import { Checkbox } from '../components/Checkbox.js'
+import { Dialog } from '../components/Dialog.js'
+import * as VerifiedTokens from '../lib/verified-tokens.js'
 
 /** A chain id the admin UI manages: the two public Tempo chains. */
 type ChainId = typeof mainnet.id | typeof testnet.id

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

@@ -16,7 +16,10 @@ import { generated } from './plugin.ts'
 export default defineConfig({
   base: './',
   plugins: [
-    tanstackStart({ spa: { enabled: true } }),
+    tanstackStart({
+      router: { addExtensions: '.js' },
+      spa: { enabled: true },
+    }),
     // Regen provides the theme; `tailwindPlugin: false` defers to our explicit
     // `tailwindcss()`. `react()` must come after the Start and Regen plugins.
     regen({ tailwindPlugin: false }),