Check connected eth network

client/src/components/App/App-container.jsx

@@ -17,6 +17,7 @@ export default class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      isConnectedToBloxberg: false,
       isUserLoading: true,
       isLoggedInWithFm: false,
       isLoggedInWithMetamask: false,
@@ -29,6 +30,9 @@ export default class App extends React.Component {
   componentDidMount() {
     // Check if Metamask is there.
     if (typeof window.ethereum !== 'undefined') {
+      // Check which network is connected.
+      let netwId = parseInt(window.ethereum.networkVersion);
+      this.checkConnectedNetwork(netwId);
       // TODO: Metamask does not recommend calling enable upon loading.
       window.ethereum.enable()
         .then(accounts => {
@@ -50,6 +54,11 @@ export default class App extends React.Component {
     }
     else { // Use fortmatic
       window.web3 = new Web3(fmPhantom.getProvider()); // Inject Fortmatic.
+      // Check if connected to bloxberg network.
+      window.web3.eth.net.getId((id) => {
+        this.checkConnectedNetwork(id);
+      });
+
       let token = localStorage.getItem('didToken');
       console.log(`Token: ${token}`);
       if (token) {
@@ -57,7 +66,7 @@ export default class App extends React.Component {
         this.getUserAddress().then(address => {
           console.log('User address is');
           console.log(address);
-        })
+        });
         this.setState({ isLoggedInWithFm: true });
         fmPhantom.user.getMetadata().then(metadata => {
           let addr = metadata.publicAddress;
@@ -144,6 +153,14 @@ export default class App extends React.Component {
     return getCurrentAccount();
   }
 
+  // Checks if the network id is of bloxberg's. Sets the state var isConnectedToBloxberg accordingly.
+  checkConnectedNetwork = (id) => {
+    console.log('Checking network id: ' + id);
+    id === 8995
+      ? this.setState({ isConnectedToBloxberg: true })
+      : this.setState({ isConnectedToBloxberg: false });
+  }
+
   render() {
     return (
       <AppView

client/src/components/App/App-view.jsx

@@ -12,11 +12,13 @@ import Register from '../Register';
 import SideBar from '../SideBar';
 import SingleReview from '../SingleReview';
 import TopBar from '../TopBar';
+import ConnectToBloxberg from './ConnectToBloxberg';
 // import InstallMetamask from './InstallMetamask';
 import LoginWithFortmatic from './LoginWithFortmatic';
 
 AppView.propTypes = {
   user: PropTypes.object,
+  isConnectedToBloxberg: PropTypes.bool.isRequired,
   isUserLoading: PropTypes.bool.isRequired,
   isNoUserFound: PropTypes.bool.isRequired,
   isLoggedInWithFm: PropTypes.bool.isRequired,
@@ -44,7 +46,7 @@ const SideBarWrapper = styled.div`
   `;
 
 export default function AppView(props) {
-  let AppContent;
+  let AppContent = <Loader />;
 
   // Show Fortmatic login if not logged in with fm or metamask.
   if (!props.isLoggedInWithFm && !props.isLoggedInWithMetamask)
@@ -52,6 +54,8 @@ export default function AppView(props) {
       handleLogin={props.handleLoginWithMagicLink}
       handleLogout={props.handleLogout}
     />;
+  else if (!props.isConnectedToBloxberg)
+    AppContent = (<ConnectToBloxberg />);
   else if (props.isUserLoading) // If loading user and reviews return the spinner
     AppContent = (<Loader />);
   else if (props.isNoUserFound) {

client/src/components/App/ConnectToBloxberg/ConnectToBloxberg-view.jsx

+import React from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`;
+
+const Text = styled.span`
+`;
+
+export default function ConnectToBloxberg() {
+
+  return (
+    <Wrapper>
+      <Text> Seems you are connected to another network. Please connect to bloxberg network. </Text>
+    </Wrapper>
+  );
+}
\ No newline at end of file

client/src/components/App/ConnectToBloxberg/index.js

+export { default } from './ConnectToBloxberg-view';
+