version number fixes

* add loading state
* add error state
* handle connection errors
* backwards compatibility for all components
* small spinner variant

client/src/components/atoms/Spinner.module.scss

@@ -29,6 +29,20 @@
     padding-top: $spacer / 4;
 }
 
+.small {
+    composes: spinner;
+    margin: 0;
+    display: inline-block;
+
+    &:before {
+        width: $font-size-small;
+        height: $font-size-small;
+        margin-top: -($font-size-small);
+        margin-left: -($font-size-small / 2);
+        border-width: .1rem;
+    }
+}
+
 @keyframes spinner {
     to {
         transform: rotate(360deg);

client/src/components/atoms/Spinner.tsx

@@ -1,15 +1,27 @@
 import React from 'react'
 import styles from './Spinner.module.scss'
 
-const Spinner = ({ message }: { message?: string }) => (
-    <div className={styles.spinner}>
-        {message && (
-            <div
-                className={styles.spinnerMessage}
-                dangerouslySetInnerHTML={{ __html: message }}
-            />
-        )}
-    </div>
-)
+const Spinner = ({
+    message,
+    small,
+    className
+}: {
+    message?: string
+    small?: boolean
+    className?: string
+}) => {
+    const classes = className || (small ? styles.small : styles.spinner)
+
+    return (
+        <div className={classes}>
+            {message && (
+                <div
+                    className={styles.spinnerMessage}
+                    dangerouslySetInnerHTML={{ __html: message }}
+                />
+            )}
+        </div>
+    )
+}
 
 export default Spinner

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

@@ -52,3 +52,8 @@
         }
     }
 }
+
+.spinner {
+    composes: spinner, small from '../Spinner.module.scss';
+    margin-right: $spacer;
+}

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

@@ -2,6 +2,7 @@ import React, { Fragment } from 'react'
 import { VersionNumbersState as VersionTableProps } from '.'
 import styles from './VersionTable.module.scss'
 import slugify from '@sindresorhus/slugify'
