tapimo 0.7.0 → 0.7.2

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

@@ -3,9 +3,10 @@ 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'
+import { Card, Notice, Page } from '../components/Page.js'
+import { Dialog } from '../components/Dialog.js'
+import * as EarlyAccess from '../lib/early-access.js'
+import * as Format from '../lib/format.js'
 
 export const Route = createFileRoute('/early-access')({
   loader: ({ context }) => context.queryClient.prefetchQuery(EarlyAccess.list.options()),
@@ -136,7 +137,7 @@ function EntryRow(props: { entry: EarlyAccess.Entry }) {
       <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)}
+          Added by {entry.createdBy} · {Format.date(entry.createdAt)}
         </span>
       </div>
       <Button.Icon
@@ -152,11 +153,3 @@ function EntryRow(props: { entry: EarlyAccess.Entry }) {
     </li>
   )
 }
-
-function formatDate(iso: string) {
-  return new Date(iso).toLocaleDateString(undefined, {
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-  })
-}

package/src/admin/ui/src/routes/earn.vaults.tsx

@@ -0,0 +1,348 @@
+import { useSuspenseInfiniteQuery } from '@tanstack/react-query'
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
+import { type ReactNode, useState } from 'react'
+import { Button, cx, Rows, Tag, useCopy } from 'regen-ui'
+import { Check, ChevronRight, Copy, ExternalLink, Pencil, Plus, Trash2 } from 'lucide-react'
+import { tempo as mainnet, tempoTestnet as testnet } from 'viem/tempo/chains'
+
+import { EarnVaultForm } from '../components/EarnVaultForm.js'
+import * as core_Page from '../components/Page.js'
+import * as EarnVaults from '../lib/earn-vaults.js'
+
+const explorers: Record<EarnVaults.ChainId, string> = {
+  [mainnet.id]: mainnet.blockExplorers.default.url,
+  [testnet.id]: testnet.blockExplorers.default.url,
+}
+
+/** Route listing verified Earn vaults. */
+export const Route = createFileRoute('/earn/vaults')({
+  validateSearch: EarnVaults.schema.Search,
+  loaderDeps: ({ search }) => ({
+    chainId: search.chainId ?? EarnVaults.defaultChain,
+  }),
+  loader: ({ context, deps }) =>
+    context.queryClient.ensureInfiniteQueryData(EarnVaults.list.options({ chainId: deps.chainId })),
+  component: Page,
+})
+
+function Page() {
+  const search = Route.useSearch()
+  const navigate = useNavigate({ from: Route.fullPath })
+  const chainId = search.chainId ?? EarnVaults.defaultChain
+  const vaults = useSuspenseInfiniteQuery(EarnVaults.list.options({ chainId }))
+  const records = vaults.data.pages.flatMap((page) => page.data)
+
+  return (
+    <core_Page.Page
+      title="Earn Vaults"
+      description="Manage verified Earn vaults and inspect their live contracts."
+      action={
+        <>
+          <EarnVaultForm.ChainSelect
+            onChange={(value) => void navigate({ search: { chainId: value }, to: '/earn/vaults' })}
+            value={chainId}
+          />
+          <Button render={<Link search={{ chainId }} to="/earn/vaults/new" />} variant="primary">
+            <Plus className="size-4" />
+            Add vault
+          </Button>
+        </>
+      }
+    >
+      <VaultList chainId={chainId} vaults={records} />
+      {vaults.isFetchNextPageError ? (
+        <div
+          className="flex items-center justify-center gap-3 text-copy-14 text-negative"
+          role="alert"
+        >
+          <span>{vaults.error?.message ?? 'Failed to load more Earn vaults.'}</span>
+          <Button onClick={() => vaults.fetchNextPage()}>Retry</Button>
+        </div>
+      ) : vaults.hasNextPage ? (
+        <Button
+          className="self-center"
+          loading={vaults.isFetchingNextPage}
+          onClick={() => vaults.fetchNextPage()}
+        >
+          Load more
+        </Button>
+      ) : null}
+    </core_Page.Page>
+  )
+}
+
+function VaultList(options: VaultList.Props) {
+  return (
+    <core_Page.Card>
+      {options.vaults.length === 0 ? (
+        <core_Page.Notice>No verified Earn vaults on this chain.</core_Page.Notice>
+      ) : (
+        <Rows variant="surface">
+          {options.vaults.map((vault) => (
+            <VaultRow chainId={options.chainId} key={vault.id} vault={vault} />
+          ))}
+        </Rows>
+      )}
+    </core_Page.Card>
+  )
+}
+
+declare namespace VaultList {
+  type Props = {
+    chainId: EarnVaults.ChainId
+    vaults: readonly EarnVaults.Vault[]
+  }
+}
+
+function VaultRow(options: VaultRow.Props) {
+  const { vault } = options
+  const [expanded, setExpanded] = useState(false)
+  const remove = EarnVaults.remove.useMutation()
+  const capabilities = capabilityFields.filter((capability) => vault.capabilities[capability.name])
+
+  function onRemove() {
+    if (
+      !confirm(
+        `Remove ${vault.label} from verified vaults? It will remain discoverable by address.`,
+      )
+    )
+      return
+    remove.mutate(
+      { chainId: options.chainId, vaultId: vault.vaultAddress },
+      { onError: (error) => alert(error.message) },
+    )
+  }
+
+  return (
+    <>
+      <Rows.Row
+        className="min-h-[44px] py-2"
+        onClick={() => setExpanded((value) => !value)}
+        style={{ height: 'auto' }}
+      >
+        <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">{vault.label}</span>
+            {vault.engine.type ? <Tag>{EarnVaults.engineLabel(vault.engine.type)}</Tag> : null}
+          </span>
+          <span className="truncate text-label-12 text-foreground-secondary">
+            {vault.assetToken.symbol} → {vault.shareToken.symbol}
+          </span>
+        </span>
+        <code className="shrink-0 text-label-12 text-foreground-secondary max-sm:hidden">
+          {truncate(vault.vaultAddress)}
+        </code>
+        <ChevronRight
+          aria-hidden
+          className="size-4 shrink-0 text-foreground-secondary opacity-70 transition-transform data-[open]:rotate-90"
+          data-open={expanded ? '' : undefined}
+        />
+      </Rows.Row>
+      {expanded ? (
+        <Rows.Panel>
+          <dl className="flex flex-wrap gap-x-10 gap-y-4 px-5 py-4">
+            {vault.description ? (
+              <Detail className="w-full" label="Description">
+                {vault.description}
+              </Detail>
+            ) : null}
+            <Detail label="Vault address">
+              <Address value={vault.vaultAddress} />
+            </Detail>
+            <Detail label="Slug">{vault.slug ?? '—'}</Detail>
+            <Detail label="Asset token">
+              <Token token={vault.assetToken} />
+            </Detail>
+            <Detail label="Share token">
+              <Token token={vault.shareToken} />
+            </Detail>
+            <Detail label="Engine">
+              <Address value={vault.engine.address} />
+            </Detail>
+            <Detail label="Venue">
+              {vault.engine.venue ? <Address value={vault.engine.venue} /> : '—'}
+            </Detail>
+            <Detail label="Access">
+              {vault.access.status === 'open' ? 'Open' : 'Allowlisted'}
+            </Detail>
+            <Detail label="Private Zone">
+              {vault.zone ? `${vault.zone.name} (${vault.zone.chainId})` : '—'}
+            </Detail>
+            {vault.zone ? (
+              <>
+                <Detail className="w-full" label="Private input tokens">
+                  <AddressList addresses={vault.zone.inputTokens} />
+                </Detail>
+                <Detail className="w-full" label="Private output tokens">
+                  <AddressList addresses={vault.zone.outputTokens} />
+                </Detail>
+              </>
+            ) : null}
+            <Detail className="w-full" label="Capabilities">
+              {capabilities.length === 0 ? (
+                '—'
+              ) : (
+                <span className="flex flex-wrap gap-x-3 gap-y-1">
+                  {capabilities.map((capability) => (
+                    <span className="text-label-13 text-foreground" key={capability.name}>
+                      {capability.label}
+                    </span>
+                  ))}
+                </span>
+              )}
+            </Detail>
+          </dl>
+          <div className="flex items-center justify-end gap-2 border-t border-border px-5 py-3">
+            <a
+              className="mr-auto flex items-center gap-1.5 text-label-12 text-foreground-secondary hover:text-foreground"
+              href={`${explorers[options.chainId]}/address/${vault.vaultAddress}`}
+              rel="noreferrer"
+              target="_blank"
+            >
+              Explorer
+              <ExternalLink className="size-3" />
+            </a>
+            <Button
+              render={
+                <Link
+                  params={{ vaultId: vault.vaultAddress }}
+                  search={{ chainId: options.chainId }}
+                  to="/earn/vaults/$vaultId/edit"
+                />
+              }
+              size="small"
+            >
+              <Pencil className="size-4" />
+              Edit
+            </Button>
+            <Button loading={remove.isPending} onClick={onRemove} size="small" variant="negative">
+              <Trash2 className="size-4" />
+              Remove
+            </Button>
+          </div>
+        </Rows.Panel>
+      ) : null}
+    </>
+  )
+}
+
+declare namespace VaultRow {
+  type Props = {
+    chainId: EarnVaults.ChainId
+    vault: EarnVaults.Vault
+  }
+}
+
+function Detail(options: Detail.Props) {
+  return (
+    <div className={cx('flex min-w-0 flex-col gap-1', options.className)}>
+      <dt className="text-label-12 text-foreground-secondary">{options.label}</dt>
+      <dd className="min-w-0 text-label-13 text-foreground">{options.children}</dd>
+    </div>
+  )
+}
+
+declare namespace Detail {
+  type Props = {
+    children: ReactNode
+    className?: string | undefined
+    label: ReactNode
+  }
+}
+
+function Token(options: Token.Props) {
+  return (
+    <span className="flex flex-col gap-0.5">
+      <span>
+        {options.token.name} ({options.token.symbol})
+      </span>
+      <Address value={options.token.address} />
+    </span>
+  )
+}
+
+declare namespace Token {
+  type Props = {
+    token: EarnVaults.Vault['assetToken']
+  }
+}
+
+function AddressList(options: AddressList.Props) {
+  return (
+    <span className="flex flex-wrap gap-x-3 gap-y-1">
+      {options.addresses.map((address) => (
+        <Address key={address} value={address} />
+      ))}
+    </span>
+  )
+}
+
+declare namespace AddressList {
+  type Props = {
+    addresses: readonly string[]
+  }
+}
+
+function Address(options: Address.Props) {
+  const { copy, notifying } = useCopy()
+  return (
+    <button
+      aria-label={`Copy ${options.value}`}
+      className="flex w-fit cursor-pointer items-center gap-1.5 font-mono text-label-12 text-foreground-secondary hover:text-foreground"
+      onClick={() => copy(options.value)}
+      title="Copy address"
+      type="button"
+    >
+      {truncate(options.value)}
+      {notifying ? <Check className="size-3" /> : <Copy className="size-3" />}
+    </button>
+  )
+}
+
+declare namespace Address {
+  type Props = {
+    value: string
+  }
+}
+
+function truncate(address: string) {
+  return `${address.slice(0, 6)}…${address.slice(-6)}`
+}
+
+const capabilityFields = [
+  {
+    label: 'Deposits',
+    name: 'deposit',
+  },
+  {
+    label: 'In-kind deposits',
+    name: 'inKindDeposit',
+  },
+  {
+    label: 'Redemptions',
+    name: 'redeem',
+  },
+  {
+    label: 'Bounded redemptions',
+    name: 'boundedRedeem',
+  },
+  {
+    label: 'Exact withdrawals',
+    name: 'exactWithdraw',
+  },
+  {
+    label: 'Asynchronous redemptions',
+    name: 'asyncRedeem',
+  },
+  {
+    label: 'Private routing',
+    name: 'privateRouting',
+  },
+  {
+    label: 'Router swaps',
+    name: 'routerSwaps',
+  },
+] as const satisfies readonly {
+  label: string
+  name: keyof EarnVaults.Vault['capabilities']
+}[]

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

