aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src
diff options
context:
space:
mode:
authorSteve Klebanoff <steve@0xproject.com>2018-10-26 06:51:05 +0800
committerGitHub <noreply@github.com>2018-10-26 06:51:05 +0800
commit4a96dbe085004be49dbbaa435d4552a9c920d823 (patch)
tree019dfc8d780970cd7ac2c7cfbcdc28d3c3dc5d0f /packages/instant/src
parent11bc10a3ae80be178d89ff6c9fbf509a48deef7f (diff)
parent89e59cca28a86763519237ab9c6971600e200b5e (diff)
downloaddexon-sol-tools-4a96dbe085004be49dbbaa435d4552a9c920d823.tar
dexon-sol-tools-4a96dbe085004be49dbbaa435d4552a9c920d823.tar.gz
dexon-sol-tools-4a96dbe085004be49dbbaa435d4552a9c920d823.tar.bz2
dexon-sol-tools-4a96dbe085004be49dbbaa435d4552a9c920d823.tar.lz
dexon-sol-tools-4a96dbe085004be49dbbaa435d4552a9c920d823.tar.xz
dexon-sol-tools-4a96dbe085004be49dbbaa435d4552a9c920d823.tar.zst
dexon-sol-tools-4a96dbe085004be49dbbaa435d4552a9c920d823.zip
Merge pull request #1184 from 0xProject/feature/instant/view-processings-txn
[instant] View Processing Transaction
Diffstat (limited to 'packages/instant/src')
-rw-r--r--packages/instant/src/components/buy_button.tsx38
-rw-r--r--packages/instant/src/components/buy_order_state_button.tsx13
-rw-r--r--packages/instant/src/components/instant_heading.tsx15
-rw-r--r--packages/instant/src/constants.ts1
-rw-r--r--packages/instant/src/containers/selected_asset_amount_input.ts4
-rw-r--r--packages/instant/src/containers/selected_asset_buy_button.ts29
-rw-r--r--packages/instant/src/containers/selected_asset_buy_order_state_button.tsx4
-rw-r--r--packages/instant/src/containers/selected_asset_view_transaction_button.tsx10
-rw-r--r--packages/instant/src/redux/reducer.ts14
-rw-r--r--packages/instant/src/types.ts22
-rw-r--r--packages/instant/src/util/etherscan.ts4
11 files changed, 101 insertions, 53 deletions
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 0d35d36ca..a70269dde 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -2,6 +2,7 @@ import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
import * as _ from 'lodash';
import * as React from 'react';
+import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
import { ColorOption } from '../style/theme';
import { util } from '../util/util';
import { web3Wrapper } from '../util/web3_wrapper';
@@ -11,10 +12,11 @@ import { Button, Text } from './ui';
export interface BuyButtonProps {
buyQuote?: BuyQuote;
assetBuyer?: AssetBuyer;
- onClick: (buyQuote: BuyQuote) => void;
- onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void;
- onBuyFailure: (buyQuote: BuyQuote, tnxHash?: string) => void;
- onBuyPrevented: (buyQuote: BuyQuote, preventedError: Error) => void;
+ onAwaitingSignature: (buyQuote: BuyQuote) => void;
+ onSignatureDenied: (buyQuote: BuyQuote, preventedError: Error) => void;
+ onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
+ onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
+ onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
}
export class BuyButton extends React.Component<BuyButtonProps> {
@@ -35,21 +37,33 @@ export class BuyButton extends React.Component<BuyButtonProps> {
}
private readonly _handleClick = async () => {
// The button is disabled when there is no buy quote anyway.
- if (_.isUndefined(this.props.buyQuote) || _.isUndefined(this.props.assetBuyer)) {
+ const { buyQuote, assetBuyer } = this.props;
+ if (_.isUndefined(buyQuote) || _.isUndefined(assetBuyer)) {
return;
}
- this.props.onClick(this.props.buyQuote);
- let txnHash;
+
+ let txHash: string | undefined;
+ this.props.onAwaitingSignature(buyQuote);
try {
- txnHash = await this.props.assetBuyer.executeBuyQuoteAsync(this.props.buyQuote);
- const txnReceipt = await web3Wrapper.awaitTransactionSuccessAsync(txnHash);
- this.props.onBuySuccess(this.props.buyQuote, txnReceipt.transactionHash);
+ txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote);
} catch (e) {
if (e instanceof Error && e.message === AssetBuyerError.SignatureRequestDenied) {
- this.props.onBuyPrevented(this.props.buyQuote, e);
+ this.props.onSignatureDenied(buyQuote, e);
+ return;
+ }
+ throw e;
+ }
+
+ this.props.onBuyProcessing(buyQuote, txHash);
+ try {
+ await web3Wrapper.awaitTransactionSuccessAsync(txHash);
+ } catch (e) {
+ if (e instanceof Error && e.message.startsWith(WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX)) {
+ this.props.onBuyFailure(buyQuote, txHash);
return;
}
- this.props.onBuyFailure(this.props.buyQuote, txnHash);
+ throw e;
}
+ this.props.onBuySuccess(buyQuote, txHash);
};
}
diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx
index 5bc965c7d..44115e5a1 100644
--- a/packages/instant/src/components/buy_order_state_button.tsx
+++ b/packages/instant/src/components/buy_order_state_button.tsx
@@ -4,18 +4,21 @@ 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 { AsyncProcessState } from '../types';
+import { OrderProcessState } from '../types';
export interface BuyOrderStateButtonProps {
- buyOrderProcessingState: AsyncProcessState;
+ buyOrderProcessingState: OrderProcessState;
}
export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonProps> = props => {
- if (props.buyOrderProcessingState === AsyncProcessState.FAILURE) {
+ if (props.buyOrderProcessingState === OrderProcessState.FAILURE) {
return <SelectedAssetRetryButton />;
- } else if (props.buyOrderProcessingState === AsyncProcessState.SUCCESS) {
+ } else if (
+ props.buyOrderProcessingState === OrderProcessState.SUCCESS ||
+ props.buyOrderProcessingState === OrderProcessState.PROCESSING
+ ) {
return <SelectedAssetViewTransactionButton />;
- } else if (props.buyOrderProcessingState === AsyncProcessState.PENDING) {
+ } else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) {
return <PlacingOrderButton />;
}
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index ed753a3bd..17ac65429 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -4,12 +4,13 @@ import * as React from 'react';
import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input';
import { ColorOption } from '../style/theme';
-import { AsyncProcessState, OrderState } from '../types';
+import { AsyncProcessState, OrderProcessState, OrderState } from '../types';
import { format } from '../util/format';
import { AmountPlaceholder } from './amount_placeholder';
import { Container, Flex, Text } from './ui';
import { Icon } from './ui/icon';
+import { Spinner } from './ui/spinner';
export interface InstantHeadingProps {
selectedAssetAmount?: BigNumber;
@@ -68,9 +69,11 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
private _renderIcon(): React.ReactNode {
const processState = this.props.buyOrderState.processState;
- if (processState === AsyncProcessState.FAILURE) {
+ if (processState === OrderProcessState.FAILURE) {
return <Icon icon={'failed'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
- } else if (processState === AsyncProcessState.SUCCESS) {
+ } else if (processState === OrderProcessState.PROCESSING) {
+ return <Spinner widthPx={ICON_HEIGHT} heightPx={ICON_HEIGHT} />;
+ } else if (processState === OrderProcessState.SUCCESS) {
return <Icon icon={'success'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
}
return undefined;
@@ -78,9 +81,11 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
private _renderTopText(): React.ReactNode {
const processState = this.props.buyOrderState.processState;
- if (processState === AsyncProcessState.FAILURE) {
+ if (processState === OrderProcessState.FAILURE) {
return 'Order failed';
- } else if (processState === AsyncProcessState.SUCCESS) {
+ } else if (processState === OrderProcessState.PROCESSING) {
+ return 'Processing Order...';
+ } else if (processState === OrderProcessState.SUCCESS) {
return 'Tokens received!';
}
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 31491c80a..48d0d4aa2 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -2,3 +2,4 @@ import { BigNumber } from '@0x/utils';
export const BIG_NUMBER_ZERO = new BigNumber(0);
export const ethDecimals = 18;
export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
+export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed';
diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts
index f23b2010e..e9dbc61ce 100644
--- a/packages/instant/src/containers/selected_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_asset_amount_input.ts
@@ -10,7 +10,7 @@ import { Dispatch } from 'redux';
import { Action, actions } from '../redux/actions';
import { State } from '../redux/reducer';
import { ColorOption } from '../style/theme';
-import { AsyncProcessState, ERC20Asset } from '../types';
+import { ERC20Asset, OrderProcessState } from '../types';
import { errorUtil } from '../util/error';
import { AssetAmountInput } from '../components/asset_amount_input';
@@ -90,7 +90,7 @@ const mapDispatchToProps = (
// invalidate the last buy quote.
dispatch(actions.updateLatestBuyQuote(undefined));
// reset our buy state
- dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.NONE }));
+ dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.NONE }));
if (!_.isUndefined(value) && !_.isUndefined(asset) && !_.isUndefined(assetBuyer)) {
// even if it's debounced, give them the illusion it's loading
diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts
index 428939e79..adcbd61bc 100644
--- a/packages/instant/src/containers/selected_asset_buy_button.ts
+++ b/packages/instant/src/containers/selected_asset_buy_button.ts
@@ -6,7 +6,7 @@ import { Dispatch } from 'redux';
import { Action, actions } from '../redux/actions';
import { State } from '../redux/reducer';
-import { AsyncProcessState } from '../types';
+import { OrderProcessState, OrderState } from '../types';
import { BuyButton } from '../components/buy_button';
@@ -18,10 +18,11 @@ interface ConnectedState {
}
interface ConnectedDispatch {
- onClick: (buyQuote: BuyQuote) => void;
- onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void;
- onBuyFailure: (buyQuote: BuyQuote) => void;
- onBuyPrevented: (buyQuote: BuyQuote, error: Error) => 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;
}
const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({
@@ -30,11 +31,19 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps):
});
const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({
- onClick: buyQuote => dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.PENDING })),
- onBuySuccess: (buyQuote: BuyQuote, txnHash: string) =>
- dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.SUCCESS, txnHash })),
- onBuyFailure: buyQuote => dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.FAILURE })),
- onBuyPrevented: (buyQuote, error) => {
+ 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));
},
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 f3efbb5d2..7faa79912 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
@@ -3,12 +3,12 @@ import * as React from 'react';
import { connect } from 'react-redux';
import { State } from '../redux/reducer';
-import { AsyncProcessState } from '../types';
+import { OrderProcessState } from '../types';
import { BuyOrderStateButton } from '../components/buy_order_state_button';
interface ConnectedState {
- buyOrderProcessingState: AsyncProcessState;
+ buyOrderProcessingState: OrderProcessState;
}
export interface SelectedAssetButtonProps {}
const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({
diff --git a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
index 6f42b9f85..064b877be 100644
--- a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
+++ b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
import { State } from '../redux/reducer';
import { ViewTransactionButton } from '../components/view_transaction_button';
-import { AsyncProcessState } from '../types';
+import { OrderProcessState } from '../types';
import { etherscanUtil } from '../util/etherscan';
export interface SelectedAssetViewTransactionButtonProps {}
@@ -16,9 +16,13 @@ interface ConnectedState {
const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
onClick: () => {
- if (state.assetBuyer && state.buyOrderState.processState === AsyncProcessState.SUCCESS) {
+ if (
+ state.assetBuyer &&
+ (state.buyOrderState.processState === OrderProcessState.PROCESSING ||
+ state.buyOrderState.processState === OrderProcessState.SUCCESS)
+ ) {
const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
- state.buyOrderState.txnHash,
+ state.buyOrderState.txHash,
state.assetBuyer.networkId,
);
if (etherscanUrl) {
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index c6a05ac52..25d0092b2 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -4,7 +4,15 @@ import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
import { assetMetaDataMap } from '../data/asset_meta_data_map';
-import { Asset, AssetMetaData, AsyncProcessState, DisplayStatus, Network, OrderState } from '../types';
+import {
+ Asset,
+ AssetMetaData,
+ AsyncProcessState,
+ DisplayStatus,
+ Network,
+ OrderProcessState,
+ OrderState,
+} from '../types';
import { assetUtils } from '../util/asset';
import { Action, ActionTypes } from './actions';
@@ -27,7 +35,7 @@ export const INITIAL_STATE: State = {
network: Network.Mainnet,
selectedAssetAmount: undefined,
assetMetaDataMap,
- buyOrderState: { processState: AsyncProcessState.NONE },
+ buyOrderState: { processState: OrderProcessState.NONE },
ethUsdPrice: undefined,
latestBuyQuote: undefined,
latestError: undefined,
@@ -106,7 +114,7 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
...state,
latestBuyQuote: undefined,
quoteRequestState: AsyncProcessState.NONE,
- buyOrderState: { processState: AsyncProcessState.NONE },
+ buyOrderState: { processState: OrderProcessState.NONE },
selectedAssetAmount: undefined,
};
default:
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index c5521c63c..c63371fb4 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -8,18 +8,22 @@ export enum AsyncProcessState {
FAILURE = 'Failure',
}
-interface RegularOrderState {
- processState: AsyncProcessState.NONE | AsyncProcessState.PENDING;
+export enum OrderProcessState {
+ NONE = 'None',
+ AWAITING_SIGNATURE = 'Awaiting Signature',
+ PROCESSING = 'Processing',
+ SUCCESS = 'Success',
+ FAILURE = 'Failure',
}
-interface SuccessfulOrderState {
- processState: AsyncProcessState.SUCCESS;
- txnHash: string;
+
+interface OrderStatePreTx {
+ processState: OrderProcessState.NONE | OrderProcessState.AWAITING_SIGNATURE;
}
-interface FailureOrderState {
- processState: AsyncProcessState.FAILURE;
- txnHash?: string;
+interface OrderStatePostTx {
+ processState: OrderProcessState.PROCESSING | OrderProcessState.SUCCESS | OrderProcessState.FAILURE;
+ txHash: string;
}
-export type OrderState = RegularOrderState | SuccessfulOrderState | FailureOrderState;
+export type OrderState = OrderStatePreTx | OrderStatePostTx;
export enum DisplayStatus {
Present,
diff --git a/packages/instant/src/util/etherscan.ts b/packages/instant/src/util/etherscan.ts
index ffb08a382..cfc2578a3 100644
--- a/packages/instant/src/util/etherscan.ts
+++ b/packages/instant/src/util/etherscan.ts
@@ -14,11 +14,11 @@ const etherscanPrefix = (networkId: number): string | undefined => {
};
export const etherscanUtil = {
- getEtherScanTxnAddressIfExists: (txnHash: string, networkId: number) => {
+ getEtherScanTxnAddressIfExists: (txHash: string, networkId: number) => {
const prefix = etherscanPrefix(networkId);
if (_.isUndefined(prefix)) {
return;
}
- return `https://${prefix}etherscan.io/tx/${txnHash}`;
+ return `https://${prefix}etherscan.io/tx/${txHash}`;
},
};