diff options
Diffstat (limited to 'packages/instant/src')
-rw-r--r-- | packages/instant/src/components/buy_button.tsx | 2 | ||||
-rw-r--r-- | packages/instant/src/components/buy_order_state_button.tsx | 23 | ||||
-rw-r--r-- | packages/instant/src/components/zero_ex_instant.tsx | 8 | ||||
-rw-r--r-- | packages/instant/src/components/zero_ex_instant_container.tsx | 4 | ||||
-rw-r--r-- | packages/instant/src/constants.ts | 1 | ||||
-rw-r--r-- | packages/instant/src/containers/selected_asset_button.tsx | 39 | ||||
-rw-r--r-- | packages/instant/src/containers/selected_asset_buy_order_state_button.tsx | 20 | ||||
-rw-r--r-- | packages/instant/src/containers/selected_asset_retry_button.tsx | 4 | ||||
-rw-r--r-- | packages/instant/src/index.umd.ts | 3 | ||||
-rw-r--r-- | packages/instant/src/redux/actions.ts | 4 | ||||
-rw-r--r-- | packages/instant/src/redux/reducer.ts | 2 | ||||
-rw-r--r-- | packages/instant/src/types.ts | 1 |
12 files changed, 59 insertions, 52 deletions
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 1afd216d8..9c42f3d87 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -23,7 +23,7 @@ export class BuyButton extends React.Component<BuyButtonProps> { onBuyFailure: util.boundNoop, }; public render(): React.ReactNode { - const shouldDisableButton = _.isUndefined(this.props.buyQuote); + const shouldDisableButton = _.isUndefined(this.props.buyQuote) || _.isUndefined(this.props.assetBuyer); return ( <Button width="100%" onClick={this._handleClick} isDisabled={shouldDisableButton}> <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px"> 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..5bc965c7d --- /dev/null +++ b/packages/instant/src/components/buy_order_state_button.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; + +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'; + +export interface BuyOrderStateButtonProps { + buyOrderProcessingState: AsyncProcessState; +} + +export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonProps> = props => { + if (props.buyOrderProcessingState === AsyncProcessState.FAILURE) { + return <SelectedAssetRetryButton />; + } else if (props.buyOrderProcessingState === AsyncProcessState.SUCCESS) { + return <SelectedAssetViewTransactionButton />; + } else if (props.buyOrderProcessingState === AsyncProcessState.PENDING) { + return <PlacingOrderButton />; + } + + return <SelectedAssetBuyButton />; +}; diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx index 142e74dae..ffa5a8250 100644 --- a/packages/instant/src/components/zero_ex_instant.tsx +++ b/packages/instant/src/components/zero_ex_instant.tsx @@ -31,7 +31,7 @@ export interface ZeroExInstantOptionalProps { } export class ZeroExInstant extends React.Component<ZeroExInstantProps> { - public store: Store; + private readonly _store: Store; private static _mergeInitialStateWithProps(props: ZeroExInstantProps, state: State = INITIAL_STATE): State { // Create merged object such that properties in props override default settings const optionalPropsWithDefaults: ZeroExInstantOptionalProps = { @@ -58,14 +58,14 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> { } constructor(props: ZeroExInstantProps) { super(props); - this.store = store.create(ZeroExInstant._mergeInitialStateWithProps(this.props, INITIAL_STATE)); + this._store = store.create(ZeroExInstant._mergeInitialStateWithProps(this.props, INITIAL_STATE)); // tslint:disable-next-line:no-floating-promises - asyncData.fetchAndDispatchToStore(this.store); + asyncData.fetchAndDispatchToStore(this._store); } public render(): React.ReactNode { return ( - <Provider store={this.store}> + <Provider store={this._store}> <SelectedAssetThemeProvider> <ZeroExInstantContainer /> </SelectedAssetThemeProvider> 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<ZeroExInstantConta <SelectedAssetInstantHeading /> <LatestBuyQuoteOrderDetails /> <Container padding="20px" width="100%"> - <SelectedAssetButton /> + <SelectedAssetBuyOrderStateButton /> </Container> </Flex> </Container> diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index 7f4c5a058..31491c80a 100644 --- a/packages/instant/src/constants.ts +++ b/packages/instant/src/constants.ts @@ -1,3 +1,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'; 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 d368d05e1..000000000 --- a/packages/instant/src/containers/selected_asset_button.tsx +++ /dev/null @@ -1,39 +0,0 @@ -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, OrderState } from '../types'; - -import { PlacingOrderButton } from '../components/placing_order_button'; - -import { SelectedAssetBuyButton } from './selected_asset_buy_button'; -import { SelectedAssetRetryButton } from './selected_asset_retry_button'; -import { SelectedAssetViewTransactionButton } from './selected_asset_view_transaction_button'; - -interface ConnectedState { - buyOrderState: OrderState; -} -export interface SelectedAssetButtonProps {} -const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({ - buyOrderState: state.buyOrderState, -}); - -const SelectedAssetButtonPresentationComponent: React.StatelessComponent<{ - buyOrderState: OrderState; -}> = props => { - if (props.buyOrderState.processState === AsyncProcessState.FAILURE) { - return <SelectedAssetRetryButton />; - } else if (props.buyOrderState.processState === AsyncProcessState.SUCCESS) { - return <SelectedAssetViewTransactionButton />; - } else if (props.buyOrderState.processState === AsyncProcessState.PENDING) { - return <PlacingOrderButton />; - } - - return <SelectedAssetBuyButton />; -}; - -export const SelectedAssetButton: React.ComponentClass<SelectedAssetButtonProps> = connect(mapStateToProps)( - SelectedAssetButtonPresentationComponent, -); 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..f3efbb5d2 --- /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 { + buyOrderProcessingState: AsyncProcessState; +} +export interface SelectedAssetButtonProps {} +const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({ + buyOrderProcessingState: state.buyOrderState.processState, +}); + +export const SelectedAssetBuyOrderStateButton: React.ComponentClass<SelectedAssetButtonProps> = connect( + mapStateToProps, +)(BuyOrderStateButton); 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<Action>, _ownProps: SelectedAssetRetryButtonProps, ): ConnectedDispatch => ({ - onClick: () => dispatch(actions.clearBuyQuoteAndSelectedAssetAmount()), + onClick: () => dispatch(actions.resetAmount()), }); export const SelectedAssetRetryButton: React.ComponentClass<SelectedAssetRetryButtonProps> = connect( - null, + undefined, mapDispatchToProps, )(RetryButton); diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts index fe78ce401..f648b37f2 100644 --- a/packages/instant/src/index.umd.ts +++ b/packages/instant/src/index.umd.ts @@ -1,8 +1,9 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; +import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR } from './constants'; import { ZeroExInstant, ZeroExInstantProps } from './index'; -export const render = (props: ZeroExInstantProps, selector: string = '#zeroExInstantContainer') => { +export const render = (props: ZeroExInstantProps, selector: string = DEFAULT_ZERO_EX_CONTAINER_SELECTOR) => { ReactDOM.render(React.createElement(ZeroExInstant, props), document.querySelector(selector)); }; diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index 1360634d7..9c084ab3c 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 = { @@ -45,5 +45,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 1aedcbcc4..c6a05ac52 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, diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index b7b16f4d7..c5521c63c 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -55,6 +55,7 @@ export interface ERC721Asset { assetData: string; metaData: ERC721AssetMetaData; } + export interface Asset { assetData: string; metaData: AssetMetaData; |