feat: migrate to new rollups-ts libraries

.github/workflows/chromatic.yaml

@@ -22,7 +22,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e #v6.4.0
         with:
-          node-version: 22
+          node-version: 24.19.0
           cache: "pnpm"
 
       - name: Install Dependencies

.github/workflows/ci.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e #v6.4.0
         with:
-          node-version: 22.12.0
+          node-version: 24.19.0
           cache: "pnpm"
 
       - name: Install Dependencies
@@ -32,6 +32,9 @@ jobs:
       - name: Linting
         run: pnpm lint
 
+      - name: Check Types
+        run: pnpm check:types
+
       - name: Run Tests
         run: pnpm test:ci
 

.github/workflows/e2e.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e #v6.4.0
         with:
-          node-version: 22.12.0
+          node-version: 24.19.0
           cache: "pnpm"
 
       - name: Install dependencies
@@ -71,7 +71,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e #v6.4.0
         with:
-          node-version: 22.12.0
+          node-version: 24.19.0
           cache: "pnpm"
 
       - name: Install dependencies

.gitignore

@@ -5,3 +5,4 @@ dist
 node_modules
 storybook-static
 coverage
+.pnpm-store/

.vscode/settings.json

@@ -10,6 +10,10 @@
     "[terraform]": {
         "editor.defaultFormatter": "hashicorp.terraform"
     },
+    "[hcl]": {
+        "editor.defaultFormatter": "fredwangwang.vscode-hcl-format",
+        "editor.formatOnSave": true
+    },
     "[typescript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     }

README.md

