tapimo 0.0.0 → 0.0.2

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

@@ -0,0 +1,331 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
+import { Button, Fields, Input, Select, 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 { Dialog } from '../components/Dialog'
+import * as VerifiedTokens from '../lib/verified-tokens'
+
+/** A chain id the admin UI manages: the two public Tempo chains. */
+type ChainId = typeof mainnet.id | typeof testnet.id
+
+/** Chain shown on first load, also prefetched by the loader. */
+const defaultChain: ChainId = mainnet.id
+
+export const Route = createFileRoute('/verified-tokens')({
+  loader: ({ context }) =>
+    context.queryClient.prefetchQuery(VerifiedTokens.get.options({ chainId: defaultChain })),
+  component: RouteComponent,
+})
+
+/** Chains with display labels, for the selector. */
+const chains = [
+  { id: mainnet.id, label: 'Mainnet' },
+  { id: testnet.id, label: 'Testnet' },
+] as const
+
+/** Block explorer base URL per chain, for token links. */
+const explorers: Record<number, string> = {
+  [mainnet.id]: mainnet.blockExplorers.default.url,
+  [testnet.id]: testnet.blockExplorers.default.url,
+}
+
+function RouteComponent() {
+  const [chain, setChain] = useState<ChainId>(defaultChain)
+  const [open, setOpen] = useState(false)
+  const tokens = VerifiedTokens.get.useQuery({ chainId: chain })
+  const create = VerifiedTokens.create.useMutation()
+
+  return (
+    <Dialog.Root onOpenChange={setOpen} open={open}>
+      <Page
+        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>
+        }
+      >
+        <TokenList
+          chain={chain}
+          error={tokens.error}
+          loading={tokens.isPending}
+          tokens={tokens.data?.data ?? []}
+        />
+        <Dialog.Popup>
+          <AddTokenForm
+            defaultChain={chain}
+            onSubmit={(input) =>
+              create.mutate(input, {
+                onError: (error) => alert(error.message),
+                onSuccess: () => setOpen(false),
+              })
+            }
+            pending={create.isPending}
+          />
+        </Dialog.Popup>
+      </Page>
+    </Dialog.Root>
+  )
+}
+
+function ChainSelect(props: {
+  className?: string
+  onChange: (chain: ChainId) => void
+  value: ChainId
+}) {
+  return (
+    <Select
+      className={props.className ?? 'w-40'}
+      items={chains.map((c) => ({ label: c.label, value: String(c.id) }))}
+      onChange={(value) => props.onChange(Number(value) as ChainId)}
+      value={String(props.value)}
+    />
+  )
+}
+
+function AddTokenForm(props: {
+  defaultChain: ChainId
+  onSubmit: (input: VerifiedTokens.create.Input) => void
+  pending: boolean
+}) {
+  const [chain, setChain] = useState<ChainId>(props.defaultChain)
+  const [address, setAddress] = useState('')
+
+  const metadata = Hooks.token.useGetMetadata({
+    chainId: chain,
+    token: address as `0x${string}`,
+    query: { enabled: isAddress(address) },
+  })
+  const token = metadata.data
+
+  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    if (!token) return
+    const form = new FormData(event.currentTarget)
+    const name = form.get('name')
+    const file = form.get('logo')
+    const logo = file instanceof File && file.size > 0 ? file : null
+    props.onSubmit({
+      address: address as `0x${string}`,
+      chainId: chain,
+      currency: token.currency,
+      decimals: token.decimals,
+      name: typeof name === 'string' ? name.trim() : '',
+      symbol: token.symbol,
+      logo,
+      ...(!logo && token.logoURI ? { logoUri: token.logoURI } : {}),
+    })
+  }
+
+  const invalid = address.length > 0 && !isAddress(address)
+
+  return (
+    <>
+      <Dialog.Title>Add Token</Dialog.Title>
+      <Dialog.Description>Add a token to the curated verified token list</Dialog.Description>
+      <form className="mt-6 flex flex-col gap-8" onSubmit={onSubmit}>
+        <Fields className="gap-6" variant="default">
+          <div className="flex flex-col gap-2">
+            <span className="label-13 text-foreground-secondary">Chain</span>
+            <ChainSelect className="w-full" onChange={setChain} value={chain} />
+          </div>
+          <LogoField logoUri={token?.logoURI} />
+          <Input
+            error={invalid ? 'Enter a valid address' : metadata.isError ? 'Token not found' : false}
+            label="Address"
+            onChange={(event) => setAddress(event.target.value.trim())}
+            placeholder="0x20c000000000000000000000b9537d11c60e8b50"
+            required
+            value={address}
+          />
+          {token ? (
+            <>
+              <div className="flex gap-2">
+                <div className="w-32 shrink-0">
+                  <Input disabled label="Symbol" placeholder="USDC" value={token.symbol} />
+                </div>
+                <div className="flex-1">
+                  <Input
+                    defaultValue={token.name}
+                    key={token.name}
+                    label="Name"
+                    name="name"
+                    placeholder="USD Coin"
+                    required
+                  />
+                </div>
+              </div>
+              <Fields.Inline>
+                <Input disabled label="Decimals" placeholder="6" value={token.decimals} />
+                <Input disabled label="Currency" placeholder="USD" value={token.currency} />
+              </Fields.Inline>
+            </>
+          ) : null}
+        </Fields>
+        <div className="flex justify-end gap-2">
+          <Dialog.Close render={<Button type="button">Cancel</Button>} />
+          <Button disabled={!token} loading={props.pending} type="submit" variant="primary">
+            Add token
+          </Button>
+        </div>
+      </form>
+    </>
+  )
+}
+
+function LogoField(props: { logoUri?: string | undefined }) {
+  const [name, setName] = useState<string>('')
+  return (
+    <div className="flex flex-col gap-2">
+      <span className="label-13 text-foreground-secondary">Logo</span>
+      <div className="relative flex h-[40px] items-center gap-[10px] rounded-body border-[2px] border-transparent bg-secondary px-[12px] copy-14 text-foreground transition-colors hover:bg-secondary-hover">
+        {props.logoUri && !name ? (
+          <img alt="" className="size-6 shrink-0" src={props.logoUri} />
+        ) : null}
+        <span className="border border-border px-2 py-0.5 text-label-12 text-foreground-secondary">
+          Choose SVG
+        </span>
+        <span className="min-w-0 flex-1 truncate text-label-12 text-foreground-secondary">
+          {name ? name : props.logoUri ? 'Using on-chain logo' : 'No file selected'}
+        </span>
+        <input
+          accept="image/svg+xml,.svg"
+          className="absolute inset-0 cursor-pointer opacity-0"
+          name="logo"
+          onChange={(event) => setName(event.target.files?.[0]?.name ?? '')}
+          type="file"
+        />
+      </div>
+    </div>
+  )
+}
+
+function TokenList(props: {
+  chain: ChainId
+  error: Error | null
+  loading: boolean
+  tokens: readonly VerifiedTokens.VerifiedToken[]
+}) {
+  return (
+    <Card>
+      {props.loading ? (
+        <Notice>Loading tokens…</Notice>
+      ) : props.error ? (
+        <Notice>{props.error.message}</Notice>
+      ) : props.tokens.length === 0 ? (
+        <Notice>No verified tokens yet.</Notice>
+      ) : (
+        <ul className="divide-y divide-border">
+          {props.tokens.map((token) => (
+            <TokenRow chain={props.chain} key={token.address} token={token} />
+          ))}
+        </ul>
+      )}
+    </Card>
+  )
+}
+
+function TokenRow(props: { chain: ChainId; token: VerifiedTokens.VerifiedToken }) {
+  const { chain, token } = props
+  const remove = VerifiedTokens.remove.useMutation()
+
+  function onRemove() {
+    if (!confirm(`Remove ${token.name} (${token.symbol})? This can't be undone.`)) return
+    remove.mutate(
+      { address: token.address, chainId: chain },
+      { onError: (error) => alert(error.message) },
+    )
+  }
+
+  return (
+    <li className="flex items-center justify-between gap-4 px-5 py-2.5">
+      <div className="flex min-w-0 items-center gap-4">
+        <Logo chainId={chain} token={token} />
+        <div className="flex min-w-0 flex-col gap-1">
+          <span className="text-label-14 text-foreground">
+            {token.name} <span className="text-foreground-secondary">{token.symbol}</span>
+          </span>
+          <Address value={token.address} />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-4">
+        <a
+          className="flex items-center gap-1.5 text-label-12 text-foreground-secondary hover:text-foreground"
+          href={`${explorers[chain]}/token/${token.address}`}
+          rel="noreferrer"
+          target="_blank"
+        >
+          Explorer
+          <ExternalLink className="size-3" />
+        </a>
+        <Button.Icon
+          className="text-foreground-secondary hover:text-negative"
+          disabled={remove.isPending}
+          onClick={onRemove}
+          size="lg"
+          title="Remove token"
+          variant="plain"
+        >
+          <Trash2 />
+        </Button.Icon>
+      </div>
+    </li>
+  )
+}
+
+/** Shortens an address to `0x1234…abcdef`. */
+function truncate(address: string) {
+  return `${address.slice(0, 6)}…${address.slice(-6)}`
+}
+
+/** Copyable truncated address. */
+function Address(props: { value: string }) {
+  const { copy, notifying } = useCopy()
+  return (
+    <button
+      aria-label="Copy address"
+      className="flex w-fit cursor-pointer items-center gap-1.5 text-label-12 text-foreground-secondary hover:text-foreground"
+      onClick={() => copy(props.value)}
+      title="Copy address"
+      type="button"
+    >
+      {truncate(props.value)}
+      {notifying ? <Check className="size-3" /> : <CopyIcon className="size-3" />}
+    </button>
+  )
+}
+
+function Logo(props: { chainId: ChainId; token: VerifiedTokens.VerifiedToken }) {
+  const { chainId, token } = props
+  const [failed, setFailed] = useState(false)
+  const src = token.logoUri ?? VerifiedTokens.logoUrl({ address: token.address, chainId })
+  if (!failed)
+    return (
+      <img
+        alt=""
+        className="size-8 shrink-0 rounded-full bg-secondary"
+        onError={() => setFailed(true)}
+        src={src}
+      />
+    )
+  return (
+    <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-secondary text-label-12 text-foreground-secondary">
+      {token.symbol.slice(0, 2).toUpperCase()}
+    </div>
+  )
+}

