aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-20 04:42:42 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-20 04:42:42 +0800
commit17b282b1d743c83a4a4378eb71df098949569bdd (patch)
tree9906016f23e746421a626277827d9fae2d20d390
parent48dd9569f7d8dac398c4af629c6efa2738aec285 (diff)
downloaddexon-sol-tools-17b282b1d743c83a4a4378eb71df098949569bdd.tar
dexon-sol-tools-17b282b1d743c83a4a4378eb71df098949569bdd.tar.gz
dexon-sol-tools-17b282b1d743c83a4a4378eb71df098949569bdd.tar.bz2
dexon-sol-tools-17b282b1d743c83a4a4378eb71df098949569bdd.tar.lz
dexon-sol-tools-17b282b1d743c83a4a4378eb71df098949569bdd.tar.xz
dexon-sol-tools-17b282b1d743c83a4a4378eb71df098949569bdd.tar.zst
dexon-sol-tools-17b282b1d743c83a4a4378eb71df098949569bdd.zip
wip: retry button
-rw-r--r--packages/instant/src/components/asset_button.tsx55
-rw-r--r--packages/instant/src/components/buy_button.tsx20
-rw-r--r--packages/instant/src/components/retry_button.tsx24
-rw-r--r--packages/instant/src/containers/selected_asset_buy_button.ts29
4 files changed, 98 insertions, 30 deletions
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<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={() => {
+ console.log('try again');
+ }}
+ />
+ );
+ 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 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<BuyButtonProps> {
onBuyFailure: util.boundNoop,
};
public render(): React.ReactNode {
+ // TODO: move container out
const shouldDisableButton = _.isUndefined(this.props.buyQuote);
return (
- <Container padding="20px" width="100%">
- <Button width="100%" onClick={this._handleClick} isDisabled={shouldDisableButton}>
- <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
- {this.props.text}
- </Text>
- </Button>
- </Container>
+ <Button width="100%" onClick={this._handleClick} isDisabled={shouldDisableButton}>
+ <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
+ {this.props.text}
+ </Text>
+ </Button>
);
}
private readonly _handleClick = async () => {
@@ -43,10 +42,13 @@ export class BuyButton extends React.Component<BuyButtonProps> {
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<RetryButtonProps> = props => {
+ return (
+ <Button
+ backgroundColor={ColorOption.white}
+ borderColor={ColorOption.lightGrey}
+ width="100%"
+ onClick={props.onClick}
+ >
+ <Text fontColor={ColorOption.primaryColor} fontWeight={600} fontSize="16px">
+ Try Again
+ </Text>
+ </Button>
+ );
+};
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<Action>, 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<Action>, ownProps: SelectedAssetB
export const SelectedAssetBuyButton: React.ComponentClass<SelectedAssetBuyButtonProps> = connect(
mapStateToProps,
mapDispatchToProps,
-)(BuyButton);
+)(AssetButton);