Merge pull request #1335 from 0xProject/feature/instant/dropdown-analytics

[instant] Add analytics events for payment dropdown

3 files changed, 26 insertions, 2 deletions

diff --git a/packages/instant/src/components/payment_method_dropdown.tsx b/packages/instant/src/components/payment_method_dropdown.tsx
index 0226d1f01..872ac0831 100644
--- a/packages/instant/src/components/payment_method_dropdown.tsx
+++ b/packages/instant/src/components/payment_method_dropdown.tsx
@@ -3,6 +3,7 @@ import * as copy from 'copy-to-clipboard';
 import * as React from 'react';
 
 import { Network } from '../types';
+import { analytics } from '../util/analytics';
 import { envUtil } from '../util/env';
 import { etherscanUtil } from '../util/etherscan';
 import { format } from '../util/format';
@@ -20,7 +21,14 @@ export class PaymentMethodDropdown extends React.Component<PaymentMethodDropdown
         const { accountAddress, accountEthBalanceInWei } = this.props;
         const value = format.ethAddress(accountAddress);
         const label = format.ethBaseUnitAmount(accountEthBalanceInWei, 4, '') as string;
-        return <Dropdown value={value} label={label} items={this._getDropdownItemConfigs()} />;
+        return (
+            <Dropdown
+                value={value}
+                label={label}
+                items={this._getDropdownItemConfigs()}
+                onOpen={analytics.trackPaymentMethodDropdownOpened}
+            />
+        );
     }
     private readonly _getDropdownItemConfigs = (): DropdownItemConfig[] => {
         if (envUtil.isMobileOperatingSystem()) {
@@ -37,11 +45,15 @@ export class PaymentMethodDropdown extends React.Component<PaymentMethodDropdown
         return [viewOnEtherscan, copyAddressToClipboard];
     };
     private readonly _handleEtherscanClick = (): void => {
+        analytics.trackPaymentMethodOpenedEtherscan();
+
         const { accountAddress, network } = this.props;
         const etherscanUrl = etherscanUtil.getEtherScanEthAddressIfExists(accountAddress, network);
         window.open(etherscanUrl, '_blank');
     };
     private readonly _handleCopyToClipboardClick = (): void => {
+        analytics.trackPaymentMethodCopiedAddress();
+
         const { accountAddress } = this.props;
         copy(accountAddress);
     };
diff --git a/packages/instant/src/components/ui/dropdown.tsx b/packages/instant/src/components/ui/dropdown.tsx
index 3a23f456d..02e87d639 100644
--- a/packages/instant/src/components/ui/dropdown.tsx
+++ b/packages/instant/src/components/ui/dropdown.tsx
@@ -19,6 +19,7 @@ export interface DropdownProps {
     value: string;
     label?: string;
     items: DropdownItemConfig[];
+    onOpen?: () => void;
 }
 
 export interface DropdownState {
@@ -97,9 +98,14 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
         if (_.isEmpty(this.props.items)) {
             return;
         }
+        const isOpen = !this.state.isOpen;
         this.setState({
-            isOpen: !this.state.isOpen,
+            isOpen,
         });
+
+        if (isOpen && this.props.onOpen) {
+            this.props.onOpen();
+        }
     };
     private readonly _closeDropdown = (): void => {
         this.setState({
diff --git a/packages/instant/src/util/analytics.ts b/packages/instant/src/util/analytics.ts
index 2bb974254..5bc9bb385 100644
--- a/packages/instant/src/util/analytics.ts
+++ b/packages/instant/src/util/analytics.ts
@@ -23,6 +23,9 @@ enum EventNames {
     ACCOUNT_UNLOCK_REQUESTED = 'Account - Unlock Requested',
     ACCOUNT_UNLOCK_DENIED = 'Account - Unlock Denied',
     ACCOUNT_ADDRESS_CHANGED = 'Account - Address Changed',
+    PAYMENT_METHOD_DROPDOWN_OPENED = 'Payment Method - Dropdown Opened',
+    PAYMENT_METHOD_OPENED_ETHERSCAN = 'Payment Method - Opened Etherscan',
+    PAYMENT_METHOD_COPIED_ADDRESS = 'Payment Method - Copied Address',
     BUY_NOT_ENOUGH_ETH = 'Buy - Not Enough Eth',
     BUY_STARTED = 'Buy - Started',
     BUY_SIGNATURE_DENIED = 'Buy - Signature Denied',
@@ -136,6 +139,9 @@ export const analytics = {
     trackAccountUnlockDenied: trackingEventFnWithoutPayload(EventNames.ACCOUNT_UNLOCK_DENIED),
     trackAccountAddressChanged: (address: string) =>
         trackingEventFnWithPayload(EventNames.ACCOUNT_ADDRESS_CHANGED)({ address }),
+    trackPaymentMethodDropdownOpened: trackingEventFnWithoutPayload(EventNames.PAYMENT_METHOD_DROPDOWN_OPENED),
+    trackPaymentMethodOpenedEtherscan: trackingEventFnWithoutPayload(EventNames.PAYMENT_METHOD_OPENED_ETHERSCAN),
+    trackPaymentMethodCopiedAddress: trackingEventFnWithoutPayload(EventNames.PAYMENT_METHOD_COPIED_ADDRESS),
     trackBuyNotEnoughEth: (buyQuote: BuyQuote) =>
         trackingEventFnWithPayload(EventNames.BUY_NOT_ENOUGH_ETH)(buyQuoteEventProperties(buyQuote)),
     trackBuyStarted: (buyQuote: BuyQuote) =>