From 475698ed92dc6310591ec9d0653eaa931d7e03f6 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 29 Oct 2018 17:02:46 -0700
Subject: feat: add basic panel component and other small improvements

---
 .../instant/src/components/instant_heading.tsx     |  8 +++----
 packages/instant/src/components/panel.tsx          | 27 ++++++++++++++++++++++
 packages/instant/src/components/ui/index.ts        |  2 ++
 .../src/components/zero_ex_instant_container.tsx   |  5 ++--
 packages/instant/src/style/z_index.ts              |  5 ++++
 5 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 packages/instant/src/components/panel.tsx
 create mode 100644 packages/instant/src/style/z_index.ts

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 1ef276ff3..81aa62a77 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -8,9 +8,7 @@ import { AsyncProcessState, OrderProcessState, OrderState } from '../types';
 import { format } from '../util/format';
 
 import { AmountPlaceholder } from './amount_placeholder';
-import { Container, Flex, Text } from './ui';
-import { Icon } from './ui/icon';
-import { Spinner } from './ui/spinner';
+import { Container, Flex, Icon, Spinner, Text } from './ui';
 
 export interface InstantHeadingProps {
     selectedAssetAmount?: BigNumber;
@@ -72,11 +70,11 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
         const processState = this.props.buyOrderState.processState;
 
         if (processState === OrderProcessState.FAILURE) {
-            return <Icon icon={'failed'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
+            return <Icon icon="failed" width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
         } else if (processState === OrderProcessState.PROCESSING) {
             return <Spinner widthPx={ICON_HEIGHT} heightPx={ICON_HEIGHT} />;
         } else if (processState === OrderProcessState.SUCCESS) {
-            return <Icon icon={'success'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
+            return <Icon icon="success" width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
         }
         return undefined;
     }
diff --git a/packages/instant/src/components/panel.tsx b/packages/instant/src/components/panel.tsx
new file mode 100644
index 000000000..bb16ed9b1
--- /dev/null
+++ b/packages/instant/src/components/panel.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+import { zIndex } from '../style/z_index';
+
+import { Button, Container, Text } from './ui';
+
+export interface PanelProps {
+    onClose?: () => void;
+}
+
+export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose }) => (
+    <Container
+        backgroundColor={ColorOption.white}
+        position="absolute"
+        top="0px"
+        left="0px"
+        width="100%"
+        height="100%"
+        zIndex={zIndex.panel}
+    >
+        <Button onClick={onClose}>
+            <Text fontColor={ColorOption.white}>Close </Text>
+        </Button>
+        {children}
+    </Container>
+);
diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts
index bf5f6c700..7cfee2491 100644
--- a/packages/instant/src/components/ui/index.ts
+++ b/packages/instant/src/components/ui/index.ts
@@ -3,3 +3,5 @@ export { Button } from './button';
 export { Flex } from './flex';
 export { Container } from './container';
 export { Input } from './input';
+export { Icon } from './icon';
+export { Spinner } from './spinner';
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index ff19351ff..ded0d075e 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -6,6 +6,7 @@ import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_
 import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
 
 import { ColorOption } from '../style/theme';
+import { zIndex } from '../style/z_index';
 
 import { Container, Flex } from './ui';
 
@@ -13,11 +14,11 @@ export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
     <Container width="350px">
-        <Container zIndex={1} position="relative">
+        <Container zIndex={zIndex.errorPopup} position="relative">
             <LatestError />
         </Container>
         <Container
-            zIndex={2}
+            zIndex={zIndex.mainContainer}
             position="relative"
             backgroundColor={ColorOption.white}
             borderRadius="3px"
diff --git a/packages/instant/src/style/z_index.ts b/packages/instant/src/style/z_index.ts
new file mode 100644
index 000000000..727a5189d
--- /dev/null
+++ b/packages/instant/src/style/z_index.ts
@@ -0,0 +1,5 @@
+export const zIndex = {
+    errorPopup: 1,
+    mainContainer: 2,
+    panel: 3,
+};
-- 
cgit v1.2.3


From 4cba70f32e4300cea7396f08687f2e53a7728e68 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 29 Oct 2018 17:48:17 -0700
Subject: feat: add chevron icon and add it to asset amount input

