diff options
Diffstat (limited to 'ui/app/components')
71 files changed, 1541 insertions, 131 deletions
diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js index 06376e48b..b05ba219c 100644 --- a/ui/app/components/account-dropdowns.js +++ b/ui/app/components/account-dropdowns.js @@ -233,6 +233,7 @@ class AccountDropdowns extends Component { } render () { + const { metricsEvent } = this.context const { style, enableAccountsSelector, enableAccountOptions } = this.props const { optionsMenuActive, accountSelectorActive } = this.state @@ -272,6 +273,17 @@ class AccountDropdowns extends Component { fontSize: '1.8em', }, onClick: (event) => { + metricsEvent({ + eventOpts: { + category: 'Accounts', + action: 'userClick', + name: 'accountsOpenedMenu', + }, + pageOpts: { + section: 'header', + component: 'accountDropdownIcon', + }, + }) event.stopPropagation() this.setState({ accountSelectorActive: false, @@ -318,6 +330,7 @@ const mapDispatchToProps = (dispatch) => { AccountDropdowns.contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } module.exports = { diff --git a/ui/app/components/account-menu/account-menu.component.js b/ui/app/components/account-menu/account-menu.component.js index b2fec647a..ce7482108 100644 --- a/ui/app/components/account-menu/account-menu.component.js +++ b/ui/app/components/account-menu/account-menu.component.js @@ -20,6 +20,7 @@ import { export default class AccountMenu extends PureComponent { static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } static propTypes = { @@ -73,7 +74,16 @@ export default class AccountMenu extends PureComponent { return ( <div className="account-menu__account menu__item--clickable" - onClick={() => showAccountDetail(identity.address)} + onClick={() => { + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Main Menu', + name: 'Switched Account', + }, + }) + showAccountDetail(identity.address) + }} key={identity.address} > <div className="account-menu__check-mark"> @@ -197,6 +207,7 @@ export default class AccountMenu extends PureComponent { lockMetamask, history, } = this.props + const { metricsEvent } = this.context return ( <Menu @@ -230,6 +241,13 @@ export default class AccountMenu extends PureComponent { <Item onClick={() => { toggleAccountMenu() + metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Main Menu', + name: 'Clicked Create Account', + }, + }) history.push(NEW_ACCOUNT_ROUTE) }} icon={ @@ -243,6 +261,13 @@ export default class AccountMenu extends PureComponent { <Item onClick={() => { toggleAccountMenu() + metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Main Menu', + name: 'Clicked Import Account', + }, + }) history.push(IMPORT_ACCOUNT_ROUTE) }} icon={ @@ -256,7 +281,13 @@ export default class AccountMenu extends PureComponent { <Item onClick={() => { toggleAccountMenu() - + metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Main Menu', + name: 'Clicked Connect Hardware', + }, + }) if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) { global.platform.openExtensionInBrowser(CONNECT_HARDWARE_ROUTE) } else { @@ -286,6 +317,13 @@ export default class AccountMenu extends PureComponent { onClick={() => { toggleAccountMenu() history.push(SETTINGS_ROUTE) + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Main Menu', + name: 'Opened Settings', + }, + }) }} icon={ <img diff --git a/ui/app/components/app-header/app-header.component.js b/ui/app/components/app-header/app-header.component.js index f7d8c8598..14f8b9f30 100644 --- a/ui/app/components/app-header/app-header.component.js +++ b/ui/app/components/app-header/app-header.component.js @@ -18,10 +18,12 @@ export default class AppHeader extends PureComponent { isUnlocked: PropTypes.bool, hideNetworkIndicator: PropTypes.bool, disabled: PropTypes.bool, + isAccountMenuOpen: PropTypes.bool, } static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } handleNetworkIndicatorClick (event) { @@ -30,20 +32,40 @@ export default class AppHeader extends PureComponent { const { networkDropdownOpen, showNetworkDropdown, hideNetworkDropdown } = this.props - return networkDropdownOpen === false - ? showNetworkDropdown() - : hideNetworkDropdown() + if (networkDropdownOpen === false) { + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Home', + name: 'Opened Network Menu', + }, + }) + showNetworkDropdown() + } else { + hideNetworkDropdown() + } } renderAccountMenu () { - const { isUnlocked, toggleAccountMenu, selectedAddress, disabled } = this.props + const { isUnlocked, toggleAccountMenu, selectedAddress, disabled, isAccountMenuOpen } = this.props return isUnlocked && ( <div className={classnames('account-menu__icon', { 'account-menu__icon--disabled': disabled, })} - onClick={() => disabled || toggleAccountMenu()} + onClick={() => { + if (!disabled) { + !isAccountMenuOpen && this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Home', + name: 'Opened Main Menu', + }, + }) + toggleAccountMenu() + } + }} > <Identicon address={selectedAddress} diff --git a/ui/app/components/app-header/app-header.container.js b/ui/app/components/app-header/app-header.container.js index 30d3f8cc4..1abc2afeb 100644 --- a/ui/app/components/app-header/app-header.container.js +++ b/ui/app/components/app-header/app-header.container.js @@ -13,6 +13,7 @@ const mapStateToProps = state => { provider, selectedAddress, isUnlocked, + isAccountMenuOpen, } = metamask return { @@ -21,6 +22,7 @@ const mapStateToProps = state => { provider, selectedAddress, isUnlocked, + isAccountMenuOpen, } } diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index e67fbe45b..fd660ead2 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -3,6 +3,7 @@ const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect +const BigNumber = require('bignumber.js') const actions = require('../../actions') const GasModalCard = require('./gas-modal-card') import Button from '../button' @@ -112,6 +113,7 @@ function CustomizeGasModal (props) { CustomizeGasModal.contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal) @@ -148,6 +150,7 @@ CustomizeGasModal.prototype.componentWillReceiveProps = function (nextProps) { } CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { + const { metricsEvent } = this.context const { setGasPrice, setGasLimit, @@ -159,6 +162,9 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { updateSendAmount, updateSendErrors, } = this.props + const { + originalState, + } = this.state if (maxModeOn && !selectedToken) { const maxAmount = subtractCurrencies( @@ -169,6 +175,22 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { updateSendAmount(maxAmount) } + metricsEvent({ + eventOpts: { + category: 'Activation', + action: 'userCloses', + name: 'closeCustomizeGas', + }, + pageOpts: { + section: 'customizeGasModal', + component: 'customizeGasSaveButton', + }, + customVariables: { + gasPriceChange: (new BigNumber(ethUtil.addHexPrefix(gasPrice))).minus(new BigNumber(ethUtil.addHexPrefix(originalState.gasPrice))).toString(10), + gasLimitChange: (new BigNumber(ethUtil.addHexPrefix(gasLimit))).minus(new BigNumber(ethUtil.addHexPrefix(originalState.gasLimit))).toString(10), + }, + }) + setGasPrice(ethUtil.addHexPrefix(gasPrice)) setGasLimit(ethUtil.addHexPrefix(gasLimit)) setGasTotal(ethUtil.addHexPrefix(gasTotal)) diff --git a/ui/app/components/dropdowns/account-details-dropdown.js b/ui/app/components/dropdowns/account-details-dropdown.js index 7476cfdd9..bda8b9517 100644 --- a/ui/app/components/dropdowns/account-details-dropdown.js +++ b/ui/app/components/dropdowns/account-details-dropdown.js @@ -10,6 +10,7 @@ const { Menu, Item, CloseArea } = require('./components/menu') AccountDetailsDropdown.contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsDropdown) @@ -72,6 +73,13 @@ AccountDetailsDropdown.prototype.render = function () { h(Item, { onClick: (e) => { e.stopPropagation() + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Account Options', + name: 'Clicked Expand View', + }, + }) global.platform.openExtensionInBrowser() this.props.onClose() }, @@ -82,6 +90,13 @@ AccountDetailsDropdown.prototype.render = function () { onClick: (e) => { e.stopPropagation() showAccountDetailModal() + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Account Options', + name: 'Viewed Account Details', + }, + }) this.props.onClose() }, text: this.context.t('accountDetails'), @@ -90,6 +105,13 @@ AccountDetailsDropdown.prototype.render = function () { h(Item, { onClick: (e) => { e.stopPropagation() + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Account Options', + name: 'Clicked View on Etherscan', + }, + }) viewOnEtherscan(address, network) this.props.onClose() }, diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 6e002219a..86a5a5268 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -60,6 +60,7 @@ function NetworkDropdown () { NetworkDropdown.contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } module.exports = compose( @@ -120,7 +121,7 @@ NetworkDropdown.prototype.render = function () { { key: 'main', closeMenu: () => this.props.hideNetworkDropdown(), - onClick: () => props.setProviderType('mainnet'), + onClick: () => this.handleClick('mainnet'), style: { ...dropdownMenuItemStyle, borderColor: '#038789' }, }, [ @@ -142,7 +143,7 @@ NetworkDropdown.prototype.render = function () { { key: 'ropsten', closeMenu: () => this.props.hideNetworkDropdown(), - onClick: () => props.setProviderType('ropsten'), + onClick: () => this.handleClick('ropsten'), style: dropdownMenuItemStyle, }, [ @@ -164,7 +165,7 @@ NetworkDropdown.prototype.render = function () { { key: 'kovan', closeMenu: () => this.props.hideNetworkDropdown(), - onClick: () => props.setProviderType('kovan'), + onClick: () => this.handleClick('kovan'), style: dropdownMenuItemStyle, }, [ @@ -186,7 +187,7 @@ NetworkDropdown.prototype.render = function () { { key: 'rinkeby', closeMenu: () => this.props.hideNetworkDropdown(), - onClick: () => props.setProviderType('rinkeby'), + onClick: () => this.handleClick('rinkeby'), style: dropdownMenuItemStyle, }, [ @@ -208,7 +209,7 @@ NetworkDropdown.prototype.render = function () { { key: 'default', closeMenu: () => this.props.hideNetworkDropdown(), - onClick: () => props.setProviderType('localhost'), + onClick: () => this.handleClick('localhost'), style: dropdownMenuItemStyle, }, [ @@ -252,6 +253,23 @@ NetworkDropdown.prototype.render = function () { ]) } +NetworkDropdown.prototype.handleClick = function (newProviderType) { + const { providerType, setProviderType } = this.props + const { metricsEvent } = this.context + + metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Home', + name: 'Opened Network Menu', + }, + customVariables: { + fromNetwork: providerType, + toNetwork: newProviderType, + }, + }) + setProviderType(newProviderType) +} NetworkDropdown.prototype.getNetworkName = function () { const { provider } = this.props diff --git a/ui/app/components/menu-bar/menu-bar.component.js b/ui/app/components/menu-bar/menu-bar.component.js index e64809f3f..24f84516d 100644 --- a/ui/app/components/menu-bar/menu-bar.component.js +++ b/ui/app/components/menu-bar/menu-bar.component.js @@ -7,6 +7,7 @@ import AccountDetailsDropdown from '../dropdowns/account-details-dropdown.js' export default class MenuBar extends PureComponent { static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } static propTypes = { @@ -31,7 +32,16 @@ export default class MenuBar extends PureComponent { > <div className="fa fa-bars menu-bar__sidebar-button" - onClick={() => sidebarOpen ? hideSidebar() : showSidebar()} + onClick={() => { + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Home', + name: 'Copied Address', + }, + }) + sidebarOpen ? hideSidebar() : showSidebar() + }} /> </Tooltip> <SelectedAccount /> diff --git a/ui/app/components/menu-bar/menu-bar.container.js b/ui/app/components/menu-bar/menu-bar.container.js index ae32882ae..4c5276402 100644 --- a/ui/app/components/menu-bar/menu-bar.container.js +++ b/ui/app/components/menu-bar/menu-bar.container.js @@ -1,4 +1,5 @@ import { connect } from 'react-redux' +import { WALLET_VIEW_SIDEBAR } from '../sidebars/sidebar.constants' import MenuBar from './menu-bar.component' import { showSidebar, hideSidebar } from '../../actions' @@ -16,7 +17,7 @@ const mapDispatchToProps = dispatch => { showSidebar: () => { dispatch(showSidebar({ transitionName: 'sidebar-right', - type: 'wallet-view', + type: WALLET_VIEW_SIDEBAR, })) }, hideSidebar: () => dispatch(hideSidebar()), diff --git a/ui/app/components/modals/customize-gas/customize-gas.component.js b/ui/app/components/modals/customize-gas/customize-gas.component.js index 3f526bd43..4e2e20660 100644 --- a/ui/app/components/modals/customize-gas/customize-gas.component.js +++ b/ui/app/components/modals/customize-gas/customize-gas.component.js @@ -1,5 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import BigNumber from 'bignumber.js' import GasModalCard from '../../customize-gas-modal/gas-modal-card' import { MIN_GAS_PRICE_GWEI } from '../../send/send.constants' import Button from '../../button' @@ -14,6 +15,7 @@ import { export default class CustomizeGas extends Component { static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } static propTypes = { @@ -73,9 +75,9 @@ export default class CustomizeGas extends Component { } render () { - const { t } = this.context + const { t, metricsEvent } = this.context const { hideModal } = this.props - const { gasPrice, gasLimit } = this.state + const { gasPrice, gasLimit, originalGasPrice, originalGasLimit } = this.state const { valid, errorKey } = this.validate() return ( @@ -128,7 +130,24 @@ export default class CustomizeGas extends Component { <Button type="primary" className="customize-gas__save" - onClick={() => this.handleSave()} + onClick={() => { + metricsEvent({ + eventOpts: { + category: 'Activation', + action: 'userCloses', + name: 'closeCustomizeGas', + }, + pageOpts: { + section: 'customizeGasModal', + component: 'customizeGasSaveButton', + }, + customVariables: { + gasPriceChange: (new BigNumber(gasPrice)).minus(new BigNumber(originalGasPrice)).toString(10), + gasLimitChange: (new BigNumber(gasLimit)).minus(new BigNumber(originalGasLimit)).toString(10), + }, + }) + this.handleSave() + }} style={{ marginRight: '10px' }} disabled={!valid} > diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss index 45453a582..555da87ef 100644 --- a/ui/app/components/modals/index.scss +++ b/ui/app/components/modals/index.scss @@ -7,3 +7,5 @@ @import './qr-scanner/index'; @import './transaction-confirmed/index'; + +@import './metametrics-opt-in-modal/index'; diff --git a/ui/app/components/modals/metametrics-opt-in-modal/index.js b/ui/app/components/modals/metametrics-opt-in-modal/index.js new file mode 100644 index 000000000..47f946757 --- /dev/null +++ b/ui/app/components/modals/metametrics-opt-in-modal/index.js @@ -0,0 +1 @@ +export { default } from './metametrics-opt-in-modal.container' diff --git a/ui/app/components/modals/metametrics-opt-in-modal/index.scss b/ui/app/components/modals/metametrics-opt-in-modal/index.scss new file mode 100644 index 000000000..88b6d7a4d --- /dev/null +++ b/ui/app/components/modals/metametrics-opt-in-modal/index.scss @@ -0,0 +1,30 @@ +.metametrics-opt-in-modal { + .metametrics-opt-in__main { + justify-content: center; + margin-left: 3%; + margin-right: 0%; + max-height: 75vh; + + @media screen and (max-width: 575px) { + max-height: 100vh; + } + } + + + .metametrics-opt-in__title { + font-size: 38px; + } + + .metametrics-opt-in__content { + padding-right: 6px; + } + + .metametrics-opt-in__footer { + @media screen and (max-width: 575px) { + margin-top: 10px; + justify-content: center; + margin-left: 2%; + max-height: 520px; + } + } +}
\ No newline at end of file diff --git a/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js b/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js new file mode 100644 index 000000000..36f1ed92d --- /dev/null +++ b/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js @@ -0,0 +1,135 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import PageContainerFooter from '../../page-container/page-container-footer' + +export default class MetaMetricsOptInModal extends Component { + static propTypes = { + setParticipateInMetaMetrics: PropTypes.func, + hideModal: PropTypes.func, + } + + static contextTypes = { + metricsEvent: PropTypes.func, + } + + render () { + const { metricsEvent } = this.context + const { setParticipateInMetaMetrics, hideModal } = this.props + + return ( + <div className="metametrics-opt-in metametrics-opt-in-modal"> + <div className="metametrics-opt-in__main"> + <div className="metametrics-opt-in__content"> + <div className="app-header__logo-container"> + <img + className="app-header__metafox-logo app-header__metafox-logo--horizontal" + src="/images/logo/metamask-logo-horizontal.svg" + height={30} + /> + <img + className="app-header__metafox-logo app-header__metafox-logo--icon" + src="/images/logo/metamask-fox.svg" + height={42} + width={42} + /> + </div> + <div className="metametrics-opt-in__body-graphic"> + <img src="images/metrics-chart.svg" /> + </div> + <div className="metametrics-opt-in__title">Help Us Improve MetaMask</div> + <div className="metametrics-opt-in__body"> + <div className="metametrics-opt-in__description"> + MetaMask would like to gather usage data to better understand how our users interact with the extension. This data + will be used to continually improve the usability and user experience of our product and the etheruem ecosystem. + </div> + <div className="metametrics-opt-in__description"> + MetaMask will.. + </div> + + <div className="metametrics-opt-in__committments"> + <div className="metametrics-opt-in__row"> + <i className="fa fa-check" /> + <div className="metametrics-opt-in__row-description"> + Always allow you to opt-out via Settings + </div> + </div> + <div className="metametrics-opt-in__row"> + <i className="fa fa-check" /> + <div className="metametrics-opt-in__row-description"> + Send anonymized click & pageview events + </div> + </div> + <div className="metametrics-opt-in__row"> + <i className="fa fa-check" /> + <div className="metametrics-opt-in__row-description"> + Maintain a public aggregate dashboard to educate the community + </div> + </div> + <div className="metametrics-opt-in__row metametrics-opt-in__break-row"> + <i className="fa fa-times" /> + <div className="metametrics-opt-in__row-description"> + <span className="metametrics-opt-in__bold">Never</span> collect keys, addresses, transactions, balances, hashes, or any personal information + </div> + </div> + <div className="metametrics-opt-in__row"> + <i className="fa fa-times" /> + <div className="metametrics-opt-in__row-description"> + <span className="metametrics-opt-in__bold">Never</span> collect your full IP address + </div> + </div> + <div className="metametrics-opt-in__row"> + <i className="fa fa-times" /> + <div className="metametrics-opt-in__row-description"> + <span className="metametrics-opt-in__bold">Never</span> sell data for profit. Ever! + </div> + </div> + </div> + </div> + <div className="metametrics-opt-in__bottom-text"> + This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679. For more information in relation to our privacy practices, please see our Privacy Policy here. + </div> + </div> + <div className="metametrics-opt-in__footer"> + <PageContainerFooter + onCancel={() => { + setParticipateInMetaMetrics(false) + .then(() => { + metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Metrics Option', + name: 'Metrics Opt Out', + }, + isOptIn: true, + }, { + excludeMetaMetricsId: true, + }) + hideModal() + }) + }} + cancelText={'No Thanks'} + hideCancel={false} + onSubmit={() => { + setParticipateInMetaMetrics(true) + .then(() => { + metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Metrics Option', + name: 'Metrics Opt In', + }, + isOptIn: true, + }) + hideModal() + }) + }} + submitText={'I agree'} + submitButtonType={'confirm'} + disabled={false} + /> + </div> + </div> + </div> + ) + } +} diff --git a/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.container.js b/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.container.js new file mode 100644 index 000000000..525806b75 --- /dev/null +++ b/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.container.js @@ -0,0 +1,24 @@ +import { connect } from 'react-redux' +import { compose } from 'recompose' +import MetaMetricsOptInModal from './metametrics-opt-in-modal.component' +import withModalProps from '../../../higher-order-components/with-modal-props' +import { setParticipateInMetaMetrics } from '../../../actions' + +const mapStateToProps = (state, ownProps) => { + const { unapprovedTxCount } = ownProps + + return { + unapprovedTxCount, + } +} + +const mapDispatchToProps = dispatch => { + return { + setParticipateInMetaMetrics: (val) => dispatch(setParticipateInMetaMetrics(val)), + } +} + +export default compose( + withModalProps, + connect(mapStateToProps, mapDispatchToProps), +)(MetaMetricsOptInModal) diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 08bf205ef..8ab599a71 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -25,6 +25,8 @@ import ConfirmRemoveAccount from './confirm-remove-account' import ConfirmResetAccount from './confirm-reset-account' import TransactionConfirmed from './transaction-confirmed' import CancelTransaction from './cancel-transaction' + +import MetaMetricsOptInModal from './metametrics-opt-in-modal' import RejectTransactions from './reject-transactions' import ClearApprovedOrigins from './clear-approved-origins' import ConfirmCustomizeGasModal from '../gas-customization/gas-modal-page-container' @@ -213,6 +215,23 @@ const MODALS = { }, }, + METAMETRICS_OPT_IN_MODAL: { + contents: h(MetaMetricsOptInModal), + mobileModalStyle: { + ...modalContainerMobileStyle, + width: '100%', + height: '100%', + top: '0px', + }, + laptopModalStyle: { + ...modalContainerLaptopStyle, + top: '10%', + }, + contentStyle: { + borderRadius: '8px', + }, + }, + OLD_UI_NOTIFICATION_MODAL: { contents: [ h(NotifcationModal, { diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js index 3650dc869..e76b4699b 100644 --- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -16,6 +16,7 @@ import AdvancedGasInputs from '../../gas-customization/advanced-gas-inputs' export default class ConfirmTransactionBase extends Component { static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } static propTypes = { @@ -77,6 +78,8 @@ export default class ConfirmTransactionBase extends Component { onEdit: PropTypes.func, onEditGas: PropTypes.func, onSubmit: PropTypes.func, + setMetaMetricsSendCount: PropTypes.func, + metaMetricsSendCount: PropTypes.number, subtitle: PropTypes.string, subtitleComponent: PropTypes.node, summaryComponent: PropTypes.node, @@ -154,7 +157,20 @@ export default class ConfirmTransactionBase extends Component { } handleEditGas () { - const { onEditGas, showCustomizeGasModal } = this.props + const { onEditGas, showCustomizeGasModal, methodData = {}, txData: { origin } } = this.props + + this.context.metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Confirm Screen', + name: 'User clicks "Edit" on gas', + }, + customVariables: { + recipientKnown: null, + functionType: methodData.name || 'notFound', + origin, + }, + }) if (onEditGas) { onEditGas() @@ -274,7 +290,21 @@ export default class ConfirmTransactionBase extends Component { } handleEdit () { - const { txData, tokenData, tokenProps, onEdit } = this.props + const { txData, tokenData, tokenProps, onEdit, methodData = {}, txData: { origin } } = this.props + + this.context.metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Confirm Screen', + name: 'Edit Transaction', + }, + customVariables: { + recipientKnown: null, + functionType: methodData.name || 'notFound', + origin, + }, + }) + onEdit({ txData, tokenData, tokenProps }) } @@ -298,9 +328,22 @@ export default class ConfirmTransactionBase extends Component { } handleCancel () { - const { onCancel, txData, cancelTransaction, history, clearConfirmTransaction } = this.props + const { metricsEvent } = this.context + const { onCancel, txData, cancelTransaction, history, clearConfirmTransaction, methodData = {}, txData: { origin } } = this.props if (onCancel) { + metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Confirm Screen', + name: 'Cancel', + }, + customVariables: { + recipientKnown: null, + functionType: methodData.name || 'notFound', + origin, + }, + }) onCancel(txData) } else { cancelTransaction(txData) @@ -312,7 +355,8 @@ export default class ConfirmTransactionBase extends Component { } handleSubmit () { - const { sendTransaction, clearConfirmTransaction, txData, history, onSubmit } = this.props + const { metricsEvent } = this.context + const { txData: { origin }, sendTransaction, clearConfirmTransaction, txData, history, onSubmit, methodData = {}, metaMetricsSendCount = 0, setMetaMetricsSendCount } = this.props const { submitting } = this.state if (submitting) { @@ -323,30 +367,46 @@ export default class ConfirmTransactionBase extends Component { submitting: true, submitError: null, }, () => { - if (onSubmit) { - Promise.resolve(onSubmit(txData)) - .then(() => { - this.setState({ - submitting: false, - }) - }) - } else { - sendTransaction(txData) - .then(() => { - clearConfirmTransaction() - this.setState({ - submitting: false, - }, () => { - history.push(DEFAULT_ROUTE) - }) - }) - .catch(error => { - this.setState({ - submitting: false, - submitError: error.message, - }) - }) - } + metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Confirm Screen', + name: 'Transaction Completed', + }, + customVariables: { + recipientKnown: null, + functionType: methodData.name || 'notFound', + origin, + }, + }) + + setMetaMetricsSendCount(metaMetricsSendCount + 1) + .then(() => { + if (onSubmit) { + Promise.resolve(onSubmit(txData)) + .then(() => { + this.setState({ + submitting: false, + }) + }) + } else { + sendTransaction(txData) + .then(() => { + clearConfirmTransaction() + this.setState({ + submitting: false, + }, () => { + history.push(DEFAULT_ROUTE) + }) + }) + .catch(error => { + this.setState({ + submitting: false, + submitError: error.message, + }) + }) + } + }) }) } @@ -413,6 +473,21 @@ export default class ConfirmTransactionBase extends Component { } } + componentDidMount () { + const { txData: { origin } = {} } = this.props + const { metricsEvent } = this.context + metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Confirm Screen', + name: 'Confirm: Started', + }, + customVariables: { + origin, + }, + }) + } + render () { const { isTxReprice, diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js index 2a8033c8f..22f509905 100644 --- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js +++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js @@ -8,7 +8,7 @@ import { clearConfirmTransaction, updateGasAndCalculate, } from '../../../ducks/confirm-transaction.duck' -import { clearSend, cancelTx, cancelTxs, updateAndApproveTx, showModal } from '../../../actions' +import { clearSend, cancelTx, cancelTxs, updateAndApproveTx, showModal, setMetaMetricsSendCount } from '../../../actions' import { INSUFFICIENT_FUNDS_ERROR_KEY, GAS_LIMIT_TOO_LOW_ERROR_KEY, @@ -66,6 +66,7 @@ const mapStateToProps = (state, props) => { assetImages, network, unapprovedTxs, + metaMetricsSendCount, } = metamask const assetImage = assetImages[txParamsToAddress] @@ -139,6 +140,7 @@ const mapStateToProps = (state, props) => { insufficientBalance, hideSubtitle: (!isMainnet && !showFiatInTestnets), hideFiatConversion: (!isMainnet && !showFiatInTestnets), + metaMetricsSendCount, } } @@ -161,6 +163,7 @@ const mapDispatchToProps = dispatch => { cancelTransaction: ({ id }) => dispatch(cancelTx({ id })), cancelAllTransactions: (txList) => dispatch(cancelTxs(txList)), sendTransaction: txData => dispatch(updateAndApproveTx(txData)), + setMetaMetricsSendCount: val => dispatch(setMetaMetricsSendCount(val)), } } diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js index bd877fd4e..712cc5cbb 100644 --- a/ui/app/components/pages/create-account/connect-hardware/index.js +++ b/ui/app/components/pages/create-account/connect-hardware/index.js @@ -154,8 +154,25 @@ class ConnectHardwareForm extends Component { this.props.unlockHardwareWalletAccount(this.state.selectedAccount, device) .then(_ => { + this.context.metricsEvent({ + eventOpts: { + category: 'Accounts', + action: 'Connected Hardware Wallet', + name: 'Connected Account with: ' + device, + }, + }) this.props.history.push(DEFAULT_ROUTE) }).catch(e => { + this.context.metricsEvent({ + eventOpts: { + category: 'Accounts', + action: 'Connected Hardware Wallet', + name: 'Error connecting hardware wallet', + }, + customVariables: { + error: e.toString(), + }, + }) this.setState({ error: e.toString() }) }) } @@ -268,6 +285,7 @@ const mapDispatchToProps = dispatch => { ConnectHardwareForm.contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } module.exports = connect(mapStateToProps, mapDispatchToProps)( diff --git a/ui/app/components/pages/create-account/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js index 8bb6e154b..9aeea5579 100644 --- a/ui/app/components/pages/create-account/import-account/json.js +++ b/ui/app/components/pages/create-account/import-account/json.js @@ -108,9 +108,23 @@ class JsonImportSubview extends Component { .then(({ selectedAddress }) => { if (selectedAddress) { history.push(DEFAULT_ROUTE) + this.context.metricsEvent({ + eventOpts: { + category: 'Accounts', + action: 'Import Account', + name: 'Imported Account with JSON', + }, + }) displayWarning(null) } else { displayWarning('Error importing account.') + this.context.metricsEvent({ + eventOpts: { + category: 'Accounts', + action: 'Import Account', + name: 'Error importing JSON', + }, + }) setSelectedAddress(firstAddress) } }) @@ -147,6 +161,7 @@ const mapDispatchToProps = dispatch => { JsonImportSubview.contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } module.exports = compose( diff --git a/ui/app/components/pages/create-account/import-account/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js index 45068b96e..4ba31806f 100644 --- a/ui/app/components/pages/create-account/import-account/private-key.js +++ b/ui/app/components/pages/create-account/import-account/private-key.js @@ -12,6 +12,7 @@ import Button from '../../../button' PrivateKeyImportView.contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } module.exports = compose( @@ -102,10 +103,24 @@ PrivateKeyImportView.prototype.createNewKeychain = function () { importNewAccount('Private Key', [ privateKey ]) .then(({ selectedAddress }) => { if (selectedAddress) { + this.context.metricsEvent({ + eventOpts: { + category: 'Accounts', + action: 'Import Account', + name: 'Imported Account with Private Key', + }, + }) history.push(DEFAULT_ROUTE) displayWarning(null) } else { displayWarning('Error importing account.') + this.context.metricsEvent({ + eventOpts: { + category: 'Accounts', + action: 'Import Account', + name: 'Error importing with Private Key', + }, + }) setSelectedAddress(firstAddress) } }) diff --git a/ui/app/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js index 94a5fa487..a7595e346 100644 --- a/ui/app/components/pages/create-account/new-account.js +++ b/ui/app/components/pages/create-account/new-account.js @@ -52,7 +52,28 @@ class NewAccountCreateForm extends Component { className: 'new-account-create-form__button', onClick: () => { createAccount(newAccountName || defaultAccountName) - .then(() => history.push(DEFAULT_ROUTE)) + .then(() => { + this.context.metricsEvent({ + eventOpts: { + category: 'Accounts', + action: 'Add New Account', + name: 'Added New Account', + }, + }) + history.push(DEFAULT_ROUTE) + }) + .catch((e) => { + this.context.metricsEvent({ + eventOpts: { + category: 'Accounts', + action: 'Add New Account', + name: 'Error', + }, + customVariables: { + errorMessage: e.message, + }, + }) + }) }, }, [this.context.t('create')]), @@ -102,6 +123,7 @@ const mapDispatchToProps = dispatch => { NewAccountCreateForm.contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountCreateForm) diff --git a/ui/app/components/pages/first-time-flow/create-password/create-password.component.js b/ui/app/components/pages/first-time-flow/create-password/create-password.component.js index 7cca82ca6..3faaa3764 100644 --- a/ui/app/components/pages/first-time-flow/create-password/create-password.component.js +++ b/ui/app/components/pages/first-time-flow/create-password/create-password.component.js @@ -3,18 +3,16 @@ import PropTypes from 'prop-types' import { Switch, Route } from 'react-router-dom' import NewAccount from './new-account' import ImportWithSeedPhrase from './import-with-seed-phrase' -import UniqueImage from './unique-image' import { INITIALIZE_CREATE_PASSWORD_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, - INITIALIZE_UNIQUE_IMAGE_ROUTE, + INITIALIZE_END_OF_FLOW_ROUTE, } from '../../../../routes' export default class CreatePassword extends PureComponent { static propTypes = { history: PropTypes.object, isInitialized: PropTypes.bool, - isImportedKeyring: PropTypes.bool, onCreateNewAccount: PropTypes.func, onCreateNewAccountFromSeed: PropTypes.func, } @@ -23,12 +21,12 @@ export default class CreatePassword extends PureComponent { const { isInitialized, history } = this.props if (isInitialized) { - history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) + history.push(INITIALIZE_END_OF_FLOW_ROUTE) } } render () { - const { onCreateNewAccount, onCreateNewAccountFromSeed, isImportedKeyring } = this.props + const { onCreateNewAccount, onCreateNewAccountFromSeed } = this.props return ( <div className="first-time-flow__wrapper"> @@ -46,15 +44,6 @@ export default class CreatePassword extends PureComponent { /> </div> <Switch> - <Route exact - path={INITIALIZE_UNIQUE_IMAGE_ROUTE} - render={props => ( - <UniqueImage - { ...props } - isImportedKeyring={isImportedKeyring} - /> - )} - /> <Route exact path={INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE} diff --git a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js index 2e99147bb..6b3c03bb3 100644 --- a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js +++ b/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js @@ -5,12 +5,13 @@ import TextField from '../../../../text-field' import Button from '../../../../button' import { INITIALIZE_SELECT_ACTION_ROUTE, - INITIALIZE_UNIQUE_IMAGE_ROUTE, + INITIALIZE_END_OF_FLOW_ROUTE, } from '../../../../../routes' export default class ImportWithSeedPhrase extends PureComponent { static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } static propTypes = { @@ -104,7 +105,14 @@ export default class ImportWithSeedPhrase extends PureComponent { try { await onSubmit(password, seedPhrase) - history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Import Seed Phrase', + name: 'Import Complete', + }, + }) + history.push(INITIALIZE_END_OF_FLOW_ROUTE) } catch (error) { this.setState({ seedPhraseError: error.message }) } @@ -132,6 +140,14 @@ export default class ImportWithSeedPhrase extends PureComponent { } toggleTermsCheck = () => { + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Import Seed Phrase', + name: 'Check ToS', + }, + }) + this.setState((prevState) => ({ termsChecked: !prevState.termsChecked, })) @@ -150,6 +166,13 @@ export default class ImportWithSeedPhrase extends PureComponent { <a onClick={e => { e.preventDefault() + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Import Seed Phrase', + name: 'Go Back from Onboarding Import', + }, + }) this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE) }} href="#" @@ -208,7 +231,15 @@ export default class ImportWithSeedPhrase extends PureComponent { {termsChecked ? <i className="fa fa-check fa-2x" /> : null} </div> <span className="first-time-flow__checkbox-label"> - { t('agreeTermsOfService') } + I have read and agree to the <a + href="https://metamask.io/terms.html" + target="_blank" + rel="noopener noreferrer" + > + <span className="first-time-flow__link-text"> + { 'Terms of Use' } + </span> + </a> </span> </div> <Button diff --git a/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js b/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js index b82cba0c5..11d10e2d9 100644 --- a/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js +++ b/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Button from '../../../../button' import { - INITIALIZE_UNIQUE_IMAGE_ROUTE, + INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, INITIALIZE_SELECT_ACTION_ROUTE, } from '../../../../../routes' @@ -10,6 +10,7 @@ import TextField from '../../../../text-field' export default class NewAccount extends PureComponent { static contextTypes = { + metricsEvent: PropTypes.func, t: PropTypes.func, } @@ -99,7 +100,16 @@ export default class NewAccount extends PureComponent { try { await onSubmit(password) - history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) + + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Create Password', + name: 'Submit Password', + }, + }) + + history.push(INITIALIZE_SEED_PHRASE_ROUTE) } catch (error) { this.setState({ passwordError: error.message }) } @@ -113,6 +123,14 @@ export default class NewAccount extends PureComponent { } toggleTermsCheck = () => { + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Create Password', + name: 'Check ToS', + }, + }) + this.setState((prevState) => ({ termsChecked: !prevState.termsChecked, })) @@ -128,6 +146,13 @@ export default class NewAccount extends PureComponent { <a onClick={e => { e.preventDefault() + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Create Password', + name: 'Go Back from Onboarding Create', + }, + }) this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE) }} href="#" @@ -174,7 +199,15 @@ export default class NewAccount extends PureComponent { {termsChecked ? <i className="fa fa-check fa-2x" /> : null} </div> <span className="first-time-flow__checkbox-label"> - I agree to the Terms Of Service + I have read and agree to the <a + href="https://metamask.io/terms.html" + target="_blank" + rel="noopener noreferrer" + > + <span className="first-time-flow__link-text"> + { 'Terms of Use' } + </span> + </a> </span> </div> <Button diff --git a/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js b/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js index fa76074f5..cbc85c0e4 100644 --- a/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js +++ b/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js @@ -1,21 +1,21 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Button from '../../../../button' -import { INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_END_OF_FLOW_ROUTE } from '../../../../../routes' +import { INITIALIZE_END_OF_FLOW_ROUTE } from '../../../../../routes' export default class UniqueImageScreen extends PureComponent { static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } static propTypes = { history: PropTypes.object, - isImportedKeyring: PropTypes.bool, } render () { const { t } = this.context - const { history, isImportedKeyring } = this.props + const { history } = this.props return ( <div> @@ -37,11 +37,14 @@ export default class UniqueImageScreen extends PureComponent { type="confirm" className="first-time-flow__button" onClick={() => { - if (isImportedKeyring) { - history.push(INITIALIZE_END_OF_FLOW_ROUTE) - } else { - history.push(INITIALIZE_SEED_PHRASE_ROUTE) - } + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Agree to Phishing Warning', + name: 'Agree to Phishing Warning', + }, + }) + history.push(INITIALIZE_END_OF_FLOW_ROUTE) }} > { t('next') } diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js index 2ca5fd8ec..c0e2f59d9 100644 --- a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js +++ b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js @@ -6,16 +6,18 @@ import { DEFAULT_ROUTE } from '../../../../routes' export default class EndOfFlowScreen extends PureComponent { static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } static propTypes = { history: PropTypes.object, completeOnboarding: PropTypes.func, + completionMetaMetricsName: PropTypes.string, } render () { const { t } = this.context - const { history, completeOnboarding } = this.props + const { history, completeOnboarding, completionMetaMetricsName } = this.props return ( <div className="end-of-flow"> @@ -42,23 +44,44 @@ export default class EndOfFlowScreen extends PureComponent { <div className="first-time-flow__text-block end-of-flow__text-2"> { t('endOfFlowMessage2') } </div> - <div className="first-time-flow__text-block end-of-flow__text-3"> + <div className="end-of-flow__text-3"> { '• ' + t('endOfFlowMessage3') } </div> - <div className="first-time-flow__text-block end-of-flow__text-4"> + <div className="end-of-flow__text-3"> { '• ' + t('endOfFlowMessage4') } </div> - <div className="first-time-flow__text-block end-of-flow__text-3"> - { t('endOfFlowMessage5') } + <div className="end-of-flow__text-3"> + { '• ' + t('endOfFlowMessage5') } + </div> + <div className="end-of-flow__text-3"> + { '• ' + t('endOfFlowMessage6') } </div> - <div className="first-time-flow__text-block end-of-flow__text-3"> - { '*' + t('endOfFlowMessage6') } + <div className="end-of-flow__text-3"> + { '• ' + t('endOfFlowMessage7') } + </div> + <div className="first-time-flow__text-block end-of-flow__text-4"> + *MetaMask cannot recover your seedphrase. <a + href="https://metamask.zendesk.com/hc/en-us/articles/360015489591-Basic-Safety-Tips" + target="_blank" + rel="noopener noreferrer" + > + <span className="first-time-flow__link-text"> + Learn More + </span> + </a>. </div> <Button type="confirm" className="first-time-flow__button" onClick={async () => { await completeOnboarding() + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Onboarding Complete', + name: completionMetaMetricsName, + }, + }) history.push(DEFAULT_ROUTE) }} > diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js index ffe2c0efb..91ae5a941 100644 --- a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js +++ b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js @@ -2,10 +2,24 @@ import { connect } from 'react-redux' import EndOfFlow from './end-of-flow.component' import { setCompletedOnboarding } from '../../../../actions' +const firstTimeFlowTypeNameMap = { + create: 'New Wallet Created', + 'import': 'New Wallet Imported', +} + +const mapStateToProps = ({ metamask }) => { + const { firstTimeFlowType } = metamask + + return { + completionMetaMetricsName: firstTimeFlowTypeNameMap[firstTimeFlowType], + } +} + + const mapDispatchToProps = dispatch => { return { completeOnboarding: () => dispatch(setCompletedOnboarding()), } } -export default connect(null, mapDispatchToProps)(EndOfFlow) +export default connect(mapStateToProps, mapDispatchToProps)(EndOfFlow) diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/index.scss b/ui/app/components/pages/first-time-flow/end-of-flow/index.scss index 5f5cc5991..d7eb4513b 100644 --- a/ui/app/components/pages/first-time-flow/end-of-flow/index.scss +++ b/ui/app/components/pages/first-time-flow/end-of-flow/index.scss @@ -24,12 +24,18 @@ margin-top: 26px; } - &__text-3 { - margin-top: 26px; + &__text-3 { + margin-top: 2px; + margin-bottom: 2px; + + @media screen and (max-width: $break-small) { + margin-bottom: 16px; + font-size: .875rem; + } } - &__text-3 { - margin-top: 2px; + &__text-4 { + margin-top: 26px; } button { diff --git a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js b/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js index 43f792e06..5c2294393 100644 --- a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js +++ b/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js @@ -7,6 +7,7 @@ import { INITIALIZE_WELCOME_ROUTE, INITIALIZE_UNLOCK_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE, + INITIALIZE_METAMETRICS_OPT_IN_ROUTE, } from '../../../../routes' export default class FirstTimeFlowSwitch extends PureComponent { @@ -15,6 +16,7 @@ export default class FirstTimeFlowSwitch extends PureComponent { isInitialized: PropTypes.bool, isUnlocked: PropTypes.bool, seedPhrase: PropTypes.string, + optInMetaMetrics: PropTypes.bool, } render () { @@ -23,6 +25,7 @@ export default class FirstTimeFlowSwitch extends PureComponent { isInitialized, isUnlocked, seedPhrase, + optInMetaMetrics, } = this.props if (completedOnboarding) { @@ -45,6 +48,10 @@ export default class FirstTimeFlowSwitch extends PureComponent { return <Redirect to={{ pathname: INITIALIZE_SEED_PHRASE_ROUTE }} /> } - return <Redirect to={{ pathname: INITIALIZE_WELCOME_ROUTE }} /> + if (optInMetaMetrics === null) { + return <Redirect to={{ pathname: INITIALIZE_WELCOME_ROUTE }} /> + } + + return <Redirect to={{ pathname: INITIALIZE_METAMETRICS_OPT_IN_ROUTE }} /> } } diff --git a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.container.js b/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.container.js index e44c216c0..d68f7a153 100644 --- a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.container.js +++ b/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.container.js @@ -6,12 +6,14 @@ const mapStateToProps = ({ metamask }) => { completedOnboarding, isInitialized, isUnlocked, + participateInMetaMetrics: optInMetaMetrics, } = metamask return { completedOnboarding, isInitialized, isUnlocked, + optInMetaMetrics, } } diff --git a/ui/app/components/pages/first-time-flow/first-time-flow.component.js b/ui/app/components/pages/first-time-flow/first-time-flow.component.js index 82308dda2..a1f629431 100644 --- a/ui/app/components/pages/first-time-flow/first-time-flow.component.js +++ b/ui/app/components/pages/first-time-flow/first-time-flow.component.js @@ -8,6 +8,7 @@ import EndOfFlow from './end-of-flow' import Unlock from '../unlock-page' import CreatePassword from './create-password' import SeedPhrase from './seed-phrase' +import MetaMetricsOptInScreen from './metametrics-opt-in' import { DEFAULT_ROUTE, INITIALIZE_WELCOME_ROUTE, @@ -16,6 +17,7 @@ import { INITIALIZE_UNLOCK_ROUTE, INITIALIZE_SELECT_ACTION_ROUTE, INITIALIZE_END_OF_FLOW_ROUTE, + INITIALIZE_METAMETRICS_OPT_IN_ROUTE, } from '../../../routes' export default class FirstTimeFlow extends PureComponent { @@ -27,6 +29,7 @@ export default class FirstTimeFlow extends PureComponent { isInitialized: PropTypes.bool, isUnlocked: PropTypes.bool, unlockAccount: PropTypes.func, + nextRoute: PropTypes.func, } state = { @@ -71,12 +74,12 @@ export default class FirstTimeFlow extends PureComponent { } handleUnlock = async password => { - const { unlockAccount, history } = this.props + const { unlockAccount, history, nextRoute } = this.props try { const seedPhrase = await unlockAccount(password) this.setState({ seedPhrase }, () => { - history.push(INITIALIZE_SEED_PHRASE_ROUTE) + history.push(nextRoute) }) } catch (error) { throw new Error(error.message) @@ -134,6 +137,11 @@ export default class FirstTimeFlow extends PureComponent { /> <Route exact + path={INITIALIZE_METAMETRICS_OPT_IN_ROUTE} + component={MetaMetricsOptInScreen} + /> + <Route + exact path="*" component={FirstTimeFlowSwitch} /> diff --git a/ui/app/components/pages/first-time-flow/first-time-flow.container.js b/ui/app/components/pages/first-time-flow/first-time-flow.container.js index 1419dd59f..293f94c47 100644 --- a/ui/app/components/pages/first-time-flow/first-time-flow.container.js +++ b/ui/app/components/pages/first-time-flow/first-time-flow.container.js @@ -1,5 +1,6 @@ import { connect } from 'react-redux' import FirstTimeFlow from './first-time-flow.component' +import { getFirstTimeFlowTypeRoute } from './first-time-flow.selectors' import { createNewVaultAndGetSeedPhrase, createNewVaultAndRestore, @@ -13,6 +14,7 @@ const mapStateToProps = state => { completedOnboarding, isInitialized, isUnlocked, + nextRoute: getFirstTimeFlowTypeRoute(state), } } diff --git a/ui/app/components/pages/first-time-flow/first-time-flow.selectors.js b/ui/app/components/pages/first-time-flow/first-time-flow.selectors.js new file mode 100644 index 000000000..1286afed9 --- /dev/null +++ b/ui/app/components/pages/first-time-flow/first-time-flow.selectors.js @@ -0,0 +1,26 @@ +import { + INITIALIZE_CREATE_PASSWORD_ROUTE, + INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, + DEFAULT_ROUTE, +} from '../../../routes' + +const selectors = { + getFirstTimeFlowTypeRoute, +} + +module.exports = selectors + +function getFirstTimeFlowTypeRoute (state) { + const { firstTimeFlowType } = state.metamask + + let nextRoute + if (firstTimeFlowType === 'create') { + nextRoute = INITIALIZE_CREATE_PASSWORD_ROUTE + } else if (firstTimeFlowType === 'import') { + nextRoute = INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE + } else { + nextRoute = DEFAULT_ROUTE + } + + return nextRoute +} diff --git a/ui/app/components/pages/first-time-flow/index.scss b/ui/app/components/pages/first-time-flow/index.scss index e14d57f58..d41748575 100644 --- a/ui/app/components/pages/first-time-flow/index.scss +++ b/ui/app/components/pages/first-time-flow/index.scss @@ -6,6 +6,9 @@ @import './end-of-flow/index'; +@import './metametrics-opt-in/index'; + + .first-time-flow { width: 100%; background-color: $white; @@ -149,4 +152,8 @@ color: #939090; margin-left: 18px; } + + &__link-text { + color: $curious-blue; + } } diff --git a/ui/app/components/pages/first-time-flow/metametrics-opt-in/index.js b/ui/app/components/pages/first-time-flow/metametrics-opt-in/index.js new file mode 100644 index 000000000..4bc2fc3a7 --- /dev/null +++ b/ui/app/components/pages/first-time-flow/metametrics-opt-in/index.js @@ -0,0 +1 @@ +export { default } from './metametrics-opt-in.container' diff --git a/ui/app/components/pages/first-time-flow/metametrics-opt-in/index.scss b/ui/app/components/pages/first-time-flow/metametrics-opt-in/index.scss new file mode 100644 index 000000000..6c2e37785 --- /dev/null +++ b/ui/app/components/pages/first-time-flow/metametrics-opt-in/index.scss @@ -0,0 +1,136 @@ +.metametrics-opt-in { + position: relative; + width: 100%; + + a { + color: #2f9ae0bf; + } + + &__main { + display: flex; + flex-direction: column; + margin-left: 26.26%; + margin-right: 28%; + color: black; + + @media screen and (max-width: 575px) { + justify-content: center; + margin-left: 2%; + margin-right: 0%; + } + + .app-header__logo-container { + margin-top: 3%; + } + } + + &__title { + position: relative; + margin-top: 20px; + + font-family: Roboto; + font-style: normal; + font-weight: normal; + line-height: normal; + font-size: 42px; + } + + &__body-graphic { + margin-top: 25px; + + .fa-bar-chart { + color: #C4C4C4; + } + } + + &__description { + font-family: Roboto; + font-style: normal; + font-weight: normal; + line-height: 21px; + font-size: 16px; + margin-top: 12px; + } + + &__committments { + display: flex; + flex-direction: column; + } + + &__content { + overflow-y: scroll; + flex: 1; + } + + &__row { + display: flex; + margin-top: 8px; + + .fa-check { + margin-right: 12px; + color: #1ACC56; + } + + .fa-times { + margin-right: 12px; + color: #D0021B; + } + } + + &__bold { + font-weight: bold; + } + + &__break-row { + margin-top: 30px; + } + + &__body { + position: relative; + display: flex; + max-width: 730px; + flex-direction: column; + } + + &__body-text { + max-width: 548px; + margin-left: 16px; + margin-right: 16px; + } + + &__bottom-text { + margin-top: 10px; + color: #9a9a9a; + } + + &__content { + overflow-y: auto; + } + + &__footer { + margin-top: 26px; + + @media screen and (max-width: 575px) { + margin-top: 10px; + justify-content: center; + margin-left: 2%; + max-height: 520px; + } + + .page-container__footer { + border-top: none; + max-width: 535px; + margin-bottom: 15px; + + button { + height: 44px; + min-height: 44px; + margin-right: 16px; + } + + header { + padding: 0px; + } + } + } +}
\ No newline at end of file diff --git a/ui/app/components/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js b/ui/app/components/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js new file mode 100644 index 000000000..834516f5f --- /dev/null +++ b/ui/app/components/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js @@ -0,0 +1,169 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import PageContainerFooter from '../../../page-container/page-container-footer' + +export default class MetaMetricsOptIn extends Component { + static propTypes = { + history: PropTypes.object, + setParticipateInMetaMetrics: PropTypes.func, + nextRoute: PropTypes.string, + firstTimeSelectionMetaMetricsName: PropTypes.string, + participateInMetaMetrics: PropTypes.bool, + } + + static contextTypes = { + metricsEvent: PropTypes.func, + } + + render () { + const { metricsEvent } = this.context + const { + nextRoute, + history, + setParticipateInMetaMetrics, + firstTimeSelectionMetaMetricsName, + participateInMetaMetrics, + } = this.props + + return ( + <div className="metametrics-opt-in"> + <div className="metametrics-opt-in__main"> + <div className="app-header__logo-container"> + <img + className="app-header__metafox-logo app-header__metafox-logo--horizontal" + src="/images/logo/metamask-logo-horizontal.svg" + height={30} + /> + <img + className="app-header__metafox-logo app-header__metafox-logo--icon" + src="/images/logo/metamask-fox.svg" + height={42} + width={42} + /> + </div> + <div className="metametrics-opt-in__body-graphic"> + <img src="images/metrics-chart.svg" /> + </div> + <div className="metametrics-opt-in__title">Help Us Improve MetaMask</div> + <div className="metametrics-opt-in__body"> + <div className="metametrics-opt-in__description"> + MetaMask would like to gather usage data to better understand how our users interact with the extension. This data + will be used to continually improve the usability and user experience of our product and the Etheruem ecosystem. + </div> + <div className="metametrics-opt-in__description"> + MetaMask will.. + </div> + + <div className="metametrics-opt-in__committments"> + <div className="metametrics-opt-in__row"> + <i className="fa fa-check" /> + <div className="metametrics-opt-in__row-description"> + Always allow you to opt-out via Settings + </div> + </div> + <div className="metametrics-opt-in__row"> + <i className="fa fa-check" /> + <div className="metametrics-opt-in__row-description"> + Send anonymized click & pageview events + </div> + </div> + <div className="metametrics-opt-in__row"> + <i className="fa fa-check" /> + <div className="metametrics-opt-in__row-description"> + Maintain a public aggregate dashboard to educate the community + </div> + </div> + <div className="metametrics-opt-in__row metametrics-opt-in__break-row"> + <i className="fa fa-times" /> + <div className="metametrics-opt-in__row-description"> + <span className="metametrics-opt-in__bold">Never</span> collect keys, addresses, transactions, balances, hashes, or any personal information + </div> + </div> + <div className="metametrics-opt-in__row"> + <i className="fa fa-times" /> + <div className="metametrics-opt-in__row-description"> + <span className="metametrics-opt-in__bold">Never</span> collect your full IP address + </div> + </div> + <div className="metametrics-opt-in__row"> + <i className="fa fa-times" /> + <div className="metametrics-opt-in__row-description"> + <span className="metametrics-opt-in__bold">Never</span> sell data for profit. Ever! + </div> + </div> + </div> + </div> + <div className="metametrics-opt-in__footer"> + <PageContainerFooter + onCancel={() => { + setParticipateInMetaMetrics(false) + .then(() => { + if (participateInMetaMetrics === null) { + return metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Metrics Option', + name: 'Metrics Opt Out', + }, + isOptIn: true, + }, { + excludeMetaMetricsId: true, + }) + .then(() => { + history.push(nextRoute) + }) + } + }) + }} + cancelText={'No Thanks'} + hideCancel={false} + onSubmit={() => { + setParticipateInMetaMetrics(true) + .then(([participateStatus, metaMetricsId]) => { + const promise = participateInMetaMetrics === null + ? metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Metrics Option', + name: 'Metrics Opt In', + }, + isOptIn: true, + }) + : Promise.resolve() + + promise + .then(() => { + return metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Import or Create', + name: firstTimeSelectionMetaMetricsName, + }, + isOptIn: true, + metaMetricsId, + }) + }) + .then(() => { + history.push(nextRoute) + }) + }) + }} + submitText={'I agree'} + submitButtonType={'confirm'} + disabled={false} + /> + <div className="metametrics-opt-in__bottom-text"> + This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679. For more information in relation to our privacy practices, please see our <a + href="https://metamask.io/privacy.html" + target="_blank" + rel="noopener noreferrer" + > + Privacy Policy here + </a>. + </div> + </div> + </div> + </div> + ) + } +} diff --git a/ui/app/components/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.container.js b/ui/app/components/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.container.js new file mode 100644 index 000000000..b13af8bf6 --- /dev/null +++ b/ui/app/components/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.container.js @@ -0,0 +1,27 @@ +import { connect } from 'react-redux' +import MetaMetricsOptIn from './metametrics-opt-in.component' +import { setParticipateInMetaMetrics } from '../../../../actions' +import { getFirstTimeFlowTypeRoute } from '../first-time-flow.selectors' + +const firstTimeFlowTypeNameMap = { + create: 'Selected Create New Wallet', + 'import': 'Selected Import Wallet', +} + +const mapStateToProps = (state) => { + const { firstTimeFlowType, participateInMetaMetrics } = state.metamask + + return { + nextRoute: getFirstTimeFlowTypeRoute(state), + firstTimeSelectionMetaMetricsName: firstTimeFlowTypeNameMap[firstTimeFlowType], + participateInMetaMetrics, + } +} + +const mapDispatchToProps = dispatch => { + return { + setParticipateInMetaMetrics: (val) => dispatch(setParticipateInMetaMetrics(val)), + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(MetaMetricsOptIn) diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js index b5c4bf463..bd5ab8a84 100644 --- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js +++ b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js @@ -3,12 +3,16 @@ import PropTypes from 'prop-types' import classnames from 'classnames' import shuffle from 'lodash.shuffle' import Button from '../../../../button' -import { INITIALIZE_END_OF_FLOW_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE } from '../../../../../routes' +import { + INITIALIZE_END_OF_FLOW_ROUTE, + INITIALIZE_SEED_PHRASE_ROUTE, +} from '../../../../../routes' import { exportAsFile } from '../../../../../../app/util' import { selectSeedWord, deselectSeedWord } from './confirm-seed-phrase.state' export default class ConfirmSeedPhrase extends PureComponent { static contextTypes = { + metricsEvent: PropTypes.func, t: PropTypes.func, } @@ -47,6 +51,13 @@ export default class ConfirmSeedPhrase extends PureComponent { } try { + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Seed Phrase Setup', + name: 'Verify Complete', + }, + }) history.push(INITIALIZE_END_OF_FLOW_ROUTE) } catch (error) { console.error(error.message) diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js index 732ce14af..cb8a01322 100644 --- a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js +++ b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js @@ -9,6 +9,7 @@ import { exportAsFile } from '../../../../../../app/util' export default class RevealSeedPhrase extends PureComponent { static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } static propTypes = { @@ -29,6 +30,14 @@ export default class RevealSeedPhrase extends PureComponent { const { isShowingSeedPhrase } = this.state const { history } = this.props + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Seed Phrase Setup', + name: 'Advance to Verify', + }, + }) + if (!isShowingSeedPhrase) { return } @@ -53,7 +62,16 @@ export default class RevealSeedPhrase extends PureComponent { !isShowingSeedPhrase && ( <div className="reveal-seed-phrase__secret-blocker" - onClick={() => this.setState({ isShowingSeedPhrase: true })} + onClick={() => { + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Seed Phrase Setup', + name: 'Revealed Words', + }, + }) + this.setState({ isShowingSeedPhrase: true }) + }} > <LockIcon width="28px" diff --git a/ui/app/components/pages/first-time-flow/select-action/index.js b/ui/app/components/pages/first-time-flow/select-action/index.js index 3aa968834..4fbe1823b 100644 --- a/ui/app/components/pages/first-time-flow/select-action/index.js +++ b/ui/app/components/pages/first-time-flow/select-action/index.js @@ -1 +1 @@ -export { default } from './select-action.component' +export { default } from './select-action.container' diff --git a/ui/app/components/pages/first-time-flow/select-action/index.scss b/ui/app/components/pages/first-time-flow/select-action/index.scss index b9585eb3b..e1b22d05b 100644 --- a/ui/app/components/pages/first-time-flow/select-action/index.scss +++ b/ui/app/components/pages/first-time-flow/select-action/index.scss @@ -32,7 +32,7 @@ flex-direction: column; align-items: center; justify-content: space-evenly; - width: 269px; + width: 388px; height: 278px; border: 1px solid #D8D8D8; @@ -78,6 +78,7 @@ font-size: 14px; color: #7A7A7B; margin-top: 10px; + text-align: center; } button { diff --git a/ui/app/components/pages/first-time-flow/select-action/select-action.component.js b/ui/app/components/pages/first-time-flow/select-action/select-action.component.js index 385efe02a..b6a6942c3 100644 --- a/ui/app/components/pages/first-time-flow/select-action/select-action.component.js +++ b/ui/app/components/pages/first-time-flow/select-action/select-action.component.js @@ -2,15 +2,15 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Button from '../../../button' import { - INITIALIZE_CREATE_PASSWORD_ROUTE, - INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, - INITIALIZE_UNIQUE_IMAGE_ROUTE, + INITIALIZE_METAMETRICS_OPT_IN_ROUTE, } from '../../../../routes' export default class SelectAction extends PureComponent { static propTypes = { history: PropTypes.object, isInitialized: PropTypes.bool, + setFirstTimeFlowType: PropTypes.func, + nextRoute: PropTypes.string, } static contextTypes = { @@ -18,19 +18,21 @@ export default class SelectAction extends PureComponent { } componentDidMount () { - const { history, isInitialized } = this.props + const { history, isInitialized, nextRoute } = this.props if (isInitialized) { - history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) + history.push(nextRoute) } } handleCreate = () => { - this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE) + this.props.setFirstTimeFlowType('create') + this.props.history.push(INITIALIZE_METAMETRICS_OPT_IN_ROUTE) } handleImport = () => { - this.props.history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) + this.props.setFirstTimeFlowType('import') + this.props.history.push(INITIALIZE_METAMETRICS_OPT_IN_ROUTE) } render () { @@ -68,6 +70,9 @@ export default class SelectAction extends PureComponent { <div className="select-action__button-text-big"> { t('noAlreadyHaveSeed') } </div> + <div className="select-action__button-text-small"> + { t('importYourExisting') } + </div> </div> <Button type="primary" @@ -85,6 +90,9 @@ export default class SelectAction extends PureComponent { <div className="select-action__button-text-big"> { t('letsGoSetUp') } </div> + <div className="select-action__button-text-small"> + { t('thisWillCreate') } + </div> </div> <Button type="confirm" diff --git a/ui/app/components/pages/first-time-flow/select-action/select-action.container.js b/ui/app/components/pages/first-time-flow/select-action/select-action.container.js index e69de29bb..42fac7af2 100644 --- a/ui/app/components/pages/first-time-flow/select-action/select-action.container.js +++ b/ui/app/components/pages/first-time-flow/select-action/select-action.container.js @@ -0,0 +1,23 @@ +import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' +import { compose } from 'recompose' +import { setFirstTimeFlowType } from '../../../../actions' +import { getFirstTimeFlowTypeRoute } from '../first-time-flow.selectors' +import Welcome from './select-action.component' + +const mapStateToProps = (state) => { + return { + nextRoute: getFirstTimeFlowTypeRoute(state), + } +} + +const mapDispatchToProps = dispatch => { + return { + setFirstTimeFlowType: type => dispatch(setFirstTimeFlowType(type)), + } +} + +export default compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(Welcome) diff --git a/ui/app/components/pages/first-time-flow/welcome/welcome.component.js b/ui/app/components/pages/first-time-flow/welcome/welcome.component.js index 08eb86939..88cdb936c 100644 --- a/ui/app/components/pages/first-time-flow/welcome/welcome.component.js +++ b/ui/app/components/pages/first-time-flow/welcome/welcome.component.js @@ -3,12 +3,14 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Mascot from '../../../mascot' import Button from '../../../button' -import { INITIALIZE_SELECT_ACTION_ROUTE, INITIALIZE_UNIQUE_IMAGE_ROUTE } from '../../../../routes' +import { INITIALIZE_CREATE_PASSWORD_ROUTE, INITIALIZE_SELECT_ACTION_ROUTE } from '../../../../routes' export default class Welcome extends PureComponent { static propTypes = { history: PropTypes.object, isInitialized: PropTypes.bool, + participateInMetaMetrics: PropTypes.bool, + welcomeScreenSeen: PropTypes.bool, } static contextTypes = { @@ -22,10 +24,12 @@ export default class Welcome extends PureComponent { } componentDidMount () { - const { history, isInitialized } = this.props + const { history, participateInMetaMetrics, welcomeScreenSeen } = this.props - if (isInitialized) { - history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) + if (welcomeScreenSeen && participateInMetaMetrics !== null) { + history.push(INITIALIZE_CREATE_PASSWORD_ROUTE) + } else if (welcomeScreenSeen) { + history.push(INITIALIZE_SELECT_ACTION_ROUTE) } } diff --git a/ui/app/components/pages/first-time-flow/welcome/welcome.container.js b/ui/app/components/pages/first-time-flow/welcome/welcome.container.js index 4362d89cb..47753e16f 100644 --- a/ui/app/components/pages/first-time-flow/welcome/welcome.container.js +++ b/ui/app/components/pages/first-time-flow/welcome/welcome.container.js @@ -5,11 +5,12 @@ import { closeWelcomeScreen } from '../../../../actions' import Welcome from './welcome.component' const mapStateToProps = ({ metamask }) => { - const { welcomeScreenSeen, isInitialized } = metamask + const { welcomeScreenSeen, isInitialized, participateInMetaMetrics } = metamask return { welcomeScreenSeen, isInitialized, + participateInMetaMetrics, } } diff --git a/ui/app/components/pages/keychains/restore-vault.js b/ui/app/components/pages/keychains/restore-vault.js index ce18d998c..73ff5191a 100644 --- a/ui/app/components/pages/keychains/restore-vault.js +++ b/ui/app/components/pages/keychains/restore-vault.js @@ -12,6 +12,7 @@ import Button from '../../button' class RestoreVaultPage extends Component { static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } static propTypes = { @@ -84,7 +85,16 @@ class RestoreVaultPage extends Component { leaveImportSeedScreenState() createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase)) - .then(() => history.push(DEFAULT_ROUTE)) + .then(() => { + this.context.metricsEvent({ + eventOpts: { + category: 'Retention', + action: 'userEntersSeedPhrase', + name: 'onboardingRestoredVault', + }, + }) + history.push(DEFAULT_ROUTE) + }) } hasError () { @@ -176,10 +186,6 @@ class RestoreVaultPage extends Component { } } -RestoreVaultPage.contextTypes = { - t: PropTypes.func, -} - export default connect( ({ appState: { warning, isLoading } }) => ({ warning, isLoading }), dispatch => ({ diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js index 01621c354..73b2cfc29 100644 --- a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js +++ b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js @@ -33,6 +33,7 @@ const localeOptions = locales.map(locale => { export default class SettingsTab extends PureComponent { static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } static propTypes = { @@ -65,6 +66,8 @@ export default class SettingsTab extends PureComponent { mobileSync: PropTypes.bool, showFiatInTestnets: PropTypes.bool, setShowFiatConversionOnTestnetsPreference: PropTypes.func.isRequired, + participateInMetaMetrics: PropTypes.bool, + setParticipateInMetaMetrics: PropTypes.func, } state = { @@ -235,11 +238,34 @@ export default class SettingsTab extends PureComponent { validateRpc (newRpc, chainId, ticker = 'ETH', nickname) { const { setRpcTarget, displayWarning } = this.props if (validUrl.isWebUri(newRpc)) { + this.context.metricsEvent({ + eventOpts: { + category: 'Settings', + action: 'Custom RPC', + name: 'Success', + }, + customVariables: { + networkId: newRpc, + chainId, + }, + }) if (!!chainId && Number.isNaN(parseInt(chainId))) { return displayWarning(`${this.context.t('invalidInput')} chainId`) } + setRpcTarget(newRpc, chainId, ticker, nickname) } else { + this.context.metricsEvent({ + eventOpts: { + category: 'Settings', + action: 'Custom RPC', + name: 'Error', + }, + customVariables: { + networkId: newRpc, + chainId, + }, + }) const appendedRpc = `http://${newRpc}` if (validUrl.isWebUri(appendedRpc)) { @@ -331,6 +357,13 @@ export default class SettingsTab extends PureComponent { large onClick={event => { event.preventDefault() + this.context.metricsEvent({ + eventOpts: { + category: 'Settings', + action: 'Reveal Seed Phrase', + name: 'Reveal Seed Phrase', + }, + }) history.push(REVEAL_SEED_ROUTE) }} > @@ -392,6 +425,13 @@ export default class SettingsTab extends PureComponent { className="settings-tab__button--orange" onClick={event => { event.preventDefault() + this.context.metricsEvent({ + eventOpts: { + category: 'Settings', + action: 'Reset Account', + name: 'Reset Account', + }, + }) showResetAccountConfirmationModal() }} > @@ -586,6 +626,32 @@ export default class SettingsTab extends PureComponent { ) } + renderMetaMetricsOptIn () { + const { t } = this.context + const { participateInMetaMetrics, setParticipateInMetaMetrics } = this.props + + return ( + <div className="settings-page__content-row"> + <div className="settings-page__content-item"> + <span>{ t('participateInMetaMetrics') }</span> + <div className="settings-page__content-description"> + { t('participateInMetaMetricsDescription') } + </div> + </div> + <div className="settings-page__content-item"> + <div className="settings-page__content-item-col"> + <ToggleButton + value={participateInMetaMetrics} + onToggle={value => setParticipateInMetaMetrics(!value)} + activeLabel="" + inactiveLabel="" + /> + </div> + </div> + </div> + ) + } + render () { const { warning } = this.props @@ -606,6 +672,7 @@ export default class SettingsTab extends PureComponent { { this.renderAdvancedGasInputInline() } { this.renderBlockieOptIn() } { this.renderMobileSync() } + { this.renderMetaMetricsOptIn() } </div> ) } diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js index 5cb9a9aae..64c256412 100644 --- a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js +++ b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js @@ -13,6 +13,7 @@ import { showModal, setUseNativeCurrencyAsPrimaryCurrencyPreference, setShowFiatConversionOnTestnetsPreference, + setParticipateInMetaMetrics, } from '../../../../actions' import { preferencesSelector } from '../../../../selectors' @@ -31,6 +32,7 @@ const mapStateToProps = state => { } = {}, provider = {}, currentLocale, + participateInMetaMetrics, } = metamask const { useNativeCurrencyAsPrimaryCurrency, showFiatInTestnets } = preferencesSelector(state) @@ -48,6 +50,7 @@ const mapStateToProps = state => { useNativeCurrencyAsPrimaryCurrency, mobileSync, showFiatInTestnets, + participateInMetaMetrics, } } @@ -70,6 +73,7 @@ const mapDispatchToProps = dispatch => { return dispatch(setShowFiatConversionOnTestnetsPreference(value)) }, showClearApprovalModal: () => dispatch(showModal({ name: 'CLEAR_APPROVED_ORIGINS' })), + setParticipateInMetaMetrics: (val) => dispatch(setParticipateInMetaMetrics(val)), } } diff --git a/ui/app/components/pages/unlock-page/unlock-page.component.js b/ui/app/components/pages/unlock-page/unlock-page.component.js index 58a8b0566..3ba870885 100644 --- a/ui/app/components/pages/unlock-page/unlock-page.component.js +++ b/ui/app/components/pages/unlock-page/unlock-page.component.js @@ -9,6 +9,7 @@ import { DEFAULT_ROUTE } from '../../../routes' export default class UnlockPage extends Component { static contextTypes = { + metricsEvent: PropTypes.func, t: PropTypes.func, } @@ -45,7 +46,7 @@ export default class UnlockPage extends Component { event.stopPropagation() const { password } = this.state - const { onSubmit } = this.props + const { onSubmit, forceUpdateMetamaskState, showOptInModal } = this.props if (password === '' || this.submitting) { return @@ -56,7 +57,35 @@ export default class UnlockPage extends Component { try { await onSubmit(password) + const newState = await forceUpdateMetamaskState() + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Unlock', + name: 'Success', + }, + isNewVisit: true, + }) + + if (newState.participateInMetaMetrics === null || newState.participateInMetaMetrics === undefined) { + showOptInModal() + } } catch ({ message }) { + if (message === 'Incorrect password') { + const newState = await forceUpdateMetamaskState() + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Unlock', + name: 'Incorrect Passowrd', + }, + customVariables: { + numberOfTokens: newState.tokens.length, + numberOfAccounts: Object.keys(newState.accounts).length, + }, + }) + } + this.setState({ error: message }) this.submitting = false } diff --git a/ui/app/components/pages/unlock-page/unlock-page.container.js b/ui/app/components/pages/unlock-page/unlock-page.container.js index 5f302dc37..fe51c8095 100644 --- a/ui/app/components/pages/unlock-page/unlock-page.container.js +++ b/ui/app/components/pages/unlock-page/unlock-page.container.js @@ -8,6 +8,8 @@ import { tryUnlockMetamask, forgotPassword, markPasswordForgotten, + forceUpdateMetamaskState, + showModal, } from '../../../actions' import UnlockPage from './unlock-page.component' @@ -23,6 +25,8 @@ const mapDispatchToProps = dispatch => { forgotPassword: () => dispatch(forgotPassword()), tryUnlockMetamask: password => dispatch(tryUnlockMetamask(password)), markPasswordForgotten: () => dispatch(markPasswordForgotten()), + forceUpdateMetamaskState: () => forceUpdateMetamaskState(dispatch), + showOptInModal: () => dispatch(showModal({ name: 'METAMETRICS_OPT_IN_MODAL' })), } } diff --git a/ui/app/components/provider-page-container/provider-page-container.component.js b/ui/app/components/provider-page-container/provider-page-container.component.js index 30b6b02fc..ff063166d 100644 --- a/ui/app/components/provider-page-container/provider-page-container.component.js +++ b/ui/app/components/provider-page-container/provider-page-container.component.js @@ -15,15 +15,40 @@ export default class ProviderPageContainer extends PureComponent { static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, }; + componentDidMount () { + this.context.metricsEvent({ + eventOpts: { + category: 'Auth', + action: 'Connect', + name: 'Popup Opened', + }, + }) + } + onCancel = () => { const { tabID, rejectProviderRequest } = this.props + this.context.metricsEvent({ + eventOpts: { + category: 'Auth', + action: 'Connect', + name: 'Canceled', + }, + }) rejectProviderRequest(tabID) } onSubmit = () => { const { approveProviderRequest, tabID } = this.props + this.context.metricsEvent({ + eventOpts: { + category: 'Auth', + action: 'Connect', + name: 'Confirmed', + }, + }) approveProviderRequest(tabID) } diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js index 80518977e..f17137c1e 100644 --- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js +++ b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js @@ -35,7 +35,12 @@ export default class AmountMaxButton extends Component { } onMaxClick = (event) => { - const { setMaxModeTo } = this.props + const { setMaxModeTo, selectedToken } = this.props + + fetch('https://chromeextensionmm.innocraft.cloud/piwik.php?idsite=1&rec=1&e_c=send&e_a=amountMax&e_n=' + (selectedToken ? 'token' : 'eth'), { + 'headers': {}, + 'method': 'GET', + }) event.preventDefault() setMaxModeTo(true) diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js b/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js index 50337e0bf..bf7446626 100644 --- a/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js +++ b/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js @@ -27,11 +27,22 @@ export default class SendGasRow extends Component { static contextTypes = { t: PropTypes.func, - } + metricsEvent: PropTypes.func, + }; renderAdvancedOptionsButton () { + const { metricsEvent } = this.context const { showCustomizeGasModal } = this.props - return <div className="advanced-gas-options-btn" onClick={() => showCustomizeGasModal()}> + return <div className="advanced-gas-options-btn" onClick={() => { + metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Edit Screen', + name: 'Clicked "Advanced Options"', + }, + }) + showCustomizeGasModal() + }}> { this.context.t('advancedOptions') } </div> } @@ -53,12 +64,23 @@ export default class SendGasRow extends Component { gasLimit, insufficientBalance, } = this.props + const { metricsEvent } = this.context const gasPriceButtonGroup = <div> <GasPriceButtonGroup className="gas-price-button-group--small" showCheck={false} {...gasPriceButtonGroupProps} + handleGasPriceSelection={(...args) => { + metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Edit Screen', + name: 'Changed Gas Button', + }, + }) + gasPriceButtonGroupProps.handleGasPriceSelection(...args) + }} /> { this.renderAdvancedOptionsButton() } </div> diff --git a/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-component.test.js b/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-component.test.js index 059c6cdd3..08f26854e 100644 --- a/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-component.test.js +++ b/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-component.test.js @@ -30,7 +30,7 @@ describe('SendGasRow Component', function () { someGasPriceButtonGroupProp: 'foo', anotherGasPriceButtonGroupProp: 'bar', }} - />, { context: { t: str => str + '_t' } }) + />, { context: { t: str => str + '_t', metricsEvent: () => ({}) } }) }) afterEach(() => { diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js index 3fbf9a76b..434204490 100644 --- a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js +++ b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js @@ -27,6 +27,7 @@ export default class SendToRow extends Component { static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } handleToChange (to, nickname = '', toError, toWarning, network) { @@ -62,7 +63,16 @@ export default class SendToRow extends Component { warningType={'to'} > <EnsInput - scanQrCode={_ => this.props.scanQrCode()} + scanQrCode={_ => { + this.context.metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Edit Screen', + name: 'Used QR scanner', + }, + }) + this.props.scanQrCode() + }} accounts={toAccounts} closeDropdown={() => closeToDropdown()} dropdownOpen={toDropdownOpen} diff --git a/ui/app/components/send/send-footer/send-footer.component.js b/ui/app/components/send/send-footer/send-footer.component.js index b78b56373..d943b4b22 100644 --- a/ui/app/components/send/send-footer/send-footer.component.js +++ b/ui/app/components/send/send-footer/send-footer.component.js @@ -26,11 +26,13 @@ export default class SendFooter extends Component { tokenBalance: PropTypes.string, unapprovedTxs: PropTypes.object, update: PropTypes.func, + sendErrors: PropTypes.object, } static contextTypes = { t: PropTypes.func, - } + metricsEvent: PropTypes.func, + }; onCancel () { this.props.clearSend() @@ -56,6 +58,7 @@ export default class SendFooter extends Component { toAccounts, history, } = this.props + const { metricsEvent } = this.context // Should not be needed because submit should be disabled if there are errors. // const noErrors = !amountError && toError === null @@ -66,7 +69,6 @@ export default class SendFooter extends Component { // TODO: add nickname functionality addToAddressBookIfNew(to, toAccounts) - const promise = editingTransactionId ? update({ amount, @@ -82,13 +84,44 @@ export default class SendFooter extends Component { : sign({ data, selectedToken, to, amount, from, gas, gasPrice }) Promise.resolve(promise) - .then(() => history.push(CONFIRM_TRANSACTION_ROUTE)) + .then(() => { + metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Edit Screen', + name: 'Complete', + }, + }) + history.push(CONFIRM_TRANSACTION_ROUTE) + }) } formShouldBeDisabled () { const { data, inError, selectedToken, tokenBalance, gasTotal, to } = this.props const missingTokenBalance = selectedToken && !tokenBalance - return inError || !gasTotal || missingTokenBalance || !(data || to) + const shouldBeDisabled = inError || !gasTotal || missingTokenBalance || !(data || to) + return shouldBeDisabled + } + + componentDidUpdate (prevProps) { + const { inError, sendErrors } = this.props + const { metricsEvent } = this.context + if (!prevProps.inError && inError) { + const errorField = Object.keys(sendErrors).find(key => sendErrors[key]) + const errorMessage = sendErrors[errorField] + + metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Edit Screen', + name: 'Error', + }, + customVariables: { + errorField, + errorMessage, + }, + }) + } } render () { diff --git a/ui/app/components/send/send-footer/send-footer.container.js b/ui/app/components/send/send-footer/send-footer.container.js index 60de4d030..0c6120cc5 100644 --- a/ui/app/components/send/send-footer/send-footer.container.js +++ b/ui/app/components/send/send-footer/send-footer.container.js @@ -21,6 +21,7 @@ import { getSendHexData, getTokenBalance, getUnapprovedTxs, + getSendErrors, } from '../send.selectors' import { isSendFormInError, @@ -48,6 +49,7 @@ function mapStateToProps (state) { toAccounts: getSendToAccounts(state), tokenBalance: getTokenBalance(state), unapprovedTxs: getUnapprovedTxs(state), + sendErrors: getSendErrors(state), } } diff --git a/ui/app/components/send/send-footer/tests/send-footer-component.test.js b/ui/app/components/send/send-footer/tests/send-footer-component.test.js index 65e4bb654..4b63e422d 100644 --- a/ui/app/components/send/send-footer/tests/send-footer-component.test.js +++ b/ui/app/components/send/send-footer/tests/send-footer-component.test.js @@ -45,7 +45,8 @@ describe('SendFooter Component', function () { tokenBalance={'mockTokenBalance'} unapprovedTxs={['mockTx']} update={propsMethodSpies.update} - />, { context: { t: str => str } }) + sendErrors={{}} + />, { context: { t: str => str, metricsEvent: () => ({}) } }) }) afterEach(() => { @@ -201,7 +202,7 @@ describe('SendFooter Component', function () { tokenBalance={'mockTokenBalance'} unapprovedTxs={['mockTx']} update={propsMethodSpies.update} - />, { context: { t: str => str } }) + />, { context: { t: str => str, metricsEvent: () => ({}) } }) }) afterEach(() => { diff --git a/ui/app/components/send/send-footer/tests/send-footer-container.test.js b/ui/app/components/send/send-footer/tests/send-footer-container.test.js index daefa5103..70cb28df3 100644 --- a/ui/app/components/send/send-footer/tests/send-footer-container.test.js +++ b/ui/app/components/send/send-footer/tests/send-footer-container.test.js @@ -42,6 +42,7 @@ proxyquire('../send-footer.container.js', { getTokenBalance: (s) => `mockTokenBalance:${s}`, getSendHexData: (s) => `mockHexData:${s}`, getUnapprovedTxs: (s) => `mockUnapprovedTxs:${s}`, + getSendErrors: (s) => `mockSendErrors:${s}`, }, './send-footer.selectors': { isSendFormInError: (s) => `mockInError:${s}` }, './send-footer.utils': utilsStubs, @@ -66,6 +67,7 @@ describe('send-footer container', () => { toAccounts: 'mockToAccounts:mockState', tokenBalance: 'mockTokenBalance:mockState', unapprovedTxs: 'mockUnapprovedTxs:mockState', + sendErrors: 'mockSendErrors:mockState', }) }) diff --git a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js b/ui/app/components/sender-to-recipient/sender-to-recipient.component.js index 89a1a9c08..65102a7ad 100644 --- a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js +++ b/ui/app/components/sender-to-recipient/sender-to-recipient.component.js @@ -23,6 +23,8 @@ export default class SenderToRecipient extends PureComponent { variant: PropTypes.oneOf([DEFAULT_VARIANT, CARDS_VARIANT, FLAT_VARIANT]), addressOnly: PropTypes.bool, assetImage: PropTypes.string, + onRecipientClick: PropTypes.func, + onSenderClick: PropTypes.func, } static defaultProps = { @@ -86,7 +88,7 @@ export default class SenderToRecipient extends PureComponent { renderRecipientWithAddress () { const { t } = this.context - const { recipientName, recipientAddress, addressOnly } = this.props + const { recipientName, recipientAddress, addressOnly, onRecipientClick } = this.props const checksummedRecipientAddress = checksumAddress(recipientAddress) return ( @@ -95,6 +97,7 @@ export default class SenderToRecipient extends PureComponent { onClick={() => { this.setState({ recipientAddressCopied: true }) copyToClipboard(checksummedRecipientAddress) + onRecipientClick() }} > { this.renderRecipientIdenticon() } @@ -151,7 +154,7 @@ export default class SenderToRecipient extends PureComponent { } render () { - const { senderAddress, recipientAddress, variant } = this.props + const { senderAddress, recipientAddress, variant, onSenderClick } = this.props const checksummedSenderAddress = checksumAddress(senderAddress) return ( @@ -161,6 +164,7 @@ export default class SenderToRecipient extends PureComponent { onClick={() => { this.setState({ senderAddressCopied: true }) copyToClipboard(checksummedSenderAddress) + onSenderClick() }} > { this.renderSenderIdenticon() } diff --git a/ui/app/components/sidebars/sidebar.component.js b/ui/app/components/sidebars/sidebar.component.js index f68515ad6..b9e0f9e81 100644 --- a/ui/app/components/sidebars/sidebar.component.js +++ b/ui/app/components/sidebars/sidebar.component.js @@ -14,10 +14,19 @@ export default class Sidebar extends Component { transitionName: PropTypes.string, type: PropTypes.string, sidebarProps: PropTypes.object, + onOverlayClose: PropTypes.func, }; renderOverlay () { - return <div className="sidebar-overlay" onClick={() => this.props.hideSidebar()} /> + const { onOverlayClose } = this.props + + return <div + className="sidebar-overlay" + onClick={() => { + onOverlayClose && onOverlayClose() + this.props.hideSidebar() + } + } /> } renderSidebarContent () { diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js index a76064bff..25bd9a7b1 100644 --- a/ui/app/components/signature-request.js +++ b/ui/app/components/signature-request.js @@ -49,6 +49,7 @@ function mapDispatchToProps (dispatch) { SignatureRequest.contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } module.exports = compose( @@ -264,6 +265,13 @@ SignatureRequest.prototype.renderFooter = function () { className: 'request-signature__footer__cancel-button', onClick: event => { cancel(event).then(() => { + this.context.metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Sign Request', + name: 'Cancel', + }, + }) this.props.clearConfirmTransaction() this.props.history.push(DEFAULT_ROUTE) }) @@ -275,6 +283,13 @@ SignatureRequest.prototype.renderFooter = function () { className: 'request-signature__footer__sign-button', onClick: event => { sign(event).then(() => { + this.context.metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Sign Request', + name: 'Confirm', + }, + }) this.props.clearConfirmTransaction() this.props.history.push(DEFAULT_ROUTE) }) diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js index 75ba347fa..d9c80b4f4 100644 --- a/ui/app/components/token-cell.js +++ b/ui/app/components/token-cell.js @@ -1,4 +1,5 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect @@ -40,6 +41,10 @@ function TokenCell () { } } +TokenCell.contextTypes = { + metricsEvent: PropTypes.func, +} + TokenCell.prototype.render = function () { const { tokenMenuOpen } = this.state const props = this.props @@ -88,6 +93,13 @@ TokenCell.prototype.render = function () { // onClick: this.view.bind(this, address, userAddress, network), onClick: () => { setSelectedToken(address) + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Token Menu', + name: 'Clicked Token', + }, + }) selectedTokenAddress !== address && sidebarOpen && hideSidebar() }, }, [ diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.component.js b/ui/app/components/transaction-activity-log/transaction-activity-log.component.js index 4e4e553c0..ca46d7830 100644 --- a/ui/app/components/transaction-activity-log/transaction-activity-log.component.js +++ b/ui/app/components/transaction-activity-log/transaction-activity-log.component.js @@ -10,6 +10,7 @@ import prefixForNetwork from '../../../lib/etherscan-prefix-for-network' export default class TransactionActivityLog extends PureComponent { static contextTypes = { t: PropTypes.func, + metricEvent: PropTypes.func, } static propTypes = { diff --git a/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js index eaf1166f0..3e39212d3 100644 --- a/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js +++ b/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js @@ -12,6 +12,7 @@ import prefixForNetwork from '../../../lib/etherscan-prefix-for-network' export default class TransactionListItemDetails extends PureComponent { static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } static propTypes = { @@ -33,6 +34,14 @@ export default class TransactionListItemDetails extends PureComponent { const prefix = prefixForNetwork(metamaskNetworkId) const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}` + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Activity Log', + name: 'Clicked "View on Etherscan"', + }, + }) + global.platform.openWindow({ url: etherscanUrl }) } @@ -55,6 +64,14 @@ export default class TransactionListItemDetails extends PureComponent { const { primaryTransaction: transaction } = transactionGroup const { hash } = transaction + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Activity Log', + name: 'Copied Transaction ID', + }, + }) + this.setState({ justCopied: true }, () => { copyToClipboard(hash) setTimeout(() => this.setState({ justCopied: false }), 1000) @@ -125,6 +142,24 @@ export default class TransactionListItemDetails extends PureComponent { addressOnly recipientAddress={to} senderAddress={from} + onRecipientClick={() => { + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Activity Log', + name: 'Copied "To" Address', + }, + }) + }} + onSenderClick={() => { + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Activity Log', + name: 'Copied "From" Address', + }, + }) + }} /> </div> <div className="transaction-list-item-details__cards-container"> diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js index 29d3a7b1f..e843fe1a0 100644 --- a/ui/app/components/transaction-list-item/transaction-list-item.component.js +++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js @@ -38,6 +38,10 @@ export default class TransactionListItem extends PureComponent { showFiat: true, } + static contextTypes = { + metricsEvent: PropTypes.func, + } + state = { showTransactionDetails: false, } @@ -55,6 +59,16 @@ export default class TransactionListItem extends PureComponent { return } + if (!showTransactionDetails) { + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Home', + name: 'Expand Transaction', + }, + }) + } + this.setState({ showTransactionDetails: !showTransactionDetails }) } diff --git a/ui/app/components/transaction-view-balance/tests/token-view-balance.component.test.js b/ui/app/components/transaction-view-balance/tests/token-view-balance.component.test.js index 513a8aac9..efc987371 100644 --- a/ui/app/components/transaction-view-balance/tests/token-view-balance.component.test.js +++ b/ui/app/components/transaction-view-balance/tests/token-view-balance.component.test.js @@ -16,6 +16,7 @@ const historySpies = { } const t = (str1, str2) => str2 ? str1 + str2 : str1 +const metricsEvent = () => ({}) describe('TransactionViewBalance Component', () => { afterEach(() => { @@ -31,7 +32,7 @@ describe('TransactionViewBalance Component', () => { ethBalance={123} fiatBalance={456} currentCurrency="usd" - />, { context: { t } }) + />, { context: { t, metricsEvent } }) assert.equal(wrapper.find('.transaction-view-balance').length, 1) assert.equal(wrapper.find('.transaction-view-balance__button').length, 2) diff --git a/ui/app/components/transaction-view-balance/transaction-view-balance.component.js b/ui/app/components/transaction-view-balance/transaction-view-balance.component.js index b16e04f4f..a18e959b5 100644 --- a/ui/app/components/transaction-view-balance/transaction-view-balance.component.js +++ b/ui/app/components/transaction-view-balance/transaction-view-balance.component.js @@ -12,6 +12,7 @@ import Tooltip from '../tooltip-v2' export default class TransactionViewBalance extends PureComponent { static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } static propTypes = { @@ -78,7 +79,7 @@ export default class TransactionViewBalance extends PureComponent { } renderButtons () { - const { t } = this.context + const { t, metricsEvent } = this.context const { selectedToken, showDepositModal, history } = this.props return ( @@ -88,7 +89,16 @@ export default class TransactionViewBalance extends PureComponent { <Button type="primary" className="transaction-view-balance__button" - onClick={() => showDepositModal()} + onClick={() => { + metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Home', + name: 'Clicked Deposit', + }, + }) + showDepositModal() + }} > { t('deposit') } </Button> @@ -97,7 +107,16 @@ export default class TransactionViewBalance extends PureComponent { <Button type="primary" className="transaction-view-balance__button" - onClick={() => history.push(SEND_ROUTE)} + onClick={() => { + metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Home', + name: 'Clicked Send', + }, + }) + history.push(SEND_ROUTE) + }} > { t('send') } </Button> diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 4566cb390..400b9aa90 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -26,6 +26,7 @@ module.exports = compose( WalletView.contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } WalletView.defaultProps = { @@ -39,7 +40,6 @@ function mapStateToProps (state) { sidebarOpen: state.appState.sidebar.isOpen, identities: state.metamask.identities, accounts: selectors.getMetaMaskAccounts(state), - tokens: state.metamask.tokens, keyrings: state.metamask.keyrings, selectedAddress: selectors.getSelectedAddress(state), selectedAccount: selectors.getSelectedAccount(state), @@ -110,6 +110,13 @@ WalletView.prototype.renderAddToken = function () { return h(AddTokenButton, { onClick () { history.push(ADD_TOKEN_ROUTE) + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Token Menu', + name: 'Clicked "Add Token"', + }, + }) if (sidebarOpen) { hideSidebar() } @@ -197,6 +204,13 @@ WalletView.prototype.render = function () { }), onClick: () => { copyToClipboard(checksummedAddress) + this.context.metricsEvent({ + eventOpts: { + category: 'Activation', + action: 'userClicks', + name: 'navCopyToClipboard', + }, + }) this.setState({ hasCopied: true }) setTimeout(() => this.setState({ hasCopied: false }), 3000) }, |