wait for ocean object, sort contracts

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

@@ -16,7 +16,10 @@ const VersionTableContracts = ({
     <table>
         <tbody>
             {contracts &&
-                Object.keys(contracts).map(key => {
+                Object.keys(contracts)
+                    // sort alphabetically
+                    .sort((a, b) => a.localeCompare(b))
+                    .map(key => {
                         const submarineLink = `https://submarine${
                             network === 'duero'
                                 ? '.duero'
@@ -72,7 +75,9 @@ const VersionTable = ({ data }: { data: VersionNumbersState }) => (
     <div className={styles.tableWrap}>
         <table className={styles.table}>
             <tbody>
-                {Object.entries(data).map(([key, value]) => (
+                {Object.entries(data)
+                    .filter(([key, value]) => key !== 'status')
+                    .map(([key, value]) => (
                         <Fragment key={key}>
                             <tr>
                                 <td>
@@ -92,11 +97,11 @@ const VersionTable = ({ data }: { data: VersionNumbersState }) => (
                                         name={value.name}
                                         version={value.version}
                                         status={value.status}
-                                    // network={value.network}
+                                        network={value.network}
                                     />
                                 </td>
                             </tr>
-                        {/* {value.contracts && (
+                            {value.contracts && (
                                 <tr>
                                     <td colSpan={2}>
                                         <VersionTableContracts
@@ -105,7 +110,7 @@ const VersionTable = ({ data }: { data: VersionNumbersState }) => (
                                         />
                                     </td>
                                 </tr>
-                        )} */}
+                            )}
                         </Fragment>
                     ))}
             </tbody>

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

@@ -8,7 +8,7 @@ import axios from 'axios'
 import { version } from '../../../../package.json'
 import styles from './index.module.scss'
 
-import { faucetUri } from '../../../config'
+// import { faucetUri } from '../../../config'
 import { User } from '../../../context'
 
 import VersionTable from './VersionTable'
@@ -43,11 +43,6 @@ export default class VersionNumbers extends PureComponent<
             name: 'Commons',
             version: commonsVersion
         },
-        faucet: {
-            name: 'Faucet',
-            version: '',
-            status: OceanPlatformTechStatus.Loading
-        },
         squid: {
             name: 'Squid-js',
             status: OceanPlatformTechStatus.Loading
@@ -58,7 +53,18 @@ export default class VersionNumbers extends PureComponent<
         },
         brizo: {
             name: 'Brizo',
+            network: 'Nile',
             status: OceanPlatformTechStatus.Loading
+        },
+        faucet: {
+            name: 'Faucet',
+            version: '',
+            status: OceanPlatformTechStatus.Loading
+        },
+        status: {
+            ok: false,
+            contracts: false,
+            network: false
         }
     }
 
@@ -75,10 +81,12 @@ export default class VersionNumbers extends PureComponent<
 
     private async getOceanVersions() {
         const { ocean } = this.context
-        const { versions } = ocean
+
-        const componentVersions = versions && (await versions.get())
+        // wait until ocean object is properly populated
-        const { squid, brizo, aquarius } = componentVersions
+        if (ocean.versions === undefined) return
-        console.log(componentVersions)
+
+        const response = await ocean.versions.get()
+        const { squid, brizo, aquarius, status } = response
 
         // const faucet = await this.getData(faucetUri)
 
@@ -86,10 +94,10 @@ export default class VersionNumbers extends PureComponent<
             commons: { ...this.state.commons },
             squid,
             brizo,
-            aquarius
+            aquarius,
+            status
             // faucet
         })
-        console.log(this.state)
     }
 
     private async getData(uri: string) {