---
 .../instant/src/components/instant_heading.tsx     |  5 +++-
 packages/instant/src/components/ui/icon.tsx        | 28 ++++++++++++++++++----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 81aa62a77..00c45ba3a 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -21,7 +21,7 @@ export interface InstantHeadingProps {
 const PLACEHOLDER_COLOR = ColorOption.white;
 const ICON_WIDTH = 34;
 const ICON_HEIGHT = 34;
-const ICON_COLOR = ColorOption.white;
+const ICON_COLOR = 'white';
 
 export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     public render(): React.ReactNode {
@@ -48,6 +48,9 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                 <Flex direction="row" justify="space-between">
                     <Flex height="60px">
                         <SelectedERC20AssetAmountInput startingFontSizePx={38} />
+                        <Container marginLeft="5px">
+                            <Icon icon="chevron" width={12} />
+                        </Container>
                     </Flex>
                     <Flex direction="column" justify="space-between">
                         {iconOrAmounts}
diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx
index 7373c3acd..61b382760 100644
--- a/packages/instant/src/components/ui/icon.tsx
+++ b/packages/instant/src/components/ui/icon.tsx
@@ -1,17 +1,21 @@
 import * as React from 'react';
 
-import { ColorOption } from '../../style/theme';
-
 type svgRule = 'evenodd' | 'nonzero' | 'inherit';
 interface IconInfo {
     viewBox: string;
+    path: string;
     fillRule?: svgRule;
     clipRule?: svgRule;
-    path: string;
+    stroke?: string;
+    strokeOpacity?: number;
+    strokeWidth?: number;
+    strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';
+    strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit';
 }
 interface IconInfoMapping {
     failed: IconInfo;
     success: IconInfo;
+    chevron: IconInfo;
 }
 const ICONS: IconInfoMapping = {
     failed: {
@@ -28,12 +32,21 @@ const ICONS: IconInfoMapping = {
         path:
             'M17 34C26.3887 34 34 26.3888 34 17C34 7.61121 26.3887 0 17 0C7.61133 0 0 7.61121 0 17C0 26.3888 7.61133 34 17 34ZM25.7539 13.0977C26.2969 12.4718 26.2295 11.5244 25.6035 10.9817C24.9775 10.439 24.0303 10.5063 23.4878 11.1323L15.731 20.0771L12.3936 16.7438C11.8071 16.1583 10.8574 16.1589 10.272 16.7451C9.68652 17.3313 9.6875 18.281 10.2734 18.8665L14.75 23.3373L15.8887 24.4746L16.9434 23.2587L25.7539 13.0977Z',
     },
+    chevron: {
+        viewBox: '0 0 12 7',
+        path: 'M11 1L6 6L1 1',
+        stroke: 'white',
+        strokeOpacity: 0.5,
+        strokeWidth: 1.5,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+    },
 };
 
 export interface IconProps {
     width: number;
-    height: number;
-    color: ColorOption;
+    height?: number;
+    color?: string;
     icon: keyof IconInfoMapping;
 }
 export const Icon: React.SFC<IconProps> = props => {
@@ -52,6 +65,11 @@ export const Icon: React.SFC<IconProps> = props => {
                 fill={props.color}
                 fillRule={iconInfo.fillRule || 'nonzero'}
                 clipRule={iconInfo.clipRule || 'nonzero'}
+                stroke={iconInfo.stroke}
+                strokeOpacity={iconInfo.strokeOpacity}
+                strokeWidth={iconInfo.strokeWidth}
+                strokeLinecap={iconInfo.strokeLinecap}
+                strokeLinejoin={iconInfo.strokeLinejoin}
             />
         </svg>
     );
-- 
cgit v1.2.3


From d0a0af51306bf5e5b46fd8982c70b271212af42f Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 29 Oct 2018 18:37:23 -0700
Subject: feat: add 'Select Token' UI to asset amount input

---
 .../src/components/erc20_asset_amount_input.tsx    | 69 ++++++++++++++++++----
 .../instant/src/components/instant_heading.tsx     |  3 -
 packages/instant/src/components/ui/container.tsx   |  2 +
 packages/instant/src/components/ui/flex.tsx        |  4 +-
 4 files changed, 61 insertions(+), 17 deletions(-)

diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index 5abb34c2f..4108fd0e8 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -8,13 +8,14 @@ import { BigNumberInput } from '../util/big_number_input';
 import { util } from '../util/util';
 
 import { ScalingAmountInput } from './scaling_amount_input';
-import { Container, Text } from './ui';
+import { Container, Flex, Icon, Text } from './ui';
 
 // Asset amounts only apply to ERC20 assets
 export interface ERC20AssetAmountInputProps {
     asset?: ERC20Asset;
     value?: BigNumberInput;
     onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
+    onSymbolClick: (asset?: ERC20Asset) => void;
     startingFontSizePx: number;
     fontColor?: ColorOption;
     isDisabled: boolean;
@@ -27,6 +28,7 @@ export interface ERC20AssetAmountInputState {
 export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInputProps, ERC20AssetAmountInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
+        onSymbolClick: util.boundNoop,
         isDisabled: false,
     };
     constructor(props: ERC20AssetAmountInputProps) {
@@ -36,10 +38,18 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         };
     }
     public render(): React.ReactNode {
-        const { asset, onChange, ...rest } = this.props;
-        const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`;
+        const { asset } = this.props;
         return (
             <Container whiteSpace="nowrap">
+                {!_.isUndefined(asset) ? this._renderContentForAsset(asset) : this._renderBackupContent()}
+            </Container>
+        );
+    }
+    private readonly _renderContentForAsset = (asset: ERC20Asset): React.ReactNode => {
+        const { onChange, ...rest } = this.props;
+        const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`;
+        return (
+            <React.Fragment>
                 <Container borderBottom={amountBorderBottom} display="inline-block">
                     <ScalingAmountInput
                         {...rest}
@@ -49,18 +59,50 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
                         onFontSizeChange={this._handleFontSizeChange}
                     />
                 </Container>
-                <Container display="inline-flex" marginLeft="10px" title={assetUtils.bestNameForAsset(asset)}>
-                    <Text
-                        fontSize={`${this.state.currentFontSizePx}px`}
-                        fontColor={ColorOption.white}
-                        textTransform="uppercase"
-                    >
-                        {assetUtils.formattedSymbolForAsset(asset)}
-                    </Text>
+                <Container
+                    cursor="pointer"
+                    display="inline-block"
+                    marginLeft="8px"
+                    title={assetUtils.bestNameForAsset(asset, undefined)}
+                >
+                    <Flex inline={true}>
+                        <Text
+                            fontSize={`${this.state.currentFontSizePx}px`}
+                            fontColor={ColorOption.white}
+                            textTransform="uppercase"
+                            onClick={this._handleSymbolClick}
+                        >
+                            {assetUtils.formattedSymbolForAsset(asset)}
+                        </Text>
+                        {this._renderChevronIcon()}
+                    </Flex>
                 </Container>
+            </React.Fragment>
+        );
+    };
+    private readonly _renderBackupContent = (): React.ReactNode => {
+        return (
+            <Flex>
+                <Text
+                    fontSize="30px"
+                    fontColor={ColorOption.white}
+                    opacity={0.7}
+                    fontWeight="500"
+                    onClick={this._handleSymbolClick}
+                >
+                    Select Token
+                </Text>
+                {this._renderChevronIcon()}
+            </Flex>
+        );
+    };
+    private readonly _renderChevronIcon = (): React.ReactNode => {
+        return (
+            <Container marginLeft="5px" onClick={this._handleSymbolClick}>
+                <Icon icon="chevron" width={12} />
             </Container>
         );
-    }
+    };
     private readonly _handleChange = (value?: BigNumberInput): void => {
         this.props.onChange(value, this.props.asset);
     };
@@ -69,6 +111,9 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
             currentFontSizePx: fontSizePx,
         });
     };
