output select commons config values

client/src/components/molecules/VersionNumbers/VersionTable.module.scss

@@ -23,20 +23,12 @@
         td {
             padding: $spacer / 6 $spacer / 2;
 
-            // stylelint-disable selector-max-compound-selectors
+            // stylelint-disable-next-line selector-max-compound-selectors
             &,
             code {
                 font-size: $font-size-mini;
             }
         }
-
-        tr:first-child td {
-            &,
-            code {
-                font-size: $font-size-small;
-            }
-        }
-        // stylelint-enable selector-max-compound-selectors
     }
 
     td {

client/src/components/molecules/VersionNumbers/VersionTable.tsx

@@ -4,6 +4,26 @@ import VersionTableRow from './VersionTableRow'
 import styles from './VersionTable.module.scss'
 import VersionNumber from './VersionNumber'
 
+import {
+    serviceUri,
+    nodeUri,
+    aquariusUri,
+    brizoUri,
+    brizoAddress,
+    secretStoreUri,
+    faucetUri
+} from '../../../config'
+
+const commonsConfig = {
+    serviceUri,
+    nodeUri,
+    aquariusUri,
+    brizoUri,
+    brizoAddress,
+    secretStoreUri,
+    faucetUri
+}
+
 export const VersionTableContracts = ({
     contracts,
     network,
@@ -58,6 +78,23 @@ export const VersionTableContracts = ({
     </table>
 )
 
+export const VersionTableCommons = () => (
+    <table>
+        <tbody>
+            {Object.entries(commonsConfig).map(([key, value]) => (
+                <tr key={key}>
+                    <td>
+                        <strong>{key}</strong>
+                    </td>
+                    <td>
+                        <code>{value}</code>
+                    </td>
+                </tr>
+            ))}
+        </tbody>
+    </table>
+)
+
 const VersionTable = ({ data }: { data: VersionNumbersState }) => {
     return (
         <div className={styles.tableWrap}>

client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss

@@ -8,6 +8,7 @@
     padding: 0;
     margin: 0;
     margin-left: -1rem;
+    margin-top: -.1rem;
     padding-right: .5rem;
     cursor: pointer;
     color: $brand-grey-light;

client/src/components/molecules/VersionNumbers/VersionTableRow.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import useCollapse from 'react-collapsed'
 import slugify from '@sindresorhus/slugify'
 import styles from './VersionTableRow.module.scss'
-import { VersionTableContracts } from './VersionTable'
+import { VersionTableContracts, VersionTableCommons } from './VersionTable'
 import VersionNumber from './VersionNumber'
 
 const VersionTableRow = ({ value }: { value: any }) => {
@@ -23,7 +23,7 @@ const VersionTableRow = ({ value }: { value: any }) => {
         <>
             <tr>
                 <td>
-                    {value.contracts && (
+                    {(value.name === 'Commons' || value.contracts) && (
                         <button className={styles.handle} {...getToggleProps()}>
                             {isOpen ? (
                                 <span>&#9660;</span>
@@ -50,6 +50,13 @@ const VersionTableRow = ({ value }: { value: any }) => {
                     />
                 </td>
             </tr>
+            {value.name === 'Commons' && (
+                <tr {...getCollapseProps()}>
+                    <td colSpan={2}>
+                        <VersionTableCommons />
+                    </td>
+                </tr>
+            )}
             {value.contracts && (
                 <tr {...getCollapseProps()}>
                     <td colSpan={2}>