Add networkId to event label

4 files changed, 19 insertions, 7 deletions

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 9da3006a0..97f616be2 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -561,6 +561,8 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             });
             return;
         }
+        const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
+        const eventLabel = `${parsedOrder.taker.token.symbol}-${networkName}`;
         try {
             const orderFilledAmount: BigNumber = await this.props.blockchain.fillOrderAsync(
                 signedOrder,
@@ -569,7 +571,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             ReactGA.event({
                 category: 'Portal',
                 action: 'Fill Order Success',
-                label: parsedOrder.taker.token.symbol,
+                label: eventLabel,
                 value: parsedOrder.taker.amount,
             });
             // After fill completes, let's force fetch the token balances
@@ -588,7 +590,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             ReactGA.event({
                 category: 'Portal',
                 action: 'Fill Order Failure',
-                label: parsedOrder.taker.token.symbol,
+                label: eventLabel,
                 value: parsedOrder.taker.amount,
             });
             const errMsg = `${err}`;
@@ -658,6 +660,8 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             });
             return;
         }
+        const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
+        const eventLabel = `${parsedOrder.maker.token.symbol}-${networkName}`;
         try {
             await this.props.blockchain.cancelOrderAsync(signedOrder, availableTakerTokenAmount);
             this.setState({
@@ -669,7 +673,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             ReactGA.event({
                 category: 'Portal',
                 action: 'Cancel Order Success',
-                label: parsedOrder.maker.token.symbol,
+                label: eventLabel,
                 value: parsedOrder.maker.amount,
             });
             return;
@@ -684,7 +688,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             ReactGA.event({
                 category: 'Portal',
                 action: 'Cancel Order Failure',
-                label: parsedOrder.maker.token.symbol,
+                label: eventLabel,
                 value: parsedOrder.maker.amount,
             });
             globalErrMsg = 'Failed to cancel order, please refresh and try again';
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 2a62d4b9e..c9417f5a4 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -30,6 +30,7 @@ import {
     TokenByAddress,
 } from 'ts/types';
 import { colors } from 'ts/utils/colors';
+import { constants } from 'ts/utils/constants';
 import { errorReporter } from 'ts/utils/error_reporter';
 import { utils } from 'ts/utils/utils';
 
@@ -262,10 +263,12 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
         ) {
             const didSignSuccessfully = await this._signTransactionAsync();
             if (didSignSuccessfully) {
+                const networkName = constants.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: this.props.tokenByAddress[debitToken.address].symbol,
+                    label: eventLabel,
                     value: debitToken.amount.toNumber(),
                 });
                 this.setState({
diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
index a737222ca..a2e75dfed 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_toggle.tsx
@@ -6,12 +6,14 @@ 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 { utils } from 'ts/utils/utils';
 
 const DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS = new BigNumber(2).pow(256).minus(1);
 
 interface AllowanceToggleProps {
+    networkId: number;
     blockchain: Blockchain;
     dispatcher: Dispatcher;
     onErrorOccurred: (errType: BalanceErrs) => void;
@@ -74,12 +76,14 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow
         if (!this._isAllowanceSet()) {
             newAllowanceAmountInBaseUnits = DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS;
         }
+        const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
+        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: this.props.token.symbol,
+                label: eventLabel,
                 value: newAllowanceAmountInBaseUnits.toNumber(),
             });
             await this.props.refetchTokenStateAsync();
@@ -87,7 +91,7 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow
             ReactGA.event({
                 category: 'Portal',
                 action: 'Set Allowance Failure',
-                label: this.props.token.symbol,
+                label: eventLabel,
                 value: newAllowanceAmountInBaseUnits.toNumber(),
             });
             this.setState({
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index c6a9a46be..dfb62bbb3 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -392,6 +392,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                 </TableRowColumn>
                 <TableRowColumn>
                     <AllowanceToggle
+                        networkId={this.props.networkId}
                         blockchain={this.props.blockchain}
                         dispatcher={this.props.dispatcher}
                         token={token}