[instant] Asset buyer errors

packages/instant/package.json

@@ -55,6 +55,7 @@
         "react-dom": "^16.5.2",
         "react-redux": "^5.0.7",
         "redux": "^4.0.0",
+        "redux-devtools-extension": "^2.13.5",
         "styled-components": "^3.4.9",
         "ts-optchain": "^0.1.1"
     },

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>
+);

packages/instant/src/components/asset_amount_input.tsx

@@ -1,9 +1,9 @@
-import { AssetProxyId } from '@0xproject/types';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { assetMetaData } from '../data/asset_meta_data';
+import { assetDataUtil } from '../util/asset_data';
+
 import { ColorOption } from '../style/theme';
 import { util } from '../util/util';
 
@@ -26,26 +26,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()}
+                        {assetDataUtil.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);
     };

packages/instant/src/components/instant_heading.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input';
 import { ColorOption } from '../style/theme';
+import { AsyncProcessState } from '../types';
 import { format } from '../util/format';
 
 import { Container, Flex, Text } from './ui';
@@ -12,20 +13,45 @@ export interface InstantHeadingProps {
     selectedAssetAmount?: BigNumber;
     totalEthBaseAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
+    quoteState: AsyncProcessState;
 }
 
-const displaytotalEthBaseAmount = ({ selectedAssetAmount, totalEthBaseAmount }: InstantHeadingProps): string => {
+const Placeholder = () => (
+    <Text fontWeight="bold" fontColor={ColorOption.white}>
+        &mdash;
+    </Text>
+);
+const displaytotalEthBaseAmount = ({
+    selectedAssetAmount,
+    totalEthBaseAmount,
+}: InstantHeadingProps): React.ReactNode => {
     if (_.isUndefined(selectedAssetAmount)) {
         return '0 ETH';
     }
-    return format.ethBaseAmount(totalEthBaseAmount, 4, '...loading');
+    return format.ethBaseAmount(totalEthBaseAmount, 4, <Placeholder />);
 };
 
-const displayUsdAmount = ({ totalEthBaseAmount, selectedAssetAmount, ethUsdPrice }: InstantHeadingProps): string => {
+const displayUsdAmount = ({
+    totalEthBaseAmount,
+    selectedAssetAmount,
+    ethUsdPrice,
+}: InstantHeadingProps): React.ReactNode => {
     if (_.isUndefined(selectedAssetAmount)) {
         return '$0.00';
     }
-    return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, '...loading');
+    return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, <Placeholder />);
+};
+
+const loadingOrAmount = (quoteState: AsyncProcessState, amount: React.ReactNode): React.ReactNode => {
+    if (quoteState === AsyncProcessState.PENDING) {
+        return (
+            <Text fontWeight="bold" fontColor={ColorOption.white}>
+                &hellip;loading
+            </Text>
+        );
+    } else {
+        return amount;
+    }
 };
 
 export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = props => (
@@ -47,11 +73,11 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro
             <Flex direction="column" justify="space-between">
                 <Container marginBottom="5px">
                     <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
-                        {displaytotalEthBaseAmount(props)}
+                        {loadingOrAmount(props.quoteState, displaytotalEthBaseAmount(props))}
                     </Text>
                 </Container>
                 <Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}>
-                    {displayUsdAmount(props)}
+                    {loadingOrAmount(props.quoteState, displayUsdAmount(props))}
                 </Text>
             </Flex>
         </Flex>

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';
 
@@ -20,17 +20,25 @@ export const Error: React.StatelessComponent<ErrorProps> = props => (
         borderRadius="6px"
         marginBottom="10px"
     >
-        <Container marginRight="5px" display="inline">
-            {props.icon}
+        <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>
     </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>
+    );
+};

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';
 
@@ -12,6 +13,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"

packages/instant/src/containers/latest_error.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { connect } from 'react-redux';
+
+import { SlidingError } from '../components/sliding_error';
+import { LatestErrorDisplay, State } from '../redux/reducer';
+import { errorUtil } from '../util/error';
+
+export interface LatestErrorComponentProps {
+    assetData?: string;
+    latestError?: any;
+    slidingDirection: 'down' | 'up';
+}
+
+export const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => {
+    if (!props.latestError) {
+        return <div />;
+    }
+    const { icon, message } = errorUtil.errorDescription(props.latestError, props.assetData);
+    return <SlidingError direction={props.slidingDirection} icon={icon} message={message} />;
+};
+
+interface ConnectedState {
+    assetData?: string;
+    latestError?: any;
+    slidingDirection: 'down' | 'up';
+}
+export interface LatestErrorProps {}
+const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({
+    assetData: state.selectedAssetData,
+    latestError: state.latestError,
+    slidingDirection: state.latestErrorDisplay === LatestErrorDisplay.Present ? 'up' : 'down',
+});
+
+export const LatestError = connect(mapStateToProps)(LatestErrorComponent);