adapt network message based on configured networks

src/components/molecules/Wallet/Details.tsx

@@ -4,11 +4,11 @@ import styles from './Details.module.css'
 import { useOcean } from '@oceanprotocol/react'
 import Web3Feedback from './Feedback'
 import { formatNumber } from '../../../utils'
-import { connectWallet } from '../../../utils/wallet'
+import { connectWallet, getNetworkName } from '../../../utils/wallet'
 import { getInjectedProviderName } from 'web3modal'
 
 export default function Details({ attrs }: { attrs: any }): ReactElement {
-  const { ocean, balance, connect, logout } = useOcean()
+  const { ocean, balance, connect, logout, chainId } = useOcean()
   const [balanceOcean, setBalanceOcean] = useState('0')
 
   useEffect(() => {
@@ -32,7 +32,11 @@ export default function Details({ attrs }: { attrs: any }): ReactElement {
           <span>ETH</span> {formatNumber(Number(balance))}
         </li>
         <li className={styles.actions}>
-          <span title="Connected provider">{getInjectedProviderName()}</span>
+          <span title="Connected provider">
+            {getInjectedProviderName()}
+            <br />
+            {getNetworkName(chainId)}
+          </span>
           <Button
             style="text"
             size="small"

src/components/molecules/Wallet/Feedback.tsx

@@ -2,7 +2,8 @@ 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'
+import { isCorrectNetwork, getNetworkName } from '../../../utils/wallet'
+import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 
 export declare type Web3Error = {
   status: 'error' | 'warning' | 'success'
@@ -15,10 +16,14 @@ export default function Web3Feedback({
 }: {
   isBalanceInsufficient?: boolean
 }): ReactElement {
+  const { appConfig } = useSiteMetadata()
   const { account, status, chainId } = useOcean()
   const isOceanConnectionError = status === -1
   const correctNetwork = isCorrectNetwork(chainId)
   const showFeedback = !account || isOceanConnectionError || !correctNetwork
+  const allowedNetworkNames = appConfig.networks.map((network: number) =>
+    getNetworkName(network)
+  )
 
   const state = !account
     ? 'error'
@@ -45,7 +50,7 @@ export default function Web3Feedback({
     : isOceanConnectionError
     ? 'Please try again.'
     : !correctNetwork
-    ? 'Please connect to Main, Rinkeby, or Kovan.'
+    ? `Please connect to ${allowedNetworkNames}.`
     : isBalanceInsufficient === true
     ? 'You do not have enough OCEAN in your wallet to purchase this asset.'
     : 'Something went wrong.'

src/utils/wallet.ts

@@ -1,4 +1,5 @@
 import { OceanProviderValue } from '@oceanprotocol/react'
+import atlas from '@ethereum-navigator/atlas'
 import { networks, infuraProjectId } from '../../app.config'
 
 const web3ModalTheme = {
@@ -39,3 +40,16 @@ export function accountTruncate(account: string): string {
   const truncated = account.replace(middle, '…')
   return truncated
 }
+
+export function getNetworkName(chainId: number): string {
+  switch (chainId) {
+    case 1:
+      return 'Main'
+    case 4:
+      return 'Rinkeby'
+    case 42:
+      return 'Kovan'
+    default:
+      return 'Unknown'
+  }
+}