Cartesi Typescript React SQLite

The project is a React application built with Create React App and utilizes TypeScript for type safety. It is managed using npm as the package manager. The goal of the project is to create a template that streamlines the process of kickstarting new projects. The template incorporates the latest version of React and integrates with Ethers, allowing for seamless interaction with the underlying blockchain. For testing purposes, a pre-deployed demo on the Sepolia Network is available for users to explore before starting their own development.

Live Demo

Installation

In case you do not reach here via create-react-app, you will be required to install the dependencies and make a copy of the example environment variables.

npm install
cp .env.example .env.development.local

Before run this app it would be required to run the backend service for it. To run a local backend service for this app it is required Cartesi CLI.

1. Install Cartesi CLI
2. Clone the backend repo and install it

git clone https://github.com/doiim/cartesi-ts-sqlite
cd path
cartesi build

Running Locally

To run a local back end service, in a separate terminal window, just access the backend folder and run:

cartesi run

Runs the front end app in the development mode.

npm start

How this project is structure

Front End (github)

A Create React App template that runs a Typescript supported app with CSS Modules. This app uses Apollo Client to update Notices from backend services and normal requests to call Inspect endpoint for fetch current state of the database. To call Advance inputs, the app uses Ethers V5 to communicate with Backend EVM.

How does CreateProducForm works

1. User send a Input(Advance) transaction to add a new product to the database.
2. Once transaction is confirmed by the EVM, user receive back the confirmation.
3. The Cartesi Machine than grab the Input from the EVM and send to the Validator backend service.
4. Validator process the Input(Advance) adding the data to the database.
5. Validator then sends a Notice to the Cartesi Machine with the confirming the Payload.
6. That Notice is then Cached on the GraphQL service that runs on Validator machine.

How does ListNotices works

1. Once Frontend is started it creates a Apollo Client service to listen for the GraphQL service running on the Validator machine.
2. Every time that a new Notice appears on GraphQL service it is added to the list on front-end and reported back to the User.

How does ListProducts works

1. Once Frontend is started it creates a Apollo Client service to listen for the GraphQL service running on the Validator machine.
2. Every time that a new Notice appears on GraphQL service it is added to the list.
3. Then Frontend then make a Inspect call to grab the current status of database from Validator service.
4. Once data is returned, it automatically updated the Products table.

Back End (github)

A Cartesi template machine that runs a Typescript node service along with viem to convert values from/to Hex strings. We could have switched to Ethers but the idea was to reduce the amount to code, and the Cartesi template used already have support to viem. The database runs SQLite with WASM support due to the nature of the Risc-V Node has no native support to SQLite bindings.

This will run an anvil node as a local blockchain, and the GraphQL service and Inspect Service.

The Database consists in a simple SQLite database with a table called PRODUCTS, each product has an ID and a NAME. IDs are unique so in case user tries to register PRODUCT with same ID the backend will reject the attempt.

Learn More

You can learn more in the Create React App documentation.

This project is meant to run on Cartesi Machine, the tool used to run and deploy the backend to public networks was Cartesi.

This project is based on the following repositories from Cartesi team:

• Sunodo Typescript template project
• Backend SQLite Image
• Front-end Echo Example