aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSteve Klebanoff <steve@0xproject.com>2018-10-25 03:53:18 +0800
committerGitHub <noreply@github.com>2018-10-25 03:53:18 +0800
commit059868e9942fed4616750d212e706f09d17f397b (patch)
tree7c70fcd71641479479ff831e9e665f7b8e69fa30
parent06ba26a6d30565e7c6c4032528089d30ecc39fdd (diff)
parent09f0bf7f0062bba51380ae904bff96baddf5f0f2 (diff)
downloaddexon-sol-tools-059868e9942fed4616750d212e706f09d17f397b.tar
dexon-sol-tools-059868e9942fed4616750d212e706f09d17f397b.tar.gz
dexon-sol-tools-059868e9942fed4616750d212e706f09d17f397b.tar.bz2
dexon-sol-tools-059868e9942fed4616750d212e706f09d17f397b.tar.lz
dexon-sol-tools-059868e9942fed4616750d212e706f09d17f397b.tar.xz
dexon-sol-tools-059868e9942fed4616750d212e706f09d17f397b.tar.zst
dexon-sol-tools-059868e9942fed4616750d212e706f09d17f397b.zip
Merge pull request #1179 from 0xProject/feature/instant/processing-state
[instant] Success and Processing state
-rw-r--r--packages/instant/package.json2
-rw-r--r--packages/instant/src/components/animations/full_rotation.tsx24
-rw-r--r--packages/instant/src/components/buy_button.tsx4
-rw-r--r--packages/instant/src/components/buy_order_state_button.tsx17
-rw-r--r--packages/instant/src/components/instant_heading.tsx29
-rw-r--r--packages/instant/src/components/placing_order_button.tsx19
-rw-r--r--packages/instant/src/components/retry_button.tsx2
-rw-r--r--packages/instant/src/components/secondary_button.tsx6
-rw-r--r--packages/instant/src/components/ui/spinner.tsx30
-rw-r--r--packages/instant/src/components/view_transaction_button.tsx11
-rw-r--r--packages/instant/src/containers/selected_asset_amount_input.ts2
-rw-r--r--packages/instant/src/containers/selected_asset_buy_button.ts9
-rw-r--r--packages/instant/src/containers/selected_asset_buy_order_state_button.tsx4
-rw-r--r--packages/instant/src/containers/selected_asset_instant_heading.ts4
-rw-r--r--packages/instant/src/containers/selected_asset_view_transaction_button.tsx34
-rw-r--r--packages/instant/src/redux/actions.ts7
-rw-r--r--packages/instant/src/redux/reducer.ts10
-rw-r--r--packages/instant/src/types.ts14
-rw-r--r--packages/instant/src/util/etherscan.ts24
-rw-r--r--yarn.lock9
20 files changed, 216 insertions, 45 deletions
diff --git a/packages/instant/package.json b/packages/instant/package.json
index 1a6e9d2e9..421802530 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -62,8 +62,8 @@
"ts-optchain": "^0.1.1"
},
"devDependencies": {
- "@static/discharge": "^1.2.2",
"@0x/tslint-config": "^1.0.9",
+ "@static/discharge": "^1.2.2",
"@types/enzyme": "^3.1.14",
"@types/enzyme-adapter-react-16": "^1.0.3",
"@types/jest": "^23.3.5",
diff --git a/packages/instant/src/components/animations/full_rotation.tsx b/packages/instant/src/components/animations/full_rotation.tsx
new file mode 100644
index 000000000..9adb565f9
--- /dev/null
+++ b/packages/instant/src/components/animations/full_rotation.tsx
@@ -0,0 +1,24 @@
+import { keyframes, styled } from '../../style/theme';
+
+interface FullRotationProps {
+ height: string;
+ width: string;
+}
+const rotatingKeyframes = keyframes`
+from {
+ transform: rotate(0deg);
+}
+
+to {
+ transform: rotate(360deg);
+}
+`;
+
+export const FullRotation =
+ styled.div <
+ FullRotationProps >
+ `
+ animation: ${rotatingKeyframes} 2s linear infinite;
+ height: ${props => props.height};
+ width: ${props => props.width};
+`;
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index f999d59a8..9c42f3d87 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/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx
index e7641e7e7..5bc965c7d 100644
--- a/packages/instant/src/components/buy_order_state_button.tsx
+++ b/packages/instant/src/components/buy_order_state_button.tsx
@@ -1,23 +1,22 @@
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';
-import { SecondaryButton } from './secondary_button';
-
export interface BuyOrderStateButtonProps {
- buyOrderState: AsyncProcessState;
+ buyOrderProcessingState: AsyncProcessState;
}
export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonProps> = props => {
- if (props.buyOrderState === AsyncProcessState.FAILURE) {
+ if (props.buyOrderProcessingState === AsyncProcessState.FAILURE) {
return <SelectedAssetRetryButton />;
- } else if (props.buyOrderState === AsyncProcessState.SUCCESS) {
- return <SecondaryButton text="Success" isDisabled={true} />;
- } else if (props.buyOrderState === AsyncProcessState.PENDING) {
- return <SecondaryButton text="Processing" isDisabled={true} />;
+ } 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/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/placing_order_button.tsx b/packages/instant/src/components/placing_order_button.tsx
new file mode 100644
index 000000000..4232e6c22
--- /dev/null
+++ b/packages/instant/src/components/placing_order_button.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Button } from './ui/button';
+import { Container } from './ui/container';
+import { Spinner } from './ui/spinner';
+import { Text } from './ui/text';
+
+export const PlacingOrderButton: React.StatelessComponent<{}> = props => (
+ <Button isDisabled={true} width="100%">
+ <Container display="inline-block" position="relative" top="3px" marginRight="8px">
+ <Spinner widthPx={20} heightPx={20} />
+ </Container>
+ <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
+ Placing Order&hellip;
+ </Text>
+ </Button>
+);
diff --git a/packages/instant/src/components/retry_button.tsx b/packages/instant/src/components/retry_button.tsx
index 28547ce54..0d6188e6a 100644
--- a/packages/instant/src/components/retry_button.tsx
+++ b/packages/instant/src/components/retry_button.tsx
@@ -7,5 +7,5 @@ export interface RetryButtonProps {
}
export const RetryButton: React.StatelessComponent<RetryButtonProps> = props => {
- return <SecondaryButton text="Try Again" onClick={props.onClick} />;
+ return <SecondaryButton onClick={props.onClick}>Try Again</SecondaryButton>;
};
diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx
index e073f6061..3c139a233 100644
--- a/packages/instant/src/components/secondary_button.tsx
+++ b/packages/instant/src/components/secondary_button.tsx
@@ -6,9 +6,7 @@ import { ColorOption } from '../style/theme';
import { Button, ButtonProps } from './ui/button';
import { Text } from './ui/text';
-export interface SecondaryButtonProps extends ButtonProps {
- text: string;
-}
+export interface SecondaryButtonProps extends ButtonProps {}
export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = props => {
const buttonProps = _.omit(props, 'text');
@@ -21,7 +19,7 @@ export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = p
{...buttonProps}
>
<Text fontColor={ColorOption.primaryColor} fontWeight={600} fontSize="16px">
- {props.text}
+ {props.children}
</Text>
</Button>
);
diff --git a/packages/instant/src/components/ui/spinner.tsx b/packages/instant/src/components/ui/spinner.tsx
new file mode 100644
index 000000000..28ebc2598
--- /dev/null
+++ b/packages/instant/src/components/ui/spinner.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+import { FullRotation } from '../animations/full_rotation';
+
+export interface SpinnerProps {
+ widthPx: number;
+ heightPx: number;
+}
+export const Spinner: React.StatelessComponent<SpinnerProps> = props => {
+ return (
+ <FullRotation width={`${props.widthPx}px`} height={`${props.heightPx}px`}>
+ <svg
+ width={props.widthPx}
+ height={props.heightPx}
+ viewBox="0 0 34 34"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <circle cx="17" cy="17" r="15" stroke="white" strokeOpacity="0.2" strokeWidth="4" />
+ <path
+ d="M17 32C25.2843 32 32 25.2843 32 17C32 8.71573 25.2843 2 17 2"
+ stroke="white"
+ strokeWidth="4"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ </svg>
+ </FullRotation>
+ );
+};
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>;
+};
diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts
index 0d847cf02..f23b2010e 100644
--- a/packages/instant/src/containers/selected_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_asset_amount_input.ts
@@ -90,7 +90,7 @@ const mapDispatchToProps = (
// invalidate the last buy quote.
dispatch(actions.updateLatestBuyQuote(undefined));
// reset our buy state
- dispatch(actions.updateBuyOrderState(AsyncProcessState.NONE));
+ dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.NONE }));
if (!_.isUndefined(value) && !_.isUndefined(asset) && !_.isUndefined(assetBuyer)) {
// even if it's debounced, give them the illusion it's loading
diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts
index 208bb2582..71d2b8cf0 100644
--- a/packages/instant/src/containers/selected_asset_buy_button.ts
+++ b/packages/instant/src/containers/selected_asset_buy_button.ts
@@ -19,7 +19,7 @@ interface ConnectedState {
interface ConnectedDispatch {
onClick: (buyQuote: BuyQuote) => void;
- onBuySuccess: (buyQuote: BuyQuote) => void;
+ onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void;
onBuyFailure: (buyQuote: BuyQuote) => void;
}
@@ -29,9 +29,10 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps):
});
const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({
- onClick: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.PENDING)),
- onBuySuccess: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.SUCCESS)),
- onBuyFailure: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.FAILURE)),
+ onClick: buyQuote => dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.PENDING })),
+ onBuySuccess: (buyQuote: BuyQuote, txnHash: string) =>
+ dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.SUCCESS, txnHash })),
+ onBuyFailure: buyQuote => dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.FAILURE })),
});
export const SelectedAssetBuyButton: React.ComponentClass<SelectedAssetBuyButtonProps> = connect(
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
index 3b7fc0054..f3efbb5d2 100644
--- a/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx
+++ b/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx
@@ -8,11 +8,11 @@ import { AsyncProcessState } from '../types';
import { BuyOrderStateButton } from '../components/buy_order_state_button';
interface ConnectedState {
- buyOrderState: AsyncProcessState;
+ buyOrderProcessingState: AsyncProcessState;
}
export interface SelectedAssetButtonProps {}
const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({
- buyOrderState: state.buyOrderState,
+ buyOrderProcessingState: state.buyOrderState.processState,
});
export const SelectedAssetBuyOrderStateButton: React.ComponentClass<SelectedAssetButtonProps> = connect(
diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts
index 24efed32e..6b2a29b07 100644
--- a/packages/instant/src/containers/selected_asset_instant_heading.ts
+++ b/packages/instant/src/containers/selected_asset_instant_heading.ts
@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
import { oc } from 'ts-optchain';
import { State } from '../redux/reducer';
-import { AsyncProcessState } from '../types';
+import { AsyncProcessState, OrderState } from '../types';
import { InstantHeading } from '../components/instant_heading';
@@ -16,7 +16,7 @@ interface ConnectedState {
totalEthBaseAmount?: BigNumber;
ethUsdPrice?: BigNumber;
quoteRequestState: AsyncProcessState;
- buyOrderState: AsyncProcessState;
+ buyOrderState: OrderState;
}
const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({
diff --git a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
new file mode 100644
index 000000000..6f42b9f85
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx
@@ -0,0 +1,34 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import { State } from '../redux/reducer';
+
+import { ViewTransactionButton } from '../components/view_transaction_button';
+import { AsyncProcessState } from '../types';
+import { etherscanUtil } from '../util/etherscan';
+
+export interface SelectedAssetViewTransactionButtonProps {}
+
+interface ConnectedState {
+ onClick: () => void;
+}
+
+const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
+ onClick: () => {
+ if (state.assetBuyer && state.buyOrderState.processState === AsyncProcessState.SUCCESS) {
+ const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
+ state.buyOrderState.txnHash,
+ state.assetBuyer.networkId,
+ );
+ if (etherscanUrl) {
+ window.open(etherscanUrl, '_blank');
+ return;
+ }
+ }
+ },
+});
+
+export const SelectedAssetViewTransactionButton: React.ComponentClass<
+ SelectedAssetViewTransactionButtonProps
+> = connect(mapStateToProps)(ViewTransactionButton);
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index f5946d707..5a4099f15 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -2,7 +2,7 @@ import { BuyQuote } from '@0x/asset-buyer';
import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
-import { ActionsUnion, AsyncProcessState } from '../types';
+import { ActionsUnion, OrderState } from '../types';
export interface PlainAction<T extends string> {
type: T;
@@ -23,7 +23,7 @@ function createAction<T extends string, P>(type: T, data?: P): PlainAction<T> |
export enum ActionTypes {
UPDATE_ETH_USD_PRICE = 'UPDATE_ETH_USD_PRICE',
UPDATE_SELECTED_ASSET_AMOUNT = 'UPDATE_SELECTED_ASSET_AMOUNT',
- UPDATE_SELECTED_ASSET_BUY_STATE = 'UPDATE_SELECTED_ASSET_BUY_STATE',
+ UPDATE_BUY_ORDER_STATE = 'UPDATE_BUY_ORDER_STATE',
UPDATE_LATEST_BUY_QUOTE = 'UPDATE_LATEST_BUY_QUOTE',
UPDATE_SELECTED_ASSET = 'UPDATE_SELECTED_ASSET',
SET_QUOTE_REQUEST_STATE_PENDING = 'SET_QUOTE_REQUEST_STATE_PENDING',
@@ -37,8 +37,7 @@ export enum ActionTypes {
export const actions = {
updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price),
updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
- updateBuyOrderState: (buyState: AsyncProcessState) =>
- createAction(ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE, buyState),
+ updateBuyOrderState: (orderState: OrderState) => createAction(ActionTypes.UPDATE_BUY_ORDER_STATE, orderState),
updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote),
updateSelectedAsset: (assetData?: string) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, assetData),
setQuoteRequestStatePending: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING),
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index ddcb144b1..c6a05ac52 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -4,7 +4,7 @@ import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
import { assetMetaDataMap } from '../data/asset_meta_data_map';
-import { Asset, AssetMetaData, AsyncProcessState, DisplayStatus, Network } from '../types';
+import { Asset, AssetMetaData, AsyncProcessState, DisplayStatus, Network, OrderState } from '../types';
import { assetUtils } from '../util/asset';
import { Action, ActionTypes } from './actions';
@@ -15,7 +15,7 @@ export interface State {
assetMetaDataMap: ObjectMap<AssetMetaData>;
selectedAsset?: Asset;
selectedAssetAmount?: BigNumber;
- buyOrderState: AsyncProcessState;
+ buyOrderState: OrderState;
ethUsdPrice?: BigNumber;
latestBuyQuote?: BuyQuote;
quoteRequestState: AsyncProcessState;
@@ -27,7 +27,7 @@ export const INITIAL_STATE: State = {
network: Network.Mainnet,
selectedAssetAmount: undefined,
assetMetaDataMap,
- buyOrderState: AsyncProcessState.NONE,
+ buyOrderState: { processState: AsyncProcessState.NONE },
ethUsdPrice: undefined,
latestBuyQuote: undefined,
latestError: undefined,
@@ -65,7 +65,7 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
latestBuyQuote: undefined,
quoteRequestState: AsyncProcessState.FAILURE,
};
- case ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE:
+ case ActionTypes.UPDATE_BUY_ORDER_STATE:
return {
...state,
buyOrderState: action.data,
@@ -106,7 +106,7 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
...state,
latestBuyQuote: undefined,
quoteRequestState: AsyncProcessState.NONE,
- buyOrderState: AsyncProcessState.NONE,
+ buyOrderState: { processState: AsyncProcessState.NONE },
selectedAssetAmount: undefined,
};
default:
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index c340623ad..c5521c63c 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -7,6 +7,20 @@ export enum AsyncProcessState {
SUCCESS = 'Success',
FAILURE = 'Failure',
}
+
+interface RegularOrderState {
+ processState: AsyncProcessState.NONE | AsyncProcessState.PENDING;
+}
+interface SuccessfulOrderState {
+ processState: AsyncProcessState.SUCCESS;
+ txnHash: string;
+}
+interface FailureOrderState {
+ processState: AsyncProcessState.FAILURE;
+ txnHash?: string;
+}
+export type OrderState = RegularOrderState | SuccessfulOrderState | FailureOrderState;
+
export enum DisplayStatus {
Present,
Hidden,
diff --git a/packages/instant/src/util/etherscan.ts b/packages/instant/src/util/etherscan.ts
new file mode 100644
index 000000000..ffb08a382
--- /dev/null
+++ b/packages/instant/src/util/etherscan.ts
@@ -0,0 +1,24 @@
+import * as _ from 'lodash';
+
+import { Network } from '../types';
+
+const etherscanPrefix = (networkId: number): string | undefined => {
+ switch (networkId) {
+ case Network.Kovan:
+ return 'kovan.';
+ case Network.Mainnet:
+ return '';
+ default:
+ return undefined;
+ }
+};
+
+export const etherscanUtil = {
+ getEtherScanTxnAddressIfExists: (txnHash: string, networkId: number) => {
+ const prefix = etherscanPrefix(networkId);
+ if (_.isUndefined(prefix)) {
+ return;
+ }
+ return `https://${prefix}etherscan.io/tx/${txnHash}`;
+ },
+};
diff --git a/yarn.lock b/yarn.lock
index f0064bff1..95650a2d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6730,7 +6730,7 @@ ganache-core@0xProject/ganache-core#monorepo-dep:
ethereumjs-tx "0xProject/ethereumjs-tx#fake-tx-include-signature-by-default"
ethereumjs-util "^5.2.0"
ethereumjs-vm "2.3.5"
- ethereumjs-wallet "~0.6.0"
+ ethereumjs-wallet "0.6.0"
fake-merkle-patricia-tree "~1.0.1"
heap "~0.2.6"
js-scrypt "^0.2.0"
@@ -12533,6 +12533,13 @@ react-scroll@0xproject/react-scroll#pr-330-and-replace-state:
lodash.throttle "^4.1.1"
prop-types "^15.5.8"
+react-scroll@0xproject/react-scroll#similar-to-pr-330-but-with-replace-state:
+ version "1.7.10"
+ resolved "https://codeload.github.com/0xproject/react-scroll/tar.gz/0f625b270d7e966313cac8b811c0ae807b37e170"
+ dependencies:
+ lodash.throttle "^4.1.1"
+ prop-types "^15.5.8"
+
react-side-effect@^1.0.2, react-side-effect@^1.1.0:
version "1.1.5"
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.5.tgz#f26059e50ed9c626d91d661b9f3c8bb38cd0ff2d"