diff --git a/.storybook/metametrics.js b/.storybook/metametrics.js index 387b0d467..dca27aadd 100644 --- a/.storybook/metametrics.js +++ b/.storybook/metametrics.js @@ -1,8 +1,4 @@ import React from 'react'; -import { - MetaMetricsProvider, - LegacyMetaMetricsProvider, -} from '../ui/contexts/metametrics'; import { MetaMetricsProvider as NewMetaMetricsProvider, LegacyMetaMetricsProvider as NewLegacyMetaMetricsProvider, @@ -10,15 +6,11 @@ import { const MetaMetricsProviderStorybook = (props) => ( - - {props.children} - - ); export default MetaMetricsProviderStorybook \ No newline at end of file diff --git a/ui/contexts/metametrics.js b/ui/contexts/metametrics.js deleted file mode 100644 index 869cb84e2..000000000 --- a/ui/contexts/metametrics.js +++ /dev/null @@ -1,152 +0,0 @@ -import React, { - Component, - createContext, - useEffect, - useCallback, - useState, -} from 'react'; -import { useSelector } from 'react-redux'; -import PropTypes from 'prop-types'; -import { useHistory } from 'react-router-dom'; -import { captureException } from '@sentry/browser'; - -import { - getAccountType, - getNumberOfAccounts, - getNumberOfTokens, -} from '../selectors/selectors'; -import { getSendAsset } from '../ducks/send'; -import { txDataSelector } from '../selectors/confirm-transaction'; -import { getEnvironmentType } from '../../app/scripts/lib/util'; -import { trackMetaMetricsEvent } from '../store/actions'; -import { getNativeCurrency } from '../ducks/metamask/metamask'; -import { ASSET_TYPES } from '../../shared/constants/transaction'; - -export const MetaMetricsContext = createContext(() => { - captureException( - Error( - `MetaMetrics context function was called from a react node that is not a descendant of a MetaMetrics context provider`, - ), - ); -}); - -export function MetaMetricsProvider({ children }) { - const txData = useSelector(txDataSelector) || {}; - const environmentType = getEnvironmentType(); - const activeAsset = useSelector(getSendAsset); - const nativeAssetSymbol = useSelector(getNativeCurrency); - const accountType = useSelector(getAccountType); - const confirmTransactionOrigin = txData.origin; - const numberOfTokens = useSelector(getNumberOfTokens); - const numberOfAccounts = useSelector(getNumberOfAccounts); - const history = useHistory(); - const [state, setState] = useState(() => ({ - currentPath: new URL(window.location.href).pathname, - previousPath: '', - })); - - const { currentPath } = state; - - useEffect(() => { - const unlisten = history.listen(() => - setState((prevState) => ({ - currentPath: new URL(window.location.href).pathname, - previousPath: prevState.currentPath, - })), - ); - // remove this listener if the component is no longer mounted - return unlisten; - }, [history]); - - const metricsEvent = useCallback( - (config = {}, overrides = {}) => { - const { eventOpts = {} } = config; - const referrer = confirmTransactionOrigin - ? { url: confirmTransactionOrigin } - : undefined; - const page = { - path: currentPath, - }; - return trackMetaMetricsEvent( - { - event: eventOpts.name, - category: eventOpts.category, - properties: { - action: eventOpts.action, - number_of_tokens: numberOfTokens, - number_of_accounts: numberOfAccounts, - active_currency: - activeAsset.type === ASSET_TYPES.NATIVE - ? nativeAssetSymbol - : activeAsset?.details?.symbol, - account_type: accountType, - is_new_visit: config.is_new_visit, - // the properties coming from this key will not match our standards for - // snake_case on properties, and they may be redundant and/or not in the - // proper location (origin not as a referrer, for example). This is a temporary - // solution to not lose data, and the entire event system will be reworked in - // forthcoming PRs to deprecate the old Matomo events in favor of the new schema. - ...config.customVariables, - }, - page, - referrer, - environmentType, - }, - { - isOptIn: config.isOptIn, - excludeMetaMetricsId: - eventOpts.excludeMetaMetricsId ?? - overrides.excludeMetaMetricsId ?? - false, - metaMetricsId: config.metaMetricsId, - matomoEvent: true, - flushImmediately: config.flushImmediately, - }, - ); - }, - [ - accountType, - currentPath, - confirmTransactionOrigin, - activeAsset, - nativeAssetSymbol, - numberOfTokens, - numberOfAccounts, - environmentType, - ], - ); - - return ( - - {children} - - ); -} - -MetaMetricsProvider.propTypes = { children: PropTypes.node }; - -export class LegacyMetaMetricsProvider extends Component { - static propTypes = { - children: PropTypes.node, - }; - - static defaultProps = { - children: undefined, - }; - - static contextType = MetaMetricsContext; - - static childContextTypes = { - metricsEvent: PropTypes.func, - }; - - getChildContext() { - return { - metricsEvent: this.context, - }; - } - - render() { - return this.props.children; - } -} diff --git a/ui/pages/index.js b/ui/pages/index.js index 3033e2946..05dc5072e 100644 --- a/ui/pages/index.js +++ b/ui/pages/index.js @@ -4,10 +4,6 @@ import { Provider } from 'react-redux'; import { HashRouter } from 'react-router-dom'; import * as Sentry from '@sentry/browser'; import { I18nProvider, LegacyI18nProvider } from '../contexts/i18n'; -import { - MetaMetricsProvider, - LegacyMetaMetricsProvider, -} from '../contexts/metametrics'; import { MetaMetricsProvider as NewMetaMetricsProvider, LegacyMetaMetricsProvider as NewLegacyMetaMetricsProvider, @@ -45,19 +41,15 @@ class Index extends PureComponent { return ( - - - - - - - - - - - - - + + + + + + + + + );