aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/instant/src/components/animations/slide_animation.tsx2
-rw-r--r--packages/instant/src/components/sliding_error.tsx3
-rw-r--r--packages/instant/src/components/sliding_panel.tsx4
-rw-r--r--packages/instant/src/components/standard_sliding_panel.tsx28
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx4
-rw-r--r--packages/instant/src/containers/current_standard_sliding_panel.ts31
-rw-r--r--packages/instant/src/containers/latest_error.tsx3
-rw-r--r--packages/instant/src/redux/actions.ts7
-rw-r--r--packages/instant/src/redux/reducer.ts23
-rw-r--r--packages/instant/src/types.ts12
10 files changed, 109 insertions, 8 deletions
diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx
index 9adb1c674..5992bcba7 100644
--- a/packages/instant/src/components/animations/slide_animation.tsx
+++ b/packages/instant/src/components/animations/slide_animation.tsx
@@ -1,10 +1,10 @@
import * as React from 'react';
import { OptionallyScreenSpecific } from '../../style/media';
+import { SlideAnimationState } from '../../types';
import { PositionAnimation, PositionAnimationSettings } from './position_animation';
-export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none';
export interface SlideAnimationProps {
animationState: SlideAnimationState;
slideInSettings: OptionallyScreenSpecific<PositionAnimationSettings>;
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index a8d4e391c..b59e2a905 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -3,9 +3,10 @@ import * as React from 'react';
import { ScreenSpecification } from '../style/media';
import { ColorOption } from '../style/theme';
import { zIndex } from '../style/z_index';
+import { SlideAnimationState } from '../types';
import { PositionAnimationSettings } from './animations/position_animation';
-import { SlideAnimation, SlideAnimationState } from './animations/slide_animation';
+import { SlideAnimation } from './animations/slide_animation';
import { Container } from './ui/container';
import { Flex } from './ui/flex';
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
index bb1049a31..44bc8edb3 100644
--- a/packages/instant/src/components/sliding_panel.tsx
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -2,14 +2,14 @@ import * as React from 'react';
import { ColorOption } from '../style/theme';
import { zIndex } from '../style/z_index';
+import { SlideAnimationState } from '../types';
import { PositionAnimationSettings } from './animations/position_animation';
-import { SlideAnimation, SlideAnimationState } from './animations/slide_animation';
+import { SlideAnimation } from './animations/slide_animation';
import { Container } from './ui/container';
import { Flex } from './ui/flex';
import { Icon } from './ui/icon';
-import { Text } from './ui/text';
export interface PanelProps {
onClose?: () => void;
diff --git a/packages/instant/src/components/standard_sliding_panel.tsx b/packages/instant/src/components/standard_sliding_panel.tsx
new file mode 100644
index 000000000..6d31f3e3a
--- /dev/null
+++ b/packages/instant/src/components/standard_sliding_panel.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import { SlideAnimationState, StandardSlidingPanelContent, StandardSlidingPanelSettings } from '../types';
+
+import { SlidingPanel } from './sliding_panel';
+
+export interface StandardSlidingPanelProps extends StandardSlidingPanelSettings {
+ onClose: () => void;
+}
+
+export class StandardSlidingPanel extends React.Component<StandardSlidingPanelProps> {
+ public render(): React.ReactNode {
+ const { animationState, content, onClose } = this.props;
+ return (
+ <SlidingPanel animationState={animationState} onClose={onClose}>
+ {this._getNodeForContent(content)}
+ </SlidingPanel>
+ );
+ }
+ private readonly _getNodeForContent = (content: StandardSlidingPanelContent): React.ReactNode => {
+ switch (content) {
+ case StandardSlidingPanelContent.InstallMetaMask:
+ return 'Install MetaMask';
+ default:
+ return null;
+ }
+ };
+}
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 47fd75d25..b5f974cbe 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import { AvailableERC20TokenSelector } from '../containers/available_erc20_token_selector';
+import { CurrentStandardSlidingPanel } from '../containers/current_standard_sliding_panel';
import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details';
import { LatestError } from '../containers/latest_error';
import { SelectedAssetBuyOrderProgress } from '../containers/selected_asset_buy_order_progress';
@@ -8,8 +9,8 @@ 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 { SlideAnimationState } from '../types';
-import { SlideAnimationState } from './animations/slide_animation';
import { CSSReset } from './css_reset';
import { SlidingPanel } from './sliding_panel';
import { Container } from './ui/container';
@@ -59,6 +60,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
>
<AvailableERC20TokenSelector onTokenSelect={this._handlePanelClose} />
</SlidingPanel>
+ <CurrentStandardSlidingPanel />
</Container>
</Container>
</React.Fragment>
diff --git a/packages/instant/src/containers/current_standard_sliding_panel.ts b/packages/instant/src/containers/current_standard_sliding_panel.ts
new file mode 100644
index 000000000..82ac7fa1b
--- /dev/null
+++ b/packages/instant/src/containers/current_standard_sliding_panel.ts
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { StandardSlidingPanel } from '../components/standard_sliding_panel';
+import { Action, actions } from '../redux/actions';
+import { State } from '../redux/reducer';
+import { StandardSlidingPanelSettings } from '../types';
+
+export interface CurrentStandardSlidingPanelProps {}
+
+interface ConnectedState extends StandardSlidingPanelSettings {}
+
+interface ConnectedDispatch {
+ onClose: () => void;
+}
+
+const mapStateToProps = (state: State, _ownProps: CurrentStandardSlidingPanelProps): ConnectedState =>
+ state.standardSlidingPanelSettings;
+
+const mapDispatchToProps = (
+ dispatch: Dispatch<Action>,
+ ownProps: CurrentStandardSlidingPanelProps,
+): ConnectedDispatch => ({
+ onClose: () => dispatch(actions.closeStandardSlidingPanel()),
+});
+
+export const CurrentStandardSlidingPanel: React.ComponentClass<CurrentStandardSlidingPanelProps> = connect(
+ mapStateToProps,
+ mapDispatchToProps,
+)(StandardSlidingPanel);
diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
index 99e55a6c4..347705697 100644
--- a/packages/instant/src/containers/latest_error.tsx
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -2,10 +2,9 @@ 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';
+import { Asset, DisplayStatus, SlideAnimationState } from '../types';
export interface LatestErrorComponentProps {
asset?: Asset;
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index fc89e3d0e..a899da23c 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -2,7 +2,7 @@ import { BuyQuote } from '@0x/asset-buyer';
import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
-import { ActionsUnion, AddressAndEthBalanceInWei, Asset } from '../types';
+import { ActionsUnion, AddressAndEthBalanceInWei, Asset, StandardSlidingPanelContent } from '../types';
export interface PlainAction<T extends string> {
type: T;
@@ -42,6 +42,8 @@ export enum ActionTypes {
HIDE_ERROR = 'HIDE_ERROR',
CLEAR_ERROR = 'CLEAR_ERROR',
RESET_AMOUNT = 'RESET_AMOUNT',
+ OPEN_STANDARD_SLIDING_PANEL = 'OPEN_STANDARD_SLIDING_PANEL',
+ CLOSE_STANDARD_SLIDING_PANEL = 'CLOSE_STANDARD_SLIDING_PANEL',
}
export const actions = {
@@ -68,4 +70,7 @@ export const actions = {
hideError: () => createAction(ActionTypes.HIDE_ERROR),
clearError: () => createAction(ActionTypes.CLEAR_ERROR),
resetAmount: () => createAction(ActionTypes.RESET_AMOUNT),
+ openStandardSlidingPanel: (content: StandardSlidingPanelContent) =>
+ createAction(ActionTypes.OPEN_STANDARD_SLIDING_PANEL, content),
+ closeStandardSlidingPanel: () => createAction(ActionTypes.CLOSE_STANDARD_SLIDING_PANEL),
};
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index a5a1b6f7d..a542979cb 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -19,6 +19,8 @@ import {
OrderProcessState,
OrderState,
ProviderState,
+ StandardSlidingPanelContent,
+ StandardSlidingPanelSettings,
} from '../types';
import { Action, ActionTypes } from './actions';
@@ -30,6 +32,7 @@ export interface DefaultState {
buyOrderState: OrderState;
latestErrorDisplayStatus: DisplayStatus;
quoteRequestState: AsyncProcessState;
+ standardSlidingPanelSettings: StandardSlidingPanelSettings;
}
// State that is required but needs to be derived from the props
@@ -56,6 +59,10 @@ export const DEFAULT_STATE: DefaultState = {
buyOrderState: { processState: OrderProcessState.None },
latestErrorDisplayStatus: DisplayStatus.Hidden,
quoteRequestState: AsyncProcessState.None,
+ standardSlidingPanelSettings: {
+ animationState: 'none',
+ content: StandardSlidingPanelContent.None,
+ },
};
export const createReducer = (initialState: State) => {
@@ -213,6 +220,22 @@ export const createReducer = (initialState: State) => {
...state,
availableAssets: action.data,
};
+ case ActionTypes.OPEN_STANDARD_SLIDING_PANEL:
+ return {
+ ...state,
+ standardSlidingPanelSettings: {
+ content: action.data,
+ animationState: 'slidIn',
+ },
+ };
+ case ActionTypes.CLOSE_STANDARD_SLIDING_PANEL:
+ return {
+ ...state,
+ standardSlidingPanelSettings: {
+ content: state.standardSlidingPanelSettings.content,
+ animationState: 'slidOut',
+ },
+ };
default:
return state;
}
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 20ad2ed95..6438aba01 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -125,3 +125,15 @@ export interface AddressAndEthBalanceInWei {
address: string;
ethBalanceInWei: BigNumber;
}
+
+export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none';
+
+export enum StandardSlidingPanelContent {
+ None = 'NONE',
+ InstallMetaMask = 'INSTALL_META_MASK',
+}
+
+export interface StandardSlidingPanelSettings {
+ animationState: SlideAnimationState;
+ content: StandardSlidingPanelContent;
+}