diff --git a/test/lib/render-helpers.js b/test/lib/render-helpers.js index 9fc7aad16..27bc73b7c 100644 --- a/test/lib/render-helpers.js +++ b/test/lib/render-helpers.js @@ -31,12 +31,14 @@ export function mountWithRouter(component, store = {}, pathname = '/') { router, t: (str) => str, metricsEvent: () => undefined, + trackEvent: () => undefined, store, }, childContextTypes: { router: PropTypes.object, t: PropTypes.func, metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, store: PropTypes.object, }, }); diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js index d8b356422..5f542d99d 100644 --- a/ui/components/app/account-menu/account-menu.component.js +++ b/ui/components/app/account-menu/account-menu.component.js @@ -68,7 +68,7 @@ AccountMenuItem.propTypes = { export default class AccountMenu extends Component { static contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, }; static propTypes = { @@ -196,11 +196,12 @@ export default class AccountMenu extends Component {
{ - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', + this.context.trackEvent({ + category: 'Navigation', + event: 'Switched Account', + properties: { action: 'Main Menu', - name: 'Switched Account', + legacy_event: true, }, }); showAccountDetail(identity.address); @@ -284,7 +285,7 @@ export default class AccountMenu extends Component { } render() { - const { t, metricsEvent } = this.context; + const { t, trackEvent } = this.context; const { shouldShowAccountsSearch, isAccountMenuOpen, @@ -338,11 +339,12 @@ export default class AccountMenu extends Component { { toggleAccountMenu(); - metricsEvent({ - eventOpts: { - category: 'Navigation', + trackEvent({ + category: 'Navigation', + event: 'Clicked Create Account', + properties: { action: 'Main Menu', - name: 'Clicked Create Account', + legacy_event: true, }, }); history.push(NEW_ACCOUNT_ROUTE); @@ -353,11 +355,12 @@ export default class AccountMenu extends Component { { toggleAccountMenu(); - metricsEvent({ - eventOpts: { - category: 'Navigation', + trackEvent({ + category: 'Navigation', + event: 'Clicked Import Account', + properties: { action: 'Main Menu', - name: 'Clicked Import Account', + legacy_event: true, }, }); history.push(IMPORT_ACCOUNT_ROUTE); @@ -373,11 +376,12 @@ export default class AccountMenu extends Component { { toggleAccountMenu(); - metricsEvent({ - eventOpts: { - category: 'Navigation', + trackEvent({ + category: 'Navigation', + event: 'Clicked Connect Hardware', + properties: { action: 'Main Menu', - name: 'Clicked Connect Hardware', + legacy_event: true, }, }); if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) { @@ -412,11 +416,12 @@ export default class AccountMenu extends Component { onClick={() => { toggleAccountMenu(); history.push(SETTINGS_ROUTE); - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', + this.context.trackEvent({ + category: 'Navigation', + event: 'Opened Settings', + properties: { action: 'Main Menu', - name: 'Opened Settings', + legacy_event: true, }, }); }} diff --git a/ui/components/app/app-header/app-header.component.js b/ui/components/app/app-header/app-header.component.js index 0b50e3333..91ef1fc46 100644 --- a/ui/components/app/app-header/app-header.component.js +++ b/ui/components/app/app-header/app-header.component.js @@ -24,7 +24,7 @@ export default class AppHeader extends PureComponent { static contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, }; handleNetworkIndicatorClick(event) { @@ -44,11 +44,12 @@ export default class AppHeader extends PureComponent { } if (networkDropdownOpen === false) { - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', + this.context.trackEvent({ + category: 'Navigation', + event: 'Opened Network Menu', + properties: { action: 'Home', - name: 'Opened Network Menu', + legacy_event: true, }, }); showNetworkDropdown(); @@ -75,11 +76,12 @@ export default class AppHeader extends PureComponent { onClick={() => { if (!disabled) { !isAccountMenuOpen && - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', + this.context.trackEvent({ + category: 'Navigation', + event: 'Opened Main Menu', + properties: { action: 'Home', - name: 'Opened Main Menu', + legacy_event: true, }, }); toggleAccountMenu(); diff --git a/ui/components/app/app-header/app-header.test.js b/ui/components/app/app-header/app-header.test.js index 4417ebd58..032bf9ae8 100644 --- a/ui/components/app/app-header/app-header.test.js +++ b/ui/components/app/app-header/app-header.test.js @@ -29,7 +29,7 @@ describe('App Header', () => { wrapper = shallow(, { context: { t: (str) => str, - metricsEvent: () => undefined, + trackEvent: () => undefined, }, }); }); diff --git a/ui/components/app/create-new-vault/create-new-vault.js b/ui/components/app/create-new-vault/create-new-vault.js index 9fef846f4..7d442ecd2 100644 --- a/ui/components/app/create-new-vault/create-new-vault.js +++ b/ui/components/app/create-new-vault/create-new-vault.js @@ -1,7 +1,7 @@ import React, { useCallback, useContext, useState } from 'react'; import PropTypes from 'prop-types'; import { useI18nContext } from '../../../hooks/useI18nContext'; -import { MetaMetricsContext } from '../../../contexts/metametrics'; +import { MetaMetricsContext } from '../../../contexts/metametrics.new'; import TextField from '../../ui/text-field'; import Button from '../../ui/button'; import CheckBox from '../../ui/check-box'; @@ -22,7 +22,7 @@ export default function CreateNewVault({ const [termsChecked, setTermsChecked] = useState(false); const t = useI18nContext(); - const metricsEvent = useContext(MetaMetricsContext); + const trackEvent = useContext(MetaMetricsContext); const onPasswordChange = useCallback( (newPassword) => { @@ -82,16 +82,17 @@ export default function CreateNewVault({ ); const toggleTermsCheck = useCallback(() => { - metricsEvent({ - eventOpts: { - category: 'Onboarding', + trackEvent({ + category: 'Onboarding', + event: 'Check ToS', + properties: { action: 'Import Seed Phrase', - name: 'Check ToS', + legacy_event: true, }, }); setTermsChecked((currentTermsChecked) => !currentTermsChecked); - }, [metricsEvent]); + }, [trackEvent]); const termsOfUse = t('acceptTermsOfUse', [ cancelAndClose()} onSubmit={() => { if (isSpeedUp) { - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', + this.context.trackEvent({ + category: 'Navigation', + event: 'Saved "Speed Up"', + properties: { action: 'Activity Log', - name: 'Saved "Speed Up"', + legacy_event: true, }, }); } diff --git a/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js b/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js index 0cfae77ee..90f707f75 100644 --- a/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js +++ b/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js @@ -13,7 +13,7 @@ import LogoDepositEth from '../../../ui/logo/logo-deposit-eth'; export default class DepositEtherModal extends Component { static contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func.isRequired, + trackEvent: PropTypes.func.isRequired, }; static propTypes = { @@ -136,11 +136,12 @@ export default class DepositEtherModal extends Component { text: t('buyCryptoWithTransakDescription', [symbol]), buttonLabel: t('continueToTransak'), onButtonClick: () => { - this.context.metricsEvent({ - eventOpts: { - category: 'Accounts', + this.context.trackEvent({ + category: 'Accounts', + event: 'Click buy Ether via Transak', + properties: { action: 'Deposit Ether', - name: 'Click buy Ether via Transak', + legacy_event: true, }, }); toTransak(address, chainId); diff --git a/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js b/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js index 847a57bf6..b80cc894c 100644 --- a/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js +++ b/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js @@ -10,12 +10,12 @@ export default class MetaMetricsOptInModal extends Component { }; static contextTypes = { - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, t: PropTypes.func, }; render() { - const { metricsEvent, t } = this.context; + const { trackEvent, t } = this.context; const { setParticipateInMetaMetrics, hideModal } = this.props; return ( @@ -108,16 +108,17 @@ export default class MetaMetricsOptInModal extends Component { { setParticipateInMetaMetrics(false).then(() => { - metricsEvent( + trackEvent( { - eventOpts: { - category: 'Onboarding', + category: 'Onboarding', + event: 'Metrics Opt Out', + properties: { action: 'Metrics Option', - name: 'Metrics Opt Out', + legacy_event: true, }, - isOptIn: true, }, { + isOptIn: true, excludeMetaMetricsId: true, }, ); @@ -128,14 +129,19 @@ export default class MetaMetricsOptInModal extends Component { hideCancel={false} onSubmit={() => { setParticipateInMetaMetrics(true).then(() => { - metricsEvent({ - eventOpts: { + trackEvent( + { category: 'Onboarding', - action: 'Metrics Option', - name: 'Metrics Opt In', + event: 'Metrics Opt In', + properties: { + action: 'Metrics Option', + legacy_event: true, + }, }, - isOptIn: true, - }); + { + isOptIn: true, + }, + ); hideModal(); }); }} diff --git a/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.test.js b/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.test.js index ff6650652..3af10b36b 100644 --- a/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.test.js +++ b/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.test.js @@ -16,7 +16,7 @@ describe('MetaMetrics Opt In', () => { beforeEach(() => { wrapper = mount(, { context: { - metricsEvent: () => undefined, + trackEvent: () => undefined, t: (key) => messages[key].message, }, }); diff --git a/ui/components/app/permission-page-container/permission-page-container.component.js b/ui/components/app/permission-page-container/permission-page-container.component.js index f4d7d2350..c4ee6cde1 100644 --- a/ui/components/app/permission-page-container/permission-page-container.component.js +++ b/ui/components/app/permission-page-container/permission-page-container.component.js @@ -31,7 +31,7 @@ export default class PermissionPageContainer extends Component { static contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, }; state = { @@ -63,11 +63,12 @@ export default class PermissionPageContainer extends Component { } componentDidMount() { - this.context.metricsEvent({ - eventOpts: { - category: 'Auth', + this.context.trackEvent({ + category: 'Auth', + event: 'Tab Opened', + properties: { action: 'Connect', - name: 'Tab Opened', + legacy_event: true, }, }); } diff --git a/ui/components/app/signature-request-original/signature-request-original.component.js b/ui/components/app/signature-request-original/signature-request-original.component.js index 8b83e77e0..1c8959f18 100644 --- a/ui/components/app/signature-request-original/signature-request-original.component.js +++ b/ui/components/app/signature-request-original/signature-request-original.component.js @@ -16,7 +16,7 @@ import SiteIcon from '../../ui/site-icon'; export default class SignatureRequestOriginal extends Component { static contextTypes = { t: PropTypes.func.isRequired, - metricsEvent: PropTypes.func.isRequired, + trackEvent: PropTypes.func.isRequired, }; static propTypes = { @@ -262,7 +262,7 @@ export default class SignatureRequestOriginal extends Component { txData: { type }, hardwareWalletRequiresConnection, } = this.props; - const { metricsEvent, t } = this.context; + const { trackEvent, t } = this.context; return (
@@ -272,13 +272,12 @@ export default class SignatureRequestOriginal extends Component { className="request-signature__footer__cancel-button" onClick={async (event) => { await cancel(event); - metricsEvent({ - eventOpts: { - category: 'Transactions', + trackEvent({ + category: 'Transactions', + event: 'Cancel', + properties: { action: 'Sign Request', - name: 'Cancel', - }, - customVariables: { + legacy_event: true, type, }, }); @@ -296,13 +295,12 @@ export default class SignatureRequestOriginal extends Component { disabled={hardwareWalletRequiresConnection} onClick={async (event) => { await sign(event); - metricsEvent({ - eventOpts: { - category: 'Transactions', + trackEvent({ + category: 'Transactions', + event: 'Confirm', + properties: { action: 'Sign Request', - name: 'Confirm', - }, - customVariables: { + legacy_event: true, type, }, }); diff --git a/ui/components/app/signature-request/signature-request.component.js b/ui/components/app/signature-request/signature-request.component.js index 164221e16..32a501880 100644 --- a/ui/components/app/signature-request/signature-request.component.js +++ b/ui/components/app/signature-request/signature-request.component.js @@ -41,7 +41,7 @@ export default class SignatureRequest extends PureComponent { static contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, }; state = { @@ -73,17 +73,16 @@ export default class SignatureRequest extends PureComponent { } = this.props; const { address: fromAddress } = fromAccount; const { message, domain = {}, primaryType, types } = JSON.parse(data); - const { metricsEvent } = this.context; + const { trackEvent } = this.context; const onSign = (event) => { sign(event); - metricsEvent({ - eventOpts: { - category: 'Transactions', + trackEvent({ + category: 'Transactions', + event: 'Confirm', + properties: { action: 'Sign Request', - name: 'Confirm', - }, - customVariables: { + legacy_event: true, type, version, }, @@ -92,13 +91,12 @@ export default class SignatureRequest extends PureComponent { const onCancel = (event) => { cancel(event); - metricsEvent({ - eventOpts: { - category: 'Transactions', + trackEvent({ + category: 'Transactions', + event: 'Cancel', + properties: { action: 'Sign Request', - name: 'Cancel', - }, - customVariables: { + legacy_event: true, type, version, }, diff --git a/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js b/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js index 670be87fd..ed0a49113 100644 --- a/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js +++ b/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js @@ -19,7 +19,6 @@ import TransactionDecoding from '../transaction-decoding'; export default class TransactionListItemDetails extends PureComponent { static contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func, trackEvent: PropTypes.func, }; @@ -69,6 +68,7 @@ export default class TransactionListItemDetails extends PureComponent { link_type: 'Transaction Block Explorer', action: 'Transaction Details', block_explorer_domain: getURLHostName(blockExplorerLink), + legacy_event: true, }, }); @@ -94,11 +94,12 @@ export default class TransactionListItemDetails extends PureComponent { const { primaryTransaction: transaction } = transactionGroup; const { hash } = transaction; - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', + this.context.trackEvent({ + category: 'Navigation', + event: 'Copied Transaction ID', + properties: { action: 'Activity Log', - name: 'Copied Transaction ID', + legacy_event: true, }, }); @@ -225,20 +226,22 @@ export default class TransactionListItemDetails extends PureComponent { senderName={senderNickname} senderAddress={senderAddress} onRecipientClick={() => { - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', + this.context.trackEvent({ + category: 'Navigation', + event: 'Copied "To" Address', + properties: { action: 'Activity Log', - name: 'Copied "To" Address', + legacy_event: true, }, }); }} onSenderClick={() => { - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', + this.context.trackEvent({ + category: 'Navigation', + event: 'Copied "From" Address', + properties: { action: 'Activity Log', - name: 'Copied "From" Address', + legacy_event: true, }, }); }} diff --git a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js index ccbc85b8b..917af3af9 100644 --- a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js +++ b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js @@ -15,7 +15,7 @@ import { conversionUtil } from '../../../shared/modules/conversion.utils'; export default class ConfirmDecryptMessage extends Component { static contextTypes = { t: PropTypes.func.isRequired, - metricsEvent: PropTypes.func.isRequired, + trackEvent: PropTypes.func.isRequired, }; static propTypes = { @@ -44,11 +44,12 @@ export default class ConfirmDecryptMessage extends Component { copyMessage = () => { copyToClipboard(this.state.rawMessage); - this.context.metricsEvent({ - eventOpts: { - category: 'Messages', + this.context.trackEvent({ + category: 'Messages', + event: 'Copy', + properties: { action: 'Decrypt Message Copy', - name: 'Copy', + legacy_event: true, }, }); this.setState({ hasCopied: true }); @@ -251,7 +252,7 @@ export default class ConfirmDecryptMessage extends Component { mostRecentOverviewPage, txData, } = this.props; - const { metricsEvent, t } = this.context; + const { trackEvent, t } = this.context; return (
@@ -261,11 +262,12 @@ export default class ConfirmDecryptMessage extends Component { className="request-decrypt-message__footer__cancel-button" onClick={async (event) => { await cancelDecryptMessage(txData, event); - metricsEvent({ - eventOpts: { - category: 'Messages', + trackEvent({ + category: 'Messages', + event: 'Cancel', + properties: { action: 'Decrypt Message Request', - name: 'Cancel', + legacy_event: true, }, }); clearConfirmTransaction(); @@ -280,11 +282,12 @@ export default class ConfirmDecryptMessage extends Component { className="request-decrypt-message__footer__sign-button" onClick={async (event) => { await decryptMessage(txData, event); - metricsEvent({ - eventOpts: { - category: 'Messages', + trackEvent({ + category: 'Messages', + event: 'Confirm', + properties: { action: 'Decrypt Message Request', - name: 'Confirm', + legacy_event: true, }, }); clearConfirmTransaction(); diff --git a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js index 3ba59b5ab..66447378f 100644 --- a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js +++ b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js @@ -10,7 +10,7 @@ import { conversionUtil } from '../../../shared/modules/conversion.utils'; export default class ConfirmEncryptionPublicKey extends Component { static contextTypes = { t: PropTypes.func.isRequired, - metricsEvent: PropTypes.func.isRequired, + trackEvent: PropTypes.func.isRequired, }; static propTypes = { @@ -154,7 +154,7 @@ export default class ConfirmEncryptionPublicKey extends Component { mostRecentOverviewPage, txData, } = this.props; - const { t, metricsEvent } = this.context; + const { t, trackEvent } = this.context; return (
@@ -164,11 +164,12 @@ export default class ConfirmEncryptionPublicKey extends Component { className="request-encryption-public-key__footer__cancel-button" onClick={async (event) => { await cancelEncryptionPublicKey(txData, event); - metricsEvent({ - eventOpts: { - category: 'Messages', + trackEvent({ + category: 'Messages', + event: 'Cancel', + properties: { action: 'Encryption public key Request', - name: 'Cancel', + legacy_event: true, }, }); clearConfirmTransaction(); @@ -183,11 +184,12 @@ export default class ConfirmEncryptionPublicKey extends Component { className="request-encryption-public-key__footer__sign-button" onClick={async (event) => { await encryptionPublicKey(txData, event); - this.context.metricsEvent({ - eventOpts: { - category: 'Messages', + this.context.trackEvent({ + category: 'Messages', + event: 'Confirm', + properties: { action: 'Encryption public key Request', - name: 'Confirm', + legacy_event: true, }, }); clearConfirmTransaction(); diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js index 29b5e987a..a46c72f2f 100644 --- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -70,7 +70,7 @@ const renderHeartBeatIfNotInTest = () => export default class ConfirmTransactionBase extends Component { static contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, }; static propTypes = { @@ -277,13 +277,12 @@ export default class ConfirmTransactionBase extends Component { methodData = {}, } = this.props; - this.context.metricsEvent({ - eventOpts: { - category: 'Transactions', + this.context.trackEvent({ + category: 'Transactions', + event: 'User clicks "Edit" on gas', + properties: { action: 'Confirm Screen', - name: 'User clicks "Edit" on gas', - }, - customVariables: { + legacy_event: true, recipientKnown: null, functionType: actionKey || @@ -734,13 +733,12 @@ export default class ConfirmTransactionBase extends Component { methodData = {}, } = this.props; - this.context.metricsEvent({ - eventOpts: { - category: 'Transactions', + this.context.trackEvent({ + category: 'Transactions', + event: 'Edit Transaction', + properties: { action: 'Confirm Screen', - name: 'Edit Transaction', - }, - customVariables: { + legacy_event: true, recipientKnown: null, functionType: actionKey || @@ -941,14 +939,13 @@ export default class ConfirmTransactionBase extends Component { getNextNonce, tryReverseResolveAddress, } = this.props; - const { metricsEvent } = this.context; - metricsEvent({ - eventOpts: { - category: 'Transactions', + const { trackEvent } = this.context; + trackEvent({ + category: 'Transactions', + event: 'Confirm: Started', + properties: { action: 'Confirm Screen', - name: 'Confirm: Started', - }, - customVariables: { + legacy_event: true, origin, }, }); diff --git a/ui/pages/create-account/connect-hardware/index.js b/ui/pages/create-account/connect-hardware/index.js index 0e784c7c5..decf331ac 100644 --- a/ui/pages/create-account/connect-hardware/index.js +++ b/ui/pages/create-account/connect-hardware/index.js @@ -253,23 +253,23 @@ class ConnectHardwareForm extends Component { description, ) .then((_) => { - this.context.metricsEvent({ - eventOpts: { - category: 'Accounts', + this.context.trackEvent({ + category: 'Accounts', + event: `Connected Account with: ${device}`, + properties: { action: 'Connected Hardware Wallet', - name: `Connected Account with: ${device}`, + legacy_event: true, }, }); history.push(mostRecentOverviewPage); }) .catch((e) => { - this.context.metricsEvent({ - eventOpts: { - category: 'Accounts', + this.context.trackEvent({ + category: 'Accounts', + event: 'Error connecting hardware wallet', + properties: { action: 'Connected Hardware Wallet', - name: 'Error connecting hardware wallet', - }, - customVariables: { + legacy_event: true, error: e.message, }, }); @@ -414,7 +414,7 @@ const mapDispatchToProps = (dispatch) => { ConnectHardwareForm.contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, }; export default connect( diff --git a/ui/pages/create-account/import-account/json.js b/ui/pages/create-account/import-account/json.js index fbb237c4a..217e682ae 100644 --- a/ui/pages/create-account/import-account/json.js +++ b/ui/pages/create-account/import-account/json.js @@ -116,21 +116,23 @@ class JsonImportSubview extends Component { .then(({ selectedAddress }) => { if (selectedAddress) { history.push(mostRecentOverviewPage); - this.context.metricsEvent({ - eventOpts: { - category: 'Accounts', + this.context.trackEvent({ + category: 'Accounts', + event: 'Imported Account with JSON', + properties: { action: 'Import Account', - name: 'Imported Account with JSON', + legacy_event: true, }, }); displayWarning(null); } else { displayWarning(t('importAccountError')); - this.context.metricsEvent({ - eventOpts: { - category: 'Accounts', + this.context.trackEvent({ + category: 'Accounts', + event: 'Error importing JSON', + properties: { action: 'Import Account', - name: 'Error importing JSON', + legacy_event: true, }, }); setSelectedAddress(firstAddress); @@ -179,7 +181,7 @@ const mapDispatchToProps = (dispatch) => { JsonImportSubview.contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, }; export default compose( diff --git a/ui/pages/create-account/import-account/private-key.js b/ui/pages/create-account/import-account/private-key.js index cc509b29a..99d0e3b48 100644 --- a/ui/pages/create-account/import-account/private-key.js +++ b/ui/pages/create-account/import-account/private-key.js @@ -11,7 +11,7 @@ import { getMostRecentOverviewPage } from '../../../ducks/history/history'; class PrivateKeyImportView extends Component { static contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, }; static propTypes = { @@ -43,22 +43,24 @@ class PrivateKeyImportView extends Component { importNewAccount('Private Key', [privateKey]) .then(({ selectedAddress }) => { if (selectedAddress) { - this.context.metricsEvent({ - eventOpts: { - category: 'Accounts', + this.context.trackEvent({ + category: 'Accounts', + event: 'Imported Account with Private Key', + properties: { action: 'Import Account', - name: 'Imported Account with Private Key', + legacy_event: true, }, }); history.push(mostRecentOverviewPage); displayWarning(null); } else { displayWarning(t('importAccountError')); - this.context.metricsEvent({ - eventOpts: { - category: 'Accounts', + this.context.trackEvent({ + category: 'Accounts', + event: 'Error importing with Private Key', + properties: { action: 'Import Account', - name: 'Error importing with Private Key', + legacy_event: true, }, }); setSelectedAddress(firstAddress); diff --git a/ui/pages/create-account/new-account.component.js b/ui/pages/create-account/new-account.component.js index 3908bf40b..336d577eb 100644 --- a/ui/pages/create-account/new-account.component.js +++ b/ui/pages/create-account/new-account.component.js @@ -27,23 +27,23 @@ export default class NewAccountCreateForm extends Component { const createClick = (_) => { createAccount(newAccountName || defaultAccountName) .then(() => { - this.context.metricsEvent({ - eventOpts: { - category: 'Accounts', + this.context.trackEvent({ + category: 'Accounts', + event: 'Added New Account', + properties: { action: 'Add New Account', - name: 'Added New Account', + legacy_event: true, }, }); history.push(mostRecentOverviewPage); }) .catch((e) => { - this.context.metricsEvent({ - eventOpts: { - category: 'Accounts', + this.context.trackEvent({ + category: 'Accounts', + event: 'Error', + properties: { action: 'Add New Account', - name: 'Error', - }, - customVariables: { + legacy_event: true, errorMessage: e.message, }, }); @@ -120,5 +120,5 @@ NewAccountCreateForm.propTypes = { NewAccountCreateForm.contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, }; diff --git a/ui/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js index 42246775c..2d611159c 100644 --- a/ui/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js +++ b/ui/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js @@ -9,7 +9,7 @@ import CreateNewVault from '../../../../components/app/create-new-vault'; export default class ImportWithSeedPhrase extends PureComponent { static contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, }; static propTypes = { @@ -21,13 +21,12 @@ export default class ImportWithSeedPhrase extends PureComponent { UNSAFE_componentWillMount() { this._onBeforeUnload = () => - this.context.metricsEvent({ - eventOpts: { - category: 'Onboarding', + this.context.trackEvent({ + category: 'Onboarding', + event: 'Close window on import screen', + properties: { action: 'Import Seed Phrase', - name: 'Close window on import screen', - }, - customVariables: { + legacy_event: true, errorLabel: 'Seed Phrase Error', errorMessage: this.state.seedPhraseError, }, @@ -48,11 +47,12 @@ export default class ImportWithSeedPhrase extends PureComponent { } = this.props; await onSubmit(password, seedPhrase); - this.context.metricsEvent({ - eventOpts: { - category: 'Onboarding', + this.context.trackEvent({ + category: 'Onboarding', + event: 'Import Complete', + properties: { action: 'Import Seed Phrase', - name: 'Import Complete', + legacy_event: true, }, }); @@ -70,11 +70,12 @@ export default class ImportWithSeedPhrase extends PureComponent { { e.preventDefault(); - this.context.metricsEvent({ - eventOpts: { - category: 'Onboarding', + this.context.trackEvent({ + category: 'Onboarding', + event: 'Go Back from Onboarding Import', + properties: { action: 'Import Seed Phrase', - name: 'Go Back from Onboarding Import', + legacy_event: true, }, }); this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE); diff --git a/ui/pages/first-time-flow/create-password/new-account/new-account.component.js b/ui/pages/first-time-flow/create-password/new-account/new-account.component.js index a392bc295..cc904a92e 100644 --- a/ui/pages/first-time-flow/create-password/new-account/new-account.component.js +++ b/ui/pages/first-time-flow/create-password/new-account/new-account.component.js @@ -9,7 +9,7 @@ import TextField from '../../../../components/ui/text-field'; export default class NewAccount extends PureComponent { static contextTypes = { - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, t: PropTypes.func, }; @@ -100,11 +100,12 @@ export default class NewAccount extends PureComponent { try { await onSubmit(password); - this.context.metricsEvent({ - eventOpts: { - category: 'Onboarding', + this.context.trackEvent({ + category: 'Onboarding', + event: 'Submit Password', + properties: { action: 'Create Password', - name: 'Submit Password', + legacy_event: true, }, }); @@ -115,11 +116,12 @@ export default class NewAccount extends PureComponent { }; toggleTermsCheck = () => { - this.context.metricsEvent({ - eventOpts: { - category: 'Onboarding', + this.context.trackEvent({ + category: 'Onboarding', + event: 'Check ToS', + properties: { action: 'Create Password', - name: 'Check ToS', + legacy_event: true, }, }); @@ -150,11 +152,12 @@ export default class NewAccount extends PureComponent { { e.preventDefault(); - this.context.metricsEvent({ - eventOpts: { - category: 'Onboarding', + this.context.trackEvent({ + category: 'Onboarding', + event: 'Go Back from Onboarding Create', + properties: { action: 'Create Password', - name: 'Go Back from Onboarding Create', + legacy_event: true, }, }); this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE); diff --git a/ui/pages/first-time-flow/end-of-flow/end-of-flow.component.js b/ui/pages/first-time-flow/end-of-flow/end-of-flow.component.js index e35e5af37..25beb844d 100644 --- a/ui/pages/first-time-flow/end-of-flow/end-of-flow.component.js +++ b/ui/pages/first-time-flow/end-of-flow/end-of-flow.component.js @@ -10,7 +10,7 @@ import { returnToOnboardingInitiator } from '../onboarding-initiator-util'; export default class EndOfFlowScreen extends PureComponent { static contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, }; static propTypes = { @@ -34,11 +34,12 @@ export default class EndOfFlowScreen extends PureComponent { async _onOnboardingComplete() { const { setCompletedOnboarding, completionMetaMetricsName } = this.props; await setCompletedOnboarding(); - this.context.metricsEvent({ - eventOpts: { - category: 'Onboarding', + this.context.trackEvent({ + category: 'Onboarding', + event: completionMetaMetricsName, + properties: { action: 'Onboarding Complete', - name: completionMetaMetricsName, + legacy_event: true, }, }); } diff --git a/ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js b/ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js index 883f086d5..cee0342ce 100644 --- a/ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js +++ b/ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js @@ -13,12 +13,12 @@ export default class MetaMetricsOptIn extends Component { }; static contextTypes = { - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, t: PropTypes.func, }; render() { - const { metricsEvent, t } = this.context; + const { trackEvent, t } = this.context; const { nextRoute, history, @@ -109,15 +109,20 @@ export default class MetaMetricsOptIn extends Component { participateInMetaMetrics === null || participateInMetaMetrics === true ) { - await metricsEvent({ - eventOpts: { + await trackEvent( + { category: 'Onboarding', - action: 'Metrics Option', - name: 'Metrics Opt Out', + event: 'Metrics Opt Out', + properties: { + action: 'Metrics Option', + legacy_event: true, + }, }, - isOptIn: true, - flushImmediately: true, - }); + { + isOptIn: true, + flushImmediately: true, + }, + ); } } finally { history.push(nextRoute); @@ -136,28 +141,38 @@ export default class MetaMetricsOptIn extends Component { participateInMetaMetrics === false ) { metrics.push( - metricsEvent({ - eventOpts: { + trackEvent( + { category: 'Onboarding', - action: 'Metrics Option', - name: 'Metrics Opt In', + event: 'Metrics Opt In', + properties: { + action: 'Metrics Option', + legacy_event: true, + }, }, - isOptIn: true, - flushImmediately: true, - }), + { + isOptIn: true, + flushImmediately: true, + }, + ), ); } metrics.push( - metricsEvent({ - eventOpts: { + trackEvent( + { category: 'Onboarding', - action: 'Import or Create', - name: firstTimeSelectionMetaMetricsName, + event: firstTimeSelectionMetaMetricsName, + properties: { + action: 'Import or Create', + legacy_event: true, + }, + }, + { + isOptIn: true, + metaMetricsId, + flushImmediately: true, }, - isOptIn: true, - metaMetricsId, - flushImmediately: true, - }), + ), ); await Promise.all(metrics); } finally { diff --git a/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase-component.test.js b/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase-component.test.js index 852fce269..b47bb9532 100644 --- a/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase-component.test.js +++ b/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase-component.test.js @@ -24,7 +24,7 @@ describe('ConfirmSeedPhrase Component', () => { }); it('should add/remove selected on click', () => { - const metricsEventSpy = sinon.spy(); + const trackEventSpy = sinon.spy(); const replaceSpy = sinon.spy(); const component = shallowRender( { @@ -32,7 +32,7 @@ describe('ConfirmSeedPhrase Component', () => { history: { replace: replaceSpy }, }, { - metricsEvent: metricsEventSpy, + trackEvent: trackEventSpy, }, ); @@ -57,7 +57,7 @@ describe('ConfirmSeedPhrase Component', () => { }); it('should render correctly on hover', () => { - const metricsEventSpy = sinon.spy(); + const trackEventSpy = sinon.spy(); const replaceSpy = sinon.spy(); const component = shallowRender( { @@ -65,7 +65,7 @@ describe('ConfirmSeedPhrase Component', () => { history: { replace: replaceSpy }, }, { - metricsEvent: metricsEventSpy, + trackEvent: trackEventSpy, }, ); @@ -92,7 +92,7 @@ describe('ConfirmSeedPhrase Component', () => { }); it('should insert seed in place on drop', () => { - const metricsEventSpy = sinon.spy(); + const trackEventSpy = sinon.spy(); const replaceSpy = sinon.spy(); const component = shallowRender( { @@ -100,7 +100,7 @@ describe('ConfirmSeedPhrase Component', () => { history: { replace: replaceSpy }, }, { - metricsEvent: metricsEventSpy, + trackEvent: trackEventSpy, }, ); @@ -137,7 +137,7 @@ describe('ConfirmSeedPhrase Component', () => { '狗', '豬', ]; - const metricsEventSpy = sinon.spy(); + const trackEventSpy = sinon.spy(); const replaceSpy = sinon.spy(); const initialize3BoxSpy = sinon.spy(); const component = shallowRender( @@ -148,7 +148,7 @@ describe('ConfirmSeedPhrase Component', () => { initializeThreeBox: initialize3BoxSpy, }, { - metricsEvent: metricsEventSpy, + trackEvent: trackEventSpy, }, ); @@ -166,11 +166,12 @@ describe('ConfirmSeedPhrase Component', () => { await new Promise((resolve) => setTimeout(resolve, 100)); - expect(metricsEventSpy.args[0][0]).toStrictEqual({ - eventOpts: { - category: 'Onboarding', + expect(trackEventSpy.args[0][0]).toStrictEqual({ + category: 'Onboarding', + event: 'Verify Complete', + properties: { action: 'Seed Phrase Setup', - name: 'Verify Complete', + legacy_event: true, }, }); expect(initialize3BoxSpy.calledOnce).toStrictEqual(true); diff --git a/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js index 72f1d0b45..2b569eb38 100644 --- a/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js +++ b/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js @@ -13,7 +13,7 @@ const EMPTY_SEEDS = Array(12).fill(null); export default class ConfirmSeedPhrase extends PureComponent { static contextTypes = { - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, t: PropTypes.func, }; @@ -77,11 +77,12 @@ export default class ConfirmSeedPhrase extends PureComponent { } try { - this.context.metricsEvent({ - eventOpts: { - category: 'Onboarding', + this.context.trackEvent({ + category: 'Onboarding', + event: 'Verify Complete', + properties: { action: 'Seed Phrase Setup', - name: 'Verify Complete', + legacy_event: true, }, }); diff --git a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js index 31a2f80ff..1745a2527 100644 --- a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js +++ b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js @@ -16,7 +16,7 @@ import { returnToOnboardingInitiator } from '../../onboarding-initiator-util'; export default class RevealSeedPhrase extends PureComponent { static contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, }; static propTypes = { @@ -42,11 +42,12 @@ export default class RevealSeedPhrase extends PureComponent { const { isShowingSeedPhrase } = this.state; const { history } = this.props; - this.context.metricsEvent({ - eventOpts: { - category: 'Onboarding', + this.context.trackEvent({ + category: 'Onboarding', + event: 'Advance to Verify', + properties: { action: 'Seed Phrase Setup', - name: 'Advance to Verify', + legacy_event: true, }, }); @@ -65,11 +66,12 @@ export default class RevealSeedPhrase extends PureComponent { onboardingInitiator, } = this.props; - this.context.metricsEvent({ - eventOpts: { - category: 'Onboarding', + this.context.trackEvent({ + category: 'Onboarding', + event: 'Remind me later', + properties: { action: 'Seed Phrase Setup', - name: 'Remind me later', + legacy_event: true, }, }); @@ -102,11 +104,12 @@ export default class RevealSeedPhrase extends PureComponent {
{ - this.context.metricsEvent({ - eventOpts: { - category: 'Onboarding', + this.context.trackEvent({ + category: 'Onboarding', + event: 'Revealed Words', + properties: { action: 'Seed Phrase Setup', - name: 'Revealed Words', + legacy_event: true, }, }); this.setState({ isShowingSeedPhrase: true }); diff --git a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.test.js b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.test.js index 262b64f46..7bc9f4355 100644 --- a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.test.js +++ b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.test.js @@ -22,7 +22,7 @@ describe('Reveal Secret Recovery Phrase', () => { wrapper = mount(, { context: { t: (str) => str, - metricsEvent: () => undefined, + trackEvent: () => undefined, }, }); }); diff --git a/ui/pages/keychains/restore-vault.js b/ui/pages/keychains/restore-vault.js index 52f216818..87d6635e9 100644 --- a/ui/pages/keychains/restore-vault.js +++ b/ui/pages/keychains/restore-vault.js @@ -17,7 +17,7 @@ import { TYPOGRAPHY, COLORS } from '../../helpers/constants/design-system'; class RestoreVaultPage extends Component { static contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, }; static propTypes = { @@ -40,11 +40,12 @@ class RestoreVaultPage extends Component { leaveImportSeedScreenState(); await createNewVaultAndRestore(password, seedPhrase); - this.context.metricsEvent({ - eventOpts: { - category: 'Retention', + this.context.trackEvent({ + category: 'Retention', + event: 'onboardingRestoredVault', + properties: { action: 'userEntersSeedPhrase', - name: 'onboardingRestoredVault', + legacy_event: true, }, }); initializeThreeBox(); diff --git a/ui/pages/onboarding-flow/metametrics/metametrics.js b/ui/pages/onboarding-flow/metametrics/metametrics.js index 2577b66f0..e9d43ee4f 100644 --- a/ui/pages/onboarding-flow/metametrics/metametrics.js +++ b/ui/pages/onboarding-flow/metametrics/metametrics.js @@ -17,7 +17,7 @@ import { getParticipateInMetaMetrics, } from '../../../selectors'; -import { MetaMetricsContext } from '../../../contexts/metametrics'; +import { MetaMetricsContext } from '../../../contexts/metametrics.new'; const firstTimeFlowTypeNameMap = { create: 'Selected Create New Wallet', @@ -36,33 +36,43 @@ export default function OnboardingMetametrics() { const firstTimeSelectionMetaMetricsName = firstTimeFlowTypeNameMap[firstTimeFlowType]; - const metricsEvent = useContext(MetaMetricsContext); + const trackEvent = useContext(MetaMetricsContext); const onConfirm = async () => { const [, metaMetricsId] = await dispatch(setParticipateInMetaMetrics(true)); try { if (!participateInMetaMetrics) { - metricsEvent({ - eventOpts: { + trackEvent( + { category: 'Onboarding', - action: 'Metrics Option', - name: 'Metrics Opt In', + event: 'Metrics Opt In', + properties: { + action: 'Metrics Option', + legacy_event: true, + }, }, - isOptIn: true, - flushImmediately: true, - }); + { + isOptIn: true, + flushImmediately: true, + }, + ); } - metricsEvent({ - eventOpts: { + trackEvent( + { category: 'Onboarding', - action: 'Import or Create', - name: firstTimeSelectionMetaMetricsName, + event: firstTimeSelectionMetaMetricsName, + properties: { + action: 'Import or Create', + legacy_event: true, + }, + }, + { + isOptIn: true, + metaMetricsId, + flushImmediately: true, }, - isOptIn: true, - metaMetricsId, - flushImmediately: true, - }); + ); } finally { history.push(nextRoute); } @@ -73,15 +83,20 @@ export default function OnboardingMetametrics() { try { if (!participateInMetaMetrics) { - metricsEvent({ - eventOpts: { + trackEvent( + { category: 'Onboarding', - action: 'Metrics Option', - name: 'Metrics Opt Out', + event: 'Metrics Opt Out', + properties: { + action: 'Metrics Option', + legacy_event: true, + }, }, - isOptIn: true, - flushImmediately: true, - }); + { + isOptIn: true, + flushImmediately: true, + }, + ); } } finally { history.push(nextRoute); diff --git a/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js b/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js index 351f3024f..e68b9c105 100644 --- a/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js +++ b/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js @@ -46,7 +46,7 @@ export default class SendAssetRow extends Component { static contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, }; state = { @@ -87,13 +87,12 @@ export default class SendAssetRow extends Component { isShowingDropdown: false, }, () => { - this.context.metricsEvent({ - eventOpts: { - category: 'Transactions', + this.context.trackEvent({ + category: 'Transactions', + event: 'User clicks "Assets" dropdown', + properties: { action: 'Send Screen', - name: 'User clicks "Assets" dropdown', - }, - customVariables: { + legacy_event: true, assetSelected: this.getAssetSelected(type, token), }, }); diff --git a/ui/pages/send/send-footer/send-footer.component.js b/ui/pages/send/send-footer/send-footer.component.js index 472c40e0d..84d8283a4 100644 --- a/ui/pages/send/send-footer/send-footer.component.js +++ b/ui/pages/send/send-footer/send-footer.component.js @@ -27,7 +27,7 @@ export default class SendFooter extends Component { static contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, }; onCancel() { @@ -60,20 +60,19 @@ export default class SendFooter extends Component { history, gasEstimateType, } = this.props; - const { metricsEvent } = this.context; + const { trackEvent } = this.context; // TODO: add nickname functionality await addToAddressBookIfNew(to, toAccounts); const promise = sign(); Promise.resolve(promise).then(() => { - metricsEvent({ - eventOpts: { - category: 'Transactions', + trackEvent({ + category: 'Transactions', + event: 'Complete', + properties: { action: 'Edit Screen', - name: 'Complete', - }, - customVariables: { + legacy_event: true, gasChanged: gasEstimateType, }, }); @@ -83,7 +82,7 @@ export default class SendFooter extends Component { componentDidUpdate(prevProps) { const { sendErrors } = this.props; - const { metricsEvent } = this.context; + const { trackEvent } = this.context; if ( Object.keys(sendErrors).length > 0 && isEqual(sendErrors, prevProps.sendErrors) === false @@ -91,13 +90,12 @@ export default class SendFooter extends Component { const errorField = Object.keys(sendErrors).find((key) => sendErrors[key]); const errorMessage = sendErrors[errorField]; - metricsEvent({ - eventOpts: { - category: 'Transactions', + trackEvent({ + category: 'Transactions', + event: 'Error', + properties: { action: 'Edit Screen', - name: 'Error', - }, - customVariables: { + legacy_event: true, errorField, errorMessage, }, diff --git a/ui/pages/send/send-footer/send-footer.component.test.js b/ui/pages/send/send-footer/send-footer.component.test.js index 23bc565ac..cb2b974e3 100644 --- a/ui/pages/send/send-footer/send-footer.component.test.js +++ b/ui/pages/send/send-footer/send-footer.component.test.js @@ -43,7 +43,7 @@ describe('SendFooter Component', () => { mostRecentOverviewPage="mostRecentOverviewPage" {...props} />, - { context: { t: (str) => str, metricsEvent: () => ({}) } }, + { context: { t: (str) => str, trackEvent: () => ({}) } }, ); }; @@ -157,7 +157,7 @@ describe('SendFooter Component', () => { update={propsMethodSpies.update} mostRecentOverviewPage="mostRecentOverviewPage" />, - { context: { t: (str) => str, metricsEvent: () => ({}) } }, + { context: { t: (str) => str, trackEvent: () => ({}) } }, ); }); diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.js b/ui/pages/settings/advanced-tab/advanced-tab.component.js index c0bea1a3f..cf8641f45 100644 --- a/ui/pages/settings/advanced-tab/advanced-tab.component.js +++ b/ui/pages/settings/advanced-tab/advanced-tab.component.js @@ -25,7 +25,7 @@ import { export default class AdvancedTab extends PureComponent { static contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, }; static propTypes = { @@ -179,11 +179,12 @@ export default class AdvancedTab extends PureComponent { className="settings-tab__button--red" onClick={(event) => { event.preventDefault(); - this.context.metricsEvent({ - eventOpts: { - category: 'Settings', + this.context.trackEvent({ + category: 'Settings', + event: 'Reset Account', + properties: { action: 'Reset Account', - name: 'Reset Account', + legacy_event: true, }, }); showResetAccountConfirmationModal(); @@ -696,11 +697,12 @@ export default class AdvancedTab extends PureComponent { { - this.context.metricsEvent({ - eventOpts: { - category: 'Settings', + this.context.trackEvent({ + category: 'Settings', + event: 'Token Detection', + properties: { action: 'Token Detection', - name: 'Token Detection', + legacy_event: true, }, }); setUseTokenDetection(!value); diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.test.js b/ui/pages/settings/advanced-tab/advanced-tab.component.test.js index d3f11735b..5c639e551 100644 --- a/ui/pages/settings/advanced-tab/advanced-tab.component.test.js +++ b/ui/pages/settings/advanced-tab/advanced-tab.component.test.js @@ -106,7 +106,7 @@ describe('AdvancedTab Component', () => { />, { context: { - metricsEvent: () => undefined, + trackEvent: () => undefined, t: (s) => `_${s}`, }, }, @@ -142,7 +142,7 @@ describe('AdvancedTab Component', () => { />, { context: { - metricsEvent: () => undefined, + trackEvent: () => undefined, t: (s) => `_${s}`, }, }, diff --git a/ui/pages/settings/experimental-tab/experimental-tab.component.js b/ui/pages/settings/experimental-tab/experimental-tab.component.js index aed013cd6..fd91e01ab 100644 --- a/ui/pages/settings/experimental-tab/experimental-tab.component.js +++ b/ui/pages/settings/experimental-tab/experimental-tab.component.js @@ -12,7 +12,7 @@ import { THEME_TYPE } from './experimental-tab.constant'; export default class ExperimentalTab extends PureComponent { static contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, }; static propTypes = { @@ -63,11 +63,12 @@ export default class ExperimentalTab extends PureComponent { { - this.context.metricsEvent({ - eventOpts: { - category: 'Settings', + this.context.trackEvent({ + category: 'Settings', + event: 'Token Detection', + properties: { action: 'Token Detection', - name: 'Token Detection', + legacy_event: true, }, }); setUseTokenDetection(!value); @@ -110,11 +111,12 @@ export default class ExperimentalTab extends PureComponent { { - this.context.metricsEvent({ - eventOpts: { - category: 'Settings', + this.context.trackEvent({ + category: 'Settings', + event: 'Collectible Detection', + properties: { action: 'Collectible Detection', - name: 'Collectible Detection', + legacy_event: true, }, }); if (!value && !openSeaEnabled) { @@ -159,11 +161,12 @@ export default class ExperimentalTab extends PureComponent { { - this.context.metricsEvent({ - eventOpts: { - category: 'Settings', + this.context.trackEvent({ + category: 'Settings', + event: 'Enabled/Disable OpenSea', + properties: { action: 'Enabled/Disable OpenSea', - name: 'Enabled/Disable OpenSea', + legacy_event: true, }, }); // value is positive when being toggled off @@ -207,11 +210,12 @@ export default class ExperimentalTab extends PureComponent { { - this.context.metricsEvent({ - eventOpts: { - category: 'Settings', + this.context.trackEvent({ + category: 'Settings', + event: 'Enabled/Disable OpenSea', + properties: { action: 'Enabled/Disable OpenSea', - name: 'Enabled/Disable OpenSea', + legacy_event: true, }, }); setEIP1559V2Enabled(!value); diff --git a/ui/pages/settings/experimental-tab/experimental-tab.component.test.js b/ui/pages/settings/experimental-tab/experimental-tab.component.test.js index 12f518012..d091660a8 100644 --- a/ui/pages/settings/experimental-tab/experimental-tab.component.test.js +++ b/ui/pages/settings/experimental-tab/experimental-tab.component.test.js @@ -15,7 +15,7 @@ describe('Experimental Tab', () => { wrapper = mount(, { context: { t: (str) => str, - metricsEvent: () => undefined, + trackEvent: () => undefined, }, }); const useTokenDetection = wrapper.find({ type: 'checkbox' }).at(0); @@ -29,7 +29,7 @@ describe('Experimental Tab', () => { wrapper = mount(, { context: { t: (str) => str, - metricsEvent: () => undefined, + trackEvent: () => undefined, }, }); const useTokenDetectionText = wrapper.find({ text: 'Use Token Detection' }); diff --git a/ui/pages/settings/security-tab/security-tab.component.js b/ui/pages/settings/security-tab/security-tab.component.js index 4bc7c25f3..f89c9bb1f 100644 --- a/ui/pages/settings/security-tab/security-tab.component.js +++ b/ui/pages/settings/security-tab/security-tab.component.js @@ -11,7 +11,7 @@ import { export default class SecurityTab extends PureComponent { static contextTypes = { t: PropTypes.func, - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, }; static propTypes = { @@ -62,11 +62,12 @@ export default class SecurityTab extends PureComponent { large onClick={(event) => { event.preventDefault(); - this.context.metricsEvent({ - eventOpts: { - category: 'Settings', + this.context.trackEvent({ + category: 'Settings', + event: 'Reveal Seed Phrase', + properties: { action: 'Reveal Seed Phrase', - name: 'Reveal Seed Phrase', + legacy_event: true, }, }); history.push(REVEAL_SEED_ROUTE); diff --git a/ui/pages/settings/security-tab/security-tab.container.test.js b/ui/pages/settings/security-tab/security-tab.container.test.js index 61946ed18..f1476e9fa 100644 --- a/ui/pages/settings/security-tab/security-tab.container.test.js +++ b/ui/pages/settings/security-tab/security-tab.container.test.js @@ -27,7 +27,7 @@ describe('Security Tab', () => { wrapper = mount(, { context: { t: (str) => str, - metricsEvent: () => undefined, + trackEvent: () => undefined, }, }); }); diff --git a/ui/pages/unlock-page/unlock-page.component.js b/ui/pages/unlock-page/unlock-page.component.js index 451aeafc6..cdc25bb7d 100644 --- a/ui/pages/unlock-page/unlock-page.component.js +++ b/ui/pages/unlock-page/unlock-page.component.js @@ -10,7 +10,7 @@ import { DEFAULT_ROUTE } from '../../helpers/constants/routes'; export default class UnlockPage extends Component { static contextTypes = { - metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, t: PropTypes.func, }; @@ -75,14 +75,19 @@ export default class UnlockPage extends Component { try { await onSubmit(password); const newState = await forceUpdateMetamaskState(); - this.context.metricsEvent({ - eventOpts: { + this.context.trackEvent( + { category: 'Navigation', - action: 'Unlock', - name: 'Success', + event: 'Success', + properties: { + action: 'Unlock', + legacy_event: true, + }, }, - isNewVisit: true, - }); + { + isNewVisit: true, + }, + ); if ( newState.participateInMetaMetrics === null || @@ -93,13 +98,12 @@ export default class UnlockPage extends Component { } catch ({ message }) { if (message === 'Incorrect password') { const newState = await forceUpdateMetamaskState(); - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', + this.context.trackEvent({ + category: 'Navigation', + event: 'Incorrect Password', + properties: { action: 'Unlock', - name: 'Incorrect Password', - }, - customVariables: { + legacy_event: true, numberOfTokens: newState.tokens.length, numberOfAccounts: Object.keys(newState.accounts).length, },