aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
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 /packages/instant/src/components
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
Diffstat (limited to 'packages/instant/src/components')
-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
3 files changed, 90 insertions, 9 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>
+ );
+};