workaround for version number components updating

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

@@ -26,6 +26,17 @@ describe('VersionTableContracts', () => {
             /submarine.duero.dev-ocean/
         )
 
+        rerender(
+            <VersionTableContracts
+                contracts={{ hello: 'hello', hello2: 'hello2' }}
+                network="nile"
+                keeperVersion="6.6.6"
+            />
+        )
+        expect(container.querySelector('tr:last-child a').href).toMatch(
+            /submarine.nile.dev-ocean/
+        )
+
         rerender(
             <VersionTableContracts
                 contracts={{ hello: 'hello', hello2: 'hello2' }}
@@ -34,7 +45,7 @@ describe('VersionTableContracts', () => {
             />
         )
         expect(container.querySelector('tr:last-child a').href).toMatch(
-            /submarine.pacific.dev-ocean/
+            /submarine.oceanprotocol/
         )
     })
 })

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

@@ -53,13 +53,11 @@ export const VersionTableContracts = ({
                     // sort alphabetically
                     .sort((a, b) => a.localeCompare(b))
                     .map(key => {
-                        const submarineLink = `https://submarine${
+                        const submarineLink = `https://submarine.${
-                            network === 'duero'
+                            network === 'pacific'
-                                ? '.duero'
+                                ? 'oceanprotocol'
-                                : network === 'pacific'
+                                : `${network}.dev-ocean`
-                                ? '.pacific'
+                        }.com/address/${contracts[key]}`
-                                : ''
-                        }.dev-ocean.com/address/${contracts[key]}`
 
                         return (
                             <tr key={key}>

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

@@ -9,19 +9,14 @@ import { version } from '../../../../package.json'
 import styles from './index.module.scss'
 
 import { nodeUri, faucetUri } from '../../../config'
-import { User } from '../../../context'
+import { User, Market } from '../../../context'
 
 import VersionTable from './VersionTable'
 import VersionStatus from './VersionStatus'
 
-// construct values which are not part of any response
-export const commonsVersion =
-    process.env.NODE_ENV === 'production' ? version : `${version}-dev`
-const commonsNetwork = new URL(nodeUri).hostname.split('.')[0]
-const faucetNetwork = new URL(faucetUri).hostname.split('.')[1]
-
 interface VersionNumbersProps {
     minimal?: boolean
+    account: string
 }
 
 export interface VersionNumbersState extends OceanPlatformVersions {
@@ -44,12 +39,20 @@ export default class VersionNumbers extends PureComponent<
 > {
     public static contextType = User
 
+    // construct values which are not part of any response
+    public commonsVersion =
+        process.env.NODE_ENV === 'production' ? version : `${version}-dev`
+    public commonsNetwork = new URL(nodeUri).hostname.split('.')[0]
+    public faucetNetwork = faucetUri.includes('dev-ocean')
+        ? new URL(faucetUri).hostname.split('.')[1]
+        : 'Pacific'
+
     // define a minimal default state to fill UI
     public state: VersionNumbersState = {
         commons: {
             name: 'Commons',
-            network: commonsNetwork,
+            network: this.commonsNetwork,
-            version: commonsVersion
+            version: this.commonsVersion
         },
         squid: {
             name: 'Squid-js',
@@ -66,7 +69,7 @@ export default class VersionNumbers extends PureComponent<
         faucet: {
             name: 'Faucet',
             version: '',
-            network: faucetNetwork,
+            network: this.faucetNetwork,
             status: OceanPlatformTechStatus.Loading
         },
         status: {
@@ -79,15 +82,24 @@ export default class VersionNumbers extends PureComponent<
     // for canceling axios requests
     public signal = axios.CancelToken.source()
 
-    public componentWillUnmount() {
+    public componentDidMount() {
-        this.signal.cancel()
-    }
-
-    public componentWillReceiveProps() {
         this.getOceanVersions()
         this.getFaucetVersion()
     }
 
+    public async componentDidUpdate(prevProps: any) {
+        // Workaround: Using account prop instead of getting it from
+        // context to be able to compare. Cause there is no `prevContext`.
+        if (prevProps.account !== this.props.account) {
+            this.getOceanVersions()
+            this.getFaucetVersion()
+        }
+    }
+
+    public componentWillUnmount() {
+        this.signal.cancel()
+    }
+
     private async getOceanVersions() {
         const { ocean } = this.context
         // wait until ocean object is properly populated
@@ -132,14 +144,19 @@ export default class VersionNumbers extends PureComponent<
         const { commons, squid, brizo, aquarius } = this.state
 
         return (
+            <Market.Consumer>
+                {market => (
                     <p className={styles.versionsMinimal}>
                         <a
                             title={`${squid.name} v${squid.version}\n${brizo.name} v${brizo.version}\n${aquarius.name} v${aquarius.version}`}
                             href={'/about'}
                         >
-                    v{commons.version} {squid.network && `(${squid.network})`}
+                            v{commons.version}{' '}
+                            {market.network && `(${market.network})`}
                         </a>
                     </p>
+                )}
+            </Market.Consumer>
         )
     }
 

client/src/components/organisms/Footer.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
+import React, { useContext } from 'react'
-import { Market } from '../../context'
+import { Market, User } from '../../context'
 import Content from '../atoms/Content'
 import { ReactComponent as AiCommons } from '../../img/aicommons.svg'
 import styles from './Footer.module.scss'
@@ -7,18 +7,18 @@ import styles from './Footer.module.scss'
 import meta from '../../data/meta.json'
 import VersionNumbers from '../molecules/VersionNumbers'
 
-const Footer = () => (
+export default function Footer() {
+    const market = useContext(Market)
+    const user = useContext(User)
+
+    return (
         <footer className={styles.footer}>
             <aside className={styles.stats}>
                 <Content wide>
                     <p>
                         Online since March 2019.
-                    <Market.Consumer>
+                        {market.totalAssets > 0 &&
-                        {state =>
+                            ` With a total of ${market.totalAssets} registered assets.`}
-                            state.totalAssets > 0 &&
-                            ` With a total of ${state.totalAssets} registered assets.`
-                        }
-                    </Market.Consumer>
                     </p>
                     <p className={styles.aicommons}>
                         Proud supporter of{' '}
@@ -29,7 +29,7 @@ const Footer = () => (
                             <AiCommons />
                         </a>
                     </p>
-                <VersionNumbers minimal />
+                    <VersionNumbers account={user.account} minimal />
                 </Content>
             </aside>
 
@@ -50,5 +50,4 @@ const Footer = () => (
             </Content>
         </footer>
     )
-
+}
-export default Footer

client/src/routes/About.tsx

@@ -1,5 +1,5 @@
-import React, { Component } from 'react'
+import React, { useContext } from 'react'
-import { Market } from '../context'
+import { Market, User } from '../context'
 import Route from '../components/templates/Route'
 import Content from '../components/atoms/Content'
 import VersionNumbers from '../components/molecules/VersionNumbers'
@@ -7,25 +7,24 @@ import Web3message from '../components/organisms/Web3message'
 import stylesVersionNumbers from '../components/molecules/VersionNumbers/index.module.scss'
 import withTracker from '../hoc/withTracker'
 
-class About extends Component {
+const About = () => {
-    public static contextType = Market
+    const market = useContext(Market)
+    const user = useContext(User)
 
-    public render() {
     return (
         <Route
             title="About"
-                description={`A marketplace to find and publish open data sets in the Ocean ${this.context.network} Network.`}
+            description={`A marketplace to find and publish open data sets in the Ocean ${market.network} Network.`}
         >
             <Content>
                 <p>
                     Commons is built on top of the Ocean{' '}
                     <a href="https://docs.oceanprotocol.com/concepts/pacific-network/">
-                            {this.context.network} network
+                        {market.network} network
                     </a>{' '}
-                        and is targeted at enthusiastic data scientists with
+                    and is targeted at enthusiastic data scientists with some
-                        some crypto experience. It can be used with any
+                    crypto experience. It can be used with any Web3-capable
-                        Web3-capable browser, like Firefox with MetaMask
+                    browser, like Firefox with MetaMask installed.
-                        installed.
                 </p>
 
                 <ul>
@@ -47,11 +46,10 @@ class About extends Component {
                     Your Web3 Account Status
                 </h2>
                 <Web3message extended />
-                    <VersionNumbers />
+                <VersionNumbers account={user.account} />
             </Content>
         </Route>
     )
 }
-}
 
 export default withTracker(About)