cartesi · brunomenezes · Dec 17, 2025 · Dec 17, 2025 · Dec 17, 2025 · Dec 17, 2025
diff --git a/apps/dave/.env.development b/apps/dave/.env.development
@@ -0,0 +1,3 @@
+NEXT_PUBLIC_DEBUG_ENABLED=false
+NEXT_PUBLIC_MOCK_ENABLED=false
+NEXT_PUBLIC_CARTESI_NODE_RPC_URL="http://127.0.0.1:10011/rpc"
diff --git a/apps/dave/.env.production b/apps/dave/.env.production
@@ -0,0 +1,3 @@
+NEXT_PUBLIC_DEBUG_ENABLED=false
+NEXT_PUBLIC_MOCK_ENABLED=false
+NEXT_PUBLIC_CARTESI_NODE_RPC_URL="http://127.0.0.1:10011/rpc"
diff --git a/apps/dave/.storybook/preview.tsx b/apps/dave/.storybook/preview.tsx
@@ -1,8 +1,8 @@
 import { MantineProvider } from "@mantine/core";
 import "@mantine/core/styles.css";
 import type { Preview, StoryContext, StoryFn } from "@storybook/nextjs";
-import React from "react";
 import Layout from "../src/components/layout/Layout";
+import DataProvider from '../src/providers/DataProvider';
 import theme from "../src/providers/theme";
 
 // @ts-expect-error JSON.stringify will try to call toJSON on bigints.  ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#use_within_json
@@ -15,7 +15,7 @@ const withLayout = (StoryFn: StoryFn, context: StoryContext) => {
     const [sectionType] = title.split("/");
 
     if (sectionType.toLowerCase().includes("pages"))
-        return <Layout>{StoryFn(context.args, context)}</Layout>;
+        return <DataProvider><Layout>{StoryFn(context.args, context)}</Layout></DataProvider>;
 
     return <>{StoryFn(context.args, context)}</>;
 };

diff --git a/apps/dave/additional.d.ts b/apps/dave/additional.d.ts
@@ -0,0 +1,22 @@
+declare namespace NodeJS {
+    export interface ProcessEnv {
+        /**
+         * When enabled display a few header actions to help generate mock data
+         * from react-query current query cache information.
+         */
+        NEXT_PUBLIC_DEBUG_ENABLED: string;
+
+        /**
+         * When enabled will inject query data directly into the
+         * react query cache information. Also, sets the client
+         * to never gc the cache or mark this data as stale (so it will never go to the network)
+         * The mock is usually a recording of a node-api real responses.
+         */
+        NEXT_PUBLIC_MOCK_ENABLED: string;
+
+        /**
+         * Cartesi rollups node RPC endpoint.
+         */
+        NEXT_PUBLIC_CARTESI_NODE_RPC_URL: string;
+    }
+}
diff --git a/apps/dave/package.json b/apps/dave/package.json
@@ -18,6 +18,7 @@
         "@cartesi/wagmi": "2.0.0-alpha.27",
         "@mantine/core": "^8.3.10",
         "@mantine/hooks": "^8.3.10",
+        "@mantine/notifications": "^8.3.10",
         "@raugfer/jazzicon": "^1.0.6",
         "@tabler/icons-react": "^3.35.0",
         "@tanstack/react-query": "catalog:",

diff --git a/...e/src/app/apps/[application]/epochs/[epochIndex]/tournaments/[tournamentAddress]/page.tsx b/...e/src/app/apps/[application]/epochs/[epochIndex]/tournaments/[tournamentAddress]/page.tsx
@@ -1,3 +1,4 @@
+import { notFound } from "next/navigation";
 import { getAddress } from "viem";
 import { TournamentContainer } from "../../../../../../../containers/TournamentContainer";
 
