aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-20 07:37:54 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-20 07:41:39 +0800
commitbf0a4bd91b6e6d15a468b0e75a3a5846c98b85ab (patch)
tree0c5a0b64a1a20576c5d1fc2ab43cc42fc349112f /packages
parent51779fec38a32c0bbbc0209559f84aeda8a45d1a (diff)
downloaddexon-sol-tools-bf0a4bd91b6e6d15a468b0e75a3a5846c98b85ab.tar
dexon-sol-tools-bf0a4bd91b6e6d15a468b0e75a3a5846c98b85ab.tar.gz
dexon-sol-tools-bf0a4bd91b6e6d15a468b0e75a3a5846c98b85ab.tar.bz2
dexon-sol-tools-bf0a4bd91b6e6d15a468b0e75a3a5846c98b85ab.tar.lz
dexon-sol-tools-bf0a4bd91b6e6d15a468b0e75a3a5846c98b85ab.tar.xz
dexon-sol-tools-bf0a4bd91b6e6d15a468b0e75a3a5846c98b85ab.tar.zst
dexon-sol-tools-bf0a4bd91b6e6d15a468b0e75a3a5846c98b85ab.zip
feat(instant): Add failure state and icon
Diffstat (limited to 'packages')
-rw-r--r--packages/instant/src/components/retry_button.tsx17
-rw-r--r--packages/instant/src/components/secondary_button.tsx28
-rw-r--r--packages/instant/src/containers/selected_asset_button.tsx5
3 files changed, 35 insertions, 15 deletions
diff --git a/packages/instant/src/components/retry_button.tsx b/packages/instant/src/components/retry_button.tsx
index 5e36506d0..28547ce54 100644
--- a/packages/instant/src/components/retry_button.tsx
+++ b/packages/instant/src/components/retry_button.tsx
@@ -1,24 +1,11 @@
import * as React from 'react';
-import { ColorOption } from '../style/theme';
-
-import { Button, Text } from './ui';
+import { SecondaryButton } from './secondary_button';
export interface RetryButtonProps {
onClick: () => void;
}
export const RetryButton: React.StatelessComponent<RetryButtonProps> = props => {
- return (
- <Button
- backgroundColor={ColorOption.white}
- borderColor={ColorOption.lightGrey}
- width="100%"
- onClick={props.onClick}
- >
- <Text fontColor={ColorOption.primaryColor} fontWeight={600} fontSize="16px">
- Try Again
- </Text>
- </Button>
- );
+ return <SecondaryButton text="Try Again" onClick={props.onClick} />;
};
diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx
new file mode 100644
index 000000000..e073f6061
--- /dev/null
+++ b/packages/instant/src/components/secondary_button.tsx
@@ -0,0 +1,28 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Button, ButtonProps } from './ui/button';
+import { Text } from './ui/text';
+
+export interface SecondaryButtonProps extends ButtonProps {
+ text: string;
+}
+
+export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = props => {
+ const buttonProps = _.omit(props, 'text');
+ return (
+ <Button
+ backgroundColor={ColorOption.white}
+ borderColor={ColorOption.lightGrey}
+ width="100%"
+ onClick={props.onClick}
+ {...buttonProps}
+ >
+ <Text fontColor={ColorOption.primaryColor} fontWeight={600} fontSize="16px">
+ {props.text}
+ </Text>
+ </Button>
+ );
+};
diff --git a/packages/instant/src/containers/selected_asset_button.tsx b/packages/instant/src/containers/selected_asset_button.tsx
index d84ae1a52..8c617804e 100644
--- a/packages/instant/src/containers/selected_asset_button.tsx
+++ b/packages/instant/src/containers/selected_asset_button.tsx
@@ -2,6 +2,7 @@ import * as _ from 'lodash';
import * as React from 'react';
import { connect } from 'react-redux';
+import { SecondaryButton } from '../components/secondary_button';
import { State } from '../redux/reducer';
import { AsyncProcessState } from '../types';
@@ -21,6 +22,10 @@ const SelectedAssetButtonPresentationComponent: React.StatelessComponent<{
}> = props => {
if (props.buyOrderState === AsyncProcessState.FAILURE) {
return <SelectedAssetRetryButton />;
+ } else if (props.buyOrderState === AsyncProcessState.SUCCESS) {
+ return <SecondaryButton text="Success" isDisabled={true} />;
+ } else if (props.buyOrderState === AsyncProcessState.PENDING) {
+ return <SecondaryButton text="Processing" isDisabled={true} />;
}
return <SelectedAssetBuyButton />;