aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-20 05:49:38 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-20 05:49:38 +0800
commitd2766d7ced990efd5a91441b459f36e8a21f8513 (patch)
tree8d8c8d45ddf8ece95bcc84645b6076e59b54604e /packages/instant/src
parent6c79a858dff2766917ee3a4b5d4f623b66dadd17 (diff)
downloaddexon-0x-contracts-d2766d7ced990efd5a91441b459f36e8a21f8513.tar.gz
dexon-0x-contracts-d2766d7ced990efd5a91441b459f36e8a21f8513.tar.zst
dexon-0x-contracts-d2766d7ced990efd5a91441b459f36e8a21f8513.zip
Selected Asset button
Diffstat (limited to 'packages/instant/src')
-rw-r--r--packages/instant/src/components/asset_button.tsx51
-rw-r--r--packages/instant/src/components/buy_button.tsx6
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx6
-rw-r--r--packages/instant/src/containers/selected_asset_button.tsx33
-rw-r--r--packages/instant/src/containers/selected_asset_buy_button.ts10
-rw-r--r--packages/instant/src/containers/selected_asset_retry_button.tsx27
6 files changed, 68 insertions, 65 deletions
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<AssetButtonProps, {}> {
- public render(): React.ReactNode {
- return (
- <Container padding="20px" width="100%">
- {this._renderButton()}
- </Container>
- );
- }
- 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 <RetryButton onClick={this.props.onRetryClick} />;
- case AsyncProcessState.SUCCESS:
- return <div />;
- default:
- return (
- <BuyButton
- buyQuote={this.props.buyQuote}
- assetBuyer={this.props.assetBuyer}
- onClick={this.props.onBuyClick}
- onBuySuccess={this.props.onBuySuccess}
- onBuyFailure={this.props.onBuyFailure}
- text={'Buy'}
- />
- );
- }
- }
-}
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<BuyButtonProps> {
@@ -24,12 +23,11 @@ export class BuyButton extends React.Component<BuyButtonProps> {
onBuyFailure: util.boundNoop,
};
public render(): React.ReactNode {
- // TODO: move container out
const shouldDisableButton = _.isUndefined(this.props.buyQuote);
return (
<Button width="100%" onClick={this._handleClick} isDisabled={shouldDisableButton}>
<Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
- {this.props.text}
+ Buy
</Text>
</Button>
);
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<ZeroExInstantConta
<Flex direction="column" justify="flex-start">
<SelectedAssetInstantHeading />
<LatestBuyQuoteOrderDetails />
- <SelectedAssetBuyButton />
+ <Container padding="20px" width="100%">
+ <SelectedAssetButton />
+ </Container>
</Flex>
</Container>
</Container>
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 <SelectedAssetRetryButton />;
+ }
+
+ return <SelectedAssetBuyButton />;
+};
+
+export const SelectedAssetButton: React.ComponentClass<SelectedAssetButtonProps> = 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<Action>, 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<SelectedAssetBuyButtonProps> = 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<Action>,
+ _ownProps: SelectedAssetRetryButtonProps,
+): ConnectedDispatch => ({
+ onClick: () => dispatch(actions.clearBuyQuoteAndSelectedAssetAmount()),
+});
+
+export const SelectedAssetRetryButton: React.ComponentClass<SelectedAssetRetryButtonProps> = connect(
+ null,
+ mapDispatchToProps,
+)(RetryButton);