@@ -0,0 +1,154 @@
+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 { EarnVaultForm } from '../components/EarnVaultForm.js'
+import * as core_Page from '../components/Page.js'
+import * as EarnVaults from '../lib/earn-vaults.js'
+
+/** Route for editing a verified Earn vault. */
+export const Route = createFileRoute('/earn/vaults_/$vaultId/edit')({
+  validateSearch: EarnVaults.schema.Search,
+  loaderDeps: ({ search }) => ({
+    chainId: search.chainId ?? EarnVaults.defaultChain,
+  }),
+  loader: ({ context, deps, params }) =>
+    context.queryClient.ensureQueryData(
+      EarnVaults.get.options({
+        chainId: deps.chainId,
+        vaultId: params.vaultId as VaultAddress,
+      }),
+    ),
+  component: Page,
+})
+
+function Page() {
+  const { vaultId } = Route.useParams()
+  const search = Route.useSearch()
+  const navigate = useNavigate({ from: Route.fullPath })
+  const chainId = search.chainId ?? EarnVaults.defaultChain
+  const vault = useSuspenseQuery(
+    EarnVaults.get.options({
+      chainId,
+      vaultId: vaultId as VaultAddress,
+    }),
+  ).data
+  const insert = EarnVaults.insert.useMutation()
+
+  function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    const input = inputFrom(new FormData(event.currentTarget), { chainId, vault })
+    insert.mutate(input, {
+      onSuccess: () => void navigate({ search: { chainId }, to: '/earn/vaults' }),
+    })
+  }
+
+  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>
+        }
+        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>
+        <Fields.Inline>
+          <Input disabled label="Share token" value={vault.shareToken.symbol} />
+          <Input
+            disabled
+            label="Engine"
+            value={vault.engine.type ? EarnVaults.engineLabel(vault.engine.type) : 'Unknown'}
+          />
+        </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>
+    </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 chainLabel(chainId: number) {
+  return EarnVaults.chains.find((chain) => chain.id === chainId)?.label ?? String(chainId)
+}
+
+function field(form: FormData, name: string) {
+  const value = form.get(name)
+  return typeof value === 'string' ? value.trim() : ''
+}