Merge pull request #1201 from 0xProject/feature/instant/basic-token-modal

[instant] Add `Select Token` mode, animation abstractions, and basic token selection panel

3 files changed, 10 insertions, 6 deletions

diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
index 45ca09673..99e55a6c4 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 { SlideAnimationState } from '../components/animations/slide_animation';
 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';
+    animationState: SlideAnimationState;
 }
 
 export const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => {
     if (!props.latestErrorMessage) {
         return <div />;
     }
-    return <SlidingError direction={props.slidingDirection} icon="😢" message={props.latestErrorMessage} />;
+    return <SlidingError animationState={props.animationState} icon="😢" message={props.latestErrorMessage} />;
 };
 
 interface ConnectedState {
     asset?: Asset;
     latestErrorMessage?: string;
-    slidingDirection: 'down' | 'up';
+    animationState: SlideAnimationState;
 }
 export interface LatestErrorProps {}
 const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({
     asset: state.selectedAsset,
     latestErrorMessage: state.latestErrorMessage,
-    slidingDirection: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'up' : 'down',
+    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..a407279e6 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 {
+    onSelectAssetClick?: (asset?: ERC20Asset) => void;
+}
 
 interface ConnectedState {
     selectedAssetAmount?: BigNumber;
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..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,6 +19,7 @@ import { errorFlasher } from '../util/error_flasher';
 export interface SelectedERC20AssetAmountInputProps {
     fontColor?: ColorOption;
     startingFontSizePx: number;
+    onSelectAssetClick?: (asset?: ERC20Asset) => void;
 }
 
 interface ConnectedState {