feat(slots): block + blob download modal on the slot detail page (#437)

* feat(slots): add block/blob download modal

Add a Download modal to the slot detail page with a Block tab (JSON/SSZ) and a
Blobs tab (one row per blob, download by versioned hash). Downloads go through
the lab-backend download proxy via a same-origin fetch+save hook that surfaces
archive 404s inline. Blob list currently sources versioned hashes from
dim_block_blob_submitter; to be repointed at fct_block_blob_head (head-timely)
once that CBT table is deployed.

* chore(api): regenerate from prod cbt-api (adds fct_block_blob_head)

* feat(slots): source download-modal blobs from fct_block_blob_head

The Blobs tab now self-fetches the slot's versioned hashes from the head table
fct_block_blob_head (real-time) instead of dim_block_blob_submitter (which lags
the chain head and was empty for recent slots). Queried by slot_start_date_time
since the cbt-api slot projection filter does not match.

Author: samcm

src/api/@tanstack/react-query.gen.ts

@@ -13,10 +13,6 @@ import type { ClientOptions as ClientOptions2 } from './types.gen';
  * `setConfig()`. This is useful for example if you're using Next.js
  * to ensure your client always has the correct values.
  */
-export type CreateClientConfig<T extends ClientOptions = ClientOptions2> = (
-  override?: Config<ClientOptions & T>
-) => Config<Required<ClientOptions> & T>;
+export type CreateClientConfig<T extends ClientOptions = ClientOptions2> = (override?: Config<ClientOptions & T>) => Config<Required<ClientOptions> & T>;
 
-export const client = createClient(
-  createClientConfig(createConfig<ClientOptions2>({ baseUrl: 'http://localhost:8091' }))
-);
+export const client = createClient(createClientConfig(createConfig<ClientOptions2>({ baseUrl: 'https://cbt-api-mainnet.analytics.production.platform.ethpandaops.io' })));

src/api/client.gen.ts

@@ -65,7 +65,7 @@ export const createClient = (config: Config = {}): Client => {
     return { opts, url };
   };
 
-  const request: Client['request'] = async options => {
+  const request: Client['request'] = async (options) => {
     // @ts-expect-error
     const { opts, url } = await beforeRequest(options);
     const requestInit: ReqInit = {
@@ -128,7 +128,9 @@ export const createClient = (config: Config = {}): Client => {
 
     if (response.ok) {
       const parseAs =
-        (opts.parseAs === 'auto' ? getParseAs(response.headers.get('Content-Type')) : opts.parseAs) ?? 'json';
+        (opts.parseAs === 'auto'
+          ? getParseAs(response.headers.get('Content-Type'))
+          : opts.parseAs) ?? 'json';
 
       if (response.status === 204 || response.headers.get('Content-Length') === '0') {
         let emptyData: any;
@@ -232,7 +234,8 @@ export const createClient = (config: Config = {}): Client => {
         };
   };
 
-  const makeMethodFn = (method: Uppercase<HttpMethod>) => (options: RequestOptions) => request({ ...options, method });
+  const makeMethodFn = (method: Uppercase<HttpMethod>) => (options: RequestOptions) =>
+    request({ ...options, method });
 
   const makeSseFn = (method: Uppercase<HttpMethod>) => async (options: RequestOptions) => {
     const { opts, url } = await beforeRequest(options);

src/api/client/client.gen.ts

@@ -2,7 +2,11 @@
 
 export type { Auth } from '../core/auth.gen';
 export type { QuerySerializerOptions } from '../core/bodySerializer.gen';
-export { formDataBodySerializer, jsonBodySerializer, urlSearchParamsBodySerializer } from '../core/bodySerializer.gen';
+export {
+  formDataBodySerializer,
+  jsonBodySerializer,
+  urlSearchParamsBodySerializer,
+} from '../core/bodySerializer.gen';
 export { buildClientParams } from '../core/params.gen';
 export { serializeQueryKeyValue } from '../core/queryKeySerializer.gen';
 export { createClient } from './client.gen';

src/api/client/index.ts

@@ -1,7 +1,10 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
 import type { Auth } from '../core/auth.gen';
-import type { ServerSentEventsOptions, ServerSentEventsResult } from '../core/serverSentEvents.gen';
+import type {
+  ServerSentEventsOptions,
+  ServerSentEventsResult,
+} from '../core/serverSentEvents.gen';
 import type { Client as CoreClient, Config as CoreConfig } from '../core/types.gen';
 import type { Middleware } from './utils.gen';
 
@@ -63,7 +66,11 @@ export interface RequestOptions<
     }>,
     Pick<
       ServerSentEventsOptions<TData>,
-      'onSseError' | 'onSseEvent' | 'sseDefaultRetryDelay' | 'sseMaxRetryAttempts' | 'sseMaxRetryDelay'
+      | 'onSseError'
+      | 'onSseEvent'
+      | 'sseDefaultRetryDelay'
+      | 'sseMaxRetryAttempts'
+      | 'sseMaxRetryDelay'
     > {
   /**
    * Any body that you want to add to your request.
@@ -135,7 +142,7 @@ type MethodFn = <
   ThrowOnError extends boolean = false,
   TResponseStyle extends ResponseStyle = 'fields',
 >(
-  options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, 'method'>
+  options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, 'method'>,
 ) => RequestResult<TData, TError, ThrowOnError, TResponseStyle>;
 
 type SseFn = <
@@ -144,7 +151,7 @@ type SseFn = <
   ThrowOnError extends boolean = false,
   TResponseStyle extends ResponseStyle = 'fields',
 >(
-  options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, 'method'>
+  options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, 'method'>,
 ) => Promise<ServerSentEventsResult<TData, TError>>;
 
 type RequestFn = <
@@ -154,7 +161,7 @@ type RequestFn = <
   TResponseStyle extends ResponseStyle = 'fields',
 >(
   options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, 'method'> &
-    Pick<Required<RequestOptions<TData, TResponseStyle, ThrowOnError>>, 'method'>
+    Pick<Required<RequestOptions<TData, TResponseStyle, ThrowOnError>>, 'method'>,
 ) => RequestResult<TData, TError, ThrowOnError, TResponseStyle>;
 
 type BuildUrlFn = <
@@ -165,7 +172,7 @@ type BuildUrlFn = <
     url: string;
   },
 >(
-  options: TData & Options<TData>
+  options: TData & Options<TData>,
 ) => string;
 
 export type Client = CoreClient<RequestFn, Config, MethodFn, BuildUrlFn, SseFn> & {
@@ -181,7 +188,7 @@ export type Client = CoreClient<RequestFn, Config, MethodFn, BuildUrlFn, SseFn>
  * to ensure your client always has the correct values.
  */
 export type CreateClientConfig<T extends ClientOptions = ClientOptions> = (
-  override?: Config<ClientOptions & T>
+  override?: Config<ClientOptions & T>,
 ) => Config<Required<ClientOptions> & T>;
 
 export interface TDataShape {
@@ -199,5 +206,8 @@ export type Options<
   ThrowOnError extends boolean = boolean,
   TResponse = unknown,
   TResponseStyle extends ResponseStyle = 'fields',
-> = OmitKeys<RequestOptions<TResponse, TResponseStyle, ThrowOnError>, 'body' | 'path' | 'query' | 'url'> &
+> = OmitKeys<
+  RequestOptions<TResponse, TResponseStyle, ThrowOnError>,
+  'body' | 'path' | 'query' | 'url'
+> &
   ([TData] extends [never] ? unknown : Omit<TData, 'url'>);

src/api/client/types.gen.ts

@@ -3,11 +3,18 @@
 import { getAuthToken } from '../core/auth.gen';
 import type { QuerySerializerOptions } from '../core/bodySerializer.gen';
 import { jsonBodySerializer } from '../core/bodySerializer.gen';
-import { serializeArrayParam, serializeObjectParam, serializePrimitiveParam } from '../core/pathSerializer.gen';
+import {
+  serializeArrayParam,
+  serializeObjectParam,
+  serializePrimitiveParam,
+} from '../core/pathSerializer.gen';
 import { getUrl } from '../core/utils.gen';
 import type { Client, ClientOptions, Config, RequestOptions } from './types.gen';
 
-export const createQuerySerializer = <T = unknown>({ parameters = {}, ...args }: QuerySerializerOptions = {}) => {
+export const createQuerySerializer = <T = unknown>({
+  parameters = {},
+  ...args
+}: QuerySerializerOptions = {}) => {
   const querySerializer = (queryParams: T) => {
     const search: string[] = [];
     if (queryParams && typeof queryParams === 'object') {
@@ -79,7 +86,9 @@ export const getParseAs = (contentType: string | null): Exclude<Config['parseAs'
     return 'formData';
   }
 
-  if (['application/', 'audio/', 'image/', 'video/'].some(type => cleanContent.startsWith(type))) {
+  if (
+    ['application/', 'audio/', 'image/', 'video/'].some((type) => cleanContent.startsWith(type))
+  ) {
     return 'blob';
   }
 
@@ -94,12 +103,16 @@ const checkForExistence = (
   options: Pick<RequestOptions, 'auth' | 'query'> & {
     headers: Headers;
   },
-  name?: string
+  name?: string,
 ): boolean => {
   if (!name) {
     return false;
   }
-  if (options.headers.has(name) || options.query?.[name] || options.headers.get('Cookie')?.includes(`${name}=`)) {
+  if (
+    options.headers.has(name) ||
+    options.query?.[name] ||
+    options.headers.get('Cookie')?.includes(`${name}=`)
+  ) {
     return true;
   }
   return false;
@@ -143,7 +156,7 @@ export const setAuthParams = async ({
   }
 };
 
-export const buildUrl: Client['buildUrl'] = options =>
+export const buildUrl: Client['buildUrl'] = (options) =>
   getUrl({
     baseUrl: options.baseUrl as string,
     path: options.path,
@@ -172,7 +185,9 @@ const headersEntries = (headers: Headers): Array<[string, string]> => {
   return entries;
 };
 
-export const mergeHeaders = (...headers: Array<Required<Config>['headers'] | undefined>): Headers => {
+export const mergeHeaders = (
+  ...headers: Array<Required<Config>['headers'] | undefined>
+): Headers => {
   const mergedHeaders = new Headers();
   for (const header of headers) {
     if (!header) {
@@ -191,7 +206,10 @@ export const mergeHeaders = (...headers: Array<Required<Config>['headers'] | und
       } else if (value !== undefined) {
         // assume object headers are meant to be JSON stringified, i.e. their
         // content value in OpenAPI specification is 'application/json'
-        mergedHeaders.set(key, typeof value === 'object' ? JSON.stringify(value) : (value as string));
+        mergedHeaders.set(
+          key,
+          typeof value === 'object' ? JSON.stringify(value) : (value as string),
+        );
       }
     }
   }
@@ -202,12 +220,16 @@ type ErrInterceptor<Err, Res, Req, Options> = (
   error: Err,
   response: Res,
   request: Req,
-  options: Options
+  options: Options,
 ) => Err | Promise<Err>;
 
 type ReqInterceptor<Req, Options> = (request: Req, options: Options) => Req | Promise<Req>;
 
-type ResInterceptor<Res, Req, Options> = (response: Res, request: Req, options: Options) => Res | Promise<Res>;
+type ResInterceptor<Res, Req, Options> = (
+  response: Res,
+  request: Req,
+  options: Options,
+) => Res | Promise<Res>;
 
 class Interceptors<Interceptor> {
   fns: Array<Interceptor | null> = [];
@@ -256,7 +278,12 @@ export interface Middleware<Req, Res, Err, Options> {
   response: Interceptors<ResInterceptor<Res, Req, Options>>;
 }
 
-export const createInterceptors = <Req, Res, Err, Options>(): Middleware<Req, Res, Err, Options> => ({
+export const createInterceptors = <Req, Res, Err, Options>(): Middleware<
+  Req,
+  Res,
+  Err,
+  Options
+> => ({
   error: new Interceptors<ErrInterceptor<Err, Res, Req, Options>>(),
   request: new Interceptors<ReqInterceptor<Req, Options>>(),
   response: new Interceptors<ResInterceptor<Res, Req, Options>>(),
@@ -279,7 +306,7 @@ const defaultHeaders = {
 };
 
 export const createConfig = <T extends ClientOptions = ClientOptions>(
-  override: Config<Omit<ClientOptions, keyof T> & T> = {}
+  override: Config<Omit<ClientOptions, keyof T> & T> = {},
 ): Config<Omit<ClientOptions, keyof T> & T> => ({
   ...jsonBodySerializer,
   headers: defaultHeaders,

src/api/client/utils.gen.ts

@@ -21,7 +21,7 @@ export interface Auth {
 
 export const getAuthToken = async (
   auth: Auth,
-  callback: ((auth: Auth) => Promise<AuthToken> | AuthToken) | AuthToken
+  callback: ((auth: Auth) => Promise<AuthToken> | AuthToken) | AuthToken,
 ): Promise<string | undefined> => {
   const token = typeof callback === 'function' ? await callback(auth) : callback;
 

src/api/core/auth.gen.ts

@@ -39,15 +39,17 @@ const serializeUrlSearchParamsPair = (data: URLSearchParams, key: string, value:
 };
 
 export const formDataBodySerializer = {
-  bodySerializer: <T extends Record<string, any> | Array<Record<string, any>>>(body: T): FormData => {
+  bodySerializer: <T extends Record<string, any> | Array<Record<string, any>>>(
+    body: T,
+  ): FormData => {
     const data = new FormData();
 
     Object.entries(body).forEach(([key, value]) => {
       if (value === undefined || value === null) {
         return;
       }
       if (Array.isArray(value)) {
-        value.forEach(v => serializeFormDataPair(data, key, v));
+        value.forEach((v) => serializeFormDataPair(data, key, v));
       } else {
         serializeFormDataPair(data, key, value);
       }
@@ -71,7 +73,7 @@ export const urlSearchParamsBodySerializer = {
         return;
       }
       if (Array.isArray(value)) {
-        value.forEach(v => serializeUrlSearchParamsPair(data, key, v));
+        value.forEach((v) => serializeUrlSearchParamsPair(data, key, v));
       } else {
         serializeUrlSearchParamsPair(data, key, value);
       }

src/api/core/bodySerializer.gen.ts

@@ -74,9 +74,9 @@ export const serializeArrayParam = ({
   value: unknown[];
 }) => {
   if (!explode) {
-    const joinedValues = (allowReserved ? value : value.map(v => encodeURIComponent(v as string))).join(
-      separatorArrayNoExplode(style)
-    );
+    const joinedValues = (
+      allowReserved ? value : value.map((v) => encodeURIComponent(v as string))
+    ).join(separatorArrayNoExplode(style));
     switch (style) {
       case 'label':
         return `.${joinedValues}`;
@@ -91,7 +91,7 @@ export const serializeArrayParam = ({
 
   const separator = separatorArrayExplode(style);
   const joinedValues = value
-    .map(v => {
+    .map((v) => {
       if (style === 'label' || style === 'simple') {
         return allowReserved ? v : encodeURIComponent(v as string);
       }
@@ -106,14 +106,18 @@ export const serializeArrayParam = ({
   return style === 'label' || style === 'matrix' ? separator + joinedValues : joinedValues;
 };
 
-export const serializePrimitiveParam = ({ allowReserved, name, value }: SerializePrimitiveParam) => {
+export const serializePrimitiveParam = ({
+  allowReserved,
+  name,
+  value,
+}: SerializePrimitiveParam) => {
   if (value === undefined || value === null) {
     return '';
   }
 
   if (typeof value === 'object') {
     throw new Error(
-      'Deeply-nested arrays/objects aren’t supported. Provide your own `querySerializer()` to handle these.'
+      'Deeply-nested arrays/objects aren’t supported. Provide your own `querySerializer()` to handle these.',
     );
   }
 
@@ -160,7 +164,7 @@ export const serializeObjectParam = ({
         allowReserved,
         name: style === 'deepObject' ? `${name}[${key}]` : key,
         value: v as string,
-      })
+      }),
     )
     .join(separator);
   return style === 'label' || style === 'matrix' ? separator + joinedValues : joinedValues;

src/api/core/pathSerializer.gen.ts

@@ -3,7 +3,13 @@
 /**
  * JSON-friendly union that mirrors what Pinia Colada can hash.
  */
-export type JsonValue = null | string | number | boolean | JsonValue[] | { [key: string]: JsonValue };
+export type JsonValue =
+  | null
+  | string
+  | number
+  | boolean
+  | JsonValue[]
+  | { [key: string]: JsonValue };
 
 /**
  * Replacer that converts non-JSON values (bigint, Date, etc.) to safe substitutes.