refactor network messaging

app.config.js

@@ -1,4 +1,8 @@
 module.exports = {
+  // The default network and its associated config the app should connect to
+  // on start. App will automatically switch network configs when user switches
+  // networks in their wallet.
+  // Ocean Protocol contracts are deployed for: 'mainnet', 'rinkeby', 'development'
   network: process.env.GATSBY_NETWORK || 'rinkeby',
   infuraProjectId: process.env.GATSBY_INFURA_PROJECT_ID || 'xxx',
   // The ETH address the marketplace fee will be sent to.

src/components/molecules/Wallet/Account.tsx

@@ -2,7 +2,7 @@ import { useOcean } from '@oceanprotocol/react'
 import { toDataUrl } from 'ethereum-blockies'
 import React, { FormEvent } from 'react'
 import { ReactComponent as Caret } from '../../../images/caret.svg'
-import { accountTruncate, isCorrectNetwork } from '../../../utils/wallet'
+import { accountTruncate } from '../../../utils/wallet'
 import Status from '../../atoms/Status'
 import styles from './Account.module.css'
 
@@ -24,7 +24,7 @@ const Blockies = ({ account }: { account: string | undefined }) => {
 // eslint-disable-next-line
 const Account = React.forwardRef((props, ref: any) => {
   const { accountId, status, connect, networkId } = useOcean()
-  const hasSuccess = status === 1 && isCorrectNetwork(networkId)
+  const hasSuccess = status === 1 && networkId === 1
 
   async function handleActivation(e: FormEvent<HTMLButtonElement>) {
     // prevent accidentially submitting a form the button might be in

src/components/molecules/Wallet/Details.module.css

@@ -1,5 +1,6 @@
 .details {
   padding: calc(var(--spacer) / 4);
+  min-width: 17rem;
 }
 
 .details > section[class*='feedback'] {

src/components/molecules/Wallet/Details.tsx

@@ -3,14 +3,13 @@ import Button from '../../atoms/Button'
 import styles from './Details.module.css'
 import { useOcean } from '@oceanprotocol/react'
 import Web3Feedback from './Feedback'
-import { getNetworkName } from '../../../utils/wallet'
 import { getInjectedProviderName } from 'web3modal'
 import Conversion from '../../atoms/Price/Conversion'
 import { formatCurrency } from '@coingecko/cryptoformat'
 import { useUserPreferences } from '../../../providers/UserPreferences'
 
 export default function Details(): ReactElement {
-  const { balance, connect, logout, networkId } = useOcean()
+  const { balance, connect, logout } = useOcean()
   const { locale } = useUserPreferences()
 
   return (
@@ -27,11 +26,7 @@ export default function Details(): ReactElement {
         ))}
 
         <li className={styles.actions}>
-          <span title="Connected provider">
-            {getInjectedProviderName()}
-            <br />
-            {getNetworkName(networkId)}
-          </span>
+          <span title="Connected provider">{getInjectedProviderName()}</span>
           <Button
             style="text"
             size="small"

src/components/molecules/Wallet/Feedback.tsx

@@ -2,8 +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'
-import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
+import { getNetworkName } from '../../../utils/wallet'
 
 export declare type Web3Error = {
   status: 'error' | 'warning' | 'success'
@@ -16,23 +15,18 @@ export default function Web3Feedback({
 }: {
   isBalanceSufficient?: boolean
 }): ReactElement {
-  const { appConfig } = useSiteMetadata()
   const { account, status, networkId } = useOcean()
   const isOceanConnectionError = status === -1
-  const correctNetwork = isCorrectNetwork(networkId)
+  const isMainnet = networkId === 1
   const showFeedback =
     !account ||
     isOceanConnectionError ||
-    !correctNetwork ||
+    !isMainnet ||
     isBalanceSufficient === false
 
-  const desiredNetworkName = appConfig.network.replace(/^\w/, (c: string) =>
-    c.toUpperCase()
-  )
-
   const state = !account
     ? 'error'
-    : !correctNetwork
+    : !isMainnet
     ? 'warning'
     : account && isBalanceSufficient
     ? 'success'
@@ -42,8 +36,8 @@ export default function Web3Feedback({
     ? 'No account connected'
     : isOceanConnectionError
     ? 'Error connecting to Ocean'
-    : !correctNetwork
-    ? 'Wrong Network'
+    : !isMainnet
+    ? getNetworkName(networkId)
     : account
     ? isBalanceSufficient === false
       ? 'Insufficient balance'
@@ -54,8 +48,8 @@ export default function Web3Feedback({
     ? 'Please connect your Web3 wallet.'
     : isOceanConnectionError
     ? 'Please try again.'
-    : !correctNetwork
-    ? `Please connect to ${desiredNetworkName}.`
+    : !isMainnet
+    ? undefined
     : isBalanceSufficient === false
     ? 'You do not have enough OCEAN in your wallet to purchase this asset.'
     : 'Something went wrong.'
@@ -64,7 +58,7 @@ export default function Web3Feedback({
     <section className={styles.feedback}>
       <Status state={state} aria-hidden />
       <h3 className={styles.title}>{title}</h3>
-      <p className={styles.error}>{message}</p>
+      {message && <p className={styles.error}>{message}</p>}
     </section>
   ) : null
 }

src/components/organisms/AssetActions/Consume.module.css

@@ -20,3 +20,7 @@
 .hasTokens {
   composes: hasTokens from './index.module.css';
 }
+
+.feedback {
+  width: 100%;
+}

src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.module.css

@@ -56,7 +56,5 @@
 .alertArea {
   margin-left: -2rem;
   margin-right: -2rem;
-  padding: var(--spacer) calc(var(--spacer) / 2);
-  padding-bottom: 0;
-  margin-top: var(--spacer);
+  padding: 0 calc(var(--spacer) / 2);
 }

src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx

@@ -1,8 +1,6 @@
 import { useOcean, usePricing } from '@oceanprotocol/react'
 import PriceUnit from '../../../../atoms/Price/PriceUnit'
 import React, { ReactElement, useEffect, useState } from 'react'
-import { useSiteMetadata } from '../../../../../hooks/useSiteMetadata'
-import { isCorrectNetwork } from '../../../../../utils/wallet'
 import Alert from '../../../../atoms/Alert'
 import FormHelp from '../../../../atoms/Input/Help'
 import Tooltip from '../../../../atoms/Tooltip'
@@ -22,7 +20,6 @@ export default function Dynamic({
   ddo: DDO
   content: any
 }): ReactElement {
-  const { appConfig } = useSiteMetadata()
   const { account, balance, networkId, refreshBalance } = useOcean()
   const { dtSymbol, dtName } = usePricing(ddo)
 
@@ -31,23 +28,17 @@ export default function Dynamic({
   const { price, weightOnDataToken } = values as PriceOptionsMarket
 
   const [error, setError] = useState<string>()
-  const correctNetwork = isCorrectNetwork(networkId)
-  const desiredNetworkName = appConfig.network.replace(/^\w/, (c: string) =>
-    c.toUpperCase()
-  )
 
   // Check: account, network & insufficient balance
   useEffect(() => {
     if (!account) {
       setError(`No account connected. Please connect your Web3 wallet.`)
-    } else if (!correctNetwork) {
-      setError(`Wrong Network. Please connect to ${desiredNetworkName}.`)
     } else if (Number(balance.ocean) < Number(price)) {
       setError(`Insufficient balance. You need at least ${price} OCEAN`)
     } else {
       setError(undefined)
     }
-  }, [price, networkId, account, balance, correctNetwork, desiredNetworkName])
+  }, [price, networkId, account, balance])
 
   // refetch balance periodically
   useEffect(() => {

src/utils/wallet.ts

@@ -50,7 +50,7 @@ export function getNetworkId(network: string): number {
   }
 }
 
-export function isCorrectNetwork(networkId: number): boolean {
+export function isDefaultNetwork(networkId: number): boolean {
   const configuredNetwork = getNetworkId(network)
   return configuredNetwork === networkId
 }