From 1737411ab7478de4a394242c930fcc7189daae07 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 17:16:28 -0700 Subject: Show order failed messaging when order fails --- .../instant/src/components/instant_heading.tsx | 70 +++++++++++++--------- .../containers/selected_asset_instant_heading.ts | 2 + 2 files changed, 45 insertions(+), 27 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index a36d35a93..6fc5a0963 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -14,6 +14,7 @@ export interface InstantHeadingProps { totalEthBaseAmount?: BigNumber; ethUsdPrice?: BigNumber; quoteState: AsyncProcessState; + buyOrderState: AsyncProcessState; } const Placeholder = () => ( @@ -54,32 +55,47 @@ const loadingOrAmount = (quoteState: AsyncProcessState, amount: React.ReactNode) } }; -export const InstantHeading: React.StatelessComponent = props => ( - - - - I want to buy - - - - - - - - {loadingOrAmount(props.quoteState, displaytotalEthBaseAmount(props))} - - - - {loadingOrAmount(props.quoteState, displayUsdAmount(props))} +const topText = (buyOrderState: AsyncProcessState): string => { + if (buyOrderState === AsyncProcessState.FAILURE) { + return 'Order failed'; + } + + return 'I want to buy'; +}; + +export const InstantHeading: React.StatelessComponent = props => { + return ( + + + + {topText(props.buyOrderState)} + + + + + + + {loadingOrAmount(props.quoteState, displaytotalEthBaseAmount(props))} + + + + {loadingOrAmount(props.quoteState, displayUsdAmount(props))} + + - - -); + + ); +}; diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts index 0509db5da..743362151 100644 --- a/packages/instant/src/containers/selected_asset_instant_heading.ts +++ b/packages/instant/src/containers/selected_asset_instant_heading.ts @@ -16,6 +16,7 @@ interface ConnectedState { totalEthBaseAmount?: BigNumber; ethUsdPrice?: BigNumber; quoteState: AsyncProcessState; + buyOrderState: AsyncProcessState; } const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({ @@ -23,6 +24,7 @@ const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): Connecte totalEthBaseAmount: oc(state).latestBuyQuote.worstCaseQuoteInfo.totalEthAmount(), ethUsdPrice: state.ethUsdPrice, quoteState: state.quoteState, + buyOrderState: state.buyOrderState, }); export const SelectedAssetInstantHeading: React.ComponentClass = connect(mapStateToProps)( -- cgit v1.2.3 From 48dd9569f7d8dac398c4af629c6efa2738aec285 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 19 Oct 2018 11:58:52 -0700 Subject: Icon component for Instant --- packages/instant/src/components/ui/icon.tsx | 58 +++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 packages/instant/src/components/ui/icon.tsx (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx new file mode 100644 index 000000000..7373c3acd --- /dev/null +++ b/packages/instant/src/components/ui/icon.tsx @@ -0,0 +1,58 @@ +import * as React from 'react'; + +import { ColorOption } from '../../style/theme'; + +type svgRule = 'evenodd' | 'nonzero' | 'inherit'; +interface IconInfo { + viewBox: string; + fillRule?: svgRule; + clipRule?: svgRule; + path: string; +} +interface IconInfoMapping { + failed: IconInfo; + success: IconInfo; +} +const ICONS: IconInfoMapping = { + failed: { + viewBox: '0 0 34 34', + fillRule: 'evenodd', + clipRule: 'evenodd', + path: + 'M6.65771 26.4362C9.21777 29.2406 12.9033 31 17 31C24.7319 31 31 24.7319 31 17C31 14.4468 30.3164 12.0531 29.1226 9.99219L6.65771 26.4362ZM4.88281 24.0173C3.68555 21.9542 3 19.5571 3 17C3 9.26807 9.26807 3 17 3C21.1006 3 24.7891 4.76294 27.3496 7.57214L4.88281 24.0173ZM0 17C0 26.3888 7.61133 34 17 34C26.3887 34 34 26.3888 34 17C34 7.61121 26.3887 0 17 0C7.61133 0 0 7.61121 0 17Z', + }, + success: { + viewBox: '0 0 34 34', + fillRule: 'evenodd', + clipRule: 'evenodd', + path: + 'M17 34C26.3887 34 34 26.3888 34 17C34 7.61121 26.3887 0 17 0C7.61133 0 0 7.61121 0 17C0 26.3888 7.61133 34 17 34ZM25.7539 13.0977C26.2969 12.4718 26.2295 11.5244 25.6035 10.9817C24.9775 10.439 24.0303 10.5063 23.4878 11.1323L15.731 20.0771L12.3936 16.7438C11.8071 16.1583 10.8574 16.1589 10.272 16.7451C9.68652 17.3313 9.6875 18.281 10.2734 18.8665L14.75 23.3373L15.8887 24.4746L16.9434 23.2587L25.7539 13.0977Z', + }, +}; + +export interface IconProps { + width: number; + height: number; + color: ColorOption; + icon: keyof IconInfoMapping; +} +export const Icon: React.SFC = props => { + const iconInfo = ICONS[props.icon]; + + return ( + + + + ); +}; -- cgit v1.2.3 From 17b282b1d743c83a4a4378eb71df098949569bdd Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 19 Oct 2018 13:42:42 -0700 Subject: wip: retry button --- packages/instant/src/components/asset_button.tsx | 55 ++++++++++++++++++++++ packages/instant/src/components/buy_button.tsx | 20 ++++---- packages/instant/src/components/retry_button.tsx | 24 ++++++++++ .../src/containers/selected_asset_buy_button.ts | 29 ++++-------- 4 files changed, 98 insertions(+), 30 deletions(-) create mode 100644 packages/instant/src/components/asset_button.tsx create mode 100644 packages/instant/src/components/retry_button.tsx (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/asset_button.tsx b/packages/instant/src/components/asset_button.tsx new file mode 100644 index 000000000..84a27303d --- /dev/null +++ b/packages/instant/src/components/asset_button.tsx @@ -0,0 +1,55 @@ +import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; +import * as React from 'react'; + +import { AsyncProcessState } from '../types'; + +// TODO: better name? + +import { BuyButton } from './buy_button'; +import { RetryButton } from './retry_button'; +import { Container } from './ui'; + +interface AssetButtonProps { + assetBuyer?: AssetBuyer; + buyQuote?: BuyQuote; + buyOrderState: AsyncProcessState; + onBuyClick: (buyQuote: BuyQuote) => void; + onBuySuccess: (buyQuote: BuyQuote) => void; + onBuyFailure: (buyQuote: BuyQuote) => void; +} + +export class AssetButton extends React.Component { + public render(): React.ReactNode { + return ( + + {this._renderButton()} + + ); + } + private _renderButton(): React.ReactNode { + // TODO: figure out why buyOrderState is undefined in beginning, get rid of default + switch (this.props.buyOrderState) { + case AsyncProcessState.FAILURE: + return ( + { + console.log('try again'); + }} + /> + ); + case AsyncProcessState.SUCCESS: + return
; + default: + return ( + + ); + } + } +} diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 3ef7c1f5c..4d2386620 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -24,15 +24,14 @@ export class BuyButton extends React.Component { onBuyFailure: util.boundNoop, }; public render(): React.ReactNode { + // TODO: move container out const shouldDisableButton = _.isUndefined(this.props.buyQuote); return ( - - - + ); } private readonly _handleClick = async () => { @@ -43,10 +42,13 @@ export class BuyButton extends React.Component { this.props.onClick(this.props.buyQuote); let txnHash; try { - txnHash = await this.props.assetBuyer.executeBuyQuoteAsync(this.props.buyQuote); + txnHash = await this.props.assetBuyer.executeBuyQuoteAsync(this.props.buyQuote, { + gasLimit: 5000000, + }); await web3Wrapper.awaitTransactionSuccessAsync(txnHash); this.props.onBuySuccess(this.props.buyQuote, txnHash); - } catch { + } catch (e) { + console.log('error', e); this.props.onBuyFailure(this.props.buyQuote, txnHash); } }; diff --git a/packages/instant/src/components/retry_button.tsx b/packages/instant/src/components/retry_button.tsx new file mode 100644 index 000000000..5e36506d0 --- /dev/null +++ b/packages/instant/src/components/retry_button.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Button, Text } from './ui'; + +export interface RetryButtonProps { + onClick: () => void; +} + +export const RetryButton: React.StatelessComponent = props => { + return ( + + ); +}; diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts index 99f971321..a5fa0aa8e 100644 --- a/packages/instant/src/containers/selected_asset_buy_button.ts +++ b/packages/instant/src/containers/selected_asset_buy_button.ts @@ -1,3 +1,4 @@ +// TODO: Rename to SelectedAssetButton import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; import * as _ from 'lodash'; import * as React from 'react'; @@ -8,45 +9,31 @@ import { Action, actions } from '../redux/actions'; import { State } from '../redux/reducer'; import { AsyncProcessState } from '../types'; -import { BuyButton } from '../components/buy_button'; +import { AssetButton } from '../components/asset_button'; +// TODO: rename export interface SelectedAssetBuyButtonProps {} interface ConnectedState { assetBuyer?: AssetBuyer; - text: string; + buyOrderState: AsyncProcessState; buyQuote?: BuyQuote; } interface ConnectedDispatch { - onClick: (buyQuote: BuyQuote) => void; + onBuyClick: (buyQuote: BuyQuote) => void; onBuySuccess: (buyQuote: BuyQuote) => void; onBuyFailure: (buyQuote: BuyQuote) => void; } -const textForState = (state: AsyncProcessState): string => { - switch (state) { - case AsyncProcessState.NONE: - return 'Buy'; - case AsyncProcessState.PENDING: - return '...Loading'; - case AsyncProcessState.SUCCESS: - return 'Success!'; - case AsyncProcessState.FAILURE: - return 'Failed'; - default: - return 'Buy'; - } -}; - const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({ assetBuyer: state.assetBuyer, - text: textForState(state.buyOrderState), + buyOrderState: state.buyOrderState, buyQuote: state.latestBuyQuote, }); const mapDispatchToProps = (dispatch: Dispatch, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({ - onClick: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.PENDING)), + onBuyClick: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.PENDING)), onBuySuccess: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.SUCCESS)), onBuyFailure: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.FAILURE)), }); @@ -54,4 +41,4 @@ const mapDispatchToProps = (dispatch: Dispatch, ownProps: SelectedAssetB export const SelectedAssetBuyButton: React.ComponentClass = connect( mapStateToProps, mapDispatchToProps, -)(BuyButton); +)(AssetButton); -- cgit v1.2.3 From 6c79a858dff2766917ee3a4b5d4f623b66dadd17 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 19 Oct 2018 13:51:57 -0700 Subject: WIP: clear buy quote working --- packages/instant/src/components/asset_button.tsx | 10 +++------- packages/instant/src/containers/selected_asset_buy_button.ts | 2 ++ packages/instant/src/redux/actions.ts | 2 ++ packages/instant/src/redux/reducer.ts | 8 ++++++++ 4 files changed, 15 insertions(+), 7 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/asset_button.tsx b/packages/instant/src/components/asset_button.tsx index 84a27303d..4ae7a2704 100644 --- a/packages/instant/src/components/asset_button.tsx +++ b/packages/instant/src/components/asset_button.tsx @@ -9,6 +9,7 @@ import { BuyButton } from './buy_button'; import { RetryButton } from './retry_button'; import { Container } from './ui'; +// TODO: split into sepearte components? getting really big.. interface AssetButtonProps { assetBuyer?: AssetBuyer; buyQuote?: BuyQuote; @@ -16,6 +17,7 @@ interface AssetButtonProps { onBuyClick: (buyQuote: BuyQuote) => void; onBuySuccess: (buyQuote: BuyQuote) => void; onBuyFailure: (buyQuote: BuyQuote) => void; + onRetryClick: () => void; } export class AssetButton extends React.Component { @@ -30,13 +32,7 @@ export class AssetButton extends React.Component { // TODO: figure out why buyOrderState is undefined in beginning, get rid of default switch (this.props.buyOrderState) { case AsyncProcessState.FAILURE: - return ( - { - console.log('try again'); - }} - /> - ); + return ; case AsyncProcessState.SUCCESS: return
; default: diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts index a5fa0aa8e..41d196b03 100644 --- a/packages/instant/src/containers/selected_asset_buy_button.ts +++ b/packages/instant/src/containers/selected_asset_buy_button.ts @@ -24,6 +24,7 @@ interface ConnectedDispatch { onBuyClick: (buyQuote: BuyQuote) => void; onBuySuccess: (buyQuote: BuyQuote) => void; onBuyFailure: (buyQuote: BuyQuote) => void; + onRetryClick: () => void; } const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({ @@ -36,6 +37,7 @@ const mapDispatchToProps = (dispatch: Dispatch, ownProps: SelectedAssetB onBuyClick: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.PENDING)), onBuySuccess: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.SUCCESS)), onBuyFailure: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.FAILURE)), + onRetryClick: () => dispatch(actions.clearBuyQuoteAndSelectedAssetAmount()), }); export const SelectedAssetBuyButton: React.ComponentClass = connect( diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index bc75ce66c..d6388d77e 100644 --- a/packages/instant/src/redux/actions.ts +++ b/packages/instant/src/redux/actions.ts @@ -31,6 +31,7 @@ export enum ActionTypes { SET_ERROR = 'SET_ERROR', HIDE_ERROR = 'HIDE_ERROR', CLEAR_ERROR = 'CLEAR_ERROR', + CLEAR_BUY_QUOTE_AND_SELECTED_ASSET_AMOUNT = 'CLEAR_BUY_QUOTE_AND_SELECTED_ASSET_AMOUNT', } export const actions = { @@ -45,4 +46,5 @@ export const actions = { setError: (error?: any) => createAction(ActionTypes.SET_ERROR, error), hideError: () => createAction(ActionTypes.HIDE_ERROR), clearError: () => createAction(ActionTypes.CLEAR_ERROR), + clearBuyQuoteAndSelectedAssetAmount: () => createAction(ActionTypes.CLEAR_BUY_QUOTE_AND_SELECTED_ASSET_AMOUNT), }; diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index 657bd0e40..10e56f152 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -99,6 +99,14 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => ...state, selectedAsset: newSelectedAsset, }; + case ActionTypes.CLEAR_BUY_QUOTE_AND_SELECTED_ASSET_AMOUNT: + return { + ...state, + latestBuyQuote: undefined, + quoteState: AsyncProcessState.NONE, + buyOrderState: AsyncProcessState.NONE, + selectedAssetAmount: undefined, + }; default: return state; } -- cgit v1.2.3 From d2766d7ced990efd5a91441b459f36e8a21f8513 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 19 Oct 2018 14:49:38 -0700 Subject: Selected Asset button --- packages/instant/src/components/asset_button.tsx | 51 ---------------------- packages/instant/src/components/buy_button.tsx | 6 +-- .../src/components/zero_ex_instant_container.tsx | 6 ++- .../src/containers/selected_asset_button.tsx | 33 ++++++++++++++ .../src/containers/selected_asset_buy_button.ts | 10 +---- .../src/containers/selected_asset_retry_button.tsx | 27 ++++++++++++ 6 files changed, 68 insertions(+), 65 deletions(-) delete mode 100644 packages/instant/src/components/asset_button.tsx create mode 100644 packages/instant/src/containers/selected_asset_button.tsx create mode 100644 packages/instant/src/containers/selected_asset_retry_button.tsx (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/asset_button.tsx b/packages/instant/src/components/asset_button.tsx deleted file mode 100644 index 4ae7a2704..000000000 --- a/packages/instant/src/components/asset_button.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; -import * as React from 'react'; - -import { AsyncProcessState } from '../types'; - -// TODO: better name? - -import { BuyButton } from './buy_button'; -import { RetryButton } from './retry_button'; -import { Container } from './ui'; - -// TODO: split into sepearte components? getting really big.. -interface AssetButtonProps { - assetBuyer?: AssetBuyer; - buyQuote?: BuyQuote; - buyOrderState: AsyncProcessState; - onBuyClick: (buyQuote: BuyQuote) => void; - onBuySuccess: (buyQuote: BuyQuote) => void; - onBuyFailure: (buyQuote: BuyQuote) => void; - onRetryClick: () => void; -} - -export class AssetButton extends React.Component { - public render(): React.ReactNode { - return ( - - {this._renderButton()} - - ); - } - private _renderButton(): React.ReactNode { - // TODO: figure out why buyOrderState is undefined in beginning, get rid of default - switch (this.props.buyOrderState) { - case AsyncProcessState.FAILURE: - return ; - case AsyncProcessState.SUCCESS: - return
; - default: - return ( - - ); - } - } -} diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 4d2386620..5eef18aa3 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -6,7 +6,7 @@ import { ColorOption } from '../style/theme'; import { util } from '../util/util'; import { web3Wrapper } from '../util/web3_wrapper'; -import { Button, Container, Text } from './ui'; +import { Button, Text } from './ui'; export interface BuyButtonProps { buyQuote?: BuyQuote; @@ -14,7 +14,6 @@ export interface BuyButtonProps { onClick: (buyQuote: BuyQuote) => void; onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void; onBuyFailure: (buyQuote: BuyQuote, tnxHash?: string) => void; - text: string; } export class BuyButton extends React.Component { @@ -24,12 +23,11 @@ export class BuyButton extends React.Component { onBuyFailure: util.boundNoop, }; public render(): React.ReactNode { - // TODO: move container out const shouldDisableButton = _.isUndefined(this.props.buyQuote); return ( ); diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index cf918d890..088d0a93e 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details'; import { LatestError } from '../containers/latest_error'; -import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button'; +import { SelectedAssetButton } from '../containers/selected_asset_button'; import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading'; import { ColorOption } from '../style/theme'; @@ -26,7 +26,9 @@ export const ZeroExInstantContainer: React.StatelessComponent - + + + diff --git a/packages/instant/src/containers/selected_asset_button.tsx b/packages/instant/src/containers/selected_asset_button.tsx new file mode 100644 index 000000000..d6e7303dd --- /dev/null +++ b/packages/instant/src/containers/selected_asset_button.tsx @@ -0,0 +1,33 @@ +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 { State } from '../redux/reducer'; +import { AsyncProcessState } from '../types'; + +import { SelectedAssetBuyButton } from './selected_asset_buy_button'; +import { SelectedAssetRetryButton } from './selected_asset_retry_button'; + +interface ConnectedState { + buyOrderState: AsyncProcessState; +} +export interface SelectedAssetButtonProps {} +const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({ + buyOrderState: state.buyOrderState, +}); + +const SelectedAssetButtonPresentationComponent: React.StatelessComponent<{ + buyOrderState: AsyncProcessState; +}> = props => { + if (props.buyOrderState === AsyncProcessState.FAILURE) { + return ; + } + + return ; +}; + +export const SelectedAssetButton: React.ComponentClass = connect(mapStateToProps)( + SelectedAssetButtonPresentationComponent, +); diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts index 41d196b03..7306ec2ec 100644 --- a/packages/instant/src/containers/selected_asset_buy_button.ts +++ b/packages/instant/src/containers/selected_asset_buy_button.ts @@ -1,4 +1,3 @@ -// TODO: Rename to SelectedAssetButton import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; import * as _ from 'lodash'; import * as React from 'react'; @@ -9,14 +8,12 @@ import { Action, actions } from '../redux/actions'; import { State } from '../redux/reducer'; import { AsyncProcessState } from '../types'; -import { AssetButton } from '../components/asset_button'; +import { BuyButton } from '../components/buy_button'; -// TODO: rename export interface SelectedAssetBuyButtonProps {} interface ConnectedState { assetBuyer?: AssetBuyer; - buyOrderState: AsyncProcessState; buyQuote?: BuyQuote; } @@ -24,12 +21,10 @@ interface ConnectedDispatch { onBuyClick: (buyQuote: BuyQuote) => void; onBuySuccess: (buyQuote: BuyQuote) => void; onBuyFailure: (buyQuote: BuyQuote) => void; - onRetryClick: () => void; } const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({ assetBuyer: state.assetBuyer, - buyOrderState: state.buyOrderState, buyQuote: state.latestBuyQuote, }); @@ -37,10 +32,9 @@ const mapDispatchToProps = (dispatch: Dispatch, ownProps: SelectedAssetB onBuyClick: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.PENDING)), onBuySuccess: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.SUCCESS)), onBuyFailure: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.FAILURE)), - onRetryClick: () => dispatch(actions.clearBuyQuoteAndSelectedAssetAmount()), }); export const SelectedAssetBuyButton: React.ComponentClass = connect( mapStateToProps, mapDispatchToProps, -)(AssetButton); +)(BuyButton); diff --git a/packages/instant/src/containers/selected_asset_retry_button.tsx b/packages/instant/src/containers/selected_asset_retry_button.tsx new file mode 100644 index 000000000..f8963ca8e --- /dev/null +++ b/packages/instant/src/containers/selected_asset_retry_button.tsx @@ -0,0 +1,27 @@ +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'; +import { State } from '../redux/reducer'; + +export interface SelectedAssetRetryButtonProps {} + +interface ConnectedDispatch { + onClick: () => void; +} + +const mapDispatchToProps = ( + dispatch: Dispatch, + _ownProps: SelectedAssetRetryButtonProps, +): ConnectedDispatch => ({ + onClick: () => dispatch(actions.clearBuyQuoteAndSelectedAssetAmount()), +}); + +export const SelectedAssetRetryButton: React.ComponentClass = connect( + null, + mapDispatchToProps, +)(RetryButton); -- cgit v1.2.3 From 092d010c2dcdeffa7c44c147d380255c33649679 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 19 Oct 2018 15:57:11 -0700 Subject: Render failure icon --- .../instant/src/components/instant_heading.tsx | 25 ++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 5d39e4048..7ae509e3a 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -9,6 +9,7 @@ import { format } from '../util/format'; import { AmountPlaceholder } from './amount_placeholder'; import { Container, Flex, Text } from './ui'; +import { Icon } from './ui/icon'; export interface InstantHeadingProps { selectedAssetAmount?: BigNumber; @@ -43,14 +44,34 @@ export class InstantHeading extends React.Component { - {this._placeholderOrAmount(this._ethAmount)} - {this._placeholderOrAmount(this._dollarAmount)} + {this._renderIconOrAmounts()} ); } + private _renderIconOrAmounts(): React.ReactNode { + const icon = this._renderIcon(); + if (icon) { + return icon; + } + + return ( + + {this._placeholderOrAmount(this._ethAmount)} + {this._placeholderOrAmount(this._dollarAmount)} + + ); + } + + private _renderIcon(): React.ReactNode { + if (this.props.buyOrderState === AsyncProcessState.FAILURE) { + return ; + } + return undefined; + } + private _renderTopText(): React.ReactNode { if (this.props.buyOrderState === AsyncProcessState.FAILURE) { return 'Order failed'; -- cgit v1.2.3 From ac2d93ab2261e19f87870f4143806d62c1d1c619 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 19 Oct 2018 16:06:42 -0700 Subject: Small refacotor of icons or amounts part --- packages/instant/src/components/instant_heading.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 7ae509e3a..856e4d43e 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -22,6 +22,7 @@ export interface InstantHeadingProps { const placeholderColor = ColorOption.white; export class InstantHeading extends React.Component { public render(): React.ReactNode { + const iconOrAmounts = this._renderIcon() || this._renderAmountsSection(); return ( { - {this._renderIconOrAmounts()} + {iconOrAmounts} ); } - private _renderIconOrAmounts(): React.ReactNode { - const icon = this._renderIcon(); - if (icon) { - return icon; - } - + private _renderAmountsSection(): React.ReactNode { return ( {this._placeholderOrAmount(this._ethAmount)} -- cgit v1.2.3 From 51779fec38a32c0bbbc0209559f84aeda8a45d1a Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 19 Oct 2018 16:11:01 -0700 Subject: linting --- packages/instant/src/components/buy_button.tsx | 1 - packages/instant/src/containers/selected_asset_button.tsx | 2 -- packages/instant/src/containers/selected_asset_retry_button.tsx | 1 - 3 files changed, 4 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 5eef18aa3..9a3ded699 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -46,7 +46,6 @@ export class BuyButton extends React.Component { await web3Wrapper.awaitTransactionSuccessAsync(txnHash); this.props.onBuySuccess(this.props.buyQuote, txnHash); } catch (e) { - console.log('error', e); this.props.onBuyFailure(this.props.buyQuote, txnHash); } }; diff --git a/packages/instant/src/containers/selected_asset_button.tsx b/packages/instant/src/containers/selected_asset_button.tsx index d6e7303dd..d84ae1a52 100644 --- a/packages/instant/src/containers/selected_asset_button.tsx +++ b/packages/instant/src/containers/selected_asset_button.tsx @@ -1,8 +1,6 @@ -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 { State } from '../redux/reducer'; import { AsyncProcessState } from '../types'; diff --git a/packages/instant/src/containers/selected_asset_retry_button.tsx b/packages/instant/src/containers/selected_asset_retry_button.tsx index f8963ca8e..66177551d 100644 --- a/packages/instant/src/containers/selected_asset_retry_button.tsx +++ b/packages/instant/src/containers/selected_asset_retry_button.tsx @@ -6,7 +6,6 @@ import { Dispatch } from 'redux'; import { Action, actions } from '../redux/actions'; import { RetryButton } from '../components/retry_button'; -import { State } from '../redux/reducer'; export interface SelectedAssetRetryButtonProps {} -- cgit v1.2.3 From bf0a4bd91b6e6d15a468b0e75a3a5846c98b85ab Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 19 Oct 2018 16:37:54 -0700 Subject: feat(instant): Add failure state and icon --- packages/instant/src/components/retry_button.tsx | 17 ++----------- .../instant/src/components/secondary_button.tsx | 28 ++++++++++++++++++++++ .../src/containers/selected_asset_button.tsx | 5 ++++ 3 files changed, 35 insertions(+), 15 deletions(-) create mode 100644 packages/instant/src/components/secondary_button.tsx (limited to 'packages/instant/src') 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 = props => { - return ( - - ); + return ; }; 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 = props => { + const buttonProps = _.omit(props, 'text'); + return ( + + ); +}; 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 ; + } else if (props.buyOrderState === AsyncProcessState.SUCCESS) { + return ; + } else if (props.buyOrderState === AsyncProcessState.PENDING) { + return ; } return ; -- cgit v1.2.3 From a766d78706cb45336263388360584390fe0e62f2 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 19 Oct 2018 16:39:42 -0700 Subject: Remove hack fix --- packages/instant/src/components/buy_button.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 9a3ded699..2def34fd7 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -40,12 +40,10 @@ export class BuyButton extends React.Component { this.props.onClick(this.props.buyQuote); let txnHash; try { - txnHash = await this.props.assetBuyer.executeBuyQuoteAsync(this.props.buyQuote, { - gasLimit: 5000000, - }); + txnHash = await this.props.assetBuyer.executeBuyQuoteAsync(this.props.buyQuote); await web3Wrapper.awaitTransactionSuccessAsync(txnHash); this.props.onBuySuccess(this.props.buyQuote, txnHash); - } catch (e) { + } catch { this.props.onBuyFailure(this.props.buyQuote, txnHash); } }; -- cgit v1.2.3 From d43f89fa0af709b1c1616ab5cfb32b8c27e07ab6 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 23 Oct 2018 17:28:27 -0700 Subject: move buy order state to its own component --- .../src/components/buy_order_state_button.tsx | 24 ++++++++++++++++++++++ .../src/containers/selected_asset_button.tsx | 20 ++---------------- 2 files changed, 26 insertions(+), 18 deletions(-) create mode 100644 packages/instant/src/components/buy_order_state_button.tsx (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx new file mode 100644 index 000000000..e7641e7e7 --- /dev/null +++ b/packages/instant/src/components/buy_order_state_button.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; + +import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button'; +import { SelectedAssetRetryButton } from '../containers/selected_asset_retry_button'; + +import { AsyncProcessState } from '../types'; + +import { SecondaryButton } from './secondary_button'; + +export interface BuyOrderStateButtonProps { + buyOrderState: AsyncProcessState; +} + +export const BuyOrderStateButton: React.StatelessComponent = props => { + if (props.buyOrderState === AsyncProcessState.FAILURE) { + return ; + } else if (props.buyOrderState === AsyncProcessState.SUCCESS) { + return ; + } else if (props.buyOrderState === AsyncProcessState.PENDING) { + return ; + } + + return ; +}; diff --git a/packages/instant/src/containers/selected_asset_button.tsx b/packages/instant/src/containers/selected_asset_button.tsx index 8c617804e..86be291bc 100644 --- a/packages/instant/src/containers/selected_asset_button.tsx +++ b/packages/instant/src/containers/selected_asset_button.tsx @@ -2,12 +2,10 @@ 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'; -import { SelectedAssetBuyButton } from './selected_asset_buy_button'; -import { SelectedAssetRetryButton } from './selected_asset_retry_button'; +import { BuyOrderStateButton } from '../components/buy_order_state_button'; interface ConnectedState { buyOrderState: AsyncProcessState; @@ -17,20 +15,6 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): Con buyOrderState: state.buyOrderState, }); -const SelectedAssetButtonPresentationComponent: React.StatelessComponent<{ - buyOrderState: AsyncProcessState; -}> = props => { - if (props.buyOrderState === AsyncProcessState.FAILURE) { - return ; - } else if (props.buyOrderState === AsyncProcessState.SUCCESS) { - return ; - } else if (props.buyOrderState === AsyncProcessState.PENDING) { - return ; - } - - return ; -}; - export const SelectedAssetButton: React.ComponentClass = connect(mapStateToProps)( - SelectedAssetButtonPresentationComponent, + BuyOrderStateButton, ); -- cgit v1.2.3 From 657ae0cf5732d2ad3bb23ed4270ee20ec9b0f131 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 23 Oct 2018 17:32:20 -0700 Subject: null -> undefined --- packages/instant/src/containers/selected_asset_retry_button.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/containers/selected_asset_retry_button.tsx b/packages/instant/src/containers/selected_asset_retry_button.tsx index 66177551d..b2b140be6 100644 --- a/packages/instant/src/containers/selected_asset_retry_button.tsx +++ b/packages/instant/src/containers/selected_asset_retry_button.tsx @@ -17,10 +17,10 @@ const mapDispatchToProps = ( dispatch: Dispatch, _ownProps: SelectedAssetRetryButtonProps, ): ConnectedDispatch => ({ - onClick: () => dispatch(actions.clearBuyQuoteAndSelectedAssetAmount()), + onClick: () => dispatch(actions.resetAmount()), }); export const SelectedAssetRetryButton: React.ComponentClass = connect( - null, + undefined, mapDispatchToProps, )(RetryButton); -- cgit v1.2.3 From df7a1bd8de064852f30b75feee0b68618c0be7c2 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 23 Oct 2018 17:32:32 -0700 Subject: rename action to resetAmount --- packages/instant/src/redux/actions.ts | 4 ++-- packages/instant/src/redux/reducer.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index bdb53a395..f5946d707 100644 --- a/packages/instant/src/redux/actions.ts +++ b/packages/instant/src/redux/actions.ts @@ -31,7 +31,7 @@ export enum ActionTypes { SET_ERROR = 'SET_ERROR', HIDE_ERROR = 'HIDE_ERROR', CLEAR_ERROR = 'CLEAR_ERROR', - CLEAR_BUY_QUOTE_AND_SELECTED_ASSET_AMOUNT = 'CLEAR_BUY_QUOTE_AND_SELECTED_ASSET_AMOUNT', + RESET_AMOUNT = 'RESET_AMOUNT', } export const actions = { @@ -46,5 +46,5 @@ export const actions = { setError: (error?: any) => createAction(ActionTypes.SET_ERROR, error), hideError: () => createAction(ActionTypes.HIDE_ERROR), clearError: () => createAction(ActionTypes.CLEAR_ERROR), - clearBuyQuoteAndSelectedAssetAmount: () => createAction(ActionTypes.CLEAR_BUY_QUOTE_AND_SELECTED_ASSET_AMOUNT), + resetAmount: () => createAction(ActionTypes.RESET_AMOUNT), }; diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index 260039e3d..ddcb144b1 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -101,7 +101,7 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => ...state, selectedAsset: newSelectedAsset, }; - case ActionTypes.CLEAR_BUY_QUOTE_AND_SELECTED_ASSET_AMOUNT: + case ActionTypes.RESET_AMOUNT: return { ...state, latestBuyQuote: undefined, -- cgit v1.2.3 From 4df8e60f42a372ae70f15cadbe1942ba27097f7a Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 23 Oct 2018 17:36:25 -0700 Subject: rename container --- .../src/components/zero_ex_instant_container.tsx | 4 ++-- .../instant/src/containers/selected_asset_button.tsx | 20 -------------------- .../selected_asset_buy_order_state_button.tsx | 20 ++++++++++++++++++++ 3 files changed, 22 insertions(+), 22 deletions(-) delete mode 100644 packages/instant/src/containers/selected_asset_button.tsx create mode 100644 packages/instant/src/containers/selected_asset_buy_order_state_button.tsx (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index 088d0a93e..1d17ed12a 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details'; import { LatestError } from '../containers/latest_error'; -import { SelectedAssetButton } from '../containers/selected_asset_button'; +import { SelectedAssetBuyOrderStateButton } from '../containers/selected_asset_buy_order_state_button'; import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading'; import { ColorOption } from '../style/theme'; @@ -27,7 +27,7 @@ export const ZeroExInstantContainer: React.StatelessComponent - + diff --git a/packages/instant/src/containers/selected_asset_button.tsx b/packages/instant/src/containers/selected_asset_button.tsx deleted file mode 100644 index 86be291bc..000000000 --- a/packages/instant/src/containers/selected_asset_button.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; -import { connect } from 'react-redux'; - -import { State } from '../redux/reducer'; -import { AsyncProcessState } from '../types'; - -import { BuyOrderStateButton } from '../components/buy_order_state_button'; - -interface ConnectedState { - buyOrderState: AsyncProcessState; -} -export interface SelectedAssetButtonProps {} -const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({ - buyOrderState: state.buyOrderState, -}); - -export const SelectedAssetButton: React.ComponentClass = connect(mapStateToProps)( - BuyOrderStateButton, -); 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 new file mode 100644 index 000000000..3b7fc0054 --- /dev/null +++ b/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx @@ -0,0 +1,20 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { connect } from 'react-redux'; + +import { State } from '../redux/reducer'; +import { AsyncProcessState } from '../types'; + +import { BuyOrderStateButton } from '../components/buy_order_state_button'; + +interface ConnectedState { + buyOrderState: AsyncProcessState; +} +export interface SelectedAssetButtonProps {} +const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({ + buyOrderState: state.buyOrderState, +}); + +export const SelectedAssetBuyOrderStateButton: React.ComponentClass = connect( + mapStateToProps, +)(BuyOrderStateButton); -- cgit v1.2.3