From a3c0294ed544112fcd6128dece39dfb4974f604e Mon Sep 17 00:00:00 2001
From: Jamie Hewitt <jamie.hewitt15@gmail.com>
Date: Fri, 8 Apr 2022 11:40:50 +0300
Subject: [PATCH] Adding different networks into tooltip

---
 .../NetworkOptions.module.css                 |  3 ++
 .../UnsupportedNetwork/index.module.css       |  9 ++++
 .../@shared/UnsupportedNetwork/index.tsx      | 45 ++++++++++++++++---
 .../UnsupportedNetwork/networkOptions.tsx     | 33 ++++++++++++++
 4 files changed, 85 insertions(+), 5 deletions(-)
 create mode 100644 src/components/@shared/UnsupportedNetwork/NetworkOptions.module.css
 create mode 100644 src/components/@shared/UnsupportedNetwork/networkOptions.tsx

diff --git a/src/components/@shared/UnsupportedNetwork/NetworkOptions.module.css b/src/components/@shared/UnsupportedNetwork/NetworkOptions.module.css
new file mode 100644
index 000000000..7dac8f2a0
--- /dev/null
+++ b/src/components/@shared/UnsupportedNetwork/NetworkOptions.module.css
@@ -0,0 +1,3 @@
+.networkColumns {
+  column-count: 2;
+}
diff --git a/src/components/@shared/UnsupportedNetwork/index.module.css b/src/components/@shared/UnsupportedNetwork/index.module.css
index 19f8ffd57..2e5cc1c3e 100644
--- a/src/components/@shared/UnsupportedNetwork/index.module.css
+++ b/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);
+}
diff --git a/src/components/@shared/UnsupportedNetwork/index.tsx b/src/components/@shared/UnsupportedNetwork/index.tsx
index c22e2ac5d..37d8f2e1e 100644
--- a/src/components/@shared/UnsupportedNetwork/index.tsx
+++ b/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>
+        </>
+      )}
     </>
   )
 }
diff --git a/src/components/@shared/UnsupportedNetwork/networkOptions.tsx b/src/components/@shared/UnsupportedNetwork/networkOptions.tsx
new file mode 100644
index 000000000..2365f348f
--- /dev/null
+++ b/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>
+  )
+}