Changes to the Home content

[brunomenezes]

📄 Context

The home page is the list of the latest inputs. That was a good starting point, but as the application is growing, we can present a more homely space with summaries and pathways to go to places of interest.

✔️ Solution

We move the current Inputs title/table to its page, similar to the applications page regarding the presentation. Also, adding the new content in the home to replace the Input-oriented content.

• Move the Input icon + title and table content to its page under /inputs
• Home content;
  • Current summary of applications and inputs stays as it is.
  • Add two cards to list the latest 6 inputs and 6 applications.
  • The cards should be presented in a single column for small screens; otherwise, two-column arrangements.
• New Cards details:
  • The cards should include header + content + footer.
  • The copy for the card's header is Latest inputs and Latest applications, respectively.
  • For input, the content should be a table with two columns Address, Age
    • Address is the application ID.
    • The address is in a short format, and the age is in a human-readable date/time (Using the same format displayed in the full input table).
    • Address should be clickable and go to the applications/app-address.
  • For applications: the content should be a table with Two columns, Address and Age.
    • Address is the application ID.
    • The address is in a short format, and the age is in a human-readable date/time (Using the same format displayed in the full input table).
  • The footer of the cards should have a link with the respective copies VIEW ALL INPUTS and VIEW ALL APPS. Clicking goes to the respective pages.

📈 Subtasks

• Move the input icon + title and Input table to a new page under /inputs.
• Add the new Card with information about inputs. Details above
• Add the new Card with information about applications. Details above
• Presentation respects the distinction between small and big screens. Details above
• Add loading state for inputs page
• Add error state for inputs page
• Add test cases.

🎯 Definition of Done

• Users can see the home with a summary of total applications/inputs.
• Users can see the list of the latest 6 applications and inputs in separate cards.
• When clicking an application Address, it goes to the page of such application.
• When the user clicks the VIEW ALL INPUTS it goes to the /inputs page.
• When the user clicks the VIEW ALL APPLICATIONS link, it goes to the /applications page.
• Inputs page has loading and error states.
• New tests are passing.

[brunomenezes]

It depends on a small change in the API: cartesi/rollups-explorer-api#17

[brunomenezes]

API changes status.

Merged: cartesi/rollups-explorer-api#17
Release: v0.3.0
Deployed on: [Sepolia, Mainnet] environments