@@ -19,8 +19,30 @@ Rollups Explorer is a web application that facilitates interacting with [Cartesi
 
 ## Dependencies
 
-- NodeJS 22
-- pnpm (package manager)
+- NodeJS 24.19.0
+- pnpm 11.21.0 (package manager)
+
+Enable Corepack to activate the repository's declared pnpm version
+
+```shell
+corepack enable
+```
+
+## Package Management
+
+This repository uses pnpm 11.21.0 with supply-chain protections enabled:
+
+- Dependency lifecycle/build scripts are blocked unless explicitly approved in `allowBuilds` in `pnpm-workspace.yaml`.
+- `strictDepBuilds` makes installs fail when a dependency requests an unapproved build script.
+- Dependencies must normally be at least seven days old (`minimumReleaseAge: 10080`, in minutes).
+- `trustPolicy: no-downgrade` rejects package versions whose publishing trust evidence is weaker than an earlier release.
+- Transitive dependencies cannot use git repositories or direct tarball URLs (`blockExoticSubdeps: true`).
+
+Use the lockfile exactly as committed:
+
+```shell
+pnpm install --frozen-lockfile
+```
 
 ## Build
 

apps/explorer/.storybook/preview.tsx

@@ -4,11 +4,12 @@ import type { Preview, StoryContext, StoryFn } from "@storybook/nextjs";
 import { Provider as JotaiProvider } from "jotai";
 import { mswLoader } from "msw-storybook-addon/csf3";
 import { pathOr } from "ramda";
-import { ReactNode, useCallback, useEffect, useState } from "react";
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { UPDATE_GLOBALS } from "storybook/internal/core-events";
 import { addons, useGlobals } from 'storybook/preview-api';
 import { ConnectionProvider } from "../src/components/connection/ConnectionProvider";
-import { DbNodeConnectionConfig } from "../src/components/connection/types";
+import type { DbNodeConnectionConfig } from "../src/components/connection/types";
 import Layout from "../src/components/layout/Layout";
 import { SendProvider } from "../src/components/send/SendProvider";
 import { supportedChains } from "../src/lib/supportedChains";

apps/explorer/package.json

@@ -8,7 +8,9 @@
         "dev": "next dev",
         "build": "next build",
         "start": "next start",
+        "typegen": "next typegen",
         "lint": "eslint .",
+        "check:types": "tsc --build tsconfig.json",
         "storybook": "storybook dev -p 6006",
         "codegen": "run-s gen:wagmi",
         "gen:wagmi": "wagmi generate",
@@ -20,8 +22,9 @@
         "test:ci": "vitest run --coverage"
     },
     "dependencies": {
-        "@cartesi/viem": "2.0.0-alpha.31",
-        "@cartesi/wagmi": "2.0.0-alpha.35",
+        "@cartesi/client": "2.0.0-alpha.34",
+        "@cartesi/codec": "1.0.0-alpha.1",
+        "@cartesi/react": "2.0.0-alpha.38",
         "@mantine/code-highlight": "^8.3.15",
         "@mantine/core": "^8.3.15",
         "@mantine/form": "^8.3.15",

apps/explorer/src/components/QueryPagination.tsx

@@ -1,4 +1,4 @@
-import type { Pagination as QPagination } from "@cartesi/viem";
+import type { Pagination as QPagination } from "@cartesi/client";
 import { Group, Pagination, type GroupProps } from "@mantine/core";
 import { isNil } from "ramda";
 import type { FC } from "react";

apps/explorer/src/components/application/ApplicationCard.tsx

@@ -1,4 +1,4 @@
-import type { Application, ApplicationStatus } from "@cartesi/viem";
+import type { Application, ApplicationStatus } from "@cartesi/client";
 import {
     Alert,
     Badge,

apps/explorer/src/components/application/ApplicationForecloseStatus.tsx

@@ -1,4 +1,4 @@
-import type { Application } from "@cartesi/viem";
+import type { Application } from "@cartesi/client";
 import { Alert, Card, Group, useMantineTheme } from "@mantine/core";
 import type { FC } from "react";
 import {

apps/explorer/src/components/application/ApplicationList.tsx

@@ -1,4 +1,4 @@
-import type { Application } from "@cartesi/viem";
+import type { Application } from "@cartesi/client";
 import { Stack } from "@mantine/core";
 import type { FC } from "react";
 import { ApplicationCard } from "./ApplicationCard";

apps/explorer/src/components/application/utils.ts

@@ -1,4 +1,4 @@
-import type { Application } from "@cartesi/viem";
+import type { Application } from "@cartesi/client";
 import { isNil } from "ramda";
 import {
     isAddressEqual,

apps/explorer/src/components/connection/functions.ts

@@ -1,4 +1,4 @@
-import { createCartesiPublicClient } from "@cartesi/viem";
+import { createCartesiPublicClient } from "@cartesi/client";
 import { descend, isNil, prop, sort } from "ramda";
 import { http } from "viem";
 import type { DbNodeConnectionConfig } from "./types";

apps/explorer/src/components/epoch/EpochCard.tsx

@@ -1,4 +1,4 @@
-import type { Epoch } from "@cartesi/viem";
+import type { Epoch } from "@cartesi/client";
 import { Badge, Card, Group, Text, useMantineTheme } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
 import Link from "next/link";

apps/explorer/src/components/epoch/EpochList.tsx

@@ -1,4 +1,4 @@
-import type { Epoch } from "@cartesi/viem";
+import type { Epoch } from "@cartesi/client";
 import { Stack } from "@mantine/core";
 import type { FC } from "react";
 import { EpochCard } from "./EpochCard";

apps/explorer/src/components/epoch/useEpochStatusColor.tsx

@@ -1,4 +1,4 @@
-import type { Epoch, EpochStatus } from "@cartesi/viem";
+import type { Epoch, EpochStatus } from "@cartesi/client";
 import useRightColorShade from "../../hooks/useRightColorShade";
 
 export const getEpochStatusColor = (state: EpochStatus) => {

apps/explorer/src/components/input/InputCard.stories.tsx

@@ -38,9 +38,10 @@ export const Default: Story = {
             },
             blockNumber: 1n,
             rawData: "0x",
-            transactionReference: keccak256("0x1"),
+            transactionHash: keccak256("0x1"),
             createdAt: new Date(),
             updatedAt: new Date(),
+            logIndex: 0n,
         },
     },
 };
@@ -72,9 +73,10 @@ export const Unprocessed: Story = {
             },
             blockNumber: 1n,
             rawData: "0x",
-            transactionReference: keccak256("0x1"),
+            transactionHash: keccak256("0x1"),
             createdAt: new Date(),
             updatedAt: new Date(),
+            logIndex: 0n,
         },
     },
 };