@@ -6,8 +7,16 @@ export default async function Page(
 ) {
     const params = await props.params;
     const application = params.application;
-    const epochIndex = BigInt(params.epochIndex);
-    const tournamentAddress = getAddress(params.tournamentAddress);
+    let epochIndex, tournamentAddress;
+
+    try {
+        epochIndex = BigInt(params.epochIndex);
+        tournamentAddress = getAddress(params.tournamentAddress);
+    } catch (err: unknown) {
+        const error = err as Error;
+        console.error(error.message);
+        return notFound();
+    }
 
     return (
         <TournamentContainer

diff --git a/apps/dave/src/app/layout.tsx b/apps/dave/src/app/layout.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { ColorSchemeScript, mantineHtmlProps } from "@mantine/core";
 import "@mantine/core/styles.css";
+import "@mantine/notifications/styles.css";
 import { Analytics } from "@vercel/analytics/react";
 import type { FC, ReactNode } from "react";
 import { StrictMode } from "react";
@@ -16,16 +17,16 @@ const RootLayout: FC<RootLayoutProps> = ({ children }) => {
     return (
         <html lang="en" {...mantineHtmlProps}>
             <head>
-                <ColorSchemeScript defaultColorScheme="auto" />
+                <ColorSchemeScript />
             </head>
             <body>
                 <StrictMode>
-                    <DataProvider>
-                        <StyleProvider>
+                    <StyleProvider>
+                        <DataProvider>
                             <Layout>{children}</Layout>
-                        </StyleProvider>
-                        <Analytics />
-                    </DataProvider>
+                            <Analytics />
+                        </DataProvider>
+                    </StyleProvider>
                 </StrictMode>
             </body>
         </html>

diff --git a/apps/dave/src/components/ThemeToggle.tsx b/apps/dave/src/components/ThemeToggle.tsx
@@ -0,0 +1,28 @@
+"use client";
+import { Switch, useMantineColorScheme, VisuallyHidden } from "@mantine/core";
+import type { FC } from "react";
+import { TbMoonStars, TbSun } from "react-icons/tb";
+
+export const ThemeToggle: FC = () => {
+    const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+    return (
+        <Switch
+            label={<VisuallyHidden>Theme mode switch</VisuallyHidden>}
+            checked={colorScheme === "light"}
+            onChange={() => toggleColorScheme()}
+            size="md"
+            onLabel={
+                <>
+                    <VisuallyHidden>Dark Mode</VisuallyHidden>
+                    <TbMoonStars size="1rem" />
+                </>
+            }
+            offLabel={
+                <>
+                    <VisuallyHidden>Light Mode</VisuallyHidden>
+                    <TbSun size="1rem" />
+                </>
+            }
+        />
+    );
+};
diff --git a/apps/dave/src/components/application/ApplicationList.tsx b/apps/dave/src/components/application/ApplicationList.tsx
@@ -7,7 +7,7 @@ type Props = { applications: Application[] };
 
 export const ApplicationList: FC<Props> = ({ applications }) => {
     return (
-        <Stack gap={5}>
+        <Stack gap={5} pb="xl">
             {applications.map((app) => (
                 <ApplicationCard
                     key={app.applicationAddress}

diff --git a/apps/dave/src/components/layout/Layout.tsx b/apps/dave/src/components/layout/Layout.tsx
@@ -4,20 +4,72 @@ import {
     AppShell,
     AppShellHeader,
     AppShellMain,
+    Button,
     Container,
     Group,
     useMantineTheme,
 } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { useQueryClient } from "@tanstack/react-query";
 import Link from "next/link";
-import type { FC, PropsWithChildren } from "react";
+import { defaultTo } from "ramda";
+import { Activity, type FC, type PropsWithChildren } from "react";
 import { useIsSmallDevice } from "../../hooks/useIsSmallDevice";
 import CartesiLogo from "../icons/CartesiLogo";
+import { ThemeToggle } from "../ThemeToggle";
+
+const debugEnabled = defaultTo(
+    false,
+    process.env.NEXT_PUBLIC_DEBUG_ENABLED == "true",
+);
 
 const Layout: FC<PropsWithChildren> = ({ children }) => {
+    const queryClient = useQueryClient();
     const theme = useMantineTheme();
     const { isSmallDevice, viewport } = useIsSmallDevice();
     const { height } = viewport;
 
+    const printQueryInfo = () => {
+        const defaultOpts = queryClient.getDefaultOptions();
+        const queryCache = queryClient.getQueryCache();
+        console.log(defaultOpts);
+        console.log(queryCache);
+
+        notifications.show({
+            title: "Query cache printed",
+            message: "Check your browser devtools console.",
+        });
+    };
+
+    const logQueries = () => {
+        const queries = queryClient.getQueryCache().getAll();
+        const obj: object[] = [];
+        // @ts-expect-error saving whatever is the original to reset.
+        const orig = BigInt.prototype.toJSON;
+
+        // @ts-expect-error JSON.stringify will try to call toJSON on bigints.  ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#use_within_json
+        BigInt.prototype.toJSON = function () {
+            return `$bigint:${this.toString()}`;
+        };
+
+        queries.forEach((query) => {
+            obj.push({ queryKey: query.queryKey, data: query.state.data });
+        });
+
+        try {
+            console.log(JSON.stringify(obj, null, 4));
+        } catch (error) {
+            console.error(error);
+        } finally {
+            // @ts-expect-error just adding the original back.
+            BigInt.prototype.toJSON = orig;
+            notifications.show({
+                title: "Queries as JSON requested!",
+                message: "Check your browser devtools console.",
+            });
+        }
+    };
+
     return (
         <AppShell>
             <AppShellHeader style={{ zIndex: theme.other.zIndexLG }}>
@@ -30,6 +82,14 @@ const Layout: FC<PropsWithChildren> = ({ children }) => {
                     <Link href="/" aria-label="Home">
                         <CartesiLogo height={isSmallDevice ? 30 : 40} />
                     </Link>
+
+                    <Group>
+                        <ThemeToggle />
+                        <Activity mode={debugEnabled ? "visible" : "hidden"}>
+                            <Button onClick={printQueryInfo}>Show cache</Button>
+                            <Button onClick={logQueries}>Export queries</Button>
+                        </Activity>
+                    </Group>
                 </Group>
             </AppShellHeader>
             <AppShellMain>

diff --git a/apps/dave/src/components/match/BisectionItem.tsx b/apps/dave/src/components/match/BisectionItem.tsx
@@ -47,7 +47,7 @@ export interface BisectionItemProps extends TimelineItemProps {
     total: number;
 }
 
-export const BisectionItem: FC<BisectionItemProps> = forwardRef<
+const BisectionItem: FC<BisectionItemProps> = forwardRef<
     HTMLDivElement,
     BisectionItemProps
 >((props, ref) => {
@@ -58,9 +58,9 @@ export const BisectionItem: FC<BisectionItemProps> = forwardRef<
     const p = useMemo(() => {
         const [start, end] = range;
         const [domainStart, domainEnd] = domain;
-        return (
-            (start + end - 2 * domainStart) / (2 * (domainEnd - domainStart))
-        );
+        const numerator = start + end - 2 * domainStart;
+        const denominator = Math.max(2 * (domainEnd - domainStart), 1);
+        return numerator / denominator;
     }, [domain, range]);
 
     return (
@@ -102,3 +102,7 @@ export const BisectionItem: FC<BisectionItemProps> = forwardRef<
         </ClaimTimelineItem>
     );
 });
+
+BisectionItem.displayName = "BisectionItem";
+
+export { BisectionItem };
diff --git a/apps/dave/src/components/match/ClaimTimelineItem.tsx b/apps/dave/src/components/match/ClaimTimelineItem.tsx
@@ -33,7 +33,7 @@ export interface ClaimTimelineItemProps extends TimelineItemProps {
 }
 
 const formatTime = (now: number, timestamp: number) => {
-    return `${humanizeDuration((now - timestamp) * 1000, { units: ["h", "m", "s"] })} ago`;
+    return `${humanizeDuration(now - timestamp, { units: ["h", "m", "s"], round: true })} ago`;
 };
 
 export const ClaimTimelineItem = forwardRef<

diff --git a/apps/dave/src/components/match/ClaimsEliminatedItem.stories.tsx b/apps/dave/src/components/match/ClaimsEliminatedItem.stories.tsx
@@ -0,0 +1,31 @@
+import { Timeline } from "@mantine/core";
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { ClaimsEliminatedItem } from "./ClaimsEliminatedItem";
+
+const meta = {
+    title: "Components/Match/ClaimsEliminatedItem",
+    component: ClaimsEliminatedItem,
+    tags: ["autodocs"],
+    decorators: [
+        (Story) => (
+            <Timeline bulletSize={24} lineWidth={2}>
+                <Story />
+            </Timeline>
+        ),
+    ],
+} satisfies Meta<typeof ClaimsEliminatedItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const now = Math.floor(Date.now() / 1000);
+
+/**
+ * Claims eliminated
+ */
+export const Default: Story = {
+    args: {
+        now,
+        timestamp: now - 3452,
+    },
+};
diff --git a/apps/dave/src/components/match/ClaimsEliminatedItem.tsx b/apps/dave/src/components/match/ClaimsEliminatedItem.tsx
@@ -0,0 +1,42 @@
+import {
+    Group,
+    Paper,
+    Text,
+    useComputedColorScheme,
+    useMantineTheme,
+} from "@mantine/core";
+import type { FC } from "react";
+import { TbSwordOff } from "react-icons/tb";
+import { ClaimTimelineItem } from "./ClaimTimelineItem";
+
+type ClaimsEliminatedItemProps = {
+    /**
+     * Current timestamp
+     */
+    now: number;
+
+    /**
+     * Timestamp
+     */
+    timestamp: number;
+};
+
+export const ClaimsEliminatedItem: FC<ClaimsEliminatedItemProps> = ({
+    now,
+    timestamp,
+}) => {
+    const theme = useMantineTheme();
+    const scheme = useComputedColorScheme();
+    const bg = scheme === "light" ? theme.colors.gray[0] : undefined;
+
+    return (
+        <ClaimTimelineItem now={now} timestamp={timestamp}>
+            <Paper withBorder p={16} radius="lg" bg={bg}>
+                <Group gap="xs">
+                    <TbSwordOff size={24} />
+                    <Text>both claims eliminated</Text>
+                </Group>
+            </Paper>
+        </ClaimTimelineItem>
+    );
+};
diff --git a/apps/dave/src/components/match/EliminationTimeoutItem.tsx b/apps/dave/src/components/match/EliminationTimeoutItem.tsx
@@ -1,14 +1,14 @@
 import {
     Group,
-    Paper,
     Text,
     useComputedColorScheme,
     useMantineTheme,
 } from "@mantine/core";
 import { type FC } from "react";
-import { TbClockCancel, TbSwordOff } from "react-icons/tb";
+import { TbClockCancel } from "react-icons/tb";
 import type { Claim } from "../types";
 import { ClaimTimelineItem } from "./ClaimTimelineItem";
+import { ClaimsEliminatedItem } from "./ClaimsEliminatedItem";
 
 interface EliminationTimeoutItemProps {
     /**
@@ -55,14 +55,7 @@ export const EliminationTimeoutItem: FC<EliminationTimeoutItemProps> = (
                     <Text c="dimmed">no action taken</Text>
                 </Group>
             </ClaimTimelineItem>
-            <ClaimTimelineItem now={now} timestamp={timestamp}>
-                <Paper withBorder p={16} radius="lg" bg={bg}>
-                    <Group gap="xs">
-                        <TbSwordOff size={24} />
-                        <Text>both claims eliminated</Text>
-                    </Group>
-                </Paper>
-            </ClaimTimelineItem>
+            <ClaimsEliminatedItem now={now} timestamp={timestamp} />
         </>
     );
 };