feat(visualization): Add application components and simple data mocks.

Author: brunomenezes

visualization/ui/src/App.tsx

@@ -2,10 +2,11 @@ import { MantineProvider } from "@mantine/core";
 import "@mantine/core/styles.css";
 import { Route, Routes } from "react-router";
 import Home from "./home/Home";
+import theme from "./providers/theme";
 
 function App() {
   return (
-    <MantineProvider>
+    <MantineProvider theme={theme} defaultColorScheme="auto">
       <Routes>
         <Route path="/" element={<Home />} />
       </Routes>

visualization/ui/src/features/application/Application.module.css

@@ -0,0 +1,7 @@
+.application {
+  transition: all 0.2s ease-out;
+  &:hover {
+    border-color: var(--mantine-color-cyan-5);
+    transform: translate3d(0px, -8px, 13px);
+  }
+}

visualization/ui/src/features/application/Application.tsx

@@ -0,0 +1,69 @@
+import { Badge, Card, Group, Stack, Text } from "@mantine/core";
+import type { FC } from "react";
+import { TbCpu, TbCpuOff, TbInbox } from "react-icons/tb";
+import type { Hex } from "viem";
+import styles from "./Application.module.css";
+
+type ApplicationState = "ENABLED" | "DISABLED" | "INOPERABLE";
+type ConsensusType = "PRT" | "QUORUM" | "AUTHORITY";
+
+export interface Application {
+  address: Hex;
+  name?: string;
+  consensusType: ConsensusType;
+  state: ApplicationState;
+  processedInputs: number;
+}
+
+type Props = { application: Application };
+
+const getStateColour = (state: ApplicationState) => {
+  switch (state) {
+    case "ENABLED":
+      return "green";
+    case "DISABLED":
+      return "red";
+    case "INOPERABLE":
+      return "gray";
+    default:
+      return "black";
+  }
+};
+
+const iconSize = 24;
+
+export const ApplicationCard: FC<Props> = ({ application }) => {
+  const stateColour = getStateColour(application.state);
+
+  return (
+    <Card shadow="md" withBorder className={styles.application}>
+      <Stack gap="0">
+        <Group justify="space-between">
+          <Text size="xl">{application.name}</Text>
+          <Badge size="md">{application.consensusType}</Badge>
+        </Group>
+        <Text c="dimmed" size="xs">
+          {application.address}
+        </Text>
+      </Stack>
+
+      <Group pt="md" justify="space-between" align="center">
+        <Group gap="3">
+          {application.state === "ENABLED" ? (
+            <TbCpu color={stateColour} size={iconSize} />
+          ) : (
+            <TbCpuOff color={stateColour} size={iconSize} />
+          )}
+          <Badge color={stateColour}>{application.state}</Badge>
+        </Group>
+        <Group gap="3">
+          <TbInbox size={iconSize} />
+          <Text>Inputs Processed</Text>
+          <Badge variant="dot" size="md">
+            {application.processedInputs}
+          </Badge>
+        </Group>
+      </Group>
+    </Card>
+  );
+};

visualization/ui/src/features/application/ListApplications.tsx

@@ -0,0 +1,18 @@
+import { Container, Stack } from "@mantine/core";
+import type { FC } from "react";
+import { ApplicationCard } from "./Application";
+import { applications } from "./application.mocks";
+
+const ListApplications: FC = () => {
+  return (
+    <Container fluid miw="var(--mantine-breakpoint-xs)">
+      <Stack gap={5}>
+        {applications.map((app) => (
+          <ApplicationCard key={app.address} application={app} />
+        ))}
+      </Stack>
+    </Container>
+  );
+};
+
+export default ListApplications;

visualization/ui/src/features/application/application.mocks.ts

@@ -0,0 +1,40 @@
+import type { Application } from "./Application";
+
+export const HoneypotDapp: Application = {
+  address: "0x4c1E74EF88a75C24e49eddD9f70D82A94D19251c",
+  name: "Honeypot",
+  consensusType: "PRT",
+  state: "ENABLED",
+  processedInputs: 8,
+};
+
+export const applications: Application[] = [
+  {
+    address: "0x4c1E74EF88a75C24e49eddD9f70D82A94D19251c",
+    name: "Honeypot",
+    consensusType: "PRT",
+    state: "ENABLED",
+    processedInputs: 8,
+  },
+  {
+    address: "0x1590B6096A48A509286cdec2cb68E0DF292BFEf6",
+    name: "Comet",
+    consensusType: "AUTHORITY",
+    state: "ENABLED",
+    processedInputs: 100,
+  },
+  {
+    address: "0x70ac08179605AF2D9e75782b8DEcDD3c22aA4D0C",
+    name: "SunDapp",
+    consensusType: "QUORUM",
+    state: "DISABLED",
+    processedInputs: 15,
+  },
+  {
+    address: "0x70ac08179605AF2D9e75782b8DEcDD3c22aA4D0C",
+    name: "BrokenDapp",
+    consensusType: "PRT",
+    state: "INOPERABLE",
+    processedInputs: 45,
+  },
+];

visualization/ui/src/providers/StyleProvider.tsx

@@ -0,0 +1,7 @@
+import { MantineProvider } from "@mantine/core";
+import type { FC, PropsWithChildren } from "react";
+import theme from "./theme";
+
+export const StyleProvider: FC<PropsWithChildren> = ({ children }) => {
+  return <MantineProvider theme={theme}>{children}</MantineProvider>;
+};

visualization/ui/src/providers/theme.ts

@@ -0,0 +1,8 @@
+import { createTheme, DEFAULT_THEME, mergeMantineTheme } from "@mantine/core";
+
+const theme = createTheme({
+  fontFamily: "serif",
+  primaryColor: "cyan",
+});
+
+export default mergeMantineTheme(DEFAULT_THEME, theme);

visualization/ui/src/stories/Components/Application.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ApplicationCard } from "../../features/application/Application";
+import { HoneypotDapp } from "../../features/application/application.mocks";
+
+const meta = {
+  title: "Components/Application",
+  component: ApplicationCard,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof ApplicationCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Enabled: Story = {
+  args: { application: HoneypotDapp },
+};
+
+export const Disabled: Story = {
+  args: { application: { ...HoneypotDapp, state: "DISABLED" } },
+};
+
+export const Inoperable: Story = {
+  args: { application: { ...HoneypotDapp, state: "INOPERABLE" } },
+};

visualization/ui/src/stories/Pages/ApplicationPage.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import ListApplications from "../../features/application/ListApplications";
+
+const meta = {
+  title: "Pages/ListApplications",
+  component: ListApplications,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+} satisfies Meta<typeof ListApplications>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};