Optimize unit tests for apps/rollups

📄 Context

We noticed that unit tests take a lot of time to execute while not containing anything heavy in terms of computations.

Most of the time, those tests contain some mocks and simple checks that should be rather fast. Mocks are stored in memory and we are not calling any third-party services so the large amounts of time required for tests to execute are not justified. This also impacts our builds as they are slower than expected.

✔️ Solution

There are multiple things we can do to improve unit tests speed. An example is to optimize imports since jest (our test runner) takes more time to process large imports than specific ones.

Example from packages/ui:

This is slower:

import { StakePlusIcon } from '../../src/components';

than this:

import { StakePlusIcon } from '../../src/components/Icons';

📈 Subtasks

Optimize imports. Opt in for specific imports than global ones.
Investigate other ways to optimize tests using guides like https://jestjs.io/docs/29.0/troubleshooting and https://blog.bitsrc.io/why-is-my-jest-suite-so-slow-2a4859bb9ac0.
Investigate if we can run only new tests or tests for which the underlying components/modules have changed with https://jestjs.io/docs/cli#--onlychanged. This is for test:ci command.
Investigate if we can remove --runInBand flag for test:ci. For reference - https://jestjs.io/docs/cli#--runinband.

🎯 Definition of Done

Tests speed is increased so that we see significant improvement in build times.

Use Performance calculation from Subgraph

📄 Context

Currently, for the APR calculation for the pools, we use a separate backend solution called postgraphile due to some constraints in the TheGraph protocol we use as Backend. We will retire postgraphile, and the calculation will be served directly from our main backend (Subgraph).

✅ Solution

Start consuming the monthly and weekly performance from our main graphQL API for the StakingPools. Display it when the apr flag is disabled and newPerformanceEnabled is on.

Add a new feature flag to have a controlled rollout of this change. (feature flag name newPerformanceEnabled).
Add the new logic to fetch the new performance data.
Add the new logic to display the new columns based on the feature-flag being enabled/disabled
The current extended components that deal with postgraphile API should stay in place(while transitioning) and continue to work when the apr flag is on.

📈 Subtasks

Create a new feature flag. (i.e. newPerformanceEnabled)
Add the logic to load and display the new performance when the feature flag is enabled and apr flag is disabled in the Performance pool table.
Add tests.
Stories are updated.

🎯 Definition of Done (a.k.a DoD)

When apr flag is disabled and newPerformanceEnabled is on, I can see the performance numbers coming from Subgraph.
Tests are passing.

Update the staking pool commissions page colours and skin tones.

📄 Context

Here are the staking pool's commissions page changes on colour, skin tones and fonts in Dark mode to comply with the new Cartesi brand. The application's structure did not change, only the look and feel.

PS: Refer to the parent of this issue for references.
PS²: Don't worry about the header and footer, because that is addressed in a separate issue #62

📈 Subtasks

Overall

Make sure the fonts are applied correctly based on the Figma description. i.e. Where to use each font and what size and weight to be applied.
Make sure the components are round, like the design. We're transitioning from a squared-based design to a round one.

Page sessions

For the page header area:
- Apply the new colours and font changes for the backlink.
- Check if it is necessary to apply the new colours for the address information.
- Check if applying the new colours for the icon when connected as Pool Manager.
- Apply the correct colours and tones to the navigation tabs.
- Apply changes for the breadcrumbs as per design specs.
Apply colour changes to the Commissions space.
- Update the look and feel of the Table.
Add here any extra tasks you see fit [Optional]

🎯 Definition of Done

Staking pool commissions page matches the design specs on Figma.

Setup initial colour mode to be Dark instead of Light.

Context

Setup the theme configuration to start using the Dark mode instead of the light mode.

Bump dependencies for Utils package

📄 Context

Update the dependencies defined in the packages/utils.

Affected parts

@explorer/wallet
@explorer/ui

Package                                Current  Wanted   Latest   Workspace            Package Type    URL
@types/react-dom                       18.2.5   18.2.6   18.2.6   @explorer/utils      devDependencies https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-dom
@types/react                           18.0.26  18.2.14  18.2.14  @explorer/utils      devDependencies https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react
eslint                                 7.32.0   7.32.0   8.44.0   @explorer/utils      devDependencies https://eslint.org
typescript                             4.9.4    4.9.5    5.1.6    @explorer/utils      devDependencies https://www.typescriptlang.org/

📈 Subtasks

Update the package.json to the new fixed version ( i.e. no ^ or ~ )
Make sure dependencies are updated in the lock file (yarn.lock).
Verify whether all the parts are working as expected.
GitHub CI is passing.
Vercel deployment is going through without problems.

Bump dependencies for UI package

📄 Context

Update the dependencies defined in the packages/ui to avoid staying behind too much.

Affected parts

apps/rollups
apps/staking

Note: Be mindful of major bumps

