switch to using squid-js for version numbers

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

@@ -1,14 +1,16 @@
 import React, { Fragment } from 'react'
-import { VersionNumbersState as VersionTableProps } from '.'
+import { OceanPlatformTechStatus } from '@oceanprotocol/squid'
+import { VersionNumbersState } from '.'
 import styles from './VersionTable.module.scss'
 import slugify from '@sindresorhus/slugify'
-import Spinner from '../../atoms/Spinner'
 
 const VersionTableContracts = ({
     contracts,
     network
 }: {
-    contracts: any
+    contracts: {
+        [contractName: string]: string
+    }
     network: string
 }) => (
     <table>
@@ -41,23 +43,21 @@ const VersionTableContracts = ({
 )
 
 const VersionNumber = ({
-    isLoading,
+    name,
-    software,
     version,
-    network
+    network,
+    status
 }: {
-    isLoading: boolean
+    name: string
-    software: string
+    version?: string
-    version: string
+    network?: string
-    network: string
+    status: OceanPlatformTechStatus
 }) =>
-    isLoading ? (
+    version ? (
-        <Spinner small className={styles.spinner} />
-    ) : version ? (
         <>
             <a
                 href={`https://github.com/oceanprotocol/${slugify(
-                    software
+                    name
                 )}/releases/tag/v${version}`}
             >
                 <code>v{version}</code>
@@ -65,47 +65,47 @@ const VersionNumber = ({
             {network && `(${network})`}
         </>
     ) : (
-        <span>Could not get version</span>
+        <span>{status || 'Could not get version'}</span>
     )
 
-const VersionTable = ({ data }: { data: VersionTableProps }) => (
+const VersionTable = ({ data }: { data: VersionNumbersState }) => (
     <div className={styles.tableWrap}>
         <table className={styles.table}>
             <tbody>
                 {Object.entries(data).map(([key, value]) => (
                     <Fragment key={key}>
-                        <tr key={key}>
+                        <tr>
                             <td>
                                 <a
                                     href={
-                                        value.software &&
+                                        value.name &&
                                         `https://github.com/oceanprotocol/${slugify(
-                                            value.software
+                                            value.name
                                         )}`
                                     }
                                 >
-                                    <strong>{value.software}</strong>
+                                    <strong>{value.name}</strong>
                                 </a>
                             </td>
                             <td>
                                 <VersionNumber
-                                    isLoading={value.isLoading}
+                                    name={value.name}
-                                    software={value.software}
                                     version={value.version}
-                                    network={value.network}
+                                    status={value.status}
+                                    // network={value.network}
                                 />
                             </td>
                         </tr>
-                        {key === 'keeperContracts' && data.brizo.contracts && (
+                        {/* {value.contracts && (
                             <tr>
                                 <td colSpan={2}>
                                     <VersionTableContracts
-                                        contracts={data.brizo.contracts}
+                                        contracts={value.contracts}
-                                        network={data.brizo.network}
+                                        network={value.network || ''}
                                     />
                                 </td>
                             </tr>
-                        )}
+                        )} */}
                     </Fragment>
                 ))}
             </tbody>

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

@@ -1,14 +1,17 @@
 import React, { PureComponent } from 'react'
-import { Logger } from '@oceanprotocol/squid'
+import {
+    OceanPlatformVersions,
+    OceanPlatformTechStatus,
+    Logger
+} from '@oceanprotocol/squid'
 import axios from 'axios'
 import { version } from '../../../../package.json'
-import { version as versionSquid } from '@oceanprotocol/squid/package.json'
 import styles from './index.module.scss'
 
-import { aquariusUri, brizoUri, faucetUri } from '../../../config'
+import { faucetUri } from '../../../config'
+import { User } from '../../../context'
 
 import VersionTable from './VersionTable'
-import { isJsonString } from './utils'
 
 export const commonsVersion =
     process.env.NODE_ENV === 'production' ? version : `${version}-dev`
@@ -17,40 +20,15 @@ interface VersionNumbersProps {
     minimal?: boolean
 }
 
-export interface VersionNumbersState {
+export interface VersionNumbersState extends OceanPlatformVersions {
     commons: {
-        software: string
+        name: string
         version: string
     }
-    squidJs: {
-        software: string
-        version: string
-    }
-    aquarius: {
-        isLoading: boolean
-        software: string
-        version: string
-    }
-    brizo: {
-        isLoading: boolean
-        software: string
-        version: string
-        network: string
-        'keeper-version': string
-        'keeper-url': string
-        contracts: any
-    }
-    keeperContracts: {
-        isLoading: boolean
-        software: string
-        version: string
-        network: string
-        contracts: any
-    }
     faucet: {
-        isLoading: boolean
+        name: string
-        software?: string
+        version: string
-        version?: string
+        status: OceanPlatformTechStatus
     }
 }
 
@@ -58,99 +36,60 @@ export default class VersionNumbers extends PureComponent<
     VersionNumbersProps,
     VersionNumbersState
 > {
-    public state = {
+    public static contextType = User
-        commons: { software: 'Commons', version: commonsVersion },
+
-        squidJs: {
+    public state: VersionNumbersState = {
-            software: 'Squid-js',
+        commons: {
-            version: versionSquid
+            name: 'Commons',
-        },
+            version: commonsVersion
-        aquarius: {
-            isLoading: true,
-            software: 'Aquarius',
-            version: ''
-        },
-        brizo: {
-            isLoading: true,
-            software: 'Brizo',
-            version: '',
-            contracts: {} as any,
-            network: '',
-            'keeper-version': '0.0.0',
-            'keeper-url': ''
-        },
-        keeperContracts: {
-            isLoading: true,
-            software: 'Keeper Contracts',
-            version: '',
-            contracts: {} as any,
-            network: ''
         },
         faucet: {
-            isLoading: true,
+            name: 'Faucet',
-            software: 'Faucet',
+            version: '',
-            version: ''
+            status: OceanPlatformTechStatus.Loading
+        },
+        squid: {
+            name: 'Squid-js',
+            status: OceanPlatformTechStatus.Loading
+        },
+        aquarius: {
+            name: 'Aquarius',
+            status: OceanPlatformTechStatus.Loading
+        },
+        brizo: {
+            name: 'Brizo',
+            status: OceanPlatformTechStatus.Loading
         }
     }
 
     // for canceling axios requests
     public signal = axios.CancelToken.source()
 
-    public componentWillMount() {
+    public componentDidMount() {
-        this.setAquarius()
+        this.getOceanVersions()
-        this.setBrizoAndKeeper()
-        this.setFaucet()
     }
 
     public componentWillUnmount() {
         this.signal.cancel()
     }
 
-    private async setAquarius() {
+    private async getOceanVersions() {
-        const aquarius = await this.getData(aquariusUri)
+        const { ocean } = this.context
-        aquarius &&
+        const { versions } = ocean
-            aquarius.version !== undefined &&
+        const componentVersions = versions && (await versions.get())
-            this.setState({ aquarius: { isLoading: false, ...aquarius } })
+        const { squid, brizo, aquarius } = componentVersions
-    }
+        console.log(componentVersions)
 
-    private async setBrizoAndKeeper() {
+        // const faucet = await this.getData(faucetUri)
-        const brizo = await this.getData(brizoUri)
 
-        const keeperVersion =
+        this.setState({
-            brizo['keeper-version'] && brizo['keeper-version'].replace('v', '')
+            commons: { ...this.state.commons },
-        const keeperNetwork =
+            squid,
-            brizo['keeper-url'] &&
+            brizo,
-            new URL(brizo['keeper-url']).hostname.split('.')[0]
+            aquarius
-
+            // faucet
-        brizo &&
+        })
-            brizo.version !== undefined &&
+        console.log(this.state)
-            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(faucetUri)
-
-        // backwards compatibility
-        isJsonString(faucet) === false &&
-            this.setState({
-                faucet: { ...this.state.faucet, isLoading: false }
-            })
-
-        // the new thing
-        faucet &&
-            faucet.version !== undefined &&
-            this.setState({ faucet: { isLoading: false, ...faucet } })
     }
 
     private async getData(uri: string) {
@@ -171,15 +110,11 @@ export default class VersionNumbers extends PureComponent<
 
     public render() {
         const { minimal } = this.props
-        const { commons, squidJs, brizo, aquarius, faucet } = this.state
+        const { commons, squid, brizo, aquarius } = this.state
 
-        const mimimalOutput = `${squidJs.software} v${squidJs.version}  \n${
+        const mimimalOutput = `${squid.name} v${squid.version}\n${
-            brizo.software
+            brizo.name
-        } v${brizo.version} \n${aquarius.software} v${
+        } v${brizo.version}\n${aquarius.name} v${aquarius.version}`
-            aquarius.version
-        } \nKeeper Contracts ${brizo['keeper-version']} \n${faucet.software} v${
-            faucet.version
-        }`
 
         return minimal ? (
             <p className={styles.versionsMinimal}>