+    private readonly _handleSymbolClick = () => {
+        this.props.onSymbolClick(this.props.asset);
+    };
     // For assets with symbols of different length,
     // start scaling the input at different character lengths
     private readonly _textLengthThresholdForAsset = (asset?: ERC20Asset): number => {
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 00c45ba3a..0b41d44d7 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -48,9 +48,6 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                 <Flex direction="row" justify="space-between">
                     <Flex height="60px">
                         <SelectedERC20AssetAmountInput startingFontSizePx={38} />
-                        <Container marginLeft="5px">
-                            <Icon icon="chevron" width={12} />
-                        </Container>
                     </Flex>
                     <Flex direction="column" justify="space-between">
                         {iconOrAmounts}
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 76b570de7..b6842b294 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -28,6 +28,7 @@ export interface ContainerProps {
     zIndex?: number;
     whiteSpace?: string;
     opacity?: number;
+    cursor?: string;
 }
 
 export const Container =
@@ -57,6 +58,7 @@ export const Container =
     ${props => cssRuleIfExists(props, 'z-index')}
     ${props => cssRuleIfExists(props, 'white-space')}
     ${props => cssRuleIfExists(props, 'opacity')}
+    ${props => cssRuleIfExists(props, 'cursor')}
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
     border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 5fa3fc95b..29c6511bb 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -9,14 +9,14 @@ export interface FlexProps {
     width?: string;
     height?: string;
     backgroundColor?: ColorOption;
-    className?: string;
+    inline?: boolean;
 }
 
 export const Flex =
     styled.div <
     FlexProps >
     `
-    display: flex;
+    display: ${props => (props.inline ? 'inline-flex' : 'flex')};
     flex-direction: ${props => props.direction};
     flex-wrap: ${props => props.flexWrap};
     justify-content: ${props => props.justify};
-- 
cgit v1.2.3


From a49bf353f85c22a029db3085a620f3c031b52d73 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 30 Oct 2018 15:21:58 -0700
Subject: feat: refactor animation code

---
 .../components/animations/position_animation.tsx   | 70 ++++++++++++++++++++++
 .../src/components/animations/slide_animations.tsx | 58 +++---------------
 .../src/components/erc20_asset_amount_input.tsx    |  7 ++-
 .../instant/src/components/instant_heading.tsx     | 10 ++--
 packages/instant/src/components/panel.tsx          |  9 +--
 packages/instant/src/components/sliding_error.tsx  | 28 ++++++---
 packages/instant/src/components/ui/container.tsx   |  2 +
 .../src/components/zero_ex_instant_container.tsx   | 10 +++-
 packages/instant/src/containers/latest_error.tsx   |  9 +--
 .../selected_erc20_asset_amount_input.ts           |  1 +
 10 files changed, 130 insertions(+), 74 deletions(-)
 create mode 100644 packages/instant/src/components/animations/position_animation.tsx

diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx
new file mode 100644
index 000000000..de38ee30a
--- /dev/null
+++ b/packages/instant/src/components/animations/position_animation.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Keyframes } from 'styled-components';
+
+import { css, keyframes, styled } from '../../style/theme';
+
+const generateTransitionInfoCss = (
+    key: keyof TransitionInfo,
+    top?: TransitionInfo,
+    bottom?: TransitionInfo,
+    left?: TransitionInfo,
+    right?: TransitionInfo,
+): string => {
+    const topStringIfExists = top ? `top: ${top[key]};` : '';
+    const bottomStringIfExists = bottom ? `bottom: ${bottom[key]};` : '';
+    const leftStringIfExists = left ? `left: ${left[key]};` : '';
+    const rightStringIfExists = right ? `right: ${right[key]};` : '';
+    return `
+    ${topStringIfExists}
+    ${bottomStringIfExists}
+    ${leftStringIfExists}
+    ${rightStringIfExists}
+    `;
+};
+
+const slideKeyframeGenerator = (
+    top?: TransitionInfo,
+    bottom?: TransitionInfo,
+    left?: TransitionInfo,
+    right?: TransitionInfo,
+) => keyframes`
+    from {
+        position: relative;
+        ${generateTransitionInfoCss('from', top, bottom, left, right)}
+    }
+
+    to {
+        position: relative;
+        ${generateTransitionInfoCss('to', top, bottom, left, right)}
+    }
+`;
+
+export interface TransitionInfo {
+    from: string;
+    to: string;
+}
+
+export interface PositionAnimationProps {
+    top?: TransitionInfo;
+    bottom?: TransitionInfo;
+    left?: TransitionInfo;
+    right?: TransitionInfo;
+    timingFunction: string;
+    direction?: string;
+}
+
+export const PositionAnimation =
+    styled.div <
+    PositionAnimationProps >
+    `
+    animation-name: ${props =>
+        css`
+            ${slideKeyframeGenerator(props.top, props.bottom, props.left, props.right)};
+        `};
+    animation-duration: 0.3s;
+    animation-timing-function: ${props => props.timingFunction};
+    animation-delay: 0s;
+    animation-iteration-count: 1;
+    animation-fill-mode: ${props => props.direction || 'none'};
+    position: relative;
+`;
diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx
index 84280372b..99533a2f0 100644
--- a/packages/instant/src/components/animations/slide_animations.tsx
+++ b/packages/instant/src/components/animations/slide_animations.tsx
@@ -3,56 +3,16 @@ import { Keyframes } from 'styled-components';
 
 import { css, keyframes, styled } from '../../style/theme';
 
-const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes`
-    from {
-        position: relative;
-        top: ${fromY};
-    }
-
-    to {
-        position: relative;
-        top: ${toY};
-    }
-`;
+import { PositionAnimation, PositionAnimationProps } from './position_animation';
 
+export type SlideAnimationPhase = 'slideIn' | 'slideOut';
 export interface SlideAnimationProps {
-    keyframes: Keyframes;
-    animationType: string;
-    animationDirection?: string;
+    phase: SlideAnimationPhase;
+    slideIn: PositionAnimationProps;
+    slideOut: PositionAnimationProps;
 }
 
-export const SlideAnimation =
-    styled.div <
-    SlideAnimationProps >
-    `
-    animation-name: ${props =>
-        css`
-            ${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>
-);
+export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
+    const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut;
+    return <PositionAnimation {...propsToUse}>{props.children}</PositionAnimation>;
+};
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index 4108fd0e8..bed1b3b4e 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -15,7 +15,7 @@ export interface ERC20AssetAmountInputProps {
     asset?: ERC20Asset;
     value?: BigNumberInput;
     onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
-    onSymbolClick: (asset?: ERC20Asset) => void;
+    onSymbolClick?: (asset?: ERC20Asset) => void;
     startingFontSizePx: number;
     fontColor?: ColorOption;
     isDisabled: boolean;
@@ -28,7 +28,6 @@ export interface ERC20AssetAmountInputState {
 export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInputProps, ERC20AssetAmountInputState> {
     public static defaultProps = {
         onChange: util.boundNoop,
-        onSymbolClick: util.boundNoop,
         isDisabled: false,
     };
     constructor(props: ERC20AssetAmountInputProps) {
@@ -112,7 +111,9 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         });
     };
     private readonly _handleSymbolClick = () => {
-        this.props.onSymbolClick(this.props.asset);
+        if (this.props.onSymbolClick) {
+            this.props.onSymbolClick(this.props.asset);
+        }
     };
     // For assets with symbols of different length,
     // start scaling the input at different character lengths
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 0b41d44d7..e1c2f8bc3 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -60,8 +60,8 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     private _renderAmountsSection(): React.ReactNode {
         return (
             <Container>
-                <Container marginBottom="5px">{this._placeholderOrAmount(this._ethAmount)}</Container>
-                <Container opacity={0.7}>{this._placeholderOrAmount(this._dollarAmount)}</Container>
+                <Container marginBottom="5px">{this._renderPlaceholderOrAmount(this._renderEthAmount)}</Container>
+                <Container opacity={0.7}>{this._renderPlaceholderOrAmount(this._renderDollarAmount)}</Container>
             </Container>
         );
     }
@@ -92,7 +92,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
         return 'I want to buy';
     }
 
-    private _placeholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode {
+    private _renderPlaceholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode {
         if (this.props.quoteRequestState === AsyncProcessState.PENDING) {
             return <AmountPlaceholder isPulsating={true} color={PLACEHOLDER_COLOR} />;
         }
@@ -102,7 +102,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
         return amountFunction();
     }
 
-    private readonly _ethAmount = (): React.ReactNode => {
+    private readonly _renderEthAmount = (): React.ReactNode => {
         return (
             <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
                 {format.ethBaseAmount(
@@ -114,7 +114,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
         );
     };
 
-    private readonly _dollarAmount = (): React.ReactNode => {
+    private readonly _renderDollarAmount = (): React.ReactNode => {
         return (
             <Text fontSize="16px" fontColor={ColorOption.white}>
                 {format.ethBaseAmountInUsd(
diff --git a/packages/instant/src/components/panel.tsx b/packages/instant/src/components/panel.tsx
index bb16ed9b1..ecefadced 100644
--- a/packages/instant/src/components/panel.tsx
+++ b/packages/instant/src/components/panel.tsx
@@ -12,10 +12,11 @@ export interface PanelProps {
 export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose }) => (
     <Container
         backgroundColor={ColorOption.white}
-        position="absolute"
-        top="0px"
-        left="0px"
-        width="100%"
+        // position="absolute"
+        // left="0px"
+        // bottom="0px"
+        // width="100%"
+        // height="100%"
         height="100%"
         zIndex={zIndex.panel}
     >
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index cc9abb7dd..8f209765e 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
-import { SlideDownAnimation, SlideUpAnimation } from './animations/slide_animations';
+import { PositionAnimationProps } from './animations/position_animation';
+import { SlideAnimation, SlideAnimationPhase } from './animations/slide_animations';
 
 import { Container, Flex, Text } from './ui';
 
@@ -31,16 +32,29 @@ export const Error: React.StatelessComponent<ErrorProps> = props => (
     </Container>
 );
 
-export type SlidingDirection = 'up' | 'down';
 export interface SlidingErrorProps extends ErrorProps {
-    direction: SlidingDirection;
+    phase: SlideAnimationPhase;
 }
 export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => {
-    const AnimationComponent = props.direction === 'up' ? SlideUpAnimation : SlideDownAnimation;
-
+    const slideAmount = '120px';
+    const slideUp: PositionAnimationProps = {
+        timingFunction: 'ease-in',
+        top: {
+            from: slideAmount,
+            to: '0px',
+        },
+    };
+    const slideDown: PositionAnimationProps = {
+        timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
+        top: {
+            from: '0px',
+            to: slideAmount,
+        },
+        direction: 'forwards',
+    };
     return (
-        <AnimationComponent downY="120px">
+        <SlideAnimation slideIn={slideUp} slideOut={slideDown} phase={props.phase}>
             <Error icon={props.icon} message={props.message} />
-        </AnimationComponent>
+        </SlideAnimation>
     );
 };
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index b6842b294..7b8642761 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -29,6 +29,7 @@ export interface ContainerProps {
     whiteSpace?: string;
     opacity?: number;
     cursor?: string;
+    overflow?: string;
 }
 
 export const Container =
@@ -59,6 +60,7 @@ export const Container =
     ${props => cssRuleIfExists(props, 'white-space')}
     ${props => cssRuleIfExists(props, 'opacity')}
     ${props => cssRuleIfExists(props, 'cursor')}
+    ${props => cssRuleIfExists(props, 'overflow')}
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
     border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index ded0d075e..c8d5235c8 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -4,16 +4,16 @@ import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order
 import { LatestError } from '../containers/latest_error';
 import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons';
 import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
-
 import { ColorOption } from '../style/theme';
 import { zIndex } from '../style/z_index';
 
+import { Panel } from './panel';
 import { Container, Flex } from './ui';
 
 export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
-    <Container width="350px">
+    <Container width="350px" position="relative">
         <Container zIndex={zIndex.errorPopup} position="relative">
             <LatestError />
         </Container>
@@ -23,6 +23,7 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
             backgroundColor={ColorOption.white}
             borderRadius="3px"
             hasBoxShadow={true}
+            overflow="hidden"
         >
             <Flex direction="column" justify="flex-start">
                 <SelectedAssetInstantHeading />
@@ -31,6 +32,11 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
                     <SelectedAssetBuyOrderStateButtons />
                 </Container>
             </Flex>
+            {/* <Container position="absolute" left="0px" bottom="0px" width="100%" height="100%">
+                <SlideAnimationHelper direction="up" downY="200px">
+                    <Panel> Hey </Panel>
+                </SlideAnimationHelper>
+            </Container> */}
         </Container>
     </Container>
 );
diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
index 45ca09673..2a8d232da 100644
--- a/packages/instant/src/containers/latest_error.tsx
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { connect } from 'react-redux';
 
+import { SlideAnimationPhase } from '../components/animations/slide_animations';
 import { SlidingError } from '../components/sliding_error';
 import { State } from '../redux/reducer';
 import { Asset, DisplayStatus } from '../types';
@@ -9,26 +10,26 @@ import { Asset, DisplayStatus } from '../types';
 export interface LatestErrorComponentProps {
     asset?: Asset;
     latestErrorMessage?: string;
-    slidingDirection: 'down' | 'up';
+    slidingPhase: SlideAnimationPhase;
 }
 
 export const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => {
     if (!props.latestErrorMessage) {
         return <div />;
     }
-    return <SlidingError direction={props.slidingDirection} icon="😢" message={props.latestErrorMessage} />;
+    return <SlidingError phase={props.slidingPhase} icon="😢" message={props.latestErrorMessage} />;
 };
 
 interface ConnectedState {
     asset?: Asset;
     latestErrorMessage?: string;
-    slidingDirection: 'down' | 'up';
+    slidingPhase: SlideAnimationPhase;
 }
 export interface LatestErrorProps {}
 const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({
     asset: state.selectedAsset,
     latestErrorMessage: state.latestErrorMessage,
-    slidingDirection: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'up' : 'down',
+    slidingPhase: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'slideIn' : 'slideOut',
 });
 
 export const LatestError = connect(mapStateToProps)(LatestErrorComponent);
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 4767b15d4..4df7faab9 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -19,6 +19,7 @@ import { errorFlasher } from '../util/error_flasher';
 export interface SelectedERC20AssetAmountInputProps {
     fontColor?: ColorOption;
     startingFontSizePx: number;
+    onSymbolClick?: (asset?: ERC20Asset) => void;
 }
 
 interface ConnectedState {
-- 
cgit v1.2.3


From 4456c3ee14f5cd778e0d16ab42a3e2e34d102f23 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 30 Oct 2018 15:32:43 -0700
Subject: feat: allow for flexible position in position animation component

---
 .../src/components/animations/position_animation.tsx      | 15 ++++++++++-----
 .../src/components/animations/slide_animations.tsx        | 13 +++++++++----
 packages/instant/src/components/sliding_error.tsx         |  8 ++++----
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx
index de38ee30a..3d6b5f8dc 100644
--- a/packages/instant/src/components/animations/position_animation.tsx
+++ b/packages/instant/src/components/animations/position_animation.tsx
@@ -23,18 +23,19 @@ const generateTransitionInfoCss = (
 };
 
 const slideKeyframeGenerator = (
+    position: string,
     top?: TransitionInfo,
     bottom?: TransitionInfo,
     left?: TransitionInfo,
     right?: TransitionInfo,
 ) => keyframes`
     from {
-        position: relative;
+        position: ${position};
         ${generateTransitionInfoCss('from', top, bottom, left, right)}
     }
 
     to {
-        position: relative;
+        position: ${position};
         ${generateTransitionInfoCss('to', top, bottom, left, right)}
     }
 `;
@@ -44,7 +45,7 @@ export interface TransitionInfo {
     to: string;
 }
 
-export interface PositionAnimationProps {
+export interface PositionAnimationSettings {
     top?: TransitionInfo;
     bottom?: TransitionInfo;
     left?: TransitionInfo;
@@ -53,18 +54,22 @@ export interface PositionAnimationProps {
     direction?: string;
 }
 
+export interface PositionAnimationProps extends PositionAnimationSettings {
+    position: string;
+}
+
 export const PositionAnimation =
     styled.div <
     PositionAnimationProps >
     `
     animation-name: ${props =>
         css`
-            ${slideKeyframeGenerator(props.top, props.bottom, props.left, props.right)};
+            ${slideKeyframeGenerator(props.position, props.top, props.bottom, props.left, props.right)};
         `};
     animation-duration: 0.3s;
     animation-timing-function: ${props => props.timingFunction};
     animation-delay: 0s;
     animation-iteration-count: 1;
     animation-fill-mode: ${props => props.direction || 'none'};
-    position: relative;
+    position: ${props => props.position};
 `;
diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx
index 99533a2f0..9f1535297 100644
--- a/packages/instant/src/components/animations/slide_animations.tsx
+++ b/packages/instant/src/components/animations/slide_animations.tsx
@@ -3,16 +3,21 @@ import { Keyframes } from 'styled-components';
 
 import { css, keyframes, styled } from '../../style/theme';
 
-import { PositionAnimation, PositionAnimationProps } from './position_animation';
+import { PositionAnimation, PositionAnimationSettings } from './position_animation';
 
 export type SlideAnimationPhase = 'slideIn' | 'slideOut';
 export interface SlideAnimationProps {
+    position: string;
     phase: SlideAnimationPhase;
-    slideIn: PositionAnimationProps;
-    slideOut: PositionAnimationProps;
+    slideIn: PositionAnimationSettings;
+    slideOut: PositionAnimationSettings;
 }
 
 export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
     const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut;
-    return <PositionAnimation {...propsToUse}>{props.children}</PositionAnimation>;
+    return (
+        <PositionAnimation position={props.position} {...propsToUse}>
+            {props.children}
+        </PositionAnimation>
+    );
 };
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index 8f209765e..0ad11bbad 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 { PositionAnimationProps } from './animations/position_animation';
+import { PositionAnimationSettings } from './animations/position_animation';
 import { SlideAnimation, SlideAnimationPhase } from './animations/slide_animations';
 
 import { Container, Flex, Text } from './ui';
@@ -37,14 +37,14 @@ export interface SlidingErrorProps extends ErrorProps {
 }
 export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => {
     const slideAmount = '120px';
-    const slideUp: PositionAnimationProps = {
+    const slideUp: PositionAnimationSettings = {
         timingFunction: 'ease-in',
         top: {
             from: slideAmount,
             to: '0px',
         },
     };
-    const slideDown: PositionAnimationProps = {
+    const slideDown: PositionAnimationSettings = {
         timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
         top: {
             from: '0px',
@@ -53,7 +53,7 @@ export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props =
         direction: 'forwards',
     };
     return (
-        <SlideAnimation slideIn={slideUp} slideOut={slideDown} phase={props.phase}>
+        <SlideAnimation position="relative" slideIn={slideUp} slideOut={slideDown} phase={props.phase}>
             <Error icon={props.icon} message={props.message} />
         </SlideAnimation>
     );
-- 
cgit v1.2.3


From 91f8487947d7941b508c34d1bfc1e72c0840c33d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 30 Oct 2018 16:57:42 -0700
Subject: feat: implement sliding panel

---
 .../components/animations/position_animation.tsx   |  9 +--
 .../src/components/animations/slide_animation.tsx  | 23 +++++++
 .../src/components/animations/slide_animations.tsx | 23 -------
 .../instant/src/components/instant_heading.tsx     |  8 ++-
 packages/instant/src/components/panel.tsx          | 28 --------
 packages/instant/src/components/sliding_error.tsx  | 12 ++--
 packages/instant/src/components/sliding_panel.tsx  | 54 +++++++++++++++
 .../src/components/zero_ex_instant_container.tsx   | 78 ++++++++++++++--------
 packages/instant/src/containers/latest_error.tsx   | 10 +--
 .../containers/selected_asset_instant_heading.ts   |  6 +-
 10 files changed, 155 insertions(+), 96 deletions(-)
 create mode 100644 packages/instant/src/components/animations/slide_animation.tsx
 delete mode 100644 packages/instant/src/components/animations/slide_animations.tsx
 delete mode 100644 packages/instant/src/components/panel.tsx
 create mode 100644 packages/instant/src/components/sliding_panel.tsx

diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx
index 3d6b5f8dc..aefd7ef30 100644
--- a/packages/instant/src/components/animations/position_animation.tsx
+++ b/packages/instant/src/components/animations/position_animation.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Keyframes } from 'styled-components';
 
 import { css, keyframes, styled } from '../../style/theme';
@@ -51,7 +50,7 @@ export interface PositionAnimationSettings {
     left?: TransitionInfo;
     right?: TransitionInfo;
     timingFunction: string;
-    direction?: string;
+    duration?: string;
 }
 
 export interface PositionAnimationProps extends PositionAnimationSettings {
@@ -66,10 +65,12 @@ export const PositionAnimation =
         css`
             ${slideKeyframeGenerator(props.position, props.top, props.bottom, props.left, props.right)};
         `};
-    animation-duration: 0.3s;
+    animation-duration: ${props => props.duration || '0.3s'};
     animation-timing-function: ${props => props.timingFunction};
     animation-delay: 0s;
     animation-iteration-count: 1;
-    animation-fill-mode: ${props => props.direction || 'none'};
+    animation-fill-mode: forwards;
     position: ${props => props.position};
+    height: 100%;
+    width: 100%;
 `;
diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx
new file mode 100644
index 000000000..4124e50c3
--- /dev/null
+++ b/packages/instant/src/components/animations/slide_animation.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import { PositionAnimation, PositionAnimationSettings } from './position_animation';
+
+export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none';
+export interface SlideAnimationProps {
+    position: string;
+    animationState: SlideAnimationState;
+    slideIn: PositionAnimationSettings;
+    slideOut: PositionAnimationSettings;
+}
+
+export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
+    if (props.animationState === 'none') {
+        return <React.Fragment>{props.children}</React.Fragment>;
+    }
+    const propsToUse = props.animationState === 'slidIn' ? props.slideIn : props.slideOut;
+    return (
+        <PositionAnimation position={props.position} {...propsToUse}>
+            {props.children}
+        </PositionAnimation>
+    );
+};
diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx
deleted file mode 100644
index 9f1535297..000000000
--- a/packages/instant/src/components/animations/slide_animations.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { Keyframes } from 'styled-components';
-
-import { css, keyframes, styled } from '../../style/theme';
-
-import { PositionAnimation, PositionAnimationSettings } from './position_animation';
-
-export type SlideAnimationPhase = 'slideIn' | 'slideOut';
-export interface SlideAnimationProps {
-    position: string;
-    phase: SlideAnimationPhase;
-    slideIn: PositionAnimationSettings;
-    slideOut: PositionAnimationSettings;
-}
-
-export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
-    const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut;
-    return (
-        <PositionAnimation position={props.position} {...propsToUse}>
-            {props.children}
-        </PositionAnimation>
-    );
-};
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index e1c2f8bc3..08efd1b64 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import { SelectedERC20AssetAmountInput } from '../containers/selected_erc20_asset_amount_input';
 import { ColorOption } from '../style/theme';