Package                                Current  Wanted   Latest   Workspace            Package Type    URL
eth-chains                             1.0.0    1.0.0    2.0.0    @explorer/ui         dependencies
ethers                                 5.4.7    5.4.7    6.6.2    @explorer/ui         dependencies    https://ethers.org
humanize-duration                      3.27.0   3.27.0   3.28.0   @explorer/ui         dependencies    https://github.com/EvanHahn/HumanizeDuration.js
react-icons                            4.9.0    4.9.0    4.10.1   @explorer/ui         dependencies    https://github.com/react-icons/react-icons#readme
@storybook/addon-actions               6.5.15   6.5.16   7.0.24   @explorer/ui         devDependencies https://github.com/storybookjs/storybook/tree/next/code/addons/actions
@storybook/addon-essentials            6.5.15   6.5.16   7.0.24   @explorer/ui         devDependencies https://github.com/storybookjs/storybook/tree/next/code/addons/essentials
@storybook/addon-links                 6.5.15   6.5.16   7.0.24   @explorer/ui         devDependencies https://github.com/storybookjs/storybook/tree/next/code/addons/links
@storybook/react                       6.5.15   6.5.16   7.0.24   @explorer/ui         devDependencies https://github.com/storybookjs/storybook/tree/next/code/renderers/react
@testing-library/react                 13.4.0   13.4.0   14.0.0   @explorer/ui         devDependencies https://github.com/testing-library/react-testing-library#readme
@types/humanize-duration               3.25.1   3.25.1   3.27.1   @explorer/ui         devDependencies https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/humanize-duration
@types/react                           18.0.26  18.2.14  18.2.14  @explorer/ui         devDependencies https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react
@types/react-dom                       18.2.5   18.2.6   18.2.6   @explorer/ui         devDependencies https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-dom
eslint                                 7.32.0   7.32.0   8.44.0   @explorer/ui         devDependencies https://eslint.org
jest                                   29.3.1   29.5.0   29.5.0   @explorer/ui         devDependencies https://jestjs.io/
jest-canvas-mock                       2.5.1    2.5.2    2.5.2    @explorer/ui         devDependencies https://github.com/hustcc/jest-canvas-mock#readme
jest-environment-jsdom                 29.3.1   29.5.0   29.5.0   @explorer/ui         devDependencies https://github.com/facebook/jest#readme
jest-mock-extended                     2.0.9    2.0.9    3.0.4    @explorer/ui         devDependencies https://github.com/marchaos/jest-mock-extended
storybook-addon-apollo-client          4.1.4    4.1.4    5.0.0    @explorer/ui         devDependencies https://github.com/lifeiscontent/storybook-addon-apollo-client#readme
storybook-addon-next-router            3.1.1    3.1.1    4.0.2    @explorer/ui         devDependencies https://github.com/lifeiscontent/storybook-addon-next-router#readme
storybook-addon-performance            0.16.1   0.16.1   0.17.1   @explorer/ui         devDependencies https://github.com/atlassian-labs/storybook-addon-performance#readme
typescript                             4.9.4    4.9.5    5.1.6    @explorer/ui         devDependencies https://www.typescriptlang.org/

📈 Subtasks

Update the package.json to the new fixed version ( i.e. no ^ or ~ )
Make sure dependencies are updated in the lock file (yarn.lock).
Verify whether all the parts are working as expected.
GitHub CI is passing.
Vercel deployment is going through without problems.
#33
#37
#41

Bump dependencies for Wallet package

📄 Context

Update the dependencies defined in the packages/wallet.

PS: That does not include the onboarding dependencies because it is worked on issue #24

Affected parts:

apps/rollups
apps/staking
packages/services
packages/ui

Package                                Current  Wanted   Latest   Workspace            Package Type    URL
@unleash/proxy-client-react            3.3.0    3.3.0    3.6.0    @explorer/wallet     dependencies    https://github.com/Unleash/unleash-proxy-react#readme
@types/react-dom                       18.2.5   18.2.6   18.2.6   @explorer/wallet     devDependencies https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-dom
@types/react                           18.0.26  18.2.14  18.2.14  @explorer/wallet     devDependencies https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react
eslint                                 7.32.0   7.32.0   8.44.0   @explorer/wallet     devDependencies https://eslint.org
jest                                   29.3.1   29.5.0   29.5.0   @explorer/wallet     devDependencies https://jestjs.io/
jest-environment-jsdom                 29.3.1   29.5.0   29.5.0   @explorer/wallet     devDependencies https://github.com/facebook/jest#readme
jest-mock-extended                     2.0.9    2.0.9    3.0.4    @explorer/wallet     devDependencies https://github.com/marchaos/jest-mock-extended
typescript                             4.9.4    4.9.5    5.1.6    @explorer/wallet     devDependencies https://www.typescriptlang.org/

📈 Subtasks

Update the package.json to the new fixed version ( i.e. no ^ or ~ )
Make sure dependencies are updated in the lock file (yarn.lock).
Fix any problems introduced by the new lib version related to Jest.
Fix any linter problems caused by the bump of the eslint.
Github CI is passing without problems.
Vercel deployment is going through without problems.
Add here any extra task you consider necessary. [Optional]

Update the home page colours and skin tones.

📄 Context

Here are the home page changes on colour, skin tones and fonts in Dark mode to comply with the new Cartesi brand. The application's structure did not change, only the look and feel.

PS: Refer to the parent of this issue for references on colours, fonts and the overall look and feel of a page.
PS²: Don't worry about the header and footer, because that is addressed in a separate issue #62

📈 Subtasks

A Home page example is already in the Figma file for Dark mode for easier reference.

Overall

Make sure the fonts are applied correctly based on the Figma description. i.e. Where to use each font and what size and weight to be applied.
Make sure the components are round, like the design. We're transitioning from a squared-based design to a round one.

Page sessions

Check if the new colours for the page name, wallet balance, and pool balances are correct. Apply changes if needed.
Apply colour changes to the Block space. Keep the current grid system of 2 columns for big screens and 1 column for small ones for the Card.
Apply colour changes to the Block Producers space.
- Update the look and feel of the Table.
- Update the Address component, replace the light blue background with an underline in the address text..
- Update the staking button colour in the stake/info column.
- Update the paging component to match design specs.
Add here any extra tasks you see fit [Optional]

🎯 Definition of Done

Home page matches the design specs on Figma.

Optimize unit tests for apps/staking

📄 Context

We noticed that unit tests take a lot of time to execute while not containing anything heavy in terms of computations.

Most of the time, those tests contain some mocks and simple checks that should be rather fast. Mocks are stored in memory and we are not calling any third-party services so the large amounts of time required for tests to execute are not justified. This also impacts our builds as they are slower than expected.

✔️ Solution

There are multiple things we can do to improve unit tests speed. An example is to optimize imports since jest (our test runner) takes more time to process large imports than specific ones.

Example from packages/ui:

This is slower:

import { StakePlusIcon } from '../../src/components';

than this:

import { StakePlusIcon } from '../../src/components/Icons';

📈 Subtasks

Optimize imports. Opt in for specific imports than global ones.
Investigate other ways to optimize tests using guides like https://jestjs.io/docs/29.0/troubleshooting and https://blog.bitsrc.io/why-is-my-jest-suite-so-slow-2a4859bb9ac0.
Investigate if we can run only new tests or tests for which the underlying components/modules have changed with https://jestjs.io/docs/cli#--onlychanged. This is for the test:ci command.
Investigate if we can remove --runInBand flag for test:ci. For reference - https://jestjs.io/docs/cli#--runinband.

🎯 Definition of Done

Tests speed is increased so that we see significant improvement in build times.

Optimize unit tests for packages/ui

📄 Context

We noticed that unit tests take a lot of time to execute while not containing anything heavy in terms of computations.

