aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/instant/src/components/instant_heading.tsx70
-rw-r--r--packages/instant/src/containers/selected_asset_instant_heading.ts2
2 files changed, 45 insertions, 27 deletions
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index a36d35a93..6fc5a0963 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -14,6 +14,7 @@ export interface InstantHeadingProps {
totalEthBaseAmount?: BigNumber;
ethUsdPrice?: BigNumber;
quoteState: AsyncProcessState;
+ buyOrderState: AsyncProcessState;
}
const Placeholder = () => (
@@ -54,32 +55,47 @@ const loadingOrAmount = (quoteState: AsyncProcessState, amount: React.ReactNode)
}
};
-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
- </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))}
+const topText = (buyOrderState: AsyncProcessState): string => {
+ if (buyOrderState === AsyncProcessState.FAILURE) {
+ return 'Order failed';
+ }
+
+ return 'I want to buy';
+};
+
+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>
- </Flex>
- </Container>
-);
+ </Container>
+ );
+};
diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts
index 0509db5da..743362151 100644
--- a/packages/instant/src/containers/selected_asset_instant_heading.ts
+++ b/packages/instant/src/containers/selected_asset_instant_heading.ts
@@ -16,6 +16,7 @@ interface ConnectedState {
totalEthBaseAmount?: BigNumber;
ethUsdPrice?: BigNumber;
quoteState: AsyncProcessState;
+ buyOrderState: AsyncProcessState;
}
const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({
@@ -23,6 +24,7 @@ const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): Connecte
totalEthBaseAmount: oc(state).latestBuyQuote.worstCaseQuoteInfo.totalEthAmount(),
ethUsdPrice: state.ethUsdPrice,
quoteState: state.quoteState,
+ buyOrderState: state.buyOrderState,
});
export const SelectedAssetInstantHeading: React.ComponentClass<InstantHeadingProps> = connect(mapStateToProps)(