aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/src/components/animations/position_animation.tsx9
-rw-r--r--packages/instant/src/components/animations/slide_animation.tsx (renamed from packages/instant/src/components/animations/slide_animations.tsx)12
-rw-r--r--packages/instant/src/components/instant_heading.tsx8
-rw-r--r--packages/instant/src/components/panel.tsx28
-rw-r--r--packages/instant/src/components/sliding_error.tsx12
-rw-r--r--packages/instant/src/components/sliding_panel.tsx54
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx78
-rw-r--r--packages/instant/src/containers/latest_error.tsx10
-rw-r--r--packages/instant/src/containers/selected_asset_instant_heading.ts6
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;
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-15 07:15:55 +0800