tapimo 0.5.3 → 0.6.0

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

@@ -1,12 +1,13 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { useState } from 'react'
-import { Button, Fields, Input, Select, useCopy } from 'regen-ui'
+import { Button, Fields, Input, Select, Tabs, useCopy } from 'regen-ui'
 import { Check, Copy as CopyIcon, ExternalLink, Plus, Trash2 } from 'lucide-react'
 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'
 
@@ -17,8 +18,12 @@ type ChainId = typeof mainnet.id | typeof testnet.id
 const defaultChain: ChainId = mainnet.id
 
 export const Route = createFileRoute('/verified-tokens')({
+  validateSearch: VerifiedTokens.search,
   loader: ({ context }) =>
-    context.queryClient.prefetchQuery(VerifiedTokens.get.options({ chainId: defaultChain })),
+    Promise.all([
+      context.queryClient.prefetchQuery(VerifiedTokens.get.options({ chainId: defaultChain })),
+      context.queryClient.prefetchQuery(VerifiedTokens.requests.list.options()),
+    ]),
   component: RouteComponent,
 })
 
@@ -35,10 +40,14 @@ const explorers: Record<number, string> = {
 }
 
 function RouteComponent() {
+  const { tab = 'verified' } = Route.useSearch()
+  const navigate = useNavigate({ from: Route.fullPath })
   const [chain, setChain] = useState<ChainId>(defaultChain)
   const [open, setOpen] = useState(false)
   const tokens = VerifiedTokens.get.useQuery({ chainId: chain })
+  const requests = VerifiedTokens.requests.list.useQuery()
   const create = VerifiedTokens.create.useMutation()
+  const pendingCount = requests.data?.data.length ?? 0
 
   return (
     <Dialog.Root onOpenChange={setOpen} open={open}>
@@ -46,25 +55,43 @@ function RouteComponent() {
         title="Verified Tokens"
         description="Manage the curated verified token list"
         action={
-          <div className="flex items-center gap-2">
-            <ChainSelect onChange={setChain} value={chain} />
-            <Dialog.Trigger
-              render={
-                <Button variant="primary">
-                  <Plus className="size-4" />
-                  Add token
-                </Button>
-              }
-            />
-          </div>
+          tab === 'verified' ? (
+            <div className="flex items-center gap-2">
+              <ChainSelect onChange={setChain} value={chain} />
+              <Dialog.Trigger
+                render={
+                  <Button variant="primary">
+                    <Plus className="size-4" />
+                    Add token
+                  </Button>
+                }
+              />
+            </div>
+          ) : undefined
         }
       >
-        <TokenList
-          chain={chain}
-          error={tokens.error}
-          loading={tokens.isPending}
-          tokens={tokens.data?.data ?? []}
+        <Tabs
+          active={tab}
+          onChange={(id) => void navigate({ search: id === 'verified' ? {} : { tab: id } })}
+          tabs={[
+            { id: 'verified', label: 'Verified' },
+            { id: 'pending', label: pendingCount > 0 ? `Pending (${pendingCount})` : 'Pending' },
+          ]}
         />
+        {tab === 'verified' ? (
+          <TokenList
+            chain={chain}
+            error={tokens.error}
+            loading={tokens.isPending}
+            tokens={tokens.data?.data ?? []}
+          />
+        ) : (
+          <RequestQueue
+            error={requests.error}
+            loading={requests.isPending}
+            requests={requests.data?.data ?? []}
+          />
+        )}
         <Dialog.Popup>
           <AddTokenForm
             defaultChain={chain}
@@ -82,6 +109,190 @@ function RouteComponent() {
   )
 }
 
+/** Display label for a chain, falling back to the raw id. */
+function chainLabel(chainId: number) {
+  return chains.find((chain) => chain.id === chainId)?.label ?? String(chainId)
+}
+
+/** Pending verification requests, oldest first, reviewed in bulk via selection. */
+function RequestQueue(props: {
+  error: Error | null
+  loading: boolean
+  requests: readonly VerifiedTokens.requests.VerifiedTokenRequest[]
+}) {
+  const approve = VerifiedTokens.requests.approve.useMutation()
+  const deny = VerifiedTokens.requests.deny.useMutation()
+  const [selected, setSelected] = useState<ReadonlySet<string>>(new Set())
+  const [busy, setBusy] = useState<'approve' | 'deny' | null>(null)
+  // Filtering against the live rows self-heals selections whose requests were
+  // reviewed elsewhere or removed by a refetch.
+  const chosen = props.requests.filter((request) => selected.has(request.id))
+
+  function toggle(id: string) {
+    setSelected((previous) => {
+      const next = new Set(previous)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  async function review(action: 'approve' | 'deny') {
+    if (action === 'approve' && !confirm(`Verify ${describeSelection(chosen)}?`)) return
+    let reviewNote: string | undefined
+    if (action === 'deny') {
+      const input = prompt(`Reason for denying ${describeSelection(chosen)} (optional):`)
+      if (input === null) return
+      reviewNote = input.trim() || undefined
+    }
+    setBusy(action)
+    try {
+      for (const request of chosen) {
+        if (action === 'approve')
+          await approve.mutateAsync({ chainId: request.chainId, requestId: request.id })
+        else
+          await deny.mutateAsync({
+            requestId: request.id,
+            ...(reviewNote ? { reviewNote } : {}),
+          })
+      }
+      setSelected(new Set())
+    } catch (error) {
+      alert(error instanceof Error ? error.message : String(error))
+    } finally {
+      setBusy(null)
+    }
+  }
+
+  return (
+    <Card>
+      {props.requests.length > 0 ? (
+        <div className="flex items-center justify-between gap-4 border-b border-border px-5 py-3">
+          <span className="text-label-12 text-foreground-secondary">{chosen.length} selected</span>
+          <div className="flex items-center gap-2">
+            <Button
+              disabled={chosen.length === 0 || busy !== null}
+              loading={busy === 'deny'}
+              onClick={() => void review('deny')}
+              size="small"
+            >
+              Deny
+            </Button>
+            <Button
+              disabled={chosen.length === 0 || busy !== null}
+              loading={busy === 'approve'}
+              onClick={() => void review('approve')}
+              size="small"
+              variant="primary"
+            >
+              Approve
+            </Button>
+          </div>
+        </div>
+      ) : null}
+      {props.loading ? (
+        <Notice>Loading requests…</Notice>
+      ) : props.error ? (
+        <Notice>{props.error.message}</Notice>
+      ) : props.requests.length === 0 ? (
+        <Notice>No pending requests.</Notice>
+      ) : (
+        <ul className="divide-y divide-border">
+          {props.requests.map((request) => (
+            <RequestRow
+              key={request.id}
+              onToggle={() => toggle(request.id)}
+              request={request}
+              selected={selected.has(request.id)}
+            />
+          ))}
+        </ul>
+      )}
+    </Card>
+  )
+}
+
+/** Confirmation label: one token by name, several by count. */
+function describeSelection(requests: readonly VerifiedTokens.requests.VerifiedTokenRequest[]) {
+  const [first] = requests
+  if (requests.length === 1 && first) return `${first.name} (${first.symbol})`
+  return `${requests.length} tokens`
+}
+
+function RequestRow(props: {
+  onToggle: () => void
+  request: VerifiedTokens.requests.VerifiedTokenRequest
+  selected: boolean
+}) {
+  const { request } = props
+  return (
+    // The row is a pointer affordance for the checkbox; clicks on interactive
+    // children (copy button, the checkbox itself) keep their own behavior.
+    <li
+      className="flex cursor-pointer items-center justify-between gap-4 px-5 py-3 transition-colors hover:bg-surface-hover data-[selected]:bg-surface-hover"
+      data-selected={props.selected || undefined}
+      onClick={(event) => {
+        if ((event.target as HTMLElement).closest('a, button, input')) return
+        props.onToggle()
+      }}
+    >
+      <div className="flex min-w-0 items-center gap-4">
+        <RequestLogo request={request} />
+        <div className="flex min-w-0 flex-col gap-1">
+          <span className="text-label-14 text-foreground">
+            {request.name} <span className="text-foreground-secondary">{request.symbol}</span>{' '}
+            <span className="text-foreground-secondary">· {chainLabel(request.chainId)}</span>
+          </span>
+          <div className="flex items-center gap-3">
+            <Address value={request.address} />
+            <span className="text-label-12 text-foreground-secondary">
+              {request.orgName ?? request.orgId} ·{' '}
+              {new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(
+                new Date(request.createdAt),
+              )}
+            </span>
+          </div>
+          {request.note ? (
+            <p className="truncate text-label-12 text-foreground-secondary" title={request.note}>
+              {request.note}
+            </p>
+          ) : null}
+        </div>
+      </div>
+      <Checkbox
+        aria-label={`Select ${request.name}`}
+        checked={props.selected}
+        onCheckedChange={props.onToggle}
+      />
+    </li>
+  )
+}
+
+/** Requested logo (uploaded SVG or URL), falling back to symbol initials. */
+function RequestLogo(props: { request: VerifiedTokens.requests.VerifiedTokenRequest }) {
+  const { request } = props
+  const [failed, setFailed] = useState(false)
+  // Data-URI `img` rendering keeps requester-supplied SVG inert (no scripts).
+  const src = request.logo
+    ? `data:image/svg+xml;utf8,${encodeURIComponent(request.logo)}`
+    : request.logoUri
+  if (src && !failed)
+    return (
+      <img
+        alt=""
+        className="size-8 shrink-0 rounded-full bg-secondary"
+        onError={() => setFailed(true)}
+        src={src}
+        title={request.logo ? 'Uploaded SVG' : request.logoUri}
+      />
+    )
+  return (
+    <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-secondary text-label-12 text-foreground-secondary">
+      {request.symbol.slice(0, 2).toUpperCase()}
+    </div>
+  )
+}
+
 function ChainSelect(props: {
   className?: string
   onChange: (chain: ChainId) => void