diff options
| -rw-r--r-- | packages/instant/src/components/sliding_error.tsx | 16 | ||||
| -rw-r--r-- | packages/instant/src/components/zero_ex_instant.tsx | 19 | ||||
| -rw-r--r-- | packages/instant/src/util/error.ts | 4 |
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...', |