Most of the time, those tests contain some mocks and simple checks that should be rather fast. Mocks are stored in memory and we are not calling any third-party services so the large amounts of time required for tests to execute are not justified. This also impacts our builds as they are slower than expected.

✔️ Solution

There are multiple things we can do to improve unit tests speed. An example is to optimize imports since jest (our test runner) takes more time to process large imports than specific ones.

Example from packages/ui:

This is slower:

import { StakePlusIcon } from '../../src/components';

than this:

import { StakePlusIcon } from '../../src/components/Icons';

📈 Subtasks

Optimize imports. Opt in for specific imports than global ones.
Investigate other ways to optimize tests using guides like https://jestjs.io/docs/29.0/troubleshooting and https://blog.bitsrc.io/why-is-my-jest-suite-so-slow-2a4859bb9ac0.
Investigate if we can run only new tests or tests for which the underlying components/modules have changed with https://jestjs.io/docs/cli#--onlychanged. This is for the test:ci command.
Investigate if we can remove --runInBand flag for test:ci. For reference - https://jestjs.io/docs/cli#--runinband.

🎯 Definition of Done

Tests speed is increased so that we see significant improvement in build times.

Remove redundant package on apps/staking

📄 Context

The current package in the explorer repository still exhibits redundancy in the wallet modules.

The package mentioned (apps/staking) has duplicate modules found in the packages/wallet directory:

package.json in apps/staking: link
package.json in packages/wallet: link
The objective of this issue is to eliminate the redundancy, ensuring that the wallet packages are only loaded from the packages/wallet directory.

📈 Subtasks

Update the package.json on apps/staking
Make sure dependencies are updated in the lock file (yarn.lock).
Bump package version on packages/wallet
Verify whether everything is working as expected.

Duplicate content, move to #24

Vercel Setup & Deployment

📄 Context

As we move to the public repository, all the integrations must be set again. Also, as we are moving to a trunk-based development, the Vercel configuration for deployment will change, and production will be based on tag publishing only and the main and other branches for the preview environment.

✔️ Solution

Create new projects on Vercel for rollups and staking. Keep the main branch as the default, but add a new branch to be the production representation and keep using the branch-based deploy on Vercel.

Add projects
main branch will be the preview environment (Preview Domain associated)
production branch will be the one published on production environment. (Production domain associated)

📈 Subtasks

Create a new project on Vercel for Staking.
Create a new project on Vercel for Rollups.
Include the environment variables for each project.

🎯 Definition of Done

Production deployment is based only on the tag/production branch.
PR merges to main are deployed in preview mode and associated with the https://preview.explorer.cartesi.io domain.

Update the stake page colours and skin tones.

📄 Context

Here are the stake page changes on colour, skin tones and fonts in Dark mode to comply with the new Cartesi brand. The application's structure did not change, only the look and feel.

PS: Refer to the parent of this issue for references.
PS²: Don't worry about the header and footer, because that is addressed in a separate issue #62

📈 Subtasks

Overall

Make sure the fonts are applied correctly based on the Figma description. i.e. Where to use each font and what size and weight to be applied.
Make sure the components are round, like the design. We're transitioning from a squared-based design to a round one.

Page sessions

🎯 Definition of Done

Stake page matches the design specs on Figma.

Update the stake page colours and skin tones (Light Mode)

📄 Context

Here are the stake page changes on colour, skin tones and fonts in Light Mode to comply with the new Cartesi brand. The application's structure did not change, only the look and feel.

PS: Refer to the parent of this issue for references.
PS²: Don't worry about the header and footer, because that is addressed in a separate issue #82

📈 Subtasks

Overall

Make sure the fonts are applied correctly based on the Figma description. i.e. Where to use each font and what size and weight to be applied.
Make sure the components are round, like the design. We're transitioning from a squared-based design to a round one.

Page sessions

🎯 Definition of Done

Stake page matches the design specs on Figma for Light Mode.

yarn storybook command not working properly

📄 Context

Currently, we are using Storybook, and for every pull-request and push, we publish to Chromatic. Apparently, it works as expected since we use the storybook-build command and publish the folder with the static content. But if we use the yarn storybook command inside the apps/staking folder, for example, or in the root of the project through turborepo task, the build goes well (without any failures), the app opens, but all the stories display this Storybook preview hook error message.

✔️ Solution

Recently we did some upgrades in the storybook libs/deps. An investigation would be necessary to see in which tag for example that problem may have been introduced, the tags may help to narrow down the changes since we have compares defined inside the CHANGELOG.md.

📈 Subtasks

Investigate where the yarn storybook command stops working properly.
Apply the changes to fix the configuration/code that is causing the trouble.

🎯 Definition of Done

Running yarn storybook renders the stories without problem.

Improve test coverage for packages/wallet workspace

📄 Context

Add more unit tests in order to increase the test coverage for packages/wallet workspace. Aim for 75% coverage.

🎯 Definition of Done

Test coverage should be increased to at least 75%

Architecture changes for DApp details view

Summary

Currently, the explorer rollups will need to support different cases, e.g. as a Web application maintained by us to consume all the DApps and provide a few pieces of information about each one of them, containerize to run locally to support the development and as a part of the deployment package for a single DApp when it is deployed somewhere. Hence, that differs from the usual web app; maintenance is gold here.

Engineering

We have a few stable structures in place.

The home page / where we provide an overall number of DApps and inputs and a paged list of DApps.
The DApp details page /dapp/address-of-the-dapp with more informational data when possible about the DApp.
A graphQL folder with queries and schema definitions and also a codegen.yml that we use to instruct code generation and save the artefacts on src/generated folder.

Outcome & references

We want two things out of this issue.

We want to update the graphQL queries definitions and codegen.yml so that we can have a generated folder with versions inside it. src/generated/v0.8 and src/generated/v0.9 or something close to that with clear package/namespace separation. The rollups from v0.6.x to v0.8.x will benefit from the same queries and type definitions. The v0.9 has breaking changes; the Epochconcept is gone from the graph tree, and now it is all about the Input.
Isolate the content displayed in the DApp detail screen using the Container pattern as discussed previously. It should use the rollups version of that DApp to decide which container to use.

I am adding the tasklist in a specific order because the expected code generation structure will be used to inject in the containers. So, generation first and UI second.

