crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show order failed messaging when order fails

Browse Source
This commit is contained in:
Steve Klebanoff
2018-10-18 17:16:28 -07:00
parent 44635f34f0
commit 1737411ab7
2 changed files with 45 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
packages/instant/src/components/instant_heading.tsx
View File

@@ -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>
);
};

2
packages/instant/src/containers/selected_asset_instant_heading.ts
View File

@@ -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)(