+import Spinner from '../Spinner'
 
 const VersionTableContracts = ({
     contracts,
@@ -12,23 +13,24 @@ const VersionTableContracts = ({
 }) => (
     <table>
         <tbody>
-            {Object.keys(contracts).map(key => (
-                <tr key={key}>
-                    <td>
-                        <span className={styles.label}>{key}</span>
-                    </td>
-                    <td>
-                        <a
-                            href={`https://submarine${network === 'duero' &&
-                                '.duero'}.dev-ocean.com/address/${
-                                contracts[key]
-                            }`}
-                        >
-                            <code>{contracts[key]}</code>
-                        </a>
-                    </td>
-                </tr>
-            ))}
+            {contracts &&
+                Object.keys(contracts).map(key => (
+                    <tr key={key}>
+                        <td>
+                            <span className={styles.label}>{key}</span>
+                        </td>
+                        <td>
+                            <a
+                                href={`https://submarine${network === 'duero' &&
+                                    '.duero'}.dev-ocean.com/address/${
+                                    contracts[key]
+                                }`}
+                            >
+                                <code>{contracts[key]}</code>
+                            </a>
+                        </td>
+                    </tr>
+                ))}
         </tbody>
     </table>
 )
@@ -42,18 +44,30 @@ const VersionTable = ({ data }: { data: VersionTableProps }) => (
                         <tr key={key}>
                             <td>
                                 <a
-                                    href={`https://github.com/oceanprotocol/${slugify(
-                                        value.software
-                                    )}`}
+                                    href={
+                                        value.software &&
+                                        `https://github.com/oceanprotocol/${slugify(
+                                            value.software
+                                        )}`
+                                    }
                                 >
                                     <strong>{value.software}</strong>
                                 </a>
                             </td>
                             <td>
-                                <code>v{value.version}</code>
+                                {value.isLoading ? (
+                                    <Spinner small className={styles.spinner} />
+                                ) : value.version ? (
+                                    <>
+                                        <code>v{value.version}</code>
+                                        {value.network && `(${value.network})`}
+                                    </>
+                                ) : (
+                                    'Could not get version'
+                                )}
                             </td>
                         </tr>
-                        {key === 'keeperContracts' && (
+                        {key === 'keeperContracts' && data.brizo.contracts && (
                             <tr>
                                 <td colSpan={2}>
                                     <VersionTableContracts

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

@@ -36,10 +36,12 @@ export interface VersionNumbersState {
         version: string
     }
     aquarius: {
+        isLoading: boolean
         software: string
         version: string
     }
     brizo: {
+        isLoading: boolean
         software: string
         version: string
         network: string
@@ -48,13 +50,16 @@ export interface VersionNumbersState {
         contracts: any
     }
     keeperContracts: {
+        isLoading: boolean
         software: string
         version: string
+        network: string
         contracts: any
     }
     faucet: {
-        software: string
-        version: string
+        isLoading: boolean
+        software?: string
+        version?: string
     }
 }
 
@@ -68,73 +73,121 @@ export default class VersionNumbers extends PureComponent<
             software: 'Squid-js',
             version: versionSquid
         },
-        aquarius: { software: 'Aquarius', version: '0.0.0' },
+        aquarius: {
+            isLoading: true,
+            software: 'Aquarius',
+            version: ''
+        },
         brizo: {
+            isLoading: true,
             software: 'Brizo',
-            version: '0.0.0',
+            version: '',
             contracts: {} as any,
             network: '',
             'keeper-version': '0.0.0',
             'keeper-url': ''
         },
         keeperContracts: {
+            isLoading: true,
             software: 'Keeper Contracts',
-            version: '0.0.0',
+            version: '',
             contracts: {} as any,
             network: ''
         },
-        faucet: { software: 'Faucet', version: '0.0.0' }
+        faucet: {
+            isLoading: true,
+            software: 'Faucet',
+            version: ''
+        }
     }
 
     // for canceling axios requests
     public signal = axios.CancelToken.source()
 
     public componentWillMount() {
-        this.setComponentVersions()
+        this.setAquarius()
+        this.setBrizoAndKeeper()
+        this.setFaucet()
     }
 
     public componentWillUnmount() {
         this.signal.cancel()
     }
 
-    private async setComponentVersions() {
-        try {
-            const aquarius = await this.getData(
-                aquariusScheme,
-                aquariusHost,
-                aquariusPort
-            )
-            aquarius.version !== undefined && this.setState({ aquarius })
+    private async setAquarius() {
+        const aquarius = await this.getData(
+            aquariusScheme,
+            aquariusHost,
+            aquariusPort
+        )
+        aquarius.version !== undefined &&
+            this.setState({ aquarius: { isLoading: false, ...aquarius } })
+    }
 
-            const brizo = await this.getData(brizoScheme, brizoHost, brizoPort)
-            brizo.version !== undefined &&
-                this.setState({
-                    brizo,
-                    keeperContracts: {
-                        ...this.state.keeperContracts,
-                        version: brizo['keeper-version'].replace('v', ''),
-                        contracts: brizo.contracts
-                    }
-                })
+    private async setBrizoAndKeeper() {
+        const brizo = await this.getData(brizoScheme, brizoHost, brizoPort)
 
-            const faucet = await this.getData(
-                faucetScheme,
-                faucetHost,
-                faucetPort
-            )
+        const keeperVersion =
+            brizo['keeper-version'] && brizo['keeper-version'].replace('v', '')
+        const keeperNetwork =
+            brizo['keeper-url'] &&
+            new URL(brizo['keeper-url']).hostname.split('.')[0]
 
-            faucet.version !== undefined && this.setState({ faucet })
-        } catch (error) {
-            !axios.isCancel(error) && Logger.error(error.message)
+        brizo.version !== undefined &&
+            this.setState({
+                brizo: {
+                    isLoading: false,
+                    ...brizo
+                },
+                keeperContracts: {
+                    ...this.state.keeperContracts,
+                    isLoading: false,
+                    version: keeperVersion,
+                    contracts: brizo.contracts,
+                    network: keeperNetwork
+                }
+            })
+    }
+
+    private async setFaucet() {
+        const faucet = await this.getData(faucetScheme, faucetHost, faucetPort)
+
+        // backwards compatibility
+        function IsJsonString(str: string) {
+            try {
+                JSON.parse(str)
+            } catch (e) {
+                return false
+            }
+            return true
         }
+
+        IsJsonString(faucet) === false &&
+            this.setState({
+                faucet: { ...this.state.faucet, isLoading: false }
+            })
+
+        // the new thing
+        faucet.version !== undefined &&
+            this.setState({ faucet: { isLoading: false, ...faucet } })
     }
 
     private async getData(scheme: string, host: string, port: number | string) {
-        const { data } = await axios.get(`${scheme}://${host}:${port}`, {
-            headers: { Accept: 'application/json' },
-            cancelToken: this.signal.token
-        })
-        return data
+        try {
+            const response = await axios.get(`${scheme}://${host}:${port}`, {
+                headers: { Accept: 'application/json' },
+                cancelToken: this.signal.token
+            })
+
+            if (response.status !== 200) {
+                Logger.error(response.statusText)
+                return
+            }
+
+            return response.data
+        } catch (error) {
+            !axios.isCancel(error) && Logger.error(error.message)
+        }
     }
 
     public render() {
@@ -152,7 +205,7 @@ export default class VersionNumbers extends PureComponent<
         return minimal ? (
             <p className={styles.versionsMinimal}>
                 <a title={mimimalOutput} href={'/about'}>
-                    v{commons.version} ({brizo.network})
+                    v{commons.version} {brizo.network && `(${brizo.network})`}
                 </a>
             </p>
         ) : (

library.json

@@ -11,7 +11,7 @@
     },
     {
       "name": "brizo",
-      "version": "~0.3.6"
+      "version": "~0.3.9"
     },
     {
       "name": "aquarius",
@@ -23,7 +23,7 @@
     },
     {
       "name": "faucet",
-      "version": "~0.2.0"
+      "version": "~0.2.4"
     }
   ]
 }