package/src/admin/ui/src/styles.css

@@ -0,0 +1,20 @@
+@import 'tailwindcss';
+@import 'regen-ui/tailwind.css';
+
+@font-face {
+  font-family: 'Pilat';
+  font-weight: 400;
+  font-display: swap;
+  src: url('./fonts/Pilat-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Pilat';
+  font-weight: 500 700;
+  font-display: swap;
+  src: url('./fonts/Pilat-Demi.woff2') format('woff2');
+}
+
+:root {
+  --font-body: 'Pilat', ui-sans-serif, system-ui, sans-serif;
+}

package/src/admin/ui/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "target": "esnext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "types": ["vite/client"],
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": false,
+    "allowImportingTsExtensions": true
+  },
+  "include": ["src", "vite.config.ts"]
+}

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

@@ -0,0 +1,29 @@
+import tailwindcss from '@tailwindcss/vite'
+import react from '@vitejs/plugin-react'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import regen from 'regen-ui/vite'
+import { defineConfig } from 'vite'
+
+import { generated } from './plugin.ts'
+
+// The admin SPA is built in TanStack Start's SPA mode (no SSR runtime): the
+// build emits a prerendered `_shell.html` plus content-hashed JS/CSS, which the
+// `generated()` plugin codegens into an asset map (`src/admin/ui.generated.ts`)
+// the Hono admin app serves. `base: './'` makes the shell reference assets
+// relatively so the same artifact works whether the app owns its hostname or is
+// path-mounted (e.g. under `/admin`); the router `basepath` is derived at
+// runtime from the served location (see `src/router.tsx`).
+export default defineConfig({
+  base: './',
+  plugins: [
+    tanstackStart({ 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 }),
+    tailwindcss(),
+    react(),
+    // Must come after `tanstackStart()`: its `buildApp` post handler emits the
+    // asset map once TanStack's prerender has written `_shell.html`.
+    generated(),
+  ],
+})