tapimo 0.14.0 → 0.15.0

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

@@ -0,0 +1,1615 @@
+import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible'
+import { Dialog as BaseDialog } from '@base-ui/react/dialog'
+import { Menu as BaseMenu } from '@base-ui/react/menu'
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
+import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import { Button, Input, Select, Tabs, Tag, useCopy } from 'regen-ui'
+import {
+  ArrowLeftRight,
+  ArrowRight,
+  Check,
+  ChevronDown,
+  CircleDollarSign,
+  Copy as CopyIcon,
+  ExternalLink,
+  SlidersHorizontal,
+  WalletCards,
+  X,
+} from 'lucide-react'
+import { base, mainnet } from 'viem/chains'
+import { tempo } from 'viem/tempo/chains'
+
+import { Notice, Page } from '../components/Page.js'
+import * as Routes from '../lib/routes.js'
+
+type Resource = NonNullable<Routes.Search['resource']>
+const transferStatuses = [
+  'awaiting-source',
+  'processing',
+  'refunding',
+  'completed',
+  'refunded',
+  'action-required',
+  'expired',
+] as const satisfies readonly Routes.listTransfers.Item['status'][]
+const defaultTransferStatuses = [
+  'processing',
+  'refunding',
+  'completed',
+  'refunded',
+  'action-required',
+  'expired',
+] as const satisfies readonly Routes.listTransfers.Item['status'][]
+const depositStatuses = [
+  'detected',
+  'bridging',
+  'settling',
+  'refunding',
+  'completed',
+  'refunded',
+  'action-required',
+] as const satisfies readonly Routes.listDeposits.Item['status'][]
+const depositAddressStatuses = [
+  'active',
+  'action-required',
+  'deactivated',
+] as const satisfies readonly Routes.listDepositAddresses.Item['status'][]
+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:${mainnet.id}`]: {
+    address: `${mainnet.blockExplorers.default.url}/address`,
+    tx: `${mainnet.blockExplorers.default.url}/tx`,
+  },
+  [`eip155:${tempo.id}`]: {
+    address: `${tempo.blockExplorers.default.url}/address`,
+    tx: `${tempo.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',
+  },
+}
+const providerItems = [
+  { label: 'Across', value: 'across' },
+  { label: 'Relay', value: 'relay' },
+  { label: 'Rhino', value: 'rhino' },
+  { label: 'Squid', value: 'squid' },
+  { label: 'Stargate', value: 'stargate' },
+  { label: 'Symbiosis', value: 'symbiosis' },
+] as const
+
+export const Route = createFileRoute('/routes')({
+  validateSearch: Routes.schema.Search,
+  component: PageComponent,
+})
+
+function PageComponent() {
+  const navigate = useNavigate({ from: Route.fullPath })
+  const search = Route.useSearch()
+  const resource = search.resource ?? 'transfers'
+  const summary = useQuery(Routes.summary.options(summaryFilters(search)))
+
+  const applyFilters = useCallback(
+    (filters: Routes.Search) =>
+      void navigate({
+        replace: true,
+        search: { ...filters, resource, selected: undefined },
+      }),
+    [navigate, resource],
+  )
+
+  function selectResource(value: string) {
+    void navigate({
+      search: (current) => ({
+        ...current,
+        depositAddressId: value === 'deposits' ? current.depositAddressId : undefined,
+        methods: value === 'transfers' ? current.methods : undefined,
+        resource: value as Resource,
+        selected: undefined,
+        statuses: undefined,
+      }),
+    })
+  }
+
+  function select(id: string) {
+    void navigate({ search: (current) => ({ ...current, selected: id }) })
+  }
+
+  function closeDetail() {
+    void navigate({ replace: true, search: (current) => ({ ...current, selected: undefined }) })
+  }
+
+  function filterByWork(work: 'inProgress' | 'needsAttention') {
+    void navigate({
+      replace: true,
+      search: (current) => ({
+        ...current,
+        inProgress: work === 'inProgress' && !current.inProgress ? 'true' : undefined,
+        needsAttention: work === 'needsAttention' && !current.needsAttention ? 'true' : undefined,
+        selected: undefined,
+        statuses: undefined,
+      }),
+    })
+  }
+
+  return (
+    <Page
+      title="Routes"
+      description="Inspect transfers, deposits, and reusable deposit addresses"
+      action={<Button render={<Link to="/routes/support" />}>Support matrix</Button>}
+    >
+      <SummaryCards
+        error={summary.error}
+        loading={summary.isPending}
+        onSelect={filterByWork}
+        selected={
+          search.inProgress ? 'inProgress' : search.needsAttention ? 'needsAttention' : null
+        }
+        summary={
+          resource === 'transfers'
+            ? summary.data?.resources.transfers
+            : resource === 'deposits'
+              ? summary.data?.resources.deposits
+              : summary.data?.resources.depositAddresses
+        }
+      />
+      <div className="flex min-w-0 flex-col">
+        <Filters
+          onChange={applyFilters}
+          resource={resource}
+          search={search}
+          tabs={
+            <Tabs
+              active={resource}
+              className="min-w-max border-b-0"
+              onChange={selectResource}
+              tabs={[
+                {
+                  icon: <ArrowLeftRight className="size-4" />,
+                  id: 'transfers',
+                  label: 'Transfers',
+                },
+                {
+                  icon: <CircleDollarSign className="size-4" />,
+                  id: 'deposits',
+                  label: 'Deposits',
+                },
+                {
+                  icon: <WalletCards className="size-4" />,
+                  id: 'deposit-addresses',
+                  label: 'Deposit addresses',
+                },
+              ]}
+            />
+          }
+        />
+        {search.depositAddressId && resource === 'deposits' ? (
+          <div className="flex min-w-0 items-center justify-between gap-3 border-x border-b border-border bg-surface px-3 py-2 text-label-13">
+            <span className="min-w-0 truncate text-foreground-secondary">
+              Deposits for <code className="text-foreground">{search.depositAddressId}</code>
+            </span>
+            <Button
+              aria-label="Show all deposits"
+              onClick={() =>
+                void navigate({
+                  replace: true,
+                  search: (current) => ({ ...current, depositAddressId: undefined }),
+                })
+              }
+              size="small"
+            >
+              Clear
+            </Button>
+          </div>
+        ) : null}
+        {resource === 'transfers' ? (
+          <TransferList onSelect={select} search={search} />
+        ) : resource === 'deposits' ? (
+          <DepositList onSelect={select} search={search} />
+        ) : (
+          <DepositAddressList onSelect={select} search={search} />
+        )}
+      </div>
+      {search.selected ? (
+        resource === 'transfers' ? (
+          <TransferDetail id={search.selected} onClose={closeDetail} />
+        ) : resource === 'deposits' ? (
+          <DepositDetail id={search.selected} onClose={closeDetail} />
+        ) : (
+          <DepositAddressDetail
+            id={search.selected}
+            onClose={closeDetail}
+            onViewDeposits={() =>
+              void navigate({
+                search: (current) => ({
+                  ...current,
+                  depositAddressId: search.selected,
+                  resource: 'deposits',
+                  selected: undefined,
+                  statuses: undefined,
+                }),
+              })
+            }
+          />
+        )
+      ) : null}
+    </Page>
+  )
+}
+
+function SummaryCards(options: SummaryCards.Props) {
+  if (options.error)
+    return (
+      <div
+        className="border border-negative bg-negative-subtle px-4 py-3 text-copy-14 text-negative"
+        role="alert"
+      >
+        {options.error.message}
+      </div>
+    )
+  return (
+    <div className="grid divide-y divide-border border border-border sm:grid-cols-2 sm:divide-x sm:divide-y-0">
+      <SummaryCard
+        label="In progress"
+        loading={options.loading}
+        onClick={() => options.onSelect('inProgress')}
+        selected={options.selected === 'inProgress'}
+      >
+        {options.summary?.inProgress.toLocaleString() ?? '0'}
+      </SummaryCard>
+      <SummaryCard
+        label="Needs attention"
+        loading={options.loading}
+        onClick={() => options.onSelect('needsAttention')}
+        selected={options.selected === 'needsAttention'}
+        tone="negative"
+      >
+        {options.summary?.actionRequired.toLocaleString() ?? '0'}
+      </SummaryCard>
+    </div>
+  )
+}
+
+declare namespace SummaryCards {
+  type Props = {
+    error: Error | null
+    loading: boolean
+    onSelect: (work: 'inProgress' | 'needsAttention') => void
+    selected: 'inProgress' | 'needsAttention' | null
+    summary: Routes.summary.Data['resources'][keyof Routes.summary.Data['resources']] | undefined
+  }
+}
+
+function SummaryCard(options: SummaryCard.Props) {
+  return (
+    <button
+      aria-pressed={options.selected}
+      className="flex min-h-24 min-w-0 cursor-pointer flex-col justify-between gap-3 bg-surface p-4 text-left transition-colors hover:bg-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus aria-pressed:bg-secondary"
+      onClick={options.onClick}
+      type="button"
+    >
+      <span className="text-label-12 text-foreground-secondary">{options.label}</span>
+      <span
+        className={
+          options.tone === 'negative'
+            ? 'truncate text-heading-24 text-negative'
+            : 'truncate text-heading-24 text-foreground'
+        }
+      >
+        {options.loading ? '—' : options.children}
+      </span>
+    </button>
+  )
+}
+
+declare namespace SummaryCard {
+  type Props = {
+    children: ReactNode
+    label: string
+    loading: boolean
+    onClick: () => void
+    selected: boolean
+    tone?: 'negative' | undefined
+  }
+}
+
+function Filters(options: Filters.Props) {
+  const [draft, setDraft] = useState<Routes.Search>(options.search)
+  const timeout = useRef<ReturnType<typeof setTimeout>>(undefined)
+  const statuses = statusItems(options.resource)
+  const count = Object.values(filterSearch(options.search, options.resource)).filter(Boolean).length
+
+  useEffect(() => {
+    if (timeout.current) clearTimeout(timeout.current)
+    setDraft(options.search)
+  }, [options.search])
+  useEffect(
+    () => () => {
+      if (timeout.current) clearTimeout(timeout.current)
+    },
+    [],
+  )
+
+  function update(next: Routes.Search) {
+    setDraft(next)
+    if (timeout.current) clearTimeout(timeout.current)
+    timeout.current = setTimeout(() => options.onChange(filterSearch(next, options.resource)), 300)
+  }
+
+  return (
+    <BaseCollapsible.Root className="min-w-0">
+      <div className="flex min-w-0 items-stretch border-b border-border">
+        <div className="min-w-0 flex-1 overflow-x-auto overflow-y-hidden">{options.tabs}</div>
+        <BaseCollapsible.Trigger className="group flex shrink-0 cursor-pointer items-center gap-2 px-3 text-label-13 text-foreground-secondary hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus data-[panel-open]:text-foreground">
+          <SlidersHorizontal className="size-4 text-foreground-secondary" />
+          <span>Filters</span>
+          {count ? <Tag>{count} active</Tag> : null}
+          <ChevronDown className="size-4 text-foreground-secondary transition-transform group-data-[panel-open]:rotate-180" />
+        </BaseCollapsible.Trigger>
+      </div>
+      <BaseCollapsible.Panel>
+        <div className="flex flex-col gap-3 border-b border-border p-4">
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+            <label className="flex min-w-0 flex-col gap-1.5 lg:col-span-2">
+              <span className="text-label-12 text-foreground-secondary">Search</span>
+              <Input
+                aria-label="Search routes"
+                onChange={(event) => update({ ...draft, query: event.target.value })}
+                placeholder="Resource id, address, or transaction"
+                value={draft.query ?? ''}
+              />
+            </label>
+            <FilterMenu
+              empty="All environments"
+              label="Environment"
+              onChange={(environments) =>
+                update({
+                  ...draft,
+                  environments: environments as Routes.Search['environments'],
+                })
+              }
+              items={[
+                { label: 'Production', value: 'production' },
+                { label: 'Sandbox', value: 'sandbox' },
+              ]}
+              value={draft.environments ?? []}
+            />
+            <FilterMenu
+              empty={options.resource === 'transfers' ? 'Default statuses' : 'All statuses'}
+              label="Status"
+              onChange={(statuses) =>
+                update({
+                  ...draft,
+                  inProgress: undefined,
+                  needsAttention: undefined,
+                  statuses: statuses as Routes.Search['statuses'],
+                })
+              }
+              items={statuses}
+              value={draft.statuses ?? []}
+            />
+            <FilterMenu
+              empty="All providers"
+              label="Provider"
+              onChange={(providers) => update({ ...draft, providers })}
+              items={providerItems}
+              value={draft.providers ?? []}
+            />
+            <FilterMenu
+              empty="All source chains"
+              label="Source chain"
+              onChange={(sourceChains) => update({ ...draft, sourceChains })}
+              items={[
+                { label: 'Ethereum', value: `eip155:${mainnet.id}` },
+                { label: 'Base', value: `eip155:${base.id}` },
+                { label: 'Tempo', value: `eip155:${tempo.id}` },
+              ]}
+              value={draft.sourceChains ?? []}
+            />
+            <label className="flex min-w-0 flex-col gap-1.5">
+              <span className="text-label-12 text-foreground-secondary">Organization ID</span>
+              <Input
+                aria-label="Organization ID"
+                onChange={(event) => update({ ...draft, orgId: event.target.value })}
+                placeholder="org_…"
+                value={draft.orgId ?? ''}
+              />
+            </label>
+            <label className="flex min-w-0 flex-col gap-1.5">
+              <span className="text-label-12 text-foreground-secondary">Project ID</span>
+              <Input
+                aria-label="Project ID"
+                onChange={(event) => update({ ...draft, projectId: event.target.value })}
+                placeholder="prj_…"
+                value={draft.projectId ?? ''}
+              />
+            </label>
+            <FilterSelect
+              label="Work"
+              onChange={(work) =>
+                update({
+                  ...draft,
+                  inProgress: work === 'inProgress' ? 'true' : undefined,
+                  needsAttention: work === 'needsAttention' ? 'true' : undefined,
+                  statuses: undefined,
+                })
+              }
+              items={[
+                { label: 'All work', value: '' },
+                { label: 'In progress', value: 'inProgress' },
+                { label: 'Needs attention', value: 'needsAttention' },
+              ]}
+              value={draft.inProgress ? 'inProgress' : draft.needsAttention ? 'needsAttention' : ''}
+            />
+            {options.resource === 'transfers' ? (
+              <FilterMenu
+                empty="All methods"
+                label="Method"
+                onChange={(methods) =>
+                  update({ ...draft, methods: methods as Routes.Search['methods'] })
+                }
+                items={[
+                  { label: 'Wallet transaction', value: 'transaction' },
+                  { label: 'Deposit address', value: 'depositAddress' },
+                ]}
+                value={draft.methods ?? []}
+              />
+            ) : null}
+            <div className="flex items-end justify-end lg:col-start-4">
+              <Button onClick={() => update({})} type="button">
+                Clear filters
+              </Button>
+            </div>
+          </div>
+        </div>
+      </BaseCollapsible.Panel>
+    </BaseCollapsible.Root>
+  )
+}
+
+declare namespace Filters {
+  type Props = {
+    onChange: (search: Routes.Search) => void
+    resource: Resource
+    search: Routes.Search
+    tabs: ReactNode
+  }
+}
+
+function FilterMenu(options: FilterMenu.Props) {
+  const selected = options.items.filter((item) => options.value.includes(item.value))
+  const value =
+    selected.length === 0
+      ? options.empty
+      : selected.length === 1
+        ? selected[0]!.label
+        : `${selected.length} selected`
+  return (
+    <div className="flex min-w-0 flex-col gap-1.5">
+      <span className="text-label-12 text-foreground-secondary">{options.label}</span>
+      <BaseMenu.Root>
+        <BaseMenu.Trigger
+          aria-label={options.label}
+          className="flex h-10 w-full cursor-pointer items-center gap-2 border-2 border-transparent bg-secondary px-3 text-copy-14 text-foreground outline-none hover:bg-secondary-hover active:bg-secondary-active focus-visible:border-focus focus-visible:bg-secondary-hover"
+        >
+          <span className="min-w-0 flex-1 truncate text-left">{value}</span>
+          <ChevronDown className="size-4 shrink-0 text-foreground-secondary" />
+        </BaseMenu.Trigger>
+        <BaseMenu.Portal>
+          <BaseMenu.Positioner align="start" className="z-50 outline-none" sideOffset={4}>
+            <BaseMenu.Popup className="max-h-72 min-w-[var(--anchor-width)] overflow-auto border border-border bg-surface py-1 shadow-lg outline-none">
+              {options.items.map((item) => (
+                <BaseMenu.CheckboxItem
+                  checked={options.value.includes(item.value)}
+                  className="flex cursor-pointer items-center gap-2 px-3 py-2 text-label-14 text-foreground outline-none data-[highlighted]:bg-secondary-hover"
+                  closeOnClick={false}
+                  key={item.value}
+                  label={item.label}
+                  onCheckedChange={(checked) =>
+                    options.onChange(
+                      checked
+                        ? [...options.value, item.value]
+                        : options.value.filter((value) => value !== item.value),
+                    )
+                  }
+                >
+                  <span className="grid size-4 shrink-0 place-items-center border border-border">
+                    <BaseMenu.CheckboxItemIndicator>
+                      <Check className="size-3" />
+                    </BaseMenu.CheckboxItemIndicator>
+                  </span>
+                  {item.label}
+                </BaseMenu.CheckboxItem>
+              ))}
+            </BaseMenu.Popup>
+          </BaseMenu.Positioner>
+        </BaseMenu.Portal>
+      </BaseMenu.Root>
+    </div>
+  )
+}
+
+declare namespace FilterMenu {
+  type Props = {
+    empty: string
+    items: readonly { label: string; value: string }[]
+    label: string
+    onChange: (value: readonly string[]) => void
+    value: readonly string[]
+  }
+}
+
+function FilterSelect(options: FilterSelect.Props) {
+  return (
+    <label className="flex min-w-0 flex-col gap-1.5">
+      <span className="text-label-12 text-foreground-secondary">{options.label}</span>
+      <Select
+        aria-label={options.label}
+        className="w-full"
+        items={options.items}
+        onChange={options.onChange}
+        value={options.value}
+      />
+    </label>
+  )
+}
+
+declare namespace FilterSelect {
+  type Props = {
+    items: readonly { label: string; value: string }[]
+    label: string
+    onChange: (value: string) => void
+    value: string
+  }
+}
+
+function TransferList(options: ResourceList.Props) {
+  const selectedStatuses = transferStatuses.filter((status) =>
+    options.search.statuses?.includes(status),
+  )
+  const statuses =
+    selectedStatuses.length > 0
+      ? selectedStatuses
+      : options.search.inProgress || options.search.needsAttention
+        ? undefined
+        : defaultTransferStatuses
+  const query = useInfiniteQuery(
+    Routes.listTransfers.options({
+      ...commonFilters(options.search, 'transfers'),
+      query: options.search.query,
+      statuses,
+    }),
+  )
+  const records = query.data?.pages.flatMap((page) => page.data) ?? []
+  return (
+    <ResourceList
+      empty="No route transfers match these filters."
+      error={query.error}
+      hasNextPage={query.hasNextPage}
+      loading={query.isPending}
+      loadingMore={query.isFetchingNextPage}
+      onLoadMore={() => query.fetchNextPage()}
+    >
+      {records.length ? (
+        <table className="w-full min-w-[720px] border-collapse text-left">
+          <TableHead
+            columns={['Status', 'Route', 'Source amount', 'Provider', 'Organization', 'Updated']}
+          />
+          <tbody>
+            {records.map((record) => (
+              <ResourceRow id={record.id} key={record.id} onSelect={options.onSelect}>
+                <StatusCell status={record.status} />
+                <RouteCell record={record} />
+                <td className="px-3 py-3 text-label-13 text-foreground">
+                  {amountLabel(record.sourceAmount, record.sourceToken.symbol)}
+                </td>
+                <td className="px-3 py-3 text-label-13 text-foreground-secondary">
+                  {record.provider.name}
+                </td>
+                <AttributionCell organization={record.organization} project={record.project} />
+                <td className="whitespace-nowrap px-3 py-3 text-label-12 text-foreground-secondary">
+                  <time dateTime={record.updatedAt} title={dateTime(record.updatedAt)}>
+                    {age(record.updatedAt)}
+                  </time>
+                </td>
+              </ResourceRow>
+            ))}
+          </tbody>
+        </table>
+      ) : undefined}
+    </ResourceList>
+  )
+}
+
+function DepositList(options: ResourceList.Props) {
+  const statuses = depositStatuses.filter((status) => options.search.statuses?.includes(status))
+  const query = useInfiniteQuery(
+    Routes.listDeposits.options({
+      ...commonFilters(options.search, 'deposits'),
+      depositAddressId: options.search.depositAddressId,
+      query: options.search.query,
+      statuses: statuses.length ? statuses : undefined,
+    }),
+  )
+  const records = query.data?.pages.flatMap((page) => page.data) ?? []
+  return (
+    <ResourceList
+      empty="No route deposits match these filters."
+      error={query.error}
+      hasNextPage={query.hasNextPage}
+      loading={query.isPending}
+      loadingMore={query.isFetchingNextPage}
+      onLoadMore={() => query.fetchNextPage()}
+    >
+      {records.length ? (
+        <table className="w-full min-w-[720px] border-collapse text-left">
+          <TableHead
+            columns={['Status', 'Route', 'Source amount', 'Provider', 'Organization', 'Updated']}
+          />
+          <tbody>
+            {records.map((record) => (
+              <ResourceRow id={record.id} key={record.id} onSelect={options.onSelect}>
+                <StatusCell status={record.status} />
+                <RouteCell record={record} />
+                <td className="px-3 py-3 text-label-13 text-foreground">
+                  {record.sourceAmount
+                    ? amountLabel(record.sourceAmount, record.sourceToken.symbol)
+                    : 'Pending'}
+                </td>
+                <td className="px-3 py-3 text-label-13 text-foreground-secondary">
+                  {record.provider.name}
+                </td>
+                <AttributionCell organization={record.organization} project={record.project} />
+                <td className="whitespace-nowrap px-3 py-3 text-label-12 text-foreground-secondary">
+                  <time dateTime={record.updatedAt} title={dateTime(record.updatedAt)}>
+                    {age(record.updatedAt)}
+                  </time>
+                </td>
+              </ResourceRow>
+            ))}
+          </tbody>
+        </table>
+      ) : undefined}
+    </ResourceList>
+  )
+}
+
+function DepositAddressList(options: ResourceList.Props) {
+  const statuses = depositAddressStatuses.filter((status) =>
+    options.search.statuses?.includes(status),
+  )
+  const query = useInfiniteQuery(
+    Routes.listDepositAddresses.options({
+      ...commonFilters(options.search, 'deposit-addresses'),
+      query: options.search.query,
+      statuses: statuses.length ? statuses : undefined,
+    }),
+  )
+  const records = query.data?.pages.flatMap((page) => page.data) ?? []
+  return (
+    <ResourceList
+      empty="No route deposit addresses match these filters."
+      error={query.error}
+      hasNextPage={query.hasNextPage}
+      loading={query.isPending}
+      loadingMore={query.isFetchingNextPage}
+      onLoadMore={() => query.fetchNextPage()}
+    >
+      {records.length ? (
+        <table className="w-full min-w-[820px] border-collapse text-left">
+          <TableHead
+            columns={[
+              'Status',
+              'Deposit address',
+              'Route',
+              'Provider',
+              'Polling',
+              'Organization',
+              'Updated',
+            ]}
+          />
+          <tbody>
+            {records.map((record) => (
+              <ResourceRow id={record.id} key={record.id} onSelect={options.onSelect}>
+                <StatusCell status={record.status} />
+                <td className="px-3 py-3">
+                  <CopyAddress value={record.address} />
+                </td>
+                <RouteCell record={record} />
+                <td className="px-3 py-3 text-label-13 text-foreground-secondary">
+                  {record.provider.name}
+                </td>
+                <td className="whitespace-nowrap px-3 py-3 text-label-12 text-foreground-secondary">
+                  {record.consecutivePollFailures
+                    ? `${record.consecutivePollFailures} failed checks`
+                    : `Next ${age(record.nextPollAt)}`}
+                </td>
+                <AttributionCell organization={record.organization} project={record.project} />
+                <td className="whitespace-nowrap px-3 py-3 text-label-12 text-foreground-secondary">
+                  <time dateTime={record.updatedAt} title={dateTime(record.updatedAt)}>
+                    {age(record.updatedAt)}
+                  </time>
+                </td>
+              </ResourceRow>
+            ))}
+          </tbody>
+        </table>
+      ) : undefined}
+    </ResourceList>
+  )
+}
+
+function ResourceList(options: ResourceList.ContainerProps) {
+  if (options.loading) return <Notice>Loading routes records…</Notice>
+  if (options.error)
+    return (
+      <div
+        className="flex items-center justify-center gap-3 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 ResourceList {
+  type Props = {
+    onSelect: (id: string) => void
+    search: Routes.Search
+  }
+  type ContainerProps = {
+    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 CopyAddress(options: CopyAddress.Props) {
+  return (
+    <span
+      className="flex max-w-44 items-center gap-1.5 font-mono text-label-12 text-foreground-secondary"
+      title={options.value}
+    >
+      <span className="truncate">{truncate(options.value)}</span>
+      <CopyButton value={options.value} />
+    </span>
+  )
+}
+
+declare namespace CopyAddress {
+  type Props = { value: string }
+}
+
+function CopyButton(options: CopyButton.Props) {
+  const { copy, notifying } = useCopy()
+  return (
+    <button
+      aria-label={`Copy ${options.value}`}
+      className="shrink-0 cursor-pointer text-foreground-secondary hover:text-foreground"
+      onClick={(event) => {
+        event.stopPropagation()
+        void copy(options.value)
+      }}
+      title="Copy address"
+      type="button"
+    >
+      {notifying ? <Check className="size-3 shrink-0" /> : <CopyIcon className="size-3 shrink-0" />}
+    </button>
+  )
+}
+
+declare namespace CopyButton {
+  type Props = { value: string }
+}
+
+function StatusCell(options: StatusCell.Props) {
+  return (
+    <td className="px-3 py-3">
+      <StatusBadge status={options.status} />
+    </td>
+  )
+}
+
+declare namespace StatusCell {
+  type Props = { status: 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<
+      Routes.listTransfers.Item,
+      'destinationChain' | 'destinationToken' | 'sourceChain' | 'sourceToken'
+    >
+  }
+}
+
+function AttributionCell(options: AttributionCell.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>
+  )
+}
+
+declare namespace AttributionCell {
+  type Props = Pick<Routes.listTransfers.Item, 'organization' | 'project'>
+}
+
+function StatusBadge(options: StatusBadge.Props) {
+  const intent =
+    options.status === 'completed'
+      ? 'positive'
+      : options.status === 'active' || options.status === 'awaiting-source'
+        ? 'info'
+        : options.status === 'action-required'
+          ? 'negative'
+          : isWorking(options.status)
+            ? 'warning'
+            : 'neutral'
+  return <Tag intent={intent}>{label(options.status)}</Tag>
+}
+
+declare namespace StatusBadge {
+  type Props = { status: string }
+}
+
+function TransferDetail(options: DetailProps) {
+  const query = useQuery(Routes.getTransfer.options(options.id))
+  const record = query.data
+  return (
+    <DetailDrawer
+      error={query.error}
+      loading={query.isPending}
+      onClose={options.onClose}
+      title="Route transfer"
+    >
+      {record ? (
+        <>
+          <DetailHeader id={record.id} status={record.status} />
+          {record.statusReason ? <Reason reason={record.statusReason.message} /> : null}
+          <DetailSection title="Route">
+            <Detail label="Provider">{record.provider.name}</Detail>
+            <Detail label="Environment">{label(record.environment)}</Detail>
+            <Detail label="Source">{routeSource(record)}</Detail>
+            <Detail label="Destination">{routeDestination(record)}</Detail>
+            <Detail label="Source amount">
+              {amountLabel(record.sourceAmount, record.sourceToken.symbol)}
+            </Detail>
+            <Detail label="Destination amount">
+              {record.destinationAmount
+                ? amountLabel(record.destinationAmount, record.destinationToken.symbol)
+                : 'Pending'}
+            </Detail>
+            <Detail label="Method">{label(record.method)}</Detail>
+            <Detail label="Mode">{label(record.mode)}</Detail>
+          </DetailSection>
+          <Ownership organization={record.organization} project={record.project} />
+          <DetailSection title="Accounts">
+            <Detail label="Sender">
+              {record.sender ? (
+                <ExplorerLink
+                  chainId={record.sourceChain.id}
+                  type="address"
+                  value={record.sender}
+                />
+              ) : (
+                'Not recorded'
+              )}
+            </Detail>
+            <Detail label="Recipient">
+              <ExplorerLink
+                chainId={record.destinationChain.id}
+                type="address"
+                value={record.recipient}
+              />
+            </Detail>
+            <Detail label="Refund address">
+              {record.refundAddress ? (
+                <ExplorerLink
+                  chainId={record.sourceChain.id}
+                  type="address"
+                  value={record.refundAddress}
+                />
+              ) : (
+                'Not configured'
+              )}
+            </Detail>
+          </DetailSection>
+          <DetailSection title="Processing">
+            <Detail label="Subsidies">
+              {record.subsidies.length ? (
+                <ul className="flex flex-col gap-1">
+                  {record.subsidies.map((subsidy) => (
+                    <li key={`${subsidy.provider}:${subsidy.token.tokenKey}`}>
+                      {label(subsidy.provider)}: {amountLabel(subsidy.amount, subsidy.token.symbol)}
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                'None'
+              )}
+            </Detail>
+          </DetailSection>
+          <TransactionList
+            transactions={record.transactions.map(({ chainId, role, transactionRef }) => ({
+              chainId,
+              roles: [role],
+              transactionRef,
+            }))}
+          />
+          <section className="flex flex-col gap-3">
+            <h3 className="text-heading-16 text-foreground">Lifecycle</h3>
+            <ol className="flex flex-col border-l border-border pl-4">
+              {record.events.map((event) => (
+                <li className="relative flex flex-col gap-1 pb-4 last:pb-0" key={event.version}>
+                  <span className="absolute -left-[19px] top-1.5 size-2 bg-foreground-secondary" />
+                  <span className="text-label-13 text-foreground">{label(event.status)}</span>
+                  <time
+                    className="text-label-12 text-foreground-secondary"
+                    dateTime={event.createdAt}
+                  >
+                    {dateTime(event.createdAt)}
+                  </time>
+                  {event.statusReason ? (
+                    <span className="text-copy-13 text-foreground-secondary">
+                      {event.statusReason.message}
+                    </span>
+                  ) : null}
+                </li>
+              ))}
+            </ol>
+          </section>
+        </>
+      ) : null}
+    </DetailDrawer>
+  )
+}
+
+function DepositDetail(options: DetailProps) {
+  const navigate = useNavigate({ from: Route.fullPath })
+  const query = useQuery(Routes.getDeposit.options(options.id))
+  const record = query.data
+  return (
+    <DetailDrawer
+      error={query.error}
+      loading={query.isPending}
+      onClose={options.onClose}
+      title="Route deposit"
+    >
+      {record ? (
+        <>
+          <DetailHeader id={record.id} status={record.status} />
+          {record.statusReason ? <Reason reason={record.statusReason.message} /> : null}
+          <DetailSection title="Route">
+            <Detail label="Provider">{record.provider.name}</Detail>
+            <Detail label="Environment">{label(record.environment)}</Detail>
+            <Detail label="Source">{routeSource(record)}</Detail>
+            <Detail label="Destination">{routeDestination(record)}</Detail>
+            <Detail label="Source amount">
+              {record.sourceAmount
+                ? amountLabel(record.sourceAmount, record.sourceToken.symbol)
+                : 'Pending'}
+            </Detail>
+            <Detail label="Destination amount">
+              {record.destinationAmount
+                ? amountLabel(record.destinationAmount, record.destinationToken.symbol)
+                : 'Pending'}
+            </Detail>
+          </DetailSection>
+          <Ownership organization={record.organization} project={record.project} />
+          <DetailSection title="Accounts">
+            <Detail label="Sender">
+              {record.sender ? (
+                <ExplorerLink
+                  chainId={record.sourceChain.id}
+                  type="address"
+                  value={record.sender}
+                />
+              ) : (
+                'Not recorded'
+              )}
+            </Detail>
+            <Detail label="Recipient">
+              <ExplorerLink
+                chainId={record.destinationChain.id}
+                type="address"
+                value={record.recipient}
+              />
+            </Detail>
+            <Detail label="Refund address">
+              <ExplorerLink
+                chainId={record.sourceChain.id}
+                type="address"
+                value={record.refundAddress}
+              />
+            </Detail>
+          </DetailSection>
+          <DetailSection title="Processing">
+            <Detail label="Detected by">
+              {record.detectionTrigger ? label(record.detectionTrigger) : 'Unknown'}
+            </Detail>
+            <Detail label="Poll observed">
+              {record.pollObservedAt ? dateTime(record.pollObservedAt) : 'Not recorded'}
+            </Detail>
+            <Detail label="Provider delivered">
+              {record.providerDeliveredAt ? dateTime(record.providerDeliveredAt) : 'Pending'}
+            </Detail>
+            <Detail label="Subsidies">
+              {record.subsidies.length ? (
+                <ul className="flex flex-col gap-1">
+                  {record.subsidies.map((subsidy) => (
+                    <li key={`${subsidy.provider}:${subsidy.token.tokenKey}`}>
+                      {label(subsidy.provider)}: {amountLabel(subsidy.amount, subsidy.token.symbol)}
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                'None'
+              )}
+            </Detail>
+            <Detail label="Webhook received">
+              {record.webhookReceivedAt ? dateTime(record.webhookReceivedAt) : 'Not received'}
+            </Detail>
+            <Detail label="Retry attempts">{record.retryAttempts ?? 'None'}</Detail>
+            <Detail label="Tempo gas paid">{record.tempoGasPaid ?? 'None'}</Detail>
+          </DetailSection>
+          <button
+            className="w-fit text-label-13 text-foreground-secondary hover:text-foreground hover:underline"
+            onClick={() =>
+              void navigate({
+                search: (current) => ({
+                  ...current,
+                  resource: 'deposit-addresses',
+                  selected: record.depositAddress.id,
+                  statuses: undefined,
+                }),
+              })
+            }
+            type="button"
+          >
+            View deposit address
+          </button>
+          <TransactionList transactions={depositTransactions(record)} />
+        </>
+      ) : null}
+    </DetailDrawer>
+  )
+}
+
+function DepositAddressDetail(options: DepositAddressDetail.Props) {
+  const query = useQuery(Routes.getDepositAddress.options(options.id))
+  const record = query.data
+  return (
+    <DetailDrawer
+      error={query.error}
+      loading={query.isPending}
+      onClose={options.onClose}
+      title="Deposit address"
+    >
+      {record ? (
+        <>
+          <DetailHeader id={record.id} status={record.status} />
+          <DetailSection title="Route">
+            <Detail label="Provider">{record.provider.name}</Detail>
+            <Detail label="Environment">{label(record.environment)}</Detail>
+            <Detail label="Source">{routeSource(record)}</Detail>
+            <Detail label="Destination">{routeDestination(record)}</Detail>
+            <Detail label="Delivery">{label(record.deliveryStrategy)}</Detail>
+            <Detail label="Subsidized">{record.subsidize ? 'Yes' : 'No'}</Detail>
+          </DetailSection>
+          <Ownership organization={record.organization} project={record.project} />
+          <DetailSection title="Accounts">
+            <Detail label="Deposit address">
+              <span className="flex items-center gap-1.5">
+                <ExplorerLink
+                  chainId={record.sourceChain.id}
+                  type="address"
+                  value={record.address}
+                />
+                <CopyButton value={record.address} />
+              </span>
+            </Detail>
+            <Detail label="Recipient">
+              <ExplorerLink
+                chainId={record.destinationChain.id}
+                type="address"
+                value={record.recipient}
+              />
+            </Detail>
+            <Detail label="Refund address">
+              <ExplorerLink
+                chainId={record.sourceChain.id}
+                type="address"
+                value={record.refundAddress}
+              />
+            </Detail>
+          </DetailSection>
+          <DetailSection title="Polling">
+            <Detail label="Last checked">
+              {record.lastPolledAt ? dateTime(record.lastPolledAt) : 'Never'}
+            </Detail>
+            <Detail label="Next check">{dateTime(record.nextPollAt)}</Detail>
+            <Detail label="Consecutive failures">{record.consecutivePollFailures}</Detail>
+            <Detail label="Lease expires">
+              {record.pollLeaseUntil ? dateTime(record.pollLeaseUntil) : 'No active lease'}
+            </Detail>
+          </DetailSection>
+          <Button onClick={options.onViewDeposits}>View deposits</Button>
+          {record.providerRequestIds.length ? (
+            <DetailSection title="Provider request IDs">
+              {record.providerRequestIds.map((id) => (
+                <Detail key={id} label="Request">
+                  {id}
+                </Detail>
+              ))}
+            </DetailSection>
+          ) : null}
+        </>
+      ) : null}
+    </DetailDrawer>
+  )
+}
+
+type DetailProps = { id: string; onClose: () => void }
+
+declare namespace DepositAddressDetail {
+  type Props = DetailProps & { onViewDeposits: () => void }
+}
+
+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">
+                Operational details and verified evidence
+              </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.loading ? (
+              <Notice>Loading details…</Notice>
+            ) : options.error ? (
+              <div
+                className="border border-negative bg-negative-subtle p-4 text-copy-14 text-negative"
+                role="alert"
+              >
+                {options.error.message}
+              </div>
+            ) : (
+              options.children
+            )}
+          </div>
+        </BaseDialog.Popup>
+      </BaseDialog.Portal>
+    </BaseDialog.Root>
+  )
+}
+
+declare namespace DetailDrawer {
+  type Props = {
+    children: ReactNode
+    error: Error | null
+    loading: boolean
+    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>
+      <StatusBadge status={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: AttributionCell.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>
+  )
+}
+
+function Reason(options: Reason.Props) {
+  return (
+    <div className="border border-negative bg-negative-subtle p-3 text-copy-13 text-negative">
+      {options.reason}
+    </div>
+  )
+}
+
+declare namespace Reason {
+  type Props = { reason: string }
+}
+
+function TransactionList(options: TransactionList.Props) {
+  return (
+    <section className="flex flex-col gap-3">
+      <h3 className="text-heading-16 text-foreground">Transactions</h3>
+      {options.transactions.length ? (
+        <ul className="divide-y divide-border border-y border-border">
+          {options.transactions.map((transaction) => (
+            <li
+              className="flex items-center justify-between gap-3 py-3"
+              key={`${transaction.chainId}:${transaction.transactionRef}`}
+            >
+              <span className="text-copy-13 text-foreground-secondary">
+                {transaction.roles.map(label).join(', ')}
+              </span>
+              <ExplorerLink chainId={transaction.chainId} value={transaction.transactionRef} />
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p className="text-copy-13 text-foreground-secondary">No verified transactions.</p>
+      )}
+    </section>
+  )
+}
+
+declare namespace TransactionList {
+  type Props = { transactions: readonly Transaction[] }
+  type Transaction = {
+    chainId: string
+    roles: readonly ('destination' | 'provider' | 'refund' | 'source' | 'subsidizer')[]
+    transactionRef: string
+  }
+}
+
+function ExplorerLink(options: ExplorerLink.Props) {
+  const explorer = options.chainId ? explorers[options.chainId] : undefined
+  if (!explorer)
+    return (
+      <code
+        className="max-w-64 truncate text-label-12 text-foreground-secondary"
+        title={options.value}
+      >
+        {truncate(options.value)}
+      </code>
+    )
+  return (
+    <a
+      className="flex min-w-0 items-center gap-1.5 font-mono text-label-12 text-foreground-secondary hover:text-foreground"
+      href={`${explorer[options.type ?? 'tx']}/${options.value}`}
+      rel="noreferrer"
+      target="_blank"
+      title={options.value}
+    >
+      <span className="truncate">{truncate(options.value)}</span>
+      <ExternalLink className="size-3 shrink-0" />
+    </a>
+  )
+}
+
+declare namespace ExplorerLink {
+  type Props = {
+    chainId?: string | undefined
+    type?: 'address' | 'tx' | undefined
+    value: string
+  }
+}
+
+function depositTransactions(record: Routes.getDeposit.Data): TransactionList.Transaction[] {
+  const destinationHashes = record.destinationTransactionHashes ?? []
+  const destinationTransactions = new Set(destinationHashes.map((hash) => hash.toLowerCase()))
+  const transactions: TransactionList.Transaction[] = [
+    ...record.sourceTransactionHashes.map((transactionRef) => ({
+      chainId: record.sourceChain.id,
+      roles: ['source'] as const,
+      transactionRef,
+    })),
+    ...record.providerTransactionHashes.map((transactionRef) => ({
+      chainId: destinationTransactions.has(transactionRef.toLowerCase())
+        ? record.destinationChain.id
+        : record.sourceChain.id,
+      roles: ['provider'] as const,
+      transactionRef,
+    })),
+    ...destinationHashes.map((transactionRef) => ({
+      chainId: record.destinationChain.id,
+      roles: ['destination'] as const,
+      transactionRef,
+    })),
+    ...(record.settlementTransactionHash
+      ? [
+          {
+            chainId: record.destinationChain.id,
+            roles: ['subsidizer'] as const,
+            transactionRef: record.settlementTransactionHash,
+          },
+        ]
+      : []),
+  ]
+  const unique = new Map<string, TransactionList.Transaction>()
+  for (const transaction of transactions) {
+    const reference = transaction.chainId.startsWith('eip155:')
+      ? transaction.transactionRef.toLowerCase()
+      : transaction.transactionRef
+    const key = `${transaction.chainId}:${reference}`
+    const current = unique.get(key)
+    unique.set(
+      key,
+      current
+        ? {
+            ...current,
+            roles:
+              current.roles.includes('subsidizer') || transaction.roles.includes('subsidizer')
+                ? ['subsidizer']
+                : [...new Set([...current.roles, ...transaction.roles])],
+          }
+        : transaction,
+    )
+  }
+  return [...unique.values()]
+}
+
+function commonFilters(search: Routes.Search, resource: Resource) {
+  return {
+    environments: search.environments?.length ? search.environments : undefined,
+    inProgress: search.inProgress,
+    methods: resource === 'transfers' && search.methods?.length ? search.methods : undefined,
+    needsAttention: search.needsAttention,
+    orgId: search.orgId,
+    projectId: search.projectId,
+    providers: search.providers?.length ? search.providers : undefined,
+    sourceChains: search.sourceChains?.length ? search.sourceChains : undefined,
+  }
+}
+
+function summaryFilters(search: Routes.Search) {
+  return {
+    environments: search.environments?.length ? search.environments : undefined,
+    methods: search.methods?.length ? search.methods : undefined,
+    orgId: search.orgId,
+    projectId: search.projectId,
+    providers: search.providers?.length ? search.providers : undefined,
+    sourceChains: search.sourceChains?.length ? search.sourceChains : undefined,
+  }
+}
+
+function filterSearch(search: Routes.Search, resource: Resource): Routes.Search {
+  return {
+    environments: search.environments?.length ? search.environments : undefined,
+    inProgress: search.inProgress,
+    methods: resource === 'transfers' && search.methods?.length ? search.methods : undefined,
+    needsAttention: search.needsAttention,
+    orgId: search.orgId?.trim() || undefined,
+    projectId: search.projectId?.trim() || undefined,
+    providers: search.providers?.length ? search.providers : undefined,
+    query: search.query?.trim() || undefined,
+    sourceChains: search.sourceChains?.length ? search.sourceChains : undefined,
+    statuses: search.statuses?.length ? search.statuses : undefined,
+  }
+}
+
+function statusItems(resource: Resource) {
+  const values =
+    resource === 'transfers'
+      ? transferStatuses
+      : resource === 'deposits'
+        ? depositStatuses
+        : depositAddressStatuses
+  return values.map((status) => ({ label: label(status), value: status }))
+}
+
+function isWorking(status: string) {
+  return [
+    'awaiting-source',
+    'bridging',
+    'detected',
+    'processing',
+    'refunding',
+    'settling',
+  ].includes(status)
+}
+
+function label(value: string) {
+  return value
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .replaceAll('-', ' ')
+    .replace(/^./, (character) => character.toUpperCase())
+}
+
+function routeSource(record: Pick<Routes.listTransfers.Item, 'sourceChain' | 'sourceToken'>) {
+  return `${record.sourceToken.symbol} on ${record.sourceChain.name}`
+}
+
+function routeDestination(
+  record: Pick<Routes.listTransfers.Item, 'destinationChain' | 'destinationToken'>,
+) {
+  return `${record.destinationToken.symbol} on ${record.destinationChain.name}`
+}
+
+function amountLabel(amount: Routes.listTransfers.Item['sourceAmount'], symbol: string) {
+  return `${amount.formatted} ${symbol}`
+}
+
+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, size] =
+    absolute >= 86_400_000
+      ? ['day', 86_400_000]
+      : absolute >= 3_600_000
+        ? ['hour', 3_600_000]
+        : absolute >= 60_000
+          ? ['minute', 60_000]
+          : ['second', 1_000]
+  return new Intl.RelativeTimeFormat('en', { numeric: 'auto' }).format(
+    Math.round(delta / size),
+    unit as Intl.RelativeTimeFormatUnit,
+  )
+}
+
+function truncate(value: string) {
+  if (value.length <= 20) return value
+  return `${value.slice(0, 10)}…${value.slice(-8)}`
+}