diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-24 08:06:45 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-24 08:06:45 +0800 |
commit | 4c4286ac662d3dba928bf16b83ade5e5476f4614 (patch) | |
tree | bce36f2ff8fce37e690409584ffe00bc391cebf1 /packages/instant/src/components | |
parent | 194cbc3ba941023a0b6c1845a867ccfd619b754f (diff) | |
download | dexon-0x-contracts-4c4286ac662d3dba928bf16b83ade5e5476f4614.tar dexon-0x-contracts-4c4286ac662d3dba928bf16b83ade5e5476f4614.tar.gz dexon-0x-contracts-4c4286ac662d3dba928bf16b83ade5e5476f4614.tar.bz2 dexon-0x-contracts-4c4286ac662d3dba928bf16b83ade5e5476f4614.tar.lz dexon-0x-contracts-4c4286ac662d3dba928bf16b83ade5e5476f4614.tar.xz dexon-0x-contracts-4c4286ac662d3dba928bf16b83ade5e5476f4614.tar.zst dexon-0x-contracts-4c4286ac662d3dba928bf16b83ade5e5476f4614.zip |
feat(instant): Procesing and Success states
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r-- | packages/instant/src/components/buy_button.tsx | 4 | ||||
-rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 29 | ||||
-rw-r--r-- | packages/instant/src/components/view_transaction_button.tsx | 11 |
3 files changed, 33 insertions, 11 deletions
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 2def34fd7..1afd216d8 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -41,8 +41,8 @@ export class BuyButton extends React.Component<BuyButtonProps> { let txnHash; try { txnHash = await this.props.assetBuyer.executeBuyQuoteAsync(this.props.buyQuote); - await web3Wrapper.awaitTransactionSuccessAsync(txnHash); - this.props.onBuySuccess(this.props.buyQuote, txnHash); + const txnReceipt = await web3Wrapper.awaitTransactionSuccessAsync(txnHash); + this.props.onBuySuccess(this.props.buyQuote, txnReceipt.transactionHash); } catch { this.props.onBuyFailure(this.props.buyQuote, txnHash); } diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 856e4d43e..ed753a3bd 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 } from '../types'; +import { AsyncProcessState, OrderState } from '../types'; import { format } from '../util/format'; import { AmountPlaceholder } from './amount_placeholder'; @@ -16,10 +16,14 @@ export interface InstantHeadingProps { totalEthBaseAmount?: BigNumber; ethUsdPrice?: BigNumber; quoteRequestState: AsyncProcessState; - buyOrderState: AsyncProcessState; + buyOrderState: OrderState; } -const placeholderColor = ColorOption.white; +const PLACEHOLDER_COLOR = ColorOption.white; +const ICON_WIDTH = 34; +const ICON_HEIGHT = 34; +const ICON_COLOR = ColorOption.white; + export class InstantHeading extends React.Component<InstantHeadingProps, {}> { public render(): React.ReactNode { const iconOrAmounts = this._renderIcon() || this._renderAmountsSection(); @@ -62,15 +66,22 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { } private _renderIcon(): React.ReactNode { - if (this.props.buyOrderState === AsyncProcessState.FAILURE) { - return <Icon icon={'failed'} width={34} height={34} color={ColorOption.white} />; + const processState = this.props.buyOrderState.processState; + + if (processState === AsyncProcessState.FAILURE) { + return <Icon icon={'failed'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />; + } else if (processState === AsyncProcessState.SUCCESS) { + return <Icon icon={'success'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />; } return undefined; } private _renderTopText(): React.ReactNode { - if (this.props.buyOrderState === AsyncProcessState.FAILURE) { + const processState = this.props.buyOrderState.processState; + if (processState === AsyncProcessState.FAILURE) { return 'Order failed'; + } else if (processState === AsyncProcessState.SUCCESS) { + return 'Tokens received!'; } return 'I want to buy'; @@ -78,10 +89,10 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { private _placeholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode { if (this.props.quoteRequestState === AsyncProcessState.PENDING) { - return <AmountPlaceholder isPulsating={true} color={placeholderColor} />; + return <AmountPlaceholder isPulsating={true} color={PLACEHOLDER_COLOR} />; } if (_.isUndefined(this.props.selectedAssetAmount)) { - return <AmountPlaceholder isPulsating={false} color={placeholderColor} />; + return <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />; } return amountFunction(); } @@ -92,7 +103,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { {format.ethBaseAmount( this.props.totalEthBaseAmount, 4, - <AmountPlaceholder isPulsating={false} color={placeholderColor} />, + <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />, )} </Text> ); diff --git a/packages/instant/src/components/view_transaction_button.tsx b/packages/instant/src/components/view_transaction_button.tsx new file mode 100644 index 000000000..7aa44e657 --- /dev/null +++ b/packages/instant/src/components/view_transaction_button.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; + +import { SecondaryButton } from './secondary_button'; + +export interface ViewTransactionButtonProps { + onClick: () => void; +} + +export const ViewTransactionButton: React.StatelessComponent<ViewTransactionButtonProps> = props => { + return <SecondaryButton onClick={props.onClick}>View Transaction</SecondaryButton>; +}; |