feat: add ABI encoding and decoding

.github/workflows/chromatic.yaml

@@ -3,7 +3,9 @@ on: push
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
-
+env:
+  NEXT_PUBLIC_CARTESI_NODE_RPC_URL: http://127.0.0.1:10011/rpc
+  NEXT_PUBLIC_MOCK_ENABLED: true
 jobs:
   chromatic-deployment:
     runs-on: ubuntu-latest

.prettierignore

@@ -4,4 +4,5 @@ node_modules
 .storybook
 graphql
 contracts.ts
+**/src/generated/**
 **/rollups-wagmi/src/index.tsx

apps/dave/.gitignore

@@ -25,6 +25,7 @@ src/generated
 *.njsproj
 *.sln
 *.sw?
+next-env.d.ts
 
 *storybook.log
 storybook-static

apps/dave/.storybook/preview.tsx

@@ -1,10 +1,11 @@
-import { MantineProvider } from "@mantine/core";
+import { useMantineColorScheme } from "@mantine/core";
 import "@mantine/core/styles.css";
-import { Notifications } from "@mantine/notifications";
 import type { Preview, StoryContext, StoryFn } from "@storybook/nextjs";
+import { ReactNode, useCallback, useEffect, useState } from "react";
+import { UPDATE_GLOBALS } from "storybook/internal/core-events";
+import { addons, useGlobals } from 'storybook/preview-api';
 import Layout from "../src/components/layout/Layout";
 import { Providers } from '../src/providers/Providers';
