feat(instant): Handle AssetBuyer errors

5 files changed, 75 insertions, 117 deletions

diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx
new file mode 100644
index 000000000..1f10a2ed6
--- /dev/null
+++ b/packages/instant/src/components/animations/slide_animations.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+import { keyframes, styled } from '../../style/theme';
+
+const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes`
+    from {
+        position: relative;
+        top: ${fromY};
+    }
+
+    to {
+        position: relative;
+        top: ${toY};
+    }
+`;
+
+export interface SlideAnimationProps {
+    keyframes: string;
+    animationType: string;
+    animationDirection?: string;
+}
+
+export const SlideAnimation =
+    styled.div <
+    SlideAnimationProps >
+    `
+    animation-name: ${props => props.keyframes};
+    animation-duration: 0.3s;
+    animation-timing-function: ${props => props.animationType};
+    animation-delay: 0s;
+    animation-iteration-count: 1;
+    animation-fill-mode: ${props => props.animationDirection || 'none'};
+    position: relative;
+`;
+
+export interface SlideAnimationComponentProps {
+    downY: string;
+}
+
+export const SlideUpAnimation: React.StatelessComponent<SlideAnimationComponentProps> = props => (
+    <SlideAnimation animationType="ease-in" keyframes={slideKeyframeGenerator(props.downY, '0px')}>
+        {props.children}
+    </SlideAnimation>
+);
+
+export const SlideDownAnimation: React.StatelessComponent<SlideAnimationComponentProps> = props => (
+    <SlideAnimation
+        animationDirection="forwards"
+        animationType="cubic-bezier(0.25, 0.1, 0.25, 1)"
+        keyframes={slideKeyframeGenerator('0px', props.downY)}
+    >
+        {props.children}
+    </SlideAnimation>
+);
diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
deleted file mode 100644
index 5fa0b0eda..000000000
--- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import * as React from 'react';
-
-import { keyframes, styled } from '../../style/theme';
-
-const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes`
-    from {
-        position: relative;
-        top: ${fromY};
-    }
-
-    to {
-        position: relative;
-        top: ${toY};
-    }
-`;
-
-export interface SlideAnimationProps {
-    keyframes: string;
-    animationType: string;
-    animationDirection?: string;
-}
-export const SlideAnimation =
-    styled.div <
-    SlideAnimationProps >
-    `
-    animation-name: ${props => props.keyframes};
-    animation-duration: 0.3s;
-    animation-timing-function: ${props => props.animationType};
-    animation-delay: 0s;
-    animation-iteration-count: 1;
-    animation-fill-mode: ${props => props.animationDirection || 'none'};
-    position: relative;
-`;
-
-export interface SlideAnimationComponentProps {
-    downY: string;
-}
-
-export const SlideUpAnimationComponent: React.StatelessComponent<SlideAnimationComponentProps> = props => (
-    <SlideAnimation animationType="ease-in" keyframes={slideKeyframeGenerator(props.downY, '0px')}>
-        {props.children}
-    </SlideAnimation>
-);
-
-export const SlideDownAnimationComponent: React.StatelessComponent<SlideAnimationComponentProps> = props => (
-    <SlideAnimation
-        animationDirection="forwards"
-        animationType="cubic-bezier(0.25, 0.1, 0.25, 1)"
-        keyframes={slideKeyframeGenerator('0px', props.downY)}
-    >
-        {props.children}
-    </SlideAnimation>
-);
-
-export interface SlideUpAndDownAnimationProps extends SlideAnimationComponentProps {
-    delayMs: number;
-}
-
-enum SlideState {
-    Up = 'up',
-    Down = 'down',
-}
-interface SlideUpAndDownState {
-    slideState: SlideState;
-}
-
-export class SlideUpAndDownAnimation extends React.Component<SlideUpAndDownAnimationProps, SlideUpAndDownState> {
-    public state = {
-        slideState: SlideState.Up,
-    };
-
-    private _timeoutId?: number;
-    public render(): React.ReactNode {
-        return this._renderSlide();
-    }
-    public componentDidMount(): void {
-        this._timeoutId = window.setTimeout(() => {
-            this.setState({
-                slideState: SlideState.Down,
-            });
-        }, this.props.delayMs);
-
-        return;
-    }
-    public componentWillUnmount(): void {
-        if (this._timeoutId) {
-            window.clearTimeout(this._timeoutId);
-        }
-    }
-    private _renderSlide(): React.ReactNode {
-        const SlideComponent = this.state.slideState === 'up' ? SlideUpAnimationComponent : SlideDownAnimationComponent;
-
-        return <SlideComponent downY={this.props.downY}>{this.props.children}</SlideComponent>;
-    }
-}
diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
index 7c6b03ee9..a7df2da4d 100644
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -3,7 +3,8 @@ import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { assetMetaData } from '../data/asset_meta_data';
+import { bestNameForAsset } from '../util/asset_data';
+
 import { ColorOption } from '../style/theme';
 import { util } from '../util/util';
 
@@ -26,26 +27,12 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps> {
                 <AmountInput {...rest} onChange={this._handleChange} />
                 <Container display="inline-block" marginLeft="10px">
                     <Text fontSize={rest.fontSize} fontColor={ColorOption.white} textTransform="uppercase">
-                        {this._getAssetSymbolLabel()}
+                        {bestNameForAsset(this.props.assetData, '???')}
                     </Text>
                 </Container>
             </Container>
         );
     }
-    private readonly _getAssetSymbolLabel = (): string => {
-        const unknownLabel = '???';
-        if (_.isUndefined(this.props.assetData)) {
-            return unknownLabel;
-        }
-        const metaData = assetMetaData[this.props.assetData];
-        if (_.isUndefined(metaData)) {
-            return unknownLabel;
-        }
-        if (metaData.assetProxyId === AssetProxyId.ERC20) {
-            return metaData.symbol;
-        }
-        return unknownLabel;
-    };
     private readonly _handleChange = (value?: BigNumber): void => {
         this.props.onChange(value, this.props.assetData);
     };
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index 0237fb7e9..ad87481c4 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
-import { SlideUpAndDownAnimation } from './animations/slide_up_and_down_animation';
+import { SlideDownAnimation, SlideUpAnimation } from './animations/slide_animations';
 
 import { Container, Text } from './ui';
 
@@ -29,8 +29,16 @@ export const Error: React.StatelessComponent<ErrorProps> = props => (
     </Container>
 );
 
-export const SlidingError: React.StatelessComponent<ErrorProps> = props => (
-    <SlideUpAndDownAnimation downY="120px" delayMs={5000}>
-        <Error icon={props.icon} message={props.message} />
-    </SlideUpAndDownAnimation>
-);
+export type SlidingDirection = 'up' | 'down';
+export interface SlidingErrorProps extends ErrorProps {
+    direction: SlidingDirection;
+}
+export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => {
+    const AnimationComponent = props.direction === 'up' ? SlideUpAnimation : SlideDownAnimation;
+
+    return (
+        <AnimationComponent downY="120px">
+            <Error icon={props.icon} message={props.message} />
+        </AnimationComponent>
+    );
+};
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 0c37e41db..cc718d200 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details';
+import { LatestError } from '../containers/latest_error';
 import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button';
 import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
 
@@ -16,6 +17,9 @@ export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
     <Container width="350px">
+        <Container zIndex={1} position="relative">
+            <LatestError />
+        </Container>
         <Container
             zIndex={2}
             position="relative"