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${
-                            network === 'duero'
-                                ? '.duero'
-                                : network === 'pacific'
-                                ? '.pacific'
-                                : ''
-                        }.dev-ocean.com/address/${contracts[key]}`
+                        const submarineLink = `https://submarine.${
+                            network === 'pacific'
+                                ? 'oceanprotocol'
+                                : `${network}.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,
-            version: commonsVersion
+            network: this.commonsNetwork,
+            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() {
-        this.signal.cancel()
-    }
-
-    public componentWillReceiveProps() {
+    public componentDidMount() {
         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 (
-            <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})`}
-                </a>
-            </p>
+            <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}{' '}
+                            {market.network && `(${market.network})`}
+                        </a>
+                    </p>
+                )}
+            </Market.Consumer>
         )
     }
 

client/src/components/organisms/Footer.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { Market } from '../../context'
+import React, { useContext } from 'react'
+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,48 +7,47 @@ import styles from './Footer.module.scss'
 import meta from '../../data/meta.json'
 import VersionNumbers from '../molecules/VersionNumbers'
 
-const Footer = () => (
-    <footer className={styles.footer}>
-        <aside className={styles.stats}>
+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.totalAssets > 0 &&
+                            ` With a total of ${market.totalAssets} registered assets.`}
+                    </p>
+                    <p className={styles.aicommons}>
+                        Proud supporter of{' '}
+                        <a
+                            href="https://aicommons.com/?utm_source=commons.oceanprotocol.com"
+                            title="AI Commons"
+                        >
+                            <AiCommons />
+                        </a>
+                    </p>
+                    <VersionNumbers account={user.account} minimal />
+                </Content>
+            </aside>
+
             <Content wide>
-                <p>
-                    Online since March 2019.
-                    <Market.Consumer>
-                        {state =>
-                            state.totalAssets > 0 &&
-                            ` With a total of ${state.totalAssets} registered assets.`
-                        }
-                    </Market.Consumer>
-                </p>
-                <p className={styles.aicommons}>
-                    Proud supporter of{' '}
-                    <a
-                        href="https://aicommons.com/?utm_source=commons.oceanprotocol.com"
-                        title="AI Commons"
-                    >
-                        <AiCommons />
-                    </a>
-                </p>
-                <VersionNumbers minimal />
+                <small>
+                    &copy; {new Date().getFullYear()}{' '}
+                    <a href={meta.social[0].url}>{meta.company}</a> &mdash; All
+                    Rights Reserved
+                </small>
+
+                <nav className={styles.links}>
+                    {meta.social.map(site => (
+                        <a key={site.title} href={site.url}>
+                            {site.title}
+                        </a>
+                    ))}
+                </nav>
             </Content>
-        </aside>
-
-        <Content wide>
-            <small>
-                &copy; {new Date().getFullYear()}{' '}
-                <a href={meta.social[0].url}>{meta.company}</a> &mdash; All
-                Rights Reserved
-            </small>
-
-            <nav className={styles.links}>
-                {meta.social.map(site => (
-                    <a key={site.title} href={site.url}>
-                        {site.title}
-                    </a>
-                ))}
-            </nav>
-        </Content>
-    </footer>
-)
-
-export default Footer
+        </footer>
+    )
+}

client/src/routes/About.tsx

@@ -1,5 +1,5 @@
-import React, { Component } from 'react'
-import { Market } from '../context'
+import React, { useContext } from 'react'
+import { Market, User } from '../context'
 import Route from '../components/templates/Route'
 import Content from '../components/atoms/Content'
 import VersionNumbers from '../components/molecules/VersionNumbers'
@@ -7,51 +7,49 @@ import Web3message from '../components/organisms/Web3message'
 import stylesVersionNumbers from '../components/molecules/VersionNumbers/index.module.scss'
 import withTracker from '../hoc/withTracker'
 
-class About extends Component {
-    public static contextType = Market
+const About = () => {
+    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.`}
-            >
-                <Content>
-                    <p>
-                        Commons is built on top of the Ocean{' '}
-                        <a href="https://docs.oceanprotocol.com/concepts/pacific-network/">
-                            {this.context.network} network
-                        </a>{' '}
-                        and is targeted at enthusiastic data scientists with
-                        some crypto experience. It can be used with any
-                        Web3-capable browser, like Firefox with MetaMask
-                        installed.
-                    </p>
+    return (
+        <Route
+            title="About"
+            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/">
+                        {market.network} network
+                    </a>{' '}
+                    and is targeted at enthusiastic data scientists with some
+                    crypto experience. It can be used with any Web3-capable
+                    browser, like Firefox with MetaMask installed.
+                </p>
 
-                    <ul>
-                        <li>
-                            <a href="https://blog.oceanprotocol.com/the-commons-marketplace-c57a44288314">
-                                Read the blog post →
-                            </a>
-                        </li>
-                        <li>
-                            <a href="https://github.com/oceanprotocol/commons">
-                                Check out oceanprotocol/commons on GitHub →
-                            </a>
-                        </li>
-                    </ul>
-                </Content>
+                <ul>
+                    <li>
+                        <a href="https://blog.oceanprotocol.com/the-commons-marketplace-c57a44288314">
+                            Read the blog post →
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://github.com/oceanprotocol/commons">
+                            Check out oceanprotocol/commons on GitHub →
+                        </a>
+                    </li>
+                </ul>
+            </Content>
 
-                <Content>
-                    <h2 className={stylesVersionNumbers.versionsTitle}>
-                        Your Web3 Account Status
-                    </h2>
-                    <Web3message extended />
-                    <VersionNumbers />
-                </Content>
-            </Route>
-        )
-    }
+            <Content>
+                <h2 className={stylesVersionNumbers.versionsTitle}>
+                    Your Web3 Account Status
+                </h2>
+                <Web3message extended />
+                <VersionNumbers account={user.account} />
+            </Content>
+        </Route>
+    )
 }
 
 export default withTracker(About)