Tasklist code generation:

Add the typedef for v0.9 (in alpha) to our base code.
Update the config for code generation to generate separate outputs for graphQL queries and types based on the versions.
Should continue to work when commands like dev and build comes from Turborepo i.e. from the root folder.

Tasklist UI:

Containerize the current DApp details page that is for v0.6. In theory v0.8 DApps should work out of the box
Add the logic to decide which container to use based on the DApp factory version. Check the graphQL REF to see how you can retrieve info about it.
Add tests for the container pattern new logic

ps: Keep an eye on GitHub-actions and Vercel CI.

GraphQL endpoint

Available query to retrieve data about the factory version: dapps | dapp

Network Endpoint

https://api.thegraph.com/subgraphs/name/cartesi/rollups-goerli

https://api.thegraph.com/subgraphs/name/cartesi/rollups-arbitrum-goerli

Network	Endpoint
	https://api.thegraph.com/subgraphs/name/cartesi/rollups-goerli
	https://api.thegraph.com/subgraphs/name/cartesi/rollups-arbitrum-goerli

Add the new colours to the theme (e.g. Cyan, Teal, Support system colours, etc.)

Context

The new brand requires a new set of colours to support the overall looking and feel of the applications, i.e. Staking and Rollups.

PS: Refer to the parent issue for design references.

Solution

Include the new set of colours to support the system. As a suggestion, the reference colours are single instead of pallets, so I suggest being mindful and using the same language used by the design team, for example;

[Suggestion]: Adding to the theme's colours definition;

{
 dark: {
   support: {
     success: #BDE08D,
     alert: #FEB274,
     error: #FF8D78
   }
 }
}

Later, we could refine and leverage the use of Chakra-ui Sematic Tokens

Subtasks

Add the new base dark mode colours (Dark mode)
Add the new Digital product UI colours definition (Dark mode)
Add the new support system colours (Dark mode)

Definition of done

The new values are included in the theme's colour configuration.

Update the node-runner's staking pool management page colours and skin tones.

📄 Context

Here are the node-runners staking pool management page changes on colour, skin tones and fonts in Dark mode to comply with the new Cartesi brand. The application's structure did not change, only the look and feel.

PS: Refer to the parent of this issue for references.
PS²: Don't worry about the header and footer, because that is addressed in a separate issue #62

📈 Subtasks

Overall

Make sure the fonts are applied correctly based on the Figma description. i.e. Where to use each font and what size and weight to be applied.
Make sure the components are round, like the design. We're transitioning from a squared-based design to a round one.

Page sessions

🎯 Definition of Done

Node-runners staking pool management page matches the design specs on Figma.

Update header and footer colours, and skin tones.

📄 Context

That is a one-off change in the navbar and footer that will benefit the work to be done on multiple pages.

*PS: Refer to the parent of this issue for references.

📈 Subtasks

Make sure the fonts are applied correctly based on the Figma description. i.e. Where to use each font and what size and weight to be applied.
Apply colour changes to the NavBar space where the Logo, links and wallet button lies.
Apply colour changes to the Footer space.

🎯 Definition of Done

The NavBar and Footer match the design specs.

Add message when DApp has no inputs

📄 Context

The DApps details view currently shows a message for error when there are problems with the guessed URL, or it lists the inputs in case we have data. For the use case where the graphQL connection is established without problems, but there are no Inputs, we display an empty body below the search. It is not bad; however, we can do a bit a better 👍

✔️ Solution

Display a centralised message to provide feedback that all is well, but the DApp has not produced any inputs yet. The key points are;

Only display such a message when; no errors happen on the graphQL side, and there are no data back from the fetch.
Otherwise, it should not be displayed.

📈 Subtasks

Centralise an informative notification below the search area with the following copy Looks like there are no inputs yet...
Add new test cases to cover the new code.

🎯 Definition of Done

Should display the above copy when the connection is established, but there are no data to display.
CI checks and new test cases are passing.
Vercel deployment is going through without problems.

Update the node-runner's private node creation page colours and skin tones (Dark mode)

📄 Context

Here are the node runners private node creation page changes on colour, skin tones and fonts in Dark mode to comply with the new Cartesi brand. The application's structure did not change, only the look and feel.

PS: Refer to the parent of this issue for references.
PS²: Don't worry about the header and footer, because that is addressed in a separate issue #62

📈 Subtasks

Overall

Make sure the fonts are applied correctly based on the Figma description. i.e. Where to use each font and what size and weight to be applied.
Make sure the components are round, like the design. We're transitioning from a squared-based design to a round one.

Page sessions

🎯 Definition of Done

Node runners' private node creation matches the design specs on Figma.

Update the node-runner's staking pool creation page colours and skin tones (Dark mode)

📄 Context

Here are the node runners staking pool creation page changes on colour, skin tones and fonts in Dark mode to comply with the new Cartesi brand. The application's structure did not change, only the look and feel.

PS: Refer to the parent of this issue for references.
PS²: Don't worry about the header and footer, because that is addressed in a separate issue #62

📈 Subtasks

Overall

Make sure the fonts are applied correctly based on the Figma description. i.e. Where to use each font and what size and weight to be applied.
Make sure the components are round, like the design. We're transitioning from a squared-based design to a round one.

Page sessions

🎯 Definition of Done

Node runners' staking pool creation matches the design specs on Figma.

Remove GraphQL schema for v0.8

📄 Context

We made some house cleaning for old versions of rollups (i.e., rollups v0.8.2), but some definitions are still lingering around and another round of cleaning is necessary.

✔️ Solution

Remove and delete the graphQL schema definition for v0.8.

📈 Subtasks

Remove definitions and folder for the schema.graphql for v0.8. located on graphql/schema/v0.8.
Check for any reference in the codegen.yml that must be removed.
Check for any tests that may have reference to it.

🎯 Definition of Done

CI checks, and tests are passing.
Codegen is working as expected.
Vercel deployment is going through without problems.

Improve test coverage for apps/staking workspace

📄 Context

Add more unit tests in order to increase the test coverage for apps/staking workspace. Aim for 75% coverage.

🎯 Definition of Done

Test coverage should be increased to at least 75%

Update the blocks page colours and skin tones.

📄 Context

Here are the Blocks page changes on colour, skin tones and fonts in Dark mode to comply with the new Cartesi brand. The application's structure did not change, only the look and feel.