-import { AsyncProcessState, OrderProcessState, OrderState } from '../types';
+import { AsyncProcessState, ERC20Asset, OrderProcessState, OrderState } from '../types';
 import { format } from '../util/format';
 
 import { AmountPlaceholder } from './amount_placeholder';
@@ -16,6 +16,7 @@ export interface InstantHeadingProps {
     ethUsdPrice?: BigNumber;
     quoteRequestState: AsyncProcessState;
     buyOrderState: OrderState;
+    onSymbolClick?: (asset?: ERC20Asset) => void;
 }
 
 const PLACEHOLDER_COLOR = ColorOption.white;
@@ -47,7 +48,10 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                 </Container>
                 <Flex direction="row" justify="space-between">
                     <Flex height="60px">
-                        <SelectedERC20AssetAmountInput startingFontSizePx={38} />
+                        <SelectedERC20AssetAmountInput
+                            startingFontSizePx={38}
+                            onSymbolClick={this.props.onSymbolClick}
+                        />
                     </Flex>
                     <Flex direction="column" justify="space-between">
                         {iconOrAmounts}
diff --git a/packages/instant/src/components/panel.tsx b/packages/instant/src/components/panel.tsx
deleted file mode 100644
index ecefadced..000000000
--- a/packages/instant/src/components/panel.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-
-import { ColorOption } from '../style/theme';
-import { zIndex } from '../style/z_index';
-
-import { Button, Container, Text } from './ui';
-
-export interface PanelProps {
-    onClose?: () => void;
-}
-
-export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose }) => (
-    <Container
-        backgroundColor={ColorOption.white}
-        // position="absolute"
-        // left="0px"
-        // bottom="0px"
-        // width="100%"
-        // height="100%"
-        height="100%"
-        zIndex={zIndex.panel}
-    >
-        <Button onClick={onClose}>
-            <Text fontColor={ColorOption.white}>Close </Text>
-        </Button>
-        {children}
-    </Container>
-);
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index 0ad11bbad..a89e201c0 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { ColorOption } from '../style/theme';
 
 import { PositionAnimationSettings } from './animations/position_animation';
