aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-03-10 23:53:42 +0800
committerFabio Berger <me@fabioberger.com>2018-03-10 23:53:42 +0800
commitcea8dcae3dac2265d3780c95d6581fe48e9b94a4 (patch)
tree527d82d0123ec38924c4459b833131f379e20f71 /packages/website/ts
parentfc7e7d9331692510b2cf5baebcff948ebf0afc07 (diff)
downloaddexon-sol-tools-cea8dcae3dac2265d3780c95d6581fe48e9b94a4.tar
dexon-sol-tools-cea8dcae3dac2265d3780c95d6581fe48e9b94a4.tar.gz
dexon-sol-tools-cea8dcae3dac2265d3780c95d6581fe48e9b94a4.tar.bz2
dexon-sol-tools-cea8dcae3dac2265d3780c95d6581fe48e9b94a4.tar.lz
dexon-sol-tools-cea8dcae3dac2265d3780c95d6581fe48e9b94a4.tar.xz
dexon-sol-tools-cea8dcae3dac2265d3780c95d6581fe48e9b94a4.tar.zst
dexon-sol-tools-cea8dcae3dac2265d3780c95d6581fe48e9b94a4.zip
Refactor Analytics so that calls to ReactGA are all in a single module, combining the provider type util function, moving GA id to configs and using utils.onPageLoadAsync
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/blockchain.ts23
-rw-r--r--packages/website/ts/components/fill_order.tsx30
-rw-r--r--packages/website/ts/components/generate_order/generate_order_form.tsx15
-rw-r--r--packages/website/ts/components/inputs/allowance_toggle.tsx16
-rw-r--r--packages/website/ts/index.tsx12
-rw-r--r--packages/website/ts/types.ts6
-rw-r--r--packages/website/ts/utils/analytics.ts26
-rw-r--r--packages/website/ts/utils/configs.ts1
-rw-r--r--packages/website/ts/utils/constants.ts1
-rw-r--r--packages/website/ts/utils/utils.ts35
10 files changed, 83 insertions, 82 deletions
diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index fca9504d7..56a8c99f4 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -37,6 +37,7 @@ import {
BlockchainErrs,
ContractInstance,
Order as PortalOrder,
+ Providers,
ProviderType,
Side,
SideToAssetToken,
@@ -57,6 +58,12 @@ import * as MintableArtifacts from '../contracts/Mintable.json';
const BLOCK_NUMBER_BACK_TRACK = 50;
const GWEI_IN_WEI = 1000000000;
+const providerToName: { [provider: string]: string } = {
+ [Providers.Metamask]: constants.PROVIDER_NAME_METAMASK,
+ [Providers.Parity]: constants.PROVIDER_NAME_PARITY_SIGNER,
+ [Providers.Mist]: constants.PROVIDER_NAME_MIST,
+};
+
export class Blockchain {
public networkId: number;
public nodeVersion: string;
@@ -70,18 +77,12 @@ export class Blockchain {
private _ledgerSubprovider: LedgerWalletSubprovider;
private _defaultGasPrice: BigNumber;
private static _getNameGivenProvider(provider: Web3.Provider): string {
- if (!_.isUndefined((provider as any).isMetaMask)) {
- return constants.PROVIDER_NAME_METAMASK;
- }
-
- // HACK: We use the fact that Parity Signer's provider is an instance of their
- // internal `Web3FrameProvider` class.
- const isParitySigner = _.startsWith(provider.constructor.toString(), 'function Web3FrameProvider');
- if (isParitySigner) {
- return constants.PROVIDER_NAME_PARITY_SIGNER;
+ const providerType = utils.getProviderType(provider);
+ const providerNameIfExists = providerToName[providerType];
+ if (_.isUndefined(providerNameIfExists)) {
+ return constants.PROVIDER_NAME_GENERIC;
}
-
- return constants.PROVIDER_NAME_GENERIC;
+ return providerNameIfExists;
}
private static async _getProviderAsync(injectedWeb3: Web3, networkIdIfExists: number) {
const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3);
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index e9127288d..11b756d8e 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -7,7 +7,6 @@ import { Card, CardHeader, CardText } from 'material-ui/Card';
import Divider from 'material-ui/Divider';
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
-import * as ReactGA from 'react-ga';
import { Link } from 'react-router-dom';
import { Blockchain } from 'ts/blockchain';
import { TrackTokenConfirmationDialog } from 'ts/components/dialogs/track_token_confirmation_dialog';
@@ -24,6 +23,7 @@ import { validator } from 'ts/schemas/validator';
import { AlertTypes, BlockchainErrs, Order, Token, TokenByAddress, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { errorReporter } from 'ts/utils/error_reporter';
+import { analytics } from 'ts/utils/analytics';
import { utils } from 'ts/utils/utils';
interface FillOrderProps {
@@ -544,12 +544,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
signedOrder,
this.props.orderFillAmount,
);
- ReactGA.event({
- category: 'Portal',
- action: 'Fill Order Success',
- label: eventLabel,
- value: parsedOrder.signedOrder.takerTokenAmount,
- });
+ analytics.logEvent('Portal', 'Fill Order Success', eventLabel, parsedOrder.signedOrder.takerTokenAmount);
// After fill completes, let's force fetch the token balances
this.props.dispatcher.forceTokenStateRefetch();
this.setState({
@@ -563,12 +558,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
this.setState({
isFilling: false,
});
- ReactGA.event({
- category: 'Portal',
- action: 'Fill Order Failure',
- label: eventLabel,
- value: parsedOrder.signedOrder.takerTokenAmount,
- });
+ analytics.logEvent('Portal', 'Fill Order Failure', eventLabel, parsedOrder.signedOrder.takerTokenAmount);
const errMsg = `${err}`;
if (utils.didUserDenyWeb3Request(errMsg)) {
return;
@@ -633,12 +623,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
globalErrMsg: '',
unavailableTakerAmount: takerTokenAmount,
});
- ReactGA.event({
- category: 'Portal',
- action: 'Cancel Order Success',
- label: eventLabel,
- value: parsedOrder.signedOrder.makerTokenAmount,
- });
+ analytics.logEvent('Portal', 'Cancel Order Success', eventLabel, parsedOrder.signedOrder.makerTokenAmount);
return;
} catch (err) {
this.setState({
@@ -648,12 +633,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
if (utils.didUserDenyWeb3Request(errMsg)) {
return;
}
- ReactGA.event({
- category: 'Portal',
- action: 'Cancel Order Failure',
- label: eventLabel,
- value: parsedOrder.signedOrder.makerTokenAmount,
- });
+ analytics.logEvent('Portal', 'Cancel Order Failure', eventLabel, parsedOrder.signedOrder.makerTokenAmount);
globalErrMsg = 'Failed to cancel order, please refresh and try again';
utils.consoleLog(`${err}`);
this.setState({
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 26fa904fe..5e356528e 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -5,7 +5,6 @@ import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import Divider from 'material-ui/Divider';
import * as React from 'react';
-import * as ReactGA from 'react-ga';
import { Blockchain } from 'ts/blockchain';
import { ExpirationInput } from 'ts/components/inputs/expiration_input';
import { HashInput } from 'ts/components/inputs/hash_input';
@@ -23,6 +22,7 @@ import { validator } from 'ts/schemas/validator';
import { AlertTypes, BlockchainErrs, HashData, Side, SideToAssetToken, Token, TokenByAddress } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { errorReporter } from 'ts/utils/error_reporter';
+import { analytics } from 'ts/utils/analytics';
import { utils } from 'ts/utils/utils';
enum SigningState {
@@ -255,12 +255,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
if (didSignSuccessfully) {
const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
const eventLabel = `${this.props.tokenByAddress[debitToken.address].symbol}-${networkName}`;
- ReactGA.event({
- category: 'Portal',
- action: 'Sign Order Success',
- label: eventLabel,
- value: debitToken.amount.toNumber(),
- });
+ analytics.logEvent('Portal', 'Sign Order Success', eventLabel, debitToken.amount.toNumber());
this.setState({
globalErrMsg: '',
shouldShowIncompleteErrs: false,
@@ -273,11 +268,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
globalErrMsg = 'You must enable wallet communication';
this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
}
- ReactGA.event({
- category: 'Portal',
- action: 'Sign Order Failure',
- label: globalErrMsg,
- });
+ analytics.logEvent('Portal', 'Sign Order Failure', globalErrMsg);
this.setState({
globalErrMsg,
shouldShowIncompleteErrs: true,
diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
index 7fe303cf4..6831fee48 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_toggle.tsx
@@ -3,12 +3,12 @@ import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import Toggle from 'material-ui/Toggle';
import * as React from 'react';
-import * as ReactGA from 'react-ga';
import { Blockchain } from 'ts/blockchain';
import { Dispatcher } from 'ts/redux/dispatcher';
import { BalanceErrs, Token, TokenState } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { errorReporter } from 'ts/utils/error_reporter';
+import { analytics } from 'ts/utils/analytics';
import { utils } from 'ts/utils/utils';
const DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS = new BigNumber(2).pow(256).minus(1);
@@ -81,20 +81,10 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow
const eventLabel = `${this.props.token.symbol}-${networkName}`;
try {
await this.props.blockchain.setProxyAllowanceAsync(this.props.token, newAllowanceAmountInBaseUnits);
- ReactGA.event({
- category: 'Portal',
- action: 'Set Allowance Success',
- label: eventLabel,
- value: newAllowanceAmountInBaseUnits.toNumber(),
- });
+ analytics.logEvent('Portal', 'Set Allowance Success', eventLabel, newAllowanceAmountInBaseUnits.toNumber());
await this.props.refetchTokenStateAsync();
} catch (err) {
- ReactGA.event({
- category: 'Portal',
- action: 'Set Allowance Failure',
- label: eventLabel,
- value: newAllowanceAmountInBaseUnits.toNumber(),
- });
+ analytics.logEvent('Portal', 'Set Allowance Failure', eventLabel, newAllowanceAmountInBaseUnits.toNumber());
this.setState({
isSpinnerVisible: false,
});
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 1eaf6274b..d974d7511 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -2,7 +2,6 @@
import { MuiThemeProvider } from 'material-ui/styles';
import * as React from 'react';
import { render } from 'react-dom';
-import * as ReactGA from 'react-ga';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
import * as injectTapEventPlugin from 'react-tap-event-plugin';
@@ -17,9 +16,9 @@ import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
import { tradeHistoryStorage } from 'ts/local_storage/trade_history_storage';
import { reducer, State } from 'ts/redux/reducer';
import { WebsitePaths } from 'ts/types';
+import { analytics } from 'ts/utils/analytics';
import { muiTheme } from 'ts/utils/mui_theme';
import { utils } from 'ts/utils/utils';
-import * as Web3 from 'web3';
import 'whatwg-fetch';
injectTapEventPlugin();
@@ -47,13 +46,8 @@ const LazyConnectDocumentation = createLazyComponent('Documentation', async () =
System.import<any>(/* webpackChunkName: "connectDocs" */ 'ts/containers/connect_documentation'),
);
-ReactGA.initialize('UA-98720122-1');
-window.onload = () => {
- const providerName = (window as any).web3
- ? utils.web3ProviderToString((window as any).web3.currentProvider)
- : 'NONE';
- ReactGA.ga('set', 'dimension1', providerName);
-};
+analytics.init();
+analytics.logProviderAsync((window as any).web3);
const store: ReduxStore<State> = createStore(reducer);
render(
<Router>
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 41fbc6a86..b3e4973fa 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -463,4 +463,10 @@ export enum Deco {
CapWords,
Upper,
}
+
+export enum Providers {
+ Parity = 'PARITY',
+ Metamask = 'METAMASK',
+ Mist = 'MIST',
+}
// tslint:disable:max-file-line-count
diff --git a/packages/website/ts/utils/analytics.ts b/packages/website/ts/utils/analytics.ts
new file mode 100644
index 000000000..37c47c7b0
--- /dev/null
+++ b/packages/website/ts/utils/analytics.ts
@@ -0,0 +1,26 @@
+import * as _ from 'lodash';
+import * as ReactGA from 'react-ga';
+import { configs } from 'ts/utils/configs';
+import { utils } from 'ts/utils/utils';
+import * as Web3 from 'web3';
+
+export const analytics = {
+ init() {
+ ReactGA.initialize(configs.GOOGLE_ANALYTICS_ID);
+ },
+ logEvent(category: string, action: string, label: string, value?: any) {
+ ReactGA.event({
+ category,
+ action,
+ label,
+ value,
+ });
+ },
+ async logProviderAsync(web3IfExists: Web3) {
+ await utils.onPageLoadAsync();
+ const providerType = !_.isUndefined(web3IfExists)
+ ? utils.getProviderType(web3IfExists.currentProvider)
+ : 'NONE';
+ ReactGA.ga('set', 'dimension1', providerType);
+ },
+};
diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts
index f33b06c0a..34ba5701b 100644
--- a/packages/website/ts/utils/configs.ts
+++ b/packages/website/ts/utils/configs.ts
@@ -61,6 +61,7 @@ export const configs = {
TRST: '/images/token_icons/trust.png',
} as { [symbol: string]: string },
IS_MAINNET_ENABLED: true,
+ GOOGLE_ANALYTICS_ID: 'UA-98720122-1',
LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE: '2017-11-22',
LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE: '2017-12-19',
// NEW_WRAPPED_ETHERS is temporary until we remove the SHOULD_DEPRECATE_OLD_WETH_TOKEN flag
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 71fe08abe..f63e8617e 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -25,6 +25,7 @@ export const constants = {
PROVIDER_NAME_LEDGER: 'Ledger',
PROVIDER_NAME_METAMASK: 'Metamask',
PROVIDER_NAME_PARITY_SIGNER: 'Parity Signer',
+ PROVIDER_NAME_MIST: 'Mist',
PROVIDER_NAME_GENERIC: 'Injected Web3',
PROVIDER_NAME_PUBLIC: '0x Public',
ROLLBAR_ACCESS_TOKEN: 'a6619002b51c4464928201e6ea94de65',
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index a40db805b..5fcd3f8e5 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -4,10 +4,11 @@ import { BigNumber } from '@0xproject/utils';
import deepEqual = require('deep-equal');
import * as _ from 'lodash';
import * as moment from 'moment';
-import { Order, ScreenWidths, Side, SideToAssetToken, Token, TokenByAddress } from 'ts/types';
+import { Order, Providers, ScreenWidths, Side, SideToAssetToken, Token, TokenByAddress } from 'ts/types';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import * as u2f from 'ts/vendor/u2f_api';
+import Web3 = require('web3');
const LG_MIN_EM = 64;
const MD_MIN_EM = 52;
@@ -268,17 +269,6 @@ export const utils = {
const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`;
return baseUrl;
},
- web3ProviderToString(provider: Web3Provider): string {
- let parsedProviderName = provider.constructor.name;
- if (provider.constructor.name === 'MetamaskInpageProvider') {
- parsedProviderName = 'METAMASK';
- } else if (provider.constructor.name === 'EthereumProvider') {
- parsedProviderName = 'MIST';
- } else if ((provider as any).isParity) {
- parsedProviderName = 'PARITY';
- }
- return parsedProviderName;
- },
async onPageLoadAsync(): Promise<void> {
if (document.readyState === 'complete') {
return; // Already loaded
@@ -287,4 +277,25 @@ export const utils = {
window.onload = () => resolve();
});
},
+ getProviderType(provider: Web3.Provider): Providers | string {
+ const constructorName = provider.constructor.name;
+ let parsedProviderName = constructorName;
+ switch (constructorName) {
+ case 'MetamaskInpageProvider':
+ parsedProviderName = Providers.Metamask;
+ break;
+
+ case 'EthereumProvider':
+ parsedProviderName = Providers.Mist;
+ break;
+
+ default:
+ parsedProviderName = constructorName;
+ break;
+ }
+ if ((provider as any).isParity) {
+ parsedProviderName = Providers.Parity;
+ }
+ return parsedProviderName;
+ },
};