PS: Refer to the parent of this issue for references.
PS²: Don't worry about the header and footer, because that is addressed in a separate issue #62

📈 Subtasks

Overall

Make sure the fonts are applied correctly based on the Figma description. i.e. Where to use each font and what size and weight to be applied.
Make sure the components are round, like the design. We're transitioning from a squared-based design to a round one.

Page sessions

Check if the new colour and fonts for the page name are correct. Apply changes if needed.
Check if the new colour and shape for the search bar is correct. Apply changes if needed.
Apply colour changes to the Block Chart as necessary. ps: Attention that the chart contains a list of colours to differentiate the list of entries for each different chain
Apply colour changes to the Block list by all cads.
Apply colour changes to the Block list by producers cards.
Apply colour changes to the Block list by nodes cards.
Add here any extra tasks you see fit [Optional]

🎯 Definition of Done

Blocks page matches the design specs on Figma.

Option to auto check for new inputs

📄 Context

In the rollups explorer, we list the latest N inputs that could contain notices, reports, and vouchers in the DApp details view. But a hard refresh would be needed to check for new Inputs that may have come through. Not bad, but a better experience could be added to fetch the latest data.

✔️ Solution

A switch should be added in the DApp details view to start the fetching process of the latest inputs. A few key points below;

Add a switch UI to start the whole process. Component reference here
Add a pooling/interrogation mechanism to check for the latest data.
If a list of items already exists, it should not disrupt the current state of it, meaning to avoid complete list replacement but rather append to it.
Upgrades to the GraphQL Mock server are required to support further development.

📈 Subtasks

🎯 Definition of Done

When the switch is on, the inputs come into the list automatically without the need to refresh the page.
The request should stop when the switch is changed back to its off position.
CI is passing without problems.
Vercel deployment is going through without problems.

Remove rollups v0.8.2

📄 Context

Rollups version v0.8.x helped the development team to build support for the local development of DApps. But since v0.9.0 is the target, we could remove everything related to v0.8.2.

✔️ Solution

Remove the dependency for rollups v0.8.2 and adapt the components that use it that support DApp local development.

Remove @cartesi/[email protected]
Change code logic that deals with 0.8.
Run a v0.9.0 DApp locally and check that it works as expected.

📈 Subtasks

Remove the @cartesi/rollups dependency for v0.8.2
Code changes that remove the usage of v0.8.2 related code, e.g. factories for InputFacet and other hooks.
Run a DApp 0.9.0 locally and check the integration is working as expected, i.e. I can see my DApp details in the main screen.
Test changes (if required, given the above changes)

🎯 Definition of Done

Run on DApp local dev mode works as expected when using a DApp locally (i.e. hardhat local blockchain)
The web-deployed version that integrates with networks (Goerli, Arbitrum-Goerli) still works as expected.
CI checks are passing.

Setup the new brand typefaces (i.e. Fonts).

Context

The new brand uses a new set of fonts for different purposes. We need to add these new typefaces to our system to be used widely, meaning both Staking and Rollups applications.

PS: Refer to the parent of this issue for references.

Subtasks

Add the new typefaces to the project.
Integrate the new font family to the theme's font definition. Follow the guidelines of weight and where to use as described in Figma.

Definition of done

The new fonts affect the correct places per Figma's definition.

[Experiment]: A new Indexing protocol solution for Rollups

📄 Context

Subgraph was the first (allegedly) good solution in the market as an indexing protocol. Still, it lacks flexibility on the graphQL API that force us to create summary entities here and there and more complex cases with pagination become constrained, if not impossible. Furthermore, we can't extend the graphQL API with custom resolvers which would be a killer feature (making that experiment unnecessary); on top of that is the language chosen, i.e. AssemblyScript, which is confusing since it uses the extension .ts, causing all sorts of pitfalls along the way until you become a scarred warrior 🥷. Besides that, the way we have our Subgraph set is working, but I want to look at other indexing protocol solutions available like subsquid or satsuma

✔️ Solution

For this experiment, I will pick the Subsquid. I'll add the pros and cons below and focus on my perceived benefits from the DX perspective. The deployment of the squid in the Aquarium service has its learning curve and details (e.g. Premium users vs Free users).

Pro

GraphQL API can be extended with a custom resolver, including mutation.
GraphQL subscriptions available.
Write handlers in plain javascript and/or typescript.
Can call external API for data since it is the usual node.js process.
Self-hosting is an option.
Offers a hosting service called Aquarium
Alias to production endpoint with promotion between squid without downtime*

Cons

New programming model called batch-based, so there is a learning curve here.
No Goerli archive node offered, only Sepolia. PS: not really a strong con, but I want to point that out.

📈 Subtasks

Create the Squid backend for Rollups into the Monorepo.
Map the contracts we are indexing.
Extend the graphQL API for performance
Could we use graphQL generators and easily integrate with the hooks we already have? yes/no
Space for more tasks/checks as fit [optional]

Update the node-runners page colours and skin tones.

📄 Context

Here are the node runners main page changes on colour, skin tones and fonts in Dark mode to comply with the new Cartesi brand. The application's structure did not change, only the look and feel.

PS: Refer to the parent of this issue for references.
PS²: Don't worry about the header and footer, because that is addressed in a separate issue #62

📈 Subtasks

PS: A highlight for the two cases below. observe the spacing and difference in colours in between blocks, meaning they are not glued.

Overall

Make sure the fonts are applied correctly based on the Figma description. i.e. Where to use each font and what size and weight to be applied.
Make sure the components are round, like the design. We're transitioning from a squared-based design to a round one.

Page sessions

For the page header area:
- apply new colour and font rules for page title and subtitle.
- when wallet is disconnected: Apply the new colour and font rules in the alert and connect area.

Case: when the user doesn't have either Staking Pool or Private node

Case: when there is a Staking Pool and/or Private Node created

For the Pool block
- Apply the new font rules to the title.
- Apply colours changes to the create pool button
- Update the look and feel of the Table (check on Figma for table colours reference)
For the Private node block
- Apply the new font rules to the title.
- Update the look and feel of the Table (check on Figma for table colours reference)

🎯 Definition of Done

Node runners' main page matches the design specs on Figma.

Replace AWS subgraph with Chainstack's

📄 Context

