diff --git a/src/common/assets/images/network.svg b/src/common/assets/images/network.svg new file mode 100644 index 0000000..f6fa188 --- /dev/null +++ b/src/common/assets/images/network.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/common/blockchain/utils.js b/src/common/blockchain/utils.js index 9416ddf..3351bfd 100644 --- a/src/common/blockchain/utils.js +++ b/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 } diff --git a/src/common/components/DappListItem/DappListItem.jsx b/src/common/components/DappListItem/DappListItem.jsx index 7cab2da..bc90a4d 100644 --- a/src/common/components/DappListItem/DappListItem.jsx +++ b/src/common/components/DappListItem/DappListItem.jsx @@ -36,7 +36,9 @@ const DappListItem = props => { isRanked ? styles.rankedListItem : styles.listItem } ${visible ? '' : styles.transparent}`} > - {isRanked &&
{position}
} + {isRanked && ( +
{position}
+ )}
onToggleProfileModal(dapp.id, name)} diff --git a/src/common/components/Modal/Modal.module.scss b/src/common/components/Modal/Modal.module.scss index 8dc115f..d4b2624 100644 --- a/src/common/components/Modal/Modal.module.scss +++ b/src/common/components/Modal/Modal.module.scss @@ -45,7 +45,9 @@ background: #939ba1; cursor: pointer; transform: rotate(45deg); - z-index: 99; + z-index: 999; + position: sticky; + margin-left: 90%; } } diff --git a/src/common/components/Network/Network.jsx b/src/common/components/Network/Network.jsx new file mode 100644 index 0000000..5d4685f --- /dev/null +++ b/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 ( +
+
+ Network Alert Icon +
+
+
You're on a test network.
+
Switch your network to Mainnet.
+
+
+ ) +} + +export default Network diff --git a/src/common/components/Network/Network.module.scss b/src/common/components/Network/Network.module.scss new file mode 100644 index 0000000..c66d4df --- /dev/null +++ b/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; +} diff --git a/src/common/components/Network/index.js b/src/common/components/Network/index.js new file mode 100644 index 0000000..a3d771b --- /dev/null +++ b/src/common/components/Network/index.js @@ -0,0 +1,3 @@ +import Network from './Network' + +export default Network diff --git a/src/modules/HighestRanked/HighestRanked.module.scss b/src/modules/HighestRanked/HighestRanked.module.scss index ee2bcda..3653bb6 100644 --- a/src/modules/HighestRanked/HighestRanked.module.scss +++ b/src/modules/HighestRanked/HighestRanked.module.scss @@ -18,18 +18,6 @@ @media (min-width: $desktop) { // grid-auto-flow: row; - grid-template-rows: repeat(4, 1fr); - grid-template-columns: unset; - overflow-x: hidden; - } - - @media (min-width: 970px) { - grid-template-columns: unset; - grid-template-rows: repeat(4, 1fr); - } - - @media (min-width: 1300px) { - grid-template-columns: unset; - grid-template-rows: repeat(4, 1fr); + grid-template-columns: repeat(3, 1fr); } } diff --git a/src/modules/HowToSubmit/HowToSubmit.module.scss b/src/modules/HowToSubmit/HowToSubmit.module.scss index 6d25187..88462a6 100644 --- a/src/modules/HowToSubmit/HowToSubmit.module.scss +++ b/src/modules/HowToSubmit/HowToSubmit.module.scss @@ -17,7 +17,8 @@ padding: calculateRem(10) 0; position: sticky; top: 0; - background: #fff; + z-index: 99; + background: #ffffff; border-bottom: 1px solid #f7f7f7; } @@ -79,6 +80,9 @@ a { height: 64px; display: flex; align-items: center; + position: sticky; + bottom: 0; + background: #ffffff; justify-content: center; border-top: 1px solid #f7f7f7; diff --git a/src/modules/RecentlyAdded/RecentlyAdded.module.scss b/src/modules/RecentlyAdded/RecentlyAdded.module.scss index 8b19c17..fb87584 100644 --- a/src/modules/RecentlyAdded/RecentlyAdded.module.scss +++ b/src/modules/RecentlyAdded/RecentlyAdded.module.scss @@ -10,7 +10,7 @@ .grid { display: grid; grid-auto-flow: column; - grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); grid-gap: calculateRem(20); overflow-x: scroll; overflow-y: hidden; @@ -19,18 +19,6 @@ @media (min-width: $desktop) { // grid-auto-flow: row; - grid-template-rows: repeat(3, 1fr); - grid-template-columns: unset; - overflow-x: hidden; - } - - @media (min-width: 970px) { - grid-template-columns: unset; - grid-template-rows: repeat(3, 1fr); - } - - @media (min-width: 1300px) { - grid-template-columns: unset; - grid-template-rows: repeat(3, 1fr); + grid-template-columns: repeat(3, 1fr); } } diff --git a/src/modules/Submit/Submit.jsx b/src/modules/Submit/Submit.jsx index 3c74f1f..dd953f1 100644 --- a/src/modules/Submit/Submit.jsx +++ b/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.

+ {checkNetwork() && }