Merge branch 'feature/instant/beta-render-et-al' into feature/instant/failure-state

1 files changed, 70 insertions, 75 deletions

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 6fc5a0963..5d39e4048 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -7,95 +7,90 @@ 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 {
     selectedAssetAmount?: BigNumber;
     totalEthBaseAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
-    quoteState: AsyncProcessState;
+    quoteRequestState: AsyncProcessState;
     buyOrderState: AsyncProcessState;
 }
 
-const Placeholder = () => (
-    <Text fontWeight="bold" fontColor={ColorOption.white}>
-        &mdash;
-    </Text>
-);
-const displaytotalEthBaseAmount = ({
-    selectedAssetAmount,
-    totalEthBaseAmount,
-}: InstantHeadingProps): React.ReactNode => {
-    if (_.isUndefined(selectedAssetAmount)) {
-        return '0 ETH';
+const placeholderColor = ColorOption.white;
+export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
+    public render(): React.ReactNode {
+        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"
+                    >
+                        {this._renderTopText()}
+                    </Text>
+                </Container>
+                <Flex direction="row" justify="space-between">
+                    <SelectedAssetAmountInput fontSize="45px" />
+                    <Flex direction="column" justify="space-between">
+                        <Container marginBottom="5px">{this._placeholderOrAmount(this._ethAmount)}</Container>
+                        <Container opacity={0.7}>{this._placeholderOrAmount(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';
-    }
-    return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, <Placeholder />);
-};
+    private _renderTopText(): React.ReactNode {
+        if (this.props.buyOrderState === AsyncProcessState.FAILURE) {
+            return 'Order failed';
+        }
 
-const loadingOrAmount = (quoteState: AsyncProcessState, amount: React.ReactNode): React.ReactNode => {
-    if (quoteState === AsyncProcessState.PENDING) {
-        return (
-            <Text fontWeight="bold" fontColor={ColorOption.white}>
-                &hellip;loading
-            </Text>
-        );
-    } else {
-        return amount;
+        return 'I want to buy';
     }
-};
 
-const topText = (buyOrderState: AsyncProcessState): string => {
-    if (buyOrderState === AsyncProcessState.FAILURE) {
-        return 'Order failed';
+    private _placeholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode {
+        if (this.props.quoteRequestState === AsyncProcessState.PENDING) {
+            return <AmountPlaceholder isPulsating={true} color={placeholderColor} />;
+        }
+        if (_.isUndefined(this.props.selectedAssetAmount)) {
+            return <AmountPlaceholder isPulsating={false} color={placeholderColor} />;
+        }
+        return amountFunction();
     }
 
-    return 'I want to buy';
-};
+    private readonly _ethAmount = (): React.ReactNode => {
+        return (
+            <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
+                {format.ethBaseAmount(
+                    this.props.totalEthBaseAmount,
+                    4,
+                    <AmountPlaceholder isPulsating={false} color={placeholderColor} />,
+                )}
+            </Text>
+        );
+    };
 
-export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = props => {
-    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"
-                >
-                    {topText(props.buyOrderState)}
-                </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.quoteState, displaytotalEthBaseAmount(props))}
-                        </Text>
-                    </Container>
-                    <Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}>
-                        {loadingOrAmount(props.quoteState, displayUsdAmount(props))}
-                    </Text>
-                </Flex>
-            </Flex>
-        </Container>
-    );
-};
+    private readonly _dollarAmount = (): React.ReactNode => {
+        return (
+            <Text fontSize="16px" fontColor={ColorOption.white}>
+                {format.ethBaseAmountInUsd(
+                    this.props.totalEthBaseAmount,
+                    this.props.ethUsdPrice,
+                    2,
+                    <AmountPlaceholder isPulsating={false} color={ColorOption.white} />,
+                )}
+            </Text>
+        );
+    };
+}