@@ -106,7 +108,8 @@ export const Rejected: Story = {
             },
             blockNumber: 1n,
             rawData: "0x",
-            transactionReference: keccak256("0x1"),
+            transactionHash: keccak256("0x1"),
+            logIndex: 0n,
             createdAt: new Date(),
             updatedAt: new Date(),
         },

apps/explorer/src/components/input/InputCard.tsx

@@ -1,4 +1,4 @@
-import type { Input, InputStatus } from "@cartesi/viem";
+import type { Input, InputStatus } from "@cartesi/client";
 import {
     Badge,
     Card,
@@ -178,7 +178,7 @@ export const InputCard: FC<Props> = ({ input }) => {
                             <TbReceipt size={theme.other.mdIconSize} />
                         </Tooltip>
                         <TransactionHash
-                            transactionHash={input.transactionReference}
+                            transactionHash={input.transactionHash}
                         />
                     </Group>
                     {isNotNil(millis) && (

apps/explorer/src/components/input/InputList.tsx

@@ -1,4 +1,4 @@
-import type { Input } from "@cartesi/viem";
+import type { Input } from "@cartesi/client";
 import { Stack } from "@mantine/core";
 import type { FC } from "react";
 import { InputCard } from "./InputCard";

apps/explorer/src/components/match/EliminationTimeoutItem.tsx

@@ -1,9 +1,4 @@
-import {
-    Group,
-    Text,
-    useComputedColorScheme,
-    useMantineTheme,
-} from "@mantine/core";
+import { Group, Text } from "@mantine/core";
 import { type FC } from "react";
 import { TbClockCancel } from "react-icons/tb";
 import type { Claim } from "../types";
@@ -37,10 +32,6 @@ export const EliminationTimeoutItem: FC<EliminationTimeoutItemProps> = (
 ) => {
     const { claim1, claim2, now, timestamp } = props;
 
-    const theme = useMantineTheme();
-    const scheme = useComputedColorScheme();
-    const bg = scheme === "light" ? theme.colors.gray[0] : undefined;
-
     return (
         <>
             <ClaimTimelineItem claim={claim1} now={now}>

apps/explorer/src/components/match/MatchActions.tsx

@@ -1,4 +1,4 @@
-import type { Match, MatchAdvanced, Tournament } from "@cartesi/viem";
+import type { Match, MatchAdvanced, Tournament } from "@cartesi/client";
 import {
     Button,
     Group,

apps/explorer/src/components/match/MatchView.tsx

@@ -1,4 +1,4 @@
-import type { Match, MatchAdvanced, Tournament } from "@cartesi/viem";
+import type { Match, MatchAdvanced, Tournament } from "@cartesi/client";
 import { Divider, Group, Stack, Text } from "@mantine/core";
 import { type FC } from "react";
 import { ClaimText } from "../ClaimText";

apps/explorer/src/components/match/SubTournamentItem.tsx

@@ -1,4 +1,4 @@
-import type { Tournament } from "@cartesi/viem";
+import type { Tournament } from "@cartesi/client";
 import {
     Button,
     Group,

apps/explorer/src/components/navigation/MatchBreadcrumbSegment.tsx

@@ -1,4 +1,4 @@
-import type { Match } from "@cartesi/viem";
+import type { Match } from "@cartesi/client";
 import type { FC } from "react";
 import { MatchBadge, type MatchBadgeProps } from "./MatchBadge";
 

apps/explorer/src/components/navigation/MatchBreadcrumbs.tsx

@@ -1,4 +1,4 @@
-import type { Match } from "@cartesi/viem";
+import type { Match } from "@cartesi/client";
 import { Breadcrumbs, Button, type BreadcrumbsProps } from "@mantine/core";
 import type { FC } from "react";
 import { MatchBadge } from "./MatchBadge";

apps/explorer/src/components/navigation/NextPagination.tsx

@@ -1,4 +1,4 @@
-import type { Pagination as PaginationData } from "@cartesi/viem";
+import type { Pagination as PaginationData } from "@cartesi/client";
 import { Pagination, type PaginationProps } from "@mantine/core";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useCallback, type FC } from "react";

apps/explorer/src/components/navigation/TournamentBreadcrumbs.tsx

@@ -1,4 +1,4 @@
-import type { Match } from "@cartesi/viem";
+import type { Match } from "@cartesi/client";
 import { Breadcrumbs, Button, type BreadcrumbsProps } from "@mantine/core";
 import type { FC } from "react";
 import { MatchBadge } from "./MatchBadge";

apps/explorer/src/components/output/OutputCard.stories.tsx

@@ -1,7 +1,7 @@
 import type {
     GetApplicationReturnType,
     GetOutputReturnType,
-} from "@cartesi/viem";
+} from "@cartesi/client";
 import type { Meta, StoryObj } from "@storybook/nextjs";
 import { OutputCard } from "./OutputCard";
 
@@ -198,7 +198,8 @@ const application: GetApplicationReturnType = {
         inputBoxAddress: "0x1b51e2992A2755Ba4D6F7094032DF91991a0Cfac",
     },
     consensusType: "AUTHORITY",
-    state: "ENABLED",
+    status: "OK",
+    enabled: true,
     reason: null,
     inputBoxBlock: 7n,
     lastEpochCheckBlock: 0n,
@@ -224,6 +225,26 @@ const application: GetApplicationReturnType = {
         createdAt: new Date("2026-04-02T08:46:14.869Z"),
         updatedAt: new Date("2026-04-02T08:46:14.869Z"),
     },
+    claimStagingPeriod: 0n,
+    accountsDriveMerkleRoot:
+        "0x0000000000000000000000000000000000000000000000000000000000000000",
+    accountsDriveProvedBlock: 0n,
+    accountsDriveProvedTransaction:
+        "0x0000000000000000000000000000000000000000000000000000000000000000",
+    lastAccountsDriveProvedCheckBlock: 0n,
+    lastForecloseCheckBlock: 0n,
+    lastTournamentCheckBlock: 0n,
+    lastWithdrawalCheckBlock: 0n,
+    forecloseBlock: 0n,
+    forecloseTransaction:
+        "0x0000000000000000000000000000000000000000000000000000000000000000",
+    withdrawalConfig: {
+        guardian: "0x0000000000000000000000000000000000000000",
+        log2LeavesPerAccount: 0n,
+        log2MaxNumOfAccounts: 20n,
+        accountsDriveStartIndex: 33554432n,
+        withdrawalOutputBuilder: "0x0000000000000000000000000000000000000000",
+    },
 };
 
 const noticeSample: GetOutputReturnType = {

apps/explorer/src/components/output/OutputCard.tsx

@@ -1,4 +1,4 @@
-import type { Application, Output } from "@cartesi/viem";
+import type { Application, Output } from "@cartesi/client";
 import {
     Anchor,
     Card,

apps/explorer/src/components/output/OutputContainer.tsx

@@ -1,5 +1,5 @@
-import type { ListOutputsParams } from "@cartesi/viem";
-import { useOutputs } from "@cartesi/wagmi";
+import type { ListOutputsParams } from "@cartesi/client";
+import { useOutputs } from "@cartesi/react";
 import { Card, Center, Text } from "@mantine/core";
 import { useState, type FC } from "react";
 import type { DecoderType } from "../types";