Add network alert to notify user on wrong network

src/common/assets/images/network.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 3.5C13.5 4.41858 13.146 5.25464 12.5671 5.87903L15.6541 11.1029C15.925 11.0356 16.2083 11 16.5 11C18.4331 11 20 12.567 20 14.5C20 16.433 18.4331 18 16.5 18C14.9143 18 13.5752 16.9457 13.145 15.5H6.85498C6.4248 16.9457 5.08569 18 3.5 18C1.56689 18 0 16.433 0 14.5C0 12.567 1.56689 11 3.5 11C3.79175 11 4.0752 11.0356 4.34595 11.1029L7.43286 5.87903C6.854 5.25464 6.5 4.41858 6.5 3.5C6.5 1.56702 8.06689 0 10 0C11.9331 0 13.5 1.56702 13.5 3.5ZM11.5 3.5C11.5 4.32837 10.8284 5 10 5C9.17163 5 8.5 4.32837 8.5 3.5C8.5 2.67163 9.17163 2 10 2C10.8284 2 11.5 2.67163 11.5 3.5ZM6.06714 12.1211C6.427 12.5093 6.69995 12.9792 6.85498 13.5H13.145C13.3 12.9792 13.573 12.5093 13.9329 12.1211L10.8459 6.89709C10.5752 6.96436 10.2917 7 10 7C9.70825 7 9.4248 6.96436 9.15405 6.89709L6.06714 12.1211ZM16.5 13C15.6716 13 15 13.6716 15 14.5C15 15.3284 15.6716 16 16.5 16C17.3284 16 18 15.3284 18 14.5C18 13.6716 17.3284 13 16.5 13ZM5 14.5C5 15.3284 4.32837 16 3.5 16C2.67163 16 2 15.3284 2 14.5C2 13.6716 2.67163 13 3.5 13C4.32837 13 5 13.6716 5 14.5Z" fill="white"/>
+</svg>

src/common/blockchain/utils.js

@@ -36,3 +36,12 @@ export default {
     return TRANSACTION_STATUSES.Pending
   },
 }
+
+const checkNetwork = async () => {
+  web3.eth.net.getId().then(networkId => {
+    console.log(networkId)
+    return networkId === 1 ? 'true' : 'false'
+  })
+}
+
+export { checkNetwork }

src/common/components/Network/Network.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import styles from './Network.module.scss'
+import networkIcon from '../../assets/images/network.svg'
+
+const Network = props => {
+  return (
+    <div className={styles.networkAlert}>
+      <div className={styles.networkIcon}>
+        <img src={networkIcon} alt="Network Alert Icon" />
+      </div>
+      <div className={styles.networkInfo}>
+        <div className={styles.network}>You're on a test network.</div>
+        <div className={styles.switch}>Switch your network to Mainnet.</div>
+      </div>
+    </div>
+  )
+}
+
+export default Network

src/common/components/Network/Network.module.scss

@@ -0,0 +1,37 @@
+@import '../../styles/variables.scss';
+
+.networkAlert {
+  background: #eef2f5;
+  box-shadow: inset 0px 1px 0px #eef2f5;
+  display: flex;
+  padding: calculateRem(12) calculateRem(16);
+  margin-bottom: calculateRem(12);
+}
+
+.networkIcon {
+  background: #ff2d55;
+  border-radius: calculateRem(50);
+  width: calculateRem(40);
+  height: calculateRem(40);
+  display: flex;
+  justify-content: center;
+}
+
+.networkInfo {
+  text-align: justify;
+  align-self: center;
+  display: flex;
+  font-size: calculateRem(15);
+  font-family: 'Inter';
+  flex-direction: column;
+  margin-left: calculateRem(16);
+}
+
+.network {
+  font-weight: 500;
+  color: #000000;
+}
+
+.switch {
+  color: #939ba1;
+}

src/common/components/Network/index.js

@@ -0,0 +1,3 @@
+import Network from './Network'
+
+export default Network

src/modules/Submit/Submit.jsx

@@ -3,9 +3,11 @@ import PropTypes from 'prop-types'
 import ReactImageFallback from 'react-image-fallback'
 import styles from './Submit.module.scss'
 import Modal from '../../common/components/Modal'
+import Network from '../../common/components/Network'
 import CategorySelector from '../CategorySelector/CategorySelector.picker'
 import Slider from '../../common/components/Slider/Slider'
 import CategoriesUtils from '../Categories/Categories.utils'
+import { checkNetwork } from '../../common/blockchain/utils'
 import Categories from '../../common/utils/categories'
 import icon from '../../common/assets/images/icon.svg'
 import sntIcon from '../../common/assets/images/SNT.svg'
@@ -480,6 +482,7 @@ class Submit extends React.Component {
                 earn back through votes, or withdraw, the majority of this SNT
                 at any time.
               </p>
+              {checkNetwork() && <Network />}
               <button type="submit" onClick={this.onSubmit}>
                 {!sntValue || sntValue === '0'
                   ? 'Publish'