+
-
+
diff --git a/web/src/ErrorBoundary.tsx b/web/src/ErrorBoundary.tsx
index eb8447f..8788520 100644
--- a/web/src/ErrorBoundary.tsx
+++ b/web/src/ErrorBoundary.tsx
@@ -10,6 +10,17 @@ interface State {
hasError: boolean;
}
+export function ErrorBoundaryFallback() {
+ return (
+ {
public state: State = {
hasError: false,
@@ -26,12 +37,7 @@ class ErrorBoundary extends Component {
public render() {
if (this.state.hasError) {
- return (
- ;
+
+export const NotFoundPage: Story = {
+ render: () =>
+ 
+
+ );
+}
+
class ErrorBoundary extends Component+ Uhh... Something went wrong +
+
-
-
- );
+ return Uhh... Something went wrong
-
-
- = [
+ Pick & {
+ _id: string;
+ _infinite?: boolean;
+ tags?: ReadonlyArray;
+ },
+];
+
+const createQueryKey = (
+ id: string,
+ options?: TOptions,
+ infinite?: boolean,
+ tags?: ReadonlyArray
+): [QueryKey[0]] => {
+ const params: QueryKey[0] = {
+ _id: id,
+ baseUrl: options?.baseUrl || (options?.client ?? client).getConfig().baseUrl,
+ } as QueryKey[0];
+ if (infinite) {
+ params._infinite = infinite;
+ }
+ if (tags) {
+ params.tags = tags;
+ }
+ if (options?.body) {
+ params.body = options.body;
+ }
+ if (options?.headers) {
+ params.headers = options.headers;
+ }
+ if (options?.path) {
+ params.path = options.path;
+ }
+ if (options?.query) {
+ params.query = options.query;
+ }
+ return [params];
+};
+
+export const getEthereumNowQueryKey = (options?: Options) =>
+ createQueryKey('getEthereumNow', options);
+
+/**
+ * Get the current wall-clock slot and epoch
+ */
+export const getEthereumNowOptions = (options?: Options) =>
+ queryOptions<
+ GetEthereumNowResponse,
+ GetEthereumNowError,
+ GetEthereumNowResponse,
+ ReturnType
+ >({
+ queryFn: async ({ queryKey, signal }) => {
+ const { data } = await getEthereumNow({
+ ...options,
+ ...queryKey[0],
+ signal,
+ throwOnError: true,
+ });
+ return data;
+ },
+ queryKey: getEthereumNowQueryKey(options),
+ });
+
+export const getEthereumSpecQueryKey = (options?: Options) =>
+ createQueryKey('getEthereumSpec', options);
+
+/**
+ * Get the Ethereum network name and spec
+ */
+export const getEthereumSpecOptions = (options?: Options) =>
+ queryOptions<
+ GetEthereumSpecResponse,
+ GetEthereumSpecError,
+ GetEthereumSpecResponse,
+ ReturnType
+ >({
+ queryFn: async ({ queryKey, signal }) => {
+ const { data } = await getEthereumSpec({
+ ...options,
+ ...queryKey[0],
+ signal,
+ throwOnError: true,
+ });
+ return data;
+ },
+ queryKey: getEthereumSpecQueryKey(options),
+ });
+
+export const getFrameQueryKey = (options: Options) => createQueryKey('getFrame', options);
+
+/**
+ * Get a single fork-choice frame by ID
+ */
+export const getFrameOptions = (options: Options) =>
+ queryOptions>({
+ queryFn: async ({ queryKey, signal }) => {
+ const { data } = await getFrame({
+ ...options,
+ ...queryKey[0],
+ signal,
+ throwOnError: true,
+ });
+ return data;
+ },
+ queryKey: getFrameQueryKey(options),
+ });
+
+/**
+ * List fork-choice frame metadata
+ */
+export const listMetadataMutation = (
+ options?: Partial>
+): UseMutationOptions> => {
+ const mutationOptions: UseMutationOptions> = {
+ mutationFn: async fnOptions => {
+ const { data } = await listMetadata({
+ ...options,
+ ...fnOptions,
+ throwOnError: true,
+ });
+ return data;
+ },
+ };
+ return mutationOptions;
+};
+
+/**
+ * List distinct nodes across stored frames
+ */
+export const listMetadataNodesMutation = (
+ options?: Partial>
+): UseMutationOptions> => {
+ const mutationOptions: UseMutationOptions<
+ ListMetadataNodesResponse,
+ ListMetadataNodesError,
+ Options
+ > = {
+ mutationFn: async fnOptions => {
+ const { data } = await listMetadataNodes({
+ ...options,
+ ...fnOptions,
+ throwOnError: true,
+ });
+ return data;
+ },
+ };
+ return mutationOptions;
+};
+
+/**
+ * List distinct slots across stored frames
+ */
+export const listMetadataSlotsMutation = (
+ options?: Partial>
+): UseMutationOptions> => {
+ const mutationOptions: UseMutationOptions<
+ ListMetadataSlotsResponse,
+ ListMetadataSlotsError,
+ Options
+ > = {
+ mutationFn: async fnOptions => {
+ const { data } = await listMetadataSlots({
+ ...options,
+ ...fnOptions,
+ throwOnError: true,
+ });
+ return data;
+ },
+ };
+ return mutationOptions;
+};
+
+/**
+ * List distinct epochs across stored frames
+ */
+export const listMetadataEpochsMutation = (
+ options?: Partial>
+): UseMutationOptions> => {
+ const mutationOptions: UseMutationOptions<
+ ListMetadataEpochsResponse,
+ ListMetadataEpochsError,
+ Options
+ > = {
+ mutationFn: async fnOptions => {
+ const { data } = await listMetadataEpochs({
+ ...options,
+ ...fnOptions,
+ throwOnError: true,
+ });
+ return data;
+ },
+ };
+ return mutationOptions;
+};
+
+/**
+ * List distinct labels across stored frames
+ */
+export const listMetadataLabelsMutation = (
+ options?: Partial>
+): UseMutationOptions> => {
+ const mutationOptions: UseMutationOptions<
+ ListMetadataLabelsResponse,
+ ListMetadataLabelsError,
+ Options
+ > = {
+ mutationFn: async fnOptions => {
+ const { data } = await listMetadataLabels({
+ ...options,
+ ...fnOptions,
+ throwOnError: true,
+ });
+ return data;
+ },
+ };
+ return mutationOptions;
+};
diff --git a/web/src/api/client.gen.ts b/web/src/api/client.gen.ts
new file mode 100644
index 0000000..7e3dfef
--- /dev/null
+++ b/web/src/api/client.gen.ts
@@ -0,0 +1,22 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import { createClientConfig } from '../utils/api-config.ts';
+
+import { type Client, type ClientOptions, type Config, createClient, createConfig } from './client';
+import type { ClientOptions as ClientOptions2 } from './types.gen';
+
+/**
+ * The `createClientConfig()` function will be called on client initialization
+ * and the returned object will become the client's initial configuration.
+ *
+ * You may want to initialize your client this way instead of calling
+ * `setConfig()`. This is useful for example if you're using Next.js
+ * to ensure your client always has the correct values.
+ */
+export type CreateClientConfig = (
+ override?: Config
+) => Config & T>;
+
+export const client: Client = createClient(
+ createClientConfig(createConfig({ baseUrl: 'https://forky.mainnet.ethpandaops.io' }))
+);
diff --git a/web/src/api/client/client.gen.ts b/web/src/api/client/client.gen.ts
new file mode 100644
index 0000000..86e62d0
--- /dev/null
+++ b/web/src/api/client/client.gen.ts
@@ -0,0 +1,273 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import { createSseClient } from '../core/serverSentEvents.gen';
+import type { HttpMethod } from '../core/types.gen';
+import { getValidRequestBody } from '../core/utils.gen';
+import type { Client, Config, RequestOptions, ResolvedRequestOptions } from './types.gen';
+import {
+ buildUrl,
+ createConfig,
+ createInterceptors,
+ getParseAs,
+ mergeConfigs,
+ mergeHeaders,
+ setAuthParams,
+} from './utils.gen';
+
+type ReqInit = Omit & {
+ body?: any;
+ headers: ReturnType;
+};
+
+export const createClient = (config: Config = {}): Client => {
+ let _config = mergeConfigs(createConfig(), config);
+
+ const getConfig = (): Config => ({ ..._config });
+
+ const setConfig = (config: Config): Config => {
+ _config = mergeConfigs(_config, config);
+ return getConfig();
+ };
+
+ const interceptors = createInterceptors();
+
+ const beforeRequest = async <
+ TData = unknown,
+ TResponseStyle extends 'data' | 'fields' = 'fields',
+ ThrowOnError extends boolean = boolean,
+ Url extends string = string,
+ >(
+ options: RequestOptions
+ ) => {
+ const opts = {
+ ..._config,
+ ...options,
+ fetch: options.fetch ?? _config.fetch ?? globalThis.fetch,
+ headers: mergeHeaders(_config.headers, options.headers),
+ serializedBody: undefined as string | undefined,
+ };
+
+ if (opts.security) {
+ await setAuthParams(opts);
+ }
+
+ if (opts.requestValidator) {
+ await opts.requestValidator(opts);
+ }
+
+ if (opts.body !== undefined && opts.bodySerializer) {
+ opts.serializedBody = opts.bodySerializer(opts.body) as string | undefined;
+ }
+
+ // remove Content-Type header if body is empty to avoid sending invalid requests
+ if (opts.body === undefined || opts.serializedBody === '') {
+ opts.headers.delete('Content-Type');
+ }
+
+ const resolvedOpts = opts as typeof opts & ResolvedRequestOptions;
+ const url = buildUrl(resolvedOpts);
+
+ return { opts: resolvedOpts, url };
+ };
+
+ const request: Client['request'] = async options => {
+ const throwOnError = options.throwOnError ?? _config.throwOnError;
+ const responseStyle = options.responseStyle ?? _config.responseStyle;
+
+ let request: Request | undefined;
+ let response: Response | undefined;
+
+ try {
+ const { opts, url } = await beforeRequest(options);
+ const requestInit: ReqInit = {
+ redirect: 'follow',
+ ...opts,
+ body: getValidRequestBody(opts),
+ };
+
+ request = new Request(url, requestInit);
+
+ for (const fn of interceptors.request.fns) {
+ if (fn) {
+ request = await fn(request, opts);
+ }
+ }
+
+ // fetch must be assigned here, otherwise it would throw the error:
+ // TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation
+ const _fetch = opts.fetch!;
+
+ response = await _fetch(request);
+
+ for (const fn of interceptors.response.fns) {
+ if (fn) {
+ response = await fn(response, request, opts);
+ }
+ }
+
+ const result = {
+ request,
+ response,
+ };
+
+ if (response.ok) {
+ const parseAs =
+ (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;
+ switch (parseAs) {
+ case 'arrayBuffer':
+ case 'blob':
+ case 'text':
+ emptyData = await response[parseAs]();
+ break;
+ case 'formData':
+ emptyData = new FormData();
+ break;
+ case 'stream':
+ emptyData = response.body;
+ break;
+ case 'json':
+ default:
+ emptyData = {};
+ break;
+ }
+ return opts.responseStyle === 'data'
+ ? emptyData
+ : {
+ data: emptyData,
+ ...result,
+ };
+ }
+
+ let data: any;
+ switch (parseAs) {
+ case 'arrayBuffer':
+ case 'blob':
+ case 'formData':
+ case 'text':
+ data = await response[parseAs]();
+ break;
+ case 'json': {
+ // Some servers return 200 with no Content-Length and empty body.
+ // response.json() would throw; read as text and parse if non-empty.
+ const text = await response.text();
+ data = text ? JSON.parse(text) : {};
+ break;
+ }
+ case 'stream':
+ return opts.responseStyle === 'data'
+ ? response.body
+ : {
+ data: response.body,
+ ...result,
+ };
+ }
+
+ if (parseAs === 'json') {
+ if (opts.responseValidator) {
+ await opts.responseValidator(data);
+ }
+
+ if (opts.responseTransformer) {
+ data = await opts.responseTransformer(data);
+ }
+ }
+
+ return opts.responseStyle === 'data'
+ ? data
+ : {
+ data,
+ ...result,
+ };
+ }
+
+ const textError = await response.text();
+ let jsonError: unknown;
+
+ try {
+ jsonError = JSON.parse(textError);
+ } catch {
+ // noop
+ }
+
+ throw jsonError ?? textError;
+ } catch (error) {
+ let finalError = error;
+
+ for (const fn of interceptors.error.fns) {
+ if (fn) {
+ finalError = await fn(finalError, response, request, options as ResolvedRequestOptions);
+ }
+ }
+
+ finalError = finalError || {};
+
+ if (throwOnError) {
+ throw finalError;
+ }
+
+ // TODO: we probably want to return error and improve types
+ return responseStyle === 'data'
+ ? undefined
+ : {
+ error: finalError,
+ request,
+ response,
+ };
+ }
+ };
+
+ const makeMethodFn = (method: Uppercase) => (options: RequestOptions) => request({ ...options, method });
+
+ const makeSseFn = (method: Uppercase) => async (options: RequestOptions) => {
+ const { opts, url } = await beforeRequest(options);
+ return createSseClient({
+ ...opts,
+ body: opts.body as BodyInit | null | undefined,
+ method,
+ onRequest: async (url, init) => {
+ let request = new Request(url, init);
+ for (const fn of interceptors.request.fns) {
+ if (fn) {
+ request = await fn(request, opts);
+ }
+ }
+ return request;
+ },
+ serializedBody: getValidRequestBody(opts) as BodyInit | null | undefined,
+ url,
+ });
+ };
+
+ const _buildUrl: Client['buildUrl'] = options => buildUrl({ ..._config, ...options });
+
+ return {
+ buildUrl: _buildUrl,
+ connect: makeMethodFn('CONNECT'),
+ delete: makeMethodFn('DELETE'),
+ get: makeMethodFn('GET'),
+ getConfig,
+ head: makeMethodFn('HEAD'),
+ interceptors,
+ options: makeMethodFn('OPTIONS'),
+ patch: makeMethodFn('PATCH'),
+ post: makeMethodFn('POST'),
+ put: makeMethodFn('PUT'),
+ request,
+ setConfig,
+ sse: {
+ connect: makeSseFn('CONNECT'),
+ delete: makeSseFn('DELETE'),
+ get: makeSseFn('GET'),
+ head: makeSseFn('HEAD'),
+ options: makeSseFn('OPTIONS'),
+ patch: makeSseFn('PATCH'),
+ post: makeSseFn('POST'),
+ put: makeSseFn('PUT'),
+ trace: makeSseFn('TRACE'),
+ },
+ trace: makeMethodFn('TRACE'),
+ } as Client;
+};
diff --git a/web/src/api/client/index.ts b/web/src/api/client/index.ts
new file mode 100644
index 0000000..3c62a27
--- /dev/null
+++ b/web/src/api/client/index.ts
@@ -0,0 +1,22 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+export type { Auth } from '../core/auth.gen';
+export type { QuerySerializerOptions } 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 type { ServerSentEventsResult } from '../core/serverSentEvents.gen';
+export { createClient } from './client.gen';
+export type {
+ Client,
+ ClientOptions,
+ Config,
+ CreateClientConfig,
+ Options,
+ RequestOptions,
+ RequestResult,
+ ResolvedRequestOptions,
+ ResponseStyle,
+ TDataShape,
+} from './types.gen';
+export { createConfig, mergeHeaders } from './utils.gen';
diff --git a/web/src/api/client/types.gen.ts b/web/src/api/client/types.gen.ts
new file mode 100644
index 0000000..7973dd7
--- /dev/null
+++ b/web/src/api/client/types.gen.ts
@@ -0,0 +1,207 @@
+// 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 { Client as CoreClient, Config as CoreConfig } from '../core/types.gen';
+import type { Middleware } from './utils.gen';
+
+export type ResponseStyle = 'data' | 'fields';
+
+export interface Config
+ extends Omit, CoreConfig {
+ /**
+ * Base URL for all requests made by this client.
+ */
+ baseUrl?: T['baseUrl'];
+ /**
+ * Fetch API implementation. You can use this option to provide a custom
+ * fetch instance.
+ *
+ * @default globalThis.fetch
+ */
+ fetch?: typeof fetch;
+ /**
+ * Please don't use the Fetch client for Next.js applications. The `next`
+ * options won't have any effect.
+ *
+ * Install {@link https://www.npmjs.com/package/@hey-api/client-next `@hey-api/client-next`} instead.
+ */
+ next?: never;
+ /**
+ * Return the response data parsed in a specified format. By default, `auto`
+ * will infer the appropriate method from the `Content-Type` response header.
+ * You can override this behavior with any of the {@link Body} methods.
+ * Select `stream` if you don't want to parse response data at all.
+ *
+ * @default 'auto'
+ */
+ parseAs?: 'arrayBuffer' | 'auto' | 'blob' | 'formData' | 'json' | 'stream' | 'text';
+ /**
+ * Should we return only data or multiple fields (data, error, response, etc.)?
+ *
+ * @default 'fields'
+ */
+ responseStyle?: ResponseStyle;
+ /**
+ * Throw an error instead of returning it in the response?
+ *
+ * @default false
+ */
+ throwOnError?: T['throwOnError'];
+}
+
+export interface RequestOptions<
+ TData = unknown,
+ TResponseStyle extends ResponseStyle = 'fields',
+ ThrowOnError extends boolean = boolean,
+ Url extends string = string,
+>
+ extends
+ Config<{
+ responseStyle: TResponseStyle;
+ throwOnError: ThrowOnError;
+ }>,
+ Pick<
+ ServerSentEventsOptions,
+ 'onRequest' | 'onSseError' | 'onSseEvent' | 'sseDefaultRetryDelay' | 'sseMaxRetryAttempts' | 'sseMaxRetryDelay'
+ > {
+ /**
+ * Any body that you want to add to your request.
+ *
+ * {@link https://developer.mozilla.org/docs/Web/API/fetch#body}
+ */
+ body?: unknown;
+ path?: Record;
+ query?: Record;
+ /**
+ * Security mechanism(s) to use for the request.
+ */
+ security?: ReadonlyArray;
+ url: Url;
+}
+
+export interface ResolvedRequestOptions<
+ TResponseStyle extends ResponseStyle = 'fields',
+ ThrowOnError extends boolean = boolean,
+ Url extends string = string,
+> extends RequestOptions {
+ headers: Headers;
+ serializedBody?: string;
+}
+
+export type RequestResult<
+ TData = unknown,
+ TError = unknown,
+ ThrowOnError extends boolean = boolean,
+ TResponseStyle extends ResponseStyle = 'fields',
+> = ThrowOnError extends true
+ ? Promise<
+ TResponseStyle extends 'data'
+ ? TData extends Record
+ ? TData[keyof TData]
+ : TData
+ : {
+ data: TData extends Record ? TData[keyof TData] : TData;
+ request: Request;
+ response: Response;
+ }
+ >
+ : Promise<
+ TResponseStyle extends 'data'
+ ? (TData extends Record ? TData[keyof TData] : TData) | undefined
+ : (
+ | {
+ data: TData extends Record ? TData[keyof TData] : TData;
+ error: undefined;
+ }
+ | {
+ data: undefined;
+ error: TError extends Record ? TError[keyof TError] : TError;
+ }
+ ) & {
+ /** request may be undefined, because error may be from building the request object itself */
+ request?: Request;
+ /** response may be undefined, because error may be from building the request object itself or from a network error */
+ response?: Response;
+ }
+ >;
+
+export interface ClientOptions {
+ baseUrl?: string;
+ responseStyle?: ResponseStyle;
+ throwOnError?: boolean;
+}
+
+type MethodFn = <
+ TData = unknown,
+ TError = unknown,
+ ThrowOnError extends boolean = false,
+ TResponseStyle extends ResponseStyle = 'fields',
+>(
+ options: Omit, 'method'>
+) => RequestResult;
+
+type SseFn = <
+ TData = unknown,
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ _TError = unknown,
+ ThrowOnError extends boolean = false,
+ TResponseStyle extends ResponseStyle = 'fields',
+>(
+ options: Omit, 'method'>
+) => Promise>;
+
+type RequestFn = <
+ TData = unknown,
+ TError = unknown,
+ ThrowOnError extends boolean = false,
+ TResponseStyle extends ResponseStyle = 'fields',
+>(
+ options: Omit, 'method'> &
+ Pick>, 'method'>
+) => RequestResult;
+
+type BuildUrlFn = <
+ TData extends {
+ body?: unknown;
+ path?: Record;
+ query?: Record;
+ url: string;
+ },
+>(
+ options: TData & Options
+) => string;
+
+export type Client = CoreClient & {
+ interceptors: Middleware;
+};
+
+/**
+ * The `createClientConfig()` function will be called on client initialization
+ * and the returned object will become the client's initial configuration.
+ *
+ * You may want to initialize your client this way instead of calling
+ * `setConfig()`. This is useful for example if you're using Next.js
+ * to ensure your client always has the correct values.
+ */
+export type CreateClientConfig = (
+ override?: Config
+) => Config & T>;
+
+export interface TDataShape {
+ body?: unknown;
+ headers?: unknown;
+ path?: unknown;
+ query?: unknown;
+ url: string;
+}
+
+type OmitKeys = Pick>;
+
+export type Options<
+ TData extends TDataShape = TDataShape,
+ ThrowOnError extends boolean = boolean,
+ TResponse = unknown,
+ TResponseStyle extends ResponseStyle = 'fields',
+> = OmitKeys, 'body' | 'path' | 'query' | 'url'> &
+ ([TData] extends [never] ? unknown : Omit);
diff --git a/web/src/api/client/utils.gen.ts b/web/src/api/client/utils.gen.ts
new file mode 100644
index 0000000..c84bd56
--- /dev/null
+++ b/web/src/api/client/utils.gen.ts
@@ -0,0 +1,291 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+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 { getUrl } from '../core/utils.gen';
+import type { Client, ClientOptions, Config, RequestOptions } from './types.gen';
+
+export const createQuerySerializer = ({ parameters = {}, ...args }: QuerySerializerOptions = {}): ((
+ queryParams: T
+) => string) => {
+ const querySerializer = (queryParams: T): string => {
+ const search: string[] = [];
+ if (queryParams && typeof queryParams === 'object') {
+ for (const name in queryParams) {
+ const value = queryParams[name];
+
+ if (value === undefined || value === null) {
+ continue;
+ }
+
+ const options = parameters[name] || args;
+
+ if (Array.isArray(value)) {
+ const serializedArray = serializeArrayParam({
+ allowReserved: options.allowReserved,
+ explode: true,
+ name,
+ style: 'form',
+ value,
+ ...options.array,
+ });
+ if (serializedArray) search.push(serializedArray);
+ } else if (typeof value === 'object') {
+ const serializedObject = serializeObjectParam({
+ allowReserved: options.allowReserved,
+ explode: true,
+ name,
+ style: 'deepObject',
+ value: value as Record,
+ ...options.object,
+ });
+ if (serializedObject) search.push(serializedObject);
+ } else {
+ const serializedPrimitive = serializePrimitiveParam({
+ allowReserved: options.allowReserved,
+ name,
+ value: value as string,
+ });
+ if (serializedPrimitive) search.push(serializedPrimitive);
+ }
+ }
+ }
+ return search.join('&');
+ };
+ return querySerializer;
+};
+
+/**
+ * Infers parseAs value from provided Content-Type header.
+ */
+export const getParseAs = (contentType: string | null): Exclude => {
+ if (!contentType) {
+ // If no Content-Type header is provided, the best we can do is return the raw response body,
+ // which is effectively the same as the 'stream' option.
+ return 'stream';
+ }
+
+ const cleanContent = contentType.split(';')[0]?.trim();
+
+ if (!cleanContent) {
+ return;
+ }
+
+ if (cleanContent.startsWith('application/json') || cleanContent.endsWith('+json')) {
+ return 'json';
+ }
+
+ if (cleanContent === 'multipart/form-data') {
+ return 'formData';
+ }
+
+ if (['application/', 'audio/', 'image/', 'video/'].some(type => cleanContent.startsWith(type))) {
+ return 'blob';
+ }
+
+ if (cleanContent.startsWith('text/')) {
+ return 'text';
+ }
+
+ return;
+};
+
+const checkForExistence = (
+ options: Pick & {
+ headers: Headers;
+ },
+ name?: string
+): boolean => {
+ if (!name) {
+ return false;
+ }
+ if (options.headers.has(name) || options.query?.[name] || options.headers.get('Cookie')?.includes(`${name}=`)) {
+ return true;
+ }
+ return false;
+};
+
+export async function setAuthParams(
+ options: Pick & {
+ headers: Headers;
+ }
+): Promise {
+ for (const auth of options.security ?? []) {
+ if (checkForExistence(options, auth.name)) {
+ continue;
+ }
+
+ const token = await getAuthToken(auth, options.auth);
+
+ if (!token) {
+ continue;
+ }
+
+ const name = auth.name ?? 'Authorization';
+
+ switch (auth.in) {
+ case 'query':
+ if (!options.query) {
+ options.query = {};
+ }
+ options.query[name] = token;
+ break;
+ case 'cookie':
+ options.headers.append('Cookie', `${name}=${token}`);
+ break;
+ case 'header':
+ default:
+ options.headers.set(name, token);
+ break;
+ }
+ }
+}
+
+export const buildUrl: Client['buildUrl'] = options =>
+ getUrl({
+ baseUrl: options.baseUrl as string,
+ path: options.path,
+ query: options.query,
+ querySerializer:
+ typeof options.querySerializer === 'function'
+ ? options.querySerializer
+ : createQuerySerializer(options.querySerializer),
+ url: options.url,
+ });
+
+export const mergeConfigs = (a: Config, b: Config): Config => {
+ const config = { ...a, ...b };
+ if (config.baseUrl?.endsWith('/')) {
+ config.baseUrl = config.baseUrl.substring(0, config.baseUrl.length - 1);
+ }
+ config.headers = mergeHeaders(a.headers, b.headers);
+ return config;
+};
+
+const headersEntries = (headers: Headers): Array<[string, string]> => {
+ const entries: Array<[string, string]> = [];
+ headers.forEach((value, key) => {
+ entries.push([key, value]);
+ });
+ return entries;
+};
+
+export const mergeHeaders = (...headers: Array['headers'] | undefined>): Headers => {
+ const mergedHeaders = new Headers();
+ for (const header of headers) {
+ if (!header) {
+ continue;
+ }
+
+ const iterator = header instanceof Headers ? headersEntries(header) : Object.entries(header);
+
+ for (const [key, value] of iterator) {
+ if (value === null) {
+ mergedHeaders.delete(key);
+ } else if (Array.isArray(value)) {
+ for (const v of value) {
+ mergedHeaders.append(key, v as string);
+ }
+ } 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));
+ }
+ }
+ }
+ return mergedHeaders;
+};
+
+type ErrInterceptor = (
+ error: Err,
+ /** response may be undefined due to a network error where no response object is produced */
+ response: Res | undefined,
+ /** request may be undefined, because error may be from building the request object itself */
+ request: Req | undefined,
+ options: Options
+) => Err | Promise;
+
+type ReqInterceptor = (request: Req, options: Options) => Req | Promise;
+
+type ResInterceptor = (response: Res, request: Req, options: Options) => Res | Promise;
+
+class Interceptors {
+ fns: Array = [];
+
+ clear(): void {
+ this.fns = [];
+ }
+
+ eject(id: number | Interceptor): void {
+ const index = this.getInterceptorIndex(id);
+ if (this.fns[index]) {
+ this.fns[index] = null;
+ }
+ }
+
+ exists(id: number | Interceptor): boolean {
+ const index = this.getInterceptorIndex(id);
+ return Boolean(this.fns[index]);
+ }
+
+ getInterceptorIndex(id: number | Interceptor): number {
+ if (typeof id === 'number') {
+ return this.fns[id] ? id : -1;
+ }
+ return this.fns.indexOf(id);
+ }
+
+ update(id: number | Interceptor, fn: Interceptor): number | Interceptor | false {
+ const index = this.getInterceptorIndex(id);
+ if (this.fns[index]) {
+ this.fns[index] = fn;
+ return id;
+ }
+ return false;
+ }
+
+ use(fn: Interceptor): number {
+ this.fns.push(fn);
+ return this.fns.length - 1;
+ }
+}
+
+export interface Middleware {
+ error: Interceptors>;
+ request: Interceptors>;
+ response: Interceptors>;
+}
+
+export const createInterceptors = (): Middleware => ({
+ error: new Interceptors>(),
+ request: new Interceptors>(),
+ response: new Interceptors>(),
+});
+
+const defaultQuerySerializer = createQuerySerializer({
+ allowReserved: false,
+ array: {
+ explode: true,
+ style: 'form',
+ },
+ object: {
+ explode: true,
+ style: 'deepObject',
+ },
+});
+
+const defaultHeaders = {
+ 'Content-Type': 'application/json',
+};
+
+export const createConfig = (
+ override: Config & T> = {}
+): Config & T> => ({
+ ...jsonBodySerializer,
+ headers: defaultHeaders,
+ parseAs: 'auto',
+ querySerializer: defaultQuerySerializer,
+ ...override,
+});
diff --git a/web/src/api/core/auth.gen.ts b/web/src/api/core/auth.gen.ts
new file mode 100644
index 0000000..60ab7bf
--- /dev/null
+++ b/web/src/api/core/auth.gen.ts
@@ -0,0 +1,48 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+export type AuthToken = string | undefined;
+
+export interface Auth {
+ /**
+ * Which part of the request do we use to send the auth?
+ *
+ * @default 'header'
+ */
+ in?: 'header' | 'query' | 'cookie';
+ /**
+ * A unique identifier for the security scheme.
+ *
+ * Defined only when there are multiple security schemes whose `Auth`
+ * shape would otherwise be identical.
+ */
+ key?: string;
+ /**
+ * Header or query parameter name.
+ *
+ * @default 'Authorization'
+ */
+ name?: string;
+ scheme?: 'basic' | 'bearer';
+ type: 'apiKey' | 'http';
+}
+
+export const getAuthToken = async (
+ auth: Auth,
+ callback: ((auth: Auth) => Promise | AuthToken) | AuthToken
+): Promise => {
+ const token = typeof callback === 'function' ? await callback(auth) : callback;
+
+ if (!token) {
+ return;
+ }
+
+ if (auth.scheme === 'bearer') {
+ return `Bearer ${token}`;
+ }
+
+ if (auth.scheme === 'basic') {
+ return `Basic ${btoa(token)}`;
+ }
+
+ return token;
+};
diff --git a/web/src/api/core/bodySerializer.gen.ts b/web/src/api/core/bodySerializer.gen.ts
new file mode 100644
index 0000000..e19927f
--- /dev/null
+++ b/web/src/api/core/bodySerializer.gen.ts
@@ -0,0 +1,82 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { ArrayStyle, ObjectStyle, SerializerOptions } from './pathSerializer.gen';
+
+export type QuerySerializer = (query: Record) => string;
+
+export type BodySerializer = (body: unknown) => unknown;
+
+type QuerySerializerOptionsObject = {
+ allowReserved?: boolean;
+ array?: Partial>;
+ object?: Partial>;
+};
+
+export type QuerySerializerOptions = QuerySerializerOptionsObject & {
+ /**
+ * Per-parameter serialization overrides. When provided, these settings
+ * override the global array/object settings for specific parameter names.
+ */
+ parameters?: Record;
+};
+
+const serializeFormDataPair = (data: FormData, key: string, value: unknown): void => {
+ if (typeof value === 'string' || value instanceof Blob) {
+ data.append(key, value);
+ } else if (value instanceof Date) {
+ data.append(key, value.toISOString());
+ } else {
+ data.append(key, JSON.stringify(value));
+ }
+};
+
+const serializeUrlSearchParamsPair = (data: URLSearchParams, key: string, value: unknown): void => {
+ if (typeof value === 'string') {
+ data.append(key, value);
+ } else {
+ data.append(key, JSON.stringify(value));
+ }
+};
+
+export const formDataBodySerializer = {
+ bodySerializer: (body: unknown): FormData => {
+ const data = new FormData();
+
+ Object.entries(body as Record).forEach(([key, value]) => {
+ if (value === undefined || value === null) {
+ return;
+ }
+ if (Array.isArray(value)) {
+ value.forEach(v => serializeFormDataPair(data, key, v));
+ } else {
+ serializeFormDataPair(data, key, value);
+ }
+ });
+
+ return data;
+ },
+};
+
+export const jsonBodySerializer = {
+ bodySerializer: (body: unknown): string =>
+ JSON.stringify(body, (_key, value) => (typeof value === 'bigint' ? value.toString() : value)),
+};
+
+export const urlSearchParamsBodySerializer = {
+ bodySerializer: (body: unknown): string => {
+ const data = new URLSearchParams();
+
+ Object.entries(body as Record).forEach(([key, value]) => {
+ if (value === undefined || value === null) {
+ return;
+ }
+ if (Array.isArray(value)) {
+ value.forEach(v => serializeUrlSearchParamsPair(data, key, v));
+ } else {
+ serializeUrlSearchParamsPair(data, key, value);
+ }
+ });
+
+ return data.toString();
+ },
+};
diff --git a/web/src/api/core/params.gen.ts b/web/src/api/core/params.gen.ts
new file mode 100644
index 0000000..0f50047
--- /dev/null
+++ b/web/src/api/core/params.gen.ts
@@ -0,0 +1,171 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+type Slot = 'body' | 'headers' | 'path' | 'query';
+
+export type Field =
+ | {
+ in: Exclude;
+ /**
+ * Field name. This is the name we want the user to see and use.
+ */
+ key: string;
+ /**
+ * Field mapped name. This is the name we want to use in the request.
+ * If omitted, we use the same value as `key`.
+ */
+ map?: string;
+ }
+ | {
+ in: Extract;
+ /**
+ * Key isn't required for bodies.
+ */
+ key?: string;
+ map?: string;
+ }
+ | {
+ /**
+ * Field name. This is the name we want the user to see and use.
+ */
+ key: string;
+ /**
+ * Field mapped name. This is the name we want to use in the request.
+ * If `in` is omitted, `map` aliases `key` to the transport layer.
+ */
+ map: Slot;
+ };
+
+export interface Fields {
+ allowExtra?: Partial>;
+ args?: ReadonlyArray;
+}
+
+export type FieldsConfig = ReadonlyArray;
+
+const extraPrefixesMap: Record = {
+ $body_: 'body',
+ $headers_: 'headers',
+ $path_: 'path',
+ $query_: 'query',
+};
+const extraPrefixes = Object.entries(extraPrefixesMap);
+
+type KeyMap = Map<
+ string,
+ | {
+ in: Slot;
+ map?: string;
+ }
+ | {
+ in?: never;
+ map: Slot;
+ }
+>;
+
+function buildKeyMap(fields: FieldsConfig, map?: KeyMap): KeyMap {
+ if (!map) {
+ map = new Map();
+ }
+
+ for (const config of fields) {
+ if ('in' in config) {
+ if (config.key) {
+ map.set(config.key, {
+ in: config.in,
+ map: config.map,
+ });
+ }
+ } else if ('key' in config) {
+ map.set(config.key, {
+ map: config.map,
+ });
+ } else if (config.args) {
+ buildKeyMap(config.args, map);
+ }
+ }
+
+ return map;
+}
+
+interface Params {
+ body: unknown;
+ headers: Record;
+ path: Record;
+ query: Record;
+}
+
+type ParamsSlotMap = Record;
+
+function stripEmptySlots(params: ParamsSlotMap): void {
+ for (const [slot, value] of Object.entries(params)) {
+ if (value && typeof value === 'object' && !Array.isArray(value) && !Object.keys(value).length) {
+ delete params[slot as Slot];
+ }
+ }
+}
+
+export function buildClientParams(args: ReadonlyArray, fields: FieldsConfig): Params {
+ const params: ParamsSlotMap = {
+ body: Object.create(null),
+ headers: Object.create(null),
+ path: Object.create(null),
+ query: Object.create(null),
+ };
+
+ const map = buildKeyMap(fields);
+
+ let config: FieldsConfig[number] | undefined;
+
+ for (const [index, arg] of args.entries()) {
+ if (fields[index]) {
+ config = fields[index];
+ }
+
+ if (!config) {
+ continue;
+ }
+
+ if ('in' in config) {
+ if (config.key) {
+ const field = map.get(config.key)!;
+ const name = field.map || config.key;
+ if (field.in) {
+ (params[field.in] as Record)[name] = arg;
+ }
+ } else {
+ params.body = arg;
+ }
+ } else {
+ for (const [key, value] of Object.entries(arg ?? {})) {
+ const field = map.get(key);
+
+ if (field) {
+ if (field.in) {
+ const name = field.map || key;
+ (params[field.in] as Record)[name] = value;
+ } else {
+ params[field.map] = value;
+ }
+ } else {
+ const extra = extraPrefixes.find(([prefix]) => key.startsWith(prefix));
+
+ if (extra) {
+ const [prefix, slot] = extra;
+ (params[slot] as Record)[key.slice(prefix.length)] = value;
+ } else if ('allowExtra' in config && config.allowExtra) {
+ for (const [slot, allowed] of Object.entries(config.allowExtra)) {
+ if (allowed) {
+ (params[slot as Slot] as Record)[key] = value;
+ break;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ stripEmptySlots(params);
+
+ return params as Params;
+}
diff --git a/web/src/api/core/pathSerializer.gen.ts b/web/src/api/core/pathSerializer.gen.ts
new file mode 100644
index 0000000..1294aff
--- /dev/null
+++ b/web/src/api/core/pathSerializer.gen.ts
@@ -0,0 +1,167 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+interface SerializeOptions extends SerializePrimitiveOptions, SerializerOptions {}
+
+interface SerializePrimitiveOptions {
+ allowReserved?: boolean;
+ name: string;
+}
+
+export interface SerializerOptions {
+ /**
+ * @default true
+ */
+ explode: boolean;
+ style: T;
+}
+
+export type ArrayStyle = 'form' | 'spaceDelimited' | 'pipeDelimited';
+export type ArraySeparatorStyle = ArrayStyle | MatrixStyle;
+type MatrixStyle = 'label' | 'matrix' | 'simple';
+export type ObjectStyle = 'form' | 'deepObject';
+type ObjectSeparatorStyle = ObjectStyle | MatrixStyle;
+
+interface SerializePrimitiveParam extends SerializePrimitiveOptions {
+ value: string;
+}
+
+export const separatorArrayExplode = (style: ArraySeparatorStyle): '.' | ';' | ',' | '&' => {
+ switch (style) {
+ case 'label':
+ return '.';
+ case 'matrix':
+ return ';';
+ case 'simple':
+ return ',';
+ default:
+ return '&';
+ }
+};
+
+export const separatorArrayNoExplode = (style: ArraySeparatorStyle): ',' | '|' | '%20' => {
+ switch (style) {
+ case 'form':
+ return ',';
+ case 'pipeDelimited':
+ return '|';
+ case 'spaceDelimited':
+ return '%20';
+ default:
+ return ',';
+ }
+};
+
+export const separatorObjectExplode = (style: ObjectSeparatorStyle): '.' | ';' | ',' | '&' => {
+ switch (style) {
+ case 'label':
+ return '.';
+ case 'matrix':
+ return ';';
+ case 'simple':
+ return ',';
+ default:
+ return '&';
+ }
+};
+
+export const serializeArrayParam = ({
+ allowReserved,
+ explode,
+ name,
+ style,
+ value,
+}: SerializeOptions & {
+ value: unknown[];
+}): string => {
+ if (!explode) {
+ const joinedValues = (allowReserved ? value : value.map(v => encodeURIComponent(v as string))).join(
+ separatorArrayNoExplode(style)
+ );
+ switch (style) {
+ case 'label':
+ return `.${joinedValues}`;
+ case 'matrix':
+ return `;${name}=${joinedValues}`;
+ case 'simple':
+ return joinedValues;
+ default:
+ return `${name}=${joinedValues}`;
+ }
+ }
+
+ const separator = separatorArrayExplode(style);
+ const joinedValues = value
+ .map(v => {
+ if (style === 'label' || style === 'simple') {
+ return allowReserved ? v : encodeURIComponent(v as string);
+ }
+
+ return serializePrimitiveParam({
+ allowReserved,
+ name,
+ value: v as string,
+ });
+ })
+ .join(separator);
+ return style === 'label' || style === 'matrix' ? separator + joinedValues : joinedValues;
+};
+
+export const serializePrimitiveParam = ({ allowReserved, name, value }: SerializePrimitiveParam): string => {
+ 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.'
+ );
+ }
+
+ return `${name}=${allowReserved ? value : encodeURIComponent(value)}`;
+};
+
+export const serializeObjectParam = ({
+ allowReserved,
+ explode,
+ name,
+ style,
+ value,
+ valueOnly,
+}: SerializeOptions & {
+ value: Record | Date;
+ valueOnly?: boolean;
+}): string => {
+ if (value instanceof Date) {
+ return valueOnly ? value.toISOString() : `${name}=${value.toISOString()}`;
+ }
+
+ if (style !== 'deepObject' && !explode) {
+ let values: string[] = [];
+ Object.entries(value).forEach(([key, v]) => {
+ values = [...values, key, allowReserved ? (v as string) : encodeURIComponent(v as string)];
+ });
+ const joinedValues = values.join(',');
+ switch (style) {
+ case 'form':
+ return `${name}=${joinedValues}`;
+ case 'label':
+ return `.${joinedValues}`;
+ case 'matrix':
+ return `;${name}=${joinedValues}`;
+ default:
+ return joinedValues;
+ }
+ }
+
+ const separator = separatorObjectExplode(style);
+ const joinedValues = Object.entries(value)
+ .map(([key, v]) =>
+ serializePrimitiveParam({
+ allowReserved,
+ name: style === 'deepObject' ? `${name}[${key}]` : key,
+ value: v as string,
+ })
+ )
+ .join(separator);
+ return style === 'label' || style === 'matrix' ? separator + joinedValues : joinedValues;
+};
diff --git a/web/src/api/core/queryKeySerializer.gen.ts b/web/src/api/core/queryKeySerializer.gen.ts
new file mode 100644
index 0000000..e84d0e4
--- /dev/null
+++ b/web/src/api/core/queryKeySerializer.gen.ts
@@ -0,0 +1,111 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+/**
+ * JSON-friendly union that mirrors what Pinia Colada can hash.
+ */
+export type JsonValue = null | string | number | boolean | JsonValue[] | { [key: string]: JsonValue };
+
+/**
+ * Replacer that converts non-JSON values (bigint, Date, etc.) to safe substitutes.
+ */
+export const queryKeyJsonReplacer = (_key: string, value: unknown): unknown | undefined => {
+ if (value === undefined || typeof value === 'function' || typeof value === 'symbol') {
+ return undefined;
+ }
+ if (typeof value === 'bigint') {
+ return value.toString();
+ }
+ if (value instanceof Date) {
+ return value.toISOString();
+ }
+ return value;
+};
+
+/**
+ * Safely stringifies a value and parses it back into a JsonValue.
+ */
+export const stringifyToJsonValue = (input: unknown): JsonValue | undefined => {
+ try {
+ const json = JSON.stringify(input, queryKeyJsonReplacer);
+ if (json === undefined) {
+ return undefined;
+ }
+ return JSON.parse(json) as JsonValue;
+ } catch {
+ return undefined;
+ }
+};
+
+/**
+ * Detects plain objects (including objects with a null prototype).
+ */
+const isPlainObject = (value: unknown): value is Record => {
+ if (value === null || typeof value !== 'object') {
+ return false;
+ }
+ const prototype = Object.getPrototypeOf(value as object);
+ return prototype === Object.prototype || prototype === null;
+};
+
+/**
+ * Turns URLSearchParams into a sorted JSON object for deterministic keys.
+ */
+const serializeSearchParams = (params: URLSearchParams): JsonValue => {
+ const entries = Array.from(params.entries()).sort(([a], [b]) => a.localeCompare(b));
+ const result: Record = {};
+
+ for (const [key, value] of entries) {
+ const existing = result[key];
+ if (existing === undefined) {
+ result[key] = value;
+ continue;
+ }
+
+ if (Array.isArray(existing)) {
+ (existing as string[]).push(value);
+ } else {
+ result[key] = [existing, value];
+ }
+ }
+
+ return result;
+};
+
+/**
+ * Normalizes any accepted value into a JSON-friendly shape for query keys.
+ */
+export const serializeQueryKeyValue = (value: unknown): JsonValue | undefined => {
+ if (value === null) {
+ return null;
+ }
+
+ if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+ return value;
+ }
+
+ if (value === undefined || typeof value === 'function' || typeof value === 'symbol') {
+ return undefined;
+ }
+
+ if (typeof value === 'bigint') {
+ return value.toString();
+ }
+
+ if (value instanceof Date) {
+ return value.toISOString();
+ }
+
+ if (Array.isArray(value)) {
+ return stringifyToJsonValue(value);
+ }
+
+ if (typeof URLSearchParams !== 'undefined' && value instanceof URLSearchParams) {
+ return serializeSearchParams(value);
+ }
+
+ if (isPlainObject(value)) {
+ return stringifyToJsonValue(value);
+ }
+
+ return undefined;
+};
diff --git a/web/src/api/core/serverSentEvents.gen.ts b/web/src/api/core/serverSentEvents.gen.ts
new file mode 100644
index 0000000..d89a228
--- /dev/null
+++ b/web/src/api/core/serverSentEvents.gen.ts
@@ -0,0 +1,238 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { Config } from './types.gen';
+
+export type ServerSentEventsOptions = Omit &
+ Pick & {
+ /**
+ * Fetch API implementation. You can use this option to provide a custom
+ * fetch instance.
+ *
+ * @default globalThis.fetch
+ */
+ fetch?: typeof fetch;
+ /**
+ * Implementing clients can call request interceptors inside this hook.
+ */
+ onRequest?: (url: string, init: RequestInit) => Promise;
+ /**
+ * Callback invoked when a network or parsing error occurs during streaming.
+ *
+ * This option applies only if the endpoint returns a stream of events.
+ *
+ * @param error The error that occurred.
+ */
+ onSseError?: (error: unknown) => void;
+ /**
+ * Callback invoked when an event is streamed from the server.
+ *
+ * This option applies only if the endpoint returns a stream of events.
+ *
+ * @param event Event streamed from the server.
+ * @returns Nothing (void).
+ */
+ onSseEvent?: (event: StreamEvent) => void;
+ serializedBody?: RequestInit['body'];
+ /**
+ * Default retry delay in milliseconds.
+ *
+ * This option applies only if the endpoint returns a stream of events.
+ *
+ * @default 3000
+ */
+ sseDefaultRetryDelay?: number;
+ /**
+ * Maximum number of retry attempts before giving up.
+ */
+ sseMaxRetryAttempts?: number;
+ /**
+ * Maximum retry delay in milliseconds.
+ *
+ * Applies only when exponential backoff is used.
+ *
+ * This option applies only if the endpoint returns a stream of events.
+ *
+ * @default 30000
+ */
+ sseMaxRetryDelay?: number;
+ /**
+ * Optional sleep function for retry backoff.
+ *
+ * Defaults to using `setTimeout`.
+ */
+ sseSleepFn?: (ms: number) => Promise;
+ url: string;
+ };
+
+export interface StreamEvent {
+ data: TData;
+ event?: string;
+ id?: string;
+ retry?: number;
+}
+
+export type ServerSentEventsResult = {
+ stream: AsyncGenerator ? TData[keyof TData] : TData, TReturn, TNext>;
+};
+
+export function createSseClient({
+ onRequest,
+ onSseError,
+ onSseEvent,
+ responseTransformer,
+ responseValidator,
+ sseDefaultRetryDelay,
+ sseMaxRetryAttempts,
+ sseMaxRetryDelay,
+ sseSleepFn,
+ url,
+ ...options
+}: ServerSentEventsOptions): ServerSentEventsResult {
+ let lastEventId: string | undefined;
+
+ const sleep = sseSleepFn ?? ((ms: number) => new Promise(resolve => setTimeout(resolve, ms)));
+
+ const createStream = async function* () {
+ let retryDelay: number = sseDefaultRetryDelay ?? 3000;
+ let attempt = 0;
+ const signal = options.signal ?? new AbortController().signal;
+
+ while (true) {
+ if (signal.aborted) break;
+
+ attempt++;
+
+ const headers =
+ options.headers instanceof Headers
+ ? options.headers
+ : new Headers(options.headers as Record | undefined);
+
+ if (lastEventId !== undefined) {
+ headers.set('Last-Event-ID', lastEventId);
+ }
+
+ try {
+ const requestInit: RequestInit = {
+ redirect: 'follow',
+ ...options,
+ body: options.serializedBody,
+ headers,
+ signal,
+ };
+ let request = new Request(url, requestInit);
+ if (onRequest) {
+ request = await onRequest(url, requestInit);
+ }
+ // fetch must be assigned here, otherwise it would throw the error:
+ // TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation
+ const _fetch = options.fetch ?? globalThis.fetch;
+ const response = await _fetch(request);
+
+ if (!response.ok) throw new Error(`SSE failed: ${response.status} ${response.statusText}`);
+
+ if (!response.body) throw new Error('No body in SSE response');
+
+ const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
+
+ let buffer = '';
+
+ const abortHandler = () => {
+ try {
+ reader.cancel();
+ } catch {
+ // noop
+ }
+ };
+
+ signal.addEventListener('abort', abortHandler);
+
+ try {
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) break;
+ buffer += value;
+ buffer = buffer.replace(/\r\n?/g, '\n'); // normalize line endings
+
+ const chunks = buffer.split('\n\n');
+ buffer = chunks.pop() ?? '';
+
+ for (const chunk of chunks) {
+ const lines = chunk.split('\n');
+ const dataLines: Array = [];
+ let eventName: string | undefined;
+
+ for (const line of lines) {
+ if (line.startsWith('data:')) {
+ dataLines.push(line.replace(/^data:\s*/, ''));
+ } else if (line.startsWith('event:')) {
+ eventName = line.replace(/^event:\s*/, '');
+ } else if (line.startsWith('id:')) {
+ lastEventId = line.replace(/^id:\s*/, '');
+ } else if (line.startsWith('retry:')) {
+ const parsed = Number.parseInt(line.replace(/^retry:\s*/, ''), 10);
+ if (!Number.isNaN(parsed)) {
+ retryDelay = parsed;
+ }
+ }
+ }
+
+ let data: unknown;
+ let parsedJson = false;
+
+ if (dataLines.length) {
+ const rawData = dataLines.join('\n');
+ try {
+ data = JSON.parse(rawData);
+ parsedJson = true;
+ } catch {
+ data = rawData;
+ }
+ }
+
+ if (parsedJson) {
+ if (responseValidator) {
+ await responseValidator(data);
+ }
+
+ if (responseTransformer) {
+ data = await responseTransformer(data);
+ }
+ }
+
+ onSseEvent?.({
+ data,
+ event: eventName,
+ id: lastEventId,
+ retry: retryDelay,
+ });
+
+ if (dataLines.length) {
+ yield data as any;
+ }
+ }
+ }
+ } finally {
+ signal.removeEventListener('abort', abortHandler);
+ reader.releaseLock();
+ }
+
+ break; // exit loop on normal completion
+ } catch (error) {
+ // connection failed or aborted; retry after delay
+ onSseError?.(error);
+
+ if (sseMaxRetryAttempts !== undefined && attempt >= sseMaxRetryAttempts) {
+ break; // stop after firing error
+ }
+
+ // exponential backoff: double retry each attempt, cap at 30s
+ const backoff = Math.min(retryDelay * 2 ** (attempt - 1), sseMaxRetryDelay ?? 30000);
+ await sleep(backoff);
+ }
+ }
+ };
+
+ const stream = createStream();
+
+ return { stream };
+}
diff --git a/web/src/api/core/types.gen.ts b/web/src/api/core/types.gen.ts
new file mode 100644
index 0000000..2b9e67b
--- /dev/null
+++ b/web/src/api/core/types.gen.ts
@@ -0,0 +1,86 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { Auth, AuthToken } from './auth.gen';
+import type { BodySerializer, QuerySerializer, QuerySerializerOptions } from './bodySerializer.gen';
+
+export type HttpMethod = 'connect' | 'delete' | 'get' | 'head' | 'options' | 'patch' | 'post' | 'put' | 'trace';
+
+export type Client = {
+ /**
+ * Returns the final request URL.
+ */
+ buildUrl: BuildUrlFn;
+ getConfig: () => Config;
+ request: RequestFn;
+ setConfig: (config: Config) => Config;
+} & {
+ [K in HttpMethod]: MethodFn;
+} & ([SseFn] extends [never] ? { sse?: never } : { sse: { [K in HttpMethod]: SseFn } });
+
+export interface Config {
+ /**
+ * Auth token or a function returning auth token. The resolved value will be
+ * added to the request payload as defined by its `security` array.
+ */
+ auth?: ((auth: Auth) => Promise | AuthToken) | AuthToken;
+ /**
+ * A function for serializing request body parameter. By default,
+ * {@link JSON.stringify()} will be used.
+ */
+ bodySerializer?: BodySerializer | null;
+ /**
+ * An object containing any HTTP headers that you want to pre-populate your
+ * `Headers` object with.
+ *
+ * {@link https://developer.mozilla.org/docs/Web/API/Headers/Headers#init See more}
+ */
+ headers?:
+ | RequestInit['headers']
+ | Record;
+ /**
+ * The request method.
+ *
+ * {@link https://developer.mozilla.org/docs/Web/API/fetch#method See more}
+ */
+ method?: Uppercase;
+ /**
+ * A function for serializing request query parameters. By default, arrays
+ * will be exploded in form style, objects will be exploded in deepObject
+ * style, and reserved characters are percent-encoded.
+ *
+ * This method will have no effect if the native `paramsSerializer()` Axios
+ * API function is used.
+ *
+ * {@link https://swagger.io/docs/specification/serialization/#query View examples}
+ */
+ querySerializer?: QuerySerializer | QuerySerializerOptions;
+ /**
+ * A function validating request data. This is useful if you want to ensure
+ * the request conforms to the desired shape, so it can be safely sent to
+ * the server.
+ */
+ requestValidator?: (data: unknown) => Promise;
+ /**
+ * A function transforming response data before it's returned. This is useful
+ * for post-processing data, e.g., converting ISO strings into Date objects.
+ */
+ responseTransformer?: (data: unknown) => Promise;
+ /**
+ * A function validating response data. This is useful if you want to ensure
+ * the response conforms to the desired shape, so it can be safely passed to
+ * the transformers and returned to the user.
+ */
+ responseValidator?: (data: unknown) => Promise;
+}
+
+type IsExactlyNeverOrNeverUndefined = [T] extends [never]
+ ? true
+ : [T] extends [never | undefined]
+ ? [undefined] extends [T]
+ ? false
+ : true
+ : false;
+
+export type OmitNever> = {
+ [K in keyof T as IsExactlyNeverOrNeverUndefined extends true ? never : K]: T[K];
+};
diff --git a/web/src/api/core/utils.gen.ts b/web/src/api/core/utils.gen.ts
new file mode 100644
index 0000000..340c8bd
--- /dev/null
+++ b/web/src/api/core/utils.gen.ts
@@ -0,0 +1,137 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { BodySerializer, QuerySerializer } from './bodySerializer.gen';
+import {
+ type ArraySeparatorStyle,
+ serializeArrayParam,
+ serializeObjectParam,
+ serializePrimitiveParam,
+} from './pathSerializer.gen';
+
+export interface PathSerializer {
+ path: Record;
+ url: string;
+}
+
+export const PATH_PARAM_RE: RegExp = /\{[^{}]+\}/g;
+
+export const defaultPathSerializer = ({ path, url: _url }: PathSerializer): string => {
+ let url = _url;
+ const matches = _url.match(PATH_PARAM_RE);
+ if (matches) {
+ for (const match of matches) {
+ let explode = false;
+ let name = match.substring(1, match.length - 1);
+ let style: ArraySeparatorStyle = 'simple';
+
+ if (name.endsWith('*')) {
+ explode = true;
+ name = name.substring(0, name.length - 1);
+ }
+
+ if (name.startsWith('.')) {
+ name = name.substring(1);
+ style = 'label';
+ } else if (name.startsWith(';')) {
+ name = name.substring(1);
+ style = 'matrix';
+ }
+
+ const value = path[name];
+
+ if (value === undefined || value === null) {
+ continue;
+ }
+
+ if (Array.isArray(value)) {
+ url = url.replace(match, serializeArrayParam({ explode, name, style, value }));
+ continue;
+ }
+
+ if (typeof value === 'object') {
+ url = url.replace(
+ match,
+ serializeObjectParam({
+ explode,
+ name,
+ style,
+ value: value as Record,
+ valueOnly: true,
+ })
+ );
+ continue;
+ }
+
+ if (style === 'matrix') {
+ url = url.replace(
+ match,
+ `;${serializePrimitiveParam({
+ name,
+ value: value as string,
+ })}`
+ );
+ continue;
+ }
+
+ const replaceValue = encodeURIComponent(style === 'label' ? `.${value as string}` : (value as string));
+ url = url.replace(match, replaceValue);
+ }
+ }
+ return url;
+};
+
+export const getUrl = ({
+ baseUrl,
+ path,
+ query,
+ querySerializer,
+ url: _url,
+}: {
+ baseUrl?: string;
+ path?: Record;
+ query?: Record;
+ querySerializer: QuerySerializer;
+ url: string;
+}): string => {
+ const pathUrl = _url.startsWith('/') ? _url : `/${_url}`;
+ let url = (baseUrl ?? '') + pathUrl;
+ if (path) {
+ url = defaultPathSerializer({ path, url });
+ }
+ let search = query ? querySerializer(query) : '';
+ if (search.startsWith('?')) {
+ search = search.substring(1);
+ }
+ if (search) {
+ url += `?${search}`;
+ }
+ return url;
+};
+
+export function getValidRequestBody(options: {
+ body?: unknown;
+ bodySerializer?: BodySerializer | null;
+ serializedBody?: unknown;
+}): unknown {
+ const hasBody = options.body !== undefined;
+ const isSerializedBody = hasBody && options.bodySerializer;
+
+ if (isSerializedBody) {
+ if ('serializedBody' in options) {
+ const hasSerializedBody = options.serializedBody !== undefined && options.serializedBody !== '';
+
+ return hasSerializedBody ? options.serializedBody : null;
+ }
+
+ // not all clients implement a serializedBody property (i.e., client-axios)
+ return options.body !== '' ? options.body : null;
+ }
+
+ // plain/text body
+ if (hasBody) {
+ return options.body;
+ }
+
+ // no body was provided
+ return undefined;
+}
diff --git a/web/src/api/ethereum.ts b/web/src/api/ethereum.ts
deleted file mode 100644
index 98f424a..0000000
--- a/web/src/api/ethereum.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import {
- Response,
- V1GetEthereumNowResponse,
- V1GetEthereumSpecResponse,
- EthereumSpec,
-} from '@app/types/api';
-import { BASE_URL } from '@utils/environment';
-
-export type Spec = {
- network_name: string;
- spec: EthereumSpec;
-};
-
-export async function fetchNow(): Promise> {
- const response = await fetch(`${BASE_URL}api/v1/ethereum/now`);
-
- if (!response.ok) {
- throw new Error('Failed to fetch ethereum now');
- }
- const json = (await response.json()) as Response;
-
- if (!json.data?.slot) throw new Error('No slot in response');
- if (!json.data?.epoch) throw new Error('No epoch in response');
-
- return {
- slot: json.data?.slot,
- epoch: json.data?.epoch,
- };
-}
-
-export async function fetchSpec(): Promise> {
- const response = await fetch(`${BASE_URL}api/v1/ethereum/spec`);
-
- if (!response.ok) {
- throw new Error('Failed to fetch ethereum spec');
- }
- const json = (await response.json()) as Response;
-
- if (!json.data?.spec) throw new Error('No spec in response');
-
- return {
- network_name: json.data?.network_name ?? 'unknown',
- spec: json.data.spec,
- };
-}
diff --git a/web/src/api/frames.ts b/web/src/api/frames.ts
deleted file mode 100644
index 2f22462..0000000
--- a/web/src/api/frames.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Response, V1GetFrameResponse, Frame } from '@app/types/api';
-import { ProcessedData } from '@app/types/graph';
-import { BASE_URL } from '@utils/environment';
-import { processForkChoiceData } from '@utils/graph';
-
-export async function fetchFrame(id: string): Promise {
- const response = await fetch(`${BASE_URL}api/v1/frames/${id}`);
-
- if (!response.ok) {
- throw new Error('Failed to fetch snapshot data');
- }
- const json = (await response.json()) as Response;
- const frame = json.data?.frame;
-
- if (frame === undefined) throw new Error('No frame in response');
- if (frame?.data === undefined) throw new Error('No frame data in response');
- if (frame?.metadata === undefined) throw new Error('No frame metadata in response');
-
- return processForkChoiceData(frame as Required);
-}
diff --git a/web/src/api/index.ts b/web/src/api/index.ts
new file mode 100644
index 0000000..96fbcb0
--- /dev/null
+++ b/web/src/api/index.ts
@@ -0,0 +1,75 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+export {
+ getEthereumNow,
+ getEthereumSpec,
+ getFrame,
+ listMetadata,
+ listMetadataEpochs,
+ listMetadataLabels,
+ listMetadataNodes,
+ listMetadataSlots,
+ type Options,
+} from './sdk.gen';
+export type {
+ Checkpoint,
+ ClientOptions,
+ Epoch,
+ EpochString,
+ Error,
+ EthereumNow,
+ EthereumSpec,
+ EthereumSpecResult,
+ ForkChoice,
+ ForkChoiceNode,
+ Frame,
+ FrameFilter,
+ FrameMetadata,
+ GetEthereumNowData,
+ GetEthereumNowError,
+ GetEthereumNowErrors,
+ GetEthereumNowResponse,
+ GetEthereumNowResponses,
+ GetEthereumSpecData,
+ GetEthereumSpecError,
+ GetEthereumSpecErrors,
+ GetEthereumSpecResponse,
+ GetEthereumSpecResponses,
+ GetFrameData,
+ GetFrameError,
+ GetFrameErrors,
+ GetFrameResponse,
+ GetFrameResponses,
+ ListMetadataData,
+ ListMetadataEpochsData,
+ ListMetadataEpochsError,
+ ListMetadataEpochsErrors,
+ ListMetadataEpochsResponse,
+ ListMetadataEpochsResponses,
+ ListMetadataError,
+ ListMetadataErrors,
+ ListMetadataLabelsData,
+ ListMetadataLabelsError,
+ ListMetadataLabelsErrors,
+ ListMetadataLabelsResponse,
+ ListMetadataLabelsResponses,
+ ListMetadataNodesData,
+ ListMetadataNodesError,
+ ListMetadataNodesErrors,
+ ListMetadataNodesResponse,
+ ListMetadataNodesResponses,
+ ListMetadataResponse,
+ ListMetadataResponses,
+ ListMetadataSlotsData,
+ ListMetadataSlotsError,
+ ListMetadataSlotsErrors,
+ ListMetadataSlotsResponse,
+ ListMetadataSlotsResponses,
+ MetadataQuery,
+ MetadataQuery2,
+ PaginationCursor,
+ PaginationResponse,
+ Root,
+ Slot,
+ SlotString,
+} from './types.gen';
diff --git a/web/src/api/metadata.ts b/web/src/api/metadata.ts
deleted file mode 100644
index d52fbcc..0000000
--- a/web/src/api/metadata.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import {
- Response,
- FrameMetaData,
- V1MetadataListRequest,
- V1MetadataListResponse,
- V1MetadataListNodesRequest,
- V1MetadataListNodesResponse,
-} from '@app/types/api';
-import { BASE_URL } from '@utils/environment';
-
-export async function fetchMetadataNodes(payload: V1MetadataListNodesRequest): Promise {
- const response = await fetch(`${BASE_URL}api/v1/metadata/nodes`, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify(payload),
- });
-
- if (!response.ok) {
- throw new Error('Failed to fetch metadata nodes');
- }
-
- const json = (await response.json()) as Response;
- return json.data?.nodes || [];
-}
-
-export async function fetchMetadataList(payload: V1MetadataListRequest): Promise {
- const response = await fetch(`${BASE_URL}api/v1/metadata`, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify(payload),
- });
-
- if (!response.ok) {
- throw new Error('Failed to fetch metadata list');
- }
- const json = (await response.json()) as Response;
- return json.data?.frames || [];
-}
diff --git a/web/src/api/sdk.gen.ts b/web/src/api/sdk.gen.ts
new file mode 100644
index 0000000..84ba864
--- /dev/null
+++ b/web/src/api/sdk.gen.ts
@@ -0,0 +1,174 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { Client, Options as Options2, RequestResult, TDataShape } from './client';
+import { client } from './client.gen';
+import type {
+ GetEthereumNowData,
+ GetEthereumNowErrors,
+ GetEthereumNowResponses,
+ GetEthereumSpecData,
+ GetEthereumSpecErrors,
+ GetEthereumSpecResponses,
+ GetFrameData,
+ GetFrameErrors,
+ GetFrameResponses,
+ ListMetadataData,
+ ListMetadataEpochsData,
+ ListMetadataEpochsErrors,
+ ListMetadataEpochsResponses,
+ ListMetadataErrors,
+ ListMetadataLabelsData,
+ ListMetadataLabelsErrors,
+ ListMetadataLabelsResponses,
+ ListMetadataNodesData,
+ ListMetadataNodesErrors,
+ ListMetadataNodesResponses,
+ ListMetadataResponses,
+ ListMetadataSlotsData,
+ ListMetadataSlotsErrors,
+ ListMetadataSlotsResponses,
+} from './types.gen';
+import {
+ zGetEthereumNowResponse,
+ zGetEthereumSpecResponse,
+ zGetFrameResponse,
+ zListMetadataEpochsResponse,
+ zListMetadataLabelsResponse,
+ zListMetadataNodesResponse,
+ zListMetadataResponse,
+ zListMetadataSlotsResponse,
+} from './zod.gen';
+
+export type Options<
+ TData extends TDataShape = TDataShape,
+ ThrowOnError extends boolean = boolean,
+ TResponse = unknown,
+> = Options2 & {
+ /**
+ * You can provide a client instance returned by `createClient()` instead of
+ * individual options. This might be also useful if you want to implement a
+ * custom client.
+ */
+ client?: Client;
+ /**
+ * You can pass arbitrary values through the `meta` object. This can be
+ * used to access values that aren't defined as part of the SDK function.
+ */
+ meta?: Record;
+};
+
+/**
+ * Get the current wall-clock slot and epoch
+ */
+export const getEthereumNow = (
+ options?: Options
+): RequestResult =>
+ (options?.client ?? client).get({
+ responseValidator: async data => await zGetEthereumNowResponse.parseAsync(data),
+ url: '/api/v1/ethereum/now',
+ ...options,
+ });
+
+/**
+ * Get the Ethereum network name and spec
+ */
+export const getEthereumSpec = (
+ options?: Options
+): RequestResult =>
+ (options?.client ?? client).get({
+ responseValidator: async data => await zGetEthereumSpecResponse.parseAsync(data),
+ url: '/api/v1/ethereum/spec',
+ ...options,
+ });
+
+/**
+ * Get a single fork-choice frame by ID
+ */
+export const getFrame = (
+ options: Options
+): RequestResult =>
+ (options.client ?? client).get({
+ responseValidator: async data => await zGetFrameResponse.parseAsync(data),
+ url: '/api/v1/frames/{id}',
+ ...options,
+ });
+
+/**
+ * List fork-choice frame metadata
+ */
+export const listMetadata = (
+ options: Options
+): RequestResult =>
+ (options.client ?? client).post({
+ responseValidator: async data => await zListMetadataResponse.parseAsync(data),
+ url: '/api/v1/metadata',
+ ...options,
+ headers: {
+ 'Content-Type': 'application/json',
+ ...options.headers,
+ },
+ });
+
+/**
+ * List distinct nodes across stored frames
+ */
+export const listMetadataNodes = (
+ options: Options
+): RequestResult =>
+ (options.client ?? client).post({
+ responseValidator: async data => await zListMetadataNodesResponse.parseAsync(data),
+ url: '/api/v1/metadata/nodes',
+ ...options,
+ headers: {
+ 'Content-Type': 'application/json',
+ ...options.headers,
+ },
+ });
+
+/**
+ * List distinct slots across stored frames
+ */
+export const listMetadataSlots = (
+ options: Options
+): RequestResult =>
+ (options.client ?? client).post({
+ responseValidator: async data => await zListMetadataSlotsResponse.parseAsync(data),
+ url: '/api/v1/metadata/slots',
+ ...options,
+ headers: {
+ 'Content-Type': 'application/json',
+ ...options.headers,
+ },
+ });
+
+/**
+ * List distinct epochs across stored frames
+ */
+export const listMetadataEpochs = (
+ options: Options
+): RequestResult =>
+ (options.client ?? client).post({
+ responseValidator: async data => await zListMetadataEpochsResponse.parseAsync(data),
+ url: '/api/v1/metadata/epochs',
+ ...options,
+ headers: {
+ 'Content-Type': 'application/json',
+ ...options.headers,
+ },
+ });
+
+/**
+ * List distinct labels across stored frames
+ */
+export const listMetadataLabels = (
+ options: Options
+): RequestResult =>
+ (options.client ?? client).post({
+ responseValidator: async data => await zListMetadataLabelsResponse.parseAsync(data),
+ url: '/api/v1/metadata/labels',
+ ...options,
+ headers: {
+ 'Content-Type': 'application/json',
+ ...options.headers,
+ },
+ });
diff --git a/web/src/api/types.gen.ts b/web/src/api/types.gen.ts
new file mode 100644
index 0000000..2456691
--- /dev/null
+++ b/web/src/api/types.gen.ts
@@ -0,0 +1,452 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+export type ClientOptions = {
+ baseUrl: 'https://forky.mainnet.ethpandaops.io' | 'https://forky.hoodi.ethpandaops.io' | (string & {});
+};
+
+/**
+ * A beacon-chain slot number.
+ */
+export type Slot = number;
+
+/**
+ * A beacon-chain epoch number.
+ */
+export type Epoch = number;
+
+/**
+ * A beacon-chain slot number serialized as a string, following the
+ * beacon-API convention used by the fork-choice dump.
+ *
+ */
+export type SlotString = string;
+
+/**
+ * A beacon-chain epoch number serialized as a string, following the
+ * beacon-API convention used by the fork-choice dump.
+ *
+ */
+export type EpochString = string;
+
+/**
+ * A 32-byte hex-encoded root.
+ */
+export type Root = string;
+
+export type Error = {
+ /**
+ * The HTTP status code.
+ */
+ code: number;
+ /**
+ * A human-readable error message.
+ */
+ message: string;
+};
+
+/**
+ * Offset-based pagination cursor.
+ */
+export type PaginationCursor = {
+ /**
+ * The number of items to skip.
+ */
+ offset?: number;
+ /**
+ * The maximum number of items to return.
+ */
+ limit?: number;
+};
+
+export type PaginationResponse = {
+ /**
+ * The total number of matching items.
+ */
+ total: number;
+};
+
+/**
+ * Filters applied to a frame query. All fields are optional.
+ */
+export type FrameFilter = {
+ node?: string;
+ before?: string;
+ after?: string;
+ slot?: Slot;
+ epoch?: Epoch;
+ labels?: Array;
+ consensus_client?: string;
+ event_source?: string;
+};
+
+export type MetadataQuery = {
+ filter?: FrameFilter;
+ pagination?: PaginationCursor;
+};
+
+export type FrameMetadata = {
+ /**
+ * The frame ID.
+ */
+ id: string;
+ /**
+ * The node that provided the frame. For a beacon node this is the
+ * configured node ID; for Xatu it is the Xatu Sentry ID.
+ *
+ */
+ node: string;
+ /**
+ * When the frame was fetched.
+ */
+ fetched_at: string;
+ wall_clock_slot: Slot;
+ wall_clock_epoch: Epoch;
+ labels: Array;
+ consensus_client: string;
+ event_source: string;
+};
+
+export type Checkpoint = {
+ epoch: EpochString;
+ root: Root;
+};
+
+export type ForkChoiceNode = {
+ slot: SlotString;
+ block_root: Root;
+ parent_root: Root;
+ justified_epoch: EpochString;
+ finalized_epoch: EpochString;
+ /**
+ * The node's fork-choice weight, serialized as a string.
+ */
+ weight: string;
+ /**
+ * The node's validity status.
+ */
+ validity: 'valid' | 'invalid' | 'optimistic' | 'unknown';
+ execution_block_hash: Root;
+ extra_data?: {
+ [key: string]: unknown;
+ };
+};
+
+/**
+ * A beacon node's fork-choice dump.
+ */
+export type ForkChoice = {
+ justified_checkpoint: Checkpoint;
+ finalized_checkpoint: Checkpoint;
+ fork_choice_nodes: Array;
+};
+
+export type Frame = {
+ data: ForkChoice;
+ metadata: FrameMetadata;
+};
+
+export type EthereumNow = {
+ slot: Slot;
+ epoch: Epoch;
+};
+
+export type EthereumSpec = {
+ seconds_per_slot: number;
+ slots_per_epoch: number;
+ genesis_time: string;
+};
+
+export type EthereumSpecResult = {
+ network_name: string;
+ spec: EthereumSpec;
+};
+
+/**
+ * Filter and pagination for a metadata query.
+ */
+export type MetadataQuery2 = MetadataQuery;
+
+export type GetEthereumNowData = {
+ body?: never;
+ path?: never;
+ query?: never;
+ url: '/api/v1/ethereum/now';
+};
+
+export type GetEthereumNowErrors = {
+ /**
+ * The request was malformed.
+ */
+ 400: Error;
+ /**
+ * An unexpected error occurred.
+ */
+ default: Error;
+};
+
+export type GetEthereumNowError = GetEthereumNowErrors[keyof GetEthereumNowErrors];
+
+export type GetEthereumNowResponses = {
+ /**
+ * The current wall-clock slot and epoch.
+ */
+ 200: {
+ data: EthereumNow;
+ };
+};
+
+export type GetEthereumNowResponse = GetEthereumNowResponses[keyof GetEthereumNowResponses];
+
+export type GetEthereumSpecData = {
+ body?: never;
+ path?: never;
+ query?: never;
+ url: '/api/v1/ethereum/spec';
+};
+
+export type GetEthereumSpecErrors = {
+ /**
+ * The request was malformed.
+ */
+ 400: Error;
+ /**
+ * An unexpected error occurred.
+ */
+ default: Error;
+};
+
+export type GetEthereumSpecError = GetEthereumSpecErrors[keyof GetEthereumSpecErrors];
+
+export type GetEthereumSpecResponses = {
+ /**
+ * The configured network name and spec.
+ */
+ 200: {
+ data: EthereumSpecResult;
+ };
+};
+
+export type GetEthereumSpecResponse = GetEthereumSpecResponses[keyof GetEthereumSpecResponses];
+
+export type GetFrameData = {
+ body?: never;
+ path: {
+ /**
+ * The frame ID.
+ */
+ id: string;
+ };
+ query?: never;
+ url: '/api/v1/frames/{id}';
+};
+
+export type GetFrameErrors = {
+ /**
+ * The requested resource was not found.
+ */
+ 404: Error;
+ /**
+ * An unexpected error occurred.
+ */
+ default: Error;
+};
+
+export type GetFrameError = GetFrameErrors[keyof GetFrameErrors];
+
+export type GetFrameResponses = {
+ /**
+ * The requested fork-choice frame.
+ */
+ 200: {
+ data: {
+ frame: Frame;
+ };
+ };
+};
+
+export type GetFrameResponse = GetFrameResponses[keyof GetFrameResponses];
+
+export type ListMetadataData = {
+ /**
+ * Filter and pagination for a metadata query.
+ */
+ body: MetadataQuery2;
+ path?: never;
+ query?: never;
+ url: '/api/v1/metadata';
+};
+
+export type ListMetadataErrors = {
+ /**
+ * The request was malformed.
+ */
+ 400: Error;
+ /**
+ * An unexpected error occurred.
+ */
+ default: Error;
+};
+
+export type ListMetadataError = ListMetadataErrors[keyof ListMetadataErrors];
+
+export type ListMetadataResponses = {
+ /**
+ * A page of frame metadata.
+ */
+ 200: {
+ data: {
+ frames: Array;
+ pagination: PaginationResponse;
+ };
+ };
+};
+
+export type ListMetadataResponse = ListMetadataResponses[keyof ListMetadataResponses];
+
+export type ListMetadataNodesData = {
+ /**
+ * Filter and pagination for a metadata query.
+ */
+ body: MetadataQuery2;
+ path?: never;
+ query?: never;
+ url: '/api/v1/metadata/nodes';
+};
+
+export type ListMetadataNodesErrors = {
+ /**
+ * The request was malformed.
+ */
+ 400: Error;
+ /**
+ * An unexpected error occurred.
+ */
+ default: Error;
+};
+
+export type ListMetadataNodesError = ListMetadataNodesErrors[keyof ListMetadataNodesErrors];
+
+export type ListMetadataNodesResponses = {
+ /**
+ * A page of distinct node names.
+ */
+ 200: {
+ data: {
+ nodes: Array;
+ pagination: PaginationResponse;
+ };
+ };
+};
+
+export type ListMetadataNodesResponse = ListMetadataNodesResponses[keyof ListMetadataNodesResponses];
+
+export type ListMetadataSlotsData = {
+ /**
+ * Filter and pagination for a metadata query.
+ */
+ body: MetadataQuery2;
+ path?: never;
+ query?: never;
+ url: '/api/v1/metadata/slots';
+};
+
+export type ListMetadataSlotsErrors = {
+ /**
+ * The request was malformed.
+ */
+ 400: Error;
+ /**
+ * An unexpected error occurred.
+ */
+ default: Error;
+};
+
+export type ListMetadataSlotsError = ListMetadataSlotsErrors[keyof ListMetadataSlotsErrors];
+
+export type ListMetadataSlotsResponses = {
+ /**
+ * A page of distinct slots.
+ */
+ 200: {
+ data: {
+ slots: Array;
+ pagination: PaginationResponse;
+ };
+ };
+};
+
+export type ListMetadataSlotsResponse = ListMetadataSlotsResponses[keyof ListMetadataSlotsResponses];
+
+export type ListMetadataEpochsData = {
+ /**
+ * Filter and pagination for a metadata query.
+ */
+ body: MetadataQuery2;
+ path?: never;
+ query?: never;
+ url: '/api/v1/metadata/epochs';
+};
+
+export type ListMetadataEpochsErrors = {
+ /**
+ * The request was malformed.
+ */
+ 400: Error;
+ /**
+ * An unexpected error occurred.
+ */
+ default: Error;
+};
+
+export type ListMetadataEpochsError = ListMetadataEpochsErrors[keyof ListMetadataEpochsErrors];
+
+export type ListMetadataEpochsResponses = {
+ /**
+ * A page of distinct epochs.
+ */
+ 200: {
+ data: {
+ epochs: Array;
+ pagination: PaginationResponse;
+ };
+ };
+};
+
+export type ListMetadataEpochsResponse = ListMetadataEpochsResponses[keyof ListMetadataEpochsResponses];
+
+export type ListMetadataLabelsData = {
+ /**
+ * Filter and pagination for a metadata query.
+ */
+ body: MetadataQuery2;
+ path?: never;
+ query?: never;
+ url: '/api/v1/metadata/labels';
+};
+
+export type ListMetadataLabelsErrors = {
+ /**
+ * The request was malformed.
+ */
+ 400: Error;
+ /**
+ * An unexpected error occurred.
+ */
+ default: Error;
+};
+
+export type ListMetadataLabelsError = ListMetadataLabelsErrors[keyof ListMetadataLabelsErrors];
+
+export type ListMetadataLabelsResponses = {
+ /**
+ * A page of distinct labels.
+ */
+ 200: {
+ data: {
+ labels: Array;
+ pagination: PaginationResponse;
+ };
+ };
+};
+
+export type ListMetadataLabelsResponse = ListMetadataLabelsResponses[keyof ListMetadataLabelsResponses];
diff --git a/web/src/api/zod.gen.ts b/web/src/api/zod.gen.ts
new file mode 100644
index 0000000..62eb0c8
--- /dev/null
+++ b/web/src/api/zod.gen.ts
@@ -0,0 +1,264 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import * as z from 'zod/mini';
+
+/**
+ * A beacon-chain slot number.
+ */
+export const zSlot = z.coerce
+ .bigint()
+ .check(
+ z.gte(BigInt(0)),
+ z.maximum(BigInt('9223372036854775807'), { error: 'Invalid value: Expected int64 to be <= 9223372036854775807' })
+ );
+
+/**
+ * A beacon-chain epoch number.
+ */
+export const zEpoch = z.coerce
+ .bigint()
+ .check(
+ z.gte(BigInt(0)),
+ z.maximum(BigInt('9223372036854775807'), { error: 'Invalid value: Expected int64 to be <= 9223372036854775807' })
+ );
+
+/**
+ * A beacon-chain slot number serialized as a string, following the
+ * beacon-API convention used by the fork-choice dump.
+ *
+ */
+export const zSlotString = z.string();
+
+/**
+ * A beacon-chain epoch number serialized as a string, following the
+ * beacon-API convention used by the fork-choice dump.
+ *
+ */
+export const zEpochString = z.string();
+
+/**
+ * A 32-byte hex-encoded root.
+ */
+export const zRoot = z.string();
+
+export const zError = z.object({
+ code: z.int(),
+ message: z.string(),
+});
+
+/**
+ * Offset-based pagination cursor.
+ */
+export const zPaginationCursor = z.object({
+ offset: z._default(z.optional(z.int()), 0),
+ limit: z._default(z.optional(z.int()), 1000),
+});
+
+export const zPaginationResponse = z.object({
+ total: z.coerce
+ .bigint()
+ .check(
+ z.minimum(BigInt('-9223372036854775808'), {
+ error: 'Invalid value: Expected int64 to be >= -9223372036854775808',
+ }),
+ z.maximum(BigInt('9223372036854775807'), { error: 'Invalid value: Expected int64 to be <= 9223372036854775807' })
+ ),
+});
+
+/**
+ * Filters applied to a frame query. All fields are optional.
+ */
+export const zFrameFilter = z.object({
+ node: z.optional(z.string()),
+ before: z.optional(z.iso.datetime()),
+ after: z.optional(z.iso.datetime()),
+ slot: z.optional(zSlot),
+ epoch: z.optional(zEpoch),
+ labels: z.optional(z.array(z.string())),
+ consensus_client: z.optional(z.string()),
+ event_source: z.optional(z.string()),
+});
+
+export const zMetadataQuery = z.object({
+ filter: z.optional(zFrameFilter),
+ pagination: z.optional(zPaginationCursor),
+});
+
+export const zFrameMetadata = z.object({
+ id: z.string(),
+ node: z.string(),
+ fetched_at: z.iso.datetime(),
+ wall_clock_slot: zSlot,
+ wall_clock_epoch: zEpoch,
+ labels: z.array(z.string()),
+ consensus_client: z.string(),
+ event_source: z.string(),
+});
+
+export const zCheckpoint = z.object({
+ epoch: zEpochString,
+ root: zRoot,
+});
+
+export const zForkChoiceNode = z.object({
+ slot: zSlotString,
+ block_root: zRoot,
+ parent_root: zRoot,
+ justified_epoch: zEpochString,
+ finalized_epoch: zEpochString,
+ weight: z.string(),
+ validity: z.enum(['valid', 'invalid', 'optimistic', 'unknown']),
+ execution_block_hash: zRoot,
+ extra_data: z.optional(z.record(z.string(), z.unknown())),
+});
+
+/**
+ * A beacon node's fork-choice dump.
+ */
+export const zForkChoice = z.object({
+ justified_checkpoint: zCheckpoint,
+ finalized_checkpoint: zCheckpoint,
+ fork_choice_nodes: z.array(zForkChoiceNode),
+});
+
+export const zFrame = z.object({
+ data: zForkChoice,
+ metadata: zFrameMetadata,
+});
+
+export const zEthereumNow = z.object({
+ slot: zSlot,
+ epoch: zEpoch,
+});
+
+export const zEthereumSpec = z.object({
+ seconds_per_slot: z.coerce
+ .bigint()
+ .check(
+ z.minimum(BigInt('-9223372036854775808'), {
+ error: 'Invalid value: Expected int64 to be >= -9223372036854775808',
+ }),
+ z.maximum(BigInt('9223372036854775807'), { error: 'Invalid value: Expected int64 to be <= 9223372036854775807' })
+ ),
+ slots_per_epoch: z.coerce
+ .bigint()
+ .check(
+ z.minimum(BigInt('-9223372036854775808'), {
+ error: 'Invalid value: Expected int64 to be >= -9223372036854775808',
+ }),
+ z.maximum(BigInt('9223372036854775807'), { error: 'Invalid value: Expected int64 to be <= 9223372036854775807' })
+ ),
+ genesis_time: z.iso.datetime(),
+});
+
+export const zEthereumSpecResult = z.object({
+ network_name: z.string(),
+ spec: zEthereumSpec,
+});
+
+/**
+ * Filter and pagination for a metadata query.
+ */
+export const zMetadataQuery2 = zMetadataQuery;
+
+/**
+ * The current wall-clock slot and epoch.
+ */
+export const zGetEthereumNowResponse = z.object({
+ data: zEthereumNow,
+});
+
+/**
+ * The configured network name and spec.
+ */
+export const zGetEthereumSpecResponse = z.object({
+ data: zEthereumSpecResult,
+});
+
+export const zGetFramePath = z.object({
+ id: z.string(),
+});
+
+/**
+ * The requested fork-choice frame.
+ */
+export const zGetFrameResponse = z.object({
+ data: z.object({
+ frame: zFrame,
+ }),
+});
+
+/**
+ * Filter and pagination for a metadata query.
+ */
+export const zListMetadataBody = zMetadataQuery2;
+
+/**
+ * A page of frame metadata.
+ */
+export const zListMetadataResponse = z.object({
+ data: z.object({
+ frames: z.array(zFrameMetadata),
+ pagination: zPaginationResponse,
+ }),
+});
+
+/**
+ * Filter and pagination for a metadata query.
+ */
+export const zListMetadataNodesBody = zMetadataQuery2;
+
+/**
+ * A page of distinct node names.
+ */
+export const zListMetadataNodesResponse = z.object({
+ data: z.object({
+ nodes: z.array(z.string()),
+ pagination: zPaginationResponse,
+ }),
+});
+
+/**
+ * Filter and pagination for a metadata query.
+ */
+export const zListMetadataSlotsBody = zMetadataQuery2;
+
+/**
+ * A page of distinct slots.
+ */
+export const zListMetadataSlotsResponse = z.object({
+ data: z.object({
+ slots: z.array(zSlot),
+ pagination: zPaginationResponse,
+ }),
+});
+
+/**
+ * Filter and pagination for a metadata query.
+ */
+export const zListMetadataEpochsBody = zMetadataQuery2;
+
+/**
+ * A page of distinct epochs.
+ */
+export const zListMetadataEpochsResponse = z.object({
+ data: z.object({
+ epochs: z.array(zEpoch),
+ pagination: zPaginationResponse,
+ }),
+});
+
+/**
+ * Filter and pagination for a metadata query.
+ */
+export const zListMetadataLabelsBody = zMetadataQuery2;
+
+/**
+ * A page of distinct labels.
+ */
+export const zListMetadataLabelsResponse = z.object({
+ data: z.object({
+ labels: z.array(z.string()),
+ pagination: zPaginationResponse,
+ }),
+});
diff --git a/web/src/assets/forky-mark-small.svg b/web/src/assets/forky-mark-small.svg
new file mode 100644
index 0000000..3cafc98
--- /dev/null
+++ b/web/src/assets/forky-mark-small.svg
@@ -0,0 +1,17 @@
+
diff --git a/web/src/assets/forky-mark.svg b/web/src/assets/forky-mark.svg
new file mode 100644
index 0000000..1ccd5a4
--- /dev/null
+++ b/web/src/assets/forky-mark.svg
@@ -0,0 +1,49 @@
+
diff --git a/web/src/assets/forky_logo.png b/web/src/assets/forky_logo.png
index 0c77364..dba1e93 100644
Binary files a/web/src/assets/forky_logo.png and b/web/src/assets/forky_logo.png differ
diff --git a/web/src/assets/forky_logo_small.png b/web/src/assets/forky_logo_small.png
index ecfd1bf..a604849 100644
Binary files a/web/src/assets/forky_logo_small.png and b/web/src/assets/forky_logo_small.png differ
diff --git a/web/src/components/AggregatedBlockSummary.tsx b/web/src/components/AggregatedBlockSummary.tsx
index dce6230..78307c7 100644
--- a/web/src/components/AggregatedBlockSummary.tsx
+++ b/web/src/components/AggregatedBlockSummary.tsx
@@ -1,20 +1,18 @@
-import {
- CheckCircleIcon,
- MagnifyingGlassIcon,
- XCircleIcon,
- ArrowTopRightOnSquareIcon,
-} from '@heroicons/react/20/solid';
+import { CheckCircleIcon, MagnifyingGlassIcon, XCircleIcon } from '@heroicons/react/20/solid';
import classNames from 'clsx';
-import { Link } from 'wouter';
+import Link from '@components/Link';
import { ProcessedData, WeightedNodeAttributes } from '@app/types/graph';
-import { truncateHash } from '@app/utils/strings';
import Loading from '@components/Loading';
+import { SummaryCard, SummaryLink, SummaryRow, SummarySection } from '@components/Summary';
import useEthereum from '@contexts/ethereum';
import useSelection, { AggregatedFramesBlock } from '@contexts/selection';
import { useFrameQueries } from '@hooks/useQuery';
import { aggregateProcessedData } from '@utils/graph';
+const HEADER_CELL = 'px-3 py-2 text-center text-xs font-semibold text-foreground';
+const ICON_CELL = 'whitespace-nowrap py-2 text-sm text-muted';
+
export default function AggregatedBlockSummary({ frameIds, blockRoot }: AggregatedFramesBlock) {
const { slotsPerEpoch } = useEthereum();
const { clearAll, setFrameBlock } = useSelection();
@@ -48,238 +46,197 @@ export default function AggregatedBlockSummary({ frameIds, blockRoot }: Aggregat
);
return (
-
Page not found
+
+
+
);
}
diff --git a/web/src/api/@tanstack/react-query.gen.ts b/web/src/api/@tanstack/react-query.gen.ts
new file mode 100644
index 0000000..273c2ec
--- /dev/null
+++ b/web/src/api/@tanstack/react-query.gen.ts
@@ -0,0 +1,261 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import { queryOptions, type UseMutationOptions } from '@tanstack/react-query';
+
+import { client } from '../client.gen';
+import {
+ getEthereumNow,
+ getEthereumSpec,
+ getFrame,
+ listMetadata,
+ listMetadataEpochs,
+ listMetadataLabels,
+ listMetadataNodes,
+ listMetadataSlots,
+ type Options,
+} from '../sdk.gen';
+import type {
+ GetEthereumNowData,
+ GetEthereumNowError,
+ GetEthereumNowResponse,
+ GetEthereumSpecData,
+ GetEthereumSpecError,
+ GetEthereumSpecResponse,
+ GetFrameData,
+ GetFrameError,
+ GetFrameResponse,
+ ListMetadataData,
+ ListMetadataEpochsData,
+ ListMetadataEpochsError,
+ ListMetadataEpochsResponse,
+ ListMetadataError,
+ ListMetadataLabelsData,
+ ListMetadataLabelsError,
+ ListMetadataLabelsResponse,
+ ListMetadataNodesData,
+ ListMetadataNodesError,
+ ListMetadataNodesResponse,
+ ListMetadataResponse,
+ ListMetadataSlotsData,
+ ListMetadataSlotsError,
+ ListMetadataSlotsResponse,
+} from '../types.gen';
+
+export type QueryKey404
++ Page not found +
-
-
+
);
}
diff --git a/web/src/components/AggregatedFramesSummary.tsx b/web/src/components/AggregatedFramesSummary.tsx
index 40923e5..eaa7836 100644
--- a/web/src/components/AggregatedFramesSummary.tsx
+++ b/web/src/components/AggregatedFramesSummary.tsx
@@ -1,14 +1,20 @@
-import { MagnifyingGlassIcon, ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid';
+import { MagnifyingGlassIcon } from '@heroicons/react/20/solid';
import classNames from 'clsx';
import ReactTimeAgo from 'react-time-ago';
-import { Link } from 'wouter';
+import Link from '@components/Link';
import { ProcessedData, WeightedNodeAttributes } from '@app/types/graph';
import Download from '@components/Download';
import Loading from '@components/Loading';
+import { SummaryLink } from '@components/Summary';
import useSelection from '@contexts/selection';
import { useFrameQueries } from '@hooks/useQuery';
import { aggregateProcessedData } from '@utils/graph';
+import { truncateHash } from '@utils/strings';
+
+const HEADER_CELL =
+ 'px-2.5 py-2 text-left font-mono text-[10px] font-semibold uppercase tracking-wider text-faint';
+const BODY_CELL = 'whitespace-nowrap px-2.5 py-2 text-sm text-foreground';
export default function AggregatedFramesSummary({ ids }: { ids: string[] }) {
const { clearAll } = useSelection();
@@ -25,206 +31,153 @@ export default function AggregatedFramesSummary({ ids }: { ids: string[] }) {
);
return (
- -
-
- Epoch -
- - {Math.floor(node.slot / slotsPerEpoch)} - -
- Slot -
- - {node.slot} - -
- Block Root -
- - - - {truncateHash(node.blockRoot)} - - - - {node.blockRoot} - -
- Status -
-
-
-
-
-
-
-
-
-
-
-
- | - Source - | -- Canonical - | -- Seen - | +
|---|
| + Source + | ++ Canonical + | ++ Seen + | + {hasFinalized && ( ++ Finalized + | + )} + {hasJustified && ( ++ Justified + | + )} + {hasInvalid && ( ++ Validity + | + )} + {hasOrphaned && ( ++ Detached + | + )} ++ View + | +||||
|---|---|---|---|---|---|---|---|---|---|---|---|
|
+ |
+
+
+ {seen &&
+ (canonical ? (
+
+ |
+
+
+ {seen ? (
+
+ |
{hasFinalized && (
- - Finalized - | +
+
+ {attributes?.checkpoint === 'finalized' ? (
+
+ |
)}
{hasJustified && (
- - Justified - | +
+
+ {attributes?.checkpoint === 'justified' ? (
+
+ |
)}
{hasInvalid && (
- - Validity - | +
+
+ {validity.toLowerCase() === 'valid' ? (
+
+ |
)}
{hasOrphaned && (
- - Detached - | +
+
+ {orphaned ? (
+
+ |
)}
- - View - | -
| - - {data.frame.metadata.node} + |
+ {attributes && (
+
+
+ setFrameBlock({ blockRoot, frameId: data.frame.metadata.id })
+ }
+ >
+ |
-
-
- {seen &&
- (canonical ? (
-
- |
-
-
- {seen ? (
-
- |
- {hasFinalized && (
-
-
- {attributes?.checkpoint === 'finalized' ? (
-
- |
- )}
- {hasJustified && (
-
-
- {attributes?.checkpoint === 'justified' ? (
-
- |
- )}
- {hasInvalid && (
-
-
- {validity.toLowerCase() === 'valid' ? (
-
- |
- )}
- {hasOrphaned && (
-
-
- {orphaned ? (
-
- |
- )}
-
- {attributes && (
-
-
- setFrameBlock({ blockRoot, frameId: data.frame.metadata.id })
- }
- >
-
- )}
- |
-
-
-
-
-
-
);
diff --git a/web/src/components/AggregatedNode.tsx b/web/src/components/AggregatedNode.tsx
index 9fc7dd4..ff263bf 100644
--- a/web/src/components/AggregatedNode.tsx
+++ b/web/src/components/AggregatedNode.tsx
@@ -1,10 +1,59 @@
-import { useState, memo } from 'react';
+import { memo } from 'react';
import { EyeIcon, CheckIcon, FlagIcon } from '@heroicons/react/20/solid';
import classNames from 'clsx';
import ProgressCircle from '@components/ProgressCircle';
+/* Mirrors the WeightedNode status recipe: dim core, bright rim, soft glow. */
+const NODE_STYLES: Record<
+ string,
+ { fill: string; arc: string; track: string; label: string; glow: string }
+> = {
+ canonical: {
+ fill: 'bg-canonical-deep',
+ arc: 'text-canonical-ring',
+ track: 'text-canonical-edge',
+ label: 'text-canonical',
+ glow: 'shadow-[0_0_90px_-15px_var(--color-canonical-ring)]',
+ },
+ fork: {
+ fill: 'bg-fork-deep',
+ arc: 'text-fork-ring',
+ track: 'text-fork-edge',
+ label: 'text-fork',
+ glow: 'shadow-[0_0_90px_-15px_var(--color-fork-ring)]',
+ },
+ finalized: {
+ fill: 'bg-finalized-deep',
+ arc: 'text-finalized-ring',
+ track: 'text-finalized-edge',
+ label: 'text-finalized',
+ glow: 'shadow-[0_0_90px_-15px_var(--color-finalized-ring)]',
+ },
+ justified: {
+ fill: 'bg-justified-deep',
+ arc: 'text-justified-ring',
+ track: 'text-justified-edge',
+ label: 'text-justified',
+ glow: 'shadow-[0_0_90px_-15px_var(--color-justified-ring)]',
+ },
+ invalid: {
+ fill: 'bg-invalid-deep',
+ arc: 'text-invalid-ring',
+ track: 'text-invalid-edge',
+ label: 'text-invalid',
+ glow: 'shadow-[0_0_90px_-15px_var(--color-invalid-ring)]',
+ },
+ optimistic: {
+ fill: 'bg-optimistic-deep',
+ arc: 'text-optimistic-ring',
+ track: 'text-optimistic-edge',
+ label: 'text-optimistic',
+ glow: 'shadow-[0_0_90px_-15px_var(--color-optimistic-ring)]',
+ },
+};
+
function AggregatedNode({
id,
hash,
@@ -40,85 +89,31 @@ function AggregatedNode({
className?: string;
onClick?: (hash: string) => void;
}) {
- const [isHighlighted, setIsHighlighted] = useState(false);
-
- const [color, backgroundColor, borderColor, title] = (() => {
- if (valid !== seen) {
- return [
- 'text-red-600',
- 'text-red-800',
- 'border-red-500 dark:border-red-900',
- `${seen - valid} NOT VALID`,
- ];
- }
-
- if (orphans > 0) {
- return [
- 'text-red-600',
- 'text-red-800',
- 'border-red-500 dark:border-red-900',
- `${orphans} DETACHED`,
- ];
- }
-
- if (finalizedCheckpoints > 0) {
- return [
- 'text-fuchsia-600',
- 'text-fuchsia-800',
- 'border-fuchsia-500 dark:border-fuchsia-900',
- 'FINALIZED',
- ];
- }
-
- if (justifiedCheckpoints > 0) {
- return [
- 'text-indigo-600',
- 'text-indigo-800',
- 'border-indigo-500 dark:border-indigo-900',
- 'JUSTIFIED',
- ];
- }
+ const [styleKey, title] = ((): [string, string] => {
+ if (valid !== seen) return ['invalid', `${seen - valid} NOT VALID`];
+ if (orphans > 0) return ['invalid', `${orphans} DETACHED`];
+ if (finalizedCheckpoints > 0) return ['finalized', 'FINALIZED'];
+ if (justifiedCheckpoints > 0) return ['justified', 'JUSTIFIED'];
switch (type) {
case 'canonical':
- if (optimistic > 0) {
- return [
- 'text-yellow-600',
- 'text-yellow-800',
- 'border-yellow-500 dark:border-yellow-900',
- `${optimistic}/${valid} OPTIMISTIC`,
- ];
- }
- return [
- 'text-emerald-600',
- 'text-emerald-800',
- 'border-emerald-500 dark:border-emerald-900',
- 'VALID',
- ];
+ if (optimistic > 0) return ['optimistic', `${optimistic}/${valid} OPTIMISTIC`];
+ return ['canonical', 'VALID'];
case 'fork':
- return [
- 'text-amber-600',
- 'text-amber-800',
- 'border-amber-500 dark:border-amber-900',
- optimistic > 0 ? `${optimistic}/${valid} OPTIMISTIC` : 'VALID',
- ];
+ return ['fork', optimistic > 0 ? `${optimistic}/${valid} OPTIMISTIC` : 'VALID'];
default:
- return [
- 'text-emerald-600',
- 'text-emerald-800',
- 'border-emerald-500 dark:border-emerald-900',
- type,
- ];
+ return ['canonical', type];
}
})();
+ const styles = NODE_STYLES[styleKey] ?? NODE_STYLES.canonical;
return (
-
-
-
+
+
+ {data.frame.metadata.node}
+
+
+
+
+
+ {head?.slot}
+
+
+ {head?.blockRoot && truncateHash(head.blockRoot)}
+
+ {data.frame.data.finalized_checkpoint?.epoch}
+
+ {data.frame.data.finalized_checkpoint?.root &&
+ truncateHash(data.frame.data.finalized_checkpoint.root)}
+
+ {data.frame.data.justified_checkpoint?.epoch}
+
+ {data.frame.data.justified_checkpoint?.root &&
+ truncateHash(data.frame.data.justified_checkpoint.root)}
+
+
+
+ {truncateHash(data.frame.metadata.id)}
+
+
+
+
+
+ );
+ })}
+
+
| - Source - | -- Taken At - | -- Head - | -- Head Root - | -- Finalized - | -- Justified - | -- Snapshot ID - | -- View - | -||
|---|---|---|---|---|---|---|---|---|---|
| - Slot - | -- Root - | -- Epoch - | -- Root - | -- Epoch - | -- Root - | -||||
| Data error | -
| + Source + | ++ Taken At + | ++ Head + | ++ Finalized + | ++ Justified + | ++ Snapshot ID + | ++ View + | +|||
|---|---|---|---|---|---|---|---|---|---|
| + Slot + | ++ Root + | ++ Epoch + | ++ Root + | ++ Epoch + | ++ Root + | +||||
| + Data error + | +|||||||||
|
-
- {data.frame.metadata.node}
-
- |
-
- |
- - {head?.slot} - | -- {head?.blockRoot} - | -- {data.frame.data.finalized_checkpoint?.epoch} - | -- {data.frame.data.finalized_checkpoint?.root} - | -- {data.frame.data.justified_checkpoint?.epoch} - | -- {data.frame.data.justified_checkpoint?.root} - | -
-
- {data.frame.metadata.id}
-
- |
-
- |
-
onClick?.(hash)}
- onMouseEnter={() => setIsHighlighted(true)}
- onMouseLeave={() => setIsHighlighted(false)}
>
diff --git a/web/src/components/BYOFrameBlockSummary.tsx b/web/src/components/BYOFrameBlockSummary.tsx
index 87ec687..b1a56f6 100644
--- a/web/src/components/BYOFrameBlockSummary.tsx
+++ b/web/src/components/BYOFrameBlockSummary.tsx
@@ -2,10 +2,10 @@ import ReactTimeAgo from 'react-time-ago';
import Download from '@components/Download';
import Loading from '@components/Loading';
+import { SummaryCard, SummaryRow, SummarySection, ValidityBadge } from '@components/Summary';
import useEthereum from '@contexts/ethereum';
import useFocus from '@contexts/focus';
import { FrameBlock } from '@contexts/selection';
-import { truncateHash } from '@utils/strings';
export default function BYOFrameBlockSummary({ blockRoot }: FrameBlock) {
const { byoData: data } = useFocus();
@@ -23,121 +23,44 @@ export default function BYOFrameBlockSummary({ blockRoot }: FrameBlock) {
return (
<>
- {title}
-- {hash.substring(0, 6)}...{hash.substring(hash.length - 4)} +
+ {title} +
++ {hash.substring(0, 6)}…{hash.substring(hash.length - 4)}
-+
{finalizedCheckpoints > 0 || justifiedCheckpoints > 0 ? (
<>
-
-
-
-
- -
-
- Epoch -
- - {Math.floor(Number.parseInt(node.slot) / slotsPerEpoch)} - -
- Slot -
- - {node.slot} - -
- - Snapshot Time - -
-
-
- ({data.frame.metadata.fetched_at}) -
- - Block Root -
- - - - {truncateHash(node.block_root)} - - - - {node.block_root} - -
- - Parent Root - -
- - - - {truncateHash(node.parent_root)} - - - - {node.parent_root} - -
- - Execution Block Hash - -
- - - - {truncateHash(node.execution_block_hash)} - - - - {node.execution_block_hash} - -
- Weight -
- - {node.weight} - -
- Validity -
- - {node.validity} - -
- - Justified Epoch - -
- - {node.justified_epoch} - -
- - Finalized Epoch - -
- - {node.finalized_epoch} - -
- - Extra data - -
- - {key.replaceAll('_', ' ')} - -
- - {`${value}`} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {node.extra_data && (
- <>
-
-
- {Object.entries(node.extra_data).map(([key, value]) => (
-
-
- ))}
-
- )}
-
+
+
+ {Math.floor(Number.parseInt(node.slot) / slotsPerEpoch)}
+
+ {node.slot}
+
+
+
+ {node.block_root}
+
+
+ {node.parent_root}
+
+
+ {node.execution_block_hash}
+
+
+ {node.weight}
+
+
+
+ {node.justified_epoch}
+ {node.finalized_epoch}
+ {node.extra_data && (
+ <>
+
+ {`${value}`}
+
+ ))}
+
+ )}
+
+
{
+ if (new URLSearchParams(window.location.search).get('t')) {
+ navigate(pathname, { replace: true });
+ }
+ }, [pathname, navigate]);
+
+ return null;
+}
diff --git a/web/src/components/ConcatNode.tsx b/web/src/components/ConcatNode.tsx
index 506c789..db929e3 100644
--- a/web/src/components/ConcatNode.tsx
+++ b/web/src/components/ConcatNode.tsx
@@ -21,9 +21,9 @@ function ConcatNode({
(null);
const blurAllInputs = () => {
@@ -33,9 +43,11 @@ function TimelineControl() {
playing,
} = useFocus();
const { genesisTime, secondsPerSlot } = useEthereum();
+ const now = useNow();
- const slotDiff = Math.floor((Date.now() - genesisTime) / 1000 / secondsPerSlot) - focusedSlot;
+ const slotDiff = Math.floor((now - genesisTime) / 1000 / secondsPerSlot) - focusedSlot;
const isCloseToLiveSlot = slotDiff <= 3 && slotDiff >= -1;
+ const isLive = playing && isCloseToLiveSlot;
const handleBack = () => {
if (focusedTimeIntoSlot > 500) {
@@ -59,64 +71,45 @@ function TimelineControl() {
};
return (
-
-
diff --git a/web/src/components/Control.tsx b/web/src/components/Control.tsx
index 5ee1f9a..363e93e 100644
--- a/web/src/components/Control.tsx
+++ b/web/src/components/Control.tsx
@@ -6,12 +6,22 @@ import {
PauseIcon,
PlayIcon,
} from '@heroicons/react/20/solid';
+import classNames from 'clsx';
import EditableInput from '@components/EditableInput';
import useEthereum from '@contexts/ethereum';
import useFocus from '@contexts/focus';
+import useNow from '@hooks/useNow';
import useOutsideInteraction from '@hooks/useOutsideInteraction';
+const FIELD =
+ 'flex items-center gap-2 rounded-lg border border-border-strong bg-field px-2.5 transition-colors duration-150 focus-within:border-accent';
+const FIELD_LABEL = 'font-mono text-[9px]/3 uppercase tracking-widest text-faint';
+const FIELD_INPUT =
+ 'block w-full bg-transparent py-1.5 font-mono text-xs/5 tabular-nums text-foreground focus:outline-hidden';
+const STEP_BUTTON =
+ 'hidden size-9 shrink-0 items-center justify-center rounded-md text-muted transition-colors duration-150 hover:bg-overlay/5 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent md:flex';
+
function TimelineControl() {
const controlRef = useRefCONCAT
-+
CONCAT
+{slotStart} → {slotEnd}
-
- ;
+
+function EditableInputSet() {
+ const [textValue, setTextValue] = useState('ams3-teku-001');
+ const [slotValue, setSlotValue] = useState(107);
+ const [timeValue, setTimeValue] = useState(new Date('2024-01-01T00:21:24.000Z').getTime());
+
+ return (
+
- extends Omit, 'value' | 'onChange' | 'type'> {
+interface Props extends Omit<
+ HTMLAttributes,
+ 'value' | 'onChange' | 'type'
+> {
value: ValueType[T];
onChange: (newValue: ValueType[T]) => void;
type: T;
}
-function EditableInput({ value, onChange, type, id }: Props) {
+const DEFAULT_CLASSES =
+ 'block w-full rounded-lg border border-border-strong bg-field px-2.5 py-1.5 font-mono text-xs/5 tabular-nums text-foreground transition-colors duration-150 placeholder:text-faint focus:border-accent focus:outline-hidden';
+
+function EditableInput({ value, onChange, type, id, className }: Props) {
const [isEditing, setIsEditing] = useState(false);
const [inputValue, setInputValue] = useState(value);
@@ -49,11 +54,15 @@ function EditableInput
-
+
);
diff --git a/web/src/components/Controls.stories.tsx b/web/src/components/Controls.stories.tsx
new file mode 100644
index 0000000..a6c9278
--- /dev/null
+++ b/web/src/components/Controls.stories.tsx
@@ -0,0 +1,130 @@
+import { useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/tanstack-react';
+import { ArrowDownTrayIcon, CheckCircleIcon } from '@heroicons/react/20/solid';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
+
+import Download from '@components/Download';
+import EditableInput from '@components/EditableInput';
+import Icon from '@components/Icon';
+import { ModeToggle } from '@components/ModeToggle';
+import Share from '@components/Share';
+import { withForkyProviders } from '@app/stories/storybook';
+
+const meta = {
+ title: 'Components/Controls',
+ parameters: {
+ layout: 'fullscreen',
+ tanstack: {
+ router: {
+ path: '/',
+ },
+ },
+ },
+ decorators: [withForkyProviders()],
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj
+
+
-
-
+
+
-
-
-
-
- setFocusedTime(value)}
- type="datetime-local"
- />
-
-
-
+
+
+
+
+
+ );
+}
+
+export const ActionsAndThemeToggle: Story = {
+ render: () => (
+
+
+ ),
+};
+
+export const EditableInputs: Story = {
+ render: () => (
+
+
+
+
+
+
+
+
+ ),
+};
+
+export const EditableInputEditing: Story = {
+ render: () => (
+
+
+ ),
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const input = canvas.getByDisplayValue('ams3-teku-001');
+ await userEvent.click(input);
+ await userEvent.clear(input);
+ await userEvent.type(input, 'syd1-lighthouse-001');
+ await expect(input).toHaveValue('syd1-lighthouse-001');
+ },
+};
+
+export const ShareClosed: Story = {
+ render: () => (
+
+
+ ),
+};
+
+export const ShareDialogOpen: Story = {
+ render: () => (
+
+
+ ),
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement.ownerDocument.body);
+ await userEvent.click(canvas.getByTitle('Share link'));
+ await waitFor(() => expect(canvas.getByRole('button', { name: /copy/i })).toBeVisible());
+ },
+};
diff --git a/web/src/components/Download.tsx b/web/src/components/Download.tsx
index 02705ff..56ec391 100644
--- a/web/src/components/Download.tsx
+++ b/web/src/components/Download.tsx
@@ -21,7 +21,7 @@ export default function Download({
href={`data:${type};charset=utf-8,${encodeURIComponent(data)}`}
download={filename}
className={classNames(
- 'flex items-center rounded transition hover:bg-stone-900/5 dark:hover:bg-white/5 gap-2',
+ 'flex items-center rounded transition hover:bg-overlay/5 gap-2',
`text-${size}`,
size === 'sm' && 'p-2',
size === 'md' && 'p-3',
diff --git a/web/src/components/Edge.tsx b/web/src/components/Edge.tsx
index 746a94f..5d46d2b 100644
--- a/web/src/components/Edge.tsx
+++ b/web/src/components/Edge.tsx
@@ -34,7 +34,7 @@ function Edge({
return (
);
diff --git a/web/src/components/EditableInput.tsx b/web/src/components/EditableInput.tsx
index b833458..247c550 100644
--- a/web/src/components/EditableInput.tsx
+++ b/web/src/components/EditableInput.tsx
@@ -10,14 +10,19 @@ type ValueType = {
: never;
};
-interface Props