tapimo 0.13.0 → 0.15.0

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

@@ -0,0 +1,799 @@
+import { Dialog as BaseDialog } from '@base-ui/react/dialog'
+import { useInfiniteQuery } from '@tanstack/react-query'
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
+import { type ReactNode } from 'react'
+import { Button, Tabs, Tag } from 'regen-ui'
+import { ArrowRight, ExternalLink, ReceiptText, Waypoints, X } from 'lucide-react'
+import { base, mainnet as ethereum } from 'viem/chains'
+import { tempo as mainnet, tempoTestnet as testnet } from 'viem/tempo/chains'
+
+import { Notice, Page } from '../components/Page.js'
+import * as Subsidies from '../lib/subsidies.js'
+
+type Explorer = { address: string; tx: string }
+const explorers: Record<string, Explorer> = {
+  [`eip155:${base.id}`]: {
+    address: `${base.blockExplorers.default.url}/address`,
+    tx: `${base.blockExplorers.default.url}/tx`,
+  },
+  [`eip155:${ethereum.id}`]: {
+    address: `${ethereum.blockExplorers.default.url}/address`,
+    tx: `${ethereum.blockExplorers.default.url}/tx`,
+  },
+  [`eip155:${mainnet.id}`]: {
+    address: `${mainnet.blockExplorers.default.url}/address`,
+    tx: `${mainnet.blockExplorers.default.url}/tx`,
+  },
+  [`eip155:${testnet.id}`]: {
+    address: `${testnet.blockExplorers.default.url}/address`,
+    tx: `${testnet.blockExplorers.default.url}/tx`,
+  },
+  'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp': {
+    address: 'https://solscan.io/account',
+    tx: 'https://solscan.io/tx',
+  },
+  'tron:0x2b6653dc': {
+    address: 'https://tronscan.org/address',
+    tx: 'https://tronscan.org/transaction',
+  },
+}
+
+/** Admin subsidy activity across the managed fee payer and Routes. */
+export const Route = createFileRoute('/subsidies')({
+  validateSearch: Subsidies.schema.Search,
+  component: PageComponent,
+})
+
+function PageComponent() {
+  const navigate = useNavigate({ from: Route.fullPath })
+  const search = Route.useSearch()
+  const tab = search.tab ?? 'transactions'
+
+  function selectTab(value: string) {
+    void navigate({
+      search: {
+        selected: undefined,
+        tab: value === 'transactions' ? undefined : 'routes',
+      },
+    })
+  }
+
+  function select(id: string) {
+    void navigate({ search: (current) => ({ ...current, selected: id }) })
+  }
+
+  function closeDetail() {
+    void navigate({ replace: true, search: (current) => ({ ...current, selected: undefined }) })
+  }
+
+  return (
+    <Page
+      title="Subsidies"
+      description="Inspect managed transaction sponsorship and route subsidy activity"
+    >
+      <div className="flex min-w-0 flex-col">
+        <Tabs
+          active={tab}
+          onChange={selectTab}
+          tabs={[
+            { icon: <ReceiptText className="size-4" />, id: 'transactions', label: 'Transactions' },
+            { icon: <Waypoints className="size-4" />, id: 'routes', label: 'Routes' },
+          ]}
+        />
+        {tab === 'transactions' ? (
+          <TransactionList onClose={closeDetail} onSelect={select} selected={search.selected} />
+        ) : (
+          <RouteList onClose={closeDetail} onSelect={select} selected={search.selected} />
+        )}
+      </div>
+    </Page>
+  )
+}
+
+function TransactionList(options: TransactionList.Props) {
+  const query = useInfiniteQuery(Subsidies.listTransactions.options())
+  const records = query.data?.pages.flatMap((page) => page.data) ?? []
+  const selected = records.find((record) => record.id === options.selected)
+  return (
+    <>
+      <List
+        empty="No managed fee-payer transactions recorded."
+        error={query.error}
+        hasNextPage={query.hasNextPage}
+        loading={query.isPending}
+        loadingMore={query.isFetchingNextPage}
+        onLoadMore={() => query.fetchNextPage()}
+      >
+        {records.length ? (
+          <table className="w-full min-w-[680px] border-collapse text-left">
+            <TableHead columns={['Status', 'Transaction', 'Amount', 'Organization', 'Time']} />
+            <tbody>
+              {records.map((record) => (
+                <ResourceRow id={record.id} key={record.id} onSelect={options.onSelect}>
+                  <StatusCell status={record.status} />
+                  <TransactionCell record={record} />
+                  <TransactionSubsidyCell record={record} />
+                  <AttributionCell organization={record.organization} project={record.project} />
+                  <TimeCell value={record.createdAt} />
+                </ResourceRow>
+              ))}
+            </tbody>
+          </table>
+        ) : undefined}
+      </List>
+      {selected ? <TransactionDetail onClose={options.onClose} record={selected} /> : null}
+    </>
+  )
+}
+
+declare namespace TransactionList {
+  type Props = ListSelection.Props
+}
+
+function RouteList(options: RouteList.Props) {
+  const query = useInfiniteQuery(Subsidies.listRoutes.options())
+  const records = query.data?.pages.flatMap((page) => page.data) ?? []
+  const selected = records.find((record) => record.id === options.selected)
+  return (
+    <>
+      <List
+        empty="No Routes subsidies recorded."
+        error={query.error}
+        hasNextPage={query.hasNextPage}
+        loading={query.isPending}
+        loadingMore={query.isFetchingNextPage}
+        onLoadMore={() => query.fetchNextPage()}
+      >
+        {records.length ? (
+          <table className="w-full min-w-[680px] border-collapse text-left">
+            <TableHead
+              columns={['Status', 'Direction', 'Route', 'Amount', 'Organization', 'Time']}
+            />
+            <tbody>
+              {records.map((record) => (
+                <ResourceRow id={record.id} key={record.id} onSelect={options.onSelect}>
+                  <StatusCell status={record.status} />
+                  <DirectionCell direction={record.direction} />
+                  <RouteCell record={record} />
+                  <SubsidiesCell subsidies={record.subsidies} />
+                  <AttributionCell organization={record.organization} project={record.project} />
+                  <TimeCell value={record.updatedAt} />
+                </ResourceRow>
+              ))}
+            </tbody>
+          </table>
+        ) : undefined}
+      </List>
+      {selected ? <RouteDetail onClose={options.onClose} record={selected} /> : null}
+    </>
+  )
+}
+
+declare namespace RouteList {
+  type Props = ListSelection.Props
+}
+
+function DirectionCell(options: DirectionCell.Props) {
+  return (
+    <td className="px-3 py-3">
+      <Tag>{label(options.direction)}</Tag>
+    </td>
+  )
+}
+
+declare namespace DirectionCell {
+  type Props = { direction: Subsidies.listRoutes.Item['direction'] }
+}
+
+declare namespace ListSelection {
+  type Props = {
+    onClose: () => void
+    onSelect: (id: string) => void
+    selected?: string | undefined
+  }
+}
+
+function List(options: List.Props) {
+  if (options.loading) return <Notice>Loading subsidy records…</Notice>
+  if (options.error)
+    return (
+      <div
+        className="flex items-center justify-center border-y border-border px-4 py-12 text-copy-14 text-negative"
+        role="alert"
+      >
+        {options.error.message}
+      </div>
+    )
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="overflow-x-auto border-b border-border">
+        {options.children ?? <Notice>{options.empty}</Notice>}
+      </div>
+      {options.hasNextPage ? (
+        <Button className="self-center" loading={options.loadingMore} onClick={options.onLoadMore}>
+          Load more
+        </Button>
+      ) : null}
+    </div>
+  )
+}
+
+declare namespace List {
+  type Props = {
+    children?: ReactNode | undefined
+    empty: string
+    error: Error | null
+    hasNextPage: boolean
+    loading: boolean
+    loadingMore: boolean
+    onLoadMore: () => unknown
+  }
+}
+
+function TableHead(options: TableHead.Props) {
+  return (
+    <thead>
+      <tr className="border-b border-border">
+        {options.columns.map((column) => (
+          <th
+            className="whitespace-nowrap px-3 py-2 text-label-12 font-normal text-foreground-secondary"
+            key={column}
+            scope="col"
+          >
+            {column}
+          </th>
+        ))}
+      </tr>
+    </thead>
+  )
+}
+
+declare namespace TableHead {
+  type Props = { columns: readonly string[] }
+}
+
+function ResourceRow(options: ResourceRow.Props) {
+  return (
+    <tr
+      aria-label={`View ${options.id}`}
+      className="cursor-pointer border-b border-border transition-colors last:border-b-0 hover:bg-surface-hover focus-visible:bg-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus"
+      onClick={() => options.onSelect(options.id)}
+      onKeyDown={(event) => {
+        if (event.currentTarget !== event.target || !['Enter', ' '].includes(event.key)) return
+        event.preventDefault()
+        options.onSelect(options.id)
+      }}
+      tabIndex={0}
+    >
+      {options.children}
+    </tr>
+  )
+}
+
+declare namespace ResourceRow {
+  type Props = {
+    children: ReactNode
+    id: string
+    onSelect: (id: string) => void
+  }
+}
+
+function StatusCell(options: StatusCell.Props) {
+  return (
+    <td className="px-3 py-3">
+      <Status value={options.status} />
+    </td>
+  )
+}
+
+declare namespace StatusCell {
+  type Props = { status: string }
+}
+
+function Status(options: Status.Props) {
+  const intent =
+    options.value === 'completed' || options.value === 'finalized'
+      ? 'positive'
+      : options.value === 'action-required' || options.value === 'failed'
+        ? 'negative'
+        : isWorking(options.value)
+          ? 'warning'
+          : 'neutral'
+  return <Tag intent={intent}>{label(options.value)}</Tag>
+}
+
+declare namespace Status {
+  type Props = { value: string }
+}
+
+function RouteCell(options: RouteCell.Props) {
+  const { destinationChain, destinationToken, sourceChain, sourceToken } = options.record
+  return (
+    <td className="px-3 py-3">
+      <span className="flex items-center gap-1.5 whitespace-nowrap">
+        <Tag>{sourceChain.name}</Tag>
+        <Tag>{sourceToken.symbol}</Tag>
+        <ArrowRight className="mx-0.5 size-3.5 shrink-0 text-foreground-secondary" />
+        <Tag>{destinationChain.name}</Tag>
+        <Tag>{destinationToken.symbol}</Tag>
+      </span>
+    </td>
+  )
+}
+
+declare namespace RouteCell {
+  type Props = {
+    record: Pick<
+      Subsidies.listRoutes.Item,
+      'destinationChain' | 'destinationToken' | 'sourceChain' | 'sourceToken'
+    >
+  }
+}
+
+function TransactionCell(options: TransactionCell.Props) {
+  const { record } = options
+  const explorer = explorers[`eip155:${record.chainId}`]
+  if (record.transactionHash && explorer)
+    return (
+      <td className="px-3 py-3">
+        <a
+          className="font-mono text-label-12 text-foreground-secondary hover:text-foreground hover:underline"
+          href={`${explorer.tx}/${record.transactionHash}`}
+          onClick={(event) => event.stopPropagation()}
+          rel="noreferrer"
+          target="_blank"
+          title={record.transactionHash}
+        >
+          {truncate(record.transactionHash)}
+        </a>
+      </td>
+    )
+  return (
+    <td className="px-3 py-3">
+      <code className="text-label-12 text-foreground-secondary" title={record.id}>
+        {truncate(record.id)}
+      </code>
+    </td>
+  )
+}
+
+declare namespace TransactionCell {
+  type Props = { record: Subsidies.listTransactions.Item }
+}
+
+function TransactionSubsidyCell(options: TransactionSubsidyCell.Props) {
+  return (
+    <td className="px-3 py-3">
+      <span className="flex min-w-24 flex-col gap-0.5">
+        <span className="whitespace-nowrap text-label-13 text-foreground">
+          {transactionFee(options.record)}
+        </span>
+        <span className="text-label-12 text-foreground-secondary">Tempo</span>
+      </span>
+    </td>
+  )
+}
+
+declare namespace TransactionSubsidyCell {
+  type Props = { record: Subsidies.listTransactions.Item }
+}
+
+function SubsidiesCell(options: SubsidiesCell.Props) {
+  return (
+    <td className="px-3 py-3">
+      <ul className="flex min-w-24 flex-col gap-2">
+        {options.subsidies.map((subsidy) => (
+          <li
+            className="flex flex-col gap-0.5"
+            key={`${subsidy.provider}:${subsidy.token.tokenKey}`}
+          >
+            <span className="whitespace-nowrap text-label-13 text-foreground">
+              {subsidy.amount.formatted} {subsidy.token.symbol}
+            </span>
+            <span className="text-label-12 text-foreground-secondary">
+              {label(subsidy.provider)}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </td>
+  )
+}
+
+declare namespace SubsidiesCell {
+  type Props = { subsidies: Subsidies.listRoutes.Item['subsidies'] }
+}
+
+function AttributionCell(options: Attribution.Props) {
+  return (
+    <td className="px-3 py-3">
+      <span className="flex min-w-32 flex-col gap-0.5">
+        <Link
+          className="truncate text-label-13 text-foreground hover:underline"
+          onClick={(event) => event.stopPropagation()}
+          params={{ orgId: options.organization.id }}
+          search={{}}
+          to="/organizations/$orgId"
+        >
+          {options.organization.name ?? options.organization.id}
+        </Link>
+        {options.project ? (
+          <span className="truncate text-label-12 text-foreground-secondary">
+            {options.project.name ?? options.project.id}
+          </span>
+        ) : null}
+      </span>
+    </td>
+  )
+}
+
+function TimeCell(options: TimeCell.Props) {
+  return (
+    <td className="whitespace-nowrap px-3 py-3 text-label-12 text-foreground-secondary">
+      <time dateTime={options.value} title={dateTime(options.value)}>
+        {age(options.value)}
+      </time>
+    </td>
+  )
+}
+
+declare namespace TimeCell {
+  type Props = { value: string }
+}
+
+function TransactionDetail(options: TransactionDetail.Props) {
+  const { record } = options
+  return (
+    <DetailDrawer onClose={options.onClose} title="Sponsored transaction">
+      <DetailHeader id={record.id} status={record.status} />
+      <DetailSection title="Transaction">
+        <Detail label="Hash">
+          {record.transactionHash ? (
+            <ExplorerLink chainId={`eip155:${record.chainId}`} value={record.transactionHash} />
+          ) : (
+            'Pending'
+          )}
+        </Detail>
+        <Detail label="Chain ID">{record.chainId}</Detail>
+        <Detail label="API key">
+          <code>{record.apiKeyId}</code>
+        </Detail>
+        <Detail label="Environment">{label(record.environment)}</Detail>
+      </DetailSection>
+      <DetailSection title="Subsidy">
+        <Detail label="Provider">Tempo</Detail>
+        <Detail label="Subsidizer account">
+          {record.subsidizerAccount ? (
+            <ExplorerLink
+              chainId={`eip155:${record.chainId}`}
+              type="address"
+              value={record.subsidizerAccount}
+            />
+          ) : (
+            'Not recorded'
+          )}
+        </Detail>
+        <Detail label="Fee paid">{amountLabel(record.feeAmount)}</Detail>
+        <Detail label="Maximum fee">{amountLabel(record.feeMaximum)}</Detail>
+        <Detail label="Fee token">
+          {record.feeToken ? <code>{record.feeToken}</code> : 'Chain default'}
+        </Detail>
+      </DetailSection>
+      <Ownership organization={record.organization} project={record.project} />
+      <DetailSection title="Billing">
+        <Detail label="State">{billingState(record)}</Detail>
+        <Detail label="Billable">{record.billable ? 'Yes' : 'No'}</Detail>
+        <Detail label="Attribution">
+          {record.sponsorshipAttributionId ?? 'No subsidy attribution'}
+        </Detail>
+        <Detail label="Meter reported">{timestampLabel(record.meterReportedAt)}</Detail>
+      </DetailSection>
+      <DetailSection title="Timing">
+        <Detail label="Created">{dateTime(record.createdAt)}</Detail>
+        <Detail label="Finalized">{timestampLabel(record.finalizedAt)}</Detail>
+      </DetailSection>
+    </DetailDrawer>
+  )
+}
+
+declare namespace TransactionDetail {
+  type Props = {
+    onClose: () => void
+    record: Subsidies.listTransactions.Item
+  }
+}
+
+function RouteDetail(options: RouteDetail.Props) {
+  const { record } = options
+  return (
+    <DetailDrawer onClose={options.onClose} title="Route subsidy">
+      <DetailHeader id={record.id} status={record.status} />
+      <DetailSection title="Route">
+        <Detail label="Source">
+          {record.sourceToken.symbol} on {record.sourceChain.name}
+        </Detail>
+        <Detail label="Destination">
+          {record.destinationToken.symbol} on {record.destinationChain.name}
+        </Detail>
+        <Detail label="Route provider">{record.provider.name}</Detail>
+        <Detail label="Environment">{label(record.environment)}</Detail>
+        <Detail label="Direction">{label(record.direction)}</Detail>
+        <Detail label={record.direction === 'inbound' ? 'Deposit' : 'Transfer'}>
+          <Link
+            className="font-mono hover:underline"
+            search={{
+              resource: record.direction === 'inbound' ? 'deposits' : 'transfers',
+              selected: record.id,
+            }}
+            to="/routes"
+          >
+            {record.id}
+          </Link>
+        </Detail>
+      </DetailSection>
+      <DetailSection title="Subsidies">
+        {record.subsidies.map((subsidy) => (
+          <Detail
+            key={`${subsidy.provider}:${subsidy.token.tokenKey}`}
+            label={label(subsidy.provider)}
+          >
+            <span className="flex min-w-0 flex-col gap-1">
+              <span>
+                {subsidy.amount.formatted} {subsidy.token.symbol}
+              </span>
+              <span className="text-label-12 text-foreground-secondary">
+                {subsidy.token.name}, {subsidy.token.decimals} decimals
+              </span>
+              <code className="break-all text-label-12 text-foreground-secondary">
+                {subsidy.token.tokenKey}
+              </code>
+            </span>
+          </Detail>
+        ))}
+      </DetailSection>
+      <DetailSection title="Accounts">
+        <Detail label="Recipient">
+          <ExplorerLink
+            chainId={record.destinationChain.id}
+            type="address"
+            value={record.recipient}
+          />
+        </Detail>
+        <Detail label="Subsidizer account">
+          {record.subsidizerAccount ? (
+            <ExplorerLink
+              chainId={record.destinationChain.id}
+              type="address"
+              value={record.subsidizerAccount}
+            />
+          ) : (
+            'Not recorded'
+          )}
+        </Detail>
+      </DetailSection>
+      <DetailSection title="Subsidy transaction">
+        <Detail label="Hash">
+          {record.subsidyTransaction ? (
+            <ExplorerLink
+              chainId={record.subsidyTransaction.chainId}
+              value={record.subsidyTransaction.transactionRef}
+            />
+          ) : (
+            'Not recorded'
+          )}
+        </Detail>
+      </DetailSection>
+      <Ownership organization={record.organization} project={record.project} />
+      <DetailSection title="Billing">
+        <Detail label="State">{routeBillingState(record)}</Detail>
+        <Detail label="Meter reported">{timestampLabel(record.meterReportedAt)}</Detail>
+      </DetailSection>
+      <DetailSection title="Timing">
+        <Detail label="Created">{dateTime(record.createdAt)}</Detail>
+        <Detail label="Updated">{dateTime(record.updatedAt)}</Detail>
+      </DetailSection>
+    </DetailDrawer>
+  )
+}
+
+declare namespace RouteDetail {
+  type Props = {
+    onClose: () => void
+    record: Subsidies.listRoutes.Item
+  }
+}
+
+function DetailDrawer(options: DetailDrawer.Props) {
+  return (
+    <BaseDialog.Root onOpenChange={(open) => !open && options.onClose()} open>
+      <BaseDialog.Portal>
+        <BaseDialog.Backdrop className="fixed inset-0 z-40 bg-black/60 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0" />
+        <BaseDialog.Popup className="fixed inset-y-0 right-0 z-50 flex w-full max-w-xl flex-col border-l border-border bg-surface outline-none transition-transform duration-200 data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full">
+          <div className="flex shrink-0 items-start justify-between gap-4 border-b border-border px-5 py-4">
+            <div className="min-w-0">
+              <BaseDialog.Title className="text-heading-20 text-foreground">
+                {options.title}
+              </BaseDialog.Title>
+              <BaseDialog.Description className="mt-1 text-copy-13 text-foreground-secondary">
+                Subsidy and billing details
+              </BaseDialog.Description>
+            </div>
+            <BaseDialog.Close
+              aria-label="Close details"
+              className="flex size-8 shrink-0 items-center justify-center text-foreground-secondary hover:bg-surface-hover hover:text-foreground"
+            >
+              <X className="size-4" />
+            </BaseDialog.Close>
+          </div>
+          <div className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto px-5 py-5">
+            {options.children}
+          </div>
+        </BaseDialog.Popup>
+      </BaseDialog.Portal>
+    </BaseDialog.Root>
+  )
+}
+
+declare namespace DetailDrawer {
+  type Props = {
+    children: ReactNode
+    onClose: () => void
+    title: string
+  }
+}
+
+function DetailHeader(options: DetailHeader.Props) {
+  return (
+    <div className="flex min-w-0 items-center justify-between gap-3">
+      <code className="truncate text-label-12 text-foreground-secondary" title={options.id}>
+        {options.id}
+      </code>
+      <Status value={options.status} />
+    </div>
+  )
+}
+
+declare namespace DetailHeader {
+  type Props = { id: string; status: string }
+}
+
+function DetailSection(options: DetailSection.Props) {
+  return (
+    <section className="flex flex-col gap-3">
+      <h3 className="text-heading-16 text-foreground">{options.title}</h3>
+      <dl className="grid gap-x-6 gap-y-4 sm:grid-cols-2">{options.children}</dl>
+    </section>
+  )
+}
+
+declare namespace DetailSection {
+  type Props = { children: ReactNode; title: string }
+}
+
+function Detail(options: Detail.Props) {
+  return (
+    <div className="flex min-w-0 flex-col gap-1">
+      <dt className="text-label-12 text-foreground-secondary">{options.label}</dt>
+      <dd className="min-w-0 break-words text-label-13 text-foreground">{options.children}</dd>
+    </div>
+  )
+}
+
+declare namespace Detail {
+  type Props = { children: ReactNode; label: string }
+}
+
+function Ownership(options: Attribution.Props) {
+  return (
+    <DetailSection title="Ownership">
+      <Detail label="Organization">
+        <Link
+          className="hover:underline"
+          params={{ orgId: options.organization.id }}
+          search={{}}
+          to="/organizations/$orgId"
+        >
+          {options.organization.name ?? options.organization.id}
+        </Link>
+      </Detail>
+      <Detail label="Project">
+        {options.project?.name ?? options.project?.id ?? 'Organization scoped'}
+      </Detail>
+    </DetailSection>
+  )
+}
+
+declare namespace Attribution {
+  type Props = {
+    organization: Subsidies.listTransactions.Item['organization']
+    project: Subsidies.listTransactions.Item['project']
+  }
+}
+
+function ExplorerLink(options: ExplorerLink.Props) {
+  const explorer = explorers[options.chainId]
+  if (!explorer) return <code className="break-all">{options.value}</code>
+  return (
+    <a
+      className="flex min-w-0 items-center gap-1.5 break-all font-mono hover:underline"
+      href={`${explorer[options.type ?? 'tx']}/${options.value}`}
+      rel="noreferrer"
+      target="_blank"
+    >
+      <span>{options.value}</span>
+      <ExternalLink className="size-3 shrink-0" />
+    </a>
+  )
+}
+
+declare namespace ExplorerLink {
+  type Props = {
+    chainId: string
+    type?: 'address' | 'tx' | undefined
+    value: string
+  }
+}
+
+function transactionFee(record: Subsidies.listTransactions.Item) {
+  if (record.feeAmount) return amountLabel(record.feeAmount)
+  if (record.feeMaximum) return `Up to ${amountLabel(record.feeMaximum)}`
+  return 'Pending'
+}
+
+function amountLabel(amount: Subsidies.listTransactions.Item['feeAmount']) {
+  if (!amount) return 'Pending'
+  return `${amount.formatted} ${amount.currency.toUpperCase()}`
+}
+
+function billingState(record: Subsidies.listTransactions.Item) {
+  if (record.sponsorshipAttributionId) return 'Subsidized'
+  if (!record.billable) return 'Not billable'
+  return record.meterReportedAt ? `Reported ${age(record.meterReportedAt)}` : 'Pending'
+}
+
+function routeBillingState(record: Subsidies.listRoutes.Item) {
+  if (record.environment !== 'production') return 'Not billable'
+  return record.meterReportedAt ? `Reported ${age(record.meterReportedAt)}` : 'Pending'
+}
+
+function isWorking(status: string) {
+  return ['bridging', 'detected', 'pending', 'processing', 'refunding', 'settling'].includes(status)
+}
+
+function timestampLabel(value: string | null) {
+  return value ? dateTime(value) : 'Pending'
+}
+
+function dateTime(value: string) {
+  return new Intl.DateTimeFormat('en', { dateStyle: 'medium', timeStyle: 'short' }).format(
+    new Date(value),
+  )
+}
+
+function age(value: string) {
+  const delta = new Date(value).getTime() - Date.now()
+  const absolute = Math.abs(delta)
+  const [unit, milliseconds] =
+    absolute >= 86_400_000
+      ? (['day', 86_400_000] as const)
+      : absolute >= 3_600_000
+        ? (['hour', 3_600_000] as const)
+        : absolute >= 60_000
+          ? (['minute', 60_000] as const)
+          : (['second', 1_000] as const)
+  return new Intl.RelativeTimeFormat('en', { numeric: 'auto' }).format(
+    Math.round(delta / milliseconds),
+    unit,
+  )
+}
+
+function label(value: string) {
+  return value
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .replaceAll('-', ' ')
+    .replace(/^./, (character) => character.toUpperCase())
+}
+
+function truncate(value: string) {
+  return value.length <= 20 ? value : `${value.slice(0, 10)}…${value.slice(-8)}`
+}