feat: implement sliding panel

9 files changed, 138 insertions, 79 deletions

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_animations.tsx b/packages/instant/src/components/animations/slide_animation.tsx
index 9f1535297..4124e50c3 100644
--- a/packages/instant/src/components/animations/slide_animations.tsx
+++ b/packages/instant/src/components/animations/slide_animation.tsx
@@ -1,20 +1,20 @@
 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 type SlideAnimationState = 'slidIn' | 'slidOut' | 'none';
 export interface SlideAnimationProps {
     position: string;
-    phase: SlideAnimationPhase;
+    animationState: SlideAnimationState;
     slideIn: PositionAnimationSettings;
     slideOut: PositionAnimationSettings;
 }
 
 export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
-    const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut;
+    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}
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;