-import { SlideAnimation, SlideAnimationPhase } from './animations/slide_animations';
+import { SlideAnimation, SlideAnimationState } from './animations/slide_animation';
 
 import { Container, Flex, Text } from './ui';
 
@@ -33,7 +33,7 @@ export const Error: React.StatelessComponent<ErrorProps> = props => (
 );
 
 export interface SlidingErrorProps extends ErrorProps {
-    phase: SlideAnimationPhase;
+    animationState: SlideAnimationState;
 }
 export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => {
     const slideAmount = '120px';
@@ -50,10 +50,14 @@ export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props =
             from: '0px',
             to: slideAmount,
         },
-        direction: 'forwards',
     };
     return (
-        <SlideAnimation position="relative" slideIn={slideUp} slideOut={slideDown} phase={props.phase}>
+        <SlideAnimation
+            position="relative"
+            slideIn={slideUp}
+            slideOut={slideDown}
+            animationState={props.animationState}
+        >
             <Error icon={props.icon} message={props.message} />
         </SlideAnimation>
     );
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
new file mode 100644
index 000000000..19034eb95
--- /dev/null
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+import { zIndex } from '../style/z_index';
+
+import { PositionAnimationSettings } from './animations/position_animation';
+import { SlideAnimation, SlideAnimationState } from './animations/slide_animation';
+import { Button, Container, Text } from './ui';
+
+export interface PanelProps {
+    onClose?: () => void;
+}
+
+export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose }) => (
+    <Container backgroundColor={ColorOption.white} width="100%" height="100%" zIndex={zIndex.panel}>
+        <Button onClick={onClose}>
+            <Text fontColor={ColorOption.white}>Close </Text>
+        </Button>
+        {children}
+    </Container>
+);
+
+export interface SlidingPanelProps extends PanelProps {
+    animationState: SlideAnimationState;
+}
+
+export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props => {
+    if (props.animationState === 'none') {
+        return null;
+    }
+    const { animationState, ...rest } = props;
+    const slideAmount = '100%';
+    const slideUp: PositionAnimationSettings = {
+        duration: '0.3s',
+        timingFunction: 'ease-in-out',
+        top: {
+            from: slideAmount,
+            to: '0px',
+        },
+    };
+    const slideDown: PositionAnimationSettings = {
+        duration: '0.3s',
+        timingFunction: 'ease-out',
+        top: {
+            from: '0px',
+            to: slideAmount,
+        },
+    };
+    return (
+        <SlideAnimation position="absolute" slideIn={slideUp} slideOut={slideDown} animationState={animationState}>
+            <Panel {...rest} />
+        </SlideAnimation>
+    );
+};
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index c8d5235c8..818a9a957 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -7,36 +7,58 @@ import { SelectedAssetInstantHeading } from '../containers/selected_asset_instan
 import { ColorOption } from '../style/theme';
 import { zIndex } from '../style/z_index';
 