We will sunset subgraph support on our infrastructure, lowering costs and maintenance work. So we will be replacing the current AWS with another provider called Chainstack

✔️ Solution

Replace all AWS-related configurations with Chainstack's. That includes;

Update the GraphQL Apollo configurations.
Update the ISR for the staking pool pages.
Check with the API stats needs any changes.
Remove all the code related to the extended version.
Remove any usage of the feature flags; aws and apr (all related to AWS and the extended version provided by Postgraphile )in the code base.

📈 Subtasks

Create a feature flag to switch between hosted services and Chainstack.
Update graphQL Apollo configuration with Chainstack information
Remove all code definitions related to the graphql extended version. i.e. components/hooks/tests/stories.
Check on API stats if any change is necessary.
Check on the safe wallet (a.k.a Gnosis Safe).

🎯 Definition of Done

Running Staking in the Preview environment works seamlessly.
Running Staking in a Production environment works seamlessly.
Switch feature flag will change the data source without causing problems.

Update the staking pool users' page colours and skin tones.

📄 Context

Here are the staking pool's user page changes on colour, skin tones and fonts in Dark mode to comply with the new Cartesi brand. The application's structure did not change, only the look and feel.

PS: Refer to the parent of this issue for references.
PS²: Don't worry about the header and footer, because that is addressed in a separate issue #62

📈 Subtasks

Overall

Make sure the fonts are applied correctly based on the Figma description. i.e. Where to use each font and what size and weight to be applied.
Make sure the components are round, like the design. We're transitioning from a squared-based design to a round one.

Page sessions

🎯 Definition of Done

Staking pool users page matches the design specs on Figma.

Add new colours to the theme (Light Mode)

Context

The new brand requires a new set of colours to support the overall looking and feel of the applications, i.e. Staking and Rollups.

PS: Refer to the parent issue for design references.

Solution

Include the new set of colours to support the system. As a suggestion, the reference colours are single instead of pallets, so I suggest being mindful and using the same language used by the design team, for example;

[Suggestion]: Adding to the theme's colours definition;

{
 light: {
   support: {
     success: #7CA154
     alert: #FFA77A,
     error: #FD7267,
     info: #B5E8F4
   }
 }
}

Later, we could refine and leverage the use of Chakra-ui Sematic Tokens

Subtasks

Add the new base light mode colours (Light mode).
Add the new Digital product UI colour definition, i.e. the shades of grey (Light mode).
Add the new support system colours (Light mode).

Definition of done

The new values are included in the theme's colour configuration.

Theme update to match the rebranding

📄 Context

Cartesi has changed its brand; we must also upgrade our side and reflect on these new colours, fonts and overall look and feel. The Design team is working on batches, and the first is the changes in the skin and colour tones for Dark Mode and Light Mode

PS: This will be an epic issue, holding all the references to other spawn issues related to this work.

✔️ Solution

Upgrade the Chakra-ui theme and make any adjustments to the pages based on the guidelines in the Figma definition for Dark Mode and Light Mode.

Figma Reference: Explorer design system (new Dark mode)
Figma Reference: Explorer design system (new Light Mode)

Another ref: New component update, but mostly can be seen on Figma.

Fonts:

Vercel Deployment (New merges, updates the following): Application Preview

📈 Subtasks

Common

#54

Dark Mode

Light Mode

Adjustments

#131

🎯 Definition of Done

All the above sub-issues are implemented.

Update copyright notices

📄 Context

We need to update our copyright. Below is a more detailed context including some links.

Hey all, to more closely align with the reality that Cartesi is built by an ever-growing ecosystem of independent contributors -- and in order to bring recognition to the copyrighted contributions of individual authors -- the recommended course of action for copyright notices in all official Cartesi Github repositories is as follows:

All existing copyright notices pertaining to code written by Cartesi contributors that is licensed under Apache 2.0 should be changed to:

(c) Cartesi and individual authors (see AUTHORS)
SPDX-License-Identifier: Apache-2.0 (see LICENSE)

All existing copyright notices pertaining to code written by Cartesi contributors that is licensed under LGPL-3.0 should be changed to:

(c) Cartesi and individual authors (see AUTHORS)
SPDX-License-Identifier: LGPL-3.0 (see LICENSE)

No year is needed for any copyright notice.

Each repository should contain an AUTHORS file. Any contributor who has in the past had at least one pull request for a code change accepted in that repo may submit a pull request to have their name added to the AUTHORS file. Submissions to the AUTHORS file should be in the format:

Name <email>

In the first instance, the individual contributor(s) responsible for approving pull requests for that repo will need to manually check that the author submitting their name for inclusion previously had a pull request for a code change accepted in that repo. Contributors may then seek a way to automate this process moving forward.

Inclusion in the AUTHORS file for each repo is entirely voluntary. It is up to each individual author to decide whether they would like attribution in a given AUTHORS file and to submit a pull request accordingly. Please note that a contributor's decision on whether to seek attribution in an AUTHORS file will have no impact on copyright ownership.

See https://discord.com/channels/600597137524391947/1130905237901803560/1131962825695297567

Rollups repository references

Issue: cartesi/rollups#199
PR: cartesi/rollups#203

Update ethers to latest stable version.

Subtask of this task. In this one, we should focus on updating ethers dependencies.

Update the staking pool stake page colours and skin tones.

📄 Context

Here are the staking pool's stake page changes on colour, skin tones and fonts in Dark mode to comply with the new Cartesi brand. The application's structure did not change, only the look and feel.

PS: Refer to the parent of this issue for references.
PS²: Don't worry about the header and footer, because that is addressed in a separate issue #62

📈 Subtasks

Overall

Make sure the fonts are applied correctly based on the Figma description. i.e. Where to use each font and what size and weight to be applied.
Make sure the components are round, like the design. We're transitioning from a squared-based design to a round one.

Page sessions

🎯 Definition of Done

Staking pool's stake page matches the design specs on Figma.

Bump dependencies on explorer root-project

📄 Context

Update dependencies defined in the root project to avoid staying behind. Just be mindful of the ones with major bumps.

