additions to Ocean versions output

* current component is now the minimal variant
* new default variant outputting all versions in a table
* show contract versions and infos about keeper-contracts (fetched from brizo)
* new structure for local state, better typings
* component splitup

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

@@ -1,21 +0,0 @@
-@import '../../styles/variables';
-
-.version {
-    font-family: $font-family-monospace;
-    font-size: $font-size-mini;
-    margin-top: $spacer;
-}
-
-.more {
-    cursor: help;
-    display: inline-block;
-    margin-left: $spacer / 4;
-    margin-bottom: -.1rem;
-    vertical-align: middle;
-
-    svg {
-        width: $font-size-mini;
-        height: $font-size-mini;
-        fill: currentColor;
-    }
-}

client/src/components/atoms/VersionNumbers.tsx

@@ -1,110 +0,0 @@
-import React, { PureComponent } from 'react'
-import { 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 './VersionNumbers.module.scss'
-
-import {
-    aquariusHost,
-    aquariusPort,
-    aquariusScheme,
-    brizoHost,
-    brizoPort,
-    brizoScheme,
-    faucetHost,
-    faucetPort,
-    faucetScheme
-} from '../../config'
-
-const commonsVersion =
-    process.env.NODE_ENV === 'production' ? `v${version}` : `v${version}-dev`
-
-interface VersionNumbersState {
-    commons: string
-    squidJs: string
-    aquarius: string
-    brizo: string
-    faucet: string
-}
-
-export default class VersionNumbers extends PureComponent<
-    {},
-    VersionNumbersState
-> {
-    public state = {
-        commons: commonsVersion,
-        squidJs: `v${versionSquid}`,
-        aquarius: 'v0.0.0',
-        brizo: 'v0.0.0',
-        faucet: 'v0.0.0'
-    }
-
-    // for canceling axios requests
-    public signal = axios.CancelToken.source()
-
-    public componentWillMount() {
-        this.setComponentVersions()
-    }
-
-    public componentWillUnmount() {
-        this.signal.cancel()
-    }
-
-    private async setComponentVersions() {
-        try {
-            const versionAquarius = await this.getVersion(
-                aquariusScheme,
-                aquariusHost,
-                aquariusPort
-            )
-            this.setState({ aquarius: `v${versionAquarius}` })
-
-            const versionBrizo = await this.getVersion(
-                brizoScheme,
-                brizoHost,
-                brizoPort
-            )
-            this.setState({ brizo: `v${versionBrizo}` })
-
-            const versionFaucet = await this.getVersion(
-                faucetScheme,
-                faucetHost,
-                faucetPort
-            )
-            this.setState({ faucet: `v${versionFaucet}` })
-        } catch (error) {
-            !axios.isCancel(error) && Logger.error(error.message)
-        }
-    }
-
-    private async getVersion(
-        scheme: string,
-        host: string,
-        port: number | string
-    ) {
-        const { data } = await axios.get(`${scheme}://${host}:${port}`, {
-            headers: { Accept: 'application/json' },
-            cancelToken: this.signal.token
-        })
-        const { version } = data
-        return version
-    }
-
-    public render() {
-        const { commons, squidJs, brizo, aquarius, faucet } = this.state
-
-        const componentsOutput = `Squid-js ${squidJs}  \nBrizo ${brizo} \nAquarius ${aquarius} \nFaucet ${faucet}`
-
-        return (
-            <p className={styles.version}>
-                <a
-                    title={componentsOutput}
-                    href={`https://github.com/oceanprotocol/commons/releases/tag/${commons}`}
-                >
-                    {commons}
-                </a>
-            </p>
-        )
-    }
-}

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

@@ -0,0 +1,54 @@
+@import '../../../styles/variables';
+
+.tableWrap {
+    // make 'em scrollable
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.table {
+    display: table;
+    border-top: 1px solid $brand-grey-lighter;
+
+    table {
+        display: table;
+        margin-left: $spacer;
+        width: calc(100% - #{$spacer});
+        margin-bottom: -1px;
+
+        td {
+            padding: $spacer / 6 $spacer / 2;
+
+            // stylelint-disable-next-line selector-max-compound-selectors
+            &,
+            code {
+                font-size: $font-size-mini;
+            }
+        }
+    }
+
+    td {
+        padding: $spacer / 4 $spacer / 2;
+
+        &:last-child {
+            text-align: right;
+        }
+
+        // stylelint-disable-next-line selector-no-qualifying-type
+        &[colspan] {
+            padding: 0;
+        }
+    }
+
+    a {
+        color: $brand-grey;
+
+        &:hover,
+        &:focus {
+            &,
+            code {
+                color: $brand-pink;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,73 @@
+import React, { Fragment } from 'react'
+import { VersionNumbersState as VersionTableProps } from '.'
+import styles from './VersionTable.module.scss'
+import slugify from '@sindresorhus/slugify'
+
+const VersionTableContracts = ({
+    contracts,
+    network
+}: {
+    contracts: any
+    network: string
+}) => (
+    <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>
+            ))}
+        </tbody>
+    </table>
+)
+
+const VersionTable = ({ data }: { data: VersionTableProps }) => (
+    <div className={styles.tableWrap}>
+        <table className={styles.table}>
+            <tbody>
+                {Object.entries(data).map(([key, value]) => (
+                    <Fragment key={key}>
+                        <tr key={key}>
+                            <td>
+                                <a
+                                    href={`https://github.com/oceanprotocol/${slugify(
+                                        value.software
+                                    )}`}
+                                >
+                                    <strong>{value.software}</strong>
+                                </a>
+                            </td>
+                            <td>
+                                <code>{value.version}</code>
+                            </td>
+                        </tr>
+                        {key === 'keeperContracts' && (
+                            <tr>
+                                <td colSpan={2}>
+                                    <VersionTableContracts
+                                        contracts={data.brizo.contracts}
+                                        network={data.brizo.network}
+                                    />
+                                </td>
+                            </tr>
+                        )}
+                    </Fragment>
+                ))}
+            </tbody>
+        </table>
+    </div>
+)
+
+export default VersionTable

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

@@ -0,0 +1,16 @@
+@import '../../../styles/variables';
+
+.versions {
+    margin-top: $spacer * 2;
+}
+
+.versionsTitle {
+    font-size: $font-size-large;
+    margin-bottom: $spacer / 2;
+}
+
+.versionsMinimal {
+    font-family: $font-family-monospace;
+    font-size: $font-size-mini;
+    margin-top: $spacer;
+}

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

@@ -1,21 +1,32 @@
 import React from 'react'
 import { render, waitForElement } from '@testing-library/react'
 import mockAxios from 'jest-mock-axios'
-import VersionNumbers from './VersionNumbers'
+import VersionNumbers from '.'
 
 afterEach(() => {
     mockAxios.reset()
 })
 
+const mockResponse = {
+    data: {
+        software: 'Brizo',
+        version: '6.6.6',
+        contracts: { Hello: 'Hello', Another: 'Hello' },
+        network: 'hello'
+    }
+}
+
 describe('VersionNumbers', () => {
     it('renders without crashing', () => {
         const { container } = render(<VersionNumbers />)
+        mockAxios.mockResponse(mockResponse)
+        expect(mockAxios.get).toHaveBeenCalled()
         expect(container.firstChild).toBeInTheDocument()
     })
 
-    it('returns component versions in link title, prefixed with `v`', async () => {
-        const { getByTitle } = render(<VersionNumbers />)
-        mockAxios.mockResponse({ data: { version: '6.6.6' } })
+    it('minimal component versions in link title, prefixed with `v`', async () => {
+        const { getByTitle } = render(<VersionNumbers minimal />)
+        mockAxios.mockResponse(mockResponse)
         expect(mockAxios.get).toHaveBeenCalled()
         await waitForElement(() => getByTitle(/v6.6.6/))
     })

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

@@ -0,0 +1,167 @@
+import React, { PureComponent } from 'react'
+import { 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 {
+    aquariusHost,
+    aquariusPort,
+    aquariusScheme,
+    brizoHost,
+    brizoPort,
+    brizoScheme,
+    faucetHost,
+    faucetPort,
+    faucetScheme
+} from '../../../config'
+
+import VersionTable from './VersionTable'
+
+const commonsVersion =
+    process.env.NODE_ENV === 'production' ? `v${version}` : `v${version}-dev`
+
+interface VersionNumbersProps {
+    minimal?: boolean
+}
+
+export interface VersionNumbersState {
+    commons: {
+        software: string
+        version: string
+    }
+    squidJs: {
+        software: string
+        version: string
+    }
+    aquarius: {
+        software: string
+        version: string
+    }
+    brizo: {
+        software: string
+        version: string
+        network: string
+        'keeper-version': string
+        'keeper-url': string
+        contracts: any
+    }
+    keeperContracts: {
+        software: string
+        version: string
+        contracts: any
+    }
+    faucet: {
+        software: string
+        version: string
+    }
+}
+
+export default class VersionNumbers extends PureComponent<
+    VersionNumbersProps,
+    VersionNumbersState
+> {
+    public state = {
+        commons: { software: 'Commons', version: commonsVersion },
+        squidJs: {
+            software: 'Squid-js',
+            version: `v${versionSquid}`
+        },
+        aquarius: { software: 'Aquarius', version: '0.0.0' },
+        brizo: {
+            software: 'Brizo',
+            version: '0.0.0',
+            contracts: {} as any,
+            network: '',
+            'keeper-version': '0.0.0',
+            'keeper-url': ''
+        },
+        keeperContracts: {
+            software: 'Keeper Contracts',
+            version: '0.0.0',
+            contracts: {} as any,
+            network: ''
+        },
+        faucet: { software: 'Faucet', version: '0.0.0' }
+    }
+
+    // for canceling axios requests
+    public signal = axios.CancelToken.source()
+
+    public componentWillMount() {
+        this.setComponentVersions()
+    }
+
+    public componentWillUnmount() {
+        this.signal.cancel()
+    }
+
+    private async setComponentVersions() {
+        try {
+            const aquarius = await this.getData(
+                aquariusScheme,
+                aquariusHost,
+                aquariusPort
+            )
+            aquarius.version !== undefined && this.setState({ aquarius })
+
+            const brizo = await this.getData(brizoScheme, brizoHost, brizoPort)
+            brizo.version !== undefined &&
+                this.setState({
+                    brizo,
+                    keeperContracts: {
+                        ...this.state.keeperContracts,
+                        version: brizo['keeper-version'],
+                        contracts: brizo.contracts
+                    }
+                })
+
+            const faucet = await this.getData(
+                faucetScheme,
+                faucetHost,
+                faucetPort
+            )
+
+            faucet.version !== undefined && this.setState({ faucet })
+        } catch (error) {
+            !axios.isCancel(error) && Logger.error(error.message)
+        }
+    }
+
+    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
+    }
+
+    public render() {
+        const { minimal } = this.props
+        const { commons, squidJs, brizo, aquarius, faucet } = this.state
+
+        const mimimalOutput = `${squidJs.software} ${squidJs.version}  \n${
+            brizo.software
+        } v${brizo.version} \n${aquarius.software} v${
+            aquarius.version
+        } \nKeeper Contracts ${brizo['keeper-version']} \n${faucet.software} v${
+            faucet.version
+        }`
+
+        return minimal ? (
+            <p className={styles.versionsMinimal}>
+                <a title={mimimalOutput} href={'/about'}>
+                    {commons.version} ({brizo.network})
+                </a>
+            </p>
+        ) : (
+            <div className={styles.versions} id="#oceanversions">
+                <h2 className={styles.versionsTitle}>
+                    Ocean Components in use
+                </h2>
+                <VersionTable data={this.state} />
+            </div>
+        )
+    }
+}

client/src/components/organisms/Footer.tsx

@@ -31,7 +31,7 @@ const Footer = () => (
                         <AiCommons />
                     </a>
                 </p>
-                <VersionNumbers />
+                <VersionNumbers minimal />
             </Content>
         </aside>
 

client/src/routes/About.tsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import Route from '../components/templates/Route'
 import Content from '../components/atoms/Content'
+import VersionNumbers from '../components/atoms/VersionNumbers'
 
 class About extends Component {
     public render() {
@@ -34,6 +35,10 @@ class About extends Component {
                         </li>
                     </ul>
                 </Content>
+
+                <Content>
+                    <VersionNumbers />
+                </Content>
             </Route>
         )
     }

client/src/styles/global.scss

@@ -275,34 +275,32 @@ code,
 kbd,
 pre,
 samp {
-    // lots of !important to overwrite prims.js theme
-    font-family: $font-family-monospace !important;
-    font-size: $font-size-small !important;
-    border-radius: $border-radius !important;
-    text-shadow: none !important;
+    font-family: $font-family-monospace;
+    font-size: $font-size-small;
+    border-radius: $border-radius;
+    text-shadow: none;
 
     h1 &,
     h2 &,
     h3 &,
     h4 &,
     h5 & {
-        font-size: inherit !important;
+        font-size: inherit;
     }
 }
 
 :not(pre) > code {
-    background: darken($brand-white, 5%) !important;
-    color: $brand-grey-dark !important;
+    color: $brand-grey-dark;
     display: inline-block;
-    padding-left: .3rem !important;
-    padding-right: .3rem !important;
+    padding-left: .15rem;
+    padding-right: .15rem;
 }
 
 pre {
     display: block;
-    margin-bottom: $spacer !important;
-    padding: 0 !important;
-    background: $brand-black !important;
+    margin-bottom: $spacer;
+    padding: 0;
+    background: $brand-black;
 
     // make 'em scrollable
     overflow: auto;
@@ -312,7 +310,7 @@ pre {
         padding: $spacer;
         white-space: pre;
         display: block;
-        color: $brand-grey-lighter !important;
+        color: $brand-grey-lighter;
         overflow-wrap: normal;
         word-wrap: normal;
         word-break: normal;