diff options
| author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-19 08:16:28 +0800 |
|---|---|---|
| committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-19 08:16:28 +0800 |
| commit | 1737411ab7478de4a394242c930fcc7189daae07 (patch) | |
| tree | 87480ed4c430e6925e280058deecb43f887d8a2d /packages/instant/src/components | |
| parent | 44635f34f0df4da935ed4793566995873aac5055 (diff) | |
| download | dexon-sol-tools-1737411ab7478de4a394242c930fcc7189daae07.tar dexon-sol-tools-1737411ab7478de4a394242c930fcc7189daae07.tar.gz dexon-sol-tools-1737411ab7478de4a394242c930fcc7189daae07.tar.bz2 dexon-sol-tools-1737411ab7478de4a394242c930fcc7189daae07.tar.lz dexon-sol-tools-1737411ab7478de4a394242c930fcc7189daae07.tar.xz dexon-sol-tools-1737411ab7478de4a394242c930fcc7189daae07.tar.zst dexon-sol-tools-1737411ab7478de4a394242c930fcc7189daae07.zip | |
Show order failed messaging when order fails
Diffstat (limited to 'packages/instant/src/components')
| -rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 70 |
1 files changed, 43 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> + ); +}; |