-import { Panel } from './panel';
+import { SlideAnimationState } from './animations/slide_animation';
+import { SlidingPanel } from './sliding_panel';
 import { Container, Flex } from './ui';
 
 export interface ZeroExInstantContainerProps {}
+export interface ZeroExInstantContainerState {
+    tokenSelectionPanelAnimationState: SlideAnimationState;
+}
 
-export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
-    <Container width="350px" position="relative">
-        <Container zIndex={zIndex.errorPopup} position="relative">
-            <LatestError />
-        </Container>
-        <Container
-            zIndex={zIndex.mainContainer}
-            position="relative"
-            backgroundColor={ColorOption.white}
-            borderRadius="3px"
-            hasBoxShadow={true}
-            overflow="hidden"
-        >
-            <Flex direction="column" justify="flex-start">
-                <SelectedAssetInstantHeading />
-                <LatestBuyQuoteOrderDetails />
-                <Container padding="20px" width="100%">
-                    <SelectedAssetBuyOrderStateButtons />
+export class ZeroExInstantContainer extends React.Component<ZeroExInstantContainerProps, ZeroExInstantContainerState> {
+    public state = {
+        tokenSelectionPanelAnimationState: 'none' as SlideAnimationState,
+    };
+    public render(): React.ReactNode {
+        return (
+            <Container width="350px" position="relative">
+                <Container zIndex={zIndex.errorPopup} position="relative">
+                    <LatestError />
                 </Container>
-            </Flex>
-            {/* <Container position="absolute" left="0px" bottom="0px" width="100%" height="100%">
-                <SlideAnimationHelper direction="up" downY="200px">
-                    <Panel> Hey </Panel>
-                </SlideAnimationHelper>
-            </Container> */}
-        </Container>
-    </Container>
-);
+                <Container
+                    zIndex={zIndex.mainContainer}
+                    position="relative"
+                    backgroundColor={ColorOption.white}
+                    borderRadius="3px"
+                    hasBoxShadow={true}
+                    overflow="hidden"
+                >
+                    <Flex direction="column" justify="flex-start">
+                        <SelectedAssetInstantHeading onSymbolClick={this._handleSymbolClick} />
+                        <LatestBuyQuoteOrderDetails />
+                        <Container padding="20px" width="100%">
+                            <SelectedAssetBuyOrderStateButtons />
+                        </Container>
+                    </Flex>
+                    <SlidingPanel
+                        animationState={this.state.tokenSelectionPanelAnimationState}
+                        onClose={this._handlePanelClose}
+                    >
+                        Select Your Token
+                    </SlidingPanel>
+                </Container>
+            </Container>
+        );
+    }
+    private readonly _handleSymbolClick = (): void => {
+        this.setState({
+            tokenSelectionPanelAnimationState: 'slidIn',
+        });
+    };
+    private readonly _handlePanelClose = (): void => {
+        this.setState({
+            tokenSelectionPanelAnimationState: 'slidOut',
+        });
+    };
+}
diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
index 2a8d232da..99e55a6c4 100644
--- a/packages/instant/src/containers/latest_error.tsx
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { connect } from 'react-redux';
 
