tapimo 0.15.0 → 0.18.0

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

@@ -80,6 +80,7 @@ const explorers: Record<string, Explorer> = {
 }
 const providerItems = [
   { label: 'Across', value: 'across' },
+  { label: 'Legacy Mesh', value: 'legacy-mesh' },
   { label: 'Relay', value: 'relay' },
   { label: 'Rhino', value: 'rhino' },
   { label: 'Squid', value: 'squid' },
@@ -88,6 +89,7 @@ const providerItems = [
 ] as const
 
 export const Route = createFileRoute('/routes')({
+  head: () => ({ meta: [{ title: 'Routes | Tempo API Admin' }] }),
   validateSearch: Routes.schema.Search,
   component: PageComponent,
 })
@@ -958,7 +960,20 @@ declare namespace StatusBadge {
 
 function TransferDetail(options: DetailProps) {
   const query = useQuery(Routes.getTransfer.options(options.id))
+  const retryTransfer = Routes.retryTransfer.useMutation()
   const record = query.data
+
+  function retry() {
+    if (!record) return
+    if (
+      !confirm(
+        `Retry ${record.id}? Reconciliation re-checks delivery on its next sweep and may send a destination subsidy.`,
+      )
+    )
+      return
+    retryTransfer.mutate({ id: record.id, version: record.version })
+  }
+
   return (
     <DetailDrawer
       error={query.error}
@@ -970,6 +985,18 @@ function TransferDetail(options: DetailProps) {
         <>
           <DetailHeader id={record.id} status={record.status} />
           {record.statusReason ? <Reason reason={record.statusReason.message} /> : null}
+          {record.status === 'action-required' ? (
+            <div className="flex flex-col items-start gap-2">
+              <Button loading={retryTransfer.isPending} onClick={retry} type="button">
+                Retry transfer
+              </Button>
+              {retryTransfer.error ? (
+                <p className="text-copy-13 text-negative" role="alert">
+                  {retryTransfer.error.message}
+                </p>
+              ) : null}
+            </div>
+          ) : null}
           <DetailSection title="Route">
             <Detail label="Provider">{record.provider.name}</Detail>
             <Detail label="Environment">{label(record.environment)}</Detail>
@@ -1034,12 +1061,18 @@ function TransferDetail(options: DetailProps) {
             </Detail>
           </DetailSection>
           <TransactionList
+            layerZeroTransactionHash={
+              record.provider.id === 'stargate' ? record.sourceTransactionHashes?.[0] : undefined
+            }
             transactions={record.transactions.map(({ chainId, role, transactionRef }) => ({
               chainId,
               roles: [role],
               transactionRef,
             }))}
           />
+          {record.provider.id === 'relay' ? (
+            <RelayTransactions requestIds={record.providerRequestIds} />
+          ) : null}
           <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">
@@ -1173,6 +1206,9 @@ function DepositDetail(options: DetailProps) {
             View deposit address
           </button>
           <TransactionList transactions={depositTransactions(record)} />
+          {record.provider.id === 'relay' ? (
+            <RelayTransactions requestIds={record.providerRequestIds} />
+          ) : null}
         </>
       ) : null}
     </DetailDrawer>
@@ -1384,6 +1420,35 @@ declare namespace Reason {
   type Props = { reason: string }
 }
 
+function RelayTransactions(options: RelayTransactions.Props) {
+  if (!options.requestIds.length) return null
+  return (
+    <section className="flex flex-col gap-3">
+      <h3 className="text-heading-16 text-foreground">Relay transactions</h3>
+      <ul className="flex flex-col gap-2">
+        {options.requestIds.map((id) => (
+          <li key={id}>
+            <a
+              className="flex w-fit items-center gap-1.5 font-mono text-label-12 text-foreground-secondary hover:text-foreground"
+              href={`https://relay.link/transaction/${encodeURIComponent(id)}`}
+              rel="noreferrer"
+              target="_blank"
+              title={id}
+            >
+              {truncate(id)}
+              <ExternalLink aria-hidden="true" className="size-3 shrink-0" />
+            </a>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}
+
+declare namespace RelayTransactions {
+  type Props = { requestIds: readonly string[] }
+}
+
 function TransactionList(options: TransactionList.Props) {
   return (
     <section className="flex flex-col gap-3">
@@ -1398,7 +1463,22 @@ function TransactionList(options: TransactionList.Props) {
               <span className="text-copy-13 text-foreground-secondary">
                 {transaction.roles.map(label).join(', ')}
               </span>
-              <ExplorerLink chainId={transaction.chainId} value={transaction.transactionRef} />
+              <div className="flex min-w-0 flex-col items-end gap-2">
+                <ExplorerLink chainId={transaction.chainId} value={transaction.transactionRef} />
+                {transaction.roles.includes('source') &&
+                transaction.transactionRef.toLowerCase() ===
+                  options.layerZeroTransactionHash?.toLowerCase() ? (
+                  <a
+                    className="flex items-center gap-1.5 text-label-12 text-foreground-secondary hover:text-foreground"
+                    href={`https://layerzeroscan.com/tx/${transaction.transactionRef}`}
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    LayerZero Scan
+                    <ExternalLink aria-hidden="true" className="size-3 shrink-0" />
+                  </a>
+                ) : null}
+              </div>
             </li>
           ))}
         </ul>
@@ -1410,7 +1490,10 @@ function TransactionList(options: TransactionList.Props) {
 }
 
 declare namespace TransactionList {
-  type Props = { transactions: readonly Transaction[] }
+  type Props = {
+    layerZeroTransactionHash?: string | undefined
+    transactions: readonly Transaction[]
+  }
   type Transaction = {
     chainId: string
     roles: readonly ('destination' | 'provider' | 'refund' | 'source' | 'subsidizer')[]

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

@@ -9,6 +9,7 @@ import * as Routes from '../lib/routes.js'
 
 /** Route showing the published route support matrix. */
 export const Route = createFileRoute('/routes_/support')({
+  head: () => ({ meta: [{ title: 'Route Support | Tempo API Admin' }] }),
   loader: ({ context }) => context.queryClient.ensureQueryData(Routes.support.options()),
   component: Page,
 })
@@ -19,7 +20,7 @@ function Page() {
   return (
     <core_Page.Page
       title="Route Support"
-      description="Published catalog support for quotes, deposit addresses, wallet transfers, and conditional subsidies."
+      description="Published capabilities for routes requested by partners."
       action={
         <Button render={<Link to="/routes" />}>
           <ArrowLeft className="size-4" />
@@ -29,9 +30,7 @@ function Page() {
     >
       <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-label-12 text-foreground-secondary">
         <span>Published {formatDate(routes.data.updatedAt)}</span>
-        <span>
-          Subsidies also require organization policy, billing, amount, and inventory checks.
-        </span>
+        <span>Subsidies require organization policy, billing, amount, and inventory checks.</span>
       </div>
       <Matrix routes={routes.data.data} />
     </core_Page.Page>
@@ -96,7 +95,7 @@ function Matrix(options: Matrix.Props) {
                   <Header>Quotes</Header>
                   <Header>Deposit addresses</Header>
                   <Header>Wallet transfers</Header>
-                  <Header>Subsidies</Header>
+                  <Header>Subsidy</Header>
                 </tr>
               </thead>
               <tbody className="divide-y divide-border">
@@ -212,23 +211,8 @@ declare namespace WalletTransfers {
 }
 
 function Subsidies(options: Subsidies.Props) {
-  const supported = [
-    ...(options.subsidies.depositAddress ? ['deposit address'] : []),
-    ...(options.subsidies.walletTransfer ? ['wallet transfer'] : []),
-  ]
-  return (
-    <td className="px-4 py-3">
-      {supported.length ? (
-        <span className="flex flex-wrap gap-1.5">
-          {supported.map((value) => (
-            <Tag key={value}>{value}</Tag>
-          ))}
-        </span>
-      ) : (
-        <Empty />
-      )}
-    </td>
-  )
+  const supported = options.subsidies.depositAddress || options.subsidies.walletTransfer
+  return <td className="px-4 py-3 text-copy-14">{supported ? 'Yes' : '—'}</td>
 }
 
 declare namespace Subsidies {

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

@@ -40,6 +40,7 @@ const explorers: Record<string, Explorer> = {
 
 /** Admin subsidy activity across the managed fee payer and Routes. */
 export const Route = createFileRoute('/subsidies')({
+  head: () => ({ meta: [{ title: 'Subsidies | Tempo API Admin' }] }),
   validateSearch: Subsidies.schema.Search,
   component: PageComponent,
 })

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

@@ -18,11 +18,12 @@ type ChainId = typeof mainnet.id | typeof testnet.id
 const defaultChain: ChainId = mainnet.id
 
 export const Route = createFileRoute('/verified-tokens')({
+  head: () => ({ meta: [{ title: 'Verified Tokens | Tempo API Admin' }] }),
   validateSearch: VerifiedTokens.search,
   loader: ({ context }) =>
     Promise.all([
       context.queryClient.prefetchQuery(VerifiedTokens.get.options({ chainId: defaultChain })),
-      context.queryClient.prefetchQuery(VerifiedTokens.requests.list.options()),
+      context.queryClient.prefetchInfiniteQuery(VerifiedTokens.requests.list.options()),
     ]),
   component: RouteComponent,
 })
@@ -47,7 +48,10 @@ function RouteComponent() {
   const tokens = VerifiedTokens.get.useQuery({ chainId: chain })
   const requests = VerifiedTokens.requests.list.useQuery()
   const create = VerifiedTokens.create.useMutation()
-  const pendingCount = requests.data?.data.length ?? 0
+  const pending =
+    requests.data?.pages.flatMap((page: VerifiedTokens.requests.Data) => page.data) ?? []
+  const pendingCount = pending.length
+  const pendingLabel = requests.hasNextPage ? `${pendingCount}+` : String(pendingCount)
 
   return (
     <Dialog.Root onOpenChange={setOpen} open={open}>
@@ -75,7 +79,7 @@ function RouteComponent() {
           onChange={(id) => void navigate({ search: id === 'verified' ? {} : { tab: id } })}
           tabs={[
             { id: 'verified', label: 'Verified' },
-            { id: 'pending', label: pendingCount > 0 ? `Pending (${pendingCount})` : 'Pending' },
+            { id: 'pending', label: pendingCount > 0 ? `Pending (${pendingLabel})` : 'Pending' },
           ]}
         />
         {tab === 'verified' ? (
@@ -87,9 +91,13 @@ function RouteComponent() {
           />
         ) : (
           <RequestQueue
-            error={requests.error}
+            error={requests.isLoadingError ? requests.error : null}
+            hasNextPage={requests.hasNextPage}
+            loadMoreError={requests.isFetchNextPageError ? requests.error : null}
             loading={requests.isPending}
-            requests={requests.data?.data ?? []}
+            loadingMore={requests.isFetchingNextPage}
+            onLoadMore={() => requests.fetchNextPage()}
+            requests={pending}
           />
         )}
         <Dialog.Popup>
@@ -115,11 +123,7 @@ function chainLabel(chainId: number) {
 }
 
 /** Pending verification requests, oldest first, reviewed in bulk via selection. */
-function RequestQueue(props: {
-  error: Error | null
-  loading: boolean
-  requests: readonly VerifiedTokens.requests.VerifiedTokenRequest[]
-}) {
+function RequestQueue(props: RequestQueue.Props) {
   const approve = VerifiedTokens.requests.approve.useMutation()
   const deny = VerifiedTokens.requests.deny.useMutation()
   const [selected, setSelected] = useState<ReadonlySet<string>>(new Set())
@@ -197,21 +201,62 @@ function RequestQueue(props: {
       ) : props.requests.length === 0 ? (
         <Notice>No pending requests.</Notice>
       ) : (
-        <ul className="divide-y divide-border">
-          {props.requests.map((request) => (
-            <RequestRow
-              key={request.id}
-              onToggle={() => toggle(request.id)}
-              request={request}
-              selected={selected.has(request.id)}
-            />
-          ))}
-        </ul>
+        <div className="flex flex-col gap-4 pb-4">
+          <ul className="divide-y divide-border">
+            {props.requests.map((request) => (
+              <RequestRow
+                key={request.id}
+                onToggle={() => toggle(request.id)}
+                request={request}
+                selected={selected.has(request.id)}
+              />
+            ))}
+          </ul>
+          {props.loadMoreError ? (
+            <div
+              className="flex items-center justify-center gap-3 text-copy-14 text-negative"
+              role="alert"
+            >
+              <span>{props.loadMoreError.message}</span>
+              <Button loading={props.loadingMore} onClick={() => void props.onLoadMore()}>
+                Retry
+              </Button>
+            </div>
+          ) : props.hasNextPage ? (
+            <Button
+              className="self-center"
+              loading={props.loadingMore}
+              onClick={() => void props.onLoadMore()}
+            >
+              Load more
+            </Button>
+          ) : null}
+        </div>
       )}
     </Card>
   )
 }
 
+declare namespace RequestQueue {
+  /** Pending queue display state and pagination controls. */
+  type Props = {
+    /** Queue load error. */
+    error: Error | null
+    /** Whether another queue page is available. */
+    hasNextPage: boolean
+    /** Whether the first page is loading. */
+    loading: boolean
+    /** Error returned while loading another page. */
+    loadMoreError: Error | null
+    /** Whether another page is loading. */
+    loadingMore: boolean
+    /** Loads the next queue page. */
+    onLoadMore: () => Promise<unknown>
+    /** Loaded requests in review order. */
+    requests: readonly VerifiedTokens.requests.VerifiedTokenRequest[]
+  }
+}
+
 /** Confirmation label: one token by name, several by count. */
 function describeSelection(requests: readonly VerifiedTokens.requests.VerifiedTokenRequest[]) {
   const [first] = requests