feat: add ABI encoding and decoding

[brunomenezes]

Summary

This is the code change to port the specification feature from current rollups-explorer. There are 60 files changed, however the heavy is inside the specification/ folder that is the port.

Test

To test this feature you can use the below live deployed version of this PR branch.

Link: https://dave-git-feat-add-abi-encoding-and-decoding-cartesi.vercel.app/

The mock is disabled in all preview deployments. Therefore, the first thing the application will ask you is to create a connection with a rollups node. Point to the RPC (e.g. http://localhost:6751/rpc) and the chain rpc if the default connection auto completed failed (e.g. as I use the cartesi cli it would be http://localhost:6751/anvil).

You can use the latest cartesi-cli or run your own rollups-node with an deployed application.

Testing Input/Output Decoding:

• As you connect to an working rollups-node you will see the application.
• Connect your wallet.
• Click send button in the application card and choose a Portal to send a deposit (e.g. Ether portal).
• Once the transaction is confirmed, click the application card.
• scroll down and you will see the latest inputs, the default view of the content is Raw you can change to Decoded.
• Also, if available you can see the same when a output voucher is generated.

Testing Specifications

• You can click a navigation link in the header called Specifications.
• Create your first Specification. There are two types standard ABI and ABI parameters where you can slice bytes if needed.
• As you have one created, now, you can go back to its list page and edit, delete, export and import specifications.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
dave	Ready	Preview, Comment	Mar 4, 2026 7:13pm
rollups-explorer-arbitrum-mainnet	Ready	Preview, Comment	Mar 4, 2026 7:13pm
rollups-explorer-arbitrum-sepolia	Ready	Preview, Comment	Mar 4, 2026 7:13pm
rollups-explorer-base-mainnet	Ready	Preview, Comment	Mar 4, 2026 7:13pm
rollups-explorer-base-sepolia	Ready	Preview, Comment	Mar 4, 2026 7:13pm
rollups-explorer-mainnet	Ready	Preview, Comment	Mar 4, 2026 7:13pm
rollups-explorer-optimism-mainnet	Ready	Preview, Comment	Mar 4, 2026 7:13pm
rollups-explorer-optimism-sepolia	Ready	Preview, Comment	Mar 4, 2026 7:13pm
rollups-explorer-sepolia	Ready	Preview, Comment	Mar 4, 2026 7:13pm
rollups-explorer-workshop	Ready	Preview, Comment	Mar 4, 2026 7:13pm

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​mantine/​notifications@​8.3.13 ⏵ 8.3.15				+2
	@​mantine/​form@​8.3.13 ⏵ 8.3.15				+2
	@​mantine/​code-highlight@​8.3.15
	@​mantine/​hooks@​8.3.13 ⏵ 8.3.15				+2
	@​mantine/​core@​8.3.13 ⏵ 8.3.15	+1		+1	+2
	@​vercel/​sdk@​1.18.2 ⏵ 1.19.6	-4		+1	-1
	jotai@​2.12.5

View full report

[brunomenezes]

The CI is broken, but all the tests, linter and etc are passing. But looks like there is a problem between cloudflare and coverall Application when we are trying to publish the testing reports.

cc: @guidanoli, @vfusco, @tuler

[Copilot]

Pull request overview

Ports the “Specifications” feature from rollups-explorer into the apps/dave Next.js app, enabling ABI-based decoding of inputs/vouchers and CRUD + import/export workflows for user-defined decoding specifications.

Changes:

• Added Specifications pages/containers and navigation updates to manage ABI specifications (create/edit/list/import/export).
• Implemented ABI decoding pipeline (JSON ABI + ABI parameters + byte-slicing + conditionals), plus system-provided portal specs.
• Integrated decoded view rendering for inputs and vouchers, and updated app theming/layout for new navigation UI.

Reviewed changes

Copilot reviewed 59 out of 61 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
turbo.json	Disables Turbo lint caching.
pnpm-lock.yaml	Updates tool/runtime deps (Next/Turbo/Mantine) and adds ABI/spec-related deps (abitype, whatsabi, jotai, uuid, code-highlight).
package.json	Bumps turbo and @vercel/sdk versions.
apps/dave/package.json	Adds deps for specifications feature (Mantine code highlight, whatsabi, abitype, jotai, uuid) and bumps Next/Mantine versions.
apps/dave/src/routes/routePathBuilder.ts	Adds route builders for Specifications list/new/edit.
apps/dave/src/providers/theme.ts	Extends Mantine AppShell defaults (navbar/header sizing).
apps/dave/src/providers/Providers.tsx	Adds Jotai provider to app provider stack.
apps/dave/src/page/SpecificationsPage.tsx	New specifications list page wrapper.
apps/dave/src/page/NewSpecificationPage.tsx	New “create specification” page wrapper.
apps/dave/src/page/EditSpecificationPage.tsx	New “edit specification” page wrapper.
apps/dave/src/lib/db.ts	Introduces shared IndexedDB database name constant.
apps/dave/src/containers/SpecificationsContainer.tsx	Adds breadcrumbs + container for specs list page.
apps/dave/src/containers/NewSpecificationContainer.tsx	Adds breadcrumbs + container for new spec page.
apps/dave/src/containers/EditSpecificationContainer.tsx	Adds breadcrumbs + container for edit spec page.
apps/dave/src/components/types.ts	Adds decoded to content display options.
apps/dave/src/components/specification/types.ts	Defines specification domain model (modes, conditionals, slicing, transfer model).
apps/dave/src/components/specification/utils.ts	Adds helpers (BigInt-safe stringify, signature preparation, spec builder).
apps/dave/src/components/specification/decoder.ts	Implements decoding pipeline for JSON ABI and ABI params (+ slicing).
apps/dave/src/components/specification/conditionals.ts	Implements conditional matching to auto-apply specifications to inputs.
apps/dave/src/components/specification/systemSpecs.ts	Adds system-provided portal specifications.
apps/dave/src/components/specification/hooks/useSystemSpecifications.tsx	Exposes system specs via memoized hook.
apps/dave/src/components/specification/hooks/useSpecification.tsx	Adds Jotai-based spec state + CRUD actions backed by repository.
apps/dave/src/components/specification/hooks/SpecificationRepository.ts	Dexie-backed IndexedDB repository for specifications.
apps/dave/src/components/specification/hooks/useAbiDecodingOnInput.tsx	Applies specs (system + user) to decode input payloads.
apps/dave/src/components/specification/hooks/useVoucherDecoder.tsx	Autoloads destination ABI (whatsabi) and decodes voucher payloads.
apps/dave/src/components/specification/hooks/useSpecificationsTransfer.tsx	Implements import/export flow and validation UX.
apps/dave/src/components/specification/transfer/validator.ts	Adds versioned import validator selection.
apps/dave/src/components/specification/transfer/validators/v1.ts	Implements v1 import schema validation.
apps/dave/src/components/specification/errors/SpecificationModeNotSupported.ts	Adds explicit unsupported-mode error type.
apps/dave/src/components/specification/form/context.tsx	Adds Mantine form context for spec create/edit + preview.
apps/dave/src/components/specification/form/validations.ts	Adds validation for spec fields, params, slices, conditionals, and test payload.
apps/dave/src/components/specification/form/SpecificationForm.tsx	New spec form with mode switching and saving/updating.
apps/dave/src/components/specification/form/fields/HumanReadableABI.tsx	Human-readable ABI input + generated ABI preview.
apps/dave/src/components/specification/form/fields/HumanReadableABIParameter.tsx	ABI parameters entry list with validation.
apps/dave/src/components/specification/form/fields/ByteSlices.tsx	Byte-slice instruction builder + review table + target selection.
apps/dave/src/components/specification/form/fields/Conditions.tsx	Conditional builder to auto-apply specs to matching inputs.
apps/dave/src/components/specification/SpecificationFormView.tsx	Split/stack layout with live decoding preview for authoring specs.
apps/dave/src/components/specification/SpecificationContainer.tsx	Orchestrates loading/editing flows for spec form view.
apps/dave/src/components/specification/SpecificationListView.tsx	Lists specs with filtering, delete modal, and details accordion.
apps/dave/src/components/specification/components/DecodingPreview.tsx	Live “decode this payload” preview card.
apps/dave/src/components/specification/components/ModeInfo.tsx	Adds mode help text + links.
apps/dave/src/components/specification/components/NewSpecificationButton.tsx	Adds button linking to new spec flow.
apps/dave/src/components/specification/components/EditSpecificationButton.tsx	Adds button linking to edit spec flow.
apps/dave/src/components/specification/components/EditSpecificationNotFound.tsx	Adds fallback UI when spec id is missing.
apps/dave/src/components/specification/components/SpecificationsActionsMenu.tsx	Adds import/export actions menu.
apps/dave/src/components/output/OutputView.tsx	Adds decoded voucher rendering via specifications decoder.
apps/dave/src/components/input/InputCard.tsx	Adds decoded input rendering via specifications decoder.
apps/dave/src/components/navigation/PageLinks.tsx	Adds top-nav links (Home/Specifications).
apps/dave/src/components/navigation/PageLinks.module.css	Adds selected/hover styles for new nav links.
apps/dave/src/components/layout/Layout.tsx	Adds AppShell navbar + burger menu + mobile navigation/settings.
apps/dave/src/components/connection/types.ts	Removes old db name constant from connection types.
apps/dave/src/components/connection/indexedDbRepository.ts	Uses shared databaseName constant for Dexie DB.
apps/dave/src/components/LabelWithTooltip.tsx	Adds shared label+tooltip component for forms.
apps/dave/src/components/JSONViewer.tsx	Adds JSON viewer helper built on Mantine JsonInput.
apps/dave/src/app/specifications/page.tsx	Adds Specifications route.
apps/dave/src/app/specifications/new/page.tsx	Adds New Specification route.
apps/dave/src/app/specifications/edit/[id]/page.tsx	Adds Edit Specification route.
apps/dave/src/app/layout.tsx	Adds Mantine code-highlight stylesheet import ordering.
apps/dave/next-env.d.ts	Removes tracked Next TypeScript env file.
apps/dave/eslint.config.mjs	Updates eslint ignores (coverage/.turbo/public/.next).
apps/dave/.gitignore	Ignores generated next-env.d.ts.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (10)

apps/dave/src/components/specification/form/fields/ByteSlices.tsx:170

• fromValidation/toValidation are comparing numeric inputs as strings (value > values.sliceInput.to / value < values.sliceInput.from), which breaks for multi-digit numbers (e.g., "10" < "2"). Parse to numbers (or rely on NumberInput numeric values) before doing comparisons so range validation is correct.
  apps/dave/src/components/JSONViewer.tsx:31
• JSONViewer uses defaultValue, so updates to the content prop won’t be reflected after the initial mount (unless callers force a remount via key). Using a controlled value prop (or otherwise syncing when content changes) will prevent stale decoded/JSON content being shown.

    const value = isString(content) ? content : stringifyContent(content);
    return (
        <JsonInput
            id={id}
            variant={variant}
            size={size}
            autoFocus
            autosize
            defaultValue={value}
            onFocus={(evt) => evt.currentTarget.blur()}
            placeholder={placeholder}
            formatOnBlur

apps/dave/src/components/specification/hooks/useVoucherDecoder.tsx:48

• The module-level cache Map for destination ABIs is unbounded and will grow over time as users browse more vouchers/contracts. Consider adding an eviction strategy (LRU/size cap/TTL) or scoping the cache to the session/page to avoid long-lived memory growth.
  apps/dave/src/components/output/OutputView.tsx:56
• useVoucherDecoder is invoked regardless of the selected decoder type, so it may start RPC/ABI autoload work even when the user is viewing Raw/Hex. Consider adding an enabled option to the hook (or moving the effect behind an enable flag) so network/CPU work only happens when the "Decoded" view is selected.

    const voucherDecodingRes = useVoucherDecoder({ voucher: decodedData });
    const hasDecodedData = isNotNil(voucherDecodingRes.data);
    const isDecodedSelected = decoderType === "decoded";

apps/dave/src/components/specification/utils.ts:29

• prepareSignatures currently keeps empty/blank lines (it only trims). This means trailing newlines or extra blank lines will produce empty signatures that can cause parseAbi(...) to fail. Consider filtering out blank strings after trimming.
  apps/dave/src/components/specification/hooks/useVoucherDecoder.tsx:181
• The async work inside useEffect doesn’t guard against component unmount or voucher changes mid-flight, so setResult can run after unmount / out of order. Add a cancellation flag (or AbortController where applicable) and ignore late results to avoid React warnings and stale data races.
  apps/dave/src/components/specification/components/ModeInfo.tsx:35
• This link uses target="blank" (missing the leading underscore), so it won’t behave like a new-tab link in browsers. Use target="_blank" (and ideally add rel="noopener noreferrer" when opening a new tab) for correct behavior and to avoid tabnabbing risks.

            <Anchor
                href="https://docs.soliditylang.org/en/v0.8.25/abi-spec.html#types"
                target="blank"
                display="inline-block"
            >

apps/dave/src/components/LabelWithTooltip.tsx:15

• Typo in the doc comment: "conjuction" → "conjunction".

 *
 * Component to be used in conjuction with Mantine input type components
 * to be passed as the Label value when besides description a tooltip is
 * also desired.

apps/dave/src/components/specification/form/SpecificationForm.tsx:177

• onFinished: () => setSubmitting((v) => !v) relies on toggling state, which can become incorrect if the handler runs more than once or if state changes elsewhere. Setting setSubmitting(false) explicitly is more robust and avoids accidental re-enabling of the loading state.

                        setSubmitting(true);
                        const lifecycle = {
                            onFinished: () => setSubmitting((v) => !v),
                            onSuccess: () => onComplete(specification),

apps/dave/src/components/input/InputCard.tsx:62

• useAbiDecodingOnInput(input) performs ABI matching + decoding unconditionally, even when the user hasn’t selected the "Decoded" view. This can add noticeable CPU work when rendering long input lists. Consider making decoding opt-in (e.g., pass an enabled flag so the hook can skip decodePayload unless the decoded view is selected).

    const [result, decodingInfo] = useAbiDecodingOnInput(input);
    const hasDecodedContent = isNotNil(decodingInfo.specApplied);
    const isDecodedSelected = decoderType === "decoded";
    const inputContent =
        hasDecodedContent && isDecodedSelected
            ? decoderFn(result)
            : decoderFn(input.decodedData.payload);

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[guidanoli]

ERC-721 and ERC-1155 (single) deposits are missing baseLayerData and execLayerData fields when decoded.