-import { SlideAnimationPhase } from '../components/animations/slide_animations';
+import { SlideAnimationState } from '../components/animations/slide_animation';
 import { SlidingError } from '../components/sliding_error';
 import { State } from '../redux/reducer';
 import { Asset, DisplayStatus } from '../types';
@@ -10,26 +10,26 @@ import { Asset, DisplayStatus } from '../types';
 export interface LatestErrorComponentProps {
     asset?: Asset;
     latestErrorMessage?: string;
-    slidingPhase: SlideAnimationPhase;
+    animationState: SlideAnimationState;
 }
 
 export const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => {
     if (!props.latestErrorMessage) {
         return <div />;
     }
-    return <SlidingError phase={props.slidingPhase} icon="😢" message={props.latestErrorMessage} />;
+    return <SlidingError animationState={props.animationState} icon="😢" message={props.latestErrorMessage} />;
 };
 
 interface ConnectedState {
     asset?: Asset;
     latestErrorMessage?: string;
-    slidingPhase: SlideAnimationPhase;
+    animationState: SlideAnimationState;
 }
 export interface LatestErrorProps {}
 const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({
     asset: state.selectedAsset,
     latestErrorMessage: state.latestErrorMessage,
-    slidingPhase: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'slideIn' : 'slideOut',
+    animationState: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'slidIn' : 'slidOut',
 });
 
 export const LatestError = connect(mapStateToProps)(LatestErrorComponent);
diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts
index 6b2a29b07..e413c7ef1 100644
--- a/packages/instant/src/containers/selected_asset_instant_heading.ts
+++ b/packages/instant/src/containers/selected_asset_instant_heading.ts
@@ -5,11 +5,13 @@ import { connect } from 'react-redux';
 import { oc } from 'ts-optchain';
 
 import { State } from '../redux/reducer';
-import { AsyncProcessState, OrderState } from '../types';
+import { AsyncProcessState, ERC20Asset, OrderState } from '../types';
 
 import { InstantHeading } from '../components/instant_heading';
 
