data structure change, tweak messages display

src/@types/index.ts

@@ -11,19 +11,21 @@ export enum State {
 export interface Status {
   network: string
   currentBlock: number
-  market: State
+  lastUpdatedOn: number
+  components: {
+    market: ComponentStatusBase
     faucet: FaucetStatus | Record<string, never>
     aquarius: AquariusStatus
     provider: ProviderStatus
     subgraph: SubgraphStatus
     operator: OperatorStatus
-  dataFarming: State
-  lastUpdatedOn: number
+    dataFarming: ComponentStatusBase
+  }
 }
 
 export interface ComponentStatusBase {
   status: State
-  statusMessages: string
+  statusMessages: string[]
   response: number
   version: string
 }

src/pages/index.tsx

@@ -66,41 +66,18 @@ export default function HomePage(): ReactElement {
         {isLoading ? (
           <div className={styles.loading}>Loading...</div>
         ) : (
-          Object.entries(data || {}).map(([key, value]) => {
-            const networkKey = key
-
-            return (
-              <Fragment key={networkKey}>
-                <h2 className={styles.networkName}>{networkKey}</h2>
+          Object.entries(data || {}).map(([networkName, value]) => (
+            <Fragment key={networkName}>
+              <h2 className={styles.networkName}>{networkName}</h2>
               <div className={styles.grid}>
-                  {Object.entries(value)
-                    .filter(
-                      // TODO: Remove this filter if we fix this on API level
-                      // Needs a new `components` key under Status response
-                      ([key]) =>
-                        key !== 'currentBlock' &&
-                        key !== 'lastUpdatedOn' &&
-                        key !== 'network' &&
-                        key !== '_id' &&
-                        key !== '__v'
-                    )
-                    .map(([key, value]) => (
+                {Object.entries(value.components).map(
+                  ([componentName, value]) => (
                     <div
-                        key={key}
-                        className={`${styles.card} ${statusStyle(
-                          // TODO: all component states should be of type Status on API level
-                          key === 'market' || key === 'dataFarming'
-                            ? value
-                            : value.status
-                        )}`}
+                      key={componentName}
+                      className={`${styles.card} ${statusStyle(value.status)}`}
                     >
                       <h2 className={styles.titleComponent}>
-                          {statusIcon(
-                            key === 'market' || key === 'dataFarming'
-                              ? value
-                              : value.status
-                          )}{' '}
-                          {key}
+                        {statusIcon(value.status)} {componentName}
                         <code
                           className={styles.version}
                           title="deployed version"
@@ -109,29 +86,28 @@ export default function HomePage(): ReactElement {
                         </code>
                       </h2>
 
-                        {value.statusMessages && value.statusMessages !== '' && (
+                      {value.statusMessages?.length ? (
                         <ul className={styles.messages}>
-                            {value.statusMessages
-                              .split(',')
-                              .map((message: string, i: number) => (
+                          {value.statusMessages.map(
+                            (message: string, i: number) => (
                               <li key={i} className={styles.statusMessage}>
                                 {message}
                               </li>
-                              ))}
-                          </ul>
+                            )
                           )}
+                        </ul>
+                      ) : null}
                     </div>
-                    ))}
+                  )
+                )}
               </div>
 
               <details className={styles.contracts}>
                 <summary>
-                    <h3 className={styles.titleComponent}>
-                      Deployed Contracts
-                    </h3>
+                  <h3 className={styles.titleComponent}>Deployed Contracts</h3>
                 </summary>
                 <ul>
-                    {Object.entries((addresses as any)[networkKey]).map(
+                  {Object.entries((addresses as any)[networkName]).map(
                     ([key, value]) =>
                       key !== 'chainId' &&
                       key !== 'startBlock' && (
@@ -144,8 +120,7 @@ export default function HomePage(): ReactElement {
                 </ul>
               </details>
             </Fragment>
-            )
-          })
+          ))
         )}
       </main>
 

src/styles/Home.module.css

@@ -92,12 +92,17 @@
   list-style-type: square;
   margin-left: 1rem;
   margin-top: calc(var(--spacer) / 4);
+  color: var(--color-secondary);
+  font-size: var(--font-size-small);
 }
 
 .messages li {
   display: list-item;
   margin-top: calc(var(--spacer) / 8);
   list-style-position: outside;
+}
+
+.warning .messages {
   color: var(--brand-alert-orange);
 }