aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-24 08:06:45 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-24 08:06:45 +0800
commit4c4286ac662d3dba928bf16b83ade5e5476f4614 (patch)
treebce36f2ff8fce37e690409584ffe00bc391cebf1 /packages/instant/src/components
parent194cbc3ba941023a0b6c1845a867ccfd619b754f (diff)
downloaddexon-sol-tools-4c4286ac662d3dba928bf16b83ade5e5476f4614.tar
dexon-sol-tools-4c4286ac662d3dba928bf16b83ade5e5476f4614.tar.gz
dexon-sol-tools-4c4286ac662d3dba928bf16b83ade5e5476f4614.tar.bz2
dexon-sol-tools-4c4286ac662d3dba928bf16b83ade5e5476f4614.tar.lz
dexon-sol-tools-4c4286ac662d3dba928bf16b83ade5e5476f4614.tar.xz
dexon-sol-tools-4c4286ac662d3dba928bf16b83ade5e5476f4614.tar.zst
dexon-sol-tools-4c4286ac662d3dba928bf16b83ade5e5476f4614.zip
feat(instant): Procesing and Success states
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r--packages/instant/src/components/buy_button.tsx4
-rw-r--r--packages/instant/src/components/instant_heading.tsx29
-rw-r--r--packages/instant/src/components/view_transaction_button.tsx11
3 files changed, 33 insertions, 11 deletions
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 2def34fd7..1afd216d8 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -41,8 +41,8 @@ export class BuyButton extends React.Component<BuyButtonProps> {
let txnHash;
try {
txnHash = await this.props.assetBuyer.executeBuyQuoteAsync(this.props.buyQuote);
- await web3Wrapper.awaitTransactionSuccessAsync(txnHash);
- this.props.onBuySuccess(this.props.buyQuote, txnHash);
+ const txnReceipt = await web3Wrapper.awaitTransactionSuccessAsync(txnHash);
+ this.props.onBuySuccess(this.props.buyQuote, txnReceipt.transactionHash);
} catch {
this.props.onBuyFailure(this.props.buyQuote, txnHash);
}
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 856e4d43e..ed753a3bd 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input';
import { ColorOption } from '../style/theme';
-import { AsyncProcessState } from '../types';
+import { AsyncProcessState, OrderState } from '../types';
import { format } from '../util/format';
import { AmountPlaceholder } from './amount_placeholder';
@@ -16,10 +16,14 @@ export interface InstantHeadingProps {
totalEthBaseAmount?: BigNumber;
ethUsdPrice?: BigNumber;
quoteRequestState: AsyncProcessState;
- buyOrderState: AsyncProcessState;
+ buyOrderState: OrderState;
}
-const placeholderColor = ColorOption.white;
+const PLACEHOLDER_COLOR = ColorOption.white;
+const ICON_WIDTH = 34;
+const ICON_HEIGHT = 34;
+const ICON_COLOR = ColorOption.white;
+
export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
public render(): React.ReactNode {
const iconOrAmounts = this._renderIcon() || this._renderAmountsSection();
@@ -62,15 +66,22 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
}
private _renderIcon(): React.ReactNode {
- if (this.props.buyOrderState === AsyncProcessState.FAILURE) {
- return <Icon icon={'failed'} width={34} height={34} color={ColorOption.white} />;
+ const processState = this.props.buyOrderState.processState;
+
+ if (processState === AsyncProcessState.FAILURE) {
+ return <Icon icon={'failed'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
+ } else if (processState === AsyncProcessState.SUCCESS) {
+ return <Icon icon={'success'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
}
return undefined;
}
private _renderTopText(): React.ReactNode {
- if (this.props.buyOrderState === AsyncProcessState.FAILURE) {
+ const processState = this.props.buyOrderState.processState;
+ if (processState === AsyncProcessState.FAILURE) {
return 'Order failed';
+ } else if (processState === AsyncProcessState.SUCCESS) {
+ return 'Tokens received!';
}
return 'I want to buy';
@@ -78,10 +89,10 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
private _placeholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode {
if (this.props.quoteRequestState === AsyncProcessState.PENDING) {
- return <AmountPlaceholder isPulsating={true} color={placeholderColor} />;
+ return <AmountPlaceholder isPulsating={true} color={PLACEHOLDER_COLOR} />;
}
if (_.isUndefined(this.props.selectedAssetAmount)) {
- return <AmountPlaceholder isPulsating={false} color={placeholderColor} />;
+ return <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />;
}
return amountFunction();
}
@@ -92,7 +103,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
{format.ethBaseAmount(
this.props.totalEthBaseAmount,
4,
- <AmountPlaceholder isPulsating={false} color={placeholderColor} />,
+ <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />,
)}
</Text>
);
diff --git a/packages/instant/src/components/view_transaction_button.tsx b/packages/instant/src/components/view_transaction_button.tsx
new file mode 100644
index 000000000..7aa44e657
--- /dev/null
+++ b/packages/instant/src/components/view_transaction_button.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { SecondaryButton } from './secondary_button';
+
+export interface ViewTransactionButtonProps {
+ onClick: () => void;
+}
+
+export const ViewTransactionButton: React.StatelessComponent<ViewTransactionButtonProps> = props => {
+ return <SecondaryButton onClick={props.onClick}>View Transaction</SecondaryButton>;
+};