aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/src/components/amount_placeholder.tsx29
-rw-r--r--packages/instant/src/components/animations/pulse.tsx15
-rw-r--r--packages/instant/src/components/instant_heading.tsx112
-rw-r--r--packages/instant/src/components/ui/container.tsx2
4 files changed, 101 insertions, 57 deletions
diff --git a/packages/instant/src/components/amount_placeholder.tsx b/packages/instant/src/components/amount_placeholder.tsx
new file mode 100644
index 000000000..54639effb
--- /dev/null
+++ b/packages/instant/src/components/amount_placeholder.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Pulse } from './animations/pulse';
+
+import { Text } from './ui';
+
+export interface AmountPlaceholderProps {
+ pulsating: boolean;
+}
+
+const PlainPlaceholder = () => (
+ <Text fontWeight="bold" fontColor={ColorOption.white}>
+ &mdash;
+ </Text>
+);
+
+export const AmountPlaceholder: React.StatelessComponent<AmountPlaceholderProps> = props => {
+ if (props.pulsating) {
+ return (
+ <Pulse>
+ <PlainPlaceholder />
+ </Pulse>
+ );
+ } else {
+ return <PlainPlaceholder />;
+ }
+};
diff --git a/packages/instant/src/components/animations/pulse.tsx b/packages/instant/src/components/animations/pulse.tsx
new file mode 100644
index 000000000..01d6ea070
--- /dev/null
+++ b/packages/instant/src/components/animations/pulse.tsx
@@ -0,0 +1,15 @@
+import { keyframes, styled } from '../../style/theme';
+
+const pulsingKeyframes = keyframes`
+ 0%, 100% {
+ opacity: 0.2;
+ }
+ 50% {
+ opacity: 100;
+ }
+`;
+export const Pulse = styled.div`
+ animation-name: ${pulsingKeyframes}
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+`;
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 9dd13299c..9ca4ce598 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -7,6 +7,7 @@ import { ColorOption } from '../style/theme';
import { AsyncProcessState } from '../types';
import { format } from '../util/format';
+import { AmountPlaceholder } from './amount_placeholder';
import { Container, Flex, Text } from './ui';
export interface InstantHeadingProps {
@@ -16,70 +17,67 @@ export interface InstantHeadingProps {
quoteRequestState: AsyncProcessState;
}
-const Placeholder = () => (
- <Text fontWeight="bold" fontColor={ColorOption.white}>
- &mdash;
- </Text>
-);
-const displaytotalEthBaseAmount = ({
- selectedAssetAmount,
- totalEthBaseAmount,
-}: InstantHeadingProps): React.ReactNode => {
- if (_.isUndefined(selectedAssetAmount)) {
- return '0 ETH';
+export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
+ public render(): React.ReactNode {
+ const placeholderAmountToAlwaysShow = this._placeholderAmountToAlwaysShow();
+ return (
+ <Container
+ backgroundColor={ColorOption.primaryColor}
+ padding="20px"
+ width="100%"
+ borderRadius="3px 3px 0px 0px"
+ >
+ <Container marginBottom="5px">
+ <Text
+ letterSpacing="1px"
+ fontColor={ColorOption.white}
+ opacity={0.7}
+ fontWeight={500}
+ textTransform="uppercase"
+ fontSize="12px"
+ >
+ I want to buy
+ </Text>
+ </Container>
+ <Flex direction="row" justify="space-between">
+ <SelectedAssetAmountInput fontSize="45px" />
+ <Flex direction="column" justify="space-between">
+ <Container marginBottom="5px">{placeholderAmountToAlwaysShow || this._ethAmount()}</Container>
+ <Container opacity={0.7}>{placeholderAmountToAlwaysShow || this._dollarAmount()}</Container>
+ </Flex>
+ </Flex>
+ </Container>
+ );
}
- return format.ethBaseAmount(totalEthBaseAmount, 4, <Placeholder />);
-};
-const displayUsdAmount = ({
- totalEthBaseAmount,
- selectedAssetAmount,
- ethUsdPrice,
-}: InstantHeadingProps): React.ReactNode => {
- if (_.isUndefined(selectedAssetAmount)) {
- return '$0.00';
+ private _placeholderAmountToAlwaysShow(): React.ReactNode | undefined {
+ if (this.props.quoteRequestState === AsyncProcessState.PENDING) {
+ return <AmountPlaceholder pulsating={true} />;
+ }
+ if (_.isUndefined(this.props.selectedAssetAmount)) {
+ return <AmountPlaceholder pulsating={false} />;
+ }
+ return undefined;
}
- return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, <Placeholder />);
-};
-const loadingOrAmount = (quoteRequestState: AsyncProcessState, amount: React.ReactNode): React.ReactNode => {
- if (quoteRequestState === AsyncProcessState.PENDING) {
+ private _ethAmount(): React.ReactNode {
return (
- <Text fontWeight="bold" fontColor={ColorOption.white}>
- &hellip;loading
+ <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
+ {format.ethBaseAmount(this.props.totalEthBaseAmount, 4, <AmountPlaceholder pulsating={false} />)}
</Text>
);
- } else {
- return amount;
}
-};
-export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = props => (
- <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%" borderRadius="3px 3px 0px 0px">
- <Container marginBottom="5px">
- <Text
- letterSpacing="1px"
- fontColor={ColorOption.white}
- opacity={0.7}
- fontWeight={500}
- textTransform="uppercase"
- fontSize="12px"
- >
- I want to buy
+ private _dollarAmount(): React.ReactNode {
+ return (
+ <Text fontSize="16px" fontColor={ColorOption.white}>
+ {format.ethBaseAmountInUsd(
+ this.props.totalEthBaseAmount,
+ this.props.ethUsdPrice,
+ 2,
+ <AmountPlaceholder pulsating={false} />,
+ )}
</Text>
- </Container>
- <Flex direction="row" justify="space-between">
- <SelectedAssetAmountInput fontSize="45px" />
- <Flex direction="column" justify="space-between">
- <Container marginBottom="5px">
- <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
- {loadingOrAmount(props.quoteRequestState, displaytotalEthBaseAmount(props))}
- </Text>
- </Container>
- <Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}>
- {loadingOrAmount(props.quoteRequestState, displayUsdAmount(props))}
- </Text>
- </Flex>
- </Flex>
- </Container>
-);
+ );
+ }
+}
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 02b16e39f..5e2218c68 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -27,6 +27,7 @@ export interface ContainerProps {
backgroundColor?: ColorOption;
hasBoxShadow?: boolean;
zIndex?: number;
+ opacity?: number;
}
const PlainContainer: React.StatelessComponent<ContainerProps> = ({ children, className }) => (
@@ -54,6 +55,7 @@ export const Container = styled(PlainContainer)`
${props => cssRuleIfExists(props, 'border-top')}
${props => cssRuleIfExists(props, 'border-bottom')}
${props => cssRuleIfExists(props, 'z-index')}
+ ${props => cssRuleIfExists(props, 'opacity')}
${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};