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.
For development frontend app you have 2 installation options:
- Cloning the frontend repository
git clone https://github.com/doiim/cartesi-ts-react-sqlite- Use create-react-app template
npx create-react-app my-app --template cartesi-ts-sqliteObs.: Additional information on how to configure and run the app could be found at their own README.md files.
For the backend at the moment we only have the option to clone the backend repo, a Sunodo template would be available soon:
git clone https://github.com/doiim/cartesi-ts-sqliteObs.: Additional information on how to configure, run and deploy backend to testnets could be found at their own README.md files.
Frontend (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.
- User send a Input(Advance) transaction to add a new product to the database.
- Once transaction is confirmed by the EVM, user receive back the confirmation.
- The Cartesi Machine than grab the Input from the EVM and send to the Validator backend service.
- Validator process the Input(Advance) adding the data to the database.
- Validator then sends a Notice to the Cartesi Machine with the confirming the Payload.
- That Notice is then Cached on the GraphQL service that runs on Validator machine.
- Once Frontend is started it creates a Apollo Client service to listen for the GraphQL service running on the Validator machine.
- 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.
- Once Frontend is started it creates a Apollo Client service to listen for the GraphQL service running on the Validator machine.
- Every time that a new Notice appears on GraphQL service it is added to the list.
- Then Frontend then make a Inspect call to grab the current status of database from Validator service.
- Once data is returned, it automatically updated the Products table.
Backend (github)
A Sunodo 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 Sunodo 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.
Front-end integration package
Back-end deployment tool
Cartesi Examples
Backend Typescript Framework