Package                                Current  Wanted   Latest   Workspace            Package Type    URL
@chakra-ui/icons                       2.0.10   2.0.10   2.0.19   explorer             dependencies    https://github.com/chakra-ui/chakra-ui#readme
@chakra-ui/react                       2.3.4    2.3.4    2.7.1    explorer             dependencies    https://chakra-ui.com/
@chakra-ui/theme-tools                 2.0.11   2.0.11   2.0.18   explorer             dependencies    https://github.com/chakra-ui/chakra-ui#readme
@unleash/proxy-client-react            3.3.0    3.3.0    3.6.0    explorer             dependencies    https://github.com/Unleash/unleash-proxy-react#readme
unleash-proxy-client                   2.2.1    2.2.1    2.5.0    explorer             dependencies    https://github.com/unleash/unleash-proxy-client-js#readme
turbo                                  1.6.3    1.10.7   1.10.7   explorer             devDependencies https://turbo.build/repo
prettier                               2.8.2    2.8.8    2.8.8    explorer             devDependencies https://prettier.io
framer-motion                          4.1.17   4.1.17   10.12.18 explorer             dependencies    https://github.com/framer/motion#readme

📈 Subtasks

Update the package.json to the new fixed version ( i.e. no ^ or ~ )
Make sure dependencies are updated in the lock file (yarn.lock).
Fix any API-breaking changes or deprecations in the new lib version for Chakra-UI.
Fix any API-breaking changes or deprecations in the new lib version for Unleash.
Fix any API-breaking changes or deprecations in the new lib version for framer-motion.
Fix any code formatting issues caused by the prettier version. If any
Verify whether the GitHub CI is passing.
Verify Vercel deployments are going through without problems.

Update jest dependencies and fix console errors.

Subtask of this task. In this one, we should focus on updating jest dependencies and fix any errors that may come up.

Update header and footer colours and skin tones (Light Mode)

📄 Context

That is a one-off change in the navbar and footer that will benefit the work done on multiple pages.

*PS: Refer to the parent of this issue for references.

📈 Subtasks

Make sure the fonts are applied correctly based on the Figma description. i.e. Where to use each font and what size and weight to be applied.
Apply colour changes to the NavBar space where the Logo, links and wallet button lies.
Apply colour changes to the Footer space.

🎯 Definition of Done

The NavBar and Footer match the design specs.

Update the home page colours and skin tones (Light Mode)

📄 Context

Here are the home page changes on colour, skin tones and fonts in Light mode to comply with the new Cartesi brand. The application's structure did not change, only the look and feel.

PS: Refer to the parent of this issue for references on colours, fonts and the overall look and feel of a page.
PS²: Don't worry about the header and footer, because that is addressed in a separate issue #82

📈 Subtasks

A Home page example is already in the Figma file for Light mode for good reference.

Overall

Make sure the fonts are applied correctly based on the Figma description. i.e. Where to use each font and what size and weight to be applied.
Make sure the components are round, like the design. We're transitioning from a squared-based design to a round one.

Page sessions

Check if the new colours for the page name, wallet balance, and pool balances are correct. Apply changes if needed.
Apply colour changes to the Block space. Keep the current grid system of 2 columns for big screens and 1 column for small ones for the Card.
Apply colour changes to the Block Producers space.
- Update the look and feel of the Table.
- Update the Address component, replace the light blue background with an underline in the address text..
- Update the staking button colour in the stake/info column.
- Update the paging component to match design specs.
Add here any extra tasks you see fit [Optional]

🎯 Definition of Done

Home page matches the design specs on Figma for Light Mode.

Update onboard dependencies and remove duplicates

📄 Context

Onboard is the library used to deal with wallet integration. We need to upgrade the core library and all the extra modules. Also, eliminate the duplication of dependency between the package/wallet and apps/staking since we move to a monorepo setup.

Package                        Current Wanted Latest Workspace        Package Type URL
@web3-onboard/coinbase         2.2.0   2.2.0  2.2.4  staking          dependencies https://onboard.blocknative.com
@web3-onboard/coinbase         2.2.0   2.2.0  2.2.4  @explorer/wallet dependencies https://onboard.blocknative.com
@web3-onboard/core             2.11.0  2.11.0 2.20.2 staking          dependencies https://onboard.blocknative.com
@web3-onboard/core             2.11.0  2.11.0 2.20.2 @explorer/wallet dependencies https://onboard.blocknative.com
@web3-onboard/gnosis           2.1.5   2.1.5  2.1.10 staking          dependencies https://onboard.blocknative.com
@web3-onboard/gnosis           2.1.5   2.1.5  2.1.10 @explorer/wallet dependencies https://onboard.blocknative.com
@web3-onboard/injected-wallets 2.4.0   2.4.0  2.10.1 staking          dependencies https://onboard.blocknative.com
@web3-onboard/injected-wallets 2.4.0   2.4.0  2.10.1 @explorer/wallet dependencies https://onboard.blocknative.com
@web3-onboard/ledger           2.3.2   2.3.2  2.4.6  staking          dependencies https://onboard.blocknative.com
@web3-onboard/ledger           2.3.2   2.3.2  2.4.6  @explorer/wallet dependencies https://onboard.blocknative.com
@web3-onboard/react            2.4.1   2.4.1  2.8.7  staking          dependencies https://onboard.blocknative.com
@web3-onboard/react            2.4.1   2.4.1  2.8.7  @explorer/wallet dependencies https://onboard.blocknative.com
@web3-onboard/walletconnect    2.2.1   2.2.1  2.3.9  staking          dependencies https://onboard.blocknative.com
@web3-onboard/walletconnect    2.2.1   2.2.1  2.3.9  @explorer/wallet dependencies https://onboard.blocknative.com

📈 Subtasks

Remove the dependency from the staking App.
Update the package.json to the new fixed version ( i.e. no ^ or ~ )
Create the corresponding issue if an update requires major work.
Make sure dependencies are updated in the lock file (yarn.lock).
Verify whether the wallet is working as expected. i.e. User could submit the transitions
Bump dependencies on the wallet package #28

🎯 Definition of Done

Transaction can be done with success through the web application.
Transaction can be done with success through https://app.safe.global.
Transaction can be done with success using a hardware wallet (i.e. Ledger)
CI verifications are passing.

Upgrade rollups to the latest version

📄 Context

Currently, we are using the @cartesi/[email protected], but a new version (0.9.1) was released last month. Let's bump the performance to keep following the latest updates.

📈 Subtasks

