feat: flash an error if the wrong network is detected

3 files changed, 31 insertions, 8 deletions

diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index 3865a8797..2b55597ec 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -4,7 +4,7 @@ import { ColorOption } from '../style/theme';
 
 import { SlideDownAnimation, SlideUpAnimation } from './animations/slide_animations';
 
-import { Container, Text } from './ui';
+import { Container, Flex, Text } from './ui';
 
 export interface ErrorProps {
     icon: string;
@@ -20,12 +20,14 @@ export const Error: React.StatelessComponent<ErrorProps> = props => (
         borderRadius="6px"
         marginBottom="10px"
     >
-        <Container marginRight="5px" display="inline" top="3px" position="relative">
-            <Text fontSize="20px">{props.icon}</Text>
-        </Container>
-        <Text fontWeight="500" fontColor={ColorOption.darkOrange}>
-            {props.message}
-        </Text>
+        <Flex>
+            <Container marginRight="5px" display="inline" top="3px" position="relative">
+                <Text fontSize="20px">{props.icon}</Text>
+            </Container>
+            <Text fontWeight="500" fontColor={ColorOption.darkOrange}>
+                {props.message}
+            </Text>
+        </Flex>
     </Container>
 );
 
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 0fe494726..63d944654 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -11,7 +11,9 @@ import { store, Store } from '../redux/store';
 import { fonts } from '../style/fonts';
 import { AssetMetaData, Network } from '../types';
 import { assetUtils } from '../util/asset';
+import { errorUtil } from '../util/error';
 import { getProvider } from '../util/provider';
+import { web3Wrapper } from '../util/web3_wrapper';
 
 import { ZeroExInstantContainer } from './zero_ex_instant_container';
 
@@ -69,9 +71,15 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
     }
     constructor(props: ZeroExInstantProps) {
         super(props);
-        this._store = store.create(ZeroExInstant._mergeInitialStateWithProps(this.props, INITIAL_STATE));
+        const initialAppState = ZeroExInstant._mergeInitialStateWithProps(this.props, INITIAL_STATE);
+        this._store = store.create(initialAppState);
+    }
+
+    public componentDidMount(): void {
         // tslint:disable-next-line:no-floating-promises
         asyncData.fetchAndDispatchToStore(this._store);
+        // tslint:disable-next-line:no-floating-promises
+        this._flashErrorIfWrongNetwork(this._store.getState().network);
     }
 
     public render(): React.ReactNode {
@@ -83,4 +91,13 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
             </Provider>
         );
     }
+
+    private readonly _flashErrorIfWrongNetwork = async (network: Network): Promise<void> => {
+        const msToShowError = 30000; // 30 seconds
+        const networkOfProvider = await web3Wrapper.getNetworkIdAsync();
+        if (network !== networkOfProvider) {
+            const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`;
+            errorUtil.errorFlasher.flashNewError(this._store.dispatch, errorMessage, msToShowError);
+        }
+    };
 }
diff --git a/packages/instant/src/util/error.ts b/packages/instant/src/util/error.ts
index f5a3d2cb8..0868414f0 100644
--- a/packages/instant/src/util/error.ts
+++ b/packages/instant/src/util/error.ts
@@ -1,4 +1,5 @@
 import { AssetBuyerError } from '@0x/asset-buyer';
+import * as _ from 'lodash';
 import { Dispatch } from 'redux';
 
 import { Action, actions } from '../redux/actions';
@@ -55,6 +56,9 @@ export const errorUtil = {
         if (error instanceof Error) {
             bestMessage = humanReadableMessageForError(error, asset);
         }
+        if (_.isString(error)) {
+            bestMessage = error;
+        }
         return {
             icon: '😢',
             message: bestMessage || 'Something went wrong...',