From 4c4286ac662d3dba928bf16b83ade5e5476f4614 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 23 Oct 2018 17:06:45 -0700 Subject: feat(instant): Procesing and Success states --- packages/instant/package.json | 3 +- packages/instant/src/components/buy_button.tsx | 4 +-- .../instant/src/components/instant_heading.tsx | 29 ++++++++++++------ .../src/components/view_transaction_button.tsx | 11 +++++++ .../src/containers/selected_asset_amount_input.ts | 2 +- .../src/containers/selected_asset_button.tsx | 15 +++++----- .../src/containers/selected_asset_buy_button.ts | 9 +++--- .../containers/selected_asset_instant_heading.ts | 4 +-- .../selected_asset_view_transaction_button.tsx | 35 ++++++++++++++++++++++ packages/instant/src/redux/actions.ts | 7 ++--- packages/instant/src/redux/reducer.ts | 10 +++---- packages/instant/src/types.ts | 14 +++++++++ yarn.lock | 9 +++++- 13 files changed, 116 insertions(+), 36 deletions(-) create mode 100644 packages/instant/src/components/view_transaction_button.tsx create mode 100644 packages/instant/src/containers/selected_asset_view_transaction_button.tsx diff --git a/packages/instant/package.json b/packages/instant/package.json index 1a6e9d2e9..a7aa25f1b 100644 --- a/packages/instant/package.json +++ b/packages/instant/package.json @@ -46,6 +46,7 @@ "dependencies": { "@0x/asset-buyer": "^2.1.0", "@0x/order-utils": "^2.0.0", + "@0x/react-shared": "^1.0.17", "@0x/types": "^1.2.0", "@0x/typescript-typings": "^3.0.3", "@0x/utils": "^2.0.3", @@ -62,8 +63,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/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 { 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 { public render(): React.ReactNode { const iconOrAmounts = this._renderIcon() || this._renderAmountsSection(); @@ -62,15 +66,22 @@ export class InstantHeading extends React.Component { } private _renderIcon(): React.ReactNode { - if (this.props.buyOrderState === AsyncProcessState.FAILURE) { - return ; + const processState = this.props.buyOrderState.processState; + + if (processState === AsyncProcessState.FAILURE) { + return ; + } else if (processState === AsyncProcessState.SUCCESS) { + return ; } 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 { private _placeholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode { if (this.props.quoteRequestState === AsyncProcessState.PENDING) { - return ; + return ; } if (_.isUndefined(this.props.selectedAssetAmount)) { - return ; + return ; } return amountFunction(); } @@ -92,7 +103,7 @@ export class InstantHeading extends React.Component { {format.ethBaseAmount( this.props.totalEthBaseAmount, 4, - , + , )} ); 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 = props => { + return View Transaction; +}; 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_button.tsx b/packages/instant/src/containers/selected_asset_button.tsx index 6fad365fa..d368d05e1 100644 --- a/packages/instant/src/containers/selected_asset_button.tsx +++ b/packages/instant/src/containers/selected_asset_button.tsx @@ -4,15 +4,16 @@ import { connect } from 'react-redux'; import { SecondaryButton } from '../components/secondary_button'; import { State } from '../redux/reducer'; -import { AsyncProcessState } from '../types'; +import { AsyncProcessState, OrderState } from '../types'; import { PlacingOrderButton } from '../components/placing_order_button'; import { SelectedAssetBuyButton } from './selected_asset_buy_button'; import { SelectedAssetRetryButton } from './selected_asset_retry_button'; +import { SelectedAssetViewTransactionButton } from './selected_asset_view_transaction_button'; interface ConnectedState { - buyOrderState: AsyncProcessState; + buyOrderState: OrderState; } export interface SelectedAssetButtonProps {} const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({ @@ -20,13 +21,13 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): Con }); const SelectedAssetButtonPresentationComponent: React.StatelessComponent<{ - buyOrderState: AsyncProcessState; + buyOrderState: OrderState; }> = props => { - if (props.buyOrderState === AsyncProcessState.FAILURE) { + if (props.buyOrderState.processState === AsyncProcessState.FAILURE) { return ; - } else if (props.buyOrderState === AsyncProcessState.SUCCESS) { - return Success; - } else if (props.buyOrderState === AsyncProcessState.PENDING) { + } else if (props.buyOrderState.processState === AsyncProcessState.SUCCESS) { + return ; + } else if (props.buyOrderState.processState === AsyncProcessState.PENDING) { return ; } 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, 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 = 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..44de16c4a --- /dev/null +++ b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx @@ -0,0 +1,35 @@ +import { EtherscanLinkSuffixes, utils } from '@0x/react-shared'; +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'; + +export interface SelectedAssetViewTransactionButtonProps {} + +interface ConnectedState { + onClick: () => void; +} + +const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({ + onClick: () => { + if (state.assetBuyer && state.buyOrderState.processState === AsyncProcessState.SUCCESS) { + const etherscanUrl = utils.getEtherScanLinkIfExists( + state.buyOrderState.txnHash, + state.assetBuyer.networkId, + EtherscanLinkSuffixes.Tx, + ); + 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 bdb53a395..1360634d7 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, AsyncProcessState, OrderState } from '../types'; export interface PlainAction { type: T; @@ -23,7 +23,7 @@ function createAction(type: T, data?: P): PlainAction | 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 260039e3d..1aedcbcc4 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; 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 7323123c3..b7b16f4d7 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/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" -- cgit v1.2.3