Ocean network detection, remove isOceanNetwork

client/__mocks__/user-mock.ts

@@ -4,7 +4,6 @@ const userMock = {
     isLogged: false,
     isLoading: false,
     isBurner: false,
-    isOceanNetwork: false,
     account: '',
     web3: {},
     ...oceanMock,
@@ -20,7 +19,6 @@ const userMockConnected = {
     isLogged: true,
     isLoading: false,
     isBurner: false,
-    isOceanNetwork: true,
     account: '0xxxxxx',
     web3: {},
     ...oceanMock,

client/src/components/molecules/AccountStatus/Indicator.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import cx from 'classnames'
-import { User } from '../../../context'
+import { User, Market } from '../../../context'
 import styles from './Indicator.module.scss'
 
 const Indicator = ({
@@ -19,13 +19,19 @@ const Indicator = ({
         ref={forwardedRef}
     >
         <User.Consumer>
-            {states =>
+            {user => (
-                !states.isLogged || !states.isOceanNetwork ? (
+                <Market.Consumer>
-                    <span className={styles.statusIndicatorCloseEnough} />
+                    {market =>
-                ) : states.isLogged ? (
+                        !user.isLogged || !market.networkMatch ? (
+                            <span
+                                className={styles.statusIndicatorCloseEnough}
+                            />
+                        ) : user.isLogged ? (
                             <span className={styles.statusIndicatorActive} />
                         ) : null
                     }
+                </Market.Consumer>
+            )}
         </User.Consumer>
     </div>
 )

client/src/components/molecules/AccountStatus/Popover.test.tsx

@@ -38,7 +38,6 @@ describe('Popover', () => {
             <User.Provider
                 value={{
                     ...userMockConnected,
-                    isOceanNetwork: false,
                     network: '1'
                 }}
             >

client/src/components/molecules/AccountStatus/Popover.tsx

@@ -1,14 +1,16 @@
 import React, { PureComponent } from 'react'
 import Account from '../../atoms/Account'
-import { User } from '../../../context'
+import { User, Market } from '../../../context'
 import styles from './Popover.module.scss'
 
 export default class Popover extends PureComponent<{
     forwardedRef?: (ref: HTMLElement | null) => void
     style?: React.CSSProperties
 }> {
+    public static contextType = User
+
     public render() {
-        const { account, balance, network, isOceanNetwork } = this.context
+        const { account, balance, network } = this.context
 
         return (
             <div
@@ -41,16 +43,28 @@ export default class Popover extends PureComponent<{
                             </div>
                         )}
 
+                        <Market.Consumer>
+                            {market => (
                                 <div className={styles.popoverInfoline}>
-                            {network && !isOceanNetwork
+                                    {network && !market.networkMatch
-                                ? 'Please connect to Custom RPC\n https://pacific.oceanprotocol.com'
+                                        ? `Please connect to Custom RPC
-                                : network && `Connected to ${network} network`}
+                                           ${
+                                               market.network === 'Pacific'
+                                                   ? 'https://pacific.oceanprotocol.com'
+                                                   : market.network === 'Nile'
+                                                   ? 'https://nile.dev-ocean.com'
+                                                   : market.network === 'Duero'
+                                                   ? 'https://duero.dev-ocean.com'
+                                                   : 'http://localhost:8545'
+                                           }`
+                                        : network &&
+                                          `Connected to ${network} network`}
                                 </div>
+                            )}
+                        </Market.Consumer>
                     </>
                 }
             </div>
         )
     }
 }
-
-Popover.contextType = User

client/src/components/organisms/AssetsUser.tsx

@@ -57,10 +57,9 @@ export default class AssetsUser extends PureComponent<
     }
 
     public render() {
-        const { account, isOceanNetwork } = this.context
+        const { account } = this.context
 
         return (
-            isOceanNetwork &&
             account && (
                 <div className={styles.assetsUser}>
                     {this.props.recent && (

client/src/components/organisms/Web3message.test.tsx

@@ -16,9 +16,7 @@ describe('Web3message', () => {
 
     it('renders with wrongNetwork message', () => {
         const { container } = render(
-            <User.Provider
+            <User.Provider value={{ ...userMockConnected }}>
-                value={{ ...userMockConnected, isOceanNetwork: false }}
-            >
                 <Web3message extended />
             </User.Provider>
         )
@@ -29,7 +27,7 @@ describe('Web3message', () => {
 
     it('renders with noAccount message', () => {
         const { container } = render(
-            <User.Provider value={{ ...userMock, isOceanNetwork: true }}>
+            <User.Provider value={{ ...userMock }}>
                 <Web3message extended />
             </User.Provider>
         )

client/src/components/organisms/Web3message.tsx

@@ -2,28 +2,51 @@ import React, { PureComponent } from 'react'
 import Account from '../atoms/Account'
 import AccountStatus from '../molecules/AccountStatus'
 import styles from './Web3message.module.scss'
-import { User } from '../../context'
+import { User, Market } from '../../context'
 import content from '../../data/web3message.json'
 
 export default class Web3message extends PureComponent<{ extended?: boolean }> {
-    public static contextType = User
+    public static contextType = Market
 
-    private message = () => {
+    private messageOceanNetwork = () =>
-        const { isOceanNetwork, isLogged, isBurner, network } = this.context
+        this.context.network === 'Pacific'
-
-        return !isOceanNetwork && !isBurner
             ? content.wrongNetworkPacific
-            : !isLogged
+            : this.context.network === 'Nile'
+            ? content.wrongNetworkNile
+            : this.context.network === 'Duero'
+            ? content.wrongNetworkDuero
+            : content.wrongNetworkSpree
+
+    private Message = () => {
+        const { networkMatch, network } = this.context
+
+        return (
+            <User.Consumer>
+                {user => (
+                    <em
+                        dangerouslySetInnerHTML={{
+                            __html:
+                                !networkMatch && !user.isBurner
+                                    ? this.messageOceanNetwork()
+                                    : !user.isLogged
                                     ? content.noAccount
-            : isBurner
+                                    : user.isBurner
                                     ? content.hasBurnerWallet
-            : isLogged
+                                    : user.isLogged
-            ? content.hasMetaMaskWallet.replace('NETWORK', network)
+                                    ? content.hasMetaMaskWallet.replace(
+                                          'NETWORK',
+                                          network
+                                      )
                                     : ''
+                        }}
+                    />
+                )}
+            </User.Consumer>
+        )
     }
 
     public render() {
-        const { network } = this.context
+        const { networkMatch } = this.context
 
         return (
             <div className={styles.message}>
@@ -31,14 +54,10 @@ export default class Web3message extends PureComponent<{ extended?: boolean }> {
                     <Account />
                 </div>
 
-                {(network !== 'Pacific' || this.props.extended) && (
+                {(!networkMatch || this.props.extended) && (
                     <div className={styles.text}>
                         <AccountStatus className={styles.status} />
-                        <em
+                        <this.Message />
-                            dangerouslySetInnerHTML={{
-                                __html: this.message()
-                            }}
-                        />
                     </div>
                 )}
             </div>

client/src/components/templates/Asset/AssetFile.tsx

@@ -109,7 +109,7 @@ export default class AssetFile extends PureComponent<
     public render() {
         const { ddo, file } = this.props
         const { isLoading, error, step } = this.state
-        const { isLogged, isOceanNetwork } = this.context
+        const { isLogged } = this.context
         const { index, contentType, contentLength } = file
 
         return (
@@ -145,7 +145,7 @@ export default class AssetFile extends PureComponent<
                         className={styles.buttonMain}
                         // weird 0 hack so TypeScript is happy
                         onClick={() => this.purchaseAsset(ddo, index || 0)}
-                        disabled={!isLogged || !isOceanNetwork}
+                        disabled={!isLogged}
                         name="Download"
                     >
                         Get file

client/src/components/templates/Asset/AssetFilesDetails.tsx

@@ -19,9 +19,7 @@ export default class AssetFilesDetails extends PureComponent<{
                         <AssetFile key={file.index} ddo={ddo} file={file} />
                     ))}
                 </div>
-                {(!this.context.isOceanNetwork || !this.context.isLogged) && (
                 <Web3message />
-                )}
             </>
         ) : (
             <div>No files attached.</div>

client/src/context/MarketProvider.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import { Logger, Ocean } from '@oceanprotocol/squid'
-import { Market } from '.'
+import { Market, User } from '.'
 import formPublish from '../data/form-publish.json'
 
 const categories =
@@ -17,19 +17,25 @@ interface MarketProviderState {
     totalAssets: number
     categories: string[]
     network: string
+    networkMatch: boolean
 }
 
 export default class MarketProvider extends PureComponent<
     MarketProviderProps,
     MarketProviderState
 > {
+    public static contextType = User
+
     public state = {
         totalAssets: 0,
         categories,
-        network: 'Pacific'
+        network: 'Pacific',
+        networkMatch: false
     }
 
-    public async componentDidMount() {}
+    public async componentDidMount() {
+        await this.checkCorrectUserNetwork()
+    }
 
     public async componentDidUpdate(prevProps: any) {
         // Using ocean prop instead of getting it from context to be able to compare.
@@ -37,6 +43,7 @@ export default class MarketProvider extends PureComponent<
         if (prevProps.ocean !== this.props.ocean) {
             await this.getTotalAssets()
             await this.getMarketNetwork()
+            await this.checkCorrectUserNetwork()
         }
     }
 
@@ -72,6 +79,14 @@ export default class MarketProvider extends PureComponent<
         }
     }
 
+    private async checkCorrectUserNetwork() {
+        if (this.context.network === this.state.network) {
+            this.setState({ networkMatch: true })
+        } else {
+            this.setState({ networkMatch: false })
+        }
+    }
+
     public render() {
         return (
             <Market.Provider value={this.state}>

client/src/context/UserProvider.tsx

@@ -51,7 +51,6 @@ interface UserProviderState {
     isBurner: boolean
     isWeb3Capable: boolean
     isLoading: boolean
-    isOceanNetwork: boolean
     account: string
     balance: {
         eth: number
@@ -110,7 +109,6 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
         isBurner: false,
         isWeb3Capable: Boolean(window.web3 || window.ethereum),
         isLoading: true,
-        isOceanNetwork: false,
         balance: {
             eth: 0,
             ocn: 0
@@ -205,13 +203,13 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
     }
 
     private fetchAccounts = async () => {
-        const { ocean, isLogged, isOceanNetwork } = this.state
+        const { ocean, isLogged } = this.state
 
         if (isLogged) {
             let accounts
 
             // Modern dapp browsers
-            if (window.ethereum && !isLogged && isOceanNetwork) {
+            if (window.ethereum && !isLogged) {
                 // simply set to empty, and have user click a button somewhere
                 // to initiate account unlocking
                 accounts = []
@@ -250,16 +248,8 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
 
     private fetchNetwork = async () => {
         const { ocean } = this.state
-
         const network = await ocean.keeper.getNetworkName()
-        const isPacific = network === 'Pacific'
+        network !== this.state.network && this.setState({ network })
-        const isNile = network === 'Nile'
-        const isDuero = network === 'Duero'
-        const isSpree = network === 'Spree'
-        const isOceanNetwork = isPacific || isNile || isDuero || isSpree
-
-        network !== this.state.network &&
-            this.setState({ isOceanNetwork, network })
     }
 
     public render() {

client/src/context/index.tsx

@@ -5,7 +5,6 @@ export const User = React.createContext({
     isBurner: false,
     isWeb3Capable: false,
     isLoading: false,
-    isOceanNetwork: false,
     account: '',
     web3: {},
     ocean: {},
@@ -29,5 +28,6 @@ export const User = React.createContext({
 export const Market = React.createContext({
     totalAssets: 0,
     categories: [''],
-    network: ''
+    network: '',
+    networkMatch: false
 })

client/src/data/web3message.json

@@ -5,5 +5,6 @@
   "wrongNetworkPacific": "Not connected to Pacific network. Please connect in MetaMask with Custom RPC <code>https://pacific.oceanprotocol.com</code>",
   "wrongNetworkNile": "Not connected to Nile network. Please connect in MetaMask with Custom RPC <code>https://nile.dev-ocean.com</code>",
   "wrongNetworkDuero": "Not connected to Duero network. Please connect in MetaMask with Custom RPC <code>https://duero.dev-ocean.com</code>",
+  "wrongNetworkSpree": "Not connected to Spree network. Please connect in MetaMask with Custom RPC <code>http://localhost:8545</code>",
   "seedphrase": "You can use this seed phrase to import this burner wallet account into other wallets, e.g. MetaMask."
 }

client/src/routes/Faucet.tsx

@@ -99,9 +99,7 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
             <Button
                 primary
                 onClick={() => this.getTokens(this.context.requestFromFaucet)}
-                disabled={
+                disabled={!this.context.isLogged}
-                    !this.context.isLogged || !this.context.isOceanNetwork
-                }
             >
                 Request Ether
             </Button>

client/src/routes/History.tsx

@@ -10,9 +10,7 @@ export default class History extends Component {
         return (
             <Route title="History">
                 <Content>
-                    {(!this.context.isLogged ||
+                    {!this.context.isLogged && <Web3message />}
-                        !this.context.isOceanNetwork) && <Web3message />}
-
                     <AssetsUser list />
                 </Content>
             </Route>