-export interface InstantHeadingProps {}
+export interface InstantHeadingProps {
+    onSymbolClick?: (asset?: ERC20Asset) => void;
+}
 
 interface ConnectedState {
     selectedAssetAmount?: BigNumber;
-- 
cgit v1.2.3


From 27258fe3d45b8ffae81b74da43e473ae5905edc1 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 31 Oct 2018 11:55:48 -0700
Subject: chore: address PR feedback

---
 .../src/components/animations/position_animation.tsx       | 14 +++++++++-----
 .../instant/src/components/animations/slide_animation.tsx  |  6 +++---
 .../instant/src/components/buy_order_state_buttons.tsx     | 11 ++++-------
 .../instant/src/components/erc20_asset_amount_input.tsx    |  8 ++++----
 packages/instant/src/components/instant_heading.tsx        |  4 ++--
 packages/instant/src/components/placing_order_button.tsx   |  5 +----
 packages/instant/src/components/secondary_button.tsx       |  3 +--
 packages/instant/src/components/sliding_error.tsx          |  8 ++++----
 packages/instant/src/components/sliding_panel.tsx          | 11 ++++++++---
 packages/instant/src/components/ui/index.ts                | 12 ++++++------
 .../instant/src/components/zero_ex_instant_container.tsx   |  2 +-
 .../src/containers/selected_asset_instant_heading.ts       |  2 +-
 .../src/containers/selected_erc20_asset_amount_input.ts    |  2 +-
 13 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx
index aefd7ef30..4bb21befb 100644
--- a/packages/instant/src/components/animations/position_animation.tsx
+++ b/packages/instant/src/components/animations/position_animation.tsx
@@ -2,6 +2,11 @@ import { Keyframes } from 'styled-components';
 
 import { css, keyframes, styled } from '../../style/theme';
 
+export interface TransitionInfo {
+    from: string;
+    to: string;
+}
+
 const generateTransitionInfoCss = (
     key: keyof TransitionInfo,
     top?: TransitionInfo,
@@ -39,11 +44,6 @@ const slideKeyframeGenerator = (
     }
 `;
 
-export interface TransitionInfo {
-    from: string;
-    to: string;
-}
-
 export interface PositionAnimationSettings {
     top?: TransitionInfo;
     bottom?: TransitionInfo;
@@ -74,3 +74,7 @@ export const PositionAnimation =
     height: 100%;
     width: 100%;
 `;
+
+PositionAnimation.defaultProps = {
+    position: 'relative',
+};
diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx
index 4124e50c3..66a314c7f 100644
--- a/packages/instant/src/components/animations/slide_animation.tsx
+++ b/packages/instant/src/components/animations/slide_animation.tsx
@@ -6,15 +6,15 @@ export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none';
 export interface SlideAnimationProps {
     position: string;
     animationState: SlideAnimationState;
-    slideIn: PositionAnimationSettings;
-    slideOut: PositionAnimationSettings;
+    slideInSettings: PositionAnimationSettings;
+    slideOutSettings: PositionAnimationSettings;
 }
 
 export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
     if (props.animationState === 'none') {
         return <React.Fragment>{props.children}</React.Fragment>;
     }
-    const propsToUse = props.animationState === 'slidIn' ? props.slideIn : props.slideOut;
+    const propsToUse = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings;
     return (
         <PositionAnimation position={props.position} {...propsToUse}>
             {props.children}
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index d01e9ff57..51e06a284 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -1,16 +1,13 @@
 import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
 import * as React from 'react';
 
-import { BuyButton } from '../components/buy_button';
-import { SecondaryButton } from '../components/secondary_button';
-import { Flex } from '../components/ui/flex';
-
-import { PlacingOrderButton } from '../components/placing_order_button';
 import { ColorOption } from '../style/theme';
 import { OrderProcessState, ZeroExInstantError } from '../types';
 
-import { Button } from './ui/button';
-import { Text } from './ui/text';
+import { BuyButton } from './buy_button';
+import { PlacingOrderButton } from './placing_order_button';
+import { SecondaryButton } from './secondary_button';
+import { Button, Flex, Text } from './ui';
 
 export interface BuyOrderStateButtonProps {
     buyQuote?: BuyQuote;
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index bed1b3b4e..b1fec6405 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -15,7 +15,7 @@ export interface ERC20AssetAmountInputProps {
     asset?: ERC20Asset;
     value?: BigNumberInput;
     onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
-    onSymbolClick?: (asset?: ERC20Asset) => void;
+    onSelectAssetClick?: (asset?: ERC20Asset) => void;
     startingFontSizePx: number;
     fontColor?: ColorOption;
     isDisabled: boolean;
@@ -40,7 +40,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         const { asset } = this.props;
         return (
             <Container whiteSpace="nowrap">
-                {!_.isUndefined(asset) ? this._renderContentForAsset(asset) : this._renderBackupContent()}
+                {_.isUndefined(asset) ? this._renderBackupContent() : this._renderContentForAsset(asset)}
             </Container>
         );
     }
@@ -111,8 +111,8 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
         });
     };
     private readonly _handleSymbolClick = () => {
-        if (this.props.onSymbolClick) {
-            this.props.onSymbolClick(this.props.asset);
+        if (this.props.onSelectAssetClick) {
+            this.props.onSelectAssetClick(this.props.asset);
         }
     };
     // For assets with symbols of different length,
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 08efd1b64..19c08db70 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -16,7 +16,7 @@ export interface InstantHeadingProps {
     ethUsdPrice?: BigNumber;
     quoteRequestState: AsyncProcessState;
     buyOrderState: OrderState;
-    onSymbolClick?: (asset?: ERC20Asset) => void;
+    onSelectAssetClick?: (asset?: ERC20Asset) => void;
 }
 
 const PLACEHOLDER_COLOR = ColorOption.white;
@@ -50,7 +50,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
                     <Flex height="60px">
                         <SelectedERC20AssetAmountInput
                             startingFontSizePx={38}
-                            onSymbolClick={this.props.onSymbolClick}
+                            onSelectAssetClick={this.props.onSelectAssetClick}
                         />
                     </Flex>
                     <Flex direction="column" justify="space-between">
diff --git a/packages/instant/src/components/placing_order_button.tsx b/packages/instant/src/components/placing_order_button.tsx
index 4232e6c22..e5a6371e6 100644
--- a/packages/instant/src/components/placing_order_button.tsx
+++ b/packages/instant/src/components/placing_order_button.tsx
@@ -2,10 +2,7 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
-import { Button } from './ui/button';
-import { Container } from './ui/container';
-import { Spinner } from './ui/spinner';
-import { Text } from './ui/text';
+import { Button, Container, Spinner, Text } from './ui';
 
 export const PlacingOrderButton: React.StatelessComponent<{}> = props => (
     <Button isDisabled={true} width="100%">
diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx
index 583058b5b..ca698c77a 100644
--- a/packages/instant/src/components/secondary_button.tsx
+++ b/packages/instant/src/components/secondary_button.tsx
@@ -3,8 +3,7 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
-import { Button, ButtonProps } from './ui/button';
-import { Text } from './ui/text';
+import { Button, ButtonProps, Text } from './ui';
 
 export interface SecondaryButtonProps extends ButtonProps {}
 
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index a89e201c0..17643fd7d 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -37,14 +37,14 @@ export interface SlidingErrorProps extends ErrorProps {
 }
 export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => {
     const slideAmount = '120px';
-    const slideUp: PositionAnimationSettings = {
+    const slideUpSettings: PositionAnimationSettings = {
         timingFunction: 'ease-in',
         top: {
             from: slideAmount,
             to: '0px',
         },
     };
-    const slideDown: PositionAnimationSettings = {
+    const slideDownSettings: PositionAnimationSettings = {
         timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
         top: {
             from: '0px',
@@ -54,8 +54,8 @@ export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props =
     return (
         <SlideAnimation
             position="relative"
-            slideIn={slideUp}
-            slideOut={slideDown}
+            slideInSettings={slideUpSettings}
+            slideOutSettings={slideDownSettings}
             animationState={props.animationState}
         >
             <Error icon={props.icon} message={props.message} />
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
index 19034eb95..9219ad1f1 100644
--- a/packages/instant/src/components/sliding_panel.tsx
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -30,7 +30,7 @@ export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props =
     }
     const { animationState, ...rest } = props;
     const slideAmount = '100%';
-    const slideUp: PositionAnimationSettings = {
+    const slideUpSettings: PositionAnimationSettings = {
         duration: '0.3s',
         timingFunction: 'ease-in-out',
         top: {
@@ -38,7 +38,7 @@ export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props =
             to: '0px',
         },
     };
-    const slideDown: PositionAnimationSettings = {
+    const slideDownSettings: PositionAnimationSettings = {
         duration: '0.3s',
         timingFunction: 'ease-out',
         top: {
@@ -47,7 +47,12 @@ export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props =
         },
     };
     return (
-        <SlideAnimation position="absolute" slideIn={slideUp} slideOut={slideDown} animationState={animationState}>
+        <SlideAnimation
+            position="absolute"
+            slideInSettings={slideUpSettings}
+            slideOutSettings={slideDownSettings}
+            animationState={animationState}
+        >
             <Panel {...rest} />
         </SlideAnimation>
     );
diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts
index 7cfee2491..28f76c262 100644
--- a/packages/instant/src/components/ui/index.ts
+++ b/packages/instant/src/components/ui/index.ts
@@ -1,7 +1,7 @@
 export { Text, Title } from './text';
-export { Button } from './button';
-export { Flex } from './flex';
-export { Container } from './container';
-export { Input } from './input';
-export { Icon } from './icon';
-export { Spinner } from './spinner';
+export { Button, ButtonProps } from './button';
+export { Flex, FlexProps } from './flex';
+export { Container, ContainerProps } from './container';
+export { Input, InputProps } from './input';
+export { Icon, IconProps } from './icon';
+export { Spinner, SpinnerProps } from './spinner';
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 818a9a957..009ad9b2a 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -35,7 +35,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                     overflow="hidden"
                 >
                     <Flex direction="column" justify="flex-start">
-                        <SelectedAssetInstantHeading onSymbolClick={this._handleSymbolClick} />
+                        <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
                         <LatestBuyQuoteOrderDetails />
                         <Container padding="20px" width="100%">
                             <SelectedAssetBuyOrderStateButtons />
diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts
index e413c7ef1..a407279e6 100644
--- a/packages/instant/src/containers/selected_asset_instant_heading.ts
+++ b/packages/instant/src/containers/selected_asset_instant_heading.ts
@@ -10,7 +10,7 @@ import { AsyncProcessState, ERC20Asset, OrderState } from '../types';
 import { InstantHeading } from '../components/instant_heading';
 
 export interface InstantHeadingProps {
-    onSymbolClick?: (asset?: ERC20Asset) => void;
+    onSelectAssetClick?: (asset?: ERC20Asset) => void;
 }
 
 interface ConnectedState {
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 4df7faab9..217d603d2 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -19,7 +19,7 @@ import { errorFlasher } from '../util/error_flasher';
 export interface SelectedERC20AssetAmountInputProps {
     fontColor?: ColorOption;
     startingFontSizePx: number;
-    onSymbolClick?: (asset?: ERC20Asset) => void;
+    onSelectAssetClick?: (asset?: ERC20Asset) => void;
 }
 
 interface ConnectedState {
-- 
cgit v1.2.3