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) => (
+
-
- Supported Networks:
+ You are currently on an unsupported network. To proceed with publishing,
+ please switch to one of our supported networks:
+ {networksMain.length > 0 && (
+ <>
+