Creating UnsupportedNetwrok component

content/publish/index.json

@@ -2,6 +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.",
-  "wrongNetwork": "You are currently on an unsupported network. Please switch to a supported network to proceed with publishing"
+  "tooltipNetwork": "Assets are published into the network your wallet is connected to. Switch your wallet's network to publish into another one."
 }

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

@@ -1,5 +1,4 @@
 import React, { ReactElement } from 'react'
-import Alert from '@shared/atoms/Alert'
 import styles from './index.module.css'
 
 export default function UnsuportedNetwork(): ReactElement {
@@ -7,16 +6,12 @@ export default function UnsuportedNetwork(): ReactElement {
     console.log('Change Network')
   }
   return (
-    <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()
-      }}
-    />
+    <>
+      You are currently on an unsupported network. Please switch to a supported
+      network to proceed with publishing.
+      <br />
+      <br />
+      <b>Supported Networks:</b>
+    </>
   )
 }

src/components/Publish/Title/index.tsx

@@ -5,6 +5,7 @@ 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 UnsuportedNetwork from '@shared/UnsupportedNetwork'
 
 export default function Title({
   networkId
@@ -31,7 +32,7 @@ export default function Title({
             />
           ) : (
             <Tooltip
-              content={content.wrongNetwork}
+              content={<UnsuportedNetwork />}
               className={styles.errorTooltip}
             >
               <Info className={styles.errorIcon} />