Merge branch 'development' into feature/instant/simulated-progress-bar

1 files changed, 52 insertions, 22 deletions

diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index c47f3af73..f8e3935fb 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -8,30 +8,60 @@ import { SelectedAssetInstantHeading } from '../containers/selected_asset_instan
 import { SelectedAssetBuyOrderProgress } from '../containers/selected_asset_buy_order_progress';
 
 import { ColorOption } from '../style/theme';
+import { zIndex } from '../style/z_index';
 
+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">
-        <Container zIndex={1} position="relative">
-            <LatestError />
-        </Container>
-        <Container
-            zIndex={2}
-            position="relative"
-            backgroundColor={ColorOption.white}
-            borderRadius="3px"
-            hasBoxShadow={true}
-        >
-            <Flex direction="column" justify="flex-start">
-                <SelectedAssetInstantHeading />
-                <SelectedAssetBuyOrderProgress />
-                <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>
-    </Container>
-);
+                <Container
+                    zIndex={zIndex.mainContainer}
+                    position="relative"
+                    backgroundColor={ColorOption.white}
+                    borderRadius="3px"
+                    hasBoxShadow={true}
+                    overflow="hidden"
+                >
+                    <Flex direction="column" justify="flex-start">
+                        <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
+                        <SelectedAssetBuyOrderProgress />
+                        <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',
+        });
+    };
+}