diff --git a/client/src/components/App/App-container.jsx b/client/src/components/App/App-container.jsx index 93ff8a431aa0057cf362c95bfc25af0affd60b3e..14e2bbbaaabf4ab451e78658ff8a7d57de2a6ef8 100644 --- a/client/src/components/App/App-container.jsx +++ b/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 diff --git a/client/src/components/App/App-view.jsx b/client/src/components/App/App-view.jsx index c978d12afcdc98de8a48373a73a912f0642e82c5..4edf86b879490ebfd6ebe724f762797df2f9034a 100644 --- a/client/src/components/App/App-view.jsx +++ b/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) { diff --git a/client/src/components/App/ConnectToBloxberg/ConnectToBloxberg-view.jsx b/client/src/components/App/ConnectToBloxberg/ConnectToBloxberg-view.jsx new file mode 100644 index 0000000000000000000000000000000000000000..1f6cc514825b4e69d6b8bed0a92694a6d06627b0 --- /dev/null +++ b/client/src/components/App/ConnectToBloxberg/ConnectToBloxberg-view.jsx @@ -0,0 +1,22 @@ +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 diff --git a/client/src/components/App/ConnectToBloxberg/index.js b/client/src/components/App/ConnectToBloxberg/index.js new file mode 100644 index 0000000000000000000000000000000000000000..181a9aa4b31e83509828b0cdcd600bead8434e8b --- /dev/null +++ b/client/src/components/App/ConnectToBloxberg/index.js @@ -0,0 +1,2 @@ +export { default } from './ConnectToBloxberg-view'; +