tapimo 0.5.3 → 0.7.0

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

@@ -1,3 +1,4 @@
+import { Switch } from '@base-ui/react/switch'
 import {
   type UseQueryResult,
   useInfiniteQuery,
@@ -30,6 +31,8 @@ function PageComponent() {
   const { period: period_search, query } = Route.useSearch()
   const navigate = useNavigate({ from: Route.fullPath })
   const period = period_search ?? '7d'
+  const disableBillingSource = Organizations.disableBillingSource.useMutation(orgId)
+  const enableBillingSource = Organizations.enableBillingSource.useMutation(orgId)
   const organizationQuery = useSuspenseQuery(Organizations.get.options(orgId))
   const organization = organizationQuery.data
   const members = useInfiniteQuery(Organizations.members.options(orgId))
@@ -54,6 +57,8 @@ function PageComponent() {
   const updateComplete = operationalQueries.every((result) => result.dataUpdatedAt > 0)
   const updateError = operationalQueries.some((result) => result.error)
   const refreshing = operationalQueries.some((result) => result.isFetching)
+  const billingSourceError = disableBillingSource.error ?? enableBillingSource.error
+  const billingSourcePending = disableBillingSource.isPending || enableBillingSource.isPending
 
   function refresh() {
     void Promise.all([
@@ -67,6 +72,16 @@ function PageComponent() {
     ])
   }
 
+  function setBillingSource(options: BillingSourceChange) {
+    if (options.enabled) {
+      disableBillingSource.reset()
+      enableBillingSource.mutate(options.source)
+    } else {
+      enableBillingSource.reset()
+      disableBillingSource.mutate(options.source)
+    }
+  }
+
   return (
     <Page
       title={organization.name}
@@ -176,6 +191,12 @@ function PageComponent() {
 
       <section className="flex flex-col gap-3">
         <h2 className="text-heading-18 text-foreground">Billing</h2>
+        <BillingSourcesCard
+          enabledSources={organization.billing.enabledSources}
+          error={billingSourceError}
+          onChange={setBillingSource}
+          pending={billingSourcePending}
+        />
         <div className="grid gap-3 md:grid-cols-2">
           <BillingCard
             environment="Production"
@@ -550,6 +571,88 @@ declare namespace SectionError {
   type Props = { error: Error; onRetry: () => unknown }
 }
 
+type BillingSourceChange = {
+  /** Whether the source should be enabled. */
+  enabled: boolean
+  /** Billing source being changed. */
+  source: Organizations.BillingSource
+}
+
+const billingSourceOptions = [
+  {
+    description: 'Allow the organization to set up Stripe as a billing method.',
+    label: 'Stripe',
+    source: 'stripe',
+  },
+  {
+    description: 'Allow the organization to set up a Tempo account as a billing method.',
+    label: 'Tempo',
+    source: 'tempo',
+  },
+] as const
+
+/** Organization-wide controls for billing-source setup. */
+export function BillingSourcesCard(options: BillingSourcesCard.Props) {
+  return (
+    <Card>
+      <div className="p-4">
+        <h3 className="text-label-14 text-foreground">Enabled sources</h3>
+        <p className="mt-1 text-copy-13 text-foreground-secondary">
+          Disabling a source only blocks new setup. Existing billing connections continue to work.
+        </p>
+      </div>
+      <div className="divide-y divide-border border-t border-border">
+        {billingSourceOptions.map((source) => {
+          const enabled = options.enabledSources.includes(source.source)
+          return (
+            <div className="flex items-center justify-between gap-4 p-4" key={source.source}>
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-label-14 text-foreground">{source.label}</span>
+                  <span className="text-label-12 text-foreground-secondary">
+                    {enabled ? 'Enabled' : 'Disabled'}
+                  </span>
+                </div>
+                <p className="mt-1 text-copy-13 text-foreground-secondary">{source.description}</p>
+              </div>
+              <Switch.Root
+                aria-label={`${source.label} billing source`}
+                checked={enabled}
+                className="flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-border bg-secondary p-0.5 outline-none transition-colors hover:bg-secondary-hover focus-visible:border-focus data-[checked]:bg-invert disabled:cursor-not-allowed disabled:opacity-50"
+                disabled={options.pending}
+                onCheckedChange={(checked) =>
+                  options.onChange({ enabled: checked, source: source.source })
+                }
+              >
+                <Switch.Thumb className="block size-4 translate-x-0 rounded-full bg-foreground-secondary transition-transform data-[checked]:translate-x-4 data-[checked]:bg-on-invert" />
+              </Switch.Root>
+            </div>
+          )
+        })}
+      </div>
+      {options.error ? (
+        <p className="border-t border-border p-4 text-copy-13 text-negative" role="alert">
+          {options.error.message}
+        </p>
+      ) : null}
+    </Card>
+  )
+}
+
+export declare namespace BillingSourcesCard {
+  /** Billing-source control properties. */
+  type Props = {
+    /** Currently enabled billing sources. */
+    enabledSources: readonly Organizations.BillingSource[]
+    /** Latest mutation error. */
+    error: Error | null
+    /** Handles a requested source change. */
+    onChange: (options: BillingSourceChange) => void
+    /** Whether a source change is pending. */
+    pending: boolean
+  }
+}
+
 function BillingCard(options: BillingCard.Props) {
   const { settings, source } = options.record
   const remaining =

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