Introduction

This provides React hooks for Cartesi rollups smart contracts operations, as generated by Wagmi CLI, and also hooks for CartesiPublicClient L2 actions.

Installation

Add the library to your existing React project.

Setup

Next setup a TanStack Query provider and a CartesiProvider provider in your application root.

import { CartesiProvider } from "@cartesi/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
// Create a query client
const queryClient = new QueryClient();
 
function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <CartesiProvider rpcUrl="http://127.0.0.1:6751/rpc">
        <Home />
      </CartesiProvider>
    </QueryClientProvider>
  )
}

Hooks

Find below an example of fetching the applications of a Cartesi rollups node.

import { useApplications } from "@cartesi/react";
 
function Home() {
  const { data, isLoading, error } = useApplications();
 
  return (
    <div>
      ...
    </div>
  )
}

Contract hooks

Besides the node hooks, @cartesi/react re-exports generated wagmi hooks for every Cartesi contract, including the PRT ones.

A commitment's bond becomes claimable once its tournament is finished. tryRecoveringBond takes no arguments and is not restricted, so any connected account can send it — read the tournament's snapshot.bondRecovery to find out whether there is anything to claim.

A tournament is created per dispute by MultiLevelTournamentFactory, so it has no published address and the hooks take the one the node reports. They are the ITournament hooks, the interface a tournament is reached through.

import {
  useSimulateITournamentTryRecoveringBond,
  useTournament,
  useWriteITournamentTryRecoveringBond,
} from "@cartesi/react";
import type { Address } from "viem";
 
function RecoverBond({
  application,
  address,
}: {
  application: Address;
  address: Address;
}) {
  const { data: tournament } = useTournament({ application, address });
  const recoverable =
    tournament?.snapshot.bondRecovery.disposition === "RECOVERABLE";
 
  const { data: simulation } = useSimulateITournamentTryRecoveringBond({
    address,
    query: { enabled: recoverable },
  });
  const { writeContract, isPending } = useWriteITournamentTryRecoveringBond();
 
  return (
    <button
      disabled={!simulation || isPending}
      onClick={() => simulation && writeContract(simulation.request)}
    >
      Recover bond
    </button>
  );
}

The snapshot was read at tournament.snapshot.asOfBlock rather than at the block the transaction lands in, so treat it as a reason to try rather than a guarantee.

daveAppFactory and multiLevelTournamentFactory are deployed once per chain, because the tournament parameters depend on the chain's block time, so their hooks resolve the address from the connected chain or from a chainId you pass. The eight public chains and the devnet (31337) are covered; dave publishes nothing for cannon (13370).