Removing page title and replacing it with a warning message

src/components/@shared/UnsupportedNetwork/index.module.css

@@ -0,0 +1,3 @@
+.alert {
+  margin-bottom: 2rem;
+}

src/components/@shared/UnsupportedNetwork/index.tsx

@@ -1,10 +1,22 @@
 import React, { ReactElement } from 'react'
 import Alert from '@shared/atoms/Alert'
+import styles from './index.module.css'
 
-export default function PagePublish(): ReactElement {
+export default function UnsuportedNetwork(): ReactElement {
+  function changeNetwork() {
+    console.log('Change Network')
+  }
   return (
-    <>
-      <Alert text="You are on an unsuported network" state="error" />
-    </>
+    <Alert
+      title="You are on an unsupported network"
+      text="Please switch to a supported network"
+      state="error"
+      className={styles.alert}
+      action={{
+        name: 'Change Network',
+        style: 'primary',
+        handleAction: () => changeNetwork()
+      }}
+    />
   )
 }

src/components/Header/Wallet/Network.tsx

@@ -1,4 +1,4 @@
-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'

src/components/Publish/index.tsx

@@ -25,6 +25,7 @@ import { getOceanConfig } from '@utils/ocean'
 import { validationSchema } from './_validation'
 import { useAbortController } from '@hooks/useAbortController'
 import { setNFTMetadataAndTokenURI } from '@utils/nft'
+import UnsupportedNetwork from '@shared/UnsupportedNetwork'
 
 // TODO: restore FormikPersist, add back clear form action
 const formName = 'ocean-publish-form'
@@ -35,7 +36,7 @@ export default function PublishPage({
   content: { title: string; description: string; warning: string }
 }): ReactElement {
   const { debug } = useUserPreferences()
-  const { accountId, web3, chainId } = useWeb3()
+  const { accountId, web3, chainId, isSupportedOceanNetwork } = useWeb3()
   const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId)
   const scrollToRef = useRef()
   const nftFactory = useNftFactory()
@@ -283,10 +284,14 @@ export default function PublishPage({
     >
       {({ values }) => (
         <>
-          <PageHeader
-            title={<Title networkId={values.user.chainId} />}
-            description={content.description}
-          />
+          {isSupportedOceanNetwork ? (
+            <PageHeader
+              title={<Title networkId={values.user.chainId} />}
+              description={content.description}
+            />
+          ) : (
+            <UnsupportedNetwork />
+          )}
           <Form className={styles.form} ref={scrollToRef}>
             <Navigation />
             <Steps feedback={feedback} />