adapt network detection

app.config.js

@@ -10,5 +10,7 @@ module.exports = {
       process.env.FACTORY_ADDRESS ||
       '0x00c6A0BC5cD0078d6Cd0b659E8061B404cfa5704',
     verbose: 3
-  }
+  },
+  // Main, Rinkeby, Kovan
+  networks: [1, 4, 42]
 }

src/components/molecules/Wallet/Account.tsx

@@ -4,7 +4,11 @@ import { useOcean } from '@oceanprotocol/react'
 import { toDataUrl } from 'ethereum-blockies'
 import { ReactComponent as Caret } from '../../../images/caret.svg'
 import Status from '../../atoms/Status'
-import { accountTruncate, connectWallet } from '../../../utils/wallet'
+import {
+  accountTruncate,
+  connectWallet,
+  isCorrectNetwork
+} from '../../../utils/wallet'
 
 const Blockies = ({ account }: { account: string | undefined }) => {
   if (!account) return null
@@ -23,8 +27,8 @@ const Blockies = ({ account }: { account: string | undefined }) => {
 // Forward ref for Tippy.js
 // eslint-disable-next-line
 const Account = React.forwardRef((props, ref: any) => {
-  const { accountId, status, connect } = useOcean()
-  const hasSuccess = status === 1
+  const { accountId, status, connect, chainId } = useOcean()
+  const hasSuccess = status === 1 && isCorrectNetwork(chainId)
 
   return accountId ? (
     <button className={styles.button} aria-label="Account" ref={ref}>

src/components/molecules/Wallet/Feedback.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement } from 'react'
 import Status from '../../atoms/Status'
 import styles from './Feedback.module.css'
 import { useOcean } from '@oceanprotocol/react'
+import { isCorrectNetwork } from '../../../utils/wallet'
 
 export declare type Web3Error = {
   status: 'error' | 'warning' | 'success'
@@ -14,39 +15,42 @@ export default function Web3Feedback({
 }: {
   isBalanceInsufficient?: boolean
 }): ReactElement {
-  const { web3, status } = useOcean()
-  const isOceanDisconnected = status === 0
+  const { account, status, chainId } = useOcean()
   const isOceanConnectionError = status === -1
+  const correctNetwork = isCorrectNetwork(chainId)
+  const showFeedback = !account || isOceanConnectionError || !correctNetwork
 
-  const state = !web3
+  const state = !account
     ? 'error'
-    : web3 && !isBalanceInsufficient
+    : !correctNetwork
+    ? 'warning'
+    : account && !isBalanceInsufficient
     ? 'success'
     : 'warning'
 
-  const title = !web3
+  const title = !account
     ? 'No account connected'
-    : isOceanDisconnected
-    ? 'Not connected to Pacific network'
     : isOceanConnectionError
     ? 'Error connecting to Ocean'
-    : web3
+    : !correctNetwork
+    ? 'Wrong Network'
+    : account
     ? isBalanceInsufficient === true
       ? 'Insufficient balance'
       : 'Connected to Ocean'
     : 'Something went wrong'
 
-  const message = !web3
+  const message = !account
     ? 'Please connect your Web3 wallet.'
-    : isOceanDisconnected
-    ? 'Please connect in MetaMask to custom RPC https://pacific.oceanprotocol.com.'
     : isOceanConnectionError
-    ? 'Try again.'
+    ? 'Please try again.'
+    : !correctNetwork
+    ? 'Please connect to Main, Rinkeby, or Kovan.'
     : isBalanceInsufficient === true
     ? 'You do not have enough OCEAN in your wallet to purchase this asset.'
     : 'Something went wrong.'
 
-  return web3 ? (
+  return showFeedback ? (
     <section className={styles.feedback}>
       <Status state={state} aria-hidden />
       <h3 className={styles.title}>{title}</h3>

src/utils/wallet.ts

@@ -1,4 +1,5 @@
 import { OceanProviderValue } from '@oceanprotocol/react'
+import { networks } from '../../app.config'
 
 export async function connectWallet(
   connect: OceanProviderValue['connect']
@@ -19,6 +20,11 @@ export async function connectWallet(
   await connect({ cacheProvider: true, providerOptions })
 }
 
+export function isCorrectNetwork(chainId: number): boolean {
+  const allowedIds = networks
+  return allowedIds.includes(chainId)
+}
+
 export function accountTruncate(account: string): string {
   const middle = account.substring(6, 38)
   const truncated = account.replace(middle, '…')