-import theme from "../src/providers/theme";
 import './global.css';
 
 try {
@@ -17,6 +18,8 @@ try {
     console.info((error as Error).message)
 }
 
+type Globals = ReturnType<typeof useGlobals>[0]
+
 const withLayout = (StoryFn: StoryFn, context: StoryContext) => {
     const { title } = context;
     const [sectionType] = title.split("/");
@@ -27,22 +30,70 @@ const withLayout = (StoryFn: StoryFn, context: StoryContext) => {
     return <>{StoryFn(context.args, context)}</>;
 };
 
-const withProviders = (StoryFn: StoryFn, context: StoryContext) => {
-    return <Providers>{StoryFn(context.args, context)}</Providers>
+const withProviders = (StoryFn: StoryFn, context: StoryContext) => {    
+    return (
+        <Providers>
+            <ColorSchemeWrapper context={context}>
+            {StoryFn(context.args, context)}
+            </ColorSchemeWrapper>            
+        </Providers>
+    )
 }
 
-const withMantine = (StoryFn: StoryFn, context: StoryContext) => {
-    const currentBg = context.globals.backgrounds?.value ?? "light";
+const channel = addons.getChannel();
 
-    return (
-        <MantineProvider forceColorScheme={currentBg} theme={theme}>
-            <Notifications />
-            {StoryFn(context.args, context)}
-        </MantineProvider>
-    );
-};
+const generateNewBackgroundEvt = (colorScheme: unknown) => ({globals: { backgrounds: {value: colorScheme, grid: false}}})
+
+// eslint-disable-next-line react-refresh/only-export-components
+function ColorSchemeWrapper({ children, context}: { children: ReactNode, context: StoryContext }) {
+    const { colorScheme, setColorScheme } = useMantineColorScheme();
+    const [latestGlobalsBg, setLatestGlobalBg] = useState<string | undefined>(colorScheme);
+
+    const handleColorScheme = useCallback(({ globals }: { globals: Globals }) => {        
+        const bgValue = globals.backgrounds?.value
+        const newMode = bgValue ?? 'light';        
+        if(newMode !== colorScheme) {
+            setColorScheme(newMode);
+            setLatestGlobalBg(newMode);  
+        } else if (newMode !== latestGlobalsBg) {
+            setLatestGlobalBg(newMode)
+        }
+        // update the handler function every time both variables change
+        // as the handler is outside of React's detection. We want 
+        // to make sure the handler works with fresh values.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [colorScheme, latestGlobalsBg]);
+
+
+    useEffect(() => {
+        // Only when on story mode i.e. not on autodocs view. 
+        // Due to the many re-renders until its finished. That cause slow but infinite loops.
+        if(context.viewMode === 'story') {
+            // on-mount emit single event to sync whatever is the default color-scheme on mantine
+            channel.emit(UPDATE_GLOBALS, generateNewBackgroundEvt(colorScheme))
+        }
+    }, [])
+
+    useEffect(() => {
+        channel.on(UPDATE_GLOBALS, handleColorScheme);
+        return () => {
+             // unsubscribe to subscribe again with fresher handler.
+             channel.off(UPDATE_GLOBALS, handleColorScheme);
+        }
+    }, [handleColorScheme]);
+
+    useEffect(() => {
+        if(colorScheme !== latestGlobalsBg) {
+            channel.emit(UPDATE_GLOBALS, generateNewBackgroundEvt(colorScheme));
+        }
+    }, [colorScheme, latestGlobalsBg])
+
+
+
+    return <>{children}</>;
+}
 
-const preview: Preview = {
+const preview: Preview = {    
     initialGlobals: {
         backgrounds: { value: "light" },
     },
@@ -64,10 +115,10 @@ const preview: Preview = {
         },
     },
     decorators: [
-        // Order matters. So layout decorator first. Fn calling is router(mantine(layout))        
-        withLayout,
+        // Order matters. So layout decorator first. Fn calling is providers(layout(Story))
+        withLayout,        
         withProviders,
-        withMantine,
+
     ],
 };
 

apps/dave/eslint.config.mjs

@@ -6,6 +6,9 @@ import globals from "globals";
 /** @type {import("eslint").Linter.Config[]} */
 export default [
     ...reactInternal,
+    // ...nextJsConfig,
+
+    { ignores: ["coverage/**", ".turbo/**", "public/**", ".next/**"] },
     {
         files: ["**/*.{ts,tsx}"],
         languageOptions: {

apps/dave/mantine.d.ts

@@ -8,9 +8,20 @@ type ExtendedCustomColors =
     | core.DefaultMantineColor;
 declare module "@mantine/core" {
     export { core };
+
+    /**
+     * Making it optional as default values to the
+     * declared interface members are added in the theme.
+     */
+    export interface SpoilerProps extends core.SpoilerProps {
+        hideLabel?: core.SpoilerProps["hideLabel"];
+        showLabel?: core.SpoilerProps["showLabel"];
+    }
     export interface MantineThemeOther {
         lgIconSize: number;
         mdIconSize: number;
+        smIconSize: number;
+        xsIconSize: number;
         zIndexXS: number;
         zIndexSM: number;
         zIndexMD: number;

apps/dave/package.json

@@ -4,7 +4,7 @@
     "version": "0.0.0",
     "type": "module",
     "scripts": {
-        "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+        "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist && rm -rf src/generated",
         "dev": "next dev",
         "build": "next build",
         "start": "next start",
@@ -19,25 +19,33 @@
     "dependencies": {
         "@cartesi/viem": "2.0.0-alpha.26",
         "@cartesi/wagmi": "2.0.0-alpha.30",
-        "@mantine/core": "^8.3.13",
-        "@mantine/form": "^8.3.13",
-        "@mantine/hooks": "^8.3.13",
-        "@mantine/notifications": "^8.3.13",
+        "@mantine/code-highlight": "^8.3.15",
+        "@mantine/core": "^8.3.15",
+        "@mantine/form": "^8.3.15",
+        "@mantine/hooks": "^8.3.15",
+        "@mantine/notifications": "^8.3.15",
         "@rainbow-me/rainbowkit": "^2.2.10",
         "@raugfer/jazzicon": "^1.0.6",
+        "@react-spring/web": "^10.0.1",
+        "@shazow/whatsabi": "^0.14.1",
         "@tabler/icons-react": "^3.35.0",
         "@tanstack/react-query": "catalog:",
         "@vercel/analytics": "^1.6.1",
+        "abitype": "1.2.3",
         "date-fns": "^4.1.0",
+        "dexie": "^4.0.11",
         "humanize-duration": "^3.33.2",
-        "next": "^16.1.5",
+        "jotai": "^2.12.5",
+        "next": "^16.1.6",
         "pretty-ms": "^8",
         "ramda": "^0.32.0",
         "ramda-adjunct": "^5.1.0",
         "react": "catalog:",
         "react-dom": "catalog:",
         "react-icons": "^5.5.0",
         "react-jazzicon": "^1",
+        "semver": "^7.7.4",
+        "uuid": "^11.1.0",
         "viem": "catalog:",
         "wagmi": "catalog:"
     },
@@ -53,6 +61,7 @@
         "@types/ramda": "^0.31.1",
         "@types/react": "^19.2.7",
         "@types/react-dom": "^19.2.3",
+        "@types/semver": "^7.7.1",
         "@wagmi/cli": "^2.1.2",
         "eslint": "catalog:",
         "eslint-config-cartesi": "workspace:*",

apps/dave/src/app/apps/[application]/page.tsx

@@ -0,0 +1,6 @@
+import { ApplicationSummaryContainer } from "../../../containers/ApplicationSummaryContainer";
+
+export default async function Page(props: PageProps<"/apps/[application]">) {
+    const { application } = await props.params;
+    return <ApplicationSummaryContainer application={application} />;
+}

apps/dave/src/app/layout.tsx

@@ -1,5 +1,7 @@
 import { ColorSchemeScript, mantineHtmlProps } from "@mantine/core";
 import "@mantine/core/styles.css";
+// prettier-ignore code-highlight styles must be imported after the core.
+import "@mantine/code-highlight/styles.css";
 import "@mantine/notifications/styles.css";
 import { Analytics } from "@vercel/analytics/react";
 import type { FC, ReactNode } from "react";

apps/dave/src/app/specifications/edit/[id]/page.tsx

@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+import { EditSpecificationContainer } from "../../../../containers/EditSpecificationContainer";
+
+export const metadata: Metadata = {
+    title: "Edit Specifications",
+};
+
+export default async function Page(
+    props: PageProps<"/specifications/edit/[id]">,
+) {
+    const params = await props.params;
+
+    return <EditSpecificationContainer id={params.id} />;
+}

apps/dave/src/app/specifications/new/page.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import { NewSpecificationContainer } from "../../../containers/NewSpecificationContainer";
+
+export const metadata: Metadata = {
+    title: "New Specification",
+};
+
+export default function Page() {
+    return <NewSpecificationContainer />;
+}

apps/dave/src/app/specifications/page.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import { SpecificationsContainer } from "../../containers/SpecificationsContainer";
+
+export const metadata: Metadata = {
+    title: "Specifications",
+};
+
+export default function Page() {
+    return <SpecificationsContainer />;
+}

apps/dave/src/components/CenteredText.tsx

@@ -0,0 +1,28 @@
+import {
+    Card,
+    Center,
+    Text,
+    type CardProps,
+    type TextProps,
+} from "@mantine/core";
+import type { FC } from "react";
+
+interface CenteredTextProps {
+    text: string;
+    cardProps?: CardProps;
+    textProps?: TextProps;
+}
+
+const CenteredText: FC<CenteredTextProps> = (props) => {
+    return (
+        <Card shadow="md" {...props.cardProps}>
+            <Center>
+                <Text c="dimmed" size="xl" tt="uppercase" {...props.textProps}>
+                    {props.text}
+                </Text>
+            </Center>
+        </Card>
+    );
+};
+
+export default CenteredText;