Update the package.json to the new fixed version ( i.e. no ^ or ~ )
Make sure dependencies are updated in the lock file (yarn.lock).
Verify whether previously listed DApps on Goerli and/or Arbitrum Goerli are still listed.
Create the corresponding issue if an update requires significant work.

Table head on staking page UI

Which network is that happening?

Mainnet, Goerli

Which Explorer is that Bug happening?

Staking

🙂 Expected behavior

The arrow on the Total Users should be inline with the text like the Total Rewards

🫠 Actual behavior

The arrow is below the text

🧪 Minimal test case

Check the UI on all display: mobile, tablet, desktop.

📄 Extra information

No response

Move rollups docker packaging from QEMU

📄 Context

We have been using QEMU to generate our rollups docker image. Previously it was only generating the images using the Linux/amd64 architecture, and the times were reasonable, around 6 minutes without intermittent connectivity problems. Once we included the Linux/arm64, though, the timing for that generation alone is around 26 minutes, and we often see network connectivity problems (screenshot below) naturally followed by CI failure because it usually never recovers that connection. Therefore, we are looking for an alternative to solve that problem and avoid the workaround, that is, to rerun it 🫠.

✔️ Solution

Initially, move from QEMU to depot.dev, which is specialised in building docker images. PS: funny enough, the example on the main page is showing how fast it is to build something on arm64

Reference: Sunodo CLI Action

📈 Subtasks

Create a DEPOT_PROJECT for rollups-explorer on depot.dev.
Add the DEPOT_PROJECT in the repository vars config to be available to the GitHub action.
Update permissions in the docker-rollups.yml including id-token: write to be able to request JWT token.
Add setup steps to integrate with depot.dev

🎯 Definition of Done

The intermittent CI connectivity failure is solved
rollups-explorer images are published to the GitHub Registry a.k.a packages.

Update: Rollups Docker image generation.

📄 Context

Currently, when a tag it will also start an action to package a docker image for rollups to be published not just on the GitHub container registry but also on the docker hub. But we need the credentials set in the repository to publish the image. Also, change how we trigger the GA for rollups-explorer docker image generation.

PS: Added extra things in bold

✔️ Solution

Add the docker hub credentials to the repository settings to be available for our GitHub actions. Also, we will trigger the GitHub action for rollups packaging based on tag versioning.

Include secrets for docker-hub in the repo settings
Update the GitHub action to be triggered when matching a rollups-related tag version. i.e. [email protected], which results in a docker image tag like cartes/rollups-explorer:0.9.0
Update documentation to clarify how the image publishing works.

📈 Subtasks

Add the secrets to connect to the docker hub and publish the image.
Update the GitHub that package rollups-explorer image based on tag as abovementioned.
Update documentation about the rollups-explorer image publishing.

🎯 Definition of Done

The docker image for explorer-rollups could be published to the docker hub.
The GitHub action is updated with the abovementioned tag matching.
Documentation is with the rollups docker image publishing process.

Update the staking pool info page colours and skin tones.

📄 Context

Here are the staking pool page checkboxes for changes in colour, skin tones and fonts in Dark mode to comply with the new Cartesi brand. The application's structure did not change, only the look and feel.

PS: Refer to the parent of this issue for references.
PS²: Don't worry about the header and footer, because that is addressed in a separate issue #62

📈 Subtasks

Overall

Make sure the fonts are applied correctly based on the Figma description. i.e. Where to use each font and what size and weight to be applied.
Make sure the components are round, like the design. We're transitioning from a squared-based design to a round one.

Page sessions

Check if the new colour for the page name is correct. Apply changes if needed.
Apply colour changes to the Summary space. i.e. Staking pool cards e.g. Users / Commissions./ Staked balance
Apply colour changes to the Pool Activity space.
- Update the look and feel of the search input
- Update the colours for the filter and tag. That included the menu, checkbox and radio button.
- Update the look and feel of the Table.
- Check whether the Address component needs the following update. replace the light blue background with an underline in the address text.
Add here any extra tasks you see fit [Optional]

🎯 Definition of Done

The Staking pool page info matches the design specs.

Update storybook packages to latest compatible version.

Subtask of this task. In this one, we should focus on updating storybook dependencies.

Update the node-runner's private node management page colours and skin tones (Dark mode)

📄 Context

Here are the node-runners private node management page changes on colour, skin tones and fonts in Dark mode to comply with the new Cartesi brand. The application's structure did not change, only the look and feel.

PS: Refer to the parent of this issue for references.
PS²: Don't worry about the header and footer, because that is addressed in a separate issue #62

📈 Subtasks

Overall

Make sure the fonts are applied correctly based on the Figma description. i.e. Where to use each font and what size and weight to be applied.
Make sure the components are round, like the design. We're transitioning from a squared-based design to a round one.

Page sessions

🎯 Definition of Done

Node-runners staking pool management page matches the design specs on Figma.

cartesi / explorer Goto Github PK

explorer's People

Contributors

Stargazers

Watchers

Forkers

explorer's Issues

📄 Context

✔️ Solution

📈 Subtasks

🎯 Definition of Done

📄 Context

✅ Solution

📈 Subtasks

🎯 Definition of Done (a.k.a DoD)

📄 Context

📈 Subtasks

Overall

Page sessions

🎯 Definition of Done

Context

📄 Context

Affected parts

📈 Subtasks

📄 Context

Affected parts

📈 Subtasks

📄 Context

Affected parts:

📈 Subtasks

📄 Context

📈 Subtasks

Overall

Page sessions

🎯 Definition of Done

📄 Context

✔️ Solution

📈 Subtasks

🎯 Definition of Done

📄 Context

✔️ Solution

📈 Subtasks

🎯 Definition of Done

📄 Context

📈 Subtasks

📄 Context

✔️ Solution

📈 Subtasks

🎯 Definition of Done

📄 Context

📈 Subtasks

Overall

Page sessions

🎯 Definition of Done

📄 Context

📈 Subtasks

Overall

Page sessions

🎯 Definition of Done

📄 Context

✔️ Solution

📈 Subtasks

🎯 Definition of Done

📄 Context

🎯 Definition of Done

Summary

Engineering

Outcome & references

GraphQL endpoint

Context

Solution

Subtasks

Definition of done

📄 Context

📈 Subtasks

Overall

Page sessions

🎯 Definition of Done

📄 Context

📈 Subtasks