Merge pull request #158 from oceanprotocol/fix/hashes

Submarine links and Pacific support

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

@@ -54,6 +54,6 @@
 }
 
 .spinner {
-    composes: spinner, small from '../Spinner.module.scss';
+    composes: spinner, small from '../../atoms/Spinner.module.scss';
     margin-right: $spacer;
 }

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

@@ -2,7 +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'
+import Spinner from '../../atoms/Spinner'
 
 const VersionTableContracts = ({
     contracts,
@@ -14,27 +14,60 @@ const VersionTableContracts = ({
     <table>
         <tbody>
             {contracts &&
-                Object.keys(contracts).map(key => (
+                Object.keys(contracts).map(key => {
-                    <tr key={key}>
+                    const submarineLink = `https://submarine${
-                        <td>
+                        network === 'duero'
-                            <span className={styles.label}>{key}</span>
+                            ? '.duero'
-                        </td>
+                            : network === 'pacific'
-                        <td>
+                            ? '.pacific'
-                            <a
+                            : ''
-                                href={`https://submarine${network === 'duero' &&
+                    }.dev-ocean.com/address/${contracts[key]}`
-                                    '.duero'}.dev-ocean.com/address/${
+
-                                    contracts[key]
+                    return (
-                                }`}
+                        <tr key={key}>
-                            >
+                            <td>
-                                <code>{contracts[key]}</code>
+                                <span className={styles.label}>{key}</span>
-                            </a>
+                            </td>
-                        </td>
+                            <td>
-                    </tr>
+                                <a href={submarineLink}>
-                ))}
+                                    <code>{contracts[key]}</code>
+                                </a>
+                            </td>
+                        </tr>
+                    )
+                })}
         </tbody>
     </table>
 )
 
+const VersionNumber = ({
+    isLoading,
+    software,
+    version,
+    network
+}: {
+    isLoading: boolean
+    software: string
+    version: string
+    network: string
+}) =>
+    isLoading ? (
+        <Spinner small className={styles.spinner} />
+    ) : version ? (
+        <>
+            <a
+                href={`https://github.com/oceanprotocol/${slugify(
+                    software
+                )}/releases/tag/v${version}`}
+            >
+                <code>v{version}</code>
+            </a>
+            {network && `(${network})`}
+        </>
+    ) : (
+        <span>Could not get version</span>
+    )
+
 const VersionTable = ({ data }: { data: VersionTableProps }) => (
     <div className={styles.tableWrap}>
         <table className={styles.table}>
@@ -55,16 +88,12 @@ const VersionTable = ({ data }: { data: VersionTableProps }) => (
                                 </a>
                             </td>
                             <td>
-                                {value.isLoading ? (
+                                <VersionNumber
-                                    <Spinner small className={styles.spinner} />
+                                    isLoading={value.isLoading}
-                                ) : value.version ? (
+                                    software={value.software}
-                                    <>
+                                    version={value.version}
-                                        <code>v{value.version}</code>
+                                    network={value.network}
-                                        {value.network && `(${value.network})`}
+                                />
-                                    </>
-                                ) : (
-                                    'Could not get version'
-                                )}
                             </td>
                         </tr>
                         {key === 'keeperContracts' && data.brizo.contracts && (

client/src/components/organisms/Footer.tsx

@@ -5,7 +5,7 @@ import { ReactComponent as AiCommons } from '../../img/aicommons.svg'
 import styles from './Footer.module.scss'
 
 import meta from '../../data/meta.json'
-import VersionNumbers from '../atoms/VersionNumbers'
+import VersionNumbers from '../molecules/VersionNumbers'
 
 const Footer = () => (
     <footer className={styles.footer}>

client/src/context/UserProvider.tsx

@@ -153,13 +153,16 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
                 await window.web3.eth.net.getId((err, netId) => {
                     if (err) return
 
+                    const isPacific = netId === 0xcea11
                     const isNile = netId === 8995
                     const isDuero = netId === 2199
                     const isSpree = netId === 8996
 
-                    isOceanNetwork = isNile || isDuero || isSpree
+                    isOceanNetwork = isPacific || isNile || isDuero || isSpree
 
-                    const network = isNile
+                    const network = isPacific
+                        ? 'Pacific'
+                        : isNile
                         ? 'Nile'
                         : isDuero
                         ? 'Duero'
@@ -255,10 +258,11 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
 
         if (isWeb3) {
             const network = await ocean.keeper.getNetworkName()
+            const isPacific = network === 'Pacific'
             const isNile = network === 'Nile'
             const isDuero = network === 'Duero'
             const isSpree = network === 'Spree'
-            const isOceanNetwork = isNile || isDuero || isSpree
+            const isOceanNetwork = isPacific || isNile || isDuero || isSpree
 
             network !== this.state.network &&
                 this.setState({ isOceanNetwork, network })

client/src/routes/About.tsx

@@ -1,7 +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'
+import VersionNumbers from '../components/molecules/VersionNumbers'
 
 class About extends Component {
     public render() {

client/src/routes/Faucet.module.scss

@@ -25,6 +25,13 @@
         overflow-wrap: break-word;
         display: inline;
     }
+
+    a:hover,
+    a:focus {
+        code {
+            color: inherit;
+        }
+    }
 }
 
 .error {

client/src/routes/Faucet.tsx

@@ -16,6 +16,8 @@ interface FaucetState {
 }
 
 export default class Faucet extends PureComponent<{}, FaucetState> {
+    public static contextType = User
+
     public state = {
         isLoading: false,
         success: undefined,
@@ -59,15 +61,31 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
         })
     }
 
-    private Success = () => (
+    private Success = () => {
-        <div className={styles.success}>
+        const { network } = this.context
-            <strong>{this.state.success}</strong>
+        const { trxHash } = this.state
-            <p>
+
-                <strong>Your Transaction Hash</strong>
+        const submarineLink = `https://submarine${
-                <code>{this.state.trxHash}</code>
+            network === 'Duero'
-            </p>
+                ? '.duero'
-        </div>
+                : network === 'Pacific'
-    )
+                ? '.pacific'
+                : ''
+        }.dev-ocean.com/tx/${trxHash}`
+
+        return (
+            <div className={styles.success}>
+                <strong>{this.state.success}</strong>
+                <p>
+                    <strong>Your Transaction Hash</strong>
+
+                    <a href={submarineLink}>
+                        <code>{trxHash}</code>
+                    </a>
+                </p>
+            </div>
+        )
+    }
 
     private Error = () => (
         <div className={styles.error}>