From ce5bc3c1c945b12997e3030301bf25f982c55365 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 24 Oct 2018 10:38:56 -0700 Subject: Message when signature denied --- packages/instant/src/components/buy_button.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 9c42f3d87..0d35d36ca 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -1,4 +1,4 @@ -import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; +import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer'; import * as _ from 'lodash'; import * as React from 'react'; @@ -14,6 +14,7 @@ export interface BuyButtonProps { onClick: (buyQuote: BuyQuote) => void; onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void; onBuyFailure: (buyQuote: BuyQuote, tnxHash?: string) => void; + onBuyPrevented: (buyQuote: BuyQuote, preventedError: Error) => void; } export class BuyButton extends React.Component { @@ -43,7 +44,11 @@ export class BuyButton extends React.Component { txnHash = await this.props.assetBuyer.executeBuyQuoteAsync(this.props.buyQuote); const txnReceipt = await web3Wrapper.awaitTransactionSuccessAsync(txnHash); this.props.onBuySuccess(this.props.buyQuote, txnReceipt.transactionHash); - } catch { + } catch (e) { + if (e instanceof Error && e.message === AssetBuyerError.SignatureRequestDenied) { + this.props.onBuyPrevented(this.props.buyQuote, e); + return; + } this.props.onBuyFailure(this.props.buyQuote, txnHash); } }; -- cgit v1.2.3 From db3ad83ebca88e0faf2529ec468044e6ce4d5746 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 24 Oct 2018 13:16:28 -0700 Subject: Introduce new OrderProcessState --- packages/instant/src/components/buy_order_state_button.tsx | 13 ++++++++----- packages/instant/src/components/instant_heading.tsx | 10 +++++----- 2 files changed, 13 insertions(+), 10 deletions(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx index 5bc965c7d..b5b21fd1e 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 = props => { - if (props.buyOrderProcessingState === AsyncProcessState.FAILURE) { + if (props.buyOrderProcessingState === OrderProcessState.FAILURE) { return ; - } else if (props.buyOrderProcessingState === AsyncProcessState.SUCCESS) { + } else if (props.buyOrderProcessingState === OrderProcessState.SUCCESS) { return ; - } else if (props.buyOrderProcessingState === AsyncProcessState.PENDING) { + } else if ( + props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE || + props.buyOrderProcessingState === OrderProcessState.PROCESSING + ) { return ; } diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index ed753a3bd..37d87580d 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -4,7 +4,7 @@ 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'; @@ -68,9 +68,9 @@ export class InstantHeading extends React.Component { private _renderIcon(): React.ReactNode { const processState = this.props.buyOrderState.processState; - if (processState === AsyncProcessState.FAILURE) { + if (processState === OrderProcessState.FAILURE) { return ; - } else if (processState === AsyncProcessState.SUCCESS) { + } else if (processState === OrderProcessState.SUCCESS) { return ; } return undefined; @@ -78,9 +78,9 @@ export class InstantHeading extends React.Component { 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.SUCCESS) { return 'Tokens received!'; } -- cgit v1.2.3 From 73f5ea2906502e89fa9bca275e229a1485d2f974 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 24 Oct 2018 16:04:09 -0700 Subject: Associate txnhash with processing state --- packages/instant/src/components/buy_button.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 0d35d36ca..f70f2f5be 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -11,7 +11,8 @@ import { Button, Text } from './ui'; export interface BuyButtonProps { buyQuote?: BuyQuote; assetBuyer?: AssetBuyer; - onClick: (buyQuote: BuyQuote) => void; + onAwaitingSignature: (buyQuote: BuyQuote) => void; + onProcessingTransaction: (buyQuote: BuyQuote, txnHash: string) => void; onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void; onBuyFailure: (buyQuote: BuyQuote, tnxHash?: string) => void; onBuyPrevented: (buyQuote: BuyQuote, preventedError: Error) => void; @@ -35,21 +36,23 @@ export class BuyButton extends React.Component { } 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); + this.props.onAwaitingSignature(buyQuote); let txnHash; try { - txnHash = await this.props.assetBuyer.executeBuyQuoteAsync(this.props.buyQuote); - const txnReceipt = await web3Wrapper.awaitTransactionSuccessAsync(txnHash); - this.props.onBuySuccess(this.props.buyQuote, txnReceipt.transactionHash); + txnHash = await assetBuyer.executeBuyQuoteAsync(buyQuote); + this.props.onProcessingTransaction(buyQuote, txnHash); + await web3Wrapper.awaitTransactionSuccessAsync(txnHash); + this.props.onBuySuccess(buyQuote, txnHash); } catch (e) { if (e instanceof Error && e.message === AssetBuyerError.SignatureRequestDenied) { - this.props.onBuyPrevented(this.props.buyQuote, e); + this.props.onBuyPrevented(buyQuote, e); return; } - this.props.onBuyFailure(this.props.buyQuote, txnHash); + this.props.onBuyFailure(buyQuote, txnHash); } }; } -- cgit v1.2.3 From b7f4062ac84159e58d0282a38fb64825c429cbd8 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 24 Oct 2018 16:17:01 -0700 Subject: feat(instant): Be able to view transaction when transaction is in progress --- packages/instant/src/components/buy_order_state_button.tsx | 6 +++--- packages/instant/src/components/instant_heading.tsx | 5 +++++ 2 files changed, 8 insertions(+), 3 deletions(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx index b5b21fd1e..44115e5a1 100644 --- a/packages/instant/src/components/buy_order_state_button.tsx +++ b/packages/instant/src/components/buy_order_state_button.tsx @@ -13,12 +13,12 @@ export interface BuyOrderStateButtonProps { export const BuyOrderStateButton: React.StatelessComponent = props => { if (props.buyOrderProcessingState === OrderProcessState.FAILURE) { return ; - } else if (props.buyOrderProcessingState === OrderProcessState.SUCCESS) { - return ; } else if ( - props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE || + props.buyOrderProcessingState === OrderProcessState.SUCCESS || props.buyOrderProcessingState === OrderProcessState.PROCESSING ) { + return ; + } else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) { return ; } diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 37d87580d..17ac65429 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -10,6 +10,7 @@ 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; @@ -70,6 +71,8 @@ export class InstantHeading extends React.Component { if (processState === OrderProcessState.FAILURE) { return ; + } else if (processState === OrderProcessState.PROCESSING) { + return ; } else if (processState === OrderProcessState.SUCCESS) { return ; } @@ -80,6 +83,8 @@ export class InstantHeading extends React.Component { const processState = this.props.buyOrderState.processState; if (processState === OrderProcessState.FAILURE) { return 'Order failed'; + } else if (processState === OrderProcessState.PROCESSING) { + return 'Processing Order...'; } else if (processState === OrderProcessState.SUCCESS) { return 'Tokens received!'; } -- cgit v1.2.3 From acefeff5f08f123c7c5d372088f2af016e31c599 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 25 Oct 2018 13:18:17 -0700 Subject: new try/catch pattern and new prop names per code review feedback --- packages/instant/src/components/buy_button.tsx | 33 +++++++++++++++++++------- 1 file changed, 24 insertions(+), 9 deletions(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index f70f2f5be..7004b6a18 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -12,10 +12,10 @@ export interface BuyButtonProps { buyQuote?: BuyQuote; assetBuyer?: AssetBuyer; onAwaitingSignature: (buyQuote: BuyQuote) => void; - onProcessingTransaction: (buyQuote: BuyQuote, txnHash: string) => void; + onSignatureDenied: (buyQuote: BuyQuote, preventedError: Error) => void; + onBuyProcessing: (buyQuote: BuyQuote, txnHash: string) => void; onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void; - onBuyFailure: (buyQuote: BuyQuote, tnxHash?: string) => void; - onBuyPrevented: (buyQuote: BuyQuote, preventedError: Error) => void; + onBuyFailure: (buyQuote: BuyQuote, txnHash?: string) => void; // TODO: make this non-optional } export class BuyButton extends React.Component { @@ -40,19 +40,34 @@ export class BuyButton extends React.Component { if (_.isUndefined(buyQuote) || _.isUndefined(assetBuyer)) { return; } + + let txnHash: string | undefined; this.props.onAwaitingSignature(buyQuote); - let txnHash; try { txnHash = await assetBuyer.executeBuyQuoteAsync(buyQuote); - this.props.onProcessingTransaction(buyQuote, txnHash); - await web3Wrapper.awaitTransactionSuccessAsync(txnHash); - this.props.onBuySuccess(buyQuote, txnHash); } catch (e) { if (e instanceof Error && e.message === AssetBuyerError.SignatureRequestDenied) { - this.props.onBuyPrevented(buyQuote, e); + this.props.onSignatureDenied(buyQuote, e); + } else { + throw e; + } + } + + // Have to let TS know that txHash is definitely defined now + if (!txnHash) { + throw new Error('No txHash available'); + } + + this.props.onBuyProcessing(buyQuote, txnHash); + try { + await web3Wrapper.awaitTransactionSuccessAsync(txnHash); + } catch (e) { + if (e instanceof Error && e.message.startsWith('Transaction failed')) { + this.props.onBuyFailure(buyQuote, txnHash); return; } - this.props.onBuyFailure(buyQuote, txnHash); + throw e; } + this.props.onBuySuccess(buyQuote, txnHash); }; } -- cgit v1.2.3 From c5e8bb17635d8710f0db62a8887f990cb6ad482f Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 25 Oct 2018 13:32:37 -0700 Subject: txnHash -> txHash --- packages/instant/src/components/buy_button.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 7004b6a18..841a9593b 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -13,9 +13,9 @@ export interface BuyButtonProps { assetBuyer?: AssetBuyer; onAwaitingSignature: (buyQuote: BuyQuote) => void; onSignatureDenied: (buyQuote: BuyQuote, preventedError: Error) => void; - onBuyProcessing: (buyQuote: BuyQuote, txnHash: string) => void; - onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void; - onBuyFailure: (buyQuote: BuyQuote, txnHash?: string) => void; // TODO: make this non-optional + onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void; + onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void; + onBuyFailure: (buyQuote: BuyQuote, txHash?: string) => void; // TODO: make this non-optional } export class BuyButton extends React.Component { @@ -41,10 +41,10 @@ export class BuyButton extends React.Component { return; } - let txnHash: string | undefined; + let txHash: string | undefined; this.props.onAwaitingSignature(buyQuote); try { - txnHash = await assetBuyer.executeBuyQuoteAsync(buyQuote); + txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote); } catch (e) { if (e instanceof Error && e.message === AssetBuyerError.SignatureRequestDenied) { this.props.onSignatureDenied(buyQuote, e); @@ -54,20 +54,20 @@ export class BuyButton extends React.Component { } // Have to let TS know that txHash is definitely defined now - if (!txnHash) { + if (!txHash) { throw new Error('No txHash available'); } - this.props.onBuyProcessing(buyQuote, txnHash); + this.props.onBuyProcessing(buyQuote, txHash); try { - await web3Wrapper.awaitTransactionSuccessAsync(txnHash); + await web3Wrapper.awaitTransactionSuccessAsync(txHash); } catch (e) { if (e instanceof Error && e.message.startsWith('Transaction failed')) { - this.props.onBuyFailure(buyQuote, txnHash); + this.props.onBuyFailure(buyQuote, txHash); return; } throw e; } - this.props.onBuySuccess(buyQuote, txnHash); + this.props.onBuySuccess(buyQuote, txHash); }; } -- cgit v1.2.3 From 3adc6b6daa16bb1dc80a8c4109b0bed56f937ea0 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 25 Oct 2018 13:36:45 -0700 Subject: Making failure txHash required --- packages/instant/src/components/buy_button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 841a9593b..6fe333dc7 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -15,7 +15,7 @@ export interface BuyButtonProps { onSignatureDenied: (buyQuote: BuyQuote, preventedError: Error) => void; onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void; onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void; - onBuyFailure: (buyQuote: BuyQuote, txHash?: string) => void; // TODO: make this non-optional + onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void; } export class BuyButton extends React.Component { -- cgit v1.2.3 From f04eba77736a429bea19a4544cfbabc38069d04d Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 25 Oct 2018 14:44:25 -0700 Subject: Added string to constants --- packages/instant/src/components/buy_button.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 6fe333dc7..a7a22e3bc 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'; @@ -62,7 +63,7 @@ export class BuyButton extends React.Component { try { await web3Wrapper.awaitTransactionSuccessAsync(txHash); } catch (e) { - if (e instanceof Error && e.message.startsWith('Transaction failed')) { + if (e instanceof Error && e.message.startsWith(WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX)) { this.props.onBuyFailure(buyQuote, txHash); return; } -- cgit v1.2.3 From 89e59cca28a86763519237ab9c6971600e200b5e Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 25 Oct 2018 14:48:59 -0700 Subject: cleanup code --- packages/instant/src/components/buy_button.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index a7a22e3bc..a70269dde 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -49,14 +49,9 @@ export class BuyButton extends React.Component { } catch (e) { if (e instanceof Error && e.message === AssetBuyerError.SignatureRequestDenied) { this.props.onSignatureDenied(buyQuote, e); - } else { - throw e; + return; } - } - - // Have to let TS know that txHash is definitely defined now - if (!txHash) { - throw new Error('No txHash available'); + throw e; } this.props.onBuyProcessing(buyQuote, txHash); -- cgit v1.2.3