Adding different networks into tooltip

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

@@ -0,0 +1,3 @@
+.networkColumns {
+  column-count: 2;
+}

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

@@ -1,3 +1,12 @@
 .alert {
   margin-bottom: 2rem;
 }
+.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);
+}

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

@@ -1,17 +1,52 @@
 import React, { ReactElement } from 'react'
 import styles from './index.module.css'
+import NetworkOptions from './networkOptions'
+import { useSiteMetadata } from '@hooks/useSiteMetadata'
+import useNetworkMetadata, {
+  filterNetworksByType
+} from '@hooks/useNetworkMetadata'
 
 export default function UnsuportedNetwork(): ReactElement {
+  const { networksList } = useNetworkMetadata()
+  const { appConfig } = useSiteMetadata()
+
   function changeNetwork() {
     console.log('Change Network')
   }
+
+  const networksMain = filterNetworksByType(
+    'mainnet',
+    appConfig.chainIdsSupported,
+    networksList
+  )
+
+  const networksTest = filterNetworksByType(
+    'testnet',
+    appConfig.chainIdsSupported,
+    networksList
+  )
+
+  const content = (networks: number[]) =>
+    networks.map((chainId) => (
+      <NetworkOptions key={chainId} chainId={chainId} />
+    ))
+
   return (
     <>
-      You are currently on an unsupported network. Please switch to a supported
-      network to proceed with publishing.
-      <br />
-      <br />
-      <b>Supported Networks:</b>
+      You are currently on an unsupported network. To proceed with publishing,
+      please switch to one of our supported networks:
+      {networksMain.length > 0 && (
+        <>
+          <h4 className={styles.title}>Main</h4>
+          <div className={styles.networks}>{content(networksMain)}</div>
+        </>
+      )}
+      {networksTest.length > 0 && (
+        <>
+          <h4 className={styles.title}>Test</h4>
+          <div className={styles.networks}>{content(networksTest)}</div>
+        </>
+      )}
     </>
   )
 }

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

@@ -0,0 +1,33 @@
+import React, { ChangeEvent, ReactElement } from 'react'
+import { useUserPreferences } from '@context/UserPreferences'
+import { removeItemFromArray } from '@utils/index'
+import NetworkName from '@shared/NetworkName'
+import styles from './NetworkOptions.module.css'
+
+export default function NetworkOptions({
+  chainId
+}: {
+  chainId: number
+}): ReactElement {
+  const { chainIds, setChainIds } = useUserPreferences()
+
+  function handleNetworkChanged(e: ChangeEvent<HTMLInputElement>) {
+    const { value } = e.target
+
+    // storing all chainId everywhere as a number so convert from here
+    const valueAsNumber = Number(value)
+
+    const newChainIds = chainIds.includes(valueAsNumber)
+      ? [...removeItemFromArray(chainIds, valueAsNumber)]
+      : [...chainIds, valueAsNumber]
+    setChainIds(newChainIds)
+  }
+
+  return (
+    <div key={chainId}>
+      <label className={styles.radioLabel} htmlFor={`opt-${chainId}`}>
+        <NetworkName key={chainId} networkId={chainId} />
+      </label>
+    </div>
+  )
+}