5l1v3r1 / rollups-explorer

Cartesi Rollups Explorer Web Application

Rollups Explorer

This is a monorepo holding up two web applications. One is called web and is the UI for the rollups explorer and the second is called workshop that is a storybook to support fast development iteration and showcase. The repository also holds a few packages more on these below.

What's inside?

This monorepo uses Yarn v1 as a package manager and is controlled by turborepo.

Formatter + Linter

In case you are not using vscode, make sure you are configuring your IDE of choice to follow the rules set on the repository, so the development is coherent avoiding noise on pull requests and CI breaking because the formatter and linter checks failed.

Note

Have a look inside the .vscode/settings.json and make sure the default formatter matches and the editor.codeActionsOnSave equivalent configuration is applied. The rule of thumb is to develop from the project's root folder.

Package Installation

You can add, remove and upgrade packages from within your monorepo using your package manager's built-in commands:

yarn workspace <workspace> add <package>

Refer to Turborepo package-installation session for more information.

Apps and Packages

• apps/web: The Rollups explorer powered by Next.js framework.
• apps/workshop: The Storybook App using Vite with HMR and some ESLint rules.
• packages/ui: House components driven by Rollups domain.
• packages/rollups-wagmi: Using wagmi-cli + plugins code generate assets to support interaction with blockchain.
• packages/eslint-config-cartesi: eslint configurations (includes eslint-config-next and eslint-config-prettier)
• packages/tsconfig: A few tsconfig.jsons that is used throughout the monorepo.

Development

To start developing on all apps and packages, run the following command:

yarn run dev

Note

When running turborepo tasks like dev or build it will run apps like web and workshop in parallel. e.g. when you want only to do dev on the web app, you should apply filtering to the task.

The filtering should be done by the name inside the package.json of the targeted apps/*

yarn run dev --filter=web --filter=@cartesi/rollups-explorer-ui

Testing

We are using Vitest framework combined with testing-library for react in both packages/ui and apps/web.

Build

To build all apps, run the following command:

yarn run build

Note

If developing inside the e.g. apps/web make sure the assets it depends upon are built. Rule of thumb is always develop from the root project for a multitute of reasons (e.g. formatting and linting rules been correctly applied)

Release

The project use tags that represent releases and currently if it hits the main branch it will be live.

The tag format is as follows:

• Combined tag name v + SemVer format tag (e.g. v0.3.0) to pinpoint repository state on a given production release.

Turborepo Useful Links

Learn more about the power of Turborepo:

• Pipelines
• Caching
• Remote Caching
• Filtering
• Configuration Options
• CLI Usage