Unsupported Network Tooltip (#1331)

* Moving isSupportedOceanNetwork to Web3 context

* Removing page title and replacing it with a warning message

* Creating Error state in title for the wrong network

* Creating UnsupportedNetwrok component

* Adding different networks into tooltip

* Adding button + styling

* Adding change netwrok function

* Adding Change Network tooltip to submit page

* Reducing code duplication

* Removing unnecessary changes

* Fixing logic for checking which chainIds are supported

* Simplifying isSupportedOceanNetwork check logic

* Default to not showing unsupported network message when no wallet is connected

* Always showing available networks in tooltip

* Adding info icon to action button

* adding padding to AvailableNetworks component

* Changing label to list components

* Changing brand-white to currentColor

* Revert "Changing brand-white to currentColor"

This reverts commit 278f0d4ab9.

* CHanging --brand-white to currentColor

* Info Icon in currentColor

* Changing NetworkOptions component name to Network

* Simplifying tooltip logic in title

* Removing unused classname

* Fixing repeating <ul> issue

* Removing unused class

* Refactoring AvailableNetworks component into src/components/Publish

* Moving tooltip message into content/publish/index.json

* Reducing duplication in css

* Removing duplication of infoIcon css styles

* Tidying up logic in setIsSupportedOceanNetwork useEffect

* Updating setIsSupportedOceanNetwork effect dependancies

* merge fixes for new MarketMetadata context

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>

content/publish/index.json

@@ -2,5 +2,5 @@
   "title": "Publish",
   "description": "Highlight the important features of your data set or algorithm to make it more discoverable and catch the interest of data consumers.",
   "warning": "Publishing into a test network first is strongly recommended. Please familiarize yourself with [the market](https://oceanprotocol.com/technology/marketplaces), [the risks](https://blog.oceanprotocol.com/on-staking-on-data-in-ocean-market-3d8e09eb0a13), and the [Terms of Use](/terms).",
-  "tooltipNetwork": "Assets are published into the network your wallet is connected to. Switch your wallet's network to publish into another one."
+  "tooltipAvailableNetworks": "Assets are published to the network your wallet is connected to. These networks are currently supported:"
 }

src/@context/Web3.tsx

@@ -21,6 +21,7 @@ import useNetworkMetadata, {
   getNetworkType,
   NetworkType
 } from '../@hooks/useNetworkMetadata'
+import { useMarketMetadata } from './MarketMetadata'
 
 interface Web3ProviderValue {
   web3: Web3
@@ -37,6 +38,7 @@ interface Web3ProviderValue {
   block: number
   isTestnet: boolean
   web3Loading: boolean
+  isSupportedOceanNetwork: boolean
   connect: () => Promise<void>
   logout: () => Promise<void>
 }
@@ -88,6 +90,7 @@ const Web3Context = createContext({} as Web3ProviderValue)
 
 function Web3Provider({ children }: { children: ReactNode }): ReactElement {
   const { networksList } = useNetworkMetadata()
+  const { appConfig } = useMarketMetadata()
 
   const [web3, setWeb3] = useState<Web3>()
   const [web3Provider, setWeb3Provider] = useState<any>()
@@ -106,6 +109,7 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
     eth: '0',
     ocean: '0'
   })
+  const [isSupportedOceanNetwork, setIsSupportedOceanNetwork] = useState(true)
 
   // -----------------------------------
   // Helper: connect to web3
@@ -304,6 +308,17 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
     }
     await web3Modal.clearCachedProvider()
   }
+  // -----------------------------------
+  // Get valid Networks and set isSupportedOceanNetwork
+  // -----------------------------------
+
+  useEffect(() => {
+    if (appConfig.chainIdsSupported.includes(networkId)) {
+      setIsSupportedOceanNetwork(true)
+    } else {
+      setIsSupportedOceanNetwork(false)
+    }
+  }, [networkId, appConfig.chainIdsSupported])
 
   // -----------------------------------
   // Handle change events
@@ -358,6 +373,7 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
         block,
         isTestnet,
         web3Loading,
+        isSupportedOceanNetwork,
         connect,
         logout
       }}

src/components/Header/Wallet/Network.tsx

@@ -1,27 +1,13 @@
-import React, { useState, useEffect, ReactElement } from 'react'
+import React, { ReactElement } from 'react'
 import Status from '@shared/atoms/Status'
 import Badge from '@shared/atoms/Badge'
 import Tooltip from '@shared/atoms/Tooltip'
 import { useWeb3 } from '@context/Web3'
 import NetworkName from '@shared/NetworkName'
 import styles from './Network.module.css'
-import { getOceanConfig } from '@utils/ocean'
 
 export default function Network(): ReactElement {
-  const { networkId, isTestnet } = useWeb3()
+  const { networkId, isTestnet, isSupportedOceanNetwork } = useWeb3()
-
-  const [isSupportedOceanNetwork, setIsSupportedOceanNetwork] =
-    useState<boolean>()
-
-  useEffect(() => {
-    // take network from user when present
-    const network = networkId || 1
-
-    // Check networkId against ocean.js ConfigHelper configs
-    // to figure out if network is supported.
-    const isSupportedOceanNetwork = Boolean(getOceanConfig(network))
-    setIsSupportedOceanNetwork(isSupportedOceanNetwork)
-  }, [networkId])
 
   return networkId ? (
     <div className={styles.network}>

src/components/Publish/Actions/index.module.css

@@ -8,3 +8,16 @@
 .actions button {
   margin: 0 calc(var(--spacer) / 2);
 }
+
+.infoIcon {
+  width: 0.85em;
+  height: 0.85em;
+  display: inline-block;
+  margin-bottom: -0.1em;
+  margin-left: calc(var(--spacer) / 6);
+  fill: currentColor;
+}
+.infoButton {
+  cursor: help !important;
+  pointer-events: all !important;
+}

src/components/Publish/Actions/index.tsx

@@ -5,7 +5,10 @@ import { FormikContextType, useFormikContext } from 'formik'
 import { FormPublishData } from '../_types'
 import { wizardSteps } from '../_constants'
 import SuccessConfetti from '@shared/SuccessConfetti'
-import { useWeb3 } from '../../../@context/Web3'
+import { useWeb3 } from '@context/Web3'
+import Tooltip from '@shared/atoms/Tooltip'
+import AvailableNetworks from 'src/components/Publish/AvailableNetworks'
+import Info from '@images/info.svg'
 
 export default function Actions({
   scrollToRef,
@@ -14,6 +17,7 @@ export default function Actions({
   scrollToRef: RefObject<any>
   did: string
 }): ReactElement {
+  const { isSupportedOceanNetwork } = useWeb3()
   const {
     values,
     errors,
@@ -78,6 +82,17 @@ export default function Actions({
             <Button type="submit" style="primary" onClick={handleActivation}>
               Connect Wallet
             </Button>
+          ) : !isSupportedOceanNetwork ? (
+            <Tooltip content={<AvailableNetworks />}>
+              <Button
+                type="submit"
+                style="primary"
+                disabled
+                className={styles.infoButton}
+              >
+                Unsupported Network <Info className={styles.infoIcon} />
+              </Button>
+            </Tooltip>
           ) : (
             <Button
               type="submit"

src/components/Publish/AvailableNetworks/Network.module.css

@@ -0,0 +1,8 @@
+.button {
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-base);
+  line-height: var(--line-height);
+  color: var(--color-secondary);
+  font-weight: var(--font-weight-base);
+  font-size: var(--font-size-small);
+}

src/components/Publish/AvailableNetworks/Network.tsx

@@ -0,0 +1,31 @@
+import React, { ReactElement } from 'react'
+import NetworkName from '@shared/NetworkName'
+import styles from './Network.module.css'
+import Button from '@shared/atoms/Button'
+import useNetworkMetadata from '@hooks/useNetworkMetadata'
+import { addCustomNetwork } from '@utils/web3'
+import { useWeb3 } from '@context/Web3'
+
+export default function Network({
+  chainId
+}: {
+  chainId: number
+}): ReactElement {
+  const { networksList } = useNetworkMetadata()
+  const { web3Provider } = useWeb3()
+
+  function changeNetwork(chainId: number) {
+    const networkNode = networksList.find((data) => data.chainId === chainId)
+    addCustomNetwork(web3Provider, networkNode)
+  }
+
+  return (
+    <Button
+      style="text"
+      className={styles.button}
+      onClick={() => changeNetwork(chainId)}
+    >
+      <NetworkName key={chainId} networkId={chainId} />
+    </Button>
+  )
+}

src/components/Publish/AvailableNetworks/index.module.css

@@ -0,0 +1,12 @@
+.networks {
+  column-count: 2;
+}
+.title {
+  font-size: var(--font-size-small);
+  margin-bottom: calc(var(--spacer) / 6);
+  margin-top: calc(var(--spacer) / 2);
+  color: var(--color-secondary);
+}
+.content {
+  padding: calc(var(--spacer) / 2);
+}

src/components/Publish/AvailableNetworks/index.tsx

@@ -0,0 +1,53 @@
+import React, { ReactElement } from 'react'
+import styles from './index.module.css'
+import Network from './Network'
+import useNetworkMetadata, {
+  filterNetworksByType
+} from '@hooks/useNetworkMetadata'
+import content from '../../../../content/publish/index.json'
+import { useMarketMetadata } from '@context/MarketMetadata'
+
+export default function AvailableNetworks(): ReactElement {
+  const { networksList } = useNetworkMetadata()
+  const { appConfig } = useMarketMetadata()
+
+  const networksMain = filterNetworksByType(
+    'mainnet',
+    appConfig.chainIdsSupported,
+    networksList
+  )
+
+  const networksTest = filterNetworksByType(
+    'testnet',
+    appConfig.chainIdsSupported,
+    networksList
+  )
+  const networkCategories = [
+    { title: 'Main', data: networksMain },
+    { title: 'Test', data: networksTest }
+  ]
+
+  const networkList = (networks: number[]) =>
+    networks.map((chainId) => (
+      <li key={chainId}>
+        <Network chainId={chainId} />
+      </li>
+    ))
+
+  return (
+    <div className={styles.content}>
+      {content.tooltipAvailableNetworks}
+      {networkCategories.map(
+        (networkCategory) =>
+          networkCategory.data.length > 0 && (
+            <>
+              <h4 className={styles.title}>{networkCategory.title}</h4>
+              <ul className={styles.networks}>
+                {networkList(networkCategory.data)}
+              </ul>
+            </>
+          )
+      )}
+    </div>
+  )
+}

src/components/Publish/Title/index.module.css

@@ -2,15 +2,21 @@
   color: var(--font-color-heading);
   margin-left: calc(var(--spacer) / 3);
 }
-
 .network svg {
   width: 1em;
   height: 1em;
   margin-top: -0.25em;
   fill: currentColor;
 }
-
 .tooltip {
   width: 0.5em;
   height: 0.5em;
+  fill: var(--color-secondary);
+}
+.error {
+  fill: var(--brand-alert-red);
+  color: var(--brand-alert-red);
+}
+.infoIcon {
+  composes: infoIcon from '../Actions/index.module.css';
 }

src/components/Publish/Title/index.tsx

@@ -3,22 +3,40 @@ import NetworkName from '@shared/NetworkName'
 import Tooltip from '@shared/atoms/Tooltip'
 import styles from './index.module.css'
 import content from '../../../../content/publish/index.json'
+import { useWeb3 } from '@context/Web3'
+import Info from '@images/info.svg'
+import AvailableNetworks from 'src/components/Publish/AvailableNetworks'
 
 export default function Title({
   networkId
 }: {
   networkId: number
 }): ReactElement {
+  const { isSupportedOceanNetwork, accountId } = useWeb3()
   return (
     <>
       {content.title}{' '}
       {networkId && (
         <>
-          into <NetworkName networkId={networkId} className={styles.network} />
+          into
-          <Tooltip
+          <NetworkName
-            content={content.tooltipNetwork}
+            networkId={networkId}
-            className={styles.tooltip}
+            className={
+              isSupportedOceanNetwork || !accountId
+                ? styles.network
+                : `${styles.network} ${styles.error}`
+            }
           />
+          <Tooltip
+            content={<AvailableNetworks />}
+            className={
+              isSupportedOceanNetwork || !accountId
+                ? styles.tooltip
+                : `${styles.tooltip} ${styles.error}`
+            }
+          >
+            <Info className={styles.infoIcon} />
+          </Tooltip>
         </>
       )}
     </>

src/pages/_app.tsx

@@ -16,9 +16,9 @@ import MarketMetadataProvider from '@context/MarketMetadata'
 function MyApp({ Component, pageProps }: AppProps): ReactElement {
   Decimal.set({ rounding: 1 })
   return (
+    <MarketMetadataProvider>
       <Web3Provider>
         <UrqlProvider>
-        <MarketMetadataProvider>
           <UserPreferencesProvider>
             <PricesProvider>
               <ConsentProvider>
@@ -28,9 +28,9 @@ function MyApp({ Component, pageProps }: AppProps): ReactElement {
               </ConsentProvider>
             </PricesProvider>
           </UserPreferencesProvider>
-        </MarketMetadataProvider>
         </UrqlProvider>
       </Web3Provider>
+    </MarketMetadataProvider>
   )
 }