aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src
diff options
context:
space:
mode:
authorSteve Klebanoff <steve@0xproject.com>2018-11-10 08:02:09 +0800
committerGitHub <noreply@github.com>2018-11-10 08:02:09 +0800
commit26cbe7ae6646d97c286e58756c23a93de32ae37b (patch)
tree96943e8dd87f0e3ef8c994101bce5a16a47082ea /packages/instant/src
parent2c585bfbdc4940e3e6089ac1cf595dd009b141d2 (diff)
parentfd83ca2cb893ab7cc027efd6829ba2eb07cdb539 (diff)
downloaddexon-sol-tools-26cbe7ae6646d97c286e58756c23a93de32ae37b.tar
dexon-sol-tools-26cbe7ae6646d97c286e58756c23a93de32ae37b.tar.gz
dexon-sol-tools-26cbe7ae6646d97c286e58756c23a93de32ae37b.tar.bz2
dexon-sol-tools-26cbe7ae6646d97c286e58756c23a93de32ae37b.tar.lz
dexon-sol-tools-26cbe7ae6646d97c286e58756c23a93de32ae37b.tar.xz
dexon-sol-tools-26cbe7ae6646d97c286e58756c23a93de32ae37b.tar.zst
dexon-sol-tools-26cbe7ae6646d97c286e58756c23a93de32ae37b.zip
Merge pull request #1237 from 0xProject/feature/instant/buy-quote-heartbeat
[instant] Heartbeats for account info and buy quotes
Diffstat (limited to 'packages/instant/src')
-rw-r--r--packages/instant/src/components/zero_ex_instant_provider.tsx35
-rw-r--r--packages/instant/src/constants.ts2
-rw-r--r--packages/instant/src/containers/selected_erc20_asset_amount_input.ts4
-rw-r--r--packages/instant/src/redux/async_data.ts14
-rw-r--r--packages/instant/src/util/buy_quote_updater.ts7
-rw-r--r--packages/instant/src/util/heartbeater.ts35
-rw-r--r--packages/instant/src/util/heartbeater_factory.ts22
7 files changed, 106 insertions, 13 deletions
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index cceb44377..11f867abc 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -5,15 +5,18 @@ import * as _ from 'lodash';
import * as React from 'react';
import { Provider as ReduxProvider } from 'react-redux';
+import { ACCOUNT_UPDATE_INTERVAL_TIME_MS, BUY_QUOTE_UPDATE_INTERVAL_TIME_MS } from '../constants';
import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider';
import { asyncData } from '../redux/async_data';
import { DEFAULT_STATE, DefaultState, State } from '../redux/reducer';
import { store, Store } from '../redux/store';
import { fonts } from '../style/fonts';
-import { AffiliateInfo, AssetMetaData, Network, OrderSource } from '../types';
+import { AccountState, AffiliateInfo, AssetMetaData, Network, OrderSource } from '../types';
import { assetUtils } from '../util/asset';
import { errorFlasher } from '../util/error_flasher';
import { gasPriceEstimator } from '../util/gas_price_estimator';
+import { Heartbeater } from '../util/heartbeater';
+import { generateAccountHeartbeater, generateBuyQuoteHeartbeater } from '../util/heartbeater_factory';
import { providerStateFactory } from '../util/provider_state_factory';
fonts.include();
@@ -37,6 +40,9 @@ export interface ZeroExInstantProviderOptionalProps {
export class ZeroExInstantProvider extends React.Component<ZeroExInstantProviderProps> {
private readonly _store: Store;
+ private _accountUpdateHeartbeat?: Heartbeater;
+ private _buyQuoteHeartbeat?: Heartbeater;
+
// TODO(fragosti): Write tests for this beast once we inject a provider.
private static _mergeDefaultStateWithProps(
props: ZeroExInstantProviderProps,
@@ -92,10 +98,23 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
// tslint:disable-next-line:no-floating-promises
asyncData.fetchAvailableAssetDatasAndDispatchToStore(this._store);
}
+
+ if (state.providerState.account.state !== AccountState.None) {
+ this._accountUpdateHeartbeat = generateAccountHeartbeater({
+ store: this._store,
+ shouldPerformImmediatelyOnStart: true,
+ });
+ this._accountUpdateHeartbeat.start(ACCOUNT_UPDATE_INTERVAL_TIME_MS);
+ }
+
+ this._buyQuoteHeartbeat = generateBuyQuoteHeartbeater({
+ store: this._store,
+ shouldPerformImmediatelyOnStart: false,
+ });
+ this._buyQuoteHeartbeat.start(BUY_QUOTE_UPDATE_INTERVAL_TIME_MS);
// tslint:disable-next-line:no-floating-promises
- asyncData.fetchAccountInfoAndDispatchToStore(this._store);
- // tslint:disable-next-line:no-floating-promises
- asyncData.fetchCurrentBuyQuoteAndDispatchToStore(this._store);
+ asyncData.fetchCurrentBuyQuoteAndDispatchToStore({ store: this._store, shouldSetPending: true });
+
// warm up the gas price estimator cache just in case we can't
// grab the gas price estimate when submitting the transaction
// tslint:disable-next-line:no-floating-promises
@@ -103,6 +122,14 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
// tslint:disable-next-line:no-floating-promises
this._flashErrorIfWrongNetwork();
}
+ public componentWillUnmount(): void {
+ if (this._accountUpdateHeartbeat) {
+ this._accountUpdateHeartbeat.stop();
+ }
+ if (this._buyQuoteHeartbeat) {
+ this._buyQuoteHeartbeat.stop();
+ }
+ }
public render(): React.ReactNode {
return (
<ReduxProvider store={this._store}>
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index b5c4f96e4..6bfbc690e 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -11,6 +11,8 @@ export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction fa
export const GWEI_IN_WEI = new BigNumber(1000000000);
export const ONE_SECOND_MS = 1000;
export const ONE_MINUTE_MS = ONE_SECOND_MS * 60;
+export const ACCOUNT_UPDATE_INTERVAL_TIME_MS = ONE_SECOND_MS * 5;
+export const BUY_QUOTE_UPDATE_INTERVAL_TIME_MS = ONE_SECOND_MS * 15;
export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
export const DEFAULT_ESTIMATED_TRANSACTION_TIME_MS = ONE_MINUTE_MS * 2;
export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index c550aef04..93ff3db70 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -69,7 +69,7 @@ const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputP
const debouncedUpdateBuyQuoteAsync = _.debounce(buyQuoteUpdater.updateBuyQuoteAsync.bind(buyQuoteUpdater), 200, {
trailing: true,
-});
+}) as typeof buyQuoteUpdater.updateBuyQuoteAsync;
const mapDispatchToProps = (
dispatch: Dispatch<Action>,
@@ -87,7 +87,7 @@ const mapDispatchToProps = (
// even if it's debounced, give them the illusion it's loading
dispatch(actions.setQuoteRequestStatePending());
// tslint:disable-next-line:no-floating-promises
- debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value, affiliateInfo);
+ debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value, true, affiliateInfo);
}
},
});
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index a8f632009..a47c7a605 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -2,7 +2,7 @@ import { AssetProxyId } from '@0x/types';
import * as _ from 'lodash';
import { BIG_NUMBER_ZERO } from '../constants';
-import { AccountState, ERC20Asset } from '../types';
+import { AccountState, ERC20Asset, OrderProcessState } from '../types';
import { assetUtils } from '../util/asset';
import { buyQuoteUpdater } from '../util/buy_quote_updater';
import { coinbaseApi } from '../util/coinbase_api';
@@ -36,10 +36,11 @@ export const asyncData = {
store.dispatch(actions.setAvailableAssets([]));
}
},
- fetchAccountInfoAndDispatchToStore: async (store: Store) => {
+ fetchAccountInfoAndDispatchToStore: async (options: { store: Store; shouldSetToLoading: boolean }) => {
+ const { store, shouldSetToLoading } = options;
const { providerState } = store.getState();
const web3Wrapper = providerState.web3Wrapper;
- if (providerState.account.state !== AccountState.Loading) {
+ if (shouldSetToLoading && providerState.account.state !== AccountState.Loading) {
store.dispatch(actions.setAccountStateLoading());
}
let availableAddresses: string[];
@@ -74,12 +75,14 @@ export const asyncData = {
return;
}
},
- fetchCurrentBuyQuoteAndDispatchToStore: async (store: Store) => {
- const { providerState, selectedAsset, selectedAssetAmount, affiliateInfo } = store.getState();
+ fetchCurrentBuyQuoteAndDispatchToStore: async (options: { store: Store; shouldSetPending: boolean }) => {
+ const { store, shouldSetPending } = options;
+ const { buyOrderState, providerState, selectedAsset, selectedAssetAmount, affiliateInfo } = store.getState();
const assetBuyer = providerState.assetBuyer;
if (
!_.isUndefined(selectedAssetAmount) &&
!_.isUndefined(selectedAsset) &&
+ buyOrderState.processState === OrderProcessState.None &&
selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20
) {
await buyQuoteUpdater.updateBuyQuoteAsync(
@@ -87,6 +90,7 @@ export const asyncData = {
store.dispatch,
selectedAsset as ERC20Asset,
selectedAssetAmount,
+ shouldSetPending,
affiliateInfo,
);
}
diff --git a/packages/instant/src/util/buy_quote_updater.ts b/packages/instant/src/util/buy_quote_updater.ts
index e697d3ef7..c33e28f1c 100644
--- a/packages/instant/src/util/buy_quote_updater.ts
+++ b/packages/instant/src/util/buy_quote_updater.ts
@@ -16,12 +16,15 @@ export const buyQuoteUpdater = {
dispatch: Dispatch<Action>,
asset: ERC20Asset,
assetAmount: BigNumber,
+ setPending = true,
affiliateInfo?: AffiliateInfo,
): Promise<void> => {
// get a new buy quote.
const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals);
- // mark quote as pending
- dispatch(actions.setQuoteRequestStatePending());
+ if (setPending) {
+ // mark quote as pending
+ dispatch(actions.setQuoteRequestStatePending());
+ }
const feePercentage = oc(affiliateInfo).feePercentage();
let newBuyQuote: BuyQuote | undefined;
try {
diff --git a/packages/instant/src/util/heartbeater.ts b/packages/instant/src/util/heartbeater.ts
new file mode 100644
index 000000000..e700d489e
--- /dev/null
+++ b/packages/instant/src/util/heartbeater.ts
@@ -0,0 +1,35 @@
+import { intervalUtils } from '@0x/utils';
+import * as _ from 'lodash';
+
+type HeartbeatableFunction = () => Promise<void>;
+export class Heartbeater {
+ private _intervalId?: NodeJS.Timer;
+ private readonly _performImmediatelyOnStart: boolean;
+ private readonly _performFunction: HeartbeatableFunction;
+
+ public constructor(performingFunctionAsync: HeartbeatableFunction, performImmediatelyOnStart: boolean) {
+ this._performFunction = performingFunctionAsync;
+ this._performImmediatelyOnStart = performImmediatelyOnStart;
+ }
+
+ public start(intervalTimeMs: number): void {
+ if (!_.isUndefined(this._intervalId)) {
+ throw new Error('Heartbeat is running, please stop before restarting');
+ }
+
+ if (this._performImmediatelyOnStart) {
+ // tslint:disable-next-line:no-floating-promises
+ this._performFunction();
+ }
+
+ // tslint:disable-next-line:no-unbound-method
+ this._intervalId = intervalUtils.setAsyncExcludingInterval(this._performFunction, intervalTimeMs, _.noop);
+ }
+
+ public stop(): void {
+ if (this._intervalId) {
+ intervalUtils.clearInterval(this._intervalId);
+ }
+ this._intervalId = undefined;
+ }
+}
diff --git a/packages/instant/src/util/heartbeater_factory.ts b/packages/instant/src/util/heartbeater_factory.ts
new file mode 100644
index 000000000..96a8ac4e6
--- /dev/null
+++ b/packages/instant/src/util/heartbeater_factory.ts
@@ -0,0 +1,22 @@
+import { asyncData } from '../redux/async_data';
+import { Store } from '../redux/store';
+
+import { Heartbeater } from './heartbeater';
+
+export interface HeartbeatFactoryOptions {
+ store: Store;
+ shouldPerformImmediatelyOnStart: boolean;
+}
+export const generateAccountHeartbeater = (options: HeartbeatFactoryOptions): Heartbeater => {
+ const { store, shouldPerformImmediatelyOnStart } = options;
+ return new Heartbeater(async () => {
+ await asyncData.fetchAccountInfoAndDispatchToStore({ store, shouldSetToLoading: false });
+ }, shouldPerformImmediatelyOnStart);
+};
+
+export const generateBuyQuoteHeartbeater = (options: HeartbeatFactoryOptions): Heartbeater => {
+ const { store, shouldPerformImmediatelyOnStart } = options;
+ return new Heartbeater(async () => {
+ await asyncData.fetchCurrentBuyQuoteAndDispatchToStore({ store, shouldSetPending: false });
+ }, shouldPerformImmediatelyOnStart);
+};