reduce status styles, output deployed versions

src/@types/index.ts

@@ -74,6 +74,7 @@ export interface Network {
 export interface Summary {
   component: string
   status: State
+  version?: string
 }
 
 export interface NetworkSummary {

src/pages/index.tsx

@@ -70,8 +70,10 @@ export default function HomePage(): ReactElement {
                   key={value.component}
                   className={`${styles.card} ${statusStyle(value.status)}`}
                 >
-                  <h2>{value?.component}</h2>
-                  <p>{value?.status}</p>
+                  <h2>
+                    {statusIcon(value.status)} {value.component}
+                  </h2>
+                  <code className={styles.version}>{value.version}</code>
                 </div>
               ))}
             </div>

src/styles/Home.module.css

@@ -40,19 +40,25 @@
   text-align: left;
   color: inherit;
   text-decoration: none;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
+  border-radius: var(--border-radius);
+  border: 2px solid var(--border-color);
 }
 
 .card h2 {
   margin: 0 0 1rem 0;
-  font-size: 1.5rem;
+  font-size: var(--font-size-large);
 }
 
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
+.warning {
+  border-color: var(--brand-alert-yellow);
+}
+
+.down {
+  border-color: var(--brand-alert-red);
+}
+
+.version {
+  color: var(--color-secondary);
 }
 
 .logo {
@@ -61,15 +67,3 @@
   width: 4rem;
   margin: 0 auto;
 }
-
-.up {
-  border: 2px solid #5fb359;
-}
-
-.warning {
-  border: 2px solid #eac146;
-}
-
-.down {
-  border: 2px solid #d80606;
-}

src/utils/getData.ts

@@ -28,19 +28,40 @@ export function getSummary(network: string, data: Status[][]): Summary[] {
         if (element[0].network === network) return (status = element[0])
       })
 
+      // TODO: this is not fun. Needs a smart iteration over response instead of
+      // aall this hardcoding
       const summary: Summary[] = [
-        { component: 'Aquarius', status: status?.aquarius?.status },
-        { component: 'Provider', status: status?.provider?.status },
-        { component: 'Subgraph', status: status?.subgraph?.status },
-        { component: 'Market', status: status?.market },
-        { component: 'Port', status: status?.port },
+        {
+          component: 'Aquarius',
+          status: status?.aquarius?.status,
+          version: status?.aquarius?.version
+        },
+        {
+          component: 'Provider',
+          status: status?.provider?.status,
+          version: status?.provider?.version
+        },
+        {
+          component: 'Subgraph',
+          status: status?.subgraph?.status,
+          version: status?.subgraph?.version
+        },
+        {
+          component: 'Market',
+          status: status?.market
+        },
+        {
+          component: 'Port',
+          status: status?.port
+        },
         {
           component: 'Data Farming',
           status: status?.dataFarming
         },
         {
           component: 'Operator Service',
-          status: status?.operator?.status
+          status: status?.operator?.status,
+          version: status?.operator?.version
         },
         {
           component: 'DAO Grants',
@@ -63,6 +84,7 @@ export function getSummary(network: string, data: Status[][]): Summary[] {
 export function getNetworkSUmmary(data: Status[][]): NetworkSummary[] {
   const networks: string[] = JSON.parse(availableNetworks)
   const networkSummary: NetworkSummary[] = []
+
   networks.forEach((network) => {
     const summary = getSummary(network, data)
     let status = State.Up