aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-26 09:46:33 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-26 09:46:33 +0800
commit39f92e4c958590a58ac5c48db197f98fdd9723e1 (patch)
tree3f0f136430f378b66f3c4befd4817953a2116f9c
parentced4c893ba412ca401430a66694e194806d46e6b (diff)
downloaddexon-sol-tools-39f92e4c958590a58ac5c48db197f98fdd9723e1.tar
dexon-sol-tools-39f92e4c958590a58ac5c48db197f98fdd9723e1.tar.gz
dexon-sol-tools-39f92e4c958590a58ac5c48db197f98fdd9723e1.tar.bz2
dexon-sol-tools-39f92e4c958590a58ac5c48db197f98fdd9723e1.tar.lz
dexon-sol-tools-39f92e4c958590a58ac5c48db197f98fdd9723e1.tar.xz
dexon-sol-tools-39f92e4c958590a58ac5c48db197f98fdd9723e1.tar.zst
dexon-sol-tools-39f92e4c958590a58ac5c48db197f98fdd9723e1.zip
Get BuyOrderState one big connected component, and let user view failure
-rw-r--r--packages/instant/src/components/buy_order_state_button.tsx43
-rw-r--r--packages/instant/src/components/retry_button.tsx11
-rw-r--r--packages/instant/src/components/secondary_button.tsx1
-rw-r--r--packages/instant/src/components/ui/button.tsx1
-rw-r--r--packages/instant/src/components/view_transaction_button.tsx11
-rw-r--r--packages/instant/src/containers/selected_asset_buy_button.ts55
-rw-r--r--packages/instant/src/containers/selected_asset_buy_order_state_button.tsx60
-rw-r--r--packages/instant/src/containers/selected_asset_retry_button.tsx28
-rw-r--r--packages/instant/src/containers/selected_asset_view_transaction_button.tsx43
9 files changed, 96 insertions, 157 deletions
diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx
index 73a4d62e2..17aa46df5 100644
--- a/packages/instant/src/components/buy_order_state_button.tsx
+++ b/packages/instant/src/components/buy_order_state_button.tsx
@@ -1,15 +1,28 @@
+import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
import * as React from 'react';
import { Flex } from '../components/ui/flex';
+import { SecondaryButton } from '../components/secondary_button';
+import { BuyButton } from '../components/buy_button';
import { PlacingOrderButton } from '../components/placing_order_button';
-import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button';
-import { SelectedAssetRetryButton } from '../containers/selected_asset_retry_button';
-import { SelectedAssetViewTransactionButton } from '../containers/selected_asset_view_transaction_button';
+import { ColorOption } from '../style/theme';
import { OrderProcessState } from '../types';
+import { Button } from './ui/button';
+import { Text } from './ui/text';
+
export interface BuyOrderStateButtonProps {
+ buyQuote?: BuyQuote;
buyOrderProcessingState: OrderProcessState;
+ assetBuyer?: AssetBuyer;
+ onViewTransaction: () => void;
+ onAwaitingSignature: (buyQuote: BuyQuote) => void;
+ onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
+ onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
+ onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
+ onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
+ onRetry: () => void;
}
// TODO: rename to buttons
@@ -17,18 +30,34 @@ export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonPr
if (props.buyOrderProcessingState === OrderProcessState.FAILURE) {
return (
<Flex justify="space-between">
- <SelectedAssetRetryButton width="48%" />
- <SelectedAssetViewTransactionButton width="48%" />
+ <Button width="48%" onClick={props.onRetry}>
+ <Text fontColor={ColorOption.white} fontWeight={600} fontSize="16px">
+ Back
+ </Text>
+ </Button>
+ <SecondaryButton width="48%" onClick={props.onViewTransaction}>
+ Details
+ </SecondaryButton>
</Flex>
);
} else if (
props.buyOrderProcessingState === OrderProcessState.SUCCESS ||
props.buyOrderProcessingState === OrderProcessState.PROCESSING
) {
- return <SelectedAssetViewTransactionButton />;
+ return <SecondaryButton onClick={props.onViewTransaction}>View Transaction</SecondaryButton>;
} else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) {
return <PlacingOrderButton />;
}
- return <SelectedAssetBuyButton />;
+ return (
+ <BuyButton
+ buyQuote={props.buyQuote}
+ assetBuyer={props.assetBuyer}
+ onAwaitingSignature={props.onAwaitingSignature}
+ onSignatureDenied={props.onSignatureDenied}
+ onBuyProcessing={props.onBuyProcessing}
+ onBuySuccess={props.onBuySuccess}
+ onBuyFailure={props.onBuyFailure}
+ />
+ );
};
diff --git a/packages/instant/src/components/retry_button.tsx b/packages/instant/src/components/retry_button.tsx
deleted file mode 100644
index 36ae55e72..000000000
--- a/packages/instant/src/components/retry_button.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-import { SecondaryButton, SecondaryButtonProps } from './secondary_button';
-
-export interface RetryButtonProps extends SecondaryButtonProps {
- onClick: () => void;
-}
-
-export const RetryButton: React.StatelessComponent<RetryButtonProps> = props => {
- return <SecondaryButton {...props}>Try Again</SecondaryButton>;
-};
diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx
index 849003d0a..583058b5b 100644
--- a/packages/instant/src/components/secondary_button.tsx
+++ b/packages/instant/src/components/secondary_button.tsx
@@ -8,7 +8,6 @@ import { Text } from './ui/text';
export interface SecondaryButtonProps extends ButtonProps {}
-// TODO: don't hard code this
export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = props => {
const buttonProps = _.omit(props, 'text');
return (
diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
index 1fcb2591c..5274d835b 100644
--- a/packages/instant/src/components/ui/button.tsx
+++ b/packages/instant/src/components/ui/button.tsx
@@ -52,6 +52,7 @@ export const Button = styled(PlainButton)`
Button.defaultProps = {
backgroundColor: ColorOption.primaryColor,
+ borderColor: ColorOption.primaryColor,
width: 'auto',
isDisabled: false,
padding: '1em 2.2em',
diff --git a/packages/instant/src/components/view_transaction_button.tsx b/packages/instant/src/components/view_transaction_button.tsx
deleted file mode 100644
index 8d11bf132..000000000
--- a/packages/instant/src/components/view_transaction_button.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-import { SecondaryButton, SecondaryButtonProps } from './secondary_button';
-
-export interface ViewTransactionButtonProps extends SecondaryButtonProps {
- onClick: () => void;
-}
-
-export const ViewTransactionButton: React.StatelessComponent<ViewTransactionButtonProps> = props => {
- return <SecondaryButton {...props}>View Transaction</SecondaryButton>;
-};
diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts
deleted file mode 100644
index adcbd61bc..000000000
--- a/packages/instant/src/containers/selected_asset_buy_button.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
-import * as _ from 'lodash';
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-
-import { Action, actions } from '../redux/actions';
-import { State } from '../redux/reducer';
-import { OrderProcessState, OrderState } from '../types';
-
-import { BuyButton } from '../components/buy_button';
-
-export interface SelectedAssetBuyButtonProps {}
-
-interface ConnectedState {
- assetBuyer?: AssetBuyer;
- buyQuote?: BuyQuote;
-}
-
-interface ConnectedDispatch {
- onAwaitingSignature: (buyQuote: BuyQuote) => void;
- onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
- onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
- onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
- onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
-}
-
-const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({
- assetBuyer: state.assetBuyer,
- buyQuote: state.latestBuyQuote,
-});
-
-const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({
- onAwaitingSignature: (buyQuote: BuyQuote) => {
- const newOrderState: OrderState = { processState: OrderProcessState.AWAITING_SIGNATURE };
- dispatch(actions.updateBuyOrderState(newOrderState));
- },
- onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => {
- const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash };
- dispatch(actions.updateBuyOrderState(newOrderState));
- },
- onBuySuccess: (buyQuote: BuyQuote, txHash: string) =>
- dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })),
- onBuyFailure: (buyQuote: BuyQuote, txHash: string) =>
- dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })),
- onSignatureDenied: (buyQuote, error) => {
- dispatch(actions.resetAmount());
- dispatch(actions.setError(error));
- },
-});
-
-export const SelectedAssetBuyButton: React.ComponentClass<SelectedAssetBuyButtonProps> = connect(
- mapStateToProps,
- mapDispatchToProps,
-)(BuyButton);
diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx b/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx
index 7faa79912..fa5de4e68 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx
@@ -1,20 +1,78 @@
+import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
import * as _ from 'lodash';
import * as React from 'react';
import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { Action, actions } from '../redux/actions';
import { State } from '../redux/reducer';
-import { OrderProcessState } from '../types';
+import { OrderProcessState, OrderState } from '../types';
+import { etherscanUtil } from '../util/etherscan';
import { BuyOrderStateButton } from '../components/buy_order_state_button';
interface ConnectedState {
+ buyQuote?: BuyQuote;
buyOrderProcessingState: OrderProcessState;
+ assetBuyer?: AssetBuyer;
+ onViewTransaction: () => void;
+}
+
+interface ConnectedDispatch {
+ onAwaitingSignature: (buyQuote: BuyQuote) => void;
+ onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
+ onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
+ onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
+ onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
+ onRetry: () => void;
}
export interface SelectedAssetButtonProps {}
const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({
buyOrderProcessingState: state.buyOrderState.processState,
+ assetBuyer: state.assetBuyer,
+ buyQuote: state.latestBuyQuote,
+ onViewTransaction: () => {
+ if (
+ state.assetBuyer &&
+ (state.buyOrderState.processState === OrderProcessState.PROCESSING ||
+ state.buyOrderState.processState === OrderProcessState.SUCCESS ||
+ state.buyOrderState.processState === OrderProcessState.FAILURE)
+ ) {
+ const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
+ state.buyOrderState.txHash,
+ state.assetBuyer.networkId,
+ );
+ if (etherscanUrl) {
+ window.open(etherscanUrl, '_blank');
+ return;
+ }
+ }
+ },
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetButtonProps): ConnectedDispatch => ({
+ onAwaitingSignature: (buyQuote: BuyQuote) => {
+ const newOrderState: OrderState = { processState: OrderProcessState.AWAITING_SIGNATURE };
+ dispatch(actions.updateBuyOrderState(newOrderState));
+ },
+ onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => {
+ const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash };
+ dispatch(actions.updateBuyOrderState(newOrderState));
+ },
+ onBuySuccess: (buyQuote: BuyQuote, txHash: string) =>
+ dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })),
+ onBuyFailure: (buyQuote: BuyQuote, txHash: string) =>
+ dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })),
+ onSignatureDenied: (buyQuote, error) => {
+ dispatch(actions.resetAmount());
+ dispatch(actions.setError(error));
+ },
+ onRetry: () => {
+ dispatch(actions.resetAmount());
+ },
});
export const SelectedAssetBuyOrderStateButton: React.ComponentClass<SelectedAssetButtonProps> = connect(
mapStateToProps,
+ mapDispatchToProps,
)(BuyOrderStateButton);
diff --git a/packages/instant/src/containers/selected_asset_retry_button.tsx b/packages/instant/src/containers/selected_asset_retry_button.tsx
deleted file mode 100644
index 30e564c7b..000000000
--- a/packages/instant/src/containers/selected_asset_retry_button.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-
-import { Action, actions } from '../redux/actions';
-
-import { RetryButton } from '../components/retry_button';
-
-export interface SelectedAssetRetryButtonProps {
- width?: string;
-}
-
-interface ConnectedDispatch {
- onClick: () => void;
-}
-
-const mapDispatchToProps = (
- dispatch: Dispatch<Action>,
- _ownProps: SelectedAssetRetryButtonProps,
-): ConnectedDispatch => ({
- onClick: () => dispatch(actions.resetAmount()),
-});
-
-export const SelectedAssetRetryButton: React.ComponentClass<SelectedAssetRetryButtonProps> = connect(
- _.noop,
- mapDispatchToProps,
-)(RetryButton);
diff --git a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
deleted file mode 100644
index c74f07209..000000000
--- a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import { State } from '../redux/reducer';
-
-import { ViewTransactionButton } from '../components/view_transaction_button';
-import { OrderProcessState } from '../types';
-import { etherscanUtil } from '../util/etherscan';
-
-export interface SelectedAssetViewTransactionButtonProps {
- width?: string;
-}
-
-interface ConnectedState {
- onClick: () => void;
- width?: string;
-}
-
-const mapStateToProps = (state: State, ownProps: SelectedAssetViewTransactionButtonProps): ConnectedState => ({
- onClick: () => {
- if (
- state.assetBuyer &&
- (state.buyOrderState.processState === OrderProcessState.PROCESSING ||
- state.buyOrderState.processState === OrderProcessState.SUCCESS ||
- state.buyOrderState.processState === OrderProcessState.FAILURE)
- ) {
- const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
- state.buyOrderState.txHash,
- state.assetBuyer.networkId,
- );
- if (etherscanUrl) {
- window.open(etherscanUrl, '_blank');
- return;
- }
- }
- },
- width: ownProps.width,
-});
-
-export const SelectedAssetViewTransactionButton: React.ComponentClass<
- SelectedAssetViewTransactionButtonProps
-> = connect(mapStateToProps)(ViewTransactionButton);