diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index e8dc694f6..f107b3b5e 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -516,8 +516,10 @@ export interface OutdatedWrappedEtherByNetworkId { }; } -export interface ItemByAddress { - [address: string]: T; +export type ItemByAddress = ObjectMap; + +export interface ObjectMap { + [key: string]: T; } export type TokenStateByAddress = ItemByAddress; diff --git a/packages/website/ts/utils/analytics.ts b/packages/website/ts/utils/analytics.ts index f4bfa083f..9a1684813 100644 --- a/packages/website/ts/utils/analytics.ts +++ b/packages/website/ts/utils/analytics.ts @@ -1,27 +1,71 @@ import * as _ from 'lodash'; -import * as ReactGA from 'react-ga'; -import { InjectedWeb3 } from 'ts/types'; +import { InjectedWeb3, ObjectMap, Order } from 'ts/types'; import { configs } from 'ts/utils/configs'; import { utils } from 'ts/utils/utils'; -export const analytics = { - init(): void { - ReactGA.initialize(configs.GOOGLE_ANALYTICS_ID); - }, - logEvent(category: string, action: string, label: string, value?: any): void { - ReactGA.event({ - category, - action, - label, - value, - }); - }, - async logProviderAsync(web3IfExists: InjectedWeb3): Promise { +export interface HeapAnalytics { + indentify(id: string, idType: string): void; + track(eventName: string, eventProperties?: ObjectMap): void; + resetIdentity(): void; + addUserProperties(properties: ObjectMap): void; + addEventProperties(properties: ObjectMap): void; + removeEventProperty(property: string): void; + clearEventProperties(): void; +} + +export class Analytics implements HeapAnalytics { + private _heap: HeapAnalytics; + public static init(): Analytics { + const heap = (window as any).heap; + if (!_.isUndefined(heap)) { + return new Analytics(heap); + } else { + throw new Error('Could not find the Heap SDK on the page.'); + } + } + constructor(heap: HeapAnalytics) { + this._heap = heap; + } + // HeapAnalytics Wrappers + public indentify(id: string, idType: string): void { + this._heap.indentify(id, idType); + } + public track(eventName: string, eventProperties?: ObjectMap): void { + this._heap.track(eventName, eventProperties); + } + public resetIdentity(): void { + this._heap.resetIdentity(); + } + public addUserProperties(properties: ObjectMap): void { + this._heap.addUserProperties(properties); + } + public addEventProperties(properties: ObjectMap): void { + this._heap.addEventProperties(properties); + } + public removeEventProperty(property: string): void { + this._heap.removeEventProperty(property); + } + public clearEventProperties(): void { + this._heap.clearEventProperties(); + } + // Custom methods + public trackOrderEvent(eventName: string, order: Order): void { + const orderLoggingData = { + takerTokenAmount: order.signedOrder.takerTokenAmount, + makeTokenAmount: order.signedOrder.makerTokenAmount, + takerToken: order.metadata.takerToken.symbol, + makerToken: order.metadata.makerToken.symbol, + }; + this.track(eventName, orderLoggingData); + } + public async logProviderAsync(web3IfExists: InjectedWeb3): Promise { await utils.onPageLoadAsync(); const providerType = !_.isUndefined(web3IfExists) && !_.isUndefined(web3IfExists.currentProvider) ? utils.getProviderType(web3IfExists.currentProvider) : 'NONE'; - ReactGA.ga('set', 'dimension1', providerType); - }, -}; + } +} + +// Assume heap library has loaded. +export const analytics = Analytics.init(); diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index 97aabd13d..a2fd6a47e 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -23,6 +23,7 @@ export const configs = { DOMAIN_PRODUCTION: '0xproject.com', ENVIRONMENT: isDevelopment ? Environments.DEVELOPMENT : Environments.PRODUCTION, GOOGLE_ANALYTICS_ID: 'UA-98720122-1', + HEAP_APP_ID: '410099666', LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE: '2017-11-22', LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE: '2018-7-5', OUTDATED_WRAPPED_ETHERS: [ diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index e43f541bf..d52b9b392 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -34,6 +34,7 @@ export const constants = { PROVIDER_NAME_GENERIC: 'Injected Web3', PROVIDER_NAME_PUBLIC: '0x Public', ROLLBAR_ACCESS_TOKEN: '32c39bfa4bb6440faedc1612a9c13d28', + HEAP_APP_ID: '410099666', S3_DOC_BUCKET_ROOT: 'https://s3.amazonaws.com/doc-jsons', S3_STAGING_DOC_BUCKET_ROOT: 'https://s3.amazonaws.com/staging-doc-jsons', SUCCESS_STATUS: 200, diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 8c76a7592..df7f8d10f 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -313,6 +313,7 @@ export const utils = { const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`; return baseUrl; }, + // TODO: Fix this, it's a lie. async onPageLoadAsync(): Promise { if (document.readyState === 'complete') { return; // Already loaded -- cgit v1.2.3 From 098322c56475581df5bd80e12cb6c511963e4daf Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 11 Jul 2018 15:39:12 -0700 Subject: Integrate heap analytics --- packages/website/public/index.html | 12 ++--- packages/website/ts/blockchain.ts | 2 +- packages/website/ts/components/fill_order.tsx | 6 +-- .../website/ts/components/forms/subscribe_form.tsx | 4 ++ .../generate_order/generate_order_form.tsx | 8 ++-- .../ts/components/inputs/allowance_toggle.tsx | 6 +-- .../onboarding/portal_onboarding_flow.tsx | 9 +--- packages/website/ts/components/portal/portal.tsx | 5 +- .../components/relayer_index/relayer_grid_tile.tsx | 4 +- .../relayer_index/relayer_top_tokens.tsx | 3 +- packages/website/ts/components/wallet/wallet.tsx | 8 ++-- .../ts/components/wallet/wrap_ether_item.tsx | 10 ++-- packages/website/ts/index.tsx | 1 - packages/website/ts/pages/wiki/wiki.tsx | 2 +- packages/website/ts/redux/analyticsMiddleware.ts | 41 ++++++++++++++++ packages/website/ts/redux/store.ts | 7 +-- packages/website/ts/utils/analytics.ts | 56 ++++++++++++++-------- packages/website/ts/utils/utils.ts | 12 ++--- 18 files changed, 122 insertions(+), 74 deletions(-) create mode 100644 packages/website/ts/redux/analyticsMiddleware.ts (limited to 'packages/website') diff --git a/packages/website/public/index.html b/packages/website/public/index.html index 2d9b722f8..a8a61f8ad 100644 --- a/packages/website/public/index.html +++ b/packages/website/public/index.html @@ -23,6 +23,12 @@ + + + - - - diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 0e6698318..954595cef 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -795,7 +795,7 @@ export class Blockchain { return tokenByAddress; } private async _onPageLoadInitFireAndForgetAsync(): Promise { - await utils.onPageLoadAsync(); // wait for page to load + await utils.onPageLoadPromise; // wait for page to load const networkIdIfExists = await Blockchain._getInjectedWeb3ProviderNetworkIdIfExistsAsync(); this.networkId = !_.isUndefined(networkIdIfExists) ? networkIdIfExists : constants.NETWORK_ID_MAINNET; const injectedWeb3IfExists = Blockchain._getInjectedWeb3(); diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 46e33061f..25d21c3dd 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -1,5 +1,5 @@ import { getOrderHashHex, isValidSignature } from '@0xproject/order-utils'; -import { colors, constants as sharedConstants } from '@0xproject/react-shared'; +import { colors } from '@0xproject/react-shared'; import { Order as ZeroExOrder } from '@0xproject/types'; import { BigNumber, logUtils } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; @@ -508,7 +508,7 @@ export class FillOrder extends React.Component { } private _trackOrderEvent(eventName: string): void { const parsedOrder = this.state.parsedOrder; - analytics.trackOrderEvent(eventName, parsedOrder); + analytics.trackOrderEventAsync(eventName, parsedOrder); } private async _onFillOrderClickFireAndForgetAsync(): Promise { if (this.props.blockchainErr !== BlockchainErrs.NoError || _.isEmpty(this.props.userAddress)) { @@ -630,8 +630,6 @@ export class FillOrder extends React.Component { }); return; } - const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId]; - const eventLabel = `${parsedOrder.metadata.makerToken.symbol}-${networkName}`; try { await this.props.blockchain.cancelOrderAsync(signedOrder, availableTakerTokenAmount); this.setState({ diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx index 8ef58328e..19abbdf5f 100644 --- a/packages/website/ts/components/forms/subscribe_form.tsx +++ b/packages/website/ts/components/forms/subscribe_form.tsx @@ -6,6 +6,7 @@ import { Button } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { Input } from 'ts/components/ui/input'; import { Text } from 'ts/components/ui/text'; +import { analytics } from 'ts/utils/analytics'; import { backendClient } from 'ts/utils/backend_client'; export interface SubscribeFormProps {} @@ -112,6 +113,9 @@ export class SubscribeForm extends React.Component { startOnboarding ); } - private _startOnboarding(): void { - analytics.track('Onboarding Started', { + analytics.trackAsync('Onboarding Started', { reason: 'manual', stepIndex: this.props.portalOnboardingStep, }); diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index 2eb04f2d6..937f0b79d 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -1,4 +1,4 @@ -import { constants as sharedConstants, Styles } from '@0xproject/react-shared'; +import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import { GridTile as PlainGridTile } from 'material-ui/GridList'; import * as React from 'react'; @@ -65,7 +65,7 @@ export const RelayerGridTile: React.StatelessComponent = ( const topTokens = props.relayerInfo.topTokens; const weeklyTxnVolume = props.relayerInfo.weeklyTxnVolume; const onClick = () => { - analytics.track('Relayer Click', { + analytics.trackAsync('Relayer Click', { name: props.relayerInfo.name, }); utils.openUrl(link); diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx index 883c8d81b..e6e0095c2 100644 --- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx +++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx @@ -1,6 +1,5 @@ import { colors, - constants as sharedConstants, EtherscanLinkSuffixes, utils as sharedUtils, } from '@0xproject/react-shared'; @@ -48,7 +47,7 @@ class TokenLink extends React.Component { public render(): React.ReactNode { const onClick = (event: React.MouseEvent) => { event.stopPropagation(); - analytics.track('Token Click', { + analytics.trackAsync('Token Click', { tokenSymbol: this.props.tokenInfo.symbol, }); const tokenLink = this._tokenLinkFromToken(this.props.tokenInfo, this.props.networkId); diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 940cd6c58..2fdcded38 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -1,4 +1,4 @@ -import { constants as sharedConstants, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; +import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; import { BigNumber, errorUtils } from '@0xproject/utils'; import * as _ from 'lodash'; @@ -488,19 +488,17 @@ export class Wallet extends React.Component { ); } private _openWrappedEtherActionRow(wrappedEtherDirection: Side): void { - const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId]; const action = wrappedEtherDirection === Side.Deposit ? 'Wallet - Wrap ETH Opened' : 'Wallet - Unwrap WETH Opened'; - analytics.track(action); + analytics.trackAsync(action); this.setState({ wrappedEtherDirection, }); } private _closeWrappedEtherActionRow(wrappedEtherDirection: Side): void { - const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId]; const action = wrappedEtherDirection === Side.Deposit ? 'Wallet - Wrap ETH Closed' : 'Wallet - Unwrap WETH Closed'; - analytics.track(action); + analytics.trackAsync(action); this.setState({ wrappedEtherDirection: undefined, }); diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index 01d9bdb66..9fec8afa1 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -1,4 +1,4 @@ -import { constants as sharedConstants, Styles } from '@0xproject/react-shared'; +import { Styles } from '@0xproject/react-shared'; import { BigNumber, logUtils } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; @@ -196,13 +196,13 @@ export class WrapEtherItem extends React.Component { articlesBySection, }, async () => { - await utils.onPageLoadAsync(); + await utils.onPageLoadPromise; const hash = this.props.location.hash.slice(1); sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID); }, diff --git a/packages/website/ts/redux/analyticsMiddleware.ts b/packages/website/ts/redux/analyticsMiddleware.ts new file mode 100644 index 000000000..2778445e7 --- /dev/null +++ b/packages/website/ts/redux/analyticsMiddleware.ts @@ -0,0 +1,41 @@ +import { Middleware } from 'redux'; +import { State } from 'ts/redux/reducer'; +import { ActionTypes } from 'ts/types'; +import { analytics } from 'ts/utils/analytics'; + +export const analyticsMiddleware: Middleware = store => next => action => { + const nextAction = next(action); + const nextState = (store.getState() as any) as State; + switch (action.type) { + case ActionTypes.UpdateInjectedProviderName: + analytics.addEventPropertiesAsync({ + injectedProviderName: nextState.injectedProviderName, + }); + break; + case ActionTypes.UpdateNetworkId: + analytics.addEventPropertiesAsync({ + networkId: nextState.networkId, + }); + break; + case ActionTypes.UpdateUserAddress: + analytics.addUserPropertiesAsync({ + ethAddress: nextState.userAddress, + }); + break; + case ActionTypes.UpdateUserEtherBalance: + if (nextState.userEtherBalanceInWei) { + analytics.addUserPropertiesAsync({ + ethBalance: nextState.userEtherBalanceInWei.toString(), + }); + } + break; + case ActionTypes.UpdatePortalOnboardingStep: + analytics.trackAsync('Update Onboarding Step', { + stepIndex: nextState.portalOnboardingStep, + }); + break; + default: + break; + } + return nextAction; +}; diff --git a/packages/website/ts/redux/store.ts b/packages/website/ts/redux/store.ts index 2672e3f61..006241371 100644 --- a/packages/website/ts/redux/store.ts +++ b/packages/website/ts/redux/store.ts @@ -1,7 +1,8 @@ import * as _ from 'lodash'; -import { createStore, Store as ReduxStore } from 'redux'; -import { devToolsEnhancer } from 'redux-devtools-extension/developmentOnly'; +import { applyMiddleware, createStore, Store as ReduxStore } from 'redux'; +import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly'; import { stateStorage } from 'ts/local_storage/state_storage'; +import { analyticsMiddleware } from 'ts/redux/analyticsMiddleware'; import { reducer, State } from 'ts/redux/reducer'; const ONE_SECOND = 1000; @@ -9,7 +10,7 @@ const ONE_SECOND = 1000; export const store: ReduxStore = createStore( reducer, stateStorage.getPersistedDefaultState(), - devToolsEnhancer({ name: '0x Website Redux Store' }), + composeWithDevTools(applyMiddleware(analyticsMiddleware)), ); store.subscribe( _.throttle(() => { diff --git a/packages/website/ts/utils/analytics.ts b/packages/website/ts/utils/analytics.ts index 9a1684813..961f9af5a 100644 --- a/packages/website/ts/utils/analytics.ts +++ b/packages/website/ts/utils/analytics.ts @@ -1,9 +1,9 @@ import * as _ from 'lodash'; -import { InjectedWeb3, ObjectMap, Order } from 'ts/types'; -import { configs } from 'ts/utils/configs'; +import { ObjectMap, Order } from 'ts/types'; import { utils } from 'ts/utils/utils'; export interface HeapAnalytics { + loaded: boolean; indentify(id: string, idType: string): void; track(eventName: string, eventProperties?: ObjectMap): void; resetIdentity(): void; @@ -13,12 +13,15 @@ export interface HeapAnalytics { clearEventProperties(): void; } -export class Analytics implements HeapAnalytics { +export class Analytics { private _heap: HeapAnalytics; public static init(): Analytics { + return new Analytics(Analytics.getHeap()); + } + public static getHeap(): HeapAnalytics { const heap = (window as any).heap; if (!_.isUndefined(heap)) { - return new Analytics(heap); + return heap; } else { throw new Error('Could not find the Heap SDK on the page.'); } @@ -27,45 +30,58 @@ export class Analytics implements HeapAnalytics { this._heap = heap; } // HeapAnalytics Wrappers - public indentify(id: string, idType: string): void { + public async indentifyAsync(id: string, idType: string): Promise { + await this._heapLoadedGuardAsync(); this._heap.indentify(id, idType); } - public track(eventName: string, eventProperties?: ObjectMap): void { + public async trackAsync(eventName: string, eventProperties?: ObjectMap): Promise { + await this._heapLoadedGuardAsync(); this._heap.track(eventName, eventProperties); } - public resetIdentity(): void { + public async resetIdentityAsync(): Promise { + await this._heapLoadedGuardAsync(); this._heap.resetIdentity(); } - public addUserProperties(properties: ObjectMap): void { + public async addUserPropertiesAsync(properties: ObjectMap): Promise { + await this._heapLoadedGuardAsync(); this._heap.addUserProperties(properties); } - public addEventProperties(properties: ObjectMap): void { + public async addEventPropertiesAsync(properties: ObjectMap): Promise { + await this._heapLoadedGuardAsync(); this._heap.addEventProperties(properties); } - public removeEventProperty(property: string): void { + public async removeEventPropertyAsync(property: string): Promise { + await this._heapLoadedGuardAsync(); this._heap.removeEventProperty(property); } - public clearEventProperties(): void { + public async clearEventPropertiesAsync(): Promise { + await this._heapLoadedGuardAsync(); this._heap.clearEventProperties(); } // Custom methods - public trackOrderEvent(eventName: string, order: Order): void { + public async trackOrderEventAsync(eventName: string, order: Order): Promise { const orderLoggingData = { takerTokenAmount: order.signedOrder.takerTokenAmount, makeTokenAmount: order.signedOrder.makerTokenAmount, takerToken: order.metadata.takerToken.symbol, makerToken: order.metadata.makerToken.symbol, }; - this.track(eventName, orderLoggingData); + this.trackAsync(eventName, orderLoggingData); } - public async logProviderAsync(web3IfExists: InjectedWeb3): Promise { - await utils.onPageLoadAsync(); - const providerType = - !_.isUndefined(web3IfExists) && !_.isUndefined(web3IfExists.currentProvider) - ? utils.getProviderType(web3IfExists.currentProvider) - : 'NONE'; + /** + * Heap is not available as a UMD module, and additionally has the strange property of replacing itself with + * a different object once it's loaded. + * Instead of having an await call before every analytics use, we opt to have the awaiting logic in here by + * guarding every API call with the guard below. + */ + private async _heapLoadedGuardAsync(): Promise { + if (this._heap.loaded) { + return undefined; + } + await utils.onPageLoadPromise; + // HACK: Reset heap to loaded heap + this._heap = (window as any).heap; } } -// Assume heap library has loaded. export const analytics = Analytics.init(); diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index df7f8d10f..bd6a57eea 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -313,15 +313,13 @@ export const utils = { const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`; return baseUrl; }, - // TODO: Fix this, it's a lie. - async onPageLoadAsync(): Promise { + onPageLoadPromise: new Promise((resolve, _reject) => { if (document.readyState === 'complete') { - return; // Already loaded + resolve(); + return; } - return new Promise((resolve, _reject) => { - window.onload = () => resolve(); - }); - }, + window.onload = () => resolve(); + }), getProviderType(provider: Provider): Providers | string { const constructorName = provider.constructor.name; let parsedProviderName = constructorName; -- cgit v1.2.3 From 1ee78062d7731b35e47c0d4c4e30a68628f364a9 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 11 Jul 2018 15:43:37 -0700 Subject: Remove unused configs and constants --- packages/website/ts/utils/configs.ts | 1 - packages/website/ts/utils/constants.ts | 1 - 2 files changed, 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index a2fd6a47e..97aabd13d 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -23,7 +23,6 @@ export const configs = { DOMAIN_PRODUCTION: '0xproject.com', ENVIRONMENT: isDevelopment ? Environments.DEVELOPMENT : Environments.PRODUCTION, GOOGLE_ANALYTICS_ID: 'UA-98720122-1', - HEAP_APP_ID: '410099666', LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE: '2017-11-22', LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE: '2018-7-5', OUTDATED_WRAPPED_ETHERS: [ diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index d52b9b392..e43f541bf 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -34,7 +34,6 @@ export const constants = { PROVIDER_NAME_GENERIC: 'Injected Web3', PROVIDER_NAME_PUBLIC: '0x Public', ROLLBAR_ACCESS_TOKEN: '32c39bfa4bb6440faedc1612a9c13d28', - HEAP_APP_ID: '410099666', S3_DOC_BUCKET_ROOT: 'https://s3.amazonaws.com/doc-jsons', S3_STAGING_DOC_BUCKET_ROOT: 'https://s3.amazonaws.com/staging-doc-jsons', SUCCESS_STATUS: 200, -- cgit v1.2.3 From 0941e0a929f2fe3ef6d0cf1de5a1274f5f45f031 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 11 Jul 2018 16:50:00 -0700 Subject: Add no-floating-promises ignore comments --- packages/website/ts/components/fill_order.tsx | 1 + packages/website/ts/components/forms/subscribe_form.tsx | 1 + .../website/ts/components/generate_order/generate_order_form.tsx | 2 ++ packages/website/ts/components/inputs/allowance_toggle.tsx | 2 ++ .../website/ts/components/onboarding/portal_onboarding_flow.tsx | 2 ++ packages/website/ts/components/portal/portal.tsx | 1 + packages/website/ts/components/relayer_index/relayer_grid_tile.tsx | 1 + .../website/ts/components/relayer_index/relayer_top_tokens.tsx | 7 ++----- packages/website/ts/components/wallet/wallet.tsx | 2 ++ packages/website/ts/components/wallet/wrap_ether_item.tsx | 4 ++++ packages/website/ts/redux/analyticsMiddleware.ts | 5 +++++ packages/website/ts/utils/analytics.ts | 1 + 12 files changed, 24 insertions(+), 5 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 25d21c3dd..e4838bc0f 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -508,6 +508,7 @@ export class FillOrder extends React.Component { } private _trackOrderEvent(eventName: string): void { const parsedOrder = this.state.parsedOrder; + // tslint:disable-next-line:no-floating-promises analytics.trackOrderEventAsync(eventName, parsedOrder); } private async _onFillOrderClickFireAndForgetAsync(): Promise { diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx index 19abbdf5f..be0468b6f 100644 --- a/packages/website/ts/components/forms/subscribe_form.tsx +++ b/packages/website/ts/components/forms/subscribe_form.tsx @@ -114,6 +114,7 @@ export class SubscribeForm extends React.Component { ); } private _startOnboarding(): void { + // tslint:disable-next-line:no-floating-promises analytics.trackAsync('Onboarding Started', { reason: 'manual', stepIndex: this.props.portalOnboardingStep, diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index 937f0b79d..475b79f8f 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -65,6 +65,7 @@ export const RelayerGridTile: React.StatelessComponent = ( const topTokens = props.relayerInfo.topTokens; const weeklyTxnVolume = props.relayerInfo.weeklyTxnVolume; const onClick = () => { + // tslint:disable-next-line:no-floating-promises analytics.trackAsync('Relayer Click', { name: props.relayerInfo.name, }); diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx index e6e0095c2..33783b406 100644 --- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx +++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx @@ -1,8 +1,4 @@ -import { - colors, - EtherscanLinkSuffixes, - utils as sharedUtils, -} from '@0xproject/react-shared'; +import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; @@ -47,6 +43,7 @@ class TokenLink extends React.Component { public render(): React.ReactNode { const onClick = (event: React.MouseEvent) => { event.stopPropagation(); + // tslint:disable-next-line:no-floating-promises analytics.trackAsync('Token Click', { tokenSymbol: this.props.tokenInfo.symbol, }); diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 2fdcded38..8523b819a 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -490,6 +490,7 @@ export class Wallet extends React.Component { private _openWrappedEtherActionRow(wrappedEtherDirection: Side): void { const action = wrappedEtherDirection === Side.Deposit ? 'Wallet - Wrap ETH Opened' : 'Wallet - Unwrap WETH Opened'; + // tslint:disable-next-line:no-floating-promises analytics.trackAsync(action); this.setState({ wrappedEtherDirection, @@ -498,6 +499,7 @@ export class Wallet extends React.Component { private _closeWrappedEtherActionRow(wrappedEtherDirection: Side): void { const action = wrappedEtherDirection === Side.Deposit ? 'Wallet - Wrap ETH Closed' : 'Wallet - Unwrap WETH Closed'; + // tslint:disable-next-line:no-floating-promises analytics.trackAsync(action); this.setState({ wrappedEtherDirection: undefined, diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index 9fec8afa1..9e3d06817 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -196,12 +196,14 @@ export class WrapEtherItem extends React.Component next => action => { const nextState = (store.getState() as any) as State; switch (action.type) { case ActionTypes.UpdateInjectedProviderName: + // tslint:disable-next-line:no-floating-promises analytics.addEventPropertiesAsync({ injectedProviderName: nextState.injectedProviderName, }); break; case ActionTypes.UpdateNetworkId: + // tslint:disable-next-line:no-floating-promises analytics.addEventPropertiesAsync({ networkId: nextState.networkId, }); break; case ActionTypes.UpdateUserAddress: + // tslint:disable-next-line:no-floating-promises analytics.addUserPropertiesAsync({ ethAddress: nextState.userAddress, }); break; case ActionTypes.UpdateUserEtherBalance: if (nextState.userEtherBalanceInWei) { + // tslint:disable-next-line:no-floating-promises analytics.addUserPropertiesAsync({ ethBalance: nextState.userEtherBalanceInWei.toString(), }); } break; case ActionTypes.UpdatePortalOnboardingStep: + // tslint:disable-next-line:no-floating-promises analytics.trackAsync('Update Onboarding Step', { stepIndex: nextState.portalOnboardingStep, }); diff --git a/packages/website/ts/utils/analytics.ts b/packages/website/ts/utils/analytics.ts index 961f9af5a..2ff9f8918 100644 --- a/packages/website/ts/utils/analytics.ts +++ b/packages/website/ts/utils/analytics.ts @@ -66,6 +66,7 @@ export class Analytics { takerToken: order.metadata.takerToken.symbol, makerToken: order.metadata.makerToken.symbol, }; + // tslint:disable-next-line:no-floating-promises this.trackAsync(eventName, orderLoggingData); } /** -- cgit v1.2.3 From f4b2a9625dd46080a4fd05754c525f73e5fff8b1 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 11 Jul 2018 18:52:22 -0700 Subject: Only upload sourcemaps to rollbar on live deploys, and log NaN error for future debugging --- packages/website/package.json | 2 +- packages/website/ts/utils/utils.ts | 4 +++ packages/website/webpack.config.js | 68 +++++++++++++++++++++----------------- 3 files changed, 43 insertions(+), 31 deletions(-) (limited to 'packages/website') diff --git a/packages/website/package.json b/packages/website/package.json index b5b4b6119..a8a761fea 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -16,7 +16,7 @@ "deploy_staging": "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers", "deploy_live": - "npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude *.map.js" + "DEPLOY_ROLLBAR_SOURCEMAPS=true npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude *.map.js" }, "author": "Fabio Berger", "license": "Apache-2.0", diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 9ca7f607b..e515cdeb3 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -29,6 +29,7 @@ import { import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import * as u2f from 'ts/vendor/u2f_api'; +import { errorReporter } from './error_reporter'; const isDogfood = (): boolean => _.includes(window.location.href, configs.DOMAIN_DOGFOOD); @@ -389,6 +390,9 @@ export const utils = { : 2; const format = `0,0.${_.repeat('0', precision)}`; const formattedAmount = numeral(unitAmount).format(format); + if (_.isNaN(formattedAmount)) { + throw new Error(`amount ${BigNumber}, decimals ${decimals} could not be formatted and returned NaN.`); + } return formattedAmount; }, getUsdValueFormattedAmount(amount: BigNumber, decimals: number, price: BigNumber): string { diff --git a/packages/website/webpack.config.js b/packages/website/webpack.config.js index 5647b4f93..8653196a6 100644 --- a/packages/website/webpack.config.js +++ b/packages/website/webpack.config.js @@ -9,6 +9,43 @@ const GIT_SHA = childProcess .toString() .trim(); +const generatePlugins = () => { + let plugins = []; + if (process.env.NODE_ENV === 'production') { + plugins = plugins.concat([ + // Since we do not use moment's locale feature, we exclude them from the bundle. + // This reduces the bundle size by 0.4MB. + new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), + new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: JSON.stringify(process.env.NODE_ENV), + GIT_SHA: JSON.stringify(GIT_SHA), + }, + }), + // TODO: Revert to webpack bundled version with webpack v4. + // The v3 series bundled version does not support ES6 and + // fails to build. + new UglifyJsPlugin({ + sourceMap: true, + uglifyOptions: { + mangle: { + reserved: ['BigNumber'], + }, + }, + }), + ]); + if (process.env.DEPLOY_ROLLBAR_SOURCEMAPS === 'true') { + plugins = plugins.concat([ + new RollbarSourceMapPlugin({ + accessToken: '32c39bfa4bb6440faedc1612a9c13d28', + version: GIT_SHA, + publicPath: 'https://0xproject.com/', + }), + ]); + } + } + return plugins; +}; module.exports = { entry: ['./ts/index.tsx'], output: { @@ -78,34 +115,5 @@ module.exports = { }, disableHostCheck: true, }, - plugins: - process.env.NODE_ENV === 'production' - ? [ - // Since we do not use moment's locale feature, we exclude them from the bundle. - // This reduces the bundle size by 0.4MB. - new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), - new webpack.DefinePlugin({ - 'process.env': { - NODE_ENV: JSON.stringify(process.env.NODE_ENV), - GIT_SHA: JSON.stringify(GIT_SHA), - }, - }), - // TODO: Revert to webpack bundled version with webpack v4. - // The v3 series bundled version does not support ES6 and - // fails to build. - new UglifyJsPlugin({ - sourceMap: true, - uglifyOptions: { - mangle: { - reserved: ['BigNumber'], - }, - }, - }), - new RollbarSourceMapPlugin({ - accessToken: '32c39bfa4bb6440faedc1612a9c13d28', - version: GIT_SHA, - publicPath: 'https://0xproject.com/', - }), - ] - : [], + plugins: generatePlugins(), }; -- cgit v1.2.3 From ddb70a89ad99527e03844d23e7c0f3522e98a602 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 11 Jul 2018 18:55:02 -0700 Subject: Do not crash on NaN, and provide default --- packages/website/ts/utils/utils.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index e515cdeb3..1d669d8f0 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -28,8 +28,8 @@ import { } from 'ts/types'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; +import { errorReporter } from 'ts/utils/error_reporter'; import * as u2f from 'ts/vendor/u2f_api'; -import { errorReporter } from './error_reporter'; const isDogfood = (): boolean => _.includes(window.location.href, configs.DOMAIN_DOGFOOD); @@ -391,7 +391,11 @@ export const utils = { const format = `0,0.${_.repeat('0', precision)}`; const formattedAmount = numeral(unitAmount).format(format); if (_.isNaN(formattedAmount)) { - throw new Error(`amount ${BigNumber}, decimals ${decimals} could not be formatted and returned NaN.`); + // tslint:disable-next-line:no-floating-promises + errorReporter.reportAsync( + new Error(`amount ${BigNumber}, decimals ${decimals} could not be formatted and returned NaN.`), + ); + return format; } return formattedAmount; }, -- cgit v1.2.3 From ac5588c7c436e2540f87e432446e103d35c9221a Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 12 Jul 2018 15:50:13 -0700 Subject: Make error reporter not return a promise and add more environment possibilities --- packages/website/ts/blockchain.ts | 6 ++-- .../ts/components/eth_weth_conversion_button.tsx | 2 +- packages/website/ts/components/fill_order.tsx | 4 +-- .../generate_order/generate_order_form.tsx | 2 +- .../ts/components/inputs/allowance_toggle.tsx | 2 +- packages/website/ts/components/order_json.tsx | 2 +- packages/website/ts/components/send_button.tsx | 2 +- packages/website/ts/components/token_balances.tsx | 4 +-- .../ts/components/wallet/wrap_ether_item.tsx | 2 +- packages/website/ts/types.ts | 2 ++ packages/website/ts/utils/configs.ts | 5 --- packages/website/ts/utils/error_reporter.ts | 22 +++++-------- packages/website/ts/utils/fetch_utils.ts | 3 +- packages/website/ts/utils/utils.ts | 36 ++++++++++++++++------ 14 files changed, 51 insertions(+), 43 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 0e6698318..868ffad03 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -571,7 +571,7 @@ export class Blockchain { configs.DEFAULT_TRACKED_TOKEN_SYMBOLS, )}) not found in tokenRegistry: ${JSON.stringify(tokenRegistryTokens)}`, ); - await errorReporter.reportAsync(err); + errorReporter.report(err); return; } if (_.isEmpty(trackedTokensByAddress)) { @@ -683,7 +683,7 @@ export class Blockchain { // errors will be thrown by `watch`. For now, let's log the error // to rollbar and stop watching when one occurs // tslint:disable-next-line:no-floating-promises - errorReporter.reportAsync(err); // fire and forget + errorReporter.report(err); // fire and forget return; } else { const decodedLog = decodedLogEvent.log; @@ -915,7 +915,7 @@ export class Blockchain { if (_.includes(errMsg, 'not been deployed to detected network')) { throw new Error(BlockchainCallErrs.ContractDoesNotExist); } else { - await errorReporter.reportAsync(err); + errorReporter.report(err); throw new Error(BlockchainCallErrs.UnhandledError); } } diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx index 4b91a2ebd..d547a4e6a 100644 --- a/packages/website/ts/components/eth_weth_conversion_button.tsx +++ b/packages/website/ts/components/eth_weth_conversion_button.tsx @@ -118,7 +118,7 @@ export class EthWethConversionButton extends React.Component< ? 'Failed to wrap your ETH. Please try again.' : 'Failed to unwrap your WETH. Please try again.'; this.props.dispatcher.showFlashMessage(errorMsg); - await errorReporter.reportAsync(err); + errorReporter.report(err); } } this.setState({ diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 03ba1183d..9360ba24c 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -583,7 +583,7 @@ export class FillOrder extends React.Component { this.setState({ globalErrMsg, }); - await errorReporter.reportAsync(err); + errorReporter.report(err); return; } } @@ -654,7 +654,7 @@ export class FillOrder extends React.Component { this.setState({ globalErrMsg, }); - await errorReporter.reportAsync(err); + errorReporter.report(err); return; } } diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx index d26b5c3fa..7d7df5506 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -349,7 +349,7 @@ export class GenerateOrderForm extends React.Component ${responseBody}`); - await errorReporter.reportAsync(new Error(`Bitly returned non-200: ${JSON.stringify(response)}`)); + errorReporter.report(new Error(`Bitly returned non-200: ${JSON.stringify(response)}`)); return ''; } return bodyObj.data.url; diff --git a/packages/website/ts/components/send_button.tsx b/packages/website/ts/components/send_button.tsx index 8486dbd8b..ac55d430b 100644 --- a/packages/website/ts/components/send_button.tsx +++ b/packages/website/ts/components/send_button.tsx @@ -80,7 +80,7 @@ export class SendButton extends React.Component { - if (configs.ENVIRONMENT === Environments.DEVELOPMENT) { + report(err: Error): void { + if (utils.getEnvironment() === Environments.DEVELOPMENT) { return; // Let's not log development errors to rollbar } - - return new Promise((resolve, _reject) => { - rollbar.error(err, (rollbarErr: Error) => { - if (rollbarErr) { - logUtils.log(`Error reporting to rollbar, ignoring: ${rollbarErr}`); - // We never want to reject and cause the app to throw because of rollbar - resolve(); - } else { - resolve(); - } - }); + rollbar.error(err, (rollbarErr: Error) => { + if (rollbarErr) { + logUtils.log(`Error reporting to rollbar, ignoring: ${rollbarErr}`); + } }); }, }; diff --git a/packages/website/ts/utils/fetch_utils.ts b/packages/website/ts/utils/fetch_utils.ts index 513f7e479..a56d89262 100644 --- a/packages/website/ts/utils/fetch_utils.ts +++ b/packages/website/ts/utils/fetch_utils.ts @@ -9,8 +9,7 @@ const logErrorIfPresent = (response: Response, requestedURL: string) => { const errorText = `Error requesting url: ${requestedURL}, ${response.status}: ${response.statusText}`; logUtils.log(errorText); const error = Error(errorText); - // tslint:disable-next-line:no-floating-promises - errorReporter.reportAsync(error); + errorReporter.report(error); throw error; } }; diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 1d669d8f0..240170113 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -31,8 +31,6 @@ import { constants } from 'ts/utils/constants'; import { errorReporter } from 'ts/utils/error_reporter'; import * as u2f from 'ts/vendor/u2f_api'; -const isDogfood = (): boolean => _.includes(window.location.href, configs.DOMAIN_DOGFOOD); - export const utils = { assert(condition: boolean, message: string): void { if (!condition) { @@ -347,10 +345,13 @@ export const utils = { return parsedProviderName; }, getBackendBaseUrl(): string { - return isDogfood() ? configs.BACKEND_BASE_STAGING_URL : configs.BACKEND_BASE_PROD_URL; + return utils.isDogfood() ? configs.BACKEND_BASE_STAGING_URL : configs.BACKEND_BASE_PROD_URL; }, isDevelopment(): boolean { - return configs.ENVIRONMENT === Environments.DEVELOPMENT; + return _.includes( + ['https://0xproject.localhost:3572', 'https://localhost:3572', 'https://127.0.0.1'], + window.location.origin, + ); }, isStaging(): boolean { return _.includes(window.location.href, configs.DOMAIN_STAGING); @@ -358,7 +359,27 @@ export const utils = { isExternallyInjected(providerType: ProviderType, injectedProviderName: string): boolean { return providerType === ProviderType.Injected && injectedProviderName !== constants.PROVIDER_NAME_PUBLIC; }, - isDogfood, + isDogfood(): boolean { + return _.includes(window.location.href, configs.DOMAIN_DOGFOOD); + }, + isProduction(): boolean { + return _.includes(window.location.href, configs.DOMAIN_PRODUCTION); + }, + getEnvironment(): Environments { + if (utils.isDogfood()) { + return Environments.DOGFOOD; + } + if (utils.isDevelopment()) { + return Environments.DEVELOPMENT; + } + if (utils.isStaging()) { + return Environments.STAGING; + } + if (utils.isProduction()) { + return Environments.PRODUCTION; + } + return undefined; + }, shouldShowJobsPage(): boolean { return this.isDevelopment() || this.isStaging() || this.isDogfood(); }, @@ -391,10 +412,7 @@ export const utils = { const format = `0,0.${_.repeat('0', precision)}`; const formattedAmount = numeral(unitAmount).format(format); if (_.isNaN(formattedAmount)) { - // tslint:disable-next-line:no-floating-promises - errorReporter.reportAsync( - new Error(`amount ${BigNumber}, decimals ${decimals} could not be formatted and returned NaN.`), - ); + // https://github.com/adamwdraper/Numeral-js/issues/596 return format; } return formattedAmount; -- cgit v1.2.3 From 254d30b8df4d04111458b639073dfbf9f82bf3d0 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 12 Jul 2018 15:54:35 -0700 Subject: Fix linting errors --- packages/website/ts/utils/configs.ts | 3 +-- packages/website/ts/utils/utils.ts | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index 745328d0a..9652a0925 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -1,5 +1,4 @@ -import * as _ from 'lodash'; -import { Environments, OutdatedWrappedEtherByNetworkId, PublicNodeUrlsByNetworkId } from 'ts/types'; +import { OutdatedWrappedEtherByNetworkId, PublicNodeUrlsByNetworkId } from 'ts/types'; const BASE_URL = window.location.origin; const INFURA_API_KEY = 'T5WSC8cautR4KXyYgsRs'; diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 240170113..e8152af87 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -28,7 +28,6 @@ import { } from 'ts/types'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; -import { errorReporter } from 'ts/utils/error_reporter'; import * as u2f from 'ts/vendor/u2f_api'; export const utils = { @@ -501,4 +500,4 @@ export const utils = { const result = `/images/token_icons/${symbol}.png`; return result; }, -}; +}; // tslint:disable:max-file-line-count -- cgit v1.2.3 From 1df074b73e05adf669b0cedc4bb1473e9e5631db Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 12 Jul 2018 16:57:03 -0700 Subject: Make Analytics API non-async --- packages/website/ts/components/fill_order.tsx | 3 +- .../website/ts/components/forms/subscribe_form.tsx | 3 +- .../generate_order/generate_order_form.tsx | 6 +-- .../ts/components/inputs/allowance_toggle.tsx | 6 +-- .../onboarding/portal_onboarding_flow.tsx | 6 +-- packages/website/ts/components/portal/portal.tsx | 3 +- .../components/relayer_index/relayer_grid_tile.tsx | 3 +- .../relayer_index/relayer_top_tokens.tsx | 3 +- packages/website/ts/components/wallet/wallet.tsx | 6 +-- .../ts/components/wallet/wrap_ether_item.tsx | 12 ++---- packages/website/ts/redux/analyticsMiddleware.ts | 15 +++---- packages/website/ts/utils/analytics.ts | 47 ++++++++++------------ packages/website/ts/utils/utils.ts | 2 +- 13 files changed, 44 insertions(+), 71 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index e4838bc0f..ff63410c3 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -508,8 +508,7 @@ export class FillOrder extends React.Component { } private _trackOrderEvent(eventName: string): void { const parsedOrder = this.state.parsedOrder; - // tslint:disable-next-line:no-floating-promises - analytics.trackOrderEventAsync(eventName, parsedOrder); + analytics.trackOrderEvent(eventName, parsedOrder); } private async _onFillOrderClickFireAndForgetAsync(): Promise { if (this.props.blockchainErr !== BlockchainErrs.NoError || _.isEmpty(this.props.userAddress)) { diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx index be0468b6f..ef19af644 100644 --- a/packages/website/ts/components/forms/subscribe_form.tsx +++ b/packages/website/ts/components/forms/subscribe_form.tsx @@ -114,8 +114,7 @@ export class SubscribeForm extends React.Component { ); } private _startOnboarding(): void { - // tslint:disable-next-line:no-floating-promises - analytics.trackAsync('Onboarding Started', { + analytics.track('Onboarding Started', { reason: 'manual', stepIndex: this.props.portalOnboardingStep, }); diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index 475b79f8f..193dd237a 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -65,8 +65,7 @@ export const RelayerGridTile: React.StatelessComponent = ( const topTokens = props.relayerInfo.topTokens; const weeklyTxnVolume = props.relayerInfo.weeklyTxnVolume; const onClick = () => { - // tslint:disable-next-line:no-floating-promises - analytics.trackAsync('Relayer Click', { + analytics.track('Relayer Click', { name: props.relayerInfo.name, }); utils.openUrl(link); diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx index 33783b406..f3787bd27 100644 --- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx +++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx @@ -43,8 +43,7 @@ class TokenLink extends React.Component { public render(): React.ReactNode { const onClick = (event: React.MouseEvent) => { event.stopPropagation(); - // tslint:disable-next-line:no-floating-promises - analytics.trackAsync('Token Click', { + analytics.track('Token Click', { tokenSymbol: this.props.tokenInfo.symbol, }); const tokenLink = this._tokenLinkFromToken(this.props.tokenInfo, this.props.networkId); diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 8523b819a..e462ab3e0 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -490,8 +490,7 @@ export class Wallet extends React.Component { private _openWrappedEtherActionRow(wrappedEtherDirection: Side): void { const action = wrappedEtherDirection === Side.Deposit ? 'Wallet - Wrap ETH Opened' : 'Wallet - Unwrap WETH Opened'; - // tslint:disable-next-line:no-floating-promises - analytics.trackAsync(action); + analytics.track(action); this.setState({ wrappedEtherDirection, }); @@ -499,8 +498,7 @@ export class Wallet extends React.Component { private _closeWrappedEtherActionRow(wrappedEtherDirection: Side): void { const action = wrappedEtherDirection === Side.Deposit ? 'Wallet - Wrap ETH Closed' : 'Wallet - Unwrap WETH Closed'; - // tslint:disable-next-line:no-floating-promises - analytics.trackAsync(action); + analytics.track(action); this.setState({ wrappedEtherDirection: undefined, }); diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index 9e3d06817..2b85b69be 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -196,15 +196,13 @@ export class WrapEtherItem extends React.Component next => action => { const nextState = (store.getState() as any) as State; switch (action.type) { case ActionTypes.UpdateInjectedProviderName: - // tslint:disable-next-line:no-floating-promises - analytics.addEventPropertiesAsync({ + analytics.addEventProperties({ injectedProviderName: nextState.injectedProviderName, }); break; case ActionTypes.UpdateNetworkId: - // tslint:disable-next-line:no-floating-promises - analytics.addEventPropertiesAsync({ + analytics.addEventProperties({ networkId: nextState.networkId, }); break; case ActionTypes.UpdateUserAddress: - // tslint:disable-next-line:no-floating-promises - analytics.addUserPropertiesAsync({ + analytics.addUserProperties({ ethAddress: nextState.userAddress, }); break; case ActionTypes.UpdateUserEtherBalance: if (nextState.userEtherBalanceInWei) { - // tslint:disable-next-line:no-floating-promises - analytics.addUserPropertiesAsync({ + analytics.addUserProperties({ ethBalance: nextState.userEtherBalanceInWei.toString(), }); } break; case ActionTypes.UpdatePortalOnboardingStep: - // tslint:disable-next-line:no-floating-promises - analytics.trackAsync('Update Onboarding Step', { + analytics.track('Update Onboarding Step', { stepIndex: nextState.portalOnboardingStep, }); break; diff --git a/packages/website/ts/utils/analytics.ts b/packages/website/ts/utils/analytics.ts index 2ff9f8918..e39998d7a 100644 --- a/packages/website/ts/utils/analytics.ts +++ b/packages/website/ts/utils/analytics.ts @@ -12,7 +12,6 @@ export interface HeapAnalytics { removeEventProperty(property: string): void; clearEventProperties(): void; } - export class Analytics { private _heap: HeapAnalytics; public static init(): Analytics { @@ -29,45 +28,39 @@ export class Analytics { constructor(heap: HeapAnalytics) { this._heap = heap; } + // tslint:disable:no-floating-promises // HeapAnalytics Wrappers - public async indentifyAsync(id: string, idType: string): Promise { - await this._heapLoadedGuardAsync(); - this._heap.indentify(id, idType); + public indentify(id: string, idType: string): void { + this._heapLoadedGuardAsync(() => this._heap.indentify(id, idType)); } - public async trackAsync(eventName: string, eventProperties?: ObjectMap): Promise { - await this._heapLoadedGuardAsync(); - this._heap.track(eventName, eventProperties); + public track(eventName: string, eventProperties?: ObjectMap): void { + this._heapLoadedGuardAsync(() => this._heap.track(eventName, eventProperties)); } - public async resetIdentityAsync(): Promise { - await this._heapLoadedGuardAsync(); - this._heap.resetIdentity(); + public resetIdentity(): void { + this._heapLoadedGuardAsync(() => this._heap.resetIdentity()); } - public async addUserPropertiesAsync(properties: ObjectMap): Promise { - await this._heapLoadedGuardAsync(); - this._heap.addUserProperties(properties); + public addUserProperties(properties: ObjectMap): void { + this._heapLoadedGuardAsync(() => this._heap.addUserProperties(properties)); } - public async addEventPropertiesAsync(properties: ObjectMap): Promise { - await this._heapLoadedGuardAsync(); - this._heap.addEventProperties(properties); + public addEventProperties(properties: ObjectMap): void { + this._heapLoadedGuardAsync(() => this._heap.addEventProperties(properties)); } - public async removeEventPropertyAsync(property: string): Promise { - await this._heapLoadedGuardAsync(); - this._heap.removeEventProperty(property); + public removeEventProperty(property: string): void { + this._heapLoadedGuardAsync(() => this._heap.removeEventProperty(property)); } - public async clearEventPropertiesAsync(): Promise { - await this._heapLoadedGuardAsync(); - this._heap.clearEventProperties(); + public clearEventProperties(): void { + this._heapLoadedGuardAsync(() => this._heap.clearEventProperties()); } + // tslint:enable:no-floating-promises // Custom methods - public async trackOrderEventAsync(eventName: string, order: Order): Promise { + public trackOrderEvent(eventName: string, order: Order): void { const orderLoggingData = { takerTokenAmount: order.signedOrder.takerTokenAmount, makeTokenAmount: order.signedOrder.makerTokenAmount, takerToken: order.metadata.takerToken.symbol, makerToken: order.metadata.makerToken.symbol, }; - // tslint:disable-next-line:no-floating-promises - this.trackAsync(eventName, orderLoggingData); + this.track(eventName, orderLoggingData); } /** * Heap is not available as a UMD module, and additionally has the strange property of replacing itself with @@ -75,13 +68,15 @@ export class Analytics { * Instead of having an await call before every analytics use, we opt to have the awaiting logic in here by * guarding every API call with the guard below. */ - private async _heapLoadedGuardAsync(): Promise { + private async _heapLoadedGuardAsync(callback: () => void): Promise { if (this._heap.loaded) { + callback(); return undefined; } await utils.onPageLoadPromise; // HACK: Reset heap to loaded heap this._heap = (window as any).heap; + callback(); } } diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index bd6a57eea..9c5e12ec7 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -318,7 +318,7 @@ export const utils = { resolve(); return; } - window.onload = () => resolve(); + window.onload = resolve; }), getProviderType(provider: Provider): Providers | string { const constructorName = provider.constructor.name; -- cgit v1.2.3 From b4747c3f85acb7d2909c5b7673d98055e8daaebe Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 12 Jul 2018 18:11:25 -0700 Subject: Refactor utils and add UNNKOWN environment type --- packages/website/ts/blockchain.ts | 1 - packages/website/ts/types.ts | 1 + packages/website/ts/utils/configs.ts | 2 +- packages/website/ts/utils/error_reporter.ts | 3 +-- packages/website/ts/utils/utils.ts | 36 +++++++++++------------------ 5 files changed, 16 insertions(+), 27 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 868ffad03..1003cbd06 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -682,7 +682,6 @@ export class Blockchain { // Note: it's not entirely clear from the documentation which // errors will be thrown by `watch`. For now, let's log the error // to rollbar and stop watching when one occurs - // tslint:disable-next-line:no-floating-promises errorReporter.report(err); // fire and forget return; } else { diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index c2a0f9640..a473e50c3 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -247,6 +247,7 @@ export enum Environments { DOGFOOD = 'DOGFOOD', STAGING = 'STAGING', PRODUCTION = 'PRODUCTION', + UNKNOWN = 'UNKNOWN', } export type ContractInstance = any; // TODO: add type definition for Contract diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index 9652a0925..a1c64f9cb 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -14,7 +14,7 @@ export const configs = { DEFAULT_TRACKED_TOKEN_SYMBOLS: ['WETH', 'ZRX'], DOMAIN_STAGING: 'staging-0xproject.s3-website-us-east-1.amazonaws.com', DOMAIN_DOGFOOD: 'dogfood.0xproject.com', - DOMAIN_DEVELOPMENT: '0xproject.localhost:3572', + DOMAINS_DEVELOPMENT: ['0xproject.localhost:3572', 'localhost:3572', '127.0.0.1'], DOMAIN_PRODUCTION: '0xproject.com', GOOGLE_ANALYTICS_ID: 'UA-98720122-1', LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE: '2017-11-22', diff --git a/packages/website/ts/utils/error_reporter.ts b/packages/website/ts/utils/error_reporter.ts index d38269d92..6008fffed 100644 --- a/packages/website/ts/utils/error_reporter.ts +++ b/packages/website/ts/utils/error_reporter.ts @@ -1,5 +1,4 @@ import { logUtils } from '@0xproject/utils'; -import { Environments } from 'ts/types'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; @@ -42,7 +41,7 @@ const rollbar = Rollbar.init(rollbarConfig); export const errorReporter = { report(err: Error): void { - if (utils.getEnvironment() === Environments.DEVELOPMENT) { + if (utils.isDevelopment()) { return; // Let's not log development errors to rollbar } rollbar.error(err, (rollbarErr: Error) => { diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index e8152af87..77b0846a9 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -175,18 +175,6 @@ export const utils = { _.includes(errMsg, ledgerDenialErrMsg); return isUserDeniedErrMsg; }, - getCurrentEnvironment(): string { - switch (location.host) { - case configs.DOMAIN_DEVELOPMENT: - return 'development'; - case configs.DOMAIN_STAGING: - return 'staging'; - case configs.DOMAIN_PRODUCTION: - return 'production'; - default: - return 'production'; - } - }, getAddressBeginAndEnd(address: string): string { const truncatedAddress = `${address.substring(0, 6)}...${address.substr(-4)}`; // 0x3d5a...b287 return truncatedAddress; @@ -347,10 +335,7 @@ export const utils = { return utils.isDogfood() ? configs.BACKEND_BASE_STAGING_URL : configs.BACKEND_BASE_PROD_URL; }, isDevelopment(): boolean { - return _.includes( - ['https://0xproject.localhost:3572', 'https://localhost:3572', 'https://127.0.0.1'], - window.location.origin, - ); + return _.includes(configs.DOMAINS_DEVELOPMENT, window.location.origin); }, isStaging(): boolean { return _.includes(window.location.href, configs.DOMAIN_STAGING); @@ -377,7 +362,7 @@ export const utils = { if (utils.isProduction()) { return Environments.PRODUCTION; } - return undefined; + return Environments.UNKNOWN; }, shouldShowJobsPage(): boolean { return this.isDevelopment() || this.isStaging() || this.isDogfood(); @@ -405,21 +390,26 @@ export const utils = { const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); // if the unit amount is less than 1, show the natural number of decimal places with a max of 4 // if the unit amount is greater than or equal to 1, show only 2 decimal places - const precision = unitAmount.lt(1) - ? Math.min(constants.TOKEN_AMOUNT_DISPLAY_PRECISION, unitAmount.decimalPlaces()) - : 2; + const lessThanOnePrecision = Math.min(constants.TOKEN_AMOUNT_DISPLAY_PRECISION, unitAmount.decimalPlaces()); + const greaterThanOnePrecision = 2; + const precision = unitAmount.lt(1) ? lessThanOnePrecision : greaterThanOnePrecision; const format = `0,0.${_.repeat('0', precision)}`; const formattedAmount = numeral(unitAmount).format(format); if (_.isNaN(formattedAmount)) { // https://github.com/adamwdraper/Numeral-js/issues/596 - return format; + return '0'; } return formattedAmount; }, getUsdValueFormattedAmount(amount: BigNumber, decimals: number, price: BigNumber): string { const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); const value = unitAmount.mul(price); - return numeral(value).format(constants.NUMERAL_USD_FORMAT); + const formattedAmount = numeral(value).format(constants.NUMERAL_USD_FORMAT); + if (_.isNaN(formattedAmount)) { + // https://github.com/adamwdraper/Numeral-js/issues/596 + return numeral(new BigNumber(0)).format(constants.NUMERAL_USD_FORMAT); + } + return formattedAmount; }, openUrl(url: string): void { window.open(url, '_blank'); @@ -500,4 +490,4 @@ export const utils = { const result = `/images/token_icons/${symbol}.png`; return result; }, -}; // tslint:disable:max-file-line-count +}; -- cgit v1.2.3 From 65af78c85d7872891c0bffeac76687a72a61dd59 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 12 Jul 2018 18:20:46 -0700 Subject: Fix indentify typo --- packages/website/ts/components/forms/subscribe_form.tsx | 2 +- packages/website/ts/utils/analytics.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx index ef19af644..761db7517 100644 --- a/packages/website/ts/components/forms/subscribe_form.tsx +++ b/packages/website/ts/components/forms/subscribe_form.tsx @@ -114,7 +114,7 @@ export class SubscribeForm extends React.Component): void; resetIdentity(): void; addUserProperties(properties: ObjectMap): void; @@ -30,8 +30,8 @@ export class Analytics { } // tslint:disable:no-floating-promises // HeapAnalytics Wrappers - public indentify(id: string, idType: string): void { - this._heapLoadedGuardAsync(() => this._heap.indentify(id, idType)); + public identify(id: string, idType: string): void { + this._heapLoadedGuardAsync(() => this._heap.identify(id, idType)); } public track(eventName: string, eventProperties?: ObjectMap): void { this._heapLoadedGuardAsync(() => this._heap.track(eventName, eventProperties)); -- cgit v1.2.3 From ee54438e92f191637ecb0d36e9d79e707d1c976c Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 12 Jul 2018 18:30:01 -0700 Subject: Fix logging typo --- packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 94a6338ee..a51170735 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -236,7 +236,7 @@ class PlainPortalOnboardingFlow extends React.Component Date: Fri, 13 Jul 2018 12:42:01 +0200 Subject: -fetch'; --- packages/website/package.json | 1 - packages/website/ts/blockchain.ts | 14 ++++---------- packages/website/ts/components/order_json.tsx | 4 ++-- packages/website/ts/components/token_balances.tsx | 4 ++-- packages/website/ts/index.tsx | 1 - packages/website/ts/utils/doc_utils.ts | 6 +++--- packages/website/ts/utils/fetch_utils.ts | 6 +++--- 7 files changed, 14 insertions(+), 22 deletions(-) (limited to 'packages/website') diff --git a/packages/website/package.json b/packages/website/package.json index b5b4b6119..2d054693b 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -63,7 +63,6 @@ "thenby": "^1.2.3", "truffle-contract": "2.0.1", "web3-provider-engine": "14.0.6", - "whatwg-fetch": "^2.0.3", "xml-js": "^1.6.4" }, "devDependencies": { diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 0e6698318..31d8ba2d6 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -15,6 +15,7 @@ import { ledgerEthereumBrowserClientFactoryAsync, LedgerSubprovider, RedundantSubprovider, + RPCSubprovider, SignerSubprovider, Subprovider, } from '@0xproject/subproviders'; @@ -62,7 +63,6 @@ import { errorReporter } from 'ts/utils/error_reporter'; import { utils } from 'ts/utils/utils'; import ProviderEngine = require('web3-provider-engine'); import FilterSubprovider = require('web3-provider-engine/subproviders/filters'); -import RpcSubprovider = require('web3-provider-engine/subproviders/rpc'); import * as MintableArtifacts from '../contracts/Mintable.json'; @@ -157,9 +157,7 @@ export class Blockchain { provider.addProvider(ledgerSubprovider); provider.addProvider(new FilterSubprovider()); const rpcSubproviders = _.map(configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkIdIfExists], publicNodeUrl => { - return new RpcSubprovider({ - rpcUrl: publicNodeUrl, - }); + return new RPCSubprovider(publicNodeUrl); }); provider.addProvider(new RedundantSubprovider(rpcSubproviders as Subprovider[])); provider.start(); @@ -171,9 +169,7 @@ export class Blockchain { provider.addProvider(new SignerSubprovider(injectedWeb3.currentProvider)); provider.addProvider(new FilterSubprovider()); const rpcSubproviders = _.map(publicNodeUrlsIfExistsForNetworkId, publicNodeUrl => { - return new RpcSubprovider({ - rpcUrl: publicNodeUrl, - }); + return new RPCSubprovider(publicNodeUrl); }); provider.addProvider(new RedundantSubprovider(rpcSubproviders as Subprovider[])); provider.start(); @@ -189,9 +185,7 @@ export class Blockchain { provider.addProvider(new FilterSubprovider()); const networkId = constants.NETWORK_ID_MAINNET; const rpcSubproviders = _.map(configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkId], publicNodeUrl => { - return new RpcSubprovider({ - rpcUrl: publicNodeUrl, - }); + return new RPCSubprovider(publicNodeUrl); }); provider.addProvider(new RedundantSubprovider(rpcSubproviders as Subprovider[])); provider.start(); diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx index 35188c024..7a732de6a 100644 --- a/packages/website/ts/components/order_json.tsx +++ b/packages/website/ts/components/order_json.tsx @@ -1,5 +1,5 @@ import { ECSignature } from '@0xproject/types'; -import { BigNumber, logUtils } from '@0xproject/utils'; +import { BigNumber, fetchAsync, logUtils } from '@0xproject/utils'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; import TextField from 'material-ui/TextField'; @@ -148,7 +148,7 @@ You can see and fill it here: ${this.state.shareLink}`); const bitlyRequestUrl = `${constants.URL_BITLY_API}/v3/shorten?access_token=${ configs.BITLY_ACCESS_TOKEN }&longUrl=${longUrl}`; - const response = await fetch(bitlyRequestUrl); + const response = await fetchAsync(bitlyRequestUrl); const responseBody = await response.text(); const bodyObj = JSON.parse(responseBody); if (response.status !== 200 || bodyObj.status_code !== 200) { diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 3fae83c00..1f2dfccb0 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -5,7 +5,7 @@ import { Styles, utils as sharedUtils, } from '@0xproject/react-shared'; -import { BigNumber, errorUtils, logUtils } from '@0xproject/utils'; +import { BigNumber, errorUtils, fetchAsync, logUtils } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; @@ -548,7 +548,7 @@ export class TokenBalances extends React.Component { - const response = await fetch(s3DocJsonRoot); + const response = await fetchAsync(s3DocJsonRoot); if (response.status !== 200) { // TODO: Show the user an error message when the docs fail to load const errMsg = await response.text(); @@ -73,7 +73,7 @@ export const docUtils = { }, async getJSONDocFileAsync(filePath: string, s3DocJsonRoot: string): Promise { const endpoint = `${s3DocJsonRoot}/${filePath}`; - const response = await fetch(endpoint); + const response = await fetchAsync(endpoint); if (response.status !== 200) { // TODO: Show the user an error message when the docs fail to load const errMsg = await response.text(); diff --git a/packages/website/ts/utils/fetch_utils.ts b/packages/website/ts/utils/fetch_utils.ts index 513f7e479..f159e3180 100644 --- a/packages/website/ts/utils/fetch_utils.ts +++ b/packages/website/ts/utils/fetch_utils.ts @@ -1,4 +1,4 @@ -import { logUtils } from '@0xproject/utils'; +import { fetchAsync, logUtils } from '@0xproject/utils'; import * as _ from 'lodash'; import * as queryString from 'query-string'; @@ -19,14 +19,14 @@ export const fetchUtils = { async requestAsync(baseUrl: string, path: string, queryParams?: object): Promise { const query = queryStringFromQueryParams(queryParams); const url = `${baseUrl}${path}${query}`; - const response = await fetch(url); + const response = await fetchAsync(url); logErrorIfPresent(response, url); const result = await response.json(); return result; }, async postAsync(baseUrl: string, path: string, body: object): Promise { const url = `${baseUrl}${path}`; - const response = await fetch(url, { + const response = await fetchAsync(url, { method: 'POST', headers: { 'Content-Type': 'application/json', -- cgit v1.2.3 From 512502ca0873a290accb53777ca9d93f8d28e84b Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 13 Jul 2018 14:26:02 +0200 Subject: Export Web3ProviderEngine from subproviders package --- packages/website/ts/blockchain.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 31d8ba2d6..099171c45 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -18,6 +18,7 @@ import { RPCSubprovider, SignerSubprovider, Subprovider, + Web3ProviderEngine, } from '@0xproject/subproviders'; import { BlockParam, @@ -61,7 +62,6 @@ import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { errorReporter } from 'ts/utils/error_reporter'; import { utils } from 'ts/utils/utils'; -import ProviderEngine = require('web3-provider-engine'); import FilterSubprovider = require('web3-provider-engine/subproviders/filters'); import * as MintableArtifacts from '../contracts/Mintable.json'; @@ -148,7 +148,7 @@ export class Blockchain { if (!isU2FSupported) { throw new Error('Cannot update providerType to LEDGER without U2F support'); } - const provider = new ProviderEngine(); + const provider = new Web3ProviderEngine(); const ledgerWalletConfigs = { networkId: networkIdIfExists, ledgerEthereumClientFactoryAsync: ledgerEthereumBrowserClientFactoryAsync, @@ -165,7 +165,7 @@ export class Blockchain { } else if (doesInjectedWeb3Exist && isPublicNodeAvailableForNetworkId) { // We catch all requests involving a users account and send it to the injectedWeb3 // instance. All other requests go to the public hosted node. - const provider = new ProviderEngine(); + const provider = new Web3ProviderEngine(); provider.addProvider(new SignerSubprovider(injectedWeb3.currentProvider)); provider.addProvider(new FilterSubprovider()); const rpcSubproviders = _.map(publicNodeUrlsIfExistsForNetworkId, publicNodeUrl => { @@ -181,7 +181,7 @@ export class Blockchain { // If no injectedWeb3 instance, all requests fallback to our public hosted mainnet/testnet node // We do this so that users can still browse the 0x Portal DApp even if they do not have web3 // injected into their browser. - const provider = new ProviderEngine(); + const provider = new Web3ProviderEngine(); provider.addProvider(new FilterSubprovider()); const networkId = constants.NETWORK_ID_MAINNET; const rpcSubproviders = _.map(configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkId], publicNodeUrl => { -- cgit v1.2.3 From de1029d5ef7f069a2215557e901f3230f6da98fa Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 13 Jul 2018 18:51:21 +0200 Subject: Fix linter issues --- packages/website/ts/blockchain.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 099171c45..805b48856 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -17,7 +17,6 @@ import { RedundantSubprovider, RPCSubprovider, SignerSubprovider, - Subprovider, Web3ProviderEngine, } from '@0xproject/subproviders'; import { @@ -159,7 +158,7 @@ export class Blockchain { const rpcSubproviders = _.map(configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkIdIfExists], publicNodeUrl => { return new RPCSubprovider(publicNodeUrl); }); - provider.addProvider(new RedundantSubprovider(rpcSubproviders as Subprovider[])); + provider.addProvider(new RedundantSubprovider(rpcSubproviders)); provider.start(); return [provider, ledgerSubprovider]; } else if (doesInjectedWeb3Exist && isPublicNodeAvailableForNetworkId) { @@ -171,7 +170,7 @@ export class Blockchain { const rpcSubproviders = _.map(publicNodeUrlsIfExistsForNetworkId, publicNodeUrl => { return new RPCSubprovider(publicNodeUrl); }); - provider.addProvider(new RedundantSubprovider(rpcSubproviders as Subprovider[])); + provider.addProvider(new RedundantSubprovider(rpcSubproviders)); provider.start(); return [provider, undefined]; } else if (doesInjectedWeb3Exist) { @@ -187,7 +186,7 @@ export class Blockchain { const rpcSubproviders = _.map(configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkId], publicNodeUrl => { return new RPCSubprovider(publicNodeUrl); }); - provider.addProvider(new RedundantSubprovider(rpcSubproviders as Subprovider[])); + provider.addProvider(new RedundantSubprovider(rpcSubproviders)); provider.start(); return [provider, undefined]; } -- cgit v1.2.3 From c5fcdd06579b67b5b129749474acd9a4d1d4db65 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 13 Jul 2018 11:10:06 -0700 Subject: Move format to helper function --- packages/website/ts/utils/utils.ts | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 77b0846a9..f2baeb849 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -386,6 +386,14 @@ export const utils = { getFormattedAmountFromToken(token: Token, tokenState: TokenState): string { return utils.getFormattedAmount(tokenState.balance, token.decimals); }, + format(value: BigNumber, format: string): string { + const formattedAmount = numeral(value).format(format); + if (_.isNaN(formattedAmount)) { + // https://github.com/adamwdraper/Numeral-js/issues/596 + return numeral(new BigNumber(0)).format(format); + } + return formattedAmount; + }, getFormattedAmount(amount: BigNumber, decimals: number): string { const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); // if the unit amount is less than 1, show the natural number of decimal places with a max of 4 @@ -394,22 +402,12 @@ export const utils = { const greaterThanOnePrecision = 2; const precision = unitAmount.lt(1) ? lessThanOnePrecision : greaterThanOnePrecision; const format = `0,0.${_.repeat('0', precision)}`; - const formattedAmount = numeral(unitAmount).format(format); - if (_.isNaN(formattedAmount)) { - // https://github.com/adamwdraper/Numeral-js/issues/596 - return '0'; - } - return formattedAmount; + return utils.format(unitAmount, format); }, getUsdValueFormattedAmount(amount: BigNumber, decimals: number, price: BigNumber): string { const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); const value = unitAmount.mul(price); - const formattedAmount = numeral(value).format(constants.NUMERAL_USD_FORMAT); - if (_.isNaN(formattedAmount)) { - // https://github.com/adamwdraper/Numeral-js/issues/596 - return numeral(new BigNumber(0)).format(constants.NUMERAL_USD_FORMAT); - } - return formattedAmount; + return utils.format(value, constants.NUMERAL_USD_FORMAT); }, openUrl(url: string): void { window.open(url, '_blank'); -- cgit v1.2.3 From 5e4b1eed3067208fecdd5c10f1c1cc16f6b4647b Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 13 Jul 2018 14:09:34 -0700 Subject: Move update onboarding step tracking to onboarding flow code --- packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 3 +++ packages/website/ts/redux/analyticsMiddleware.ts | 5 ----- 2 files changed, 3 insertions(+), 5 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index a51170735..f395674a1 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -233,6 +233,9 @@ class PlainPortalOnboardingFlow extends React.Component next => action => { }); } break; - case ActionTypes.UpdatePortalOnboardingStep: - analytics.track('Update Onboarding Step', { - stepIndex: nextState.portalOnboardingStep, - }); - break